feat(atomic-hosted-page): migrate from stencil to lit

[alexprudhomme]

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

Migrating to Lit without making breaking changes

Before with Stencil and the stencil build system

Stencil was really only doing these two things below:

• It exported the defineCustomElements function as a loader for non CDN users.
• It had an autoloader at dist/atomic-hosted-page/atomic-hosted-page.esm.js that we used for our CDN.

With stencil we were missing these things:

• A way to import individual components for an easier time with bundling a npm project.
• An actual index file, right now our import path points to dist/index.js but this file is actually just empty... so import from '@coveo/atomic-hosted-page' exports nothing.

Now with Lit and our own build system

We now have everything that stencil was doing and more. This is a small graph to visualize what does what in the build system.

NPM (/dist folder)

graph TD;
    tsc-->A[only transpiling is done, the directory tree stays the same, produces types and js];
    loader-->B[stays as a static javascript file and points to the transpiled autoloader, only really there to not make breaking changes];

Loading

CDN (/cdn folder)

graph TD;
    tsc-->A[only transpiles the types and places them in the /cdn directory, this might actually be useless but I am not sure];
    esbuild-->B[bundles lit and keeps headless/buneo as external, keeps the atomic-hosted-page.esm.js file];
    loader--> C[not available, was not there before and is useless anyway not that we have better importing methods]

Loading

The autoloader

For this, I copied the autoloader Louis made for Atomic and placed it in the atomic-hosted-page.esm.ts file. That file is then bundled/transpiled and turns into atomic-hosted-page.esm.js (the exact same name as before). No breaking change is made.

The defineCustomElements function

Stencil was bundling it and that function was pretty terrible to use. It simply defined every component in one shot. To replace this, I created a javascript function that will not be bundled/transpiled and stays at packages/atomic-hosted-page/loader/index.js. This files simply imports the autoloader. Also, keep in mind that this file is now useless since there are way better methods to import and use the custom elements defined in the package. This thing is only there to not make breaking change.

New ways to import

Basically these two things below are the features added in this PR.

• The package now has an actual index.ts file exporting every component. You can then define the whole shebang by doing import '@coveo/atomic-hosted-page'

• You can also import individual components by importing the individual files. import '@coveo/atomic-hosted-page/dist/components/atomic-hosted-ui/atomic-hosted-ui.js' will only import the individual atomic-hosted-ui component and nothing else. This is huge and super helpful for users creating an implementation using the npm package. Before, it was incredbly hard to only define the component you needed. This was the problem with GM and atomic-react. Using the defineCustomElements and then bundling your project would result in the whole Atomic package being bundled with your project (commerce, insight, CRGA, search, everything would get bundled together). Now with this method, users can define exactly what they need.

[github-actions]

Pull Request Report

PR Title

✅ Title follows the conventional commit spec.

Live demo links

• Storybook

• Playwright report

Bundle Size

File	Old (kb)	New (kb)	Change (%)
case-assist	243.9	243.9	0
commerce	355.1	355.1	0
search	415	415	0
insight	406.3	406.3	0
recommendation	256.2	256.2	0
ssr	408.9	408.9	0
ssr-commerce	372.9	372.9	0

SSR Progress

Use case	SSR (#)	CSR (#)	Progress (%)
search	39	44	89
recommendation	0	4	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
case-assist : missing SSR support
insight : missing SSR support
commerce : missing SSR support

[louis-bompart]

VG PR 👍
A couple comment/nit pick here and there

[fpbrault]

Nice job!