How to build and deploy custom widgets
-
Copy the
widget-starter
folder and rename as needed -
Create new components in ./src/components as new folders, for example ./src/components/sqh-my-component
- Components should be built using the HVC pattern
- Controller should match the name of the folder: sqh-my-component.tsx
- View should match the controller name + "view": sqh-my-component-view.tsx
- Hook should have the prefix "use" and the Controller's class name: useMyComponent.ts
- Stories should be added to provide visuals of each possible state of the component (MyComponent.stories.tsx) and imported into sqh-stencilbook.tsx. Be sure to import any mixins used in your components into sqh-stencilbook.scss
-
Before you begin:
- Edit stencil.config.ts - update namespace to
my-theme-components
- Edit package.json - update name to
@saasquatch-themes/my-theme-components
- Edit stencil.config.ts - update namespace to
-
Develop Stencil components locally
npm start
- Edit html: index.html
-
Build and publish to NPM under personal user to
@saasquatch-themes/my-theme-components@1.0.0
npm login
-
npm run build
2a. Navigate todist/my-theme-components/my-theme-components.js
and find + removewindow.location.origin
from the built file (only needed if loading these components in an iframe) npm publish --access public
-
Implement widget in portal widget editor
-
Reference deployed components in advanced section of the widget editor:
dependencies:
package: @saasquatch-themes/my-theme-components version: 1.0.0 filePath: /dist/mint-components/my-theme-components.js
plugins:
package: @saasquatch-themes/my-theme-components version: 1.0.0 filePath: /grapesjs/grapesjs.js
-
Import custom html from index.html
-
-
Test widget in browser using squatch.js library
- go to http://squathjs-demo.surge.sh
- Fill out
tenantAlias
,domain
,user
,widgetType
(p/[programId]/w/referrerWidget
), andjwt
fields for squatchinitObj
in config -
jwt can be generated at https://jwt.io using the user object from config as the payload
and your tenant's API key in the Verify Signature section{ "user":{ "id":"my-user-id", "accountId":"my-account-id" } }
- Reload config