@supersoniks/concorde 4.2.0 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "license": "MIT",
   "type": "module",
   "main": "",
@@ -17,9 +17,12 @@
   "exports": {
     "./core/components/ui/icon/icons.json": "./src/core/components/ui/icon/icons.json",
     "./core/components/functional/sdui/default-library.json": "./src/core/components/functional/sdui/default-library.json",
+    "./dataProviderKey": "./src/core/utils/dataProviderKey.ts",
     "./*": "./src/*.ts",
     "./vite-config": "./vite/config.js",
     "./rollup-plugin-*": "./rollup/plugin-*.js",
+    "./_types/endpoint": "./src/core/_types/endpoint.ts",
+    "./_types/key": "./src/core/_types/key.ts",
     "./_types/types": "./src/core/_types/types.ts",
     "./date": "./src/core/components/functional/date/date.ts",
     "./functional/date": "./src/core/components/functional/date/date.ts",
@@ -217,9 +220,6 @@
     "./modal-title": "./src/core/components/ui/modal/modal-title.ts",
     "./ui/modal-title": "./src/core/components/ui/modal/modal-title.ts",
     "./ui/modal/modal-title": "./src/core/components/ui/modal/modal-title.ts",
-    "./modal.stories": "./src/core/components/ui/modal/modal.stories.ts",
-    "./ui/modal.stories": "./src/core/components/ui/modal/modal.stories.ts",
-    "./ui/modal/modal.stories": "./src/core/components/ui/modal/modal.stories.ts",
     "./modal": "./src/core/components/ui/modal/modal.ts",
     "./ui/modal": "./src/core/components/ui/modal/modal.ts",
     "./pop": "./src/core/components/ui/pop/pop.ts",
@@ -274,13 +274,23 @@
     "./ui/ui": "./src/core/components/ui/ui.ts",
     "./core": "./src/core/core.ts",
     "./decorators/Subscriber": "./src/core/decorators/Subscriber.ts",
+    "./decorators/api.spec": "./src/core/decorators/api.spec.ts",
+    "./decorators/api": "./src/core/decorators/api.ts",
     "./decorators/lifecycle": "./src/core/decorators/lifecycle.ts",
     "./decorators/subscriber/ancestorAttribute": "./src/core/decorators/subscriber/ancestorAttribute.ts",
     "./decorators/subscriber/autoFill": "./src/core/decorators/subscriber/autoFill.ts",
     "./decorators/subscriber/autoSubscribe": "./src/core/decorators/subscriber/autoSubscribe.ts",
     "./decorators/subscriber/bind": "./src/core/decorators/subscriber/bind.ts",
     "./decorators/subscriber/common": "./src/core/decorators/subscriber/common.ts",
+    "./decorators/subscriber/dynamicPath": "./src/core/decorators/subscriber/dynamicPath.ts",
+    "./decorators/subscriber/dynamicPropertyWatch": "./src/core/decorators/subscriber/dynamicPropertyWatch.ts",
     "./decorators/subscriber/onAssign": "./src/core/decorators/subscriber/onAssign.ts",
+    "./decorators/subscriber/publish.spec": "./src/core/decorators/subscriber/publish.spec.ts",
+    "./decorators/subscriber/publish": "./src/core/decorators/subscriber/publish.ts",
+    "./decorators/subscriber/publisherPath": "./src/core/decorators/subscriber/publisherPath.ts",
+    "./decorators/subscriber/subscribe.spec": "./src/core/decorators/subscriber/subscribe.spec.ts",
+    "./decorators/subscriber/subscribe": "./src/core/decorators/subscriber/subscribe.ts",
+    "./decorators/subscriber/subscribe.type-test": "./src/core/decorators/subscriber/subscribe.type-test.ts",
     "./directives/DataProvider": "./src/core/directives/DataProvider.ts",
     "./directives/Wording": "./src/core/directives/Wording.ts",
     "./mixins/Fetcher": "./src/core/mixins/Fetcher.ts",
@@ -301,11 +311,19 @@
     "./utils/Utils": "./src/core/utils/Utils.ts",
     "./utils/aesCrypto": "./src/core/utils/aesCrypto.ts",
     "./utils/api": "./src/core/utils/api.ts",
+    "./utils/dataProviderKey.spec": "./src/core/utils/dataProviderKey.spec.ts",
+    "./utils/dataProviderKey": "./src/core/utils/dataProviderKey.ts",
+    "./utils/endpoint.spec": "./src/core/utils/endpoint.spec.ts",
+    "./utils/endpoint": "./src/core/utils/endpoint.ts",
     "./utils/route.spec": "./src/core/utils/route.spec.ts",
     "./utils/route": "./src/core/utils/route.ts",
     "./utils/url-pattern": "./src/core/utils/url-pattern.ts",
     "./code": "./src/docs/code.ts",
     "./docs": "./src/docs/docs.ts",
+    "./example/decorators-demo-bind-demos": "./src/docs/example/decorators-demo-bind-demos.ts",
+    "./example/decorators-demo-geo": "./src/docs/example/decorators-demo-geo.ts",
+    "./example/decorators-demo-init": "./src/docs/example/decorators-demo-init.ts",
+    "./example/decorators-demo-subscribe-publish-get-demos": "./src/docs/example/decorators-demo-subscribe-publish-get-demos.ts",
     "./example/decorators-demo": "./src/docs/example/decorators-demo.ts",
     "./example/users": "./src/docs/example/users.ts",
     "./header/header": "./src/docs/header/header.ts",

package/scripts/pre-build.mjs

@@ -99,6 +99,9 @@ jsonString = jsonString;
 
 const tsConfig = JSON.parse(jsonString);
 tsConfig.compilerOptions.paths = { ...shortPathMapping };
+tsConfig.compilerOptions.paths["@supersoniks/concorde/dataProviderKey"] = [
+  path.resolve(__dirname, "../src/core/utils/dataProviderKey.ts"),
+];
 tsConfig.compilerOptions.paths["@supersoniks/concorde/*"] = ["./*"];
 tsConfig.compilerOptions.paths["@concorde/*"] = ["./*"];
 fs.writeFileSync(tsConfigPath, JSON.stringify(tsConfig, null, 2));
@@ -113,6 +116,7 @@ const pExports = {
     "./src/core/components/ui/icon/icons.json",
   "./core/components/functional/sdui/default-library.json":
     "./src/core/components/functional/sdui/default-library.json",
+  "./dataProviderKey": "./src/core/utils/dataProviderKey.ts",
   "./*": "./src/*.ts",
   "./vite-config": "./vite/config.js",
   "./rollup-plugin-*": "./rollup/plugin-*.js",

package/src/core/_types/endpoint.ts

@@ -0,0 +1,4 @@
+/**
+ * Réexport : définition dans [`utils/endpoint`](../utils/endpoint.ts) — `Endpoint<T, U = any>`.
+ */
+export { Endpoint } from "../utils/endpoint";

package/src/core/_types/key.ts

@@ -0,0 +1 @@
+export { DataProviderKey } from "../utils/dataProviderKey";

package/src/core/components/functional/example/example.ts

@@ -1,11 +1,43 @@
-import {html, LitElement} from "lit";
-import {customElement, property} from "lit/decorators.js";
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { Endpoint } from "@supersoniks/concorde/utils";
+import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
+import {
+  get,
+  publish,
+  subscribe,
+  ApiGetResult,
+} from "@supersoniks/concorde/decorators";
+
+/** Same API as the queue demo: https://geo.api.gouv.fr/ */
+type City = { nom: string; code: string };
+
+const endpoint = new Endpoint<City[], { limit: number }>(
+  "communes?limit=$limit&fields=nom,code",
+);
+
+/** Même path que l’endpoint ; type = charge utile `@get` pour `@publish`. */
+const dpKey = new DataProviderKey<ApiGetResult<City[]>>(endpoint.path);
+
 const tagName = "sonic-example"; // For Astro.build
 @customElement(tagName)
-export class SonicComponent extends Subscriber(LitElement) {
-  @property() text = "Example";
+export class SonicComponent extends LitElement {
+  @property({ type: Number })
+  limit = 5;
+
+  @get(endpoint)
+  @publish(dpKey)
+  geoCommunesPayload?: ApiGetResult<City[]>;
+
+  @state()
+  @subscribe(dpKey.result)
+  geoCommunesResult?: City[];
+
   render() {
-    return html`<div>${this.text}</div>`;
+    return html` <span part="api-get-demo">
+      · get: ${JSON.stringify(this.geoCommunesPayload?.result ?? null)} · HTTP
+      ${this.geoCommunesPayload?.response?.status ?? "—"} · subscribe:
+      ${JSON.stringify(this.geoCommunesResult ?? null)}</span
+    >`;
   }
 }

package/src/core/components/ui/captcha/captcha.ts

@@ -3,7 +3,10 @@ import { dp, HTML } from "@supersoniks/concorde/utils";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ConcordeWindow } from "@supersoniks/concorde/core/_types/types";
-import type { DataProvider, Publisher } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import type {
+  DataProvider,
+  Publisher,
+} from "@supersoniks/concorde/core/utils/PublisherProxy";
 import {
   generateKey,
   encryptToBase64,
@@ -72,7 +75,8 @@ export class Captcha extends Subscriber(LitElement) {
       script.type = "module";
       this.setAttribute("async", "");
       this.setAttribute("defer", "");
-      script.src = "https://eu.altcha.org/js/latest/altcha.min.js";
+      script.src =
+        "https://cdn.jsdelivr.net/gh/altcha-org/altcha/dist/altcha.min.js";
       scriptAdded = true;
       document.head.appendChild(script);
     }
@@ -84,7 +88,7 @@ export class Captcha extends Subscriber(LitElement) {
       captchaToken: string;
     }>(
       this.getAncestorAttributeValue("headersDataProvider") ??
-        this.getAncestorAttributeValue("formDataProvider")
+        this.getAncestorAttributeValue("formDataProvider"),
     );
 
     if (
@@ -93,14 +97,14 @@ export class Captcha extends Subscriber(LitElement) {
     ) {
       this.formPublisher.needsCaptchaValidation.set(true);
       (this.formPublisher.captchaToken as Publisher<string>).onAssign(
-        this.onCaptchaTokenChanged
+        this.onCaptchaTokenChanged,
       );
     }
   }
   disconnectedCallback(): void {
     if (this.formPublisher) {
       (this.formPublisher.captchaToken as Publisher<string>).offAssign(
-        this.onCaptchaTokenChanged
+        this.onCaptchaTokenChanged,
       );
       this.formPublisher.captchaToken.set("");
       this.formPublisher.needsCaptchaValidation.set(false);
@@ -115,7 +119,9 @@ export class Captcha extends Subscriber(LitElement) {
     if (!form) return;
     const formData = new FormData(form);
     this.formPublisher.captchaKey.set(this.key);
-    this.formPublisher.captchaToken.set(formData.get("altcha")?.toString() || "");
+    this.formPublisher.captchaToken.set(
+      formData.get("altcha")?.toString() || "",
+    );
   }
 
   async generateEncryptedKey() {

package/src/core/decorators/Subscriber.ts

@@ -1,4 +1,6 @@
 export { bind } from "./subscriber/bind";
+export { publish } from "./subscriber/publish";
+export { subscribe } from "./subscriber/subscribe";
 export { onAssign } from "./subscriber/onAssign";
 export { autoSubscribe } from "./subscriber/autoSubscribe";
 export { autoFill } from "./subscriber/autoFill";

package/src/core/decorators/api.spec.ts

@@ -0,0 +1,150 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { Endpoint } from "../utils/endpoint";
+import { DataProviderKey } from "../utils/dataProviderKey";
+import API, {
+  APIConfiguration,
+  type ApiGetResult,
+} from "@supersoniks/concorde/core/utils/api";
+import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import { get } from "./api";
+
+const staticConfig: APIConfiguration = {
+  serviceURL: "https://api.example.test",
+  token: null,
+  userName: null,
+  password: null,
+  authToken: null,
+  tokenProvider: null,
+};
+
+async function flushGetMicrotasks() {
+  await Promise.resolve();
+  await Promise.resolve();
+}
+
+function mockPayload<T>(result: T) {
+  return {
+    request: new Request("https://api.example.test/items/1"),
+    response: new Response(JSON.stringify(result), {
+      status: 200,
+      headers: { "Content-Type": "application/json" },
+    }),
+    result,
+  };
+}
+
+describe("get", () => {
+  beforeEach(() => {
+    vi.spyOn(API.prototype, "getDetailed").mockResolvedValue(
+      mockPayload({ id: "loaded" }) as never,
+    );
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    document.body.replaceChildren();
+  });
+
+  it("assigne ApiGetResult avec configurationKey (publisher)", async () => {
+    const pubId = "getSpecPub1";
+    PublisherManager.get(pubId).set(staticConfig);
+    const confKey = new DataProviderKey<APIConfiguration>(pubId);
+
+    const itemEp = new Endpoint<{ id: string }>("items/1");
+    const tag = "test-api-get-config-key";
+    class C extends HTMLElement {
+      @get(itemEp, confKey)
+      payload: ApiGetResult<{ id: string }> | null = null;
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+    const el = document.createElement(tag) as InstanceType<typeof C>;
+    document.body.appendChild(el);
+    await flushGetMicrotasks();
+    expect(el.payload?.result).toEqual({ id: "loaded" });
+    expect(el.payload?.response?.ok).toBe(true);
+    expect(el.payload?.request.url).toContain("api.example.test");
+    expect(API.prototype.getDetailed).toHaveBeenCalledWith("items/1");
+  });
+
+  it("endpoint dynamique avec configurationKey", async () => {
+    const pubId = "getSpecPub2";
+    PublisherManager.get(pubId).set(staticConfig);
+    const confKey = new DataProviderKey<APIConfiguration>(pubId);
+    const rowEp = new Endpoint<{ id: string }>("rows/${rowId}");
+
+    class TestRow extends HTMLElement {
+      rowId = "42";
+
+      @get(rowEp, confKey)
+      payload: ApiGetResult<{ id: string }> | null = null;
+    }
+
+    const tag = "test-api-get-row";
+    if (!customElements.get(tag)) {
+      customElements.define(tag, TestRow);
+    }
+
+    const el = document.createElement(tag) as InstanceType<typeof TestRow>;
+    document.body.appendChild(el);
+    await flushGetMicrotasks();
+
+    expect(API.prototype.getDetailed).toHaveBeenCalledWith("rows/42");
+    expect(el.payload?.result).toEqual({ id: "loaded" });
+  });
+
+  it("mode scoped lit la configuration sur les ancêtres (getApiConfiguration)", async () => {
+    const dataEp = new Endpoint<{ id: string }>("scoped-endpoint");
+
+    class TestScoped extends HTMLElement {
+      @get(dataEp)
+      payload: ApiGetResult<{ id: string }> | null = null;
+    }
+
+    const tag = "test-api-get-scoped";
+    if (!customElements.get(tag)) {
+      customElements.define(tag, TestScoped);
+    }
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("serviceURL", "https://from-ancestor.test");
+    const el = document.createElement(tag) as InstanceType<typeof TestScoped>;
+    wrap.appendChild(el);
+    document.body.appendChild(wrap);
+
+    await flushGetMicrotasks();
+
+    expect(API.prototype.getDetailed).toHaveBeenCalledWith("scoped-endpoint");
+    expect(el.payload?.result).toEqual({ id: "loaded" });
+  });
+
+  it("relance le GET quand le publisher de config mute (onInternalMutation)", async () => {
+    const pubId = "getSpecPubMut";
+    const pub = PublisherManager.get(pubId);
+    pub.set(staticConfig);
+    const confKey = new DataProviderKey<APIConfiguration>(pubId);
+    const itemEp = new Endpoint<{ id: string }>("items/1");
+    const tag = "test-api-get-mutation";
+
+    class C extends HTMLElement {
+      @get(itemEp, confKey)
+      payload: ApiGetResult<{ id: string }> | null = null;
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+    const el = document.createElement(tag) as InstanceType<typeof C>;
+    document.body.appendChild(el);
+    await flushGetMicrotasks();
+    expect(API.prototype.getDetailed).toHaveBeenCalledTimes(1);
+
+    pub.set({
+      ...staticConfig,
+      serviceURL: "https://api.example.test/v2",
+    });
+    await flushGetMicrotasks();
+    expect(API.prototype.getDetailed).toHaveBeenCalledTimes(2);
+    expect(el.payload?.result).toEqual({ id: "loaded" });
+  });
+});

package/src/core/decorators/api.ts

@@ -0,0 +1,244 @@
+import type {
+  DataProviderKey,
+  DataProviderKeyHost,
+} from "../utils/dataProviderKey";
+import { Endpoint } from "../utils/endpoint";
+import HTML, {
+  SearchableDomElement,
+} from "@supersoniks/concorde/core/utils/HTML";
+import API, {
+  APIConfiguration,
+  type ApiGetResult,
+} from "@supersoniks/concorde/core/utils/api";
+import DataProvider from "../utils/PublisherProxy";
+import { ConnectedComponent, setSubscribable } from "./subscriber/common";
+import {
+  extractDynamicDependencies,
+  resolveDynamicPath,
+} from "./subscriber/dynamicPath";
+import {
+  getDynamicWatchKeys,
+  registerDynamicPropertyWatcher,
+} from "./subscriber/dynamicPropertyWatch";
+import { getPublisherFromPath } from "./subscriber/publisherPath";
+
+function asSearchableHost(component: unknown): SearchableDomElement | null {
+  if (component instanceof HTMLElement || component instanceof ShadowRoot) {
+    return component;
+  }
+  return null;
+}
+
+function readApiConfigurationFromPublisher(
+  publisher: DataProvider | null,
+): APIConfiguration | null {
+  if (!publisher || typeof publisher.get !== "function") return null;
+  const raw = publisher.get();
+  if (!raw || typeof raw !== "object") return null;
+  if (!("serviceURL" in (raw as object))) return null;
+  return raw as APIConfiguration;
+}
+
+function resolveScopedConfiguration(
+  component: unknown,
+): APIConfiguration | null {
+  const host = asSearchableHost(component);
+  if (!host) return null;
+  return HTML.getApiConfiguration(host);
+}
+
+type ApiGetState = {
+  cleanupWatchers: Array<() => void>;
+  requestGeneration: number;
+  configPublisher: DataProvider | null;
+  configMutationHandler: (() => void) | null;
+};
+
+function detachConfigPublisher(state: ApiGetState): void {
+  if (state.configPublisher && state.configMutationHandler) {
+    state.configPublisher.offInternalMutation(state.configMutationHandler);
+  }
+  state.configPublisher = null;
+  state.configMutationHandler = null;
+}
+
+/**
+ * Décorateur **`@get`** : charge des données via `API.getDetailed` et assigne un
+ * `ApiGetResult<T>` (`request`, `response`, `result` typé `T`) ou `null`.
+ * Le path est un `Endpoint<T, Ue>` ; les placeholders `${nomPropriété}` sont résolus sur l'instance (`Ue` contraint l’hôte).
+ *
+ * **Scoped (défaut)** : `HTML.getApiConfiguration(host)` avec `host` = l’élément connecté
+ * (`HTMLElement` / `ShadowRoot`). Sans hôte DOM valide, la propriété reste inchangée jusqu’à connexion.
+ *
+ * **Deuxième paramètre** : `DataProviderKey<APIConfiguration>` — la config est lue via
+ * `PublisherManager` sur le chemin résolu (même syntaxe dynamique que `@subscribe`).
+ * Toute mutation interne du publisher (`onInternalMutation`) relance le GET.
+ *
+ * @example
+ * @get(new Endpoint<User, { userId: string }>("users/${userId}"))
+ * payload?: ApiGetResult<User>;
+ *
+ * @example
+ * const apiConf = new DataProviderKey<APIConfiguration>("myApiConf");
+ * PublisherManager.get("myApiConf").set({ serviceURL: "...", token: null, ... });
+ * @get(new Endpoint<Thing, { id: string }>("things/${id}"), apiConf)
+ * payload?: ApiGetResult<Thing>;
+ */
+export function get<T, Ue = any>(
+  endpoint: Endpoint<T, Ue>,
+): <K extends string>(
+  target: DataProviderKeyHost<Ue> & {
+    [P in K]?: ApiGetResult<T> | null | undefined;
+  },
+  propertyKey: K,
+) => void;
+export function get<T, Ue = any, Uk = any>(
+  endpoint: Endpoint<T, Ue>,
+  configurationKey: DataProviderKey<APIConfiguration, Uk>,
+): <K extends string>(
+  target: DataProviderKeyHost<Ue> &
+    DataProviderKeyHost<Uk> & {
+      [P in K]?: ApiGetResult<T> | null | undefined;
+    },
+  propertyKey: K,
+) => void;
+export function get<T, Ue = any, Uk = any>(
+  endpoint: Endpoint<T, Ue>,
+  configurationKey?: DataProviderKey<APIConfiguration, Uk>,
+): <K extends string>(
+  target: object & { [P in K]?: ApiGetResult<T> | null | undefined },
+  propertyKey: K,
+) => void {
+  const pathTemplate = endpoint.path;
+  const configurationKeyPath = configurationKey?.path;
+  const endpointDynamicDependencies = extractDynamicDependencies(pathTemplate);
+  const configKeyDynamicDependencies = configurationKeyPath
+    ? extractDynamicDependencies(configurationKeyPath)
+    : [];
+  const mergedDynamicDependencies = [
+    ...new Set([
+      ...endpointDynamicDependencies,
+      ...configKeyDynamicDependencies,
+    ]),
+  ];
+  const isDynamicPath = endpointDynamicDependencies.length > 0;
+  const usesPublisherConfig = Boolean(configurationKeyPath);
+
+  return function (target: object, propertyKey: string) {
+    if (!target) return;
+    setSubscribable(target);
+    const stateKey = `__get_state_${propertyKey}`;
+
+    (target as ConnectedComponent).__onConnected__((component) => {
+      const comp = component as Record<string, unknown>;
+      let state = comp[stateKey] as ApiGetState | undefined;
+      if (!state) {
+        state = {
+          cleanupWatchers: [],
+          requestGeneration: 0,
+          configPublisher: null,
+          configMutationHandler: null,
+        };
+        comp[stateKey] = state;
+      }
+
+      state.cleanupWatchers.forEach((cleanup) => cleanup());
+      state.cleanupWatchers = [];
+      state.requestGeneration++;
+
+      const runFetch = () => {
+        const resolution = isDynamicPath
+          ? resolveDynamicPath(component, pathTemplate)
+          : { ready: true, path: pathTemplate };
+        if (!resolution.ready || !resolution.path) {
+          comp[propertyKey] = undefined;
+          return;
+        }
+        let config: APIConfiguration | null = null;
+        if (usesPublisherConfig && configurationKeyPath) {
+          const configRes = resolveDynamicPath(component, configurationKeyPath);
+          if (!configRes.ready || !configRes.path) {
+            comp[propertyKey] = undefined;
+            return;
+          }
+          const configPublisher = getPublisherFromPath(configRes.path);
+          config = readApiConfigurationFromPublisher(configPublisher);
+        } else {
+          config = resolveScopedConfiguration(component);
+        }
+        if (!config) {
+          comp[propertyKey] = undefined;
+          return;
+        }
+        const generation = ++state.requestGeneration;
+        const api = new API(config);
+        void api
+          .getDetailed<T>(resolution.path)
+          .then((payload?: ApiGetResult<T>) => {
+            if (generation !== state.requestGeneration) return;
+            comp[propertyKey] = payload;
+          });
+      };
+
+      const rebindPublisherConfig = () => {
+        if (!usesPublisherConfig || !configurationKeyPath) return;
+        detachConfigPublisher(state);
+        const configRes = resolveDynamicPath(component, configurationKeyPath);
+        if (!configRes.ready || !configRes.path) {
+          comp[propertyKey] = undefined;
+          return;
+        }
+        const publisher = getPublisherFromPath(configRes.path);
+        if (!publisher) {
+          comp[propertyKey] = undefined;
+          return;
+        }
+        const mutationHandler = () => {
+          runFetch();
+        };
+        publisher.onInternalMutation(mutationHandler);
+        state.configPublisher = publisher;
+        state.configMutationHandler = mutationHandler;
+      };
+
+      if (usesPublisherConfig) {
+        for (const dependency of mergedDynamicDependencies) {
+          const unsubscribe = registerDynamicPropertyWatcher(
+            getDynamicWatchKeys.watcherStore,
+            getDynamicWatchKeys.hooked,
+            component,
+            dependency,
+            () => rebindPublisherConfig(),
+          );
+          state.cleanupWatchers.push(unsubscribe);
+        }
+        rebindPublisherConfig();
+      } else {
+        if (isDynamicPath) {
+          for (const dependency of endpointDynamicDependencies) {
+            const unsubscribe = registerDynamicPropertyWatcher(
+              getDynamicWatchKeys.watcherStore,
+              getDynamicWatchKeys.hooked,
+              component,
+              dependency,
+              () => runFetch(),
+            );
+            state.cleanupWatchers.push(unsubscribe);
+          }
+        }
+        runFetch();
+      }
+    });
+
+    (target as ConnectedComponent).__onDisconnected__((component) => {
+      const comp = component as Record<string, unknown>;
+      const state = comp[stateKey] as ApiGetState | undefined;
+      if (!state) return;
+      detachConfigPublisher(state);
+      state.cleanupWatchers.forEach((cleanup) => cleanup());
+      state.cleanupWatchers = [];
+      state.requestGeneration++;
+      comp[propertyKey] = undefined;
+    });
+  };
+}