chore(atomic): fix initialization issues when combining Lit interfaces with Stencil components #5070

fpbrault · 2025-03-13T19:38:55Z

This PR fixes initialization issues when combining LIt interfaces and Stencil components.
https://coveord.atlassian.net/browse/KIT-4050

github-actions · 2025-03-13T19:47:07Z

Pull Request Report

PR Title

✅ Title follows the conventional commit spec.

Live demo links

Bundle Size

File	Old (kb)	New (kb)
case-assist	246.6	246.6
commerce	359.3	359.3
search	417.3	417.3
insight	408.5	408.5
recommendation	258	258
ssr	411.1	411.1
ssr-commerce	375.8	375.8

fpbrault · 2025-03-13T19:55:15Z

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

+function processLitDeclaration(declaration) {
+  atomicAngularComponentFileContent += declarationToProxyCmp(
+    declaration,
+    `() => {customElements.get('${declaration.tagName}') || customElements.define('${declaration.tagName}', Lit${declaration.name});}`
+  );
+  litImports.add(declarationToLitImport(declaration));
+  litDeclarations.push(`${declaration.name}`);
+}
+
+function processNonLitDeclaration(declaration) {
+  const defineCustomElementFn = `defineCustomElement${declaration.name}`;
+
+  const regex = new RegExp(
+    `@ProxyCmp\\(\\{([^}]*)\\}\\)\\s*\\n@Component\\(\\{([^}]*)\\}\\)\\s*\\nexport class\\s+${declaration.name}\\b`,
+    'g'
+  );
+


Since we need a different defineCustomElement behaviour for Lit and Stencil components, we can't use the global defineCustomElements function from the loader.

For Lit components, we need to add a new component declaration that will use a custom defineCustomElement function.

For Stencil components, we want to add an import to the defineCustomElement function specific to that component provided by stencil and use it as the defineCustomElementsFn in the @ProxyCmp decorator of the component's declaration.

@fpbrault , did you explore removing the angular build steps from stencil.config.ts,
and use the same logic as lit for stencil, just with a different defineCustomElementsFn ?

Afterall, stencil components are also in the custom element manifest.

I did but some declarations include some extra things in their interface, and have a corresponding proxyOutputs call. It seemed easier to just add the defineCustomElementsFn to the existing declarations instead of handling that corner case. We can always revisit this later

fpbrault · 2025-03-13T19:58:41Z

packages/atomic/scripts/cem-plugin.mjs

+    if (!declaration.members) {
+      continue;
+    }
+
+    declaration.members = declaration.members.filter(
+      (member) => member?.privacy !== 'private' && member.kind === 'method'
+    );


Needed so that the component declarations in atomic-angular for Lit components include their methods (Stencil only includes methods marked with the @Method decorator).

fpbrault · 2025-03-13T19:59:02Z

...ges/atomic/src/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.tsx

@@ -217,7 +217,7 @@ export class AtomicCommerceSearchBox
  }

  public initialize() {
-    this.id ??= randomID('atomic-commerce-search-box-');
+    this.id ||= randomID('atomic-commerce-search-box-');


Needed for angular

fpbrault · 2025-03-13T19:59:13Z

packages/atomic/src/components/commerce/atomic-product/atomic-product.tsx

@@ -232,5 +232,6 @@ export class AtomicProduct {

      this.executedRenderingFunctionOnce = true;
    }
+    this.host.classList.add('hydrated');


Needed for angular

fpbrault · 2025-03-13T19:59:53Z

packages/atomic/src/components/commerce/product-template/atomic-product-template.tsx

@@ -26,7 +26,7 @@ import {
  shadow: true,
 })
 export class AtomicProductTemplate {
-  private productTemplateCommon: ProductTemplateCommon;
+  private productTemplateCommon!: ProductTemplateCommon;


Needed for angular

fpbrault · 2025-03-13T20:00:39Z

packages/atomic/src/components/commerce/product-template/atomic-product-template.tsx

+  constructor() {}
+
+  connectedCallback() {


Needed for angular, but it didn't make sense to have this code happen before the component is connected to DOM

fpbrault · 2025-03-13T20:02:21Z

packages/atomic/src/components/search/atomic-external/atomic-external.tsx

+  @Listen('atomic/parentReady', {target: 'window'})
+  public handleParentReady(event: CustomEvent) {
+    if (event.target === this.boundInterface) {
+      markParentAsReady(this.host);
+    }
+  }
+
  /**
   * Represents the bound interface for the AtomicExternal component.
   */
  @Prop({mutable: true}) boundInterface?: AtomicInterface;

+  connectedCallback() {
+    if (isParentReady(this.#interface)) {
+      markParentAsReady(this.host);
+    }
+  }
+


Since atomic-external is an initializableElement but does not actually get initialized itself, we need to mark it as ready when its bound interface is ready.

fpbrault · 2025-03-13T20:02:55Z

packages/atomic/src/decorators/watch.ts

@@ -47,7 +47,7 @@ export function watch<
  Prop extends PublicProperties<Component>,
 >(propName: Prop, options?: WatchOptions) {
  const resolvedOptions: Required<WatchOptions> = {
-    waitUntilFirstUpdate: false,
+    waitUntilFirstUpdate: true,


Needed for angular

fpbrault · 2025-03-13T20:13:27Z

packages/atomic/src/lit-components.d.ts

+// import { AtomicCommerceInterface as AtomicCommerceInterface2 } from './components/commerce/atomic-commerce-interface/atomic-commerce-interface';
+export namespace Components {
+  /*
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface AtomicCommerceInterface extends AtomicCommerceInterface2 {
+
+  } */
+
+}
+
+declare global {
+  /*
+  interface HTMLAtomicCommerceInterfaceElement extends Components.AtomicCommerceInterface, HTMLElement {
+
+  }
+  let HTMLAtomicCommerceInterfaceElement: {
+    prototype: HTMLAtomicCommerceInterfaceElement;
+    new (): HTMLAtomicCommerceInterfaceElement;
+  };
+  interface HTMLElementTagNameMap {
+    'atomic-commerce-interface': HTMLAtomicCommerceInterfaceElement;
+  }
+ */
+}
+export {};


We can't have the HTMLElementTagNameMap declarations in the components themselves, as it causes a type conflict when referencing them in atomic-angular. Additionally the HTMLAtomicElement interfaces in global and Atomic interfaces in the Components Namespace are needed for the angular sample to build when it references them.

If you have a better solution please mention it!

mh... odd... let's split this issue in another ticket

This would need to be solved before we merge our lit components.

fpbrault · 2025-03-13T20:17:53Z

packages/atomic/src/utils/initialization-utils.tsx

+    const parent = closest(element, initializableElements.join(', '));
+
+    console.log(parent);
+
+    if (!parent) {
      reject(new MissingInterfaceParentError(element.nodeName.toLowerCase()));
+      return;
+    }
+
+    if (isParentReady(parent)) {
+      element.dispatchEvent(event);
+    } else {
+      queueEventForParent(parent, event as InitializeEvent, element);


Instead of dispatching the event right away, components now check if their parent initializableElement is initialized first. If the parent is not ready, the event gets added to an event queue specific to that parent. Once the parent marks itself ready, it will dispatch all the queued event associated to itself.

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

fpbrault commented Mar 13, 2025

View reviewed changes

fpbrault temporarily deployed to PR Artifacts March 13, 2025 20:33 — with GitHub Actions Inactive

fpbrault temporarily deployed to PR Artifacts March 13, 2025 20:49 — with GitHub Actions Inactive

fpbrault temporarily deployed to PR Artifacts March 14, 2025 13:58 — with GitHub Actions Inactive

fpbrault force-pushed the KIT-4050 branch from 2d54356 to 21f01af Compare March 14, 2025 14:40

fpbrault had a problem deploying to PR Artifacts March 14, 2025 14:47 — with GitHub Actions Error

fpbrault temporarily deployed to PR Artifacts March 14, 2025 15:04 — with GitHub Actions Inactive

fpbrault force-pushed the KIT-4050 branch from 9327943 to ce965c8 Compare March 14, 2025 21:57

fpbrault temporarily deployed to PR Artifacts March 14, 2025 22:10 — with GitHub Actions Inactive

fpbrault force-pushed the KIT-4050 branch from ce965c8 to 2d3968f Compare March 17, 2025 15:31

fpbrault temporarily deployed to PR Artifacts March 17, 2025 15:48 — with GitHub Actions Inactive

fpbrault temporarily deployed to PR Artifacts March 18, 2025 15:11 — with GitHub Actions Inactive

fpbrault temporarily deployed to PR Artifacts March 18, 2025 16:02 — with GitHub Actions Inactive

fpbrault temporarily deployed to PR Artifacts March 18, 2025 17:09 — with GitHub Actions Inactive

fpbrault force-pushed the KIT-4050 branch from a56d04e to d585c51 Compare March 18, 2025 17:24

fpbrault temporarily deployed to PR Artifacts March 18, 2025 17:38 — with GitHub Actions Inactive

fpbrault force-pushed the KIT-4050 branch from d585c51 to e2ae1fe Compare March 18, 2025 18:36

fpbrault temporarily deployed to PR Artifacts March 18, 2025 18:50 — with GitHub Actions Inactive

fpbrault force-pushed the KIT-4050 branch from e2ae1fe to 2e49c87 Compare March 19, 2025 18:39

fpbrault force-pushed the KIT-4050 branch from 2e49c87 to 21295bd Compare March 19, 2025 18:41

Add generated files

aa9f4fe

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

louis-bompart force-pushed the KIT-4050 branch from f058ea6 to aa9f4fe Compare March 19, 2025 19:48

louis-bompart temporarily deployed to PR Artifacts March 19, 2025 20:08 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(atomic): fix initialization issues when combining Lit interfaces with Stencil components #5070

chore(atomic): fix initialization issues when combining Lit interfaces with Stencil components #5070

fpbrault commented Mar 13, 2025

github-actions bot commented Mar 13, 2025 •

edited

Loading

fpbrault Mar 13, 2025 •

edited

Loading

louis-bompart Mar 13, 2025

fpbrault Mar 14, 2025

fpbrault Mar 13, 2025

fpbrault Mar 13, 2025 •

edited

Loading

fpbrault Mar 13, 2025

fpbrault Mar 13, 2025

fpbrault Mar 13, 2025

fpbrault Mar 13, 2025

fpbrault Mar 13, 2025

fpbrault Mar 13, 2025 •

edited

Loading

louis-bompart Mar 13, 2025

fpbrault Mar 14, 2025

fpbrault Mar 13, 2025

chore(atomic): fix initialization issues when combining Lit interfaces with Stencil components #5070

Are you sure you want to change the base?

chore(atomic): fix initialization issues when combining Lit interfaces with Stencil components #5070

Conversation

fpbrault commented Mar 13, 2025

github-actions bot commented Mar 13, 2025 • edited Loading

Pull Request Report

PR Title

Live demo links

Bundle Size

fpbrault Mar 13, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fpbrault Mar 13, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fpbrault Mar 13, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Mar 13, 2025 •

edited

Loading

fpbrault Mar 13, 2025 •

edited

Loading

fpbrault Mar 13, 2025 •

edited

Loading

fpbrault Mar 13, 2025 •

edited

Loading