chore: ensure absolute paths are not resolved as local when building for the CDN

packages/atomic/.storybook/main.mts

@@ -1,6 +1,10 @@
 import {nxViteTsPaths} from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 import type {StorybookConfig} from '@storybook/web-components-vite';
+import path from 'node:path';
 import {mergeConfig} from 'vite';
+import headlessJson from '../../../packages/headless/package.json';
+
+const isCDN = process.env.DEPLOYMENT_ENVIRONMENT === 'CDN';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.new.stories.@(js|jsx|ts|tsx|mdx)'],
@@ -16,12 +20,89 @@ const config: StorybookConfig = {
     options: {},
   },
 
-  viteFinal: async (config) =>
+  viteFinal: async (config, {configType}) =>
     mergeConfig(config, {
-      plugins: [nxViteTsPaths()],
+      plugins: [
+        nxViteTsPaths(),
+        configType === 'PRODUCTION' && isCDN && externalizeDependencies(),
+      ],
     }),
 };
 
+function externalizeDependencies() {
+  return {
+    name: 'externalize-dependencies',
+    enforce: 'pre',
+    resolveId: (id: string) => {
+      if (id.startsWith('/headless')) {
+        return false;
+      }
+      if (packageMappings[id]) {
+        if (!isCDN) {
+          return false;
+        }
+
+        return {
+          id: packageMappings[id].cdn,
+          external: 'absolute',
+        };
+      }
+    },
+  };
+}
+
+let headlessVersion: string;
+if (isCDN) {
+  console.log('Building for CDN');
+  headlessVersion = 'v' + headlessJson.version;
+}
+
+const packageMappings: {[key: string]: {devWatch: string; cdn: string}} = {
+  '@coveo/headless/commerce': {
+    devWatch: path.resolve(
+      __dirname,
+      '../src/external-builds/commerce/headless.esm.js'
+    ),
+    cdn: `/headless/${headlessVersion}/commerce/headless.esm.js`,
+  },
+  '@coveo/headless/insight': {
+    devWatch: path.resolve(
+      __dirname,
+      '../src/external-builds/insight/headless.esm.js'
+    ),
+    cdn: `/headless/${headlessVersion}/insight/headless.esm.js`,
+  },
+  '@coveo/headless/product-recommendation': {
+    devWatch: path.resolve(
+      __dirname,
+      '../src/external-builds/product-recommendation/headless.esm.js'
+    ),
+    cdn: `/headless/${headlessVersion}/product-recommendation/headless.esm.js`,
+  },
+  '@coveo/headless/recommendation': {
+    devWatch: path.resolve(
+      __dirname,
+      '../src/external-builds/recommendation/headless.esm.js'
+    ),
+    cdn: `/headless/${headlessVersion}/recommendation/headless.esm.js`,
+  },
+  '@coveo/headless/case-assist': {
+    devWatch: path.resolve(
+      __dirname,
+      '../src/external-builds/case-assist/headless.esm.js'
+    ),
+    cdn: `/headless/${headlessVersion}/case-assist/headless.esm.js`,
+  },
+  '@coveo/headless': {
+    devWatch: path.resolve(__dirname, '../src/external-builds/headless.esm.js'),
+    cdn: `/headless/${headlessVersion}/headless.esm.js`,
+  },
+  /*   '@coveo/bueno': {
+    devWatch: path.resolve(__dirname, './src/external-builds/bueno.esm.js'),
+    cdn: `/bueno/${headlessVersion}/bueno.esm.js`,
+  }, */
+};
+
 export default config;
 
 // To customize your Vite configuration you can use the viteFinal field.

packages/atomic/stencil.config.ts

@@ -1,4 +1,3 @@
-import replaceWithASTPlugin from '@coveo/rollup-plugin-replace-with-ast';
 import alias from '@rollup/plugin-alias';
 import replacePlugin from '@rollup/plugin-replace';
 import {postcss} from '@stencil-community/postcss';
@@ -23,8 +22,7 @@ import {generateAngularModuleDefinition as angularModule} from './stencil-plugin
 const isProduction = process.env.BUILD === 'production';
 const isCDN = process.env.DEPLOYMENT_ENVIRONMENT === 'CDN';
 
-let headlessVersion: string;
-
+let headlessVersion: string = '';
 if (isCDN) {
   console.log('Building for CDN');
   headlessVersion = 'v' + headlessJson.version;
@@ -72,7 +70,7 @@ const packageMappings: {[key: string]: {devWatch: string; cdn: string}} = {
   },
   /*   '@coveo/bueno': {
     devWatch: path.resolve(__dirname, './src/external-builds/bueno.esm.js'),
-    cdn: `/bueno/${headlessVersion}/bueno.esm.js`,
+    cdn: `/bueno/${buenoVersion}/bueno.esm.js`,
   }, */
 };
 
@@ -83,15 +81,6 @@ function generateAliasEntries() {
   }));
 }
 
-function generateReplaceValues(): {[key: string]: string} {
-  return Object.entries(packageMappings).reduce(
-    (acc: {[key: string]: string}, [find, paths]) => {
-      acc[find] = paths.cdn;
-      return acc;
-    },
-    {}
-  );
-}
 function filterComponentsByUseCaseForReactOutput(useCasePath: string) {
   return readdirSync(useCasePath, {
     recursive: true,
@@ -254,10 +243,6 @@ export const config: Config = {
       ],
     }),
     replace(),
-    isCDN &&
-      replaceWithASTPlugin({
-        replacements: generateReplaceValues(),
-      }),
   ],
   rollupPlugins: {
     before: [
@@ -276,15 +261,21 @@ export const config: Config = {
     enableImportInjection: true,
   },
 };
-
 function externalizeDependenciesPlugin() {
   return {
     name: 'externalize-dependencies',
     resolveId(source: string) {
-      // Externalize @coveo/headless and @coveo/bueno
-      if (/^@coveo\/(headless)/.test(source)) {
-        return false;
+      if (packageMappings[source]) {
+        if (!isCDN) {
+          return false;
+        }
+
+        return {
+          id: packageMappings[source].cdn,
+          external: 'absolute',
+        };
       }
+
       return null;
     },
   };