fix(atomic-hosted-page): fix cdn import errors by externalizing headl…

…ess (#4884) KIT-3867 --------- Co-authored-by: Frederic Beaudoin <fbeaudoin@coveo.com>
coveo · Jan 23, 2025 · 2364a8d · 2364a8d
1 parent 970d0a7
commit 2364a8d
Show file tree

Hide file tree

Showing 14 changed files with 271 additions and 19 deletions.
diff --git a/.github/actions/cdn-checks/action.yml b/.github/actions/cdn-checks/action.yml
@@ -23,3 +23,8 @@ runs:
     - uses: ./.github/actions/playwright-headless-commerce-react
       env:
         DEPLOYMENT_ENVIRONMENT: CDN
+    - uses: ./.github/actions/playwright-atomic-hosted-pages
+      env:
+        DEPLOYMENT_ENVIRONMENT: CDN
+      with:
+        uploadArtifacts: false
diff --git a/.github/actions/playwright-atomic-hosted-pages/action.yml b/.github/actions/playwright-atomic-hosted-pages/action.yml
@@ -1,5 +1,10 @@
 name: 'Playwright Atomic Hosted Pages'
 description: 'Run Playwright tests for Atomic Hosted Pages'
+inputs:
+  uploadArtifacts:
+    description: 'Whether to upload artifacts'
+    required: false
+    default: 'true'
 runs:
   using: composite
   steps:
@@ -12,7 +17,7 @@ runs:
       working-directory: packages/atomic-hosted-page
       shell: bash
     - uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4
-      if: always()
+      if: ${{ inputs.uploadArtifacts == 'true' }}
       with:
         name: atomic-hosted-page-playwright-report
         path: packages/atomic-hosted-page/playwright-report/

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/atomic-hosted-page/.gitignore b/packages/atomic-hosted-page/.gitignore
@@ -29,3 +29,6 @@ UserInterfaceState.xcuserstate
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+/dev/public/
+
diff --git a/...omic-hosted-page/src/pages/hosted-ui.html → ...ic-hosted-page/dev/hosted-ui-builder.html b/...omic-hosted-page/src/pages/hosted-ui.html → ...ic-hosted-page/dev/hosted-ui-builder.html
@@ -5,7 +5,18 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Coveo Atomic Hosted UI</title>
 
-    <script type="module" src="/build/atomic-hosted-page.esm.js"></script>
+    <script type="module">
+      if (process.env.DEPLOYMENT_ENVIRONMENT === 'CDN') {
+        const script = document.createElement('script');
+        script.type = 'module';
+        script.src = '/atomic-hosted-page/atomic-hosted-page.esm.js';
+        document.head.appendChild(script);
+      } else {
+        import('@coveo/atomic-hosted-page/loader').then(({defineCustomElements}) => {
+          defineCustomElements();
+        });
+      }
+    </script>
     <script type="module">
       await customElements.whenDefined('atomic-hosted-ui');
 
@@ -18,7 +29,7 @@
     </script>
   </head>
 
-  <body style="width: 100%">
+  <body>
     <atomic-hosted-ui hosted-type="builder"></atomic-hosted-ui>
   </body>
 </html>
diff --git a/...hosted-page/src/pages/hosted-ui-code.html → ...tomic-hosted-page/dev/hosted-ui-code.html b/...hosted-page/src/pages/hosted-ui-code.html → ...tomic-hosted-page/dev/hosted-ui-code.html
@@ -5,7 +5,18 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Coveo Atomic Hosted UI</title>
 
-    <script type="module" src="/build/atomic-hosted-page.esm.js"></script>
+    <script type="module">
+      if (process.env.DEPLOYMENT_ENVIRONMENT === 'CDN') {
+        const script = document.createElement('script');
+        script.type = 'module';
+        script.src = '/atomic-hosted-page/atomic-hosted-page.esm.js';
+        document.head.appendChild(script);
+      } else {
+        import('@coveo/atomic-hosted-page/loader').then(({defineCustomElements}) => {
+          defineCustomElements();
+        });
+      }
+    </script>
     <script type="module">
       await customElements.whenDefined('atomic-hosted-ui');
 

diff --git a/...osted-page/src/pages/hosted-ui-trial.html → ...omic-hosted-page/dev/hosted-ui-trial.html b/...osted-page/src/pages/hosted-ui-trial.html → ...omic-hosted-page/dev/hosted-ui-trial.html
@@ -5,7 +5,18 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <title>Coveo Atomic Hosted UI</title>
 
-    <script type="module" src="/build/atomic-hosted-page.esm.js"></script>
+    <script type="module">
+      if (process.env.DEPLOYMENT_ENVIRONMENT === 'CDN') {
+        const script = document.createElement('script');
+        script.type = 'module';
+        script.src = '/atomic-hosted-page/atomic-hosted-page.esm.js';
+        document.head.appendChild(script);
+      } else {
+        import('@coveo/atomic-hosted-page/loader').then(({defineCustomElements}) => {
+          defineCustomElements();
+        });
+      }
+    </script>
     <script type="module">
       await customElements.whenDefined('atomic-hosted-ui');
 

diff --git a/packages/atomic-hosted-page/dev/index.html b/packages/atomic-hosted-page/dev/index.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <title>Sample Pages Navigation</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        text-align: center;
+        margin: 0;
+        padding: 2rem;
+        background-color: #f9f9f9;
+      }
+      h1 {
+        color: #333;
+      }
+      ul {
+        list-style: none;
+        padding: 0;
+      }
+      li {
+        margin: 1rem 0;
+      }
+      a {
+        text-decoration: none;
+        color: #0078d4;
+        font-size: 1.2rem;
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>Sample Pages Navigation</h1>
+    <ul>
+      <li><a href="hosted-ui-builder.html">Hosted UI - Builder</a></li>
+      <li><a href="hosted-ui-trial.html">Hosted UI - Trial</a></li>
+      <li><a href="hosted-ui-code.html">Hosted UI - Code</a></li>
+    </ul>
+  </body>
+</html>
diff --git a/packages/atomic-hosted-page/dev/vite.config.ts b/packages/atomic-hosted-page/dev/vite.config.ts
@@ -0,0 +1,9 @@
+import {defineConfig} from 'vite';
+
+export default defineConfig({
+  define: {
+    'process.env.DEPLOYMENT_ENVIRONMENT': JSON.stringify(
+      process.env.DEPLOYMENT_ENVIRONMENT || 'LOCAL'
+    ),
+  },
+});
diff --git a/packages/atomic-hosted-page/package.json b/packages/atomic-hosted-page/package.json
@@ -7,6 +7,7 @@
     "url": "git+https://github.com/coveo/ui-kit.git",
     "directory": "packages/atomic-hosted-page"
   },
