@supersoniks/concorde 4.7.4 → 4.9.0

package/src/core/decorators/subscriber/ancestorAttribute.spec.ts

@@ -0,0 +1,197 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { ancestorAttribute } from "./ancestorAttribute";
+
+async function flushFrames(count = 2): Promise<void> {
+  for (let i = 0; i < count; i += 1) {
+    await new Promise<void>((resolve) => {
+      requestAnimationFrame(() => resolve());
+    });
+  }
+}
+
+describe("ancestorAttribute", () => {
+  afterEach(() => {
+    document.body.replaceChildren();
+  });
+
+  it("lit la valeur initiale au connect (mode statique par défaut)", () => {
+    const tag = "test-ancestor-attr-static-init";
+    class C extends HTMLElement {
+      @ancestorAttribute("dataProvider")
+      dataProvider: string | null = null;
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("dataProvider", "scope-a");
+    const el = document.createElement(tag) as InstanceType<typeof C>;
+    wrap.appendChild(el);
+    document.body.appendChild(wrap);
+
+    expect(el.dataProvider).toBe("scope-a");
+  });
+
+  it("ne réagit pas aux mutations en mode statique (défaut)", async () => {
+    const tag = "test-ancestor-attr-static-no-react";
+    class C extends HTMLElement {
+      @ancestorAttribute("dataProvider")
+      dataProvider: string | null = null;
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("dataProvider", "scope-a");
+    const el = document.createElement(tag) as InstanceType<typeof C>;
+    wrap.appendChild(el);
+    document.body.appendChild(wrap);
+
+    wrap.setAttribute("dataProvider", "scope-b");
+    await flushFrames();
+
+    expect(el.dataProvider).toBe("scope-a");
+  });
+
+  it("met à jour la propriété quand un ancêtre change (mode dynamique)", async () => {
+    const tag = "test-ancestor-attr-dynamic-mutation";
+    class C extends HTMLElement {
+      @ancestorAttribute("dataProvider", { dynamic: true })
+      dataProvider: string | null = null;
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("dataProvider", "scope-a");
+    const el = document.createElement(tag) as InstanceType<typeof C>;
+    wrap.appendChild(el);
+    document.body.appendChild(wrap);
+
+    expect(el.dataProvider).toBe("scope-a");
+
+    wrap.setAttribute("dataProvider", "scope-b");
+    await flushFrames();
+
+    expect(el.dataProvider).toBe("scope-b");
+  });
+
+  it("assigne null si l'attribut ancêtre est retiré (mode dynamique)", async () => {
+    const tag = "test-ancestor-attr-dynamic-null";
+    class C extends HTMLElement {
+      @ancestorAttribute("dataProvider", { dynamic: true })
+      dataProvider: string | null = "initial";
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("dataProvider", "scope-a");
+    const el = document.createElement(tag) as InstanceType<typeof C>;
+    wrap.appendChild(el);
+    document.body.appendChild(wrap);
+
+    wrap.removeAttribute("dataProvider");
+    await flushFrames();
+
+    expect(el.dataProvider).toBeNull();
+  });
+
+  it("retombe sur l'ancêtre suivant quand le plus proche perd l'attribut", async () => {
+    const tag = "test-ancestor-attr-dynamic-fallback";
+    class C extends HTMLElement {
+      @ancestorAttribute("dataProvider", { dynamic: true })
+      dataProvider: string | null = null;
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const outer = document.createElement("div");
+    outer.setAttribute("dataProvider", "from-outer");
+    const parent = document.createElement("div");
+    parent.setAttribute("dataProvider", "from-parent");
+    const el = document.createElement(tag) as InstanceType<typeof C>;
+    parent.appendChild(el);
+    outer.appendChild(parent);
+    document.body.appendChild(outer);
+
+    expect(el.dataProvider).toBe("from-parent");
+
+    parent.removeAttribute("dataProvider");
+    await flushFrames();
+
+    expect(el.dataProvider).toBe("from-outer");
+  });
+
+  it("met à jour dans un shadow root (Lit)", async () => {
+    const hostTag = "test-ancestor-shadow-host";
+    const childTag = "test-ancestor-shadow-child";
+
+    class Host extends HTMLElement {
+      connectedCallback() {
+        const shadow = this.attachShadow({ mode: "open" });
+        const wrap = document.createElement("div");
+        wrap.setAttribute("dataProvider", "scope-a");
+        const child = document.createElement(childTag);
+        wrap.appendChild(child);
+        shadow.append(wrap);
+      }
+    }
+
+    class Child extends HTMLElement {
+      @ancestorAttribute("dataProvider", { dynamic: true })
+      dataProvider: string | null = null;
+    }
+
+    if (!customElements.get(hostTag)) {
+      customElements.define(hostTag, Host);
+    }
+    if (!customElements.get(childTag)) {
+      customElements.define(childTag, Child);
+    }
+
+    const host = document.createElement(hostTag);
+    document.body.appendChild(host);
+    await flushFrames();
+
+    const wrap = host.shadowRoot!.querySelector("div")!;
+    const child = host.shadowRoot!.querySelector(childTag) as InstanceType<
+      typeof Child
+    >;
+
+    expect(child.dataProvider).toBe("scope-a");
+
+    wrap.setAttribute("dataProvider", "scope-b");
+    await flushFrames();
+
+    expect(child.dataProvider).toBe("scope-b");
+  });
+
+  it("ne met plus à jour après disconnect (mode dynamique)", async () => {
+    const tag = "test-ancestor-attr-dynamic-disconnect";
+    class C extends HTMLElement {
+      @ancestorAttribute("dataProvider", { dynamic: true })
+      dataProvider: string | null = null;
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("dataProvider", "scope-a");
+    const el = document.createElement(tag) as InstanceType<typeof C>;
+    wrap.appendChild(el);
+    document.body.appendChild(wrap);
+
+    el.remove();
+    wrap.setAttribute("dataProvider", "scope-b");
+    await flushFrames();
+
+    expect(el.dataProvider).toBe("scope-a");
+  });
+});

package/src/core/decorators/subscriber/ancestorAttribute.ts

@@ -1,18 +1,51 @@
-import HTML from "../../utils/HTML";
+import AncestorAttributeObserver, {
+  syncAncestorAttributeValue,
+} from "../../utils/AncestorAttributeObserver";
 import { ConnectedComponent, setSubscribable } from "./common";
 
-export function ancestorAttribute(attributeName: string) {
+export type AncestorAttributeOptions = {
+  /**
+   * Si true, le composant reste synchronisé avec les attributs ancêtres via
+   * `AncestorAttributeObserver` (mutations + reparenting). Requis pour que
+   * `@bind` / `@subscribe` avec `${dataProvider}` se re-lient quand le scope change.
+   * Défaut : false (lecture unique au connect, rétrocompat).
+   */
+  dynamic?: boolean;
+};
+
+export function ancestorAttribute(
+  attributeName: string,
+  options?: AncestorAttributeOptions,
+) {
+  const dynamic = options?.dynamic ?? false;
+  const assignNull = dynamic;
+
   return function (target: unknown, propertyKey: string) {
     if (!target) return;
     setSubscribable(target);
+
     (target as ConnectedComponent).__onBeforeConnected__((component) => {
-      const value = HTML.getAncestorAttributeValue(
-        component as any,
+      syncAncestorAttributeValue(component, attributeName, propertyKey, {
+        assignNull,
+      });
+    });
+
+    if (!dynamic) return;
+
+    let unsubscribe: (() => void) | null = null;
+
+    (target as ConnectedComponent).__onConnected__((component) => {
+      unsubscribe = AncestorAttributeObserver.subscribe(
+        component as unknown as HTMLElement,
         attributeName,
+        propertyKey,
+        { assignNull: true },
       );
-      if (value !== null) {
-        component[propertyKey] = value;
-      }
+    });
+
+    (target as ConnectedComponent).__onDisconnected__(() => {
+      unsubscribe?.();
+      unsubscribe = null;
     });
   };
 }

package/src/core/decorators/subscriber/autoSubscribe.ts

@@ -1,4 +1,8 @@
-import { PublisherProxy, PublisherManager } from "../../utils/PublisherProxy";
+import {
+  PublisherProxy,
+  collectModifiedPublisher,
+  getModifiedPublishers,
+} from "../../utils/PublisherProxy";
 
 export function autoSubscribe() {
   return function (
@@ -33,10 +37,10 @@ export function autoSubscribe() {
       publishers.forEach((publisher: PublisherProxy) => {
         publisher.offAssign(onAssign);
       });
-      PublisherManager.collectModifiedPublisher();
+      collectModifiedPublisher();
       const result = originalMethod.apply(this, args);
       publishers =
-        PublisherManager.getModifiedPublishers() || new Set<PublisherProxy>();
+        getModifiedPublishers() || new Set<PublisherProxy>();
 
       publishers.forEach((publisher: PublisherProxy) => {
         publisher.onAssign(onAssign, false);

package/src/core/decorators/subscriber/bind.ts

@@ -4,10 +4,15 @@ import type {
 } from "../../utils/dataProviderKey";
 import { ConnectedComponent, setSubscribable } from "./common";
 import {
+  type DynamicPathOptions,
   extractDynamicDependencies,
   hasPath,
   resolveDynamicPath,
 } from "./dynamicPath";
+
+export type BindOptions = DynamicPathOptions & {
+  reflect?: boolean;
+};
 import {
   bindDynamicWatchKeys,
   observeDynamicProperty,
@@ -16,9 +21,12 @@ import { getPublisherFromPath } from "./publisherPath";
 
 function bindImpl(
   path: string,
-  options?: { reflect?: boolean },
+  options?: BindOptions,
 ): (target: unknown, propertyKey: string) => void {
   const reflect = options?.reflect ?? false;
+  const pathOptions: DynamicPathOptions = {
+    skipEmptyPlaceholder: options?.skipEmptyPlaceholder,
+  };
   const dynamicDependencies = extractDynamicDependencies(path);
   const isDynamicPath = dynamicDependencies.length > 0;
 
@@ -139,7 +147,7 @@ function bindImpl(
 
       const refreshSubscription = () => {
         if (isDynamicPath) {
-          const resolution = resolveDynamicPath(component, path);
+          const resolution = resolveDynamicPath(component, path, pathOptions);
           if (!resolution.ready) {
             subscribeToPath(null);
             return;
@@ -201,18 +209,18 @@ function bindImpl(
  */
 export function bind(
   path: string,
-  options?: { reflect?: boolean },
+  options?: BindOptions,
 ): (target: unknown, propertyKey: string) => void;
 export function bind<T, U = any>(
   key: DataProviderKey<T, U>,
-  options?: { reflect?: boolean },
+  options?: BindOptions,
 ): <K extends string>(
   target: DataProviderKeyHost<U> & { [P in K]?: T | null | undefined },
   propertyKey: K,
 ) => void;
 export function bind(
   pathOrKey: string | DataProviderKey<unknown, unknown>,
-  options?: { reflect?: boolean },
+  options?: BindOptions,
 ): (target: unknown, propertyKey: string) => void {
   const path = hasPath(pathOrKey) ? pathOrKey.path : pathOrKey;
   return bindImpl(path, options);

package/src/core/decorators/subscriber/dynamicPath.spec.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect } from "vitest";
+import { resolveDynamicPath } from "./dynamicPath";
+
+describe("resolveDynamicPath", () => {
+  const host = { sessionId: "alpha", count: 0, label: "", missing: null as null };
+
+  it("est prêt avec une valeur définie", () => {
+    expect(resolveDynamicPath(host, "api/sessions/${sessionId}/sync")).toEqual({
+      ready: true,
+      path: "api/sessions/alpha/sync",
+    });
+  });
+
+  it("n'est pas prêt pour undefined/null", () => {
+    expect(resolveDynamicPath({}, "api/sessions/${sessionId}/sync")).toEqual({
+      ready: false,
+      path: null,
+    });
+    expect(
+      resolveDynamicPath({ sessionId: null }, "api/sessions/${sessionId}/sync"),
+    ).toEqual({ ready: false, path: null });
+  });
+
+  it("insère 0 et false par défaut", () => {
+    expect(resolveDynamicPath(host, "items/${count}")).toEqual({
+      ready: true,
+      path: "items/0",
+    });
+    expect(
+      resolveDynamicPath({ flag: false }, "flags/${flag}"),
+    ).toEqual({ ready: true, path: "flags/false" });
+  });
+
+  it("accepte une chaîne vide par défaut", () => {
+    expect(resolveDynamicPath(host, "api/sessions/${label}/sync")).toEqual({
+      ready: true,
+      path: "api/sessions//sync",
+    });
+  });
+
+  it("skipEmptyPlaceholder: true — chaîne vide non prête", () => {
+    expect(
+      resolveDynamicPath(host, "api/sessions/${label}/sync", {
+        skipEmptyPlaceholder: true,
+      }),
+    ).toEqual({ ready: false, path: null });
+    expect(
+      resolveDynamicPath(host, "api/sessions/${sessionId}/sync", {
+        skipEmptyPlaceholder: true,
+      }),
+    ).toEqual({ ready: true, path: "api/sessions/alpha/sync" });
+  });
+});

package/src/core/decorators/subscriber/dynamicPath.ts

@@ -1,5 +1,17 @@
 /** Lit / décorateurs : chemins publisher avec `${prop}` ou `{$prop}`. */
 
+/**
+ * Options de résolution des placeholders dynamiques.
+ * `skipEmptyPlaceholder` ne concerne que les chaînes vides `''` — pas `0`, `false`, `null`, etc.
+ */
+export type DynamicPathOptions = {
+  /**
+   * Si `true`, un placeholder résolu en `''` est traité comme non prêt (`ready: false`).
+   * N'affecte pas les autres valeurs (`0` → `"0"`, `false` → `"false"`, …).
+   */
+  skipEmptyPlaceholder?: boolean;
+};
+
 export function cleanPlaceholder(value: string): string {
   return value.trim().replace(/^this\./, "");
 }
@@ -25,15 +37,25 @@ export function getValueFromExpression(
   return current;
 }
 
+function isPlaceholderUnresolved(
+  resolved: unknown,
+  options?: DynamicPathOptions,
+): boolean {
+  if (resolved === undefined || resolved === null) return true;
+  if (options?.skipEmptyPlaceholder && resolved === "") return true;
+  return false;
+}
+
 export function resolveDynamicPath(
   component: unknown,
   template: string,
+  options?: DynamicPathOptions,
 ): { ready: boolean; path: string | null } {
   let missing = false;
   const replaceValue = (_match: string, expression: string) => {
     const cleaned = cleanPlaceholder(expression);
     const resolved = getValueFromExpression(component, cleaned);
-    if (resolved === undefined || resolved === null) {
+    if (isPlaceholderUnresolved(resolved, options)) {
       missing = true;
       return "";
     }

package/src/core/decorators/subscriber/handle.ts

@@ -2,6 +2,7 @@ import type {
   DataProviderKey,
   DataProviderKeyHost,
 } from "../../utils/dataProviderKey";
+import type { DynamicPathOptions } from "./dynamicPath";
 import { createOnAssign, Skip } from "./onAssign";
 
 export { Skip } from "./onAssign";
@@ -14,7 +15,7 @@ export { Skip } from "./onAssign";
  * assignation**, même quand la valeur reçue est `null`/`undefined` (c'est la
  * différence de comportement voulue par rapport à `@onAssign`).
  */
-export type HandleOptions = {
+export type HandleOptions = DynamicPathOptions & {
   /**
    * Attendre que **toutes** les clés surveillées soient définies (non
    * `null`/`undefined`) avant d'appeler la méthode. Reproduit la sémantique
@@ -122,6 +123,7 @@ export function handle(
     {
       dispatchWhenUndefined: !options.waitForAllDefined,
       skip: options.skip,
+      skipEmptyPlaceholder: options.skipEmptyPlaceholder,
     },
     paths,
   );

package/src/core/decorators/subscriber/onAssign.ts

@@ -1,6 +1,10 @@
 import DataProvider from "../../utils/PublisherProxy";
 import { ConnectedComponent, setSubscribable } from "./common";
-import { extractDynamicDependencies, resolveDynamicPath } from "./dynamicPath";
+import {
+  type DynamicPathOptions,
+  extractDynamicDependencies,
+  resolveDynamicPath,
+} from "./dynamicPath";
 import {
   onAssignDynamicWatchKeys,
   observeDynamicProperty,
@@ -60,7 +64,7 @@ export function isSkipped(value: unknown, kinds: Skip[]): boolean {
   return kinds.some((kind) => SKIP_PREDICATES[kind](value));
 }
 
-export type OnAssignOptions = {
+export type OnAssignOptions = DynamicPathOptions & {
   /**
    * Quand `true`, le callback est invoqué à chaque assignation, même si la
    * valeur reçue est `null`/`undefined`.
@@ -125,6 +129,9 @@ export function createOnAssign(
       isDynamic: dynamicDependencies.length > 0,
     };
   });
+  const pathOptions: DynamicPathOptions = {
+    skipEmptyPlaceholder: options.skipEmptyPlaceholder,
+  };
 
   return function (
     target: unknown,
@@ -215,6 +222,7 @@ export function createOnAssign(
             const resolution = resolveDynamicPath(
               component,
               conf.pathConfig.originalPath,
+              pathOptions,
             );
             if (!resolution.ready) {
               subscribeToPath(conf, null);

package/src/core/decorators/subscriber/publish.ts

@@ -4,7 +4,13 @@ import type {
 } from "../../utils/dataProviderKey";
 import DataProvider from "../../utils/PublisherProxy";
 import { ConnectedComponent, setSubscribable } from "./common";
-import { extractDynamicDependencies, resolveDynamicPath } from "./dynamicPath";
+import {
+  type DynamicPathOptions,
+  extractDynamicDependencies,
+  resolveDynamicPath,
+} from "./dynamicPath";
+
+export type PublishOptions = DynamicPathOptions;
 import {
   publishDynamicWatchKeys,
   observeDynamicProperty,
@@ -29,11 +35,15 @@ import { getPublisherFromPath } from "./publisherPath";
  */
 export function publish<T, U = any>(
   key: DataProviderKey<T, U>,
+  options?: PublishOptions,
 ): <K extends string>(
   target: DataProviderKeyHost<U> & { [P in K]?: T | null | undefined },
   propertyKey: K,
 ) => void {
   const path = key.path;
+  const pathOptions: DynamicPathOptions = {
+    skipEmptyPlaceholder: options?.skipEmptyPlaceholder,
+  };
   const dynamicDependencies = extractDynamicDependencies(path);
 
   return function (target: object, propertyKey: string) {
@@ -93,7 +103,7 @@ export function publish<T, U = any>(
       const updatePublisher = () => {
         let resolvedPath: string | null;
         if (dynamicDependencies.length) {
-          const resolution = resolveDynamicPath(component, path);
+          const resolution = resolveDynamicPath(component, path, pathOptions);
           resolvedPath = resolution.ready ? resolution.path : null;
         } else {
           resolvedPath = path;

package/src/core/mixins/Fetcher.ts

@@ -11,12 +11,13 @@ import { ResultTypeInterface } from "@supersoniks/concorde/core/utils/api";
 import { detecHTMLLanguageChange } from "../utils/HTML";
 type Constructor<T> = new (...args: MixinArgsType[]) => T;
 
-const fetchersInError: Set<{ _fetchData: () => void }> = new Set();
+type Refetchable = { refetch: () => void | Promise<void> };
+const fetchersInError: Set<Refetchable> = new Set();
 export const invalidateFetchersInError = () => {
   const fetchersInErrorCopy = new Set(fetchersInError);
   fetchersInError.clear();
   for (const fetcher of fetchersInErrorCopy) {
-    fetcher._fetchData();
+    fetcher.refetch();
   }
 };
 
@@ -39,7 +40,7 @@ const dispatchFetchError = (apiResponse: Response) => {
   }
 };
 
-const fetchComponents = new Set<{ _fetchData: () => void }>();
+const fetchComponents = new Set<Refetchable>();
 let languageChangeRequestId = 0;
 detecHTMLLanguageChange(async () => {
   //relaunch 4 fetchs then wait the result before launching the next 4 fetchs
@@ -49,7 +50,7 @@ detecHTMLLanguageChange(async () => {
   while (fetchers.length > 0) {
     if (currentRequestId != languageChangeRequestId) return;
     const fourFetchers = fetchers.splice(0, 4);
-    await Promise.all(fourFetchers.map((fetcher) => fetcher._fetchData()));
+    await Promise.all(fourFetchers.map((fetcher) => fetcher.refetch()));
   }
 });
 
@@ -148,13 +149,18 @@ const Fetcher = <
         this._fetchData();
       }
     }
+
+    refetch() {
+      return this._fetchData();
+    }
+
     /**
      *
      * C'est ici que les données sont chargées via l'utilitaire API
      * Elles sont ensuite injectées dans le publisher en accord avec la cible définie dans la propriété key
      * Un Toast est affiché si le chargement échoue
      */
-    async _fetchData() {
+    protected async _fetchData() {
       this.requestUpdate();
       if (!this.isFetchEnabled) return;
       this.api = new API(this.getApiConfiguration());
@@ -372,6 +378,6 @@ const Fetcher = <
       }
     }
   }
-  return FetcherElement; //as Constructor<SubscriberInterface> & T;
+  return FetcherElement;
 };
 export default Fetcher;