@supersoniks/concorde 4.6.0 → 4.7.0

package/src/docs/example/decorators-demo-init.ts

@@ -1,228 +1,2 @@
-import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
-
-export const ensurePublisherValue = <T>(
-  publisherId: string,
-  defaultValue: T,
-): void => {
-  const publisher = PublisherManager.get(publisherId);
-  const currentValue =
-    typeof publisher.get === "function" ? publisher.get() : undefined;
-
-  const isUnset =
-    currentValue === undefined ||
-    currentValue === null ||
-    (typeof currentValue === "object" &&
-      !Array.isArray(currentValue) &&
-      Object.keys(currentValue).length === 0);
-
-  if (isUnset) {
-    publisher.set(defaultValue as T);
-  }
-};
-
-export const initializeDecoratorsDemoData = () => {
-  ensurePublisherValue("demoData", {
-    title: "Initial Title",
-    user: { name: "Initial User" },
-    count: 0,
-  });
-
-  ensurePublisherValue("demoUser", {
-    name: "Demo User",
-    email: "demo@example.com",
-  });
-
-  ensurePublisherValue("demoSettings", {
-    theme: "light",
-    language: "en",
-  });
-
-  ensurePublisherValue("demoUserSettings", {
-    theme: "light",
-    language: "en",
-  });
-
-  ensurePublisherValue("autoValue1", 10);
-  ensurePublisherValue("autoValue2", 20);
-  ensurePublisherValue("waitAncestorDemo", {
-    message: "Context from ancestor",
-  });
-
-  ensurePublisherValue("combinedData", { title: "Combined Title" });
-  ensurePublisherValue("combinedUser", { name: "Combined User" });
-  ensurePublisherValue("combinedSettings", { theme: "dark" });
-
-  ensurePublisherValue("reflectData", {
-    title: "Initial Reflected Title",
-    count: 0,
-  });
-
-  ensurePublisherValue("publishDemo", {
-    email: "",
-    message: "",
-  });
-
-  ensurePublisherValue("dynamicProfiles", {
-    alpha: { info: { title: "Profil Alpha" } },
-    beta: { info: { title: "Profil Beta" } },
-  });
-
-  ensurePublisherValue("dynamicProfilesAlt", {
-    alpha: { info: { title: "Profil Alpha (Alt)" } },
-    beta: { info: { title: "Profil Beta (Alt)" } },
-  });
-
-  ensurePublisherValue("demoUsers", [
-    {
-      id: 1,
-      firstName: "Alice",
-      lastName: "Smith",
-      email: "alice.smith@example.com",
-    },
-    {
-      id: 2,
-      firstName: "Bob",
-      lastName: "Johnson",
-      email: "bob.johnson@example.com",
-    },
-    {
-      id: 3,
-      firstName: "Carol",
-      lastName: "Williams",
-      email: "carol.williams@example.com",
-    },
-    {
-      id: 4,
-      firstName: "David",
-      lastName: "Brown",
-      email: "david.brown@example.com",
-    },
-    {
-      id: 5,
-      firstName: "Eve",
-      lastName: "Jones",
-      email: "eve.jones@example.com",
-    },
-    {
-      id: 6,
-      firstName: "Frank",
-      lastName: "Garcia",
-      email: "frank.garcia@example.com",
-    },
-    {
-      id: 7,
-      firstName: "Grace",
-      lastName: "Miller",
-      email: "grace.miller@example.com",
-    },
-    {
-      id: 8,
-      firstName: "Henry",
-      lastName: "Davis",
-      email: "henry.davis@example.com",
-    },
-    {
-      id: 9,
-      firstName: "Ivy",
-      lastName: "Martinez",
-      email: "ivy.martinez@example.com",
-    },
-    {
-      id: 10,
-      firstName: "Jack",
-      lastName: "Taylor",
-      email: "jack.taylor@example.com",
-    },
-  ]);
-
-  ensurePublisherValue("demoUsersAlt", [
-    {
-      id: 11,
-      firstName: "Sophie",
-      lastName: "Lindquist",
-      email: "sophie.lindquist@example.com",
-    },
-    {
-      id: 12,
-      firstName: "Mateo",
-      lastName: "Ortega",
-      email: "mateo.ortega@example.com",
-    },
-    {
-      id: 13,
-      firstName: "Jin",
-      lastName: "Park",
-      email: "jin.park@example.com",
-    },
-    {
-      id: 14,
-      firstName: "Fatima",
-      lastName: "El-Sayed",
-      email: "fatima.el-sayed@example.com",
-    },
-    {
-      id: 15,
-      firstName: "Lars",
-      lastName: "Johansson",
-      email: "lars.johansson@example.com",
-    },
-    {
-      id: 16,
-      firstName: "Amara",
-      lastName: "Singh",
-      email: "amara.singh@example.com",
-    },
-    {
-      id: 17,
-      firstName: "Zuri",
-      lastName: "Okafor",
-      email: "zuri.okafor@example.com",
-    },
-    {
-      id: 18,
-      firstName: "Luca",
-      lastName: "Rossi",
-      email: "luca.rossi@example.com",
-    },
-    {
-      id: 19,
-      firstName: "Ava",
-      lastName: "Murphy",
-      email: "ava.murphy@example.com",
-    },
-    {
-      id: 20,
-      firstName: "Noah",
-      lastName: "Keller",
-      email: "noah.keller@example.com",
-    },
-  ]);
-
-  ensurePublisherValue("demoUsersSettings", [
-    { theme: "light", language: "en" },
-    { theme: "dark", language: "fr" },
-    { theme: "auto", language: "es" },
-    { theme: "light", language: "en" },
-    { theme: "dark", language: "fr" },
-    { theme: "auto", language: "es" },
-    { theme: "light", language: "en" },
-    { theme: "dark", language: "fr" },
-    { theme: "auto", language: "es" },
-    { theme: "light", language: "en" },
-  ]);
-
-  ensurePublisherValue("demoUsersAltSettings", [
-    { theme: "dark", language: "de" },
-    { theme: "light", language: "it" },
-    { theme: "auto", language: "ja" },
-    { theme: "dark", language: "pt" },
-    { theme: "light", language: "ru" },
-    { theme: "auto", language: "zh" },
-    { theme: "dark", language: "ar" },
-    { theme: "light", language: "sv" },
-    { theme: "auto", language: "nl" },
-    { theme: "dark", language: "pl" },
-  ]);
-};
-
-initializeDecoratorsDemoData();
+/** Default doc demo store values — keys in @docs-provider-keys.ts, writes via `set()`. */
+import "./docs-provider-keys";

package/src/docs/example/decorators-demo-subscribe-publish-get-demos.ts

@@ -7,7 +7,15 @@ import type {
 } from "@supersoniks/concorde/core/utils/api";
 import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
 import { sub } from "@supersoniks/concorde/directives";
-import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import {
+  get as storeGet,
+  set,
+} from "@supersoniks/concorde/core/utils/PublisherProxy";
+import { publishDemoKey } from "./docs-provider-keys";
+import {
+  docsDemoDynApiConfAKey,
+  docsDemoDynApiConfBKey,
+} from "./decorators-demo-geo";
 import { tailwind } from "../tailwind";
 import "./decorators-demo-init";
 import {
@@ -24,8 +32,6 @@ type PublishDemoData = {
   message: string;
 };
 
-const publishDemoKey = new DataProviderKey<PublishDemoData>("publishDemo");
-
 @customElement("demo-publish")
 export class DemoPublish extends LitElement {
   static styles = [tailwind];
@@ -40,7 +46,7 @@ export class DemoPublish extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    PublisherManager.get("publishDemo").set({ email: "", message: "" });
+    set(publishDemoKey, { email: "", message: "" });
   }
 
   render() {
@@ -72,8 +78,8 @@ export class DemoPublish extends LitElement {
           >
             Published values (from sub):
           </p>
-          <p>Email: ${sub("publishDemo.email") || "—"}</p>
-          <p>Message: ${sub("publishDemo.message") || "—"}</p>
+          <p>Email: ${sub(publishDemoKey.email) || "—"}</p>
+          <p>Message: ${sub(publishDemoKey.message) || "—"}</p>
         </div>
       </div>
     `;
@@ -95,7 +101,7 @@ export class DemoApiGet extends LitElement {
       <div class="space-y-2">
         <p class="text-sm text-neutral-600 dark:text-neutral-400">
           <code>@get</code> — même service que
-          <code>sonic-queue</code> (<code>https://geo.api.gouv.fr/</code>).
+          <code>sonic-queue</code> (<code>/docs-mock-api/geo/</code>).
           Propriété typée <code>ApiGetResult&lt;T&gt;</code>.
         </p>
         ${status != null
@@ -138,10 +144,10 @@ export class DemoApiGetConfigurationKey extends LitElement {
   geoApiPayloadDyn?: ApiGetResult<GeoCommuneRow[]>;
 
   private touchCurrentConfigPublisher() {
-    const id = `docsDemoDynApiConf${this.configSlot}`;
-    const pub = PublisherManager.get(id);
-    const cur = pub.get() as APIConfiguration;
-    pub.set({
+    const key =
+      this.configSlot === "A" ? docsDemoDynApiConfAKey : docsDemoDynApiConfBKey;
+    const cur = storeGet(key) as APIConfiguration;
+    set(key, {
       ...cur,
       blockUntilDone: !cur.blockUntilDone,
     });
@@ -275,6 +281,41 @@ export class DemoApiGetPublishSubscribe extends LitElement {
 
 type User = { firstName: string; lastName: string; email: string };
 
+const demoUsersSubKey = new DataProviderKey<User, { userIndex: number }>(
+  "demoUsers.${userIndex}",
+);
+
+@customElement("demo-sub-template")
+export class DemoSubTemplate extends LitElement {
+  static styles = [tailwind];
+
+  @property({ type: Number })
+  userIndex = 0;
+
+  render() {
+    return html`
+      <div class="space-y-4">
+        <p class="text-sm text-neutral-600 dark:text-neutral-400">
+          <code>sub(demoUsersSubKey.email)</code> — same dynamic path as
+          <code>@subscribe</code>, reactive in the template.
+        </p>
+        <sonic-input
+          type="number"
+          .value=${String(this.userIndex)}
+          @input=${(e: Event) =>
+            (this.userIndex = parseInt((e.target as HTMLInputElement).value))}
+          min="0"
+          max="9"
+          label="User index"
+        ></sonic-input>
+        <p class="rounded border border-neutral-200 dark:border-neutral-700 p-3">
+          Email: <strong>${sub(demoUsersSubKey.email) || "—"}</strong>
+        </p>
+      </div>
+    `;
+  }
+}
+
 @customElement("demo-subscribe-dynamic")
 export class DemoSubscribeDynamic extends LitElement {
   static styles = [tailwind];
@@ -336,9 +377,8 @@ export class DemoHandle extends LitElement {
   }
 
   incrementCount() {
-    const publisher = PublisherManager.get("demoData");
-    const data = publisher.get() as DemoCounterData;
-    publisher.set({ ...data, count: data.count + 1 });
+    const data = storeGet(demoDataKey);
+    set(demoDataKey, { ...data, count: data.count + 1 });
   }
 
   render() {

package/src/docs/example/decorators-demo.ts

@@ -7,11 +7,20 @@ import {
   awaitConnectedAncestors,
   dispatchConnectedEvent,
 } from "@supersoniks/concorde/decorators";
-import {
-  PublisherManager,
-  PublisherProxy,
-} from "@supersoniks/concorde/core/utils/PublisherProxy";
+import type { PublisherProxy } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import { get, set } from "@supersoniks/concorde/core/utils/PublisherProxy";
 import { Objects } from "@supersoniks/concorde/utils";
+import {
+  autoValue1Key,
+  autoValue2Key,
+  demoUserKey,
+  demoUserSettingsKey,
+  demoUsersAltKey,
+  demoUsersAltSettingsKey,
+  demoUsersKey,
+  demoUsersSettingsKey,
+  waitAncestorDemoKey,
+} from "./docs-provider-keys";
 import { tailwind } from "../tailwind";
 import "./decorators-demo-bind-demos";
 import "./decorators-demo-subscribe-publish-get-demos";
@@ -76,15 +85,12 @@ export class DemoOnAssign extends LitElement {
   }
 
   updateData() {
-    const user = PublisherManager.get("demoUser");
-    const userSettings = PublisherManager.get("demoUserSettings");
     const userNumber = Math.floor(Math.random() * 100);
-    user.set({
+    set(demoUserKey, {
       name: `User n°${userNumber}`,
       email: `user-${userNumber}@example.com`,
     });
-
-    userSettings.set({
+    set(demoUserSettingsKey, {
       theme: ["light", "dark", "auto"][Math.floor(Math.random() * 3)],
       language: ["en", "fr", "es"][Math.floor(Math.random() * 3)],
     });
@@ -96,7 +102,8 @@ export class DemoOnAssignDynamic extends LitElement {
   static styles = [tailwind];
 
   @property({ type: String })
-  dataProvider: "demoUsers" | "demoUsersAlt" = "demoUsers";
+  dataProvider: typeof demoUsersKey.path | typeof demoUsersAltKey.path =
+    demoUsersKey.path;
 
   @property({ type: Number })
   userIndex: number = 0;
@@ -119,62 +126,56 @@ export class DemoOnAssignDynamic extends LitElement {
 
   updateDataProvider(e: Event) {
     this.dataProvider = (e.target as HTMLSelectElement).value as
-      | "demoUsers"
-      | "demoUsersAlt";
+      | typeof demoUsersKey.path
+      | typeof demoUsersAltKey.path;
   }
 
   updateCurrentUserData() {
-    const usersPublisher = PublisherManager.get(this.dataProvider);
-    const settingsPublisher = PublisherManager.get(
-      `${this.dataProvider}Settings`,
-    );
-    const userPublisher = Objects.traverse(usersPublisher, [
-      String(this.userIndex),
-    ]) as PublisherProxy;
-    const settingPublisher = Objects.traverse(settingsPublisher, [
-      String(this.userIndex),
-    ]) as PublisherProxy;
-
-    if (userPublisher && settingPublisher) {
-      const randomNames = [
-        { firstName: "Alice", lastName: "Wonder" },
-        { firstName: "Bob", lastName: "Builder" },
-        { firstName: "Charlie", lastName: "Chaplin" },
-        { firstName: "Diana", lastName: "Prince" },
-        { firstName: "Eve", lastName: "Adams" },
-      ];
-      const randomThemes = ["light", "dark", "auto"];
-      const randomLanguages = ["en", "fr", "es", "de", "it"];
-
-      const randomName =
-        randomNames[Math.floor(Math.random() * randomNames.length)];
-      const randomEmail = `${randomName.firstName.toLowerCase()}.${randomName.lastName.toLowerCase()}@example.com`;
-      const randomTheme =
-        randomThemes[Math.floor(Math.random() * randomThemes.length)];
-      const randomLanguage =
-        randomLanguages[Math.floor(Math.random() * randomLanguages.length)];
-
-      const currentUser = userPublisher.get() || {};
-      userPublisher.set({
-        ...currentUser,
-        firstName: randomName.firstName,
-        lastName: randomName.lastName,
-        email: randomEmail,
-      });
-
-      settingPublisher.set({
-        theme: randomTheme,
-        language: randomLanguage,
-      });
-    }
+    const usersKey =
+      this.dataProvider === demoUsersAltKey.path ? demoUsersAltKey : demoUsersKey;
+    const settingsKey =
+      this.dataProvider === demoUsersAltKey.path
+        ? demoUsersAltSettingsKey
+        : demoUsersSettingsKey;
+    const users = [...get(usersKey)];
+    const settings = [...get(settingsKey)];
+    const idx = this.userIndex;
+    if (!users[idx] || !settings[idx]) return;
+
+    const randomNames = [
+      { firstName: "Alice", lastName: "Wonder" },
+      { firstName: "Bob", lastName: "Builder" },
+      { firstName: "Charlie", lastName: "Chaplin" },
+      { firstName: "Diana", lastName: "Prince" },
+      { firstName: "Eve", lastName: "Adams" },
+    ];
+    const randomThemes = ["light", "dark", "auto"];
+    const randomLanguages = ["en", "fr", "es", "de", "it"];
+    const randomName =
+      randomNames[Math.floor(Math.random() * randomNames.length)];
+    const randomEmail = `${randomName.firstName.toLowerCase()}.${randomName.lastName.toLowerCase()}@example.com`;
+
+    users[idx] = {
+      ...users[idx],
+      firstName: randomName.firstName,
+      lastName: randomName.lastName,
+      email: randomEmail,
+    };
+    settings[idx] = {
+      theme: randomThemes[Math.floor(Math.random() * randomThemes.length)],
+      language:
+        randomLanguages[Math.floor(Math.random() * randomLanguages.length)],
+    };
+    set(usersKey, users);
+    set(settingsKey, settings);
   }
 
   render() {
     return html`
       <div class="flex flex-col gap-2">
         <sonic-select label="Users set" @change=${this.updateDataProvider}>
-          <option value="demoUsers">First set of users</option>
-          <option value="demoUsersAlt">Second set of users</option>
+          <option value=${demoUsersKey.path}>First set of users</option>
+          <option value=${demoUsersAltKey.path}>Second set of users</option>
         </sonic-select>
         <sonic-input
           type="number"
@@ -217,8 +218,8 @@ export class DemoAutoSubscribe extends LitElement {
 
   @autoSubscribe()
   updateDisplay() {
-    const value1 = PublisherManager.get("autoValue1").get() || 0;
-    const value2 = PublisherManager.get("autoValue2").get() || 0;
+    const value1 = get(autoValue1Key) || 0;
+    const value2 = get(autoValue2Key) || 0;
 
     this.computedValue = value1 + value2;
     this.displayText = `${value1} + ${value2} = ${this.computedValue}`;
@@ -228,19 +229,19 @@ export class DemoAutoSubscribe extends LitElement {
     return html`
       <p><strong>${this.displayText}</strong></p>
       <div>
-        <sonic-button @click=${() => this.randomizeValue("autoValue1")}>
-          Randomize Value 1
-        </sonic-button>
-        <sonic-button @click=${() => this.randomizeValue("autoValue2")}>
+        <sonic-button @click=${() => this.randomizeValue("autoValue1")}
+          >Randomize Value 1</sonic-button
+        >
+        <sonic-button @click=${() => this.randomizeValue("autoValue2")}
           Randomize Value 2
         </sonic-button>
       </div>
     `;
   }
 
-  randomizeValue(publisherId: string) {
-    const value = PublisherManager.get(publisherId);
-    value.set(Math.floor(Math.random() * 100));
+  randomizeValue(which: "autoValue1" | "autoValue2") {
+    const key = which === "autoValue1" ? autoValue1Key : autoValue2Key;
+    set(key, Math.floor(Math.random() * 100));
   }
 }
 
@@ -304,7 +305,7 @@ export class DemoWaitAncestorsSection extends LitElement {
             ? "Parent already registered"
             : "Register parent component"}
         </sonic-button>
-        <demo-wait-ancestor-container dataProvider="waitAncestorDemo">
+        <demo-wait-ancestor-container dataProvider=${waitAncestorDemoKey.path}>
           <demo-wait-ancestor-value></demo-wait-ancestor-value>
         </demo-wait-ancestor-container>
       </div>
@@ -391,7 +392,7 @@ export class DemoWaitAncestorsMultiSection extends LitElement {
           </sonic-button>
         </div>
         <demo-wait-ancestor-outer>
-          <demo-wait-ancestor-inner dataProvider="waitAncestorDemo">
+          <demo-wait-ancestor-inner dataProvider=${waitAncestorDemoKey.path}>
             <demo-wait-ancestor-value-multi></demo-wait-ancestor-value-multi>
           </demo-wait-ancestor-inner>
         </demo-wait-ancestor-outer>
@@ -449,7 +450,7 @@ export class DemoWaitAncestorsReadySection extends LitElement {
         <sonic-button ?disabled=${this.childInDom} @click=${this.addChild}>
           ${this.childInDom ? "Child added" : "Add child dynamically"}
         </sonic-button>
-        <demo-wait-ancestor-ready dataProvider="waitAncestorDemo">
+        <demo-wait-ancestor-ready dataProvider=${waitAncestorDemoKey.path}>
           ${this.childInDom
             ? html`<demo-wait-ancestor-value-ready></demo-wait-ancestor-value-ready>`
             : html``}
@@ -468,7 +469,7 @@ export class DemoWaitAncestorsStaticSection extends LitElement {
       <p class="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
         Parent et enfant présents dès le chargement — pas de délai.
       </p>
-      <demo-wait-ancestor-ready dataProvider="waitAncestorDemo">
+      <demo-wait-ancestor-ready dataProvider=${waitAncestorDemoKey.path}>
         <demo-wait-ancestor-value-ready></demo-wait-ancestor-value-ready>
       </demo-wait-ancestor-ready>
     `;