+  "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -22,7 +23,7 @@
   "scripts": {
     "clean": "rimraf -rf dist/*",
     "build": "nx build",
-    "start": "node --max_old_space_size=6144 ../../node_modules/@stencil/core/bin/stencil build --dev --watch --serve",
+    "start": "node ./scripts/start.js",
     "e2e": "playwright test",
     "validate:definitions": "tsc --noEmit --esModuleInterop --skipLibCheck ./dist/types/components.d.ts",
     "publish:npm": "npm run-script -w=@coveo/release npm-publish",
@@ -37,7 +38,10 @@
   "devDependencies": {
     "@coveo/release": "1.0.0",
     "@playwright/test": "1.49.1",
-    "@types/node": "22.10.6"
+    "@types/node": "22.10.6",
+    "rollup": "4.30.1",
+    "vite": "5.4.11",
+    "ncp": "2.0.0"
   },
   "engines": {
     "node": "^20.9.0 || ^22.11.0"

diff --git a/packages/atomic-hosted-page/playwright.config.ts b/packages/atomic-hosted-page/playwright.config.ts
@@ -29,14 +29,16 @@ export default defineConfig({
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
   },
+  expect: {
+    timeout: 7 * 1000,
+  },
 
   /* Configure projects for major browsers */
   projects: [
     {
       name: 'chromium',
       use: {...devices['Desktop Chrome']},
     },
-
     {
       name: 'firefox',
       use: {...devices['Desktop Firefox']},
@@ -71,9 +73,8 @@ export default defineConfig({
   /* Run your local dev server before starting the tests */
   webServer: {
     command: 'npm start',
-    cwd: __dirname,
     timeout: 10 * 60e3,
-    port: 3335,
+    port: 5173,
     reuseExistingServer: !process.env.CI,
     stdout: 'pipe',
     stderr: 'pipe',

diff --git a/packages/atomic-hosted-page/scripts/start.js b/packages/atomic-hosted-page/scripts/start.js
@@ -0,0 +1,97 @@
+import {execSync} from 'child_process';
+import fs from 'fs/promises';
+import ncp from 'ncp';
+import path from 'path';
+
+const getCurrentDir = () => {
+  const url = import.meta.url;
+  const fileURL = new URL(url);
+  return path.dirname(fileURL.pathname);
+};
+
+const getVersionFromPackageJson = async (packagePath) => {
+  const packageJsonPath = path.join(packagePath, 'package.json');
+  try {
+    const packageJson = JSON.parse(await fs.readFile(packageJsonPath, 'utf-8'));
+    return packageJson.version;
+  } catch (err) {
+    console.error(`Error reading ${packageJsonPath}: ${err.message}`);
+    process.exit(1);
+  }
+};
+
+const copyFiles = async (source, destination) => {
+  return new Promise((resolve, reject) => {
+    ncp(source, destination, (err) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve();
+      }
+    });
+  });
+};
+
+const currentDir = getCurrentDir();
+const headlessDir = path.resolve(currentDir, '../../headless');
+const buenoDir = path.resolve(currentDir, '../../bueno');
+const atomicHostedPageDir = path.resolve(
+  currentDir,
+  '../dist/atomic-hosted-page'
+);
+const devPublicDir = path.resolve(currentDir, '../dev/public');
+
+const run = async () => {
+  const headlessVersion = await getVersionFromPackageJson(headlessDir);
+  const buenoVersion = await getVersionFromPackageJson(buenoDir);
+
+  const directories = [
+    `${devPublicDir}/headless/v${headlessVersion}`,
+    `${devPublicDir}/bueno/v${buenoVersion}`,
+    `${devPublicDir}/atomic-hosted-page/`,
+  ];
+
+  for (const dir of directories) {
+    if (
+      await fs
+        .access(dir)
+        .then(() => true)
+        .catch(() => false)
+    ) {
+      console.log(`Deleting existing directory: ${dir}`);
+      await fs.rm(dir, {recursive: true, force: true});
+    }
+  }
+
+  for (const dir of directories) {
+    console.log(`Creating directory: ${dir}`);
+    await fs.mkdir(dir, {recursive: true});
+  }
+
+  console.log(
+    `Copying headless files to ${devPublicDir}/headless/v${headlessVersion}`
+  );
+  await copyFiles(
+    path.join(headlessDir, 'dist/browser'),
+    `${devPublicDir}/headless/v${headlessVersion}`
+  );
+
+  console.log(`Copying bueno files to ${devPublicDir}/bueno/v${buenoVersion}`);
+  await copyFiles(
+    path.join(buenoDir, 'dist/browser'),
+    `${devPublicDir}/bueno/v${buenoVersion}`
+  );
+
+  console.log(
+    `Copying atomic-hosted-page files to ${devPublicDir}/atomic-hosted-page/`
+  );
+  await copyFiles(atomicHostedPageDir, `${devPublicDir}/atomic-hosted-page/`);
+
+  console.log('Starting Vite server...');
+  execSync('vite serve dev', {stdio: 'inherit'});
+};
+
+run().catch((err) => {
+  console.error('An error occurred:', err);
+  process.exit(1);
+});
diff --git a/packages/atomic-hosted-page/stencil.config.ts b/packages/atomic-hosted-page/stencil.config.ts
@@ -1,4 +1,54 @@
 import {Config} from '@stencil/core';
+import {PluginImpl} from 'rollup';
+//@ts-expect-error - json import
+import buenoJson from '../bueno/package.json';
+//@ts-expect-error - json import
+import headlessJson from '../headless/package.json';
+
+const isNightly = process.env.IS_NIGHTLY === 'true';
+
+const headlessVersion = isNightly
+  ? `v${headlessJson.version.split('.').shift()}-nightly`
+  : 'v' + headlessJson.version;
+
+const buenoVersion = isNightly
+  ? `v${buenoJson.version.split('.').shift()}-nightly`
+  : 'v' + buenoJson.version;
+
+const packageMappings: {
+  [key: string]: {cdn: string};
+} = {
+  '@coveo/headless': {
+    cdn: `/headless/${headlessVersion}/headless.esm.js`,
+  },
+  '@coveo/bueno': {
+    cdn: `/bueno/${buenoVersion}/bueno.esm.js`,
+  },
+};
+
+const isCDN = process.env.DEPLOYMENT_ENVIRONMENT === 'CDN';
+
+const externalizeDependenciesPlugin: PluginImpl = () => {
+  return {
+    name: 'externalize-dependencies',
+    resolveId: (source, _importer, _options) => {
+      const packageMapping = packageMappings[source];
+
+      if (packageMapping) {
+        if (!isCDN) {
+          return false;
+        }
+
+        return {
+          id: packageMapping.cdn,
+          external: 'absolute',
+        };
+      }
+
+      return null;
+    },
+  };
+};
 
 export const config: Config = {
   namespace: 'atomic-hosted-page',
@@ -14,10 +64,8 @@ export const config: Config = {
       collectionDir: null,
       esmLoaderPath: '../loader',
     },
-    {
-      type: 'www',
-      serviceWorker: null,
-      copy: [{src: 'pages', keepDirStructure: false}].filter((n) => n.src),
-    },
   ],
+  rollupPlugins: {
+    before: [externalizeDependenciesPlugin()],
+  },
 };