@supersoniks/concorde 4.8.0 → 4.9.1

package/src/core/decorators/api.ts

@@ -162,14 +162,25 @@ function watchScopedConfiguration(
   };
 }
 
-type ApiGetState = {
-  cleanupWatchers: Array<() => void>;
-  requestGeneration: number;
-  configPublisher: DataProvider | null;
-  configMutationHandler: (() => void) | null;
-  scopeWatchCleanup: (() => void) | null;
+type TriggerPublisherBinding = {
+  triggerPublisher: DataProvider | null;
+  triggerInvalidateHandler: (() => void) | null;
+};
+
+type RefetchScheduleState = {
+  refetchTimeoutId: ReturnType<typeof setTimeout> | null;
+  refetchEveryMs: number;
 };
 
+type ApiGetState = TriggerPublisherBinding &
+  RefetchScheduleState & {
+    cleanupWatchers: Array<() => void>;
+    requestGeneration: number;
+    configPublisher: DataProvider | null;
+    configMutationHandler: (() => void) | null;
+    scopeWatchCleanup: (() => void) | null;
+  };
+
 function detachConfigPublisher(state: ApiGetState): void {
   if (state.configPublisher && state.configMutationHandler) {
     state.configPublisher.offInternalMutation(state.configMutationHandler);
@@ -191,6 +202,9 @@ function detachConfigPublisher(state: ApiGetState): void {
  * `PublisherManager` sur le chemin résolu (même syntaxe dynamique que `@subscribe`).
  * Toute mutation interne du publisher (`onInternalMutation`) relance le GET.
  *
+ * **Options** (`GetOptions`) : `triggerKey` — `PublisherManager.get(...).invalidate()` relance le GET ;
+ * `refetchEveryMs` — polling automatique.
+ *
  * @example
  * @get(new Endpoint<User, { userId: string }>("users/${userId}"))
  * payload?: ApiResult<User>;
@@ -200,6 +214,11 @@ function detachConfigPublisher(state: ApiGetState): void {
  * PublisherManager.get("myApiConf").set({ serviceURL: "...", token: null, ... });
  * @get(new Endpoint<Thing, { id: string }>("things/${id}"), apiConf)
  * payload?: ApiResult<Thing>;
+ *
+ * @example
+ * @get(usersEndpoint, { triggerKey: refreshUsersKey })
+ * payload?: ApiResult<User[]>;
+ * // PublisherManager.get("users.refresh").invalidate() → refetch
  */
 export function get<T, Ue = any>(
   endpoint: Endpoint<T, Ue>,
@@ -260,18 +279,24 @@ export function get<T, Ue = any, Uk = any, _Ut = any>(
     skipEmptyPlaceholder: options?.skipEmptyPlaceholder,
   };
   const configurationKeyPath = configurationKey?.path;
+  const triggerKeyPath = options?.triggerKey?.path;
   const endpointDynamicDependencies = extractDynamicDependencies(pathTemplate);
   const configKeyDynamicDependencies = configurationKeyPath
     ? extractDynamicDependencies(configurationKeyPath)
     : [];
+  const triggerKeyDynamicDependencies = triggerKeyPath
+    ? extractDynamicDependencies(triggerKeyPath)
+    : [];
   const mergedDynamicDependencies = [
     ...new Set([
       ...endpointDynamicDependencies,
       ...configKeyDynamicDependencies,
+      ...triggerKeyDynamicDependencies,
     ]),
   ];
   const isDynamicPath = endpointDynamicDependencies.length > 0;
   const usesPublisherConfig = Boolean(configurationKeyPath);
+  const refetchEveryMs = options?.refetchEveryMs ?? 0;
 
   return function (target: object, propertyKey: string) {
     if (!target) return;
@@ -288,6 +313,10 @@ export function get<T, Ue = any, Uk = any, _Ut = any>(
           configPublisher: null,
           configMutationHandler: null,
           scopeWatchCleanup: null,
+          triggerPublisher: null,
+          triggerInvalidateHandler: null,
+          refetchTimeoutId: null,
+          refetchEveryMs,
         };
         comp[stateKey] = state;
       }
@@ -295,6 +324,17 @@ export function get<T, Ue = any, Uk = any, _Ut = any>(
       state.cleanupWatchers.forEach((cleanup) => cleanup());
       state.cleanupWatchers = [];
       state.requestGeneration++;
+      state.refetchEveryMs = refetchEveryMs;
+      clearRefetch(state);
+
+      const scheduleRefetch = () => {
+        clearRefetch(state);
+        if (!state.refetchEveryMs || state.refetchEveryMs <= 0) return;
+        state.refetchTimeoutId = setTimeout(() => {
+          state.refetchTimeoutId = null;
+          runFetch();
+        }, state.refetchEveryMs);
+      };
 
       const runFetch = () => {
         const resolution = isDynamicPath
@@ -302,6 +342,7 @@ export function get<T, Ue = any, Uk = any, _Ut = any>(
           : { ready: true, path: pathTemplate };
         if (!resolution.ready || !resolution.path) {
           comp[propertyKey] = undefined;
+          scheduleRefetch();
           return;
         }
         let config: APIConfiguration | null = null;
@@ -313,6 +354,7 @@ export function get<T, Ue = any, Uk = any, _Ut = any>(
           );
           if (!configRes.ready || !configRes.path) {
             comp[propertyKey] = undefined;
+            scheduleRefetch();
             return;
           }
           const configPublisher = getPublisherFromPath(configRes.path);
@@ -329,6 +371,7 @@ export function get<T, Ue = any, Uk = any, _Ut = any>(
               state.scopeWatchCleanup = null;
             });
           }
+          scheduleRefetch();
           return;
         }
         const generation = ++state.requestGeneration;
@@ -338,9 +381,31 @@ export function get<T, Ue = any, Uk = any, _Ut = any>(
           .then((payload?: ApiResult<T>) => {
             if (generation !== state.requestGeneration) return;
             comp[propertyKey] = payload;
+            scheduleRefetch();
           });
       };
 
+      const scheduleFetch = createAnimationFrameCoalescedRunner(runFetch);
+
+      const rebindTriggerPublisher = () => {
+        detachTriggerPublisher(state);
+        if (!triggerKeyPath) return;
+        const triggerResolution = resolveDynamicPath(
+          component,
+          triggerKeyPath,
+          pathOptions,
+        );
+        if (!triggerResolution.ready || !triggerResolution.path) {
+          return;
+        }
+        const publisher = getPublisherFromPath(triggerResolution.path);
+        if (!publisher) return;
+        const invalidateHandler = () => scheduleFetch();
+        publisher.onInvalidate(invalidateHandler);
+        state.triggerPublisher = publisher;
+        state.triggerInvalidateHandler = invalidateHandler;
+      };
+
       const rebindPublisherConfig = () => {
         if (!usesPublisherConfig || !configurationKeyPath) return;
         detachConfigPublisher(state);
@@ -358,26 +423,32 @@ export function get<T, Ue = any, Uk = any, _Ut = any>(
           comp[propertyKey] = undefined;
           return;
         }
-        const mutationHandler = () => {
-          runFetch();
-        };
+        const mutationHandler = () => scheduleFetch();
         publisher.onInternalMutation(mutationHandler);
         state.configPublisher = publisher;
         state.configMutationHandler = mutationHandler;
       };
 
-      if (usesPublisherConfig) {
+      const rebindAll = () => {
+        rebindTriggerPublisher();
+        rebindPublisherConfig();
+        if (!usesPublisherConfig) {
+          scheduleFetch();
+        }
+      };
+
+      if (usesPublisherConfig || triggerKeyDynamicDependencies.length) {
         for (const dependency of mergedDynamicDependencies) {
           const unsubscribe = observeDynamicProperty(
             getDynamicWatchKeys.watcherStore,
             getDynamicWatchKeys.hooked,
             component,
             dependency,
-            () => rebindPublisherConfig(),
+            () => rebindAll(),
           );
           state.cleanupWatchers.push(unsubscribe);
         }
-        rebindPublisherConfig();
+        rebindAll();
       } else {
         const startScopedFetch = () => {
           if (isDynamicPath) {
@@ -387,11 +458,12 @@ export function get<T, Ue = any, Uk = any, _Ut = any>(
                 getDynamicWatchKeys.hooked,
                 component,
                 dependency,
-                () => runFetch(),
+                () => scheduleFetch(),
               );
               state.cleanupWatchers.push(unsubscribe);
             }
           }
+          rebindTriggerPublisher();
           runFetch();
         };
         state.cleanupWatchers.push(
@@ -405,6 +477,8 @@ export function get<T, Ue = any, Uk = any, _Ut = any>(
       const state = comp[stateKey] as ApiGetState | undefined;
       if (!state) return;
       detachConfigPublisher(state);
+      detachTriggerPublisher(state);
+      clearRefetch(state);
       state.cleanupWatchers.forEach((cleanup) => cleanup());
       state.cleanupWatchers = [];
       state.requestGeneration++;
@@ -413,7 +487,12 @@ export function get<T, Ue = any, Uk = any, _Ut = any>(
   };
 }
 
-export type GetOptions = DynamicPathOptions;
+export type GetOptions<Uk = any> = DynamicPathOptions & {
+  /** Intervalle de refetch automatique (ms). 0 ou absent = pas de polling. */
+  refetchEveryMs?: number;
+  /** Publisher dont `invalidate()` relance le GET. */
+  triggerKey?: DataProviderKey<unknown, Uk>;
+};
 
 export type ApiSendOptions<Uk = any> = DynamicPathOptions & {
   /** Intervalle de renvoi automatique (ms). 0 ou absent = pas de polling. */
@@ -436,7 +515,11 @@ export type PatchOptions<Uk = any> = ApiSendOptions<Uk>;
 
 function isGetOptions(value: unknown): value is GetOptions {
   if (!value || typeof value !== "object") return false;
-  return "skipEmptyPlaceholder" in value;
+  return (
+    "skipEmptyPlaceholder" in value ||
+    "refetchEveryMs" in value ||
+    "triggerKey" in value
+  );
 }
 
 function isApiSendOptions(value: unknown): value is ApiSendOptions {
@@ -469,7 +552,7 @@ function detachBodyPublisher(state: ApiSendState): void {
   state.bodyMutationHandler = null;
 }
 
-function detachTriggerPublisher(state: ApiSendState): void {
+function detachTriggerPublisher(state: TriggerPublisherBinding): void {
   if (state.triggerPublisher && state.triggerInvalidateHandler) {
     state.triggerPublisher.offInvalidate(state.triggerInvalidateHandler);
   }
@@ -477,7 +560,7 @@ function detachTriggerPublisher(state: ApiSendState): void {
   state.triggerInvalidateHandler = null;
 }
 
-function clearSendRefetch(state: ApiSendState): void {
+function clearRefetch(state: RefetchScheduleState): void {
   if (state.refetchTimeoutId) {
     clearTimeout(state.refetchTimeoutId);
     state.refetchTimeoutId = null;
@@ -522,7 +605,8 @@ function createApiSendDecorator<T, B, Ue = any, Uk = any, Ut = any>(
       : maybeOptions;
     const configurationKeyPath = configurationKey?.path;
     const triggerKeyPath = options?.triggerKey?.path;
-    const endpointDynamicDependencies = extractDynamicDependencies(pathTemplate);
+    const endpointDynamicDependencies =
+      extractDynamicDependencies(pathTemplate);
     const bodyKeyDynamicDependencies = extractDynamicDependencies(bodyKeyPath);
     const configKeyDynamicDependencies = configurationKeyPath
       ? extractDynamicDependencies(configurationKeyPath)
@@ -581,10 +665,10 @@ function createApiSendDecorator<T, B, Ue = any, Uk = any, Ut = any>(
         state.refetchEveryMs = refetchEveryMs;
         state.skipIfBodyMissing = skipIfBodyMissing;
         state.autoPostOnBodyMutation = autoPostOnBodyMutation;
-        clearSendRefetch(state);
+        clearRefetch(state);
 
         const scheduleRefetch = () => {
-          clearSendRefetch(state);
+          clearRefetch(state);
           if (!state.refetchEveryMs || state.refetchEveryMs <= 0) return;
           state.refetchTimeoutId = setTimeout(() => {
             state.refetchTimeoutId = null;
@@ -788,7 +872,7 @@ function createApiSendDecorator<T, B, Ue = any, Uk = any, Ut = any>(
         detachConfigPublisher(state);
         detachBodyPublisher(state);
         detachTriggerPublisher(state);
-        clearSendRefetch(state);
+        clearRefetch(state);
         state.cleanupWatchers.forEach((cleanup) => cleanup());
         state.cleanupWatchers = [];
         state.requestGeneration++;
@@ -861,9 +945,8 @@ export function post<T, B, Ue = any, Uk = any, Ut = any>(
   target: object & { [P in K]?: ApiResult<T> | null | undefined },
   propertyKey: K,
 ) => void {
-  return createApiSendDecorator<T, B, Ue, Uk, Ut>(
-    "POST",
-    (api, path, body) => api.postDetailed<T, B>(path, body as B),
+  return createApiSendDecorator<T, B, Ue, Uk, Ut>("POST", (api, path, body) =>
+    api.postDetailed<T, B>(path, body as B),
   )(endpoint, bodyKey, configurationKeyOrOptions, maybeOptions);
 }
 
@@ -921,9 +1004,8 @@ export function put<T, B, Ue = any, Uk = any, Ut = any>(
   target: object & { [P in K]?: ApiResult<T> | null | undefined },
   propertyKey: K,
 ) => void {
-  return createApiSendDecorator<T, B, Ue, Uk, Ut>(
-    "PUT",
-    (api, path, body) => api.putDetailed<T, B>(path, body as B),
+  return createApiSendDecorator<T, B, Ue, Uk, Ut>("PUT", (api, path, body) =>
+    api.putDetailed<T, B>(path, body as B),
   )(endpoint, bodyKey, configurationKeyOrOptions, maybeOptions);
 }
 
@@ -981,8 +1063,7 @@ export function patch<T, B, Ue = any, Uk = any, Ut = any>(
   target: object & { [P in K]?: ApiResult<T> | null | undefined },
   propertyKey: K,
 ) => void {
-  return createApiSendDecorator<T, B, Ue, Uk, Ut>(
-    "PATCH",
-    (api, path, body) => api.patchDetailed<T, B>(path, body as B),
+  return createApiSendDecorator<T, B, Ue, Uk, Ut>("PATCH", (api, path, body) =>
+    api.patchDetailed<T, B>(path, body as B),
   )(endpoint, bodyKey, configurationKeyOrOptions, maybeOptions);
 }

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/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;