fix(atomic): allow atomic loader to be deployed to the CDN

.prettierignore

@@ -14,7 +14,6 @@ utils/**/.storybook/**
 scripts/deploy/execute-deployment-pipeline.mjs
 **/staticresources/**
 packages/atomic-hosted-page/loader/**/*
-packages/atomic/loader/**/*
 packages/atomic/docs/**/*
 packages/atomic/dist-storybook/**/*
 packages/atomic/src/components/search/atomic-search-interface/lang/*.json

packages/atomic-react/package.json

@@ -12,6 +12,7 @@
   "scripts": {
     "build": "nx build",
     "clean": "rimraf -rf dist",
+    "build:fixLoaderImportPaths": "node ./scripts/fix-loader-import-paths.js",
     "build:fixGeneratedImportPaths": "fix-esm-import-path src/components/stencil-generated",
     "build:bundles:esm": "tsc -p tsconfig.esm.json",
     "build:bundles:iife-cjs": "rollup --config rollup.config.mjs --bundleConfigAsCjs",

packages/atomic-react/project.json

@@ -8,6 +8,7 @@
       "executor": "nx:run-commands",
       "options": {
         "commands": [
+          "npm run build:fixLoaderImportPaths",
           "npm run build:fixGeneratedImportPaths",
           "npm run build:bundles",
           "npm run build:assets"

packages/atomic-react/scripts/fix-loader-import-paths.js

@@ -0,0 +1,29 @@
+import {promises as fs} from 'fs';
+import path from 'path';
+
+const files = [
+  path.resolve('src/components/stencil-generated/commerce/index.ts'),
+  path.resolve('src/components/stencil-generated/search/index.ts'),
+];
+
+const oldImport =
+  "import { defineCustomElements } from '@coveo/atomic/dist/loader';";
+const newImport =
+  "import { defineCustomElements } from '@coveo/atomic/loader';";
+
+const updateFiles = async () => {
+  await Promise.all(
+    files.map(async (filePath) => {
+      try {
+        let data = await fs.readFile(filePath, 'utf8');
+        const updatedData = data.replace(oldImport, newImport);
+        await fs.writeFile(filePath, updatedData, 'utf8');
+        console.log(`File updated: ${filePath}`);
+      } catch (err) {
+        console.error(`Error updating file: ${filePath}`, err);
+      }
+    })
+  );
+};
+
+updateFiles();

packages/atomic/.eslintrc.cjs

@@ -13,7 +13,6 @@ module.exports = {
     'src/external-builds/**/*',
     'dist/**/*',
     'www/**/*',
-    'loader/**/*',
     'docs/**/*',
     'dist-storybook',
   ],

packages/atomic/package.json

@@ -14,9 +14,9 @@
   "types": "dist/types/index.d.ts",
   "exports": {
     "./loader": {
-      "types": "./loader/index.d.ts",
-      "import": "./loader/index.js",
-      "require": "./loader/index.cjs.js"
+      "types": "./dist/loader/index.d.ts",
+      "import": "./dist/loader/index.js",
+      "require": "./dist/loader/index.cjs.js"
     },
     ".": {
       "types": "./dist/types/index.d.ts",
@@ -39,8 +39,7 @@
   "files": [
     "dist/",
     "docs/",
-    "licenses/",
-    "loader/"
+    "licenses/"
   ],
   "scripts": {
     "clean": "rimraf -rf dist/* dist-storybook/* www/* docs/* loader/* playwright-report/*",

packages/atomic/project.json

@@ -152,7 +152,7 @@
       "dependsOn": ["^build", "cached:build:stencil"],
       "executor": "nx:run-commands",
       "options": {
-        "command": "rm ./loader/package.json",
+        "command": "rm ./dist/loader/package.json",
         "cwd": "packages/atomic"
       }
     }

packages/atomic/stencil.config.ts

@@ -155,7 +155,6 @@ export const config: Config = {
     {
       type: 'dist',
       collectionDir: null,
-      esmLoaderPath: '../loader',
       copy: [
         {src: 'themes'},
         {

packages/samples/stencil/stencil.config.ts

@@ -1,4 +1,6 @@
 import {Config} from '@stencil/core';
+import {readFileSync} from 'fs';
+import {join} from 'path';
 import html from 'rollup-plugin-html';
 
 // https://stenciljs.com/docs/config
@@ -36,6 +38,36 @@ export const config: Config = {
       html({
         include: 'src/components/**/*.html',
       }),
+      resolveAtomicPaths(),
     ],
   },
 };
+
+function resolveAtomicPaths() {
+  return {
+    resolveId(source: string) {
+      if (source.startsWith('@coveo/atomic/')) {
+        const nodeModulesLocation = '../../../node_modules';
+
+        const packageJsonPath = join(
+          process.cwd(),
+          nodeModulesLocation,
+          '@coveo',
+          'atomic',
+          'package.json'
+        );
+
+        const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+
+        const subPath = './' + source.replace('@coveo/atomic/', '');
+        const subPathImport = packageJson.exports[subPath].import;
+
+        const id = `${nodeModulesLocation}/@coveo/atomic/${subPathImport}`;
+        return {
+          id,
+        };
+      }
+      return null;
+    },
+  };
+}