lab/testing ci

packages/atomic-hosted-page/package.json

@@ -32,7 +32,7 @@
   "dependencies": {
     "@coveo/bueno": "0.46.1",
     "@coveo/headless": "2.80.0",
-    "@stencil/core": "4.20.0"
+    "@stencil/core": "4.21.0"
   },
   "devDependencies": {
     "@coveo/release": "1.0.0",

packages/atomic-react/esbuild.mjs

@@ -0,0 +1,93 @@
+import {build} from 'esbuild';
+import {apacheLicense} from '../../scripts/license/apache.mjs';
+
+const USE_CASES = {
+  search: 'src/components/search/index.ts',
+  recommendation: 'src/components/recommendation/index.ts',
+  commerce: 'src/components/commerce/index.ts',
+};
+
+/**
+ *
+ * @type {import('esbuild').BuildOptions}
+ */
+const BASE_CONFIG = {
+  bundle: true,
+  banner: {js: apacheLicense()},
+  external: ['react', 'react-dom', '@coveo/headless'],
+};
+
+/**
+ * Builds the ESM format for browser.
+ * @param {string} entryPoint - The entry point file path.
+ * @param {string} useCaseName - The use case name to distinguish the output files.
+ */
+async function browserEsm(entryPoint, useCaseName) {
+  return await build({
+    ...BASE_CONFIG,
+    entryPoints: [entryPoint],
+    outfile: `dist/${useCaseName}/atomic-react.browser.mjs`,
+    format: 'esm',
+    platform: 'browser',
+  });
+}
+
+/**
+ * Builds the ESM format for Node.js.
+ * @param {string} entryPoint - The entry point file path.
+ * @param {string} useCaseName - The use case name to distinguish the output files.
+ */
+async function esm(entryPoint, useCaseName) {
+  return await build({
+    ...BASE_CONFIG,
+    entryPoints: [entryPoint],
+    outfile: `dist/${useCaseName}/atomic-react.mjs`,
+    format: 'esm',
+    platform: 'node',
+  });
+}
+
+/**
+ * Builds the CJS format for Node.js.
+ * @param {string} entryPoint - The entry point file path.
+ * @param {string} useCaseName - The use case name to distinguish the output files.
+ */
+async function cjs(entryPoint, useCaseName) {
+  return await build({
+    ...BASE_CONFIG,
+    entryPoints: [entryPoint],
+    outfile: `dist/${useCaseName}/atomic-react.cjs`,
+    format: 'cjs',
+    platform: 'node',
+  });
+}
+
+/**
+ * Builds the IIFE format for browser.
+ * @param {string} entryPoint - The entry point file path.
+ * @param {string} useCaseName - The use case name to distinguish the output files.
+ */
+async function iife(entryPoint, useCaseName) {
+  return await build({
+    ...BASE_CONFIG,
+    entryPoints: [entryPoint],
+    outfile: `dist/${useCaseName}/atomic-react.iife.js`,
+    format: 'iife',
+    platform: 'browser',
+    globalName: 'AtomicReact',
+  });
+}
+
+async function main() {
+  const buildPromises = Object.entries(USE_CASES).flatMap(
+    ([useCaseName, entryPoint]) => [
+      browserEsm(entryPoint, useCaseName),
+      esm(entryPoint, useCaseName),
+      cjs(entryPoint, useCaseName),
+      iife(entryPoint, useCaseName),
+    ]
+  );
+  await Promise.all(buildPromises);
+}
+
+main();

packages/atomic-react/package.json

@@ -11,18 +11,63 @@
   "scripts": {
     "build": "nx build",
     "clean": "rimraf -rf dist",
-    "build:bundles:esm": "tsc -p tsconfig.esm.json",
-    "build:bundles:cjs": "tsc -p tsconfig.cjs.json",
-    "build:bundles:iife": "rollup --config rollup.config.mjs",
-    "build:bundles": "concurrently \"npm run build:bundles:esm\" \"npm run build:bundles:cjs\"  \"npm run build:bundles:iife\"",
+    "build:assets": "ncp ../atomic/dist/atomic/assets dist/assets && ncp ../atomic/dist/atomic/lang dist/lang ",
+    "build:definitions": "tsc --project tsconfig.json",
+    "build:bundles": "node esbuild.mjs",
     "publish:npm": "npm run-script -w=@coveo/release npm-publish",
     "publish:bump": "npm run-script -w=@coveo/release bump",
-    "promote:npm:latest": "node ../../scripts/deploy/update-npm-tag.mjs latest",
-    "build:assets": "ncp ../atomic/dist/atomic/assets dist/assets && ncp ../atomic/dist/atomic/lang dist/lang "
+    "promote:npm:latest": "node ../../scripts/deploy/update-npm-tag.mjs latest"
   },
-  "main": "./dist/cjs/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/search/atomic-react.cjs",
+  "module": "./dist/search/atomic-react.mjs",
+  "exports": {
+    ".": {
+      "types": "./dist/types/search/index.d.ts",
+      "node": {
+        "types": "./dist/types/search/index.d.ts",
+        "import": "./dist/search/atomic-react.mjs",
+        "require": "./dist/search/atomic-react.cjs"
+      },
+      "browser": {
+        "types": "./dist/types/search/index.d.ts",
+        "import": "./dist/search/atomic-react.browser.mjs",
+        "require": "./dist/search/atomic-react.iife.js"
+      },
+      "import": "./dist/search/atomic-react.mjs",
+      "require": "./dist/search/atomic-react.cjs"
+    },
+    "./commerce": {
+      "types": "./dist/types/commerce/index.d.ts",
+      "node": {
+        "types": "./dist/types/commerce/index.d.ts",
+        "import": "./dist/commerce/atomic-react.mjs",
+        "require": "./dist/commerce/atomic-react.cjs"
+      },
+      "browser": {
+        "types": "./dist/types/commerce/index.d.ts",
+        "import": "./dist/commerce/atomic-react.browser.mjs",
+        "require": "./dist/commerce/atomic-react.iife.js"
+      },
+      "import": "./dist/commerce/atomic-react.mjs",
+      "require": "./dist/commerce/atomic-react.cjs"
+    },
+    "./recommendation": {
+      "types": "./dist/types/recommendation/index.d.ts",
+      "node": {
+        "types": "./dist/types/recommendation/index.d.ts",
+        "import": "./dist/recommendation/atomic-react.mjs",
+        "require": "./dist/recommendation/atomic-react.cjs"
+      },
+      "browser": {
+        "types": "./dist/types/recommendation/index.d.ts",
+        "import": "./dist/recommendation/atomic-react.browser.mjs",
+        "require": "./dist/recommendation/atomic-react.iife.js"
+      },
+      "import": "./dist/recommendation/atomic-react.mjs",
+      "require": "./dist/recommendation/atomic-react.cjs"
+    }
+  },
+  "types": "./dist/types/search/index.d.ts",
   "files": [
     "dist/",
     "recommendation/",
@@ -32,22 +77,14 @@
     "@coveo/atomic": "2.78.0"
   },
   "devDependencies": {
-    "@coveo/headless": "2.80.0",
     "@coveo/release": "1.0.0",
-    "@rollup/plugin-commonjs": "^25.0.0",
-    "@rollup/plugin-json": "6.1.0",
-    "@rollup/plugin-node-resolve": "^15.0.0",
-    "@rollup/plugin-replace": "^5.0.0",
-    "@rollup/plugin-terser": "0.4.4",
-    "@rollup/plugin-typescript": "^11.0.0",
     "@types/node": "20.14.12",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
+    "esbuild": "0.23.1",
     "ncp": "2.0.0",
     "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "rollup": "3.29.4",
-    "rollup-plugin-polyfill-node": "^0.13.0"
+    "react-dom": "18.3.1"
   },
   "peerDependencies": {
     "@coveo/headless": "2.80.0",

packages/atomic-react/project.json

@@ -7,7 +7,11 @@
       "dependsOn": ["^build", "clean"],
       "executor": "nx:run-commands",
       "options": {
-        "commands": ["npm run build:bundles", "npm run build:assets"],
+        "commands": [
+          "npm run build:bundles",
+          "npm run build:assets",
+          "npm run build:definitions"
+        ],
         "parallel": false,
         "cwd": "packages/atomic-react"
       }

packages/atomic-react/src/components/commerce/CommerceInterfaceWrapper.tsx

@@ -1,6 +1,6 @@
 import type {JSX, i18n} from '@coveo/atomic';
 import React, {useEffect, useRef} from 'react';
-import {AtomicCommerceInterface} from '../stencil-generated/commerce';
+import {AtomicCommerceInterface} from '../stencil-generated/commerce/components';
 
 type ExecuteRequest = HTMLAtomicCommerceInterfaceElement['executeFirstRequest'];
 

packages/atomic-react/src/components/commerce/CommerceProductListWrapper.tsx

@@ -6,7 +6,7 @@ import {renderToString} from 'react-dom/server';
 import {
   AtomicCommerceProductList,
   AtomicProductLink,
-} from '../stencil-generated/commerce';
+} from '../stencil-generated/commerce/components';
 
 interface Template {
   contentTemplate: JSX.Element;

packages/atomic-react/src/components/commerce/CommerceRecommendationListWrapper.tsx

@@ -6,7 +6,7 @@ import {renderToString} from 'react-dom/server';
 import {
   AtomicCommerceRecommendationList,
   AtomicProductLink,
-} from '../stencil-generated/commerce';
+} from '../stencil-generated/commerce/components';
 
 interface Template {
   contentTemplate: JSX.Element;

packages/atomic-react/src/components/commerce/index.ts

@@ -1,4 +1,4 @@
-export * from '../stencil-generated/commerce/index';
+export * from '../stencil-generated/commerce/components';
 export * from '@coveo/headless/commerce';
 export {CommerceBindings, i18n} from '@coveo/atomic';
 

packages/atomic-react/src/components/recommendation/RecsInterfaceWrapper.tsx

@@ -4,7 +4,7 @@ import {
   buildRecommendationEngine,
 } from '@coveo/headless/recommendation';
 import React, {useEffect, useRef} from 'react';
-import {AtomicRecsInterface} from '../stencil-generated/search';
+import {AtomicRecsInterface} from '../stencil-generated/search/components';
 
 type GetRecommendations = HTMLAtomicRecsInterfaceElement['getRecommendations'];
 /**

packages/atomic-react/src/components/recommendation/RecsListWrapper.tsx

@@ -3,7 +3,10 @@ import type {Result} from '@coveo/headless/recommendation';
 import React, {useEffect, useRef} from 'react';
 import {createRoot} from 'react-dom/client';
 import {renderToString} from 'react-dom/server';
-import {AtomicRecsList, AtomicResultLink} from '../stencil-generated/search';
+import {
+  AtomicRecsList,
+  AtomicResultLink,
+} from '../stencil-generated/search/components';
 
 interface Template {
   contentTemplate: JSX.Element;

packages/atomic-react/src/components/recommendation/index.ts

@@ -1,4 +1,4 @@
-export * from '../stencil-generated/search';
+export * from '../stencil-generated/search/components';
 export * from '@coveo/headless/recommendation';
 export {RecsBindings, i18n} from '@coveo/atomic';