genesys-spark 4.0.0-beta.53 → 4.0.0-beta.54

package/.eslintignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+rollup.config.js
+jest.config.js
+

package/.eslintrc.json

@@ -0,0 +1,34 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "root": true,
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "rules": {
+    "no-unused-vars": "off",
+    "no-undef": "off"
+  },
+  "extends": ["genesys-spark-components"],
+  "parserOptions": {
+    "sourceType": "module",
+    "project": ["./tsconfig.json"]
+  },
+  "overrides": [
+    {
+      "files": ["./test/**/*.ts"],
+      "env": {
+        "node": true,
+        "es6": true,
+        "jest": true
+      },
+      "extends": ["genesys-spark-components/typescript"],
+      "rules": {
+        "@typescript-eslint/no-unsafe-assignment": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "@typescript-eslint/no-explicit-any": "off"
+      }
+    }
+  ]
+}

package/.lintstagedrc.json

@@ -0,0 +1,6 @@
+{
+  "*": "prettier --ignore-unknown --write",
+  "*.{css,html,scss}": "stylelint --fix",
+  "*.{ts,tsx,js,jsx}": "eslint --fix ",
+  "package.json": ["prettier-package-json --write"]
+}

package/.prettierignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

package/README.md

@@ -35,7 +35,7 @@ While `registerSparkComponents()` will add the required webfonts to your page if
 they are not already present, it is recommended that you link stylesheets to load
 the Urbanist and Noto Sans fonts in your document prior to starting your app. This
 will improve loading performance and prevent a jarring font transition when the
-required fonts load. 
+required fonts load.
 
 ## Asset loading details
 
@@ -47,4 +47,4 @@ cache of the component definitions. Overall, this leads to a better end-user exp
 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.
+browser cache in the same way as the initial script.

package/dist/index.js

@@ -31,9 +31,7 @@ function getFontOrigin() {
 }
 function getRegionDomain() {
     var pageHost = window.location.hostname;
-    return DOMAIN_LIST.find(function (regionDomain) {
-        return pageHost.endsWith(regionDomain);
-    });
+    return DOMAIN_LIST.find(function (regionDomain) { return pageHost.endsWith(regionDomain); });
 }
 
 /******************************************************************************
@@ -81,8 +79,8 @@ function checkAndLoadScript(scriptSrc) {
     }
     else {
         var scriptTag_1 = document.createElement('script');
-        scriptTag_1.setAttribute("type", "module");
-        scriptTag_1.setAttribute("src", scriptSrc);
+        scriptTag_1.setAttribute('type', 'module');
+        scriptTag_1.setAttribute('src', scriptSrc);
         var result = new Promise(function (resolve, reject) {
             scriptTag_1.addEventListener('load', function () {
                 resolve();
@@ -107,8 +105,8 @@ function checkAndLoadStyle(styleHref) {
     }
     else {
         var styleTag_1 = document.createElement('link');
-        styleTag_1.setAttribute("href", styleHref);
-        styleTag_1.setAttribute("rel", "stylesheet");
+        styleTag_1.setAttribute('href', styleHref);
+        styleTag_1.setAttribute('rel', 'stylesheet');
         var result = new Promise(function (resolve, reject) {
             styleTag_1.addEventListener('load', function () {
                 resolve();
@@ -137,9 +135,9 @@ function checkAndLoadStyle(styleHref) {
 function checkAndLoadFonts(fonts) {
     var fontsToLoad = __assign({}, fonts); //clone our input so we can safely mutate it.
     document.fonts.forEach(function (fontFace) {
-        // If the family is defined with quotes in CSS (e.g. `font-family: "Noto Sans"), 
+        // If the family is defined with quotes in CSS (e.g. `font-family: "Noto Sans"),
         // those quotes may be preserved JS, depending on the browser.
-        var normalizedFamily = fontFace.family.replace(/"/g, "");
+        var normalizedFamily = fontFace.family.replace(/"/g, '');
         if (fontsToLoad[normalizedFamily]) {
             // remove the font from the set to load
             delete fontsToLoad[normalizedFamily];
@@ -154,16 +152,16 @@ function checkAndLoadFonts(fonts) {
     })).then(function () { }); // flatten the promise array
 }
 
-var ASSET_PREFIX = "/spark-components/build-assets/4.0.0-beta.53-79/genesys-webcomponents/";
-var SCRIPT_PATH = "genesys-webcomponents.esm.js";
-var STYLE_PATH = "genesys-webcomponents.css";
+var ASSET_PREFIX = '/spark-components/build-assets/4.0.0-beta.54-81/genesys-webcomponents/';
+var SCRIPT_PATH = 'genesys-webcomponents.esm.js';
+var STYLE_PATH = 'genesys-webcomponents.css';
 var assetsOrigin = getAssetsOrigin();
 var SCRIPT_SRC = "".concat(assetsOrigin).concat(ASSET_PREFIX).concat(SCRIPT_PATH);
 var STYLE_HREF = "".concat(assetsOrigin).concat(ASSET_PREFIX).concat(STYLE_PATH);
 var fontOrigin = getFontOrigin();
 var FONTS = {
-    "Urbanist": "".concat(fontOrigin, "/webfonts/urbanist.css"),
-    "Noto Sans": "".concat(fontOrigin, "/webfonts/noto-sans.css")
+    Urbanist: "".concat(fontOrigin, "/webfonts/urbanist.css"),
+    'Noto Sans': "".concat(fontOrigin, "/webfonts/noto-sans.css")
 };
 /**
  * Loads the spark web components, as well as required CSS and fonts from a

package/dist/test/loading.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "genesys-spark",
-  "version": "4.0.0-beta.53",
+  "version": "4.0.0-beta.54",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -9,6 +9,9 @@
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c --watch",
+    "eslint": "eslint --fix './**/*.ts'",
+    "lint-staged": "lint-staged",
+    "prettier": "prettier --log-level silent --ignore-path .gitignore --ignore-unknown --write .",
     "test": "jest",
     "test.watch": "jest --watch",
     "version-sync": "npm version --no-git-tag-version --allow-same-version"
