Merge pull request #746 from MyPureCloud/feature/COMUI-3244

feat: override CDN URL via assetsUrl option to registerSparkComponents
MyPureCloud · Jan 14, 2025 · db857e5 · db857e5
2 parents afbb38f + 126aa55
commit db857e5
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 6 deletions.
diff --git a/packages/genesys-spark-chart-components/stencil.config.ts b/packages/genesys-spark-chart-components/stencil.config.ts
@@ -1,4 +1,5 @@
 import { Config } from '@stencil/core';
+import { Credentials } from '@stencil/core/internal';
 import { sass } from '@stencil/sass';
 import copy from 'rollup-plugin-copy';
 import generateMetadata from './scripts/generate-component-data';
@@ -9,6 +10,16 @@ const testConsoleReporter =
     ? 'default'
     : ['jest-silent-reporter', { useDots: true }];
 
+// Optionally host the dev server with https if a cert and key are provided via env variables, e.g.
+// for running local dev build within a https app using assetsUrl option of registerSparkComponents.
+let https: Credentials | undefined = undefined;
+if (process.env.SPARK_HTTPS_CERT && process.env.SPARK_HTTPS_KEY) {
+  https = {
+    key: process.env.SPARK_HTTPS_KEY,
+    cert: process.env.SPARK_HTTPS_CERT
+  };
+}
+
 export const config: Config = {
   namespace: 'genesys-chart-webcomponents',
   globalStyle: 'src/style/style.scss',
@@ -75,6 +86,7 @@ export const config: Config = {
     experimentalImportInjection: true
   },
   devServer: {
-    port: 3734
+    port: 3734,
+    https
   }
 };
diff --git a/packages/genesys-spark-components/stencil.config.ts b/packages/genesys-spark-components/stencil.config.ts
@@ -1,4 +1,5 @@
 import { Config } from '@stencil/core';
+import { Credentials } from '@stencil/core/internal';
 import { sass } from '@stencil/sass';
 import copy from 'rollup-plugin-copy';
 import generateMetadata from './scripts/generate-component-data';
@@ -9,6 +10,16 @@ const testConsoleReporter =
     ? 'default'
     : ['jest-silent-reporter', { useDots: true }];
 
+// Optionally host the dev server with https if a cert and key are provided via env variables, e.g.
+// for running local dev build within a https app using assetsUrl option of registerSparkComponents.
+let https: Credentials | undefined = undefined;
+if (process.env.SPARK_HTTPS_CERT && process.env.SPARK_HTTPS_KEY) {
+  https = {
+    key: process.env.SPARK_HTTPS_KEY,
+    cert: process.env.SPARK_HTTPS_CERT
+  };
+}
+
 export const config: Config = {
   namespace: 'genesys-webcomponents',
   globalStyle: 'src/style/style.scss',
@@ -81,6 +92,7 @@ export const config: Config = {
     experimentalImportInjection: true
   },
   devServer: {
-    port: 3733
+    port: 3733,
+    https
   }
 };
diff --git a/packages/genesys-spark/src/index.ts b/packages/genesys-spark/src/index.ts
@@ -13,6 +13,11 @@ const COMPONENT_ASSET_PREFIX = '__COMPONENT_ASSET_PREFIX__';
 const CHART_COMPONENT_ASSET_PREFIX = '__CHART_COMPONENT_ASSET_PREFIX__';
 
 interface registerOptions {
+  /**
+   * Optional base URL to use for component assets like JS and CSS (i.e. where dist/genesys-webcomponents is hosted).
+   * This is meant for testing. In production, assets should be loaded from the default CDN location.
+   */
+  assetsUrl?: string;
   theme?: 'flare' | 'legacy';
 }
 
@@ -51,8 +56,17 @@ export function registerSparkComponents(opts?: registerOptions): Promise<void> {
       : 'genesys-webcomponents.css';
 
   const assetsOrigin = getComponentAssetsOrigin();
-  const SCRIPT_SRC = `${assetsOrigin}${COMPONENT_ASSET_PREFIX}${SCRIPT_PATH}`;
-  const STYLE_HREF = `${assetsOrigin}${COMPONENT_ASSET_PREFIX}${STYLE_PATH}`;
+  let assetsUrl = `${assetsOrigin}${COMPONENT_ASSET_PREFIX}`;
+
+  if (opts?.assetsUrl) {
+    assetsUrl = opts.assetsUrl;
+    if (!assetsUrl.endsWith('/')) {
+      assetsUrl += '/';
+    }
+  }
+
+  const SCRIPT_SRC = `${assetsUrl}${SCRIPT_PATH}`;
+  const STYLE_HREF = `${assetsUrl}${STYLE_PATH}`;
 
   return Promise.all([
     checkAndLoadScript(SCRIPT_SRC),
@@ -64,11 +78,22 @@ export function registerSparkComponents(opts?: registerOptions): Promise<void> {
 /**
  * TODO
  */
-export function registerSparkChartComponents(): Promise<void> {
+export function registerSparkChartComponents(
+  opts?: registerOptions
+): Promise<void> {
   const SCRIPT_PATH = 'genesys-chart-webcomponents.esm.js';
 
   const assetsOrigin = getChartComponentAssetsOrigin();
-  const SCRIPT_SRC = `${assetsOrigin}${CHART_COMPONENT_ASSET_PREFIX}${SCRIPT_PATH}`;
+  let assetsUrl = `${assetsOrigin}${CHART_COMPONENT_ASSET_PREFIX}`;
+
+  if (opts?.assetsUrl) {
+    assetsUrl = opts.assetsUrl;
+    if (!assetsUrl.endsWith('/')) {
+      assetsUrl += '/';
+    }
+  }
+
+  const SCRIPT_SRC = `${assetsUrl}${SCRIPT_PATH}`;
 
   return Promise.all([checkAndLoadScript(SCRIPT_SRC)]).then();
 }