chore(atomic): bundle lit dependencies for CDN build

packages/atomic-hosted-page/scripts/start.js

@@ -3,12 +3,6 @@ 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 {
@@ -32,7 +26,7 @@ const copyFiles = async (source, destination) => {
   });
 };
 
-const currentDir = getCurrentDir();
+const currentDir = import.meta.dirname;
 const headlessDir = path.resolve(currentDir, '../../headless');
 const buenoDir = path.resolve(currentDir, '../../bueno');
 const atomicHostedPageDir = path.resolve(

packages/atomic/.gitignore

@@ -39,3 +39,6 @@ headless/
 /playwright/.cache/
 
 dist-storybook/
+
+/dev/bueno/
+/dev/headless/

packages/atomic/.storybook/main.mts

@@ -14,6 +14,14 @@ const externalizeDependencies: PluginImpl = () => {
         return false;
       }
 
+      if (
+        /(.*)(\/|\\)+(bueno|headless)\/v\d+\.\d+\.\d+(-nightly)?(\/|\\).*/.test(
+          source
+        )
+      ) {
+        return false;
+      }
+
       const packageMappings = generateExternalPackageMappings(__dirname);
       const packageMapping = packageMappings[source];
 

packages/atomic/package.json

@@ -93,6 +93,7 @@
     "@nx/vite": "20.3.1",
     "@playwright/test": "1.49.1",
     "@rollup/plugin-alias": "5.1.1",
+    "@rollup/plugin-node-resolve": "16.0.0",
     "@rollup/plugin-replace": "6.0.2",
     "@stencil-community/postcss": "2.2.0",
     "@stencil/angular-output-target": "0.8.4",

packages/atomic/project.json

@@ -36,6 +36,7 @@
           "node ./scripts/stencil-proxy.mjs",
           "node ./scripts/build.mjs --config=tsconfig.lit.json",
           "node ./scripts/process-css.mjs --config=tsconfig.lit.json ",
+          "if [ \"$DEPLOYMENT_ENVIRONMENT\" == \"CDN\" ]; then rollup -c rollup.config.js; fi",
           "esbuild src/autoloader/index.ts --format=esm --outfile=dist/atomic/autoloader/index.esm.js",
           "esbuild src/autoloader/index.ts --format=cjs --outfile=dist/atomic/autoloader/index.cjs.js"
         ],
@@ -106,7 +107,7 @@
     "web:dev": {
       "executor": "nx:run-commands",
       "options": {
-        "command": "vite serve dev",
+        "command": "node ./scripts/start-dev.mjs",
         "cwd": "{projectRoot}"
       }
     },

packages/atomic/rollup.config.js

@@ -0,0 +1,76 @@
+import resolve from '@rollup/plugin-node-resolve';
+import {readdirSync, statSync} from 'fs';
+import {join, resolve as resolvePath, relative} from 'path';
+import {generateExternalPackageMappings} from './scripts/externalPackageMappings.mjs';
+
+const isCDN = process.env.DEPLOYMENT_ENVIRONMENT === 'CDN';
+
+const packageMappings = generateExternalPackageMappings(import.meta.dirname);
+
+const externalizeDependenciesPlugin = () => {
+  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;
+    },
+  };
+};
+
+const getDirectories = (src) => {
+  const dirs = [];
+  const files = readdirSync(src);
+  files.forEach((file) => {
+    const fullPath = join(src, file);
+    if (statSync(fullPath).isDirectory()) {
+      dirs.push(fullPath);
+      dirs.push(...getDirectories(fullPath));
+    }
+  });
+  return dirs;
+};
+
+const distDirs = getDirectories(resolvePath('dist/atomic'));
+
+const inputFiles = distDirs.flatMap((distDir) => {
+  return readdirSync(distDir)
+    .filter((file) => file.endsWith('.js'))
+    .map((file) => join(distDir, file));
+});
+
+export default {
+  input: inputFiles,
+  output: {
+    dir: 'dist/atomic',
+    format: 'esm',
+    entryFileNames: ({facadeModuleId}) => {
+      const relativePath = relative(resolvePath('dist/atomic'), facadeModuleId);
+      return `${relativePath}`;
+    },
+    chunkFileNames: '[name].js',
+    manualChunks: (id) => {
+      if (id.includes('node_modules')) {
+        return (
+          'vendor/' +
+          id.toString().split('node_modules/')[1].split('/')[0].toString()
+        );
+      }
+    },
+  },
+  plugins: [
+    resolve({preserveSymlinks: false}),
+    externalizeDependenciesPlugin(),
+  ],
+};

packages/atomic/scripts/start-dev.mjs

@@ -0,0 +1,81 @@
+import {execSync} from 'child_process';
+import fs from 'fs/promises';
+import ncp from 'ncp';
+import path from 'path';
+
+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 = import.meta.dirname;
+const headlessDir = path.resolve(currentDir, '../../headless');
+const buenoDir = path.resolve(currentDir, '../../bueno');
+const devPublicDir = path.resolve(currentDir, '../dev');
+
+const run = async () => {
+  const headlessVersion = await getVersionFromPackageJson(headlessDir);
+  const buenoVersion = await getVersionFromPackageJson(buenoDir);
+
+  const directories = [
+    `${devPublicDir}/headless/v${headlessVersion}`,
+    `${devPublicDir}/bueno/v${buenoVersion}`,
+  ];
+
+  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('Starting Vite server...');
+  execSync('vite serve dev', {stdio: 'inherit'});
+};
+
+run().catch((err) => {
+  console.error('An error occurred:', err);
+  process.exit(1);
+});

packages/atomic/scripts/watch.mjs

@@ -29,6 +29,7 @@ async function rebuild(event, fileName) {
     'node ./scripts/stencil-proxy.mjs',
     'node ./scripts/build.mjs --config=tsconfig.lit.json',
     'node ./scripts/process-css.mjs --config=tsconfig.lit.json ',
+    'if [ "$DEPLOYMENT_ENVIRONMENT" == "CDN" ]; then rollup -c rollup.config.js; fi',
     'esbuild src/autoloader/index.ts --format=esm --outfile=dist/atomic/autoloader/index.esm.js',
     'esbuild src/autoloader/index.ts --format=cjs --outfile=dist/atomic/autoloader/index.cjs.js',
   ];

packages/atomic/src/utils/coveo.tw.css

@@ -1,4 +1,4 @@
-* {
+:host {
   /* Primary colors */
   --atomic-primary: #1372ec;
   --atomic-primary-light: #399ffe;