@@ -20,6 +23,9 @@
   },
   "devDependencies": {
     "@tsconfig/strictest": "^2.0.2",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
+    "eslint-config-genesys-spark-components": "file:../../shared-configs/eslint-config-genesys-spark-components",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "ts-jest": "^29.1.1"

package/rollup.config.js

@@ -1,21 +1,23 @@
 import replace from '@rollup/plugin-replace';
 import typescript from '@rollup/plugin-typescript';
 
-const IS_DEV_MODE = (process.env.ROLLUP_WATCH === "true");
+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({noEmitOnError: false})
-	]
-};
+  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({ noEmitOnError: false })
+  ]
+};

package/src/hosts.ts

@@ -1,7 +1,7 @@
 declare global {
   // IS_DEV_MODE is rewritten by @rollup/plugin-replace. This definition lets
   // our typescript file typecheck.
-  var IS_DEV_MODE: boolean
+  var IS_DEV_MODE: boolean;
 }
 
 // Default domain to load assets from
@@ -31,27 +31,25 @@ const DOMAIN_LIST = [
  * 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 matchedDomain = getRegionDomain();
-    return `https://app.${matchedDomain || DEFAULT_DOMAIN}`;
+  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';
   }
 
-  export function getFontOrigin(): string {
-    if (IS_DEV_MODE == true) {
-      // Fonts aren't locally hosted during dev mode
-      return "http://app.inindca.com"
-    }
-    return getAssetsOrigin();
+  const matchedDomain = getRegionDomain();
+  return `https://app.${matchedDomain || DEFAULT_DOMAIN}`;
+}
+
+export function getFontOrigin(): string {
+  if (IS_DEV_MODE == true) {
+    // Fonts aren't locally hosted during dev mode
+    return 'http://app.inindca.com';
   }
+  return getAssetsOrigin();
+}
 
