@saasquatch/squatch-js 2.6.0-9 → 2.6.1-0

package/CHANGELOG.md

@@ -10,6 +10,63 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added custom web-components `squatch-embed` and `squatch-popup` for easier widget rendering.
 - Support for additional namespacing of squatchjs
 
+## [2.6.0] - 2023-08-23
+
+### Added
+
+- SquatchJS now supports declarative widget initialization
+
+  - For rendering widgets and API calls, squatchjs respects configurations set on the following:
+
+    - `window.squatchToken`: Signed JWT for calls to the SaaSquatch API -- [How to generate valid JWT Tokens](https://docs.saasquatch.com/topics/json-web-tokens#example-building-the-jwt)
+    - `window.squatchTenant`: SaaSquatch tenant alias
+    - `window.squatchConfig`: Additional configuration overrides (Optional)
+      - debug: Turn on console debugging (Default: false)
+    - `window.squatchOnReady`: Declarative on ready function to be run when the squatch-js module has finished loading
+
+  - Note: If window.squatchToken is undefined, widgets will be rendered as [Instant Access widgets.](https://docs.saasquatch.com/topics/widget-types#instant-access-widgets)
+
+- Widget components added:
+
+  - `<squatch-embed></squatch-embed>`
+
+    - widget: Specifies the SaaSquatch widgetType identifier of the desired widget
+      - Required
+      - Changing this attribute's value causes the widget to reload
+    - container: A CSS selector for a container element to use as the parent of the widget's iframe
+      - Default: null
+      - Note, if no container is specified, the widget iframe will attach to the shadow DOM of squatch-embed
+    - locale: Locale that determines the widget translation displayed. Should be of the form "xx_XX"
+    - Default: Browser's current locale
+    - Changing this attribute's value causes the widget to reload
+
+  - `<squatch-popup></squatch-popup>`
+    - widget: string: Specifies the SaaSquatch widgetType identifier of the desired widget
+      - Required
+    - open: boolean: Whether to the popup is open when loaded into the page
+      - Default: false
+    - container: A CSS selector for a container element to use as the parent of the widget's iframe.
+      - Default: null
+      - Note, if no container is specified, the widget iframe will attach to the shadow DOM of squatch-embed.
+    - locale: Locale that determines the widget translation displayed. Should be of the form "xx_XX".
+      - Default: Browser's current locale
+      - Changing this attribute's value causes the widget to reload.
+
+### Removed
+
+- Deprecated api functions have been removed
+  - Removed functions:
+    - `squatch.api().invite()`
+    - `squatch.submitEmail()`
+  - Removed widgets:
+    - `CtaWidget`
+
+### Changed
+
+- Bundle size reduced significantly thanks to the removal of deprecated features and other optimizations
+  - Before: 19.75 kB
+  - After: 12.06 kB
+
 ## [2.5.0] - 2023-05-16
 
 ### Removed
@@ -33,7 +90,7 @@ var initObj = {
 squatch
   .widget(initObj)
   .then(function (response) {
-    const widget = response.widget
+    const widget = response.widget;
   })
   .catch(function (error) {
     console.log(error);
@@ -47,6 +104,7 @@ squatch
 ## [2.4.3] - 2023-04-20
 
 ### Changed
+
 - Updated license copyright to be in line with SaaSquatch open-source policy.
 
 ## [2.4.2] - 2023-04-10
@@ -290,7 +348,8 @@ No release notes.
 
 No release notes.
 
-[unreleased]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.5.0...HEAD
+[unreleased]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.6.0...HEAD
+[2.6.0]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.5.0...@saasquatch%2Fsquatch-js@2.6.0
 [2.5.0]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.4.1...@saasquatch%2Fsquatch-js@2.5.0
 [2.4.3]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.4.2...@saasquatch%2Fsquatch-js@2.4.3
 [2.4.2]: https://github.com/saasquatch/squatch-js/compare/@saasquatch%2Fsquatch-js@2.4.1...@saasquatch%2Fsquatch-js@2.4.2

package/README.md

@@ -4,7 +4,7 @@
   - [Install the library](#install-the-library)
   - [Getting Started](#getting-started)
   - [Data Only Operations](#data-only-operations)
-      - [Create/upsert users without loading a widget.](#createupsert-users-without-loading-a-widget)
+    - [Create/upsert users without loading a widget.](#createupsert-users-without-loading-a-widget)
   - [Get Referral Cookie Code](#get-referral-cookie-code)
   - [Install via NPM and Webpack (advanced)](#install-via-npm-and-webpack-advanced)
   - [Component API:](#component-api)
@@ -15,14 +15,28 @@
   - [Contributing](#contributing)
   - [Support](#support)
 
-
 ## Install the library
 
 To integrate any SaaSquatch program to your website or web app, copy/paste this snippet of JavaScript above the `</head>` tag of your page:
 
 ```html
 <script type="text/javascript">
-!function(a,b){a("squatch","https://fast.ssqt.io/squatch-js@2",b)}(function(a,b,c){var d,e,f;c["_"+a]={},c[a]={},c[a].ready=function(b){c["_" + a].ready =  c["_" + a].ready || [];c["_" + a].ready.push(b);},e=document.createElement("script"),e.async=1,e.src=b,f=document.getElementsByTagName("script")[0],f.parentNode.insertBefore(e,f)},this);
+  !(function (a, b) {
+    a("squatch", "https://fast.ssqt.io/squatch-js@2", b);
+  })(function (a, b, c) {
+    var d, e, f;
+    (c["_" + a] = {}),
+      (c[a] = {}),
+      (c[a].ready = function (b) {
+        c["_" + a].ready = c["_" + a].ready || [];
+        c["_" + a].ready.push(b);
+      }),
+      (e = document.createElement("script")),
+      (e.async = 1),
+      (e.src = b),
+      (f = document.getElementsByTagName("script")[0]),
+      f.parentNode.insertBefore(e, f);
+  }, this);
 </script>
 ```
 
@@ -32,32 +46,54 @@ Or load the library synchronously from our CDN:
 <script src="https://fast.ssqt.io/squatch-js@2" type="text/javascript"></script>
 ```
 
-
 ## Getting Started
 
 Include either of the squatchjs generated web-components in your page's HTML to render your desired widget:
+
 ```html
 <!-- EMBED WIDGET -->
-<squatch-embed widget="WIDGET_TYPE"><!-- Widget is rendered here --></squatch-embed>
+<squatch-embed widget="WIDGET_TYPE"
+  ><!-- Widget is rendered here --></squatch-embed
+>
 
 <!-- POPUP WIDGET -->
-<squatch-popup widget="WIDGET_TYPE"><!-- Widget is rendered here --></squatch-popup>
+<squatch-popup widget="WIDGET_TYPE"
+  ><!-- Widget is rendered here --></squatch-popup
+>
 ```
-For rendering widgets and API calls, squatchjs respects configurations set on the following:
-  - `window.squatchToken`: Signed JWT for calls to the SaaSquatch API -- [How to generate valid JWT Tokens](https://docs.saasquatch.com/topics/json-web-tokens#example-building-the-jwt)
-  - `window.squatchTenant`: SaaSquatch tenant alias
-  - `window.squatchConfig`: Additional configuration overrides (Optional)
-    - `debug`: Turn on console debugging (Default: `false`)
-
-**Note**: If `window.squatchToken` is undefined, widgets will be rendered as [Instant Access widgets](https://docs.saasquatch.com/topics/widget-types#instant-access-widgets).
-
 
+For rendering widgets and API calls, squatchjs respects configurations set on the following:
 
+- `window.squatchToken`: Signed JWT for calls to the SaaSquatch API -- [How to generate valid JWT Tokens](https://docs.saasquatch.com/topics/json-web-tokens#example-building-the-jwt)
+- `window.squatchTenant`: SaaSquatch tenant alias
+- `window.squatchConfig`: Additional configuration overrides (Optional)
+  - `debug`: Turn on console debugging (Default: `false`)
+- `window.squatchOnReady`: Declarative on ready function to be run when the squatch-js module has finished loading
+
+  ```html
+  <script type="text/javascript">
+    window.squatchOnReady = () => {
+          squatch.widgets().upsertUser({
+        user: {                               // Object (required)
+          id: 'USER_ID',                      // String (required)
+          accountId: 'USER_ACCOUNT_ID',       // String (required)
+          email: 'USER_EMAIL',                // String (optional)
+          firstName: 'USER_FIRST_NAME',       // String (optional)
+          lastName: 'USER_LAST_NAME',         // String (optional)
+
+          ...
+        },
+        engagementMedium: 'EMBED',                    // String (optional: POPUP, EMBED)
+        widgetType: 'p/PROGRAM-ID/w/referrerWidget',  // Update PROGRAM-ID
+      });
+    }
+  </script>
+  ```
 
+**Note**: If `window.squatchToken` is undefined, widgets will be rendered as [Instant Access widgets](https://docs.saasquatch.com/topics/widget-types#instant-access-widgets).
 
 ## Data Only Operations
 
-
 #### Create/upsert users without loading a widget.
 
 ```html
@@ -93,27 +129,28 @@ For rendering widgets and API calls, squatchjs respects configurations set on th
 ```
 
 ## Get Referral Cookie Code
+
 You can also use the `api()` function to call the WidgetApi methods directly.
 
 ```html
 <script type="text/javascript">
-  squatch.ready(function(){
+  squatch.ready(function () {
+    var element = document.getElementById("my_coupon");
 
-    var element = document.getElementById('my_coupon');
-
-    squatch.api().squatchReferralCookie().then(function(response) {
-      /* `response.codes` looks like `{"program_id":"NEWCO", "friend_program":"BOB"}` */
-      
-      element.value = response.codes["program-id"];
-    });
+    squatch
+      .api()
+      .squatchReferralCookie()
+      .then(function (response) {
+        /* `response.codes` looks like `{"program_id":"NEWCO", "friend_program":"BOB"}` */
 
+        element.value = response.codes["program-id"];
+      });
   });
 </script>
 ```
 
 Want more control? Visit our [guide](https://github.com/saasquatch/squatch-js/blob/master/docs/docs.md).
 
-
 ## Install via NPM and Webpack (advanced)
 
 Squatch.js can also be installed via NPM and bundled into your application with Webpack.
@@ -139,6 +176,7 @@ squatch.api().upsertUser({...});
 ## Component API:
 
 ### `squatch-embed`
+
 ```html
 <squatch-embed widget="WIDGET_TYPE" [ container="#selector" | locale="en_US" ]>
   <!-- Children of squatch-embed act as a loading state -->
@@ -149,7 +187,7 @@ squatch.api().upsertUser({...});
 - `widget`: Specifies the SaaSquatch `widgetType` identifier of the desired widget
   - Required
   - Changing this attribute's value causes the widget to reload.
-- `container`: A CSS selector for a container element to use as the parent of the widget's iframe. 
+- `container`: A CSS selector for a container element to use as the parent of the widget's iframe.
   - Default: `null`
   - Note, if no container is specified, the widget iframe will attach to the shadow DOM of `squatch-embed`.
 - `locale`: Locale that determines the widget translation displayed. Should be of the form "xx_XX".
@@ -157,10 +195,20 @@ squatch.api().upsertUser({...});
   - Changing this attribute's value causes the widget to reload.
 
 ### `squatch-popup`
+
 ```html
-<squatch-embed widget="WIDGET_TYPE" [ open | container="#selector" | locale="en_US" ]>
+<squatch-embed
+  widget="WIDGET_TYPE"
+  [
+  open
+  |
+  container="#selector"
+  |
+  locale="en_US"
+  ]
+>
   <!-- Clicking a child of squatch-popup opens the popup -->
-  <button>Click me to open</button> 
+  <button>Click me to open</button>
 </squatch-embed>
 ```
 
@@ -168,7 +216,7 @@ squatch.api().upsertUser({...});
   - Required
 - `open: boolean`: Whether to the popup is open when loaded into the page
   - Default: `false`
-- `container`: A CSS selector for a container element to use as the parent of the widget's iframe. 
+- `container`: A CSS selector for a container element to use as the parent of the widget's iframe.
   - Default: `null`
   - Note, if no container is specified, the widget iframe will attach to the shadow DOM of `squatch-embed`.
 - `locale`: Locale that determines the widget translation displayed. Should be of the form "xx_XX".
@@ -178,6 +226,7 @@ squatch.api().upsertUser({...});
 ## Legacy
 
 ### Rendering a widget via Widgets API
+
 Note: `engagementMedium` is required in the `squatch.widgets()` functions if you want to load the widget. Otherwise, squatch.js will look for your portal settings and render the widget that's mapped to the URL where this snippet is included.
 
 ```html
@@ -191,7 +240,7 @@ Note: `engagementMedium` is required in the `squatch.widgets()` functions if you
         email: 'USER_EMAIL',                // String (optional)
         firstName: 'USER_FIRST_NAME',       // String (optional)
         lastName: 'USER_LAST_NAME',         // String (optional)
-  
+
         ...
       },
       engagementMedium: 'EMBED',                    // String (optional: POPUP, EMBED)
@@ -202,7 +251,9 @@ Note: `engagementMedium` is required in the `squatch.widgets()` functions if you
 ```
 
 ## Contributing
+
 This is an open source project! If you are interested in contributing please look at [contributing guidelines](CONTRIBUTING.md) first.
 
 ## Support
+
 Shoot us an email at [support@saasqt.ch](mailto:support@saasqt.ch) if you need help!

package/dist/api/WidgetApi.d.ts

@@ -60,4 +60,5 @@ export default class WidgetApi {
      * @return {Promise<ReferralCookie>} code referral code if true.
      */
     squatchReferralCookie(): Promise<ReferralCookie>;
+    referralCookie: () => Promise<ReferralCookie>;
 }

package/dist/squatch.esm.js

@@ -213,6 +213,7 @@ class WidgetApi {
     this.tenantAlias = void 0;
     this.domain = void 0;
     this.npmCdn = void 0;
+    this.referralCookie = this.squatchReferralCookie;
     var raw = config;
     var clean = validateConfig(raw);
     this.tenantAlias = clean.tenantAlias;
@@ -421,6 +422,8 @@ var _log$8 = debug("squatch-js:widget");
 
 class Widget {
   constructor(params) {
+    var _params$context;
+
     this.type = void 0;
     this.content = void 0;
     this.analyticsApi = void 0;
@@ -439,7 +442,7 @@ class Widget {
       domain: params.domain
     });
     this.context = params.context;
-    this.container = params.container || params.context.container;
+    this.container = ((_params$context = params.context) == null ? void 0 : _params$context.container) || params.container;
   }
 
   _findElement() {
@@ -740,10 +743,19 @@ class EmbedWidget extends Widget {
   }
 
   async load() {
+    var _this$context;
+
     var frame = this._createFrame();
 
     var element = this._findElement();
 
+    if ((_this$context = this.context) != null && _this$context.container) {
+      // Custom container is used
+      element.style.visibility = "hidden";
+      element.style.height = "0";
+      element.style["overflow-y"] = "hidden";
+    }
+
     if (this.container) {
       if (element.shadowRoot) {
         var _element$shadowRoot$l;
@@ -791,6 +803,7 @@ class EmbedWidget extends Widget {
           } = entry.contentRect; // @ts-ignore -- number will be cast to string by browsers
 
           frame.height = height;
+          console.log("RESIZE");
         }
       });
       var container = await this._findInnerContainer(frame);
@@ -1486,27 +1499,27 @@ function _validateTrackOptions(raw) {
 /** @hidden */
 
 function asyncLoad() {
+  var _window;
+
   var namespace = window[IMPACT_NAMESPACE] ? IMPACT_NAMESPACE : DEFAULT_NAMESPACE;
-  var loaded = window[namespace] || null;
-  var cached = window["_" + namespace] || null;
+  var cached = ((_window = window["_" + namespace]) == null ? void 0 : _window.ready) || [];
   var declarativeCache = window.impactOnReady || window.squatchOnReady;
-  setTimeout(() => window[IMPACT_NAMESPACE] = window[DEFAULT_NAMESPACE], 0);
-  if (declarativeCache) setTimeout(() => declarativeCache(), 0);
+  var readyFns = [...cached, declarativeCache].filter(a => !!a); // Run all of this in a setTimeout because we need to wait for the squatch module to finish loading
 
-  if (loaded) {
-    if (cached) (cached.ready || []).forEach(cb => setTimeout(() => cb(), 0));
-    setTimeout(() => {
-      window.squatch._auto();
-    }, 0); // @ts-ignore -- intentionally deletes `_squatch` to cleanup initialization
+  setTimeout(() => {
+    // Exit early if module wasn't loaded onto window
+    if (!window[DEFAULT_NAMESPACE]) return; // Set window.impact as an alias for window.squatch.
 
-    window["_" + namespace] = undefined;
+    window[IMPACT_NAMESPACE] = window[DEFAULT_NAMESPACE]; // Run all the ready functions in a set timeout to they happen after namespace aliasing.
 
-    try {
-      delete window["_" + namespace];
-    } catch (e) {
-      throw e;
-    }
-  }
+    readyFns.forEach(cb => cb()); // Perform auto popup
+
+    window[DEFAULT_NAMESPACE]._auto(); // @ts-ignore -- intentionally deletes `_squatch` to cleanup initialization
+
+
+    window["_" + namespace] = undefined;
+    delete window["_" + namespace];
+  }, 0);
 }
 
 /** @hidden */
@@ -1786,16 +1799,17 @@ class DeclarativeWidget extends HTMLElement {
         context: {
           type: config.type,
           user: config.user,
-          container: this.container || this,
+          container: this.container || undefined,
           engagementMedium: this.type
         },
         type: this.widgetType,
         domain: ((_this$config = this.config) == null ? void 0 : _this$config.domain) || DEFAULT_DOMAIN,
-        npmCdn: DEFAULT_NPM_CDN
+        npmCdn: DEFAULT_NPM_CDN,
+        container: this
       };
 
       if (this.type === "EMBED") {
-        return new EmbedWidget(params, params.context.container);
+        return new EmbedWidget(params);
       } else {
         var useFirstChildTrigger = this.firstChild ? null : undefined;
         return new PopupWidget(params, useFirstChildTrigger);
@@ -1810,15 +1824,16 @@ class DeclarativeWidget extends HTMLElement {
         content: "error",
         context: {
           type: "error",
-          container: this.container || this
+          container: this.container || undefined
         },
         type: "ERROR_WIDGET",
         domain: ((_this$config2 = this.config) == null ? void 0 : _this$config2.domain) || DEFAULT_DOMAIN,
-        npmCdn: DEFAULT_NPM_CDN
+        npmCdn: DEFAULT_NPM_CDN,
+        container: this
       };
 
       if (this.type === "EMBED") {
-        return new EmbedWidget(params, params.context.container);
+        return new EmbedWidget(params);
       } else {
         var useFirstChildTrigger = this.firstChild ? null : undefined;
         return new PopupWidget(params, useFirstChildTrigger);
@@ -1830,7 +1845,7 @@ class DeclarativeWidget extends HTMLElement {
     this.hide = this.close;
     this.attachShadow({
       mode: "open"
-    }).innerHTML = "<style>:host { display: contents; }</style><slot></slot>";
+    }).innerHTML = "<style>:host { display: block; }</style><slot></slot>";
     this.config = getConfig();
     this.token = getToken();
     this.tenant = window.squatchTenant;
@@ -1906,6 +1921,7 @@ class DeclarativeWidget extends HTMLElement {
     }
 
     this.widgetInstance = widgetInstance;
+    if (this.widgetInstance) this.dispatchEvent(new CustomEvent("sq:widget-loaded"));
     return widgetInstance;
   }
   /**
@@ -1985,11 +2001,12 @@ class DeclarativeEmbedWidget extends DeclarativeWidget {
   async connectedCallback() {
     var _ref, _this$shadowRoot;
 
-    this.container = this.getAttribute("container") || this;
+    this.loaded = true;
+    this.container = this.getAttribute("container");
     await this.renderWidget();
     var slot = (_ref = this.shadowRoot && Array.from(this.shadowRoot.children)) == null ? void 0 : _ref.find(c => c.tagName === "SLOT");
     if (slot) (_this$shadowRoot = this.shadowRoot) == null ? void 0 : _this$shadowRoot.removeChild(slot);
-    this.loaded = true;
+    if (this.getAttribute("open") !== null) this.open();
   }
 
 }
@@ -2036,10 +2053,10 @@ class DeclarativePopupWidget extends DeclarativeWidget {
   }
 
   async connectedCallback() {
-    this.container = this.getAttribute("container") || this;
+    this.loaded = true;
+    this.container = this.getAttribute("container");
     await this.renderWidget();
     if (this.getAttribute("open") !== null) this.open();
-    this.loaded = true;
   }
 
 }
@@ -2052,10 +2069,10 @@ class ImpactEmbed extends DeclarativeEmbedWidget {}
 
 class ImpactPopup extends DeclarativePopupWidget {}
 
-window.customElements.define("squatch-embed", SquatchEmbed);
-window.customElements.define("impact-embed", ImpactEmbed);
-window.customElements.define("squatch-popup", SquatchPopup);
-window.customElements.define("impact-popup", ImpactPopup);
+if (!window.customElements.get("squatch-embed")) window.customElements.define("squatch-embed", SquatchEmbed);
+if (!window.customElements.get("impact-embed")) window.customElements.define("impact-embed", ImpactEmbed);
+if (!window.customElements.get("squatch-popup")) window.customElements.define("squatch-popup", SquatchPopup);
+if (!window.customElements.get("impact-popup")) window.customElements.define("impact-popup", ImpactPopup);
 
 // @ts-check
 function help() {