Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(headless, atomic-react)!: add exports field in package.json #4376

Closed
wants to merge 24 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
853bf0d
chore(headless)!: add exports field in package.json
alexprudhomme Sep 4, 2024
21eb5cb
revert ts configs
alexprudhomme Sep 4, 2024
fdefc83
put "types" below "exports"
alexprudhomme Sep 4, 2024
71fc98c
fix stencil build
alexprudhomme Sep 5, 2024
526d0bd
Merge branch 'master' into KIT-2541
alexprudhomme Sep 5, 2024
3fa0342
fix for atomic build
alexprudhomme Sep 5, 2024
fbea765
Merge branch 'master' into KIT-2541
alexprudhomme Sep 5, 2024
fecfa1c
use esbuild for atomic-react instead of tsc
alexprudhomme Sep 6, 2024
b59f2bd
fix unit tests
alexprudhomme Sep 6, 2024
669b4dd
fix cypress issues
alexprudhomme Sep 6, 2024
949e420
Merge branch 'master' into KIT-2541
alexprudhomme Sep 6, 2024
5e091cd
try with styleUrl
alexprudhomme Sep 6, 2024
453e6ec
Revert "try with styleUrl"
alexprudhomme Sep 6, 2024
c62e5a4
externalize peerDependencies of atomic-react
alexprudhomme Sep 6, 2024
62da6f9
chore(deps): update stencil j:kit-282
renovate[bot] Sep 9, 2024
8f20756
fix all @coveo/headless/dist imports
alexprudhomme Sep 9, 2024
76b4a20
Merge branch 'master' into KIT-2541
alexprudhomme Sep 9, 2024
f691df3
chore(deps): update stencil j:kit-282
renovate[bot] Sep 9, 2024
3ec0cad
update stencil/core react-output-target and angular-output-target but…
alexprudhomme Sep 9, 2024
f58e0db
Merge branch 'renovate/stencil' of https://github.com/coveo/ui-kit in…
alexprudhomme Sep 9, 2024
81defff
Merge branch 'renovate/stencil' into KIT-2541
alexprudhomme Sep 9, 2024
995e8ab
fix build
alexprudhomme Sep 9, 2024
f69b182
update stencil core patch
alexprudhomme Sep 9, 2024
28bab70
revert to react-output 0.5.3
alexprudhomme Sep 10, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
701 changes: 478 additions & 223 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/atomic-hosted-page/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
10 changes: 0 additions & 10 deletions packages/atomic-react/commerce/package.json

This file was deleted.

116 changes: 116 additions & 0 deletions packages/atomic-react/esbuild.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
import {globalExternals} from '@fal-works/esbuild-plugin-global-externals';
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',
};
/**
* Defined global variables for external modules. This is required for IIFE format.
* Have to specify the named exports for each module. (https://github.com/fal-works/esbuild-plugin-global-externals/issues/4)
* @type {Record<string, import('@fal-works/esbuild-plugin-global-externals').ModuleInfo}
*/
const globals = {
react: {
varName: 'React',
namedExports: ['useEffect', 'useRef'],
},
'react-dom/client': {varName: 'ReactDOMClient', namedExports: ['createRoot']},
'react-dom/server': {
varName: 'ReactDOMServer',
namedExports: ['renderToString'],
},
'@coveo/atomic': {varName: 'CoveoAtomic'},
'@coveo/headless': {
varName: 'CoveoHeadless',
namedExports: ['getSampleSearchEngineConfiguration', 'buildSearchEngine'],
},
};

/**
*
* @type {import('esbuild').BuildOptions}
*/
const BASE_CONFIG = {
bundle: true,
banner: {js: apacheLicense()},
external: ['react', 'react-dom', '@coveo/headless', '@coveo/atomic'],
};

/**
* 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: `CoveoAtomicReact${useCaseName == 'search' ? '' : useCaseName}`,
plugins: [globalExternals(globals)],
});
}

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();
Comment on lines +104 to +116
Copy link
Contributor Author

@alexprudhomme alexprudhomme Sep 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I ended up having problems with the build process of Atomic-React. It was using simply tsc compilation to compile for these 2 use case (esm, cjs) and rollup for iife. Since it was just using tsc compilation and since we now have to put either Bundler/node16/nodeNext as moduleResolution. We couldnt use tsc to compile into cjs and iife. I had to change the build process to esbuild. All the changes in the /atomic-react folder are related to this.

I also added a browserEsm output for <script type="module"> cases. All the new output looks like this.

image

74 changes: 56 additions & 18 deletions packages/atomic-react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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/esm/search/index.js",
"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/",
Expand All @@ -32,22 +77,15 @@
"@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"
"@fal-works/esbuild-plugin-global-externals": "2.1.2"
},
"peerDependencies": {
"@coveo/headless": "2.80.0",
Expand Down
6 changes: 5 additions & 1 deletion packages/atomic-react/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
Expand Down
9 changes: 0 additions & 9 deletions packages/atomic-react/recommendation/package.json

This file was deleted.

96 changes: 0 additions & 96 deletions packages/atomic-react/rollup.config.mjs

This file was deleted.

1 change: 0 additions & 1 deletion packages/atomic-react/src/commerce.index.ts

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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'];

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions packages/atomic-react/src/components/commerce/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export * from '../stencil-generated/commerce/index';
export * from '../stencil-generated/commerce/components';
export * from '@coveo/headless/commerce';
export {CommerceBindings, i18n} from '@coveo/atomic';
export type {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
Expand Down
Loading
Loading