genesys-spark 4.0.0-beta.37

package/README.md

@@ -0,0 +1,34 @@
+# genesys-spark
+
+This package is the default way to use Spark. It provides access to Spark's lazy-loading custom elements via a single shared CDN, as well as utilities for non-rendering UI tasks.
+
+## Installation
+
+Use your package manager of choice to install the package in your project.
+
+`npm install genesys-spark`
+
+## Setup
+
+When initializing your app/page, call `registerSparkCompnents`, which will inject
+the script and style tags into your page that define the main Spark custom elements:
+
+```js
+import { registerSparkComponents } from 'genesys-spark';
+
+// It's not _required_ to await component loading, but it can help prevent a flash
+// of unstyled content
+await registerSparkComponents();
+```
+
+## Loading Mechanism
+
+By adding a script tag to the document, we ensure that the components are always
+loaded from the same location. This keeps the bundle size of the consuming application
+smaller, and ensures that multiple apps on the same domain will share the browser's
+cache of the component definitions. Overall, this leads to a better end-user experience.
+
+Additionally, Stencil builds the components so that their full implementations do
+not need to be loaded up-front. Instead, components are fetched as they are used
+in the page. Those lazy-loaded implementations also benefit from sharing the
+browser cache in the same way as the initial script.

package/dist/hosts.d.ts

@@ -0,0 +1,8 @@
+declare global {
+    var IS_DEV_MODE: boolean;
+}
+/**
+ * Returns the origin that web component assets should be loaded from.
+ * Will use the domain of the current window if it matches a Genesys domain.
+ */
+export declare function getAssetsOrigin(): string;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Loads the spark webcomponents from a shared CDN
+ * @returns a promise that succeeds if the component script and styles
+ * load successfully.
+ */
+export declare function registerSparkComponents(): Promise<void>;

package/dist/index.js