-  function getRegionDomain() {
-    const pageHost = window.location.hostname;
-    return DOMAIN_LIST.find(regionDomain =>
-      pageHost.endsWith(regionDomain)
-    );
-  }
+function getRegionDomain() {
+  const pageHost = window.location.hostname;
+  return DOMAIN_LIST.find(regionDomain => pageHost.endsWith(regionDomain));
+}

package/src/index.ts

@@ -1,38 +1,39 @@
-import { getAssetsOrigin, getFontOrigin } from "./hosts";
-import { checkAndLoadScript, checkAndLoadStyle, checkAndLoadFonts } from "./loading";
+import { getAssetsOrigin, getFontOrigin } from './hosts';
+import {
+  checkAndLoadScript,
+  checkAndLoadStyle,
+  checkAndLoadFonts
+} from './loading';
 
-const ASSET_PREFIX = "__ASSET_PREFIX__";
-const SCRIPT_PATH = "genesys-webcomponents.esm.js";
-const STYLE_PATH = "genesys-webcomponents.css";
+const ASSET_PREFIX = '__ASSET_PREFIX__';
+const SCRIPT_PATH = 'genesys-webcomponents.esm.js';
+const STYLE_PATH = 'genesys-webcomponents.css';
 
-const assetsOrigin = getAssetsOrigin(); 
+const assetsOrigin = getAssetsOrigin();
 const SCRIPT_SRC = `${assetsOrigin}${ASSET_PREFIX}${SCRIPT_PATH}`;
 const STYLE_HREF = `${assetsOrigin}${ASSET_PREFIX}${STYLE_PATH}`;
 const fontOrigin = getFontOrigin();
 const FONTS = {
-    "Urbanist": `${fontOrigin}/webfonts/urbanist.css`,
-    "Noto Sans": `${fontOrigin}/webfonts/noto-sans.css`
-}
-
+  Urbanist: `${fontOrigin}/webfonts/urbanist.css`,
+  'Noto Sans': `${fontOrigin}/webfonts/noto-sans.css`
+};
 
 /**
- * Loads the spark web components, as well as required CSS and fonts from a 
+ * Loads the spark web components, as well as required CSS and fonts from a
  * shared CDN. Performance can be optimized by pre-loading fonts in static HTML.
- *  
+ *
  * @returns a promise that succeeds if the component script and styles
  * load successfully. It is not recommended to wait on this promise or to stop
- * application bootstrap if it rejects. Its primary use should be for logging 
+ * application bootstrap if it rejects. Its primary use should be for logging
  * unexpected failures.
  */
-export function registerSparkComponents() : Promise<void> {
-    return Promise.all([
-        checkAndLoadScript(SCRIPT_SRC),
-        checkAndLoadStyle(STYLE_HREF),
-        checkAndLoadFonts(FONTS)
-    ]).then()
+export function registerSparkComponents(): Promise<void> {
+  return Promise.all([
+    checkAndLoadScript(SCRIPT_SRC),
+    checkAndLoadStyle(STYLE_HREF),
+    checkAndLoadFonts(FONTS)
+  ]).then();
 }
 
-
 // TODO: Build out utility functions where components aren't the right solution
 // export function formatDate(...)
-

package/src/loading.ts

@@ -4,24 +4,24 @@
  * @returns a promise that resolves if the script loads or is already present
  */
 export 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;
-    }
+  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;
+  }
 }
 
 /**
@@ -30,28 +30,28 @@ export function checkAndLoadScript(scriptSrc: string): Promise<void> {
  * @returns a promise that resolves if the style loads or is already present
  */
 export 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;
-    }
+  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;
+  }
 }
 
 /**
- * Given an object that maps font-family identifiers to CSS urls e.g: 
+ * Given an object that maps font-family identifiers to CSS urls e.g:
  * {
  *   "Urbanist": "/urbanist.css",
  *   "Noto Sans": "/noto-sans.css"
@@ -63,26 +63,28 @@ export function checkAndLoadStyle(styleHref: string): Promise<void> {
  * It does not fail if the script tags fail to load because we don't want to fail
  * the whole component loading process in that situation.
  */
