Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(plugin): create plugin to integrate modules (#462)
Allows clients to create "modules". See my test modules here: https://github.com/asanehisa/widgets-test-site/tree/main/src/modules Hosted here: https://www.yext.com/s/4059983/yextsites/134396/branch/96516/deploys/recent?b=4059983 example use case: to allow clients to put react Search SDK on their non react pages (similar to how we used to iframe the Search Theme in the past) All a user would need to do to have this work is: 1. create a separate folder under the "modules" subfolder in the pages-starter for each module with the name of the folder corresponding to the name of the module (ex. "`search`") which will be what is used when packaging into a umd module (ex. `search.umd.js`) In each folder they can have: - The main module file (ex `search.tsx`) (this will contain all of the logic and configuration that pages allows you to provide, some variable of type Module is required. If ModuleConfig is configured, it'll use the provided name.) - `tailwind.config.ts file` - `postcss.config.cjs file` that specifies the path of the tailwind config file they want the module to use `module.exports = { plugins: { "tailwindcss": {config: './tailwind-config.ts' }, "autoprefixer": {}, }, };` Also ensure the css code (if used) is scoped properly to the widget. It can affect code in the non-react site if not. This also adds response headers to the `config.yaml` such that different sites can import the widget. This can be manually changed to only allow certain sites to use the widget. Here is a test site to see how modules appear. https://vibrantly-plain-lark.pgsdemo.com/test.html To inject a module into non-react site the following is required: ``` <div id="moduleName"> </div> <script type="module" src="moduleUrl"></script> ``` Here's my most recent instructions / setup guide: https://snapdragon-hat-825.notion.site/Widgets-in-PagesJS-fc01b4e61005482e92ec4ebee462e603?pvs=4 --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Alexis Sanehisa <asanehisa@yext.com> Co-authored-by: Alexis Sanehisa <106991746+asanehisa@users.noreply.github.com>
- Loading branch information
4 people
committed
Feb 29, 2024
1 parent
434121d
commit a7ad9ea
Showing
27 changed files
with
799 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <!-- Do not edit this file. It is automatically generated by API Documenter. --> | ||
|
|
||
| [Home](./index.md) > [@yext/pages](./pages.md) > [Module](./pages.module.md) | ||
|
|
||
| ## Module type | ||
|
|
||
| The type definition for the module's default function. | ||
|
|
||
| **Signature:** | ||
|
|
||
| ```typescript | ||
| export type Module = () => React.JSX.Element; | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <!-- Do not edit this file. It is automatically generated by API Documenter. --> | ||
|
|
||
| [Home](./index.md) > [@yext/pages](./pages.md) > [ModuleConfig](./pages.moduleconfig.md) | ||
|
|
||
| ## ModuleConfig interface | ||
|
|
||
| The configuration options for a Module. | ||
|
|
||
| **Signature:** | ||
|
|
||
| ```typescript | ||
| export interface ModuleConfig | ||
| ``` | ||
|
|
||
| ## Properties | ||
|
|
||
| | Property | Modifiers | Type | Description | | ||
| | ------------------------------------- | --------- | ------ | -------------------------------------------------------------------------------------------- | | ||
| | [name?](./pages.moduleconfig.name.md) | | string | _(Optional)_ Name of the module. If not defined uses the module filename (without extension) | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <!-- Do not edit this file. It is automatically generated by API Documenter. --> | ||
|
|
||
| [Home](./index.md) > [@yext/pages](./pages.md) > [ModuleConfig](./pages.moduleconfig.md) > [name](./pages.moduleconfig.name.md) | ||
|
|
||
| ## ModuleConfig.name property | ||
|
|
||
| Name of the module. If not defined uses the module filename (without extension) | ||
|
|
||
| **Signature:** | ||
|
|
||
| ```typescript | ||
| name?: string; | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <!-- Do not edit this file. It is automatically generated by API Documenter. --> | ||
|
|
||
| [Home](./index.md) > [@yext/pages](./pages.md) > [ModuleProps](./pages.moduleprops.md) > [\_\_meta](./pages.moduleprops.__meta.md) | ||
|
|
||
| ## ModuleProps.\_\_meta property | ||
|
|
||
| Additional metadata added by the toolchain | ||
|
|
||
| **Signature:** | ||
|
|
||
| ```typescript | ||
| __meta: { | ||
| mode: "development" | "production"; | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <!-- Do not edit this file. It is automatically generated by API Documenter. --> | ||
|
|
||
| [Home](./index.md) > [@yext/pages](./pages.md) > [ModuleProps](./pages.moduleprops.md) | ||
|
|
||
| ## ModuleProps interface | ||
|
|
||
| The shape of the data passed directly to the module's default export. | ||
|
|
||
| **Signature:** | ||
|
|
||
| ```typescript | ||
| export interface ModuleProps | ||
| ``` | ||
|
|
||
| ## Properties | ||
|
|
||
| | Property | Modifiers | Type | Description | | ||
| | ----------------------------------------- | --------- | ---------------------------------------- | ------------------------------------------ | | ||
| | [\_\_meta](./pages.moduleprops.__meta.md) | | { mode: "development" \| "production"; } | Additional metadata added by the toolchain | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| /** | ||
| * The type definition for the module's default function. | ||
| * | ||
| * @public | ||
| */ | ||
| export type Module = () => React.JSX.Element; | ||
|
|
||
| /** | ||
| * The configuration options for a Module. | ||
| * | ||
| * @public | ||
| */ | ||
| export interface ModuleConfig { | ||
| /** Name of the module. If not defined uses the module filename (without extension) */ | ||
| name?: string; | ||
| } | ||
|
|
||
| /** | ||
| * The shape of the data passed directly to the module's default export. | ||
| * | ||
| * @public | ||
| */ | ||
| export interface ModuleProps { | ||
| /** Additional metadata added by the toolchain */ | ||
| __meta: { | ||
| /** Specifies if the data is returned in development or production mode */ | ||
| mode: "development" | "production"; | ||
| }; | ||
| } |
Oops, something went wrong.