chore(atomic): bundle lit dependencies for CDN build (#4908)

This PR adds a bundling step (with rollup) in the atomic build process.
This step only runs for the CDN build, and ensures that dependencies for
lit components get bundled in the dist folder.

Since this PR does not contain a lit component, you can take a look at
#4893 as an example.

https://coveord.atlassian.net/browse/KIT-3906

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(currentDir, '../cdn');

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;