test: add package compatibility tests using publint

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

@@ -13,7 +13,7 @@ runs:
       with:
         browser: chrome
         command-prefix: 'npx -w @coveo/atomic cypress-repeat run -n 3 --until-passes --rerun-failed-only --'
-        config-file: cypress-insight-panel.config.ts
+        config-file: cypress-insight-panel.config.mjs
         start: npm start -w @coveo/atomic
         wait-on: 'http://localhost:3333/ping'
         wait-on-timeout: 600000

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

@@ -15,7 +15,7 @@ runs:
       with:
         browser: chrome
         command-prefix: 'npx -w @coveo/atomic cypress-repeat run -n 3 --until-passes --rerun-failed-only --'
-        config-file: cypress-screenshots.config.ts
+        config-file: cypress-screenshots.config.mjs
         start: npm start -w @coveo/atomic
         wait-on: 'http://localhost:3333/ping'
         wait-on-timeout: 600000

.github/workflows/prbot.yml

@@ -44,6 +44,14 @@ jobs:
       - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
       - uses: ./.github/actions/setup
       - run: npm test
+  package-compatibility:
+    name: 'Are packages compatible?'
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+      - uses: ./.github/actions/setup
+      - run: npm run package:compatibility
   e2e-atomic-csp-test:
     name: 'Run e2e tests on Atomic CSP'
     needs: build

package.json

@@ -11,6 +11,7 @@
     "e2e": "nx run-many --target=e2e",
     "lint:check": "eslint . && cspell **/*.md --no-progress --show-suggestions --show-context && prettier --check '**/*.{css,pcss,html,md,yml,ts,tsx,js,mjs,json}'",
     "lint:fix": "eslint --fix . && prettier --write '**/*.{css,pcss,html,md,yml,ts,tsx,js,mjs,json}'",
+    "packages-compatability": "node ./scripts/ci/package-compatability.mjs",
     "pr:report": "node ./scripts/reports/pr-report.mjs",
     "report:bundle-size:time-series": "node ./scripts/reports/bundle-size/time-series.mjs",
     "commit": "git-cz",
@@ -83,6 +84,7 @@
     "patch-package": "8.0.0",
     "prettier": "3.3.3",
     "prettier-plugin-tailwindcss": "0.6.5",
+    "publint": "0.2.11",
     "react-syntax-highlighter": "15.5.0",
     "rimraf": "5.0.9",
     "semver": "7.6.3",

packages/atomic-react/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@coveo/atomic-react",
   "sideEffects": false,
+  "type": "module",
   "version": "3.0.2",
   "description": "React specific wrapper for the Atomic component library",
   "repository": {
@@ -11,6 +12,7 @@
   "scripts": {
     "build": "nx build",
     "clean": "rimraf -rf dist",
+    "build:addExtensions": "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",
     "build:bundles": "concurrently \"npm run build:bundles:esm\" \"npm run build:bundles:iife-cjs\"",
@@ -19,7 +21,7 @@
     "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 "
   },
-  "main": "./dist/cjs/atomic-react.js",
+  "main": "./dist/cjs/atomic-react.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -31,8 +33,8 @@
     "@coveo/atomic": "3.1.1"
   },
   "devDependencies": {
-    "@coveo/rollup-plugin-replace-with-ast": "1.0.0",
     "@coveo/release": "1.0.0",
+    "@coveo/rollup-plugin-replace-with-ast": "1.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -42,6 +44,7 @@
     "@types/node": "20.14.12",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
+    "fix-esm-import-path": "1.10.0",
     "ncp": "2.0.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -60,17 +63,17 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/cjs/atomic-react.js"
+      "require": "./dist/cjs/atomic-react.cjs"
     },
     "./commerce": {
       "types": "./dist/commerce.index.d.ts",
       "import": "./dist/commerce.index.js",
-      "require": "./dist/cjs/commerce/atomic-react.js"
+      "require": "./dist/cjs/commerce/atomic-react.cjs"
     },
     "./recommendation": {
       "types": "./dist/recommendation.index.d.ts",
       "import": "./dist/recommendation.index.js",
-      "require": "./dist/cjs/recommendation/atomic-react.js"
+      "require": "./dist/cjs/recommendation/atomic-react.cjs"
     }
   }
 }

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:addExtensions",
+          "npm run build:bundles",
+          "npm run build:assets"
+        ],
         "parallel": false,
         "cwd": "packages/atomic-react"
       }

packages/atomic-react/rollup.config.mjs