-export function checkAndLoadFonts(fonts: {[key: string]: string}): Promise<void> {
-    const fontsToLoad = {...fonts}; //clone our input so we can safely mutate it.
-    
-    document.fonts.forEach((fontFace) => {
-        // If the family is defined with quotes in CSS (e.g. `font-family: "Noto Sans"), 
-        // those quotes may be preserved JS, depending on the browser.
-        const normalizedFamily = fontFace.family.replace(/"/g, "");
-        if(fontsToLoad[normalizedFamily]) {
-            // remove the font from the set to load
-            delete fontsToLoad[normalizedFamily];
-        }
-    });
+export function checkAndLoadFonts(fonts: {
+  [key: string]: string;
+}): Promise<void> {
+  const fontsToLoad = { ...fonts }; //clone our input so we can safely mutate it.
+
+  document.fonts.forEach(fontFace => {
+    // If the family is defined with quotes in CSS (e.g. `font-family: "Noto Sans"),
+    // those quotes may be preserved JS, depending on the browser.
+    const normalizedFamily = fontFace.family.replace(/"/g, '');
+    if (fontsToLoad[normalizedFamily]) {
+      // remove the font from the set to load
+      delete fontsToLoad[normalizedFamily];
+    }
+  });
 
-    return Promise.all(
-        Object.values(fontsToLoad).map((href) => {
-            return checkAndLoadStyle(href).catch(() => {
-                // Don't fail loading process for fonts, since the components
-                // should still be reasonably usable.
-                console.info(`genesys-spark: couldn't load font style ${href}`)
-            });
-        })
-    ).then(() => {}) // flatten the promise array
-}
+  return Promise.all(
+    Object.values(fontsToLoad).map(href => {
+      return checkAndLoadStyle(href).catch(() => {
+        // Don't fail loading process for fonts, since the components
+        // should still be reasonably usable.
+        console.info(`genesys-spark: couldn't load font style ${href}`);
+      });
+    })
+  ).then(() => {}); // flatten the promise array
+}

package/test/loading.spec.ts

@@ -1,11 +1,15 @@
-import { checkAndLoadFonts, checkAndLoadScript, checkAndLoadStyle } from '../src/loading';
+import {
+  checkAndLoadFonts,
+  checkAndLoadScript,
+  checkAndLoadStyle
+} from '../src/loading';
 
 const SCRIPT_URL = 'https://localhost/script.js';
 const STYLE_URL = 'https://localhost/style.css';
 const FONTS = {
-  "Font1": `font1.css`,
-  "Font2": `font2.css`
-}
+  Font1: `font1.css`,
+  Font2: `font2.css`
+};
 
 describe('The loading module', () => {
   afterEach(() => {
@@ -21,7 +25,7 @@ describe('The loading module', () => {
       expect(tag).not.toBeNull(); // The tag was created
       tag?.dispatchEvent(new Event('load')); // The promise will resolve
 
-      expect(promise).resolves.toBe(undefined);
+      await expect(promise).resolves.toBe(undefined);
     });
     test('will fail if the script fails to load', async () => {
       const promise = checkAndLoadScript(SCRIPT_URL);
@@ -30,7 +34,7 @@ describe('The loading module', () => {
       expect(tag).not.toBeNull(); // The tag was created
       tag?.dispatchEvent(new Event('error')); // The promise will reject
 
-      expect(promise).rejects.toContain(SCRIPT_URL);
+      await expect(promise).rejects.toContain(SCRIPT_URL);
     });
     test('will not create a tag if one already exists', async () => {
       const script = document.createElement('script');
@@ -52,7 +56,7 @@ describe('The loading module', () => {
       expect(tag).not.toBeNull(); // The tag was created
       tag?.dispatchEvent(new Event('load')); // The promise will resolve
 
-      expect(promise).resolves.toBe(undefined);
+      await expect(promise).resolves.toBe(undefined);
     });
     test('will fail if the style fails to load', async () => {
       const promise = checkAndLoadStyle(STYLE_URL);
@@ -63,7 +67,7 @@ describe('The loading module', () => {
       expect(tag).not.toBeNull(); // The tag was created
       tag?.dispatchEvent(new Event('error')); // The promise will reject
 
-      expect(promise).rejects.toContain(STYLE_URL);
+      await expect(promise).rejects.toContain(STYLE_URL);
     });
     test('will not create a tag if one already exists', async () => {
       const link = document.createElement('link');
@@ -76,14 +80,14 @@ describe('The loading module', () => {
       expect(tags.length).toBe(1); // A second tag was not created
     });
   });
-  describe("checkAndLoadFonts", () => {
-    let documentFonts : Array<any> = [];
+  describe('checkAndLoadFonts', () => {
+    let documentFonts: Array<any> = [];
 
     beforeEach(() => {
       documentFonts = [];
       //@ts-ignore - needed to be able to stub out font API
       document.fonts = documentFonts;
-    })
+    });
 
     test('Will load missing fonts', async () => {
       const promise = checkAndLoadFonts(FONTS);
@@ -93,14 +97,14 @@ describe('The loading module', () => {
       expect(tag1).not.toBeNull();
       expect(tag2).not.toBeNull();
 
-      tag1?.dispatchEvent(new Event("load"));
-      tag2?.dispatchEvent(new Event("load"));
+      tag1?.dispatchEvent(new Event('load'));
+      tag2?.dispatchEvent(new Event('load'));
 
-      expect(promise).resolves.toBe(undefined);
+      await expect(promise).resolves.toBe(undefined);
     });
 
     test('Will not load fonts that are already loaded', async () => {
-      documentFonts.push({family: "Font2"});
+      documentFonts.push({ family: 'Font2' });
 
       const promise = checkAndLoadFonts(FONTS);
       const tag1 = document.querySelector(`link[href="font1.css"]`);
@@ -109,13 +113,13 @@ describe('The loading module', () => {
       expect(tag1).not.toBeNull();
       expect(tag2).toBeNull();
 
-      tag1?.dispatchEvent(new Event("load"));
+      tag1?.dispatchEvent(new Event('load'));
 
-      expect(promise).resolves.toBe(undefined);
-    })
+      await expect(promise).resolves.toBe(undefined);
+    });
 
     test('Ignores quotes on the family when checking for loaded fonts', async () => {
-      documentFonts.push({family: '"Font2"'});
+      documentFonts.push({ family: '"Font2"' });
 
       const promise = checkAndLoadFonts(FONTS);
       const tag1 = document.querySelector(`link[href="font1.css"]`);
@@ -124,10 +128,10 @@ describe('The loading module', () => {
       expect(tag1).not.toBeNull();
       expect(tag2).toBeNull();
 
-      tag1?.dispatchEvent(new Event("load"));
+      tag1?.dispatchEvent(new Event('load'));
 
-      expect(promise).resolves.toBe(undefined);
-    })
+      await expect(promise).resolves.toBe(undefined);
+    });
 
     test('Still resolves even if fonts fail to load', async () => {
       const promise = checkAndLoadFonts(FONTS);
@@ -137,10 +141,10 @@ describe('The loading module', () => {
       expect(tag1).not.toBeNull();
       expect(tag2).not.toBeNull();
 
-      tag1?.dispatchEvent(new Event("error"));
-      tag2?.dispatchEvent(new Event("error"));
+      tag1?.dispatchEvent(new Event('error'));
+      tag2?.dispatchEvent(new Event('error'));
 
-      expect(promise).resolves.toBe(undefined);
+      await expect(promise).resolves.toBe(undefined);
     });
   });
 });

package/tsconfig.json

@@ -5,5 +5,5 @@
     "outDir": "dist",
     "declaration": true
   },
-  "include": ["src"]
+  "include": ["src", "test"]
 }