chore: setup lit cohabitation

.eslintrc.js

@@ -12,6 +12,8 @@ module.exports = {
     'scripts/deploy/execute-deployment-pipeline.mjs',
     'build',
     '.deployment.config.json',
+    'packages/atomic-angular/scripts/build-lit.mjs',
+    'packages/atomic-react/scripts/build-lit.mjs',
   ],
   env: {
     jest: true,

.github/actions/e2e-atomic-insight-panel/action.yml

@@ -16,8 +16,8 @@ runs:
         browser: chrome
         command-prefix: 'npx -w @coveo/atomic cypress-repeat run -n 3 --until-passes --rerun-failed-only --'
         config-file: cypress-insight-panel.config.mjs
-        start: npm start -w @coveo/atomic
-        wait-on: 'http://localhost:3333/ping'
+        start: npx nx web:dev atomic
+        wait-on: 'http://localhost:3333'
         wait-on-timeout: 600000
         install: false
         record: false

.github/actions/e2e-atomic-screenshots/action.yml

@@ -16,8 +16,8 @@ runs:
         browser: chrome
         command-prefix: 'npx -w @coveo/atomic cypress-repeat run -n 3 --until-passes --rerun-failed-only --'
         config-file: cypress-screenshots.config.mjs
-        start: npm start -w @coveo/atomic
-        wait-on: 'http://localhost:3333/ping'
+        start: npx nx web:dev atomic
+        wait-on: 'http://localhost:3333'
         wait-on-timeout: 600000
         install: false
         record: false

.github/actions/e2e-atomic/action.yml

@@ -25,8 +25,8 @@ runs:
         browser: chrome
         command-prefix: 'npx -w @coveo/atomic cypress-repeat run -n 3 --until-passes --rerun-failed-only --'
         spec: ${{ inputs.spec }}
-        start: npm start -w @coveo/atomic
-        wait-on: 'http://localhost:3333/ping'
+        start: npx nx web:dev atomic
+        wait-on: 'http://localhost:3333'
         wait-on-timeout: 600000
         install: false
         record: false

.prettierignore

@@ -27,3 +27,5 @@ packages/samples/headless-commerce-ssr-remix/build/**/*
 packages/samples/angular/src/lang/*.json
 packages/samples/vuejs/public/lang/*.json
 .deployment.config.json
+packages/atomic-angular/scripts/build-lit.mjs
+packages/atomic-react/scripts/build-lit.mjs

packages/atomic-angular/project.json

@@ -11,7 +11,11 @@
       "dependsOn": ["^build"],
       "executor": "nx:run-commands",
       "options": {
-        "commands": ["npm run build:bundles", "npm run build:assets"],
+        "commands": [
+          "node ./scripts/build-lit.mjs",
+          "npm run build:bundles",
+          "npm run build:assets"
+        ],
         "parallel": false,
         "cwd": "packages/atomic-angular"
       }

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts

@@ -3084,3 +3084,5 @@ export class AtomicTimeframeFacet {
 export declare interface AtomicTimeframeFacet extends Components.AtomicTimeframeFacet {}
 
 
+
+import type {} from '@coveo/atomic/components';

packages/atomic-angular/scripts/build-lit.mjs

@@ -0,0 +1,59 @@
+import cem from '@coveo/atomic/custom-elements-manifest' with {type: 'json'};
+import { createWriteStream, readFileSync, writeFileSync } from 'fs';
+
+const isLitDeclaration = (declaration) => declaration?.superclass?.name === 'LitElement';
+
+const atomicAngularModuleFilePath ='projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts';
+const atomicAngularModuleFileContent = readFileSync(atomicAngularModuleFilePath, 'utf-8');
+const atomicAngularComponentFileStream = createWriteStream('projects/atomic-angular/src/lib/stencil-generated/components.ts', {flags: 'a'});
+const litDeclarations = [];
+
+
+const declarationToProxyCmp = (declaration) =>
+`
+@ProxyCmp({
+  inputs: [${declaration.attributes.map(attr => `'${attr.name}'`).join(', ')}]
+})
+@Component({
+  selector: '${declaration.tagName}',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: [${declaration.attributes.map(attr => `'${attr.name}'`).join(', ')}]
+})
+export class ${declaration.name} {
+  protected readonly el: HTMLElement;
+  constructor(c: ChangeDetectorRef, el: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = el.nativeElement;
+  }
+}
+
+export declare interface ${declaration.name} extends Lit${declaration.name} {}
+`
+
+const declarationToLitImport = (declaration) => `${declaration.name} as Lit${declaration.name}`;
+
+const litImports = []
+
+for (const module of cem.modules) {
+  for (const declaration of module.declarations) {
+    if (isLitDeclaration(declaration)) {
+      atomicAngularComponentFileStream.write(declarationToProxyCmp(declaration));
+      litImports.push(declarationToLitImport(declaration));
+      litDeclarations.push(`${declaration.name}`);
+    }
+  }
+}
+atomicAngularComponentFileStream.write(`\nimport type {${litImports.join(',')}} from '@coveo/atomic/components';`);
+atomicAngularComponentFileStream.end();
+
+
+if(litDeclarations.length > 0) {
+  writeFileSync(
+    atomicAngularModuleFilePath,
+    atomicAngularModuleFileContent
+      .replace(/const DECLARATIONS = \[\n/m, `const DECLARATIONS = [\n${litDeclarations.join(',\n')},\n`)
+      .replace(/^import \{$/m, `import {\n${litDeclarations.join(',\n')},`)
+  );
+}

packages/atomic-react/package.json

@@ -30,7 +30,9 @@
     "commerce/"
   ],
   "dependencies": {
-    "@coveo/atomic": "3.12.1"
+    "@coveo/atomic": "3.12.1",
+    "@lit/react": "1.0.6",
+    "lit": "3.2.1"
   },
   "devDependencies": {
     "@coveo/release": "1.0.0",

packages/atomic-react/project.json

@@ -8,6 +8,7 @@
       "executor": "nx:run-commands",
       "options": {
         "commands": [
+          "node ./scripts/build-lit.mjs",
           "npm run build:fixLoaderImportPaths",
           "npm run build:fixGeneratedImportPaths",
           "npm run build:bundles",

packages/atomic-react/rollup.config.js

@@ -96,7 +96,12 @@ const commonExternal = [
   'react-dom',
   'react-dom/client',
   'react-dom/server',
+  'lit',
+  'lit/decorators.js',
+  '@lit/react',
+  '@coveo/atomic',
   '@coveo/atomic/loader',
+  '@coveo/atomic/components',
   '@coveo/headless',
   '@coveo/headless/recommendation',
   '@coveo/headless/commerce',

packages/atomic-react/scripts/build-lit.mjs

@@ -0,0 +1,90 @@
+import cem from '@coveo/atomic/custom-elements-manifest' with {type: 'json'};
+import {writeFileSync} from 'node:fs';
+import * as prettier from 'prettier';
+
+const isLitDeclaration = (declaration) =>
+  declaration?.superclass?.name === 'LitElement';
+
+const entries = [
+  {
+    path: 'src/components/search/components.ts',
+    content: '',
+    excludedComponents: [
+      'atomic-result-template',
+      'atomic-recs-result-template',
+      'atomic-field-condition',
+    ],
+    excludedComponentDirectories: ['src/components/commerce'],
+    computedComponentImports: [],
+  },
+  {
+    path: 'src/components/commerce/components.ts',
+    content: '',
+    excludedComponents: [
+      'atomic-product-template',
+      'atomic-recs-result-template',
+      'atomic-field-condition',
+    ],
+    excludedComponentDirectories: [
+      'src/components/search',
+      'src/components/recommendations',
+    ],
+    computedComponentImports: [],
+  },
+];
+
+const declarationToLitImport = (declaration) =>
+  `${declaration.name} as Lit${declaration.name}`;
+
+const declarationToComponent = (declaration) =>
+  `
+export const ${declaration.name} = createComponent({
+  tagName: '${declaration.tagName}',
+  react: React,
+  elementClass: Lit${declaration.name},
+});
+`;
+
+for (const module of cem.modules) {
+  for (const declaration of module.declarations) {
+    if (isLitDeclaration(declaration)) {
+      for (const entry of entries) {
+        if (
+          entry.excludedComponentDirectories.some((directory) =>
+            module.path.startsWith(directory)
+          ) ||
+          entry.excludedComponents.includes(declaration.tagName)
+        ) {
+          continue;
+        }
+        entry.computedComponentImports.push(
+          declarationToLitImport(declaration)
+        );
+        entry.content+=(declarationToComponent(declaration));
+      }
+    }
+  }
+}
+
+for (const entry of entries) {
+  const prettierConfig = {
+    ...(await prettier.resolveConfig(entry.path)),
+    parser: 'typescript'
+  };
+  if(entry.computedComponentImports.length===0) {
+    writeFileSync(entry.path, await prettier.format('export {}', prettierConfig));
+    continue;
+  }
+  writeFileSync(
+    entry.path,
+    await prettier.format(
+      [
+        `import {createComponent} from '@lit/react';`,
+        `import React from 'react';`,
+        `import {${entry.computedComponentImports.join(',')}} from '@coveo/atomic/components';`,
+        entry.content
+      ].join('\n'),
+      prettierConfig
+    )
+  )
+}

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

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -1,4 +1,6 @@
 export * from '../stencil-generated/search/index.js';
+export * from '../search/components.js';
+
 export {RecsBindings, i18n} from '@coveo/atomic';
 
 // Important: Re-exporting under the same name (eg: "AtomicRecsInterface") shadows the original component

packages/atomic-react/src/components/search/components.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,4 +1,5 @@
 export * from '../stencil-generated/search/index.js';
+export * from './components.js';
 export {Bindings, i18n} from '@coveo/atomic';
 
 // Important: Re-exporting under the same name (eg: "AtomicSearchInterface") shadows the original component

packages/atomic/custom-elements-manifest.config.mjs

@@ -2,9 +2,10 @@ import {cemPlugin} from './scripts/cem-plugin.mjs';
 
 export default {
   /** Globs to analyze */
-  globs: ['src/**/*.tsx'],
+  globs: ['src/**/*.tsx', 'src/**/*.ts'],
   /** Globs to exclude */
   exclude: ['**/*.stories.tsx', '**/*.stories.ts', '**/*.stories.js'],
   stencil: true,
+  litelement: true,
   plugins: [cemPlugin()],
 };