Skip to content

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

Merged
asanehisa merged 41 commits intomainfrom
widgets-build
Feb 29, 2024
Merged

feat(plugin): create plugin to integrate modules#462
asanehisa merged 41 commits intomainfrom
widgets-build

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
@dsurducan dsurducan changed the title create plugin to integrate widgets feat(plugin): create plugin to integrate widgets Jan 10, 2024
@asanehisa asanehisa marked this pull request as draft February 14, 2024 21:50
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
@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.

3 participants