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

alexprudhomme · 2024-09-04T13:33:26Z

https://coveord.atlassian.net/browse/KIT-2541

Switch back to rollup for all builds, too many issues with 'require' and esbuild. Clean up rollup config file & keep old file names to have no breaking changes for iife in v3. Do this with esbuild at the same time and incrementally compare.

This PR adds the "exports" field for @coveo/headless and @coveo/atomic-react. More details here - > https://github.com/coveo/ui-kit/pull/4376/files#r1746030192

this PR also updates stencil, angular-output-target and react-output-target

https://coveord.atlassian.net/browse/KIT-2541

github-actions · 2024-09-04T13:39:08Z

Pull Request Report

PR Title

✅ Title follows the conventional commit spec.

Live demo links

Bundle Size

File	Old (kb)	New (kb)
case-assist	242.3	242.3
commerce	342.3	342.3
search	413.3	413.3
insight	396.3	396.3
product-listing	306.6	306.6
product-recommendation	213.2	213.2
recommendation	256.1	256.1
ssr	405.9	405.9
ssr-commerce	354.5	354.5

SSR Progress

Use case	SSR (#)	CSR (#)	Progress (%)
search	39	44	89
recommendation	0	4	0
product-recommendation	0	10	0
product-listing	0	13	0
case-assist	0	6	0
insight	0	27	0
commerce	0	15	0

Detailed logs

search : buildInteractiveResult
search : buildInteractiveInstantResult
search : buildInteractiveRecentResult
search : buildInteractiveCitation
search : buildGeneratedAnswer
recommendation : missing SSR support
product-recommendation : missing SSR support
product-listing : missing SSR support
case-assist : missing SSR support
insight : missing SSR support
commerce : missing SSR support

https://coveord.atlassian.net/browse/KIT-2541

alexprudhomme · 2024-09-05T19:05:57Z

patches/@stencil+core+4.20.0.patch

+-    module: import_typescript.default.ModuleKind.ESNext,
+-    moduleResolution: import_typescript.default.ModuleResolutionKind.NodeJs,
+    module: import_typescript.default.ModuleKind.ES2022,
+    moduleResolution: import_typescript.default.ModuleResolutionKind.Bundler,


The new "exports" field in package.json defining the different entry points needs moduleResolution in tsconfig.ts to be either Bundler/Node16/NodeNext . From now on, every user of Headless will have to use one of these three for their typescript compiler to understand where to look for subpackages. More info on the "exports" field .

There is a problem with Stencil however. Inside of their compiler, they use an old version of moduleResolution that cant find the subpackages with the "exports" field. This is a known bug and will be fixed in v5.

This patch above fixes this by changing the default value used by the stencil compiler.

https://coveord.atlassian.net/browse/KIT-2541

alexprudhomme · 2024-09-06T14:09:36Z

packages/atomic-react/esbuild.mjs

+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();


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.

alexprudhomme · 2024-09-06T14:12:13Z

...-box-suggestions/atomic-search-box-query-suggestions/atomic-search-box-query-suggestions.tsx

-import {
-  QuerySetSection,
-  QuerySuggestionSection,
-} from '@coveo/headless/dist/definitions/state/state-sections';


This shows how you cant import from anything other than the "exports" defined paths in the package json. Only from @coveo/headless , @coveo/headless/commerce, and so on...

https://coveord.atlassian.net/browse/KIT-2541

This reverts commit 5e091cd.

https://coveord.atlassian.net/browse/KIT-2541

… need new build for atomic-react

…to renovate/stencil

https://coveord.atlassian.net/browse/KIT-2541

alexprudhomme · 2024-09-09T21:33:41Z

patches/@stencil+react-output-target+0.7.1.patch

+-  `);for(const p of n){const u=p.tagName,l=T(u),$=`${l}Element`,b=`${l}CustomEvent`;e.addImportDeclaration({moduleSpecifier:`${s}/${i}/${u}.js`,namedImports:[{name:l,alias:$},{name:"defineCustomElement",alias:`define${l}`}]});const F=(p.events||[]).filter(o=>o.internal===!1),y=[];for(const o of F)if(Object.keys(o.complexType.references).length>0){for(const _ of Object.keys(o.complexType.references))o.complexType.references[_].location==="global"||e.addImportDeclaration({moduleSpecifier:s,namedImports:[{name:_,isTypeOnly:!0}]});e.addImportDeclaration({moduleSpecifier:s,namedImports:[{name:b,isTypeOnly:!0}]}),y.push({originalName:o.name,name:j(o.name),type:`EventName<${b}<${o.complexType.original}>>`})}else y.push({originalName:o.name,name:j(o.name),type:`EventName<CustomEvent<${o.complexType.original}>>`});const E=`${l}Events`;e.addTypeAlias({name:E,type:y.length>0?`{ ${y.map(o=>`${o.name}: ${o.type}`).join(`,
+  `);for(const p of n){const u=p.tagName,l=T(u),$=`${l}Element`,b=`${l}CustomEvent`;e.addImportDeclaration({moduleSpecifier:`${s}/${i}/${u}.js`,namedImports:[{name:l,alias:$},{name:"defineCustomElement",alias:`define${l}`}]});const F=(p.events||[]).filter(o=>o.internal===!1),y=[];for(const o of F)if(Object.keys(o.complexType.references).length>0){for(const _ of Object.keys(o.complexType.references))o.complexType.references[_].location==="global"||e.addImportDeclaration({moduleSpecifier:s,namedImports:[{name:_,isTypeOnly:!0}]});e.addImportDeclaration({moduleSpecifier:s,namedImports:[{name:b,isTypeOnly:!0}]}),y.push({originalName:o.name,name:j(o.name),type:`EventName<${b}<${o.complexType.original}>>`})}else y.push({originalName:o.name,name:j(o.name),type:`EventName<CustomEvent<${o.complexType.original}>>`});const E=`${l}Events`;e.addTypeAlias({name:E,type:y.length>0?`{ ${y.map(o=>`'${o.name}': ${o.type}`).join(`,


Leaving traces about this patch. This patch is to enable event names with '/' in them like "atomic/redirect". This change is only 4 lines. 2 lines in both .cjs and .js file.

Precisely this :

And this :

chore(headless)!: add exports field in package.json

853bf0d

https://coveord.atlassian.net/browse/KIT-2541

alexprudhomme had a problem deploying to PR Artifacts September 4, 2024 13:36 — with GitHub Actions Failure

revert ts configs

21eb5cb

https://coveord.atlassian.net/browse/KIT-2541

alexprudhomme force-pushed the KIT-2541 branch from e810501 to 21eb5cb Compare September 4, 2024 13:49

alexprudhomme had a problem deploying to PR Artifacts September 4, 2024 13:52 — with GitHub Actions Failure

put "types" below "exports"

fdefc83

https://coveord.atlassian.net/browse/KIT-2541

alexprudhomme had a problem deploying to PR Artifacts September 4, 2024 15:35 — with GitHub Actions Failure

alexprudhomme added this to the V3 milestone Sep 5, 2024

alexprudhomme added the v3 label Sep 5, 2024

alexprudhomme marked this pull request as ready for review September 5, 2024 18:59

alexprudhomme requested review from a team as code owners September 5, 2024 18:59

alexprudhomme requested review from olamothe, fpbrault and fbeaudoincoveo September 5, 2024 18:59

alexprudhomme had a problem deploying to PR Artifacts September 5, 2024 19:03 — with GitHub Actions Failure

alexprudhomme commented Sep 5, 2024

View reviewed changes

fix stencil build

71fc98c

https://coveord.atlassian.net/browse/KIT-2541

alexprudhomme force-pushed the KIT-2541 branch from 1235c25 to 71fc98c Compare September 5, 2024 19:08

Merge branch 'master' into KIT-2541

526d0bd

alexprudhomme had a problem deploying to PR Artifacts September 5, 2024 19:12 — with GitHub Actions Failure

alexprudhomme marked this pull request as draft September 5, 2024 19:36

fix for atomic build

3fa0342

https://coveord.atlassian.net/browse/KIT-2541

alexprudhomme had a problem deploying to PR Artifacts September 5, 2024 19:52 — with GitHub Actions Failure

Merge branch 'master' into KIT-2541

fbea765

alexprudhomme had a problem deploying to PR Artifacts September 5, 2024 21:17 — with GitHub Actions Failure

use esbuild for atomic-react instead of tsc

fecfa1c

https://coveord.atlassian.net/browse/KIT-2541

alexprudhomme force-pushed the KIT-2541 branch from e25bfdf to fecfa1c Compare September 6, 2024 13:58

alexprudhomme temporarily deployed to PR Artifacts September 6, 2024 14:10 — with GitHub Actions Inactive

alexprudhomme commented Sep 6, 2024

View reviewed changes

fix unit tests

b59f2bd

https://coveord.atlassian.net/browse/KIT-2541

alexprudhomme temporarily deployed to PR Artifacts September 6, 2024 15:10 — with GitHub Actions Inactive

alexprudhomme added 2 commits September 6, 2024 11:48

fix cypress issues

669b4dd

https://coveord.atlassian.net/browse/KIT-2541

Merge branch 'master' into KIT-2541

949e420

alexprudhomme temporarily deployed to PR Artifacts September 6, 2024 16:00 — with GitHub Actions Inactive

try with styleUrl

5e091cd

https://coveord.atlassian.net/browse/KIT-2541

alexprudhomme temporarily deployed to PR Artifacts September 6, 2024 17:16 — with GitHub Actions Inactive

alexprudhomme added 2 commits September 6, 2024 13:33

Revert "try with styleUrl"

453e6ec

This reverts commit 5e091cd.

externalize peerDependencies of atomic-react

c62e5a4

https://coveord.atlassian.net/browse/KIT-2541

alexprudhomme temporarily deployed to PR Artifacts September 6, 2024 17:46 — with GitHub Actions Inactive

alexprudhomme changed the title ~~chore(headless)!: add exports field in package.json~~ chore(headless, atomic-react)!: add exports field in package.json Sep 6, 2024

renovate bot and others added 3 commits September 9, 2024 15:10

chore(deps): update stencil j:kit-282

62da6f9

fix all @coveo/headless/dist imports

8f20756

https://coveord.atlassian.net/browse/KIT-2541

Merge branch 'master' into KIT-2541

76b4a20

alexprudhomme temporarily deployed to PR Artifacts September 9, 2024 18:01 — with GitHub Actions Inactive

renovate bot and others added 4 commits September 9, 2024 20:57

chore(deps): update stencil j:kit-282

f691df3

update stencil/core react-output-target and angular-output-target but…

3ec0cad

… need new build for atomic-react

Merge branch 'renovate/stencil' of https://github.com/coveo/ui-kit in…

f58e0db

…to renovate/stencil

Merge branch 'renovate/stencil' into KIT-2541

81defff

https://coveord.atlassian.net/browse/KIT-2541

alexprudhomme had a problem deploying to PR Artifacts September 9, 2024 21:13 — with GitHub Actions Failure

alexprudhomme added 2 commits September 9, 2024 17:28

fix build

995e8ab

https://coveord.atlassian.net/browse/KIT-2541

update stencil core patch

f69b182

https://coveord.atlassian.net/browse/KIT-2541

alexprudhomme commented Sep 9, 2024

View reviewed changes

alexprudhomme temporarily deployed to PR Artifacts September 9, 2024 21:44 — with GitHub Actions Inactive

revert to react-output 0.5.3

28bab70

alexprudhomme had a problem deploying to PR Artifacts September 10, 2024 15:44 — with GitHub Actions Failure

alexprudhomme closed this Sep 11, 2024

alexprudhomme temporarily deployed to PR Artifacts September 11, 2024 14:12 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

alexprudhomme commented Sep 4, 2024 •

edited

Loading

github-actions bot commented Sep 4, 2024 •

edited

Loading

alexprudhomme Sep 5, 2024 •

edited

Loading

alexprudhomme Sep 6, 2024 •

edited

Loading

alexprudhomme Sep 6, 2024

alexprudhomme Sep 9, 2024

		- `);for(const p of n){const u=p.tagName,l=T(u),$=`${l}Element`,b=`${l}CustomEvent`;e.addImportDeclaration({moduleSpecifier:`${s}/${i}/${u}.js`,namedImports:[{name:l,alias:$},{name:"defineCustomElement",alias:`define${l}`}]});const F=(p.events\|\|[]).filter(o=>o.internal===!1),y=[];for(const o of F)if(Object.keys(o.complexType.references).length>0){for(const _ of Object.keys(o.complexType.references))o.complexType.references[_].location==="global"\|\|e.addImportDeclaration({moduleSpecifier:s,namedImports:[{name:_,isTypeOnly:!0}]});e.addImportDeclaration({moduleSpecifier:s,namedImports:[{name:b,isTypeOnly:!0}]}),y.push({originalName:o.name,name:j(o.name),type:`EventName<${b}<${o.complexType.original}>>`})}else y.push({originalName:o.name,name:j(o.name),type:`EventName<CustomEvent<${o.complexType.original}>>`});const E=`${l}Events`;e.addTypeAlias({name:E,type:y.length>0?`{ ${y.map(o=>`${o.name}: ${o.type}`).join(`,
		+ `);for(const p of n){const u=p.tagName,l=T(u),$=`${l}Element`,b=`${l}CustomEvent`;e.addImportDeclaration({moduleSpecifier:`${s}/${i}/${u}.js`,namedImports:[{name:l,alias:$},{name:"defineCustomElement",alias:`define${l}`}]});const F=(p.events\|\|[]).filter(o=>o.internal===!1),y=[];for(const o of F)if(Object.keys(o.complexType.references).length>0){for(const _ of Object.keys(o.complexType.references))o.complexType.references[_].location==="global"\|\|e.addImportDeclaration({moduleSpecifier:s,namedImports:[{name:_,isTypeOnly:!0}]});e.addImportDeclaration({moduleSpecifier:s,namedImports:[{name:b,isTypeOnly:!0}]}),y.push({originalName:o.name,name:j(o.name),type:`EventName<${b}<${o.complexType.original}>>`})}else y.push({originalName:o.name,name:j(o.name),type:`EventName<CustomEvent<${o.complexType.original}>>`});const E=`${l}Events`;e.addTypeAlias({name:E,type:y.length>0?`{ ${y.map(o=>`'${o.name}': ${o.type}`).join(`,

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

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

Conversation

alexprudhomme commented Sep 4, 2024 • edited Loading

github-actions bot commented Sep 4, 2024 • edited Loading

Pull Request Report

PR Title

Live demo links

Bundle Size

SSR Progress

alexprudhomme Sep 5, 2024 • edited Loading

Choose a reason for hiding this comment

alexprudhomme Sep 6, 2024 • edited Loading

Choose a reason for hiding this comment

alexprudhomme Sep 6, 2024

Choose a reason for hiding this comment

alexprudhomme Sep 9, 2024

Choose a reason for hiding this comment

alexprudhomme commented Sep 4, 2024 •

edited

Loading

github-actions bot commented Sep 4, 2024 •

edited

Loading

alexprudhomme Sep 5, 2024 •

edited

Loading

alexprudhomme Sep 6, 2024 •

edited

Loading