@@ -97,7 +97,7 @@ const commonExternal = [
 
 /** @returns {import('rollup').OutputOptions} */
 const outputCJS = ({useCase}) => ({
-  file: `dist/cjs/${useCase}atomic-react.js`,
+  file: `dist/cjs/${useCase}atomic-react.cjs`,
   format: 'cjs',
 });
 

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

@@ -1 +1 @@
-export * from './components/commerce/index';
+export * from './components/commerce/index.js';

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/index.js';
 
 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/index.js';
 
 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/index.js';
 
 interface Template {
   contentTemplate: JSX.Element;

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

@@ -1,8 +1,8 @@
-export * from '../stencil-generated/commerce/index';
+export * from '../stencil-generated/commerce/index.js';
 export {CommerceBindings, i18n} from '@coveo/atomic';
 
 // Important: Re-exporting under the same name (eg: "AtomicCommerceInterface") shadows the original component
 // and should wrap it nicely for users of the library
-export {InterfaceWrapper as AtomicCommerceInterface} from './CommerceInterfaceWrapper';
-export {ListWrapper as AtomicCommerceProductList} from './CommerceProductListWrapper';
-export {ListWrapper as AtomicCommerceRecommendationList} from './CommerceRecommendationListWrapper';
+export {InterfaceWrapper as AtomicCommerceInterface} from './CommerceInterfaceWrapper.js';
+export {ListWrapper as AtomicCommerceProductList} from './CommerceProductListWrapper.js';
+export {ListWrapper as AtomicCommerceRecommendationList} from './CommerceRecommendationListWrapper.js';

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/index.js';
 
 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/index.js';
 
 interface Template {
   contentTemplate: JSX.Element;

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

@@ -1,7 +1,7 @@
-export * from '../stencil-generated/search';
+export * from '../stencil-generated/search/index.js';
 export {RecsBindings, i18n} from '@coveo/atomic';
 
 // Important: Re-exporting under the same name (eg: "AtomicRecsInterface") shadows the original component
 // and should wrap it nicely for users of the library
-export {RecsInterfaceWrapper as AtomicRecsInterface} from './RecsInterfaceWrapper';
-export {RecsListWrapper as AtomicRecsList} from './RecsListWrapper';
+export {RecsInterfaceWrapper as AtomicRecsInterface} from './RecsInterfaceWrapper.js';
+export {RecsListWrapper as AtomicRecsList} from './RecsListWrapper.js';

packages/atomic-react/src/components/search/FoldedResultListWrapper.tsx

@@ -3,7 +3,7 @@ import type {FoldedResult} from '@coveo/headless';
 import React, {useEffect, useRef} from 'react';
 import {createRoot} from 'react-dom/client';
 import {renderToString} from 'react-dom/server';
-import {AtomicFoldedResultList} from '../stencil-generated/search';
+import {AtomicFoldedResultList} from '../stencil-generated/search/index.js';
 
 /**
  * The properties of the AtomicFoldedResultList component

packages/atomic-react/src/components/search/ResultListWrapper.tsx

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

packages/atomic-react/src/components/search/SearchBoxInstantResultsWrapper.tsx

@@ -3,7 +3,7 @@ import type {FoldedResult, Result} from '@coveo/headless';
 import React, {useEffect, useRef} from 'react';
 import {createRoot} from 'react-dom/client';
 import {renderToString} from 'react-dom/server';
-import {AtomicSearchBoxInstantResults} from '../stencil-generated/search';
+import {AtomicSearchBoxInstantResults} from '../stencil-generated/search/index.js';
 
 /**
  * The properties of the AtomicSearchBoxInstantResults component

packages/atomic-react/src/components/search/SearchInterfaceWrapper.tsx

@@ -4,7 +4,7 @@ import {
   getSampleSearchEngineConfiguration,
 } from '@coveo/headless';
 import React, {useEffect, useRef} from 'react';
-import {AtomicSearchInterface} from '../stencil-generated/search';
+import {AtomicSearchInterface} from '../stencil-generated/search/index.js';
 
 type ExecuteSearch = HTMLAtomicSearchInterfaceElement['executeFirstSearch'];
 /**

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

@@ -1,9 +1,9 @@
-export * from '../stencil-generated/search/index';
+export * from '../stencil-generated/search/index.js';
 export {Bindings, i18n} from '@coveo/atomic';
 
 // Important: Re-exporting under the same name (eg: "AtomicSearchInterface") shadows the original component
 // and should wrap it nicely for users of the library
-export {SearchInterfaceWrapper as AtomicSearchInterface} from './SearchInterfaceWrapper';
-export {ResultListWrapper as AtomicResultList} from './ResultListWrapper';
-export {FoldedResultListWrapper as AtomicFoldedResultList} from './FoldedResultListWrapper';
-export {SearchBoxInstantResultsWrapper as AtomicSearchBoxInstantResults} from './SearchBoxInstantResultsWrapper';
+export {SearchInterfaceWrapper as AtomicSearchInterface} from './SearchInterfaceWrapper.js';
+export {ResultListWrapper as AtomicResultList} from './ResultListWrapper.js';
+export {FoldedResultListWrapper as AtomicFoldedResultList} from './FoldedResultListWrapper.js';
+export {SearchBoxInstantResultsWrapper as AtomicSearchBoxInstantResults} from './SearchBoxInstantResultsWrapper.js';

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

@@ -1,7 +1,7 @@
 /* eslint-disable */
 /* tslint:disable */
 /* auto-generated react proxies */
-import { createReactComponent } from './react-component-lib';
+import { createReactComponent } from './react-component-lib/index.js';
 
 import type { JSX } from '@coveo/atomic';
 

packages/atomic-react/src/components/stencil-generated/commerce/react-component-lib/createComponent.tsx

@@ -1,6 +1,6 @@
 import React, { createElement } from 'react';
 
-import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils/index.js';
 
 export interface HTMLStencilElement extends HTMLElement {
   componentOnReady(): Promise<this>;

packages/atomic-react/src/components/stencil-generated/commerce/react-component-lib/createOverlayComponent.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { OverlayEventDetail } from './interfaces';
-import { StencilReactForwardedRef, attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
+import { OverlayEventDetail } from './interfaces.js';
+import { StencilReactForwardedRef, attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils/index.js';
 
 interface OverlayElement extends HTMLElement {
   present: () => Promise<void>;

packages/atomic-react/src/components/stencil-generated/commerce/react-component-lib/index.ts

@@ -1,2 +1,2 @@
-export { createReactComponent } from './createComponent';
-export { createOverlayComponent } from './createOverlayComponent';
+export { createReactComponent } from './createComponent.js';
+export { createOverlayComponent } from './createOverlayComponent.js';

packages/atomic-react/src/components/stencil-generated/commerce/react-component-lib/utils/attachProps.ts

@@ -1,4 +1,4 @@
-import { camelToDashCase } from './case';
+import { camelToDashCase } from './case.js';
 
 export const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => {
   // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first