@alisonc/squidget-hello

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

• 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 to dist/my-theme-components/my-theme-components.js and find + remove window.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), and jwt fields for squatch initObj in config
  • jwt can be generated at https://jwt.io using the user object from config as the payload

    {
       "user":{
          "id":"my-user-id",
          "accountId":"my-account-id"
       }
    }
    

    and your tenant's API key in the Verify Signature section
  • Reload config