@@ -0,0 +1,94 @@
+// Default domain to load assets from
+var DEFAULT_DOMAIN = 'mypurecloud.com';
+// List of Genesys UI domains
+var DOMAIN_LIST = [
+    'apne2.pure.cloud',
+    'aps1.pure.cloud',
+    'cac1.pure.cloud',
+    'euw2.pure.cloud',
+    'inindca.com',
+    'inintca.com',
+    'mypurecloud.com.au',
+    'mypurecloud.com',
+    'mypurecloud.de',
+    'mypurecloud.ie',
+    'mypurecloud.jp',
+    'sae1.pure.cloud',
+    'use2.maximus-pure.cloud',
+    // 'use2.us-gov-pure.cloud', Assets are not currently deployed to FedRAMP and should fallback to the default domain
+    'usw2.pure.cloud'
+];
+/**
+ * Returns the origin that web component assets should be loaded from.
+ * Will use the domain of the current window if it matches a Genesys domain.
+ */
+function getAssetsOrigin() {
+    var pageHost = window.location.hostname;
+    var matchedDomain = DOMAIN_LIST.find(function (regionDomain) {
+        return pageHost.endsWith(regionDomain);
+    });
+    return "https://app.".concat(matchedDomain || DEFAULT_DOMAIN);
+}
+
+var ASSET_PREFIX = "/spark-components/build-assets/4.0.0-beta.37-42/genesys-webcomponents/";
+var SCRIPT_PATH = "genesys-webcomponents.esm.js";
+var STYLE_PATH = "genesys-webcomponents.css";
+var SCRIPT_SRC = "".concat(getAssetsOrigin()).concat(ASSET_PREFIX).concat(SCRIPT_PATH);
+var STYLE_HREF = "".concat(getAssetsOrigin()).concat(ASSET_PREFIX).concat(STYLE_PATH);
+/**
+ * Loads the spark webcomponents from a shared CDN
+ * @returns a promise that succeeds if the component script and styles
+ * load successfully.
+ */
+function registerSparkComponents() {
+    return Promise.all([
+        checkAndLoadScript(SCRIPT_SRC),
+        checkAndLoadStyle(STYLE_HREF)
+    ]).then();
+}
+function checkAndLoadScript(scriptSrc) {
+    var existingTag = document.querySelector("script[src=\"".concat(scriptSrc, "\"]"));
+    if (existingTag) {
+        return Promise.resolve();
+    }
+    else {
+        var scriptTag_1 = document.createElement('script');
+        scriptTag_1.setAttribute("type", "module");
+        scriptTag_1.setAttribute("src", scriptSrc);
+        var result = new Promise(function (resolve, reject) {
+            scriptTag_1.addEventListener('load', function () {
+                resolve();
+            });
+            scriptTag_1.addEventListener('error', function () {
+                reject("Spark script failed to load: ".concat(scriptSrc));
+            });
+        });
+        document.head.appendChild(scriptTag_1);
+        return result;
+    }
+}
+function checkAndLoadStyle(styleHref) {
+    var existingTag = document.querySelector("link[href=\"".concat(styleHref, "\"]"));
+    if (existingTag) {
+        return Promise.resolve();
+    }
+    else {
+        var styleTag_1 = document.createElement('link');
+        styleTag_1.setAttribute("href", styleHref);
+        styleTag_1.setAttribute("rel", "stylesheet");
+        var result = new Promise(function (resolve, reject) {
+            styleTag_1.addEventListener('load', function () {
+                resolve();
+            });
+            styleTag_1.addEventListener('error', function () {
+                reject("Spark styles failed to load: ".concat(styleHref));
+            });
+        });
+        document.head.appendChild(styleTag_1);
+        return result;
+    }
+}
+// TODO: Build out utility functions where components aren't the right solution
+// export function formatDate(...)
+
+export { registerSparkComponents };

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "genesys-spark",
+  "version": "4.0.0-beta.37",
+  "description": "",
+  "license": "ISC",
+  "author": "",
+  "type": "module",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c --watch",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "version-sync": "npm version --no-git-tag-version --allow-same-version"
+  },
+  "dependencies": {
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-typescript": "^11.1.3",
+    "rollup": "^3.29.3"
+  },
+  "devDependencies": {
+    "@tsconfig/strictest": "^2.0.2"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,21 @@
+import replace from '@rollup/plugin-replace';
+import typescript from '@rollup/plugin-typescript';
+
+const IS_DEV_MODE = (process.env.ROLLUP_WATCH === "true");
+
+export default {
+	input: 'src/index.ts',
+	output: {
+		dir: 'dist'
+	},
+    plugins: [
+		replace({
+			values: { 
+				'IS_DEV_MODE': IS_DEV_MODE,
+				'__ASSET_PREFIX__': IS_DEV_MODE ? '/dist/genesys-webcomponents/' : process.env.COMPONENT_ASSETS_PATH
+			},
+			preventAssignment: true
+		}),
+		typescript()
+	]
+};

package/src/hosts.ts

@@ -0,0 +1,46 @@
+declare global {
+  // IS_DEV_MODE is rewritten by @rollup/plugin-replace. This definition lets
+  // our typescript file typecheck.
+  var IS_DEV_MODE: boolean
+}
+
+// Default domain to load assets from
+const DEFAULT_DOMAIN = 'mypurecloud.com';
+
+// List of Genesys UI domains
+const DOMAIN_LIST = [
+  'apne2.pure.cloud',
+  'aps1.pure.cloud',
+  'cac1.pure.cloud',
+  'euw2.pure.cloud',
+  'inindca.com',
+  'inintca.com',
+  'mypurecloud.com.au',
+  'mypurecloud.com',
+  'mypurecloud.de',
+  'mypurecloud.ie',
+  'mypurecloud.jp',
+  'sae1.pure.cloud',
+  'use2.maximus-pure.cloud',
+  // 'use2.us-gov-pure.cloud', Assets are not currently deployed to FedRAMP and should fallback to the default domain
+  'usw2.pure.cloud'
+];
+
+/**
+ * Returns the origin that web component assets should be loaded from.
+ * Will use the domain of the current window if it matches a Genesys domain.
+ */
+export function getAssetsOrigin(): string {
+    if (IS_DEV_MODE == true) {
+      // This conditional is optimized out in production due to @rollup/plugin-replace
+      // and rollup's dead code elimination
+      return "http://localhost:3333";
+    }
+
+    const pageHost = window.location.hostname;
+    const matchedDomain = DOMAIN_LIST.find(regionDomain =>
+      pageHost.endsWith(regionDomain)
+    );
+  
+    return `https://app.${matchedDomain || DEFAULT_DOMAIN}`;
+  }

package/src/index.ts

@@ -0,0 +1,65 @@
+import { getAssetsOrigin } from "./hosts";
+
+const ASSET_PREFIX = "__ASSET_PREFIX__";
+const SCRIPT_PATH = "genesys-webcomponents.esm.js";
+const STYLE_PATH = "genesys-webcomponents.css";
+
+const SCRIPT_SRC = `${getAssetsOrigin()}${ASSET_PREFIX}${SCRIPT_PATH}`;
+const STYLE_HREF = `${getAssetsOrigin()}${ASSET_PREFIX}${STYLE_PATH}`;
+
+
+/**
+ * Loads the spark webcomponents from a shared CDN
+ * @returns a promise that succeeds if the component script and styles
+ * load successfully.
+ */
+export function registerSparkComponents() : Promise<void> {
+    return Promise.all([
+        checkAndLoadScript(SCRIPT_SRC),
+        checkAndLoadStyle(STYLE_HREF)
+    ]).then()
+}
+
+function checkAndLoadScript(scriptSrc: string): Promise<void> {
+    const existingTag = document.querySelector(`script[src="${scriptSrc}"]`);
+    if (existingTag) {
+        return Promise.resolve();
+    } else {
+        const scriptTag = document.createElement('script');
+        scriptTag.setAttribute("type", "module");
+        scriptTag.setAttribute("src", scriptSrc);
+        const result = new Promise<void>((resolve, reject) => {
+            scriptTag.addEventListener('load', () => {
+                resolve();
+            })
+            scriptTag.addEventListener('error', () => {
+                reject(`Spark script failed to load: ${scriptSrc}`);
+            })
+        });  
+        document.head.appendChild(scriptTag);
+        return result;
+    }
+}
+
+function checkAndLoadStyle(styleHref: string): Promise<void> {
+    const existingTag = document.querySelector(`link[href="${styleHref}"]`);
+    if (existingTag) {
+        return Promise.resolve();
+    } else {
+        const styleTag = document.createElement('link');
+        styleTag.setAttribute("href", styleHref);
+        styleTag.setAttribute("rel", "stylesheet");
+        const result = new Promise<void>((resolve, reject) => {
+            styleTag.addEventListener('load', () => {
+                resolve();
+            })
+            styleTag.addEventListener('error', () => {
+                reject(`Spark styles failed to load: ${styleHref}`);
+            })
+        });  
+        document.head.appendChild(styleTag);
+        return result;
+    }
+}
+// TODO: Build out utility functions where components aren't the right solution
+// export function formatDate(...)

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@tsconfig/strictest/tsconfig.json",
+  "compilerOptions": {
+    "noEmitOnError": true,
+    "outDir": "dist",
+    "declaration": true
+  },
+  "include": ["src"]
+}