Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(plugin): create plugin to integrate modules #462

Merged
merged 41 commits into from Feb 29, 2024
Merged

Conversation

dsurducan
Copy link
Contributor

@dsurducan dsurducan commented Jan 10, 2024

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

@dsurducan dsurducan requested a review from a team as a code owner January 10, 2024 16:54
@dsurducan dsurducan force-pushed the widgets-build branch 4 times, most recently from efcff83 to c8c6e94 Compare January 10, 2024 17:26
packages/pages/src/common/src/widget/types.ts Outdated Show resolved Hide resolved
packages/pages/src/common/src/widget/types.ts Outdated Show resolved Hide resolved
packages/pages/src/common/src/widget/types.ts Outdated Show resolved Hide resolved
packages/pages/src/common/src/widget/types.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/build/build.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/widgets/plugin.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/widgets/plugin.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/widgets/plugin.ts Outdated Show resolved Hide resolved
package-lock.json Outdated Show resolved Hide resolved
@dsurducan dsurducan changed the title create plugin to integrate widgets feat(plugin): create plugin to integrate widgets Jan 10, 2024
pnpm-lock.yaml Show resolved Hide resolved
@asanehisa asanehisa marked this pull request as draft February 14, 2024 21:50
packages/pages/src/common/src/module/types.ts Outdated Show resolved Hide resolved
packages/pages/src/common/src/module/types.ts Outdated Show resolved Hide resolved
packages/pages/src/common/src/module/types.ts Outdated Show resolved Hide resolved
packages/pages/src/common/src/module/types.ts Outdated Show resolved Hide resolved
packages/pages/src/common/src/parsers/sourceFileParser.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/modules/plugin.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/modules/plugin.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/modules/plugin.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/modules/plugin.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/modules/plugin.ts Outdated Show resolved Hide resolved
packages/pages/src/util/editConfigYaml.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/modules/plugin.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/modules/plugin.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/modules/plugin.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/modules/plugin.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/modules/plugin.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/modules/plugin.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/modules/plugin.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/modules/plugin.ts Outdated Show resolved Hide resolved
packages/pages/src/common/src/parsers/sourceFileParser.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/modules/plugin.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/modules/plugin.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/modules/plugin.ts Outdated Show resolved Hide resolved
packages/pages/src/vite-plugin/modules/plugin.ts Outdated Show resolved Hide resolved
mkilpatrick
mkilpatrick previously approved these changes Feb 29, 2024
@mkilpatrick mkilpatrick changed the title feat(plugin): create plugin to integrate widgets feat(plugin): create plugin to integrate modules Feb 29, 2024
@asanehisa asanehisa merged commit a7ad9ea into main Feb 29, 2024
15 checks passed
@asanehisa asanehisa deleted the widgets-build branch February 29, 2024 21:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants