@supersoniks/concorde 4.2.1 → 4.3.0

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

@@ -1,242 +1,21 @@
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import {
-  bind,
   ancestorAttribute,
   onAssign,
   autoSubscribe,
   awaitConnectedAncestors,
   dispatchConnectedEvent,
 } from "@supersoniks/concorde/decorators";
-import { sub } from "@supersoniks/concorde/directives";
 import {
   PublisherManager,
   PublisherProxy,
 } from "@supersoniks/concorde/core/utils/PublisherProxy";
 import { Objects } from "@supersoniks/concorde/utils";
 import { tailwind } from "../tailwind";
+import "./decorators-demo-bind-demos";
+import "./decorators-demo-subscribe-publish-get-demos";
 
-const demoSectionClasses =
-  "my-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-0 dark:bg-neutral-900/40 px-6 py-6 md:px-8 md:py-8 space-y-4 shadow-sm";
-
-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);
-  }
-};
-
-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("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("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();
-
-/**
- * Demo component showcasing @ancestorAttribute decorator
- */
 @customElement("demo-ancestor-attribute")
 export class DemoAncestorAttribute extends LitElement {
   @ancestorAttribute("dataProvider")
@@ -261,192 +40,6 @@ export class DemoAncestorAttribute extends LitElement {
   }
 }
 
-/**
- * Demo component showcasing @bind decorator
- */
-@customElement("demo-bind")
-export class DemoBind extends LitElement {
-  static styles = [tailwind];
-
-  @bind("demoData.firstName")
-  @state()
-  firstName = "";
-
-  @bind("demoData.lastName")
-  @state()
-  lastName: string = "";
-
-  @bind("demoData.count")
-  @state()
-  count: number = 0;
-
-  render() {
-    return html`
-      <div>
-        <sonic-button @click=${this.updateData}>Update Data</sonic-button>
-      </div>
-      <div class="p-3">
-        <p>Title: <strong>${this.firstName || "Not set"}</strong></p>
-        <p>User Name: <strong>${this.lastName || "Not set"}</strong></p>
-        <p>Number of updates: <strong>${this.count}</strong></p>
-      </div>
-    `;
-  }
-
-  updateData() {
-    const demoData = PublisherManager.get("demoData");
-    const demoUsers = PublisherManager.get("demoUsers");
-    const randomIndex = Math.floor(Math.random() * demoUsers.get().length);
-    const randomUser = demoUsers.get()[randomIndex];
-    demoData.set({
-      firstName: randomUser.firstName,
-      lastName: randomUser.lastName,
-      count: (demoData.count.get() || 0) + 1,
-    });
-  }
-}
-
-/**
- * Demo component showcasing @bind decorator with reflect option
- */
-@customElement("demo-bind-reflect")
-export class DemoBindReflect extends LitElement {
-  static styles = [tailwind];
-
-  @bind("bindReflectDemo.count", { reflect: true })
-  @state()
-  withReflect: number = 0;
-
-  @bind("bindReflectDemo.count")
-  @state()
-  withoutReflect: number = 0;
-  // initialize the publisher data
-  connectedCallback() {
-    super.connectedCallback();
-    this.resetData();
-  }
-
-  resetData() {
-    PublisherManager.get("bindReflectDemo").set({ count: 0 });
-  }
-  render() {
-    return html`
-      <div class="mb-3">
-        from publisher : ${sub("bindReflectDemo.count")} <br />
-        from component with reflect : ${this.withReflect} <br />
-        from component without reflect : ${this.withoutReflect}
-      </div>
-      <sonic-button @click=${() => this.withReflect++}
-        >Increment with reflect</sonic-button
-      >
-      <sonic-button @click=${() => this.withoutReflect++}
-        >Increment without reflect</sonic-button
-      >
-      <sonic-button @click=${this.resetData}>Reset publisher data</sonic-button>
-    `;
-  }
-}
-
-/**
- * Demo component showcasing @bind decorator with dynamic dataProvider/id
- */
-@customElement("demo-bind-dynamic")
-export class DemoBindDynamic extends LitElement {
-  static styles = [tailwind];
-
-  @property({ type: String })
-  dataProvider: "demoUsers" | "demoUsersAlt" = "demoUsers";
-
-  @property({ type: Number })
-  userIndex: number = 1;
-
-  @bind("${dataProvider}.${userIndex}")
-  @state()
-  user: any = {};
-
-  updateUserIndex(e: Event) {
-    this.userIndex = parseInt((e.target as HTMLInputElement).value);
-  }
-
-  updateDataProvider(e: Event) {
-    this.dataProvider = (e.target as HTMLSelectElement).value as
-      | "demoUsers"
-      | "demoUsersAlt";
-  }
-
-  updateCurrentUserData() {
-    const usersPublisher = PublisherManager.get(this.dataProvider);
-    const userPublisher = Objects.traverse(usersPublisher, [
-      String(this.userIndex),
-    ]) as PublisherProxy;
-
-    if (userPublisher) {
-      // Générer de nouvelles données aléatoires
-      const randomNames = [
-        { firstName: "Alice", lastName: "Wonder" },
-        { firstName: "Bob", lastName: "Builder" },
-        { firstName: "Charlie", lastName: "Chaplin" },
-        { firstName: "Diana", lastName: "Prince" },
-        { firstName: "Eve", lastName: "Adams" },
-      ];
-
-      const randomName =
-        randomNames[Math.floor(Math.random() * randomNames.length)];
-      const randomEmail = `${randomName.firstName.toLowerCase()}.${randomName.lastName.toLowerCase()}@example.com`;
-
-      // Mettre à jour l'utilisateur directement
-      const currentUser = userPublisher.get() || {};
-      userPublisher.set({
-        ...currentUser,
-        firstName: randomName.firstName,
-        lastName: randomName.lastName,
-        email: randomEmail,
-      });
-    }
-  }
-
-  render() {
-    return html`
-      <div class="flex flex-col gap-2">
-        <sonic-select
-          .value=${this.dataProvider}
-          label="Users set"
-          @change=${this.updateDataProvider}
-        >
-          <option value="demoUsers">First set of users</option>
-          <option value="demoUsersAlt">Second set of users</option>
-        </sonic-select>
-        <sonic-input
-          type="number"
-          .value=${this.userIndex}
-          @input=${this.updateUserIndex}
-          min="0"
-          max="9"
-          label="Index"
-          class="block"
-        >
-        </sonic-input>
-        <sonic-button @click=${this.updateCurrentUserData}
-          >Update current user data</sonic-button
-        >
-        <div class="flex flex-col gap-2 border p-2">
-          <div>
-            <sonic-icon name="user" library="heroicons"></sonic-icon>
-            ${this.user?.firstName} ${this.user?.lastName}
-          </div>
-          <div>
-            <sonic-icon name="envelope" library="heroicons"></sonic-icon>
-            ${this.user?.email}
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-/**
- * Demo component showcasing @onAssign decorator
- */
 @customElement("demo-on-assign")
 export class DemoOnAssign extends LitElement {
   static styles = [tailwind];
@@ -498,9 +91,6 @@ export class DemoOnAssign extends LitElement {
   }
 }
 
-/**
- * Demo component showcasing @onAssign decorator with dynamic paths
- */
 @customElement("demo-on-assign-dynamic")
 export class DemoOnAssignDynamic extends LitElement {
   static styles = [tailwind];
@@ -516,7 +106,7 @@ export class DemoOnAssignDynamic extends LitElement {
 
   @onAssign(
     "${dataProvider}.${userIndex}",
-    "${dataProvider}Settings.${userIndex}"
+    "${dataProvider}Settings.${userIndex}",
   )
   handleUserDataReady(user: any, settings: any) {
     this.user = user;
@@ -536,7 +126,7 @@ export class DemoOnAssignDynamic extends LitElement {
   updateCurrentUserData() {
     const usersPublisher = PublisherManager.get(this.dataProvider);
     const settingsPublisher = PublisherManager.get(
-      `${this.dataProvider}Settings`
+      `${this.dataProvider}Settings`,
     );
     const userPublisher = Objects.traverse(usersPublisher, [
       String(this.userIndex),
@@ -546,7 +136,6 @@ export class DemoOnAssignDynamic extends LitElement {
     ]) as PublisherProxy;
 
     if (userPublisher && settingPublisher) {
-      // Générer de nouvelles données aléatoires
       const randomNames = [
         { firstName: "Alice", lastName: "Wonder" },
         { firstName: "Bob", lastName: "Builder" },
@@ -565,7 +154,6 @@ export class DemoOnAssignDynamic extends LitElement {
       const randomLanguage =
         randomLanguages[Math.floor(Math.random() * randomLanguages.length)];
 
-      // Mettre à jour l'utilisateur directement
       const currentUser = userPublisher.get() || {};
       userPublisher.set({
         ...currentUser,
@@ -574,7 +162,6 @@ export class DemoOnAssignDynamic extends LitElement {
         email: randomEmail,
       });
 
-      // Mettre à jour les settings directement
       settingPublisher.set({
         theme: randomTheme,
         language: randomLanguage,
@@ -621,9 +208,6 @@ export class DemoOnAssignDynamic extends LitElement {
   }
 }
 
-/**
- * Demo component showcasing @autoSubscribe decorator
- */
 @customElement("demo-auto-subscribe")
 export class DemoAutoSubscribe extends LitElement {
   static styles = [tailwind];
@@ -660,10 +244,6 @@ export class DemoAutoSubscribe extends LitElement {
   }
 }
 
-/**
- * Parent component for awaitConnectedAncestors demo.
- * Registered via customElements.define() on button click (not @customElement).
- */
 @dispatchConnectedEvent()
 export class DemoWaitAncestorContainer extends LitElement {
   render() {
@@ -671,10 +251,6 @@ export class DemoWaitAncestorContainer extends LitElement {
   }
 }
 
-/**
- * Demo component showcasing @awaitConnectedAncestors decorator (child).
- * Uses CSS selector: tag + attribute.
- */
 @customElement("demo-wait-ancestor-value")
 @awaitConnectedAncestors("demo-wait-ancestor-container[dataProvider]")
 export class DemoWaitAncestorValue extends LitElement {
@@ -699,10 +275,6 @@ export class DemoWaitAncestorValue extends LitElement {
   }
 }
 
-/**
- * Demo section with button to register parent component on demand.
- * Demonstrates that the child waits until the parent is defined.
- */
 @customElement("demo-wait-ancestors-section")
 export class DemoWaitAncestorsSection extends LitElement {
   static styles = [tailwind];
@@ -716,7 +288,7 @@ export class DemoWaitAncestorsSection extends LitElement {
     }
     customElements.define(
       "demo-wait-ancestor-container",
-      DemoWaitAncestorContainer
+      DemoWaitAncestorContainer,
     );
     this.parentRegistered = true;
   }
@@ -740,8 +312,6 @@ export class DemoWaitAncestorsSection extends LitElement {
   }
 }
 
-// --- Multiple ancestors demo ---
-
 @dispatchConnectedEvent()
 export class DemoWaitAncestorOuter extends LitElement {
   render() {
@@ -775,15 +345,13 @@ export class DemoWaitAncestorValueMulti extends LitElement {
         DataProvider from ancestor:
         <strong>${this.dataProvider || "—"}</strong>
       </p>
-      <p>Initialized at: ${this.initializedAt || "(waiting for both ancestors…)"}</p>
+      <p>
+        Initialized at: ${this.initializedAt || "(waiting for both ancestors…)"}
+      </p>
     `;
   }
 }
 
-/**
- * Demo: child waits for multiple ancestors.
- * Register outer first, then inner — child initializes only when both are ready.
- */
 @customElement("demo-wait-ancestors-multi-section")
 export class DemoWaitAncestorsMultiSection extends LitElement {
   static styles = [tailwind];
@@ -832,8 +400,6 @@ export class DemoWaitAncestorsMultiSection extends LitElement {
   }
 }
 
-// --- Ancestors already connected demo ---
-
 @customElement("demo-wait-ancestor-ready")
 @dispatchConnectedEvent()
 export class DemoWaitAncestorReady extends LitElement {
@@ -857,19 +423,12 @@ export class DemoWaitAncestorValueReady extends LitElement {
 
   render() {
     return html`
-      <p>
-        DataProvider: <strong>${this.dataProvider || "—"}</strong>
-      </p>
+      <p>DataProvider: <strong>${this.dataProvider || "—"}</strong></p>
       <p>Initialized at: ${this.initializedAt}</p>
     `;
   }
 }
 
-/**
- * Demo: ancestors already connected at load.
- * Parent is defined with @customElement. Child is added dynamically — it
- * initializes immediately because the ancestor is already ready.
- */
 @customElement("demo-wait-ancestors-ready-section")
 export class DemoWaitAncestorsReadySection extends LitElement {
   static styles = [tailwind];
@@ -884,8 +443,8 @@ export class DemoWaitAncestorsReadySection extends LitElement {
     return html`
       <div class="space-y-4">
         <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          Parent is defined at load. Click to add child dynamically — it
-          initializes immediately because the ancestor is already ready.
+          Parent défini au chargement. Ajout dynamique de l’enfant — initialisation
+          immédiate si l’ancêtre est prêt.
         </p>
         <sonic-button ?disabled=${this.childInDom} @click=${this.addChild}>
           ${this.childInDom ? "Child added" : "Add child dynamically"}
@@ -900,10 +459,6 @@ export class DemoWaitAncestorsReadySection extends LitElement {
   }
 }
 
-/**
- * Demo: parent and child both in DOM from start, parent defined at load.
- * Child initializes immediately (no delay) because ancestor is already ready.
- */
 @customElement("demo-wait-ancestors-static-section")
 export class DemoWaitAncestorsStaticSection extends LitElement {
   static styles = [tailwind];
@@ -911,8 +466,7 @@ export class DemoWaitAncestorsStaticSection extends LitElement {
   render() {
     return html`
       <p class="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
-        Parent and child both in DOM from load. Child initializes immediately
-        because the ancestor is already defined and connected.
+        Parent et enfant présents dès le chargement — pas de délai.
       </p>
       <demo-wait-ancestor-ready dataProvider="waitAncestorDemo">
         <demo-wait-ancestor-value-ready></demo-wait-ancestor-value-ready>
@@ -920,4 +474,3 @@ export class DemoWaitAncestorsStaticSection extends LitElement {
     `;
   }
 }
-

package/src/docs/navigation/navigation.ts

@@ -54,10 +54,6 @@ export class DocsNavigation extends LitElement {
       label: "Submit",
       href: "#core/components/functional/submit/submit.md/submit",
     },
-    {
-      label: "Submit",
-      href: "#core/components/functional/submit/submit.md/submit",
-    },
     //{label: "Subscriber", href: "#core/components/functional/subscriber/subscriber.md/subscriber"},
     {
       label: "Value",
@@ -129,26 +125,47 @@ export class DocsNavigation extends LitElement {
       label: "Tooltip",
       href: "#core/components/ui/tooltip/tooltip.md/tooltip",
     },
-    "Misc",
+    "Decorators",
     {
       label: "@ancestorAttribute",
-      href: "#docs/_misc/ancestor-attribute.md/ancestor-attribute",
+      href: "#docs/_decorators/ancestor-attribute.md/ancestor-attribute",
     },
     {
       label: "@bind",
-      href: "#docs/_misc/bind.md/bind",
+      href: "#docs/_decorators/bind.md/bind",
+    },
+    {
+      label: "@subscribe",
+      href: "#docs/_decorators/subscribe.md/subscribe",
+    },
+    {
+      label: "@publish",
+      href: "#docs/_decorators/publish.md/publish",
+    },
+    {
+      label: "@get",
+      href: "#docs/_decorators/get.md/get",
     },
     {
       label: "@onAssign",
-      href: "#docs/_misc/on-assign.md/on-assign",
+      href: "#docs/_decorators/on-assign.md/on-assign",
     },
     {
       label: "@autoSubscribe",
-      href: "#docs/_misc/auto-subscribe.md/auto-subscribe",
+      href: "#docs/_decorators/auto-subscribe.md/auto-subscribe",
     },
     {
       label: "@awaitConnectedAncestors",
-      href: "#docs/_misc/wait-for-ancestors.md/wait-for-ancestors",
+      href: "#docs/_decorators/wait-for-ancestors.md/wait-for-ancestors",
+    },
+    "Misc",
+    {
+      label: "DataProviderKey",
+      href: "#docs/_misc/dataProviderKey.md/dataProviderKey",
+    },
+    {
+      label: "Endpoint",
+      href: "#docs/_misc/endpoint.md/endpoint",
     },
     {
       label: "Templates Demo",