@supersoniks/concorde 5.1.1 → 5.1.3-immutable.1

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

@@ -1,183 +1,178 @@
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { get, handle, publish, subscribe } from "@supersoniks/concorde/decorators";
-import type { ApiResult } from "@supersoniks/concorde/core/utils/api";
-import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
-import { sub } from "@supersoniks/concorde/directives";
 import {
-  dp,
-  get as storeGet,
-  set,
-} from "@supersoniks/concorde/core/utils/PublisherProxy";
-import { publishDemoKey } from "./docs-provider-keys";
+  DataProviderKey,
+  get,
+  handle,
+  publish,
+  subscribe,
+  type ApiResult,
+} from "@supersoniks/concorde/decorators";
+import { sub } from "@supersoniks/concorde/directives";
+import { dp, get as storeGet, set } from "@supersoniks/concorde/utils";
 import { tailwind } from "../tailwind";
 import "./decorators-demo-init";
 import {
-  docsDemoGeoApiConfigurationKey,
-  geoCommunesApiGetEndpoint,
-  geoCommunesApiGetEndpointDynamic,
-  geoCommunesApiGetPublishKey,
-  type GeoCommuneRow,
+  departuresEndpoint,
+  departuresPayloadKey,
+  flightsApiConfigurationKey,
+  flightsByDirectionEndpoint,
+  type Flight,
+  type FlightBoard,
+  type FlightDirection,
 } from "./decorators-demo-geo";
 
-type PublishDemoData = {
-  email: string;
-  message: string;
-};
+/* ---------------------------------------------------------------- data */
 
-const geoCommunesGet = get(
-  geoCommunesApiGetEndpoint,
-  docsDemoGeoApiConfigurationKey,
-);
-const geoCommunesMethodTriggerKey = new DataProviderKey<number>(
-  "docsDemoGeoCommunesMethodTrigger",
+type OnBoard = { name: string; role: string; seat: string };
+
+/** People on board flight CN 001 (CDG → JFK). */
+const onBoardKey = new DataProviderKey<OnBoard[]>("demoOnBoard");
+set(onBoardKey, [
+  { name: "Captain Leo Marchand", role: "Captain", seat: "Cockpit" },
+  { name: "Ada Lindqvist", role: "Passenger", seat: "1A" },
+  { name: "Grace Okafor", role: "Flight engineer", seat: "Cockpit" },
+  { name: "Noah Keller", role: "Cabin crew", seat: "Galley" },
+  { name: "Mateo Ortega", role: "Passenger", seat: "4C" },
+]);
+
+/** One person, picked by `${seatIndex}` on the host component. */
+const personKey = new DataProviderKey<OnBoard, { seatIndex: number }>(
+  "demoOnBoard.${seatIndex}",
 );
 
+type CheckIn = { passenger: string; seat: string };
+const checkInKey = new DataProviderKey<CheckIn>("demoCheckIn");
+
+type Cockpit = { altitude: number };
+const cockpitKey = new DataProviderKey<Cockpit>("demoCockpit");
+set(cockpitKey, { altitude: 50000 });
+
+const seatIndexInput = (host: { seatIndex: number }) => html`
+  <sonic-input
+    type="number"
+    .value=${String(host.seatIndex)}
+    @input=${(e: Event) =>
+      (host.seatIndex = parseInt((e.target as HTMLInputElement).value))}
+    min="0"
+    max="4"
+    label="Seat index"
+  ></sonic-input>
+`;
+
+const flightList = (flights: Flight[] | undefined) =>
+  !flights
+    ? html`<p class="text-sm text-neutral-500">Loading…</p>`
+    : flights.length === 0
+      ? html`<p class="text-sm text-neutral-500">No flight</p>`
+      : html`
+          <ul class="grid gap-1 sm:grid-cols-2">
+            ${flights.map(
+              (f) => html`<li class="text-sm">
+                <strong>${f.code}</strong> ${f.city}
+                <span class="text-neutral-500">· ${f.time} · ${f.status}</span>
+              </li>`,
+            )}
+          </ul>
+        `;
+
+/* ------------------------------------------------------------- @publish */
+
 @customElement("demo-publish")
 export class DemoPublish extends LitElement {
   static styles = [tailwind];
 
-  @publish(publishDemoKey.email)
+  @publish(checkInKey.passenger)
   @state()
-  email = "";
+  passenger = "Ada Lindqvist";
 
-  @publish(publishDemoKey.message)
+  @publish(checkInKey.seat)
   @state()
-  message = "";
-
-  connectedCallback() {
-    super.connectedCallback();
-    set(publishDemoKey, { email: "", message: "" });
-  }
+  seat = "1A";
 
   render() {
     return html`
       <div class="space-y-4">
-        <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          Les champs publient vers le publisher ; les valeurs ci-dessous passent
-          par <code>sub()</code>.
-        </p>
         <sonic-input
-          .value=${this.email}
+          .value=${this.passenger}
           @input=${(e: Event) =>
-            (this.email = (e.target as HTMLInputElement).value)}
-          label="Email"
-          placeholder="your@email.com"
+            (this.passenger = (e.target as HTMLInputElement).value)}
+          label="Passenger"
         ></sonic-input>
         <sonic-input
-          .value=${this.message}
+          .value=${this.seat}
           @input=${(e: Event) =>
-            (this.message = (e.target as HTMLInputElement).value)}
-          label="Message"
-          placeholder="Type a message..."
+            (this.seat = (e.target as HTMLInputElement).value)}
+          label="Seat"
         ></sonic-input>
-        <div
-          class="rounded border border-neutral-200 dark:border-neutral-700 p-3"
-        >
-          <p
-            class="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1"
-          >
-            Published values (from sub):
-          </p>
-          <p>Email: ${sub(publishDemoKey.email) || "—"}</p>
-          <p>Message: ${sub(publishDemoKey.message) || "—"}</p>
-        </div>
+        <p class="rounded border border-neutral-200 dark:border-neutral-700 p-3">
+          Boarding pass: ${sub(checkInKey.passenger)} · seat
+          ${sub(checkInKey.seat)}
+        </p>
       </div>
     `;
   }
 }
 
+/* ----------------------------------------------------------------- @get */
+
+const departuresGet = get(departuresEndpoint, flightsApiConfigurationKey);
+
 @customElement("demo-api-get")
 export class DemoApiGet extends LitElement {
   static styles = [tailwind];
 
-  @geoCommunesGet
+  @departuresGet
   @state()
-  geoApiPayload?: ApiResult<GeoCommuneRow[]>;
+  departures?: ApiResult<FlightBoard>;
 
   private async refresh() {
-    await geoCommunesGet.refetch(this);
+    await departuresGet.refetch(this);
   }
 
   render() {
-    const rows = this.geoApiPayload?.result;
     return html`
       <div class="space-y-3">
-        <div class="flex flex-wrap items-center gap-3">
-          <span class="text-sm font-medium">🗺️ GET simple</span>
-          <sonic-button size="sm" @click=${this.refresh}>Rafraîchir</sonic-button>
-        </div>
-        <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          Une liste de communes chargée avec <code>@get</code>.
-        </p>
-        ${this.geoApiPayload == null
-          ? html`<p class="text-sm text-neutral-500">Chargement…</p>`
-          : !rows || rows.length === 0
-            ? html`<p class="text-sm text-neutral-500">Aucune commune</p>`
-            : html`
-                <ul class="grid gap-1 sm:grid-cols-2">
-                  ${rows.map(
-                    (c) => html`<li class="text-sm">
-                      ${c.nom} <span class="text-neutral-500">(${c.code})</span>
-                    </li>`,
-                  )}
-                </ul>
-              `}
+        <sonic-button size="sm" @click=${this.refresh}>Refresh</sonic-button>
+        ${flightList(this.departures?.result?.flights)}
       </div>
     `;
   }
 }
 
+const departuresRefreshKey = new DataProviderKey<number>(
+  "docsDemoDeparturesRefresh",
+);
+set(departuresRefreshKey, 0);
+
 @customElement("demo-api-get-method")
 export class DemoApiGetMethod extends LitElement {
   static styles = [tailwind];
 
   @state()
-  private payload?: ApiResult<GeoCommuneRow[]>;
-
-  connectedCallback() {
-    super.connectedCallback();
-    set(geoCommunesMethodTriggerKey, 0);
-  }
+  private payload?: ApiResult<FlightBoard>;
 
-  @get(geoCommunesApiGetEndpoint, docsDemoGeoApiConfigurationKey, {
-    triggerKey: geoCommunesMethodTriggerKey,
+  @get(departuresEndpoint, flightsApiConfigurationKey, {
+    triggerKey: departuresRefreshKey,
   })
-  handlePayload(payload?: ApiResult<GeoCommuneRow[]>) {
+  onDepartures(payload?: ApiResult<FlightBoard>) {
     this.payload = payload;
   }
 
   private refresh() {
-    dp(geoCommunesMethodTriggerKey).invalidate();
+    dp(departuresRefreshKey).invalidate();
   }
 
   render() {
-    const rows = this.payload?.result ?? [];
     return html`
       <div class="space-y-3">
-        <div class="flex flex-wrap items-center gap-3">
-          <span class="text-sm font-medium">🗺️ GET function mode</span>
-          <sonic-button size="sm" @click=${this.refresh}>
-            Invalidate trigger
-          </sonic-button>
-        </div>
-        <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          The <code>@get</code> decorator calls <code>handlePayload</code> with
-          the complete API payload.
-        </p>
+        <sonic-button size="sm" @click=${this.refresh}>
+          Invalidate trigger
+        </sonic-button>
         <p class="text-xs text-neutral-500">
-          HTTP status:
-          <strong>${this.payload?.response?.status ?? "loading…"}</strong>
+          HTTP status: ${this.payload?.response?.status ?? "…"}
         </p>
-        <ul class="grid gap-1 sm:grid-cols-2">
-          ${rows.slice(0, 6).map(
-            (commune) =>
-              html`<li class="text-sm">
-                ${commune.nom}
-                <span class="text-neutral-500">(${commune.code})</span>
-              </li>`,
-          )}
-        </ul>
+        ${flightList(this.payload?.result?.flights)}
       </div>
     `;
   }
@@ -187,48 +182,33 @@ export class DemoApiGetMethod extends LitElement {
 export class DemoApiGetConfigurationKey extends LitElement {
   static styles = [tailwind];
 
-  @property({ type: Number })
-  communeLimit = 3;
+  @property()
+  direction: FlightDirection = "departures";
 
-  @get(geoCommunesApiGetEndpointDynamic, docsDemoGeoApiConfigurationKey)
+  @get(flightsByDirectionEndpoint, flightsApiConfigurationKey)
   @state()
-  geoApiPayloadDyn?: ApiResult<GeoCommuneRow[]>;
+  board?: ApiResult<FlightBoard>;
 
   render() {
-    const rows = this.geoApiPayloadDyn?.result;
     return html`
       <div class="space-y-3">
-        <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          <code>@get</code> avec un endpoint et une configuration dynamiques.
-        </p>
-        <div class="flex flex-wrap items-center gap-2">
-          <span class="text-sm">Nombre de communes :</span>
-          ${[3, 5, 10].map(
-            (limit) => html`
+        <div class="flex flex-wrap gap-2">
+          ${(["departures", "arrivals"] as const).map(
+            (direction) => html`
               <sonic-button
                 size="sm"
-                type=${this.communeLimit === limit ? "primary" : "neutral"}
-                @click=${() => {
-                  this.communeLimit = limit;
-                }}
+                type=${this.direction === direction ? "primary" : "neutral"}
+                @click=${() => (this.direction = direction)}
               >
-                ${limit}
+                ${direction === "departures" ? "Departures" : "Arrivals"}
               </sonic-button>
             `,
           )}
         </div>
         <p class="font-mono text-xs text-neutral-500">
-          communes?limit=${this.communeLimit}
+          flights?direction=${this.direction}&amp;limit=4
         </p>
-        ${this.geoApiPayloadDyn == null
-          ? html`<p class="text-sm text-neutral-500">Chargement…</p>`
-          : html`
-              <ul class="grid gap-1 sm:grid-cols-2">
-                ${(rows ?? []).map(
-                  (c) => html`<li class="text-sm">${c.nom}</li>`,
-                )}
-              </ul>
-            `}
+        ${flightList(this.board?.result?.flights)}
       </div>
     `;
   }
@@ -238,87 +218,42 @@ export class DemoApiGetConfigurationKey extends LitElement {
 export class DemoApiGetPublishSubscribe extends LitElement {
   static styles = [tailwind];
 
-  @get(geoCommunesApiGetEndpoint)
-  @publish(geoCommunesApiGetPublishKey)
+  @get(departuresEndpoint, flightsApiConfigurationKey)
+  @publish(departuresPayloadKey)
   @state()
-  geoApiPayloadPublished: ApiResult<GeoCommuneRow[]> | null = null;
+  departures?: ApiResult<FlightBoard>;
 
+  @subscribe(departuresPayloadKey.result.flights)
   @state()
-  @subscribe(geoCommunesApiGetPublishKey.result)
-  geoCommunesFromSubscribe: GeoCommuneRow[] | null = null;
+  flights: Flight[] | null = null;
 
   render() {
-    const rows =
-      this.geoCommunesFromSubscribe ?? this.geoApiPayloadPublished?.result;
-    const status = this.geoApiPayloadPublished?.response?.status;
-    const fetchedAt = formatFetchedAt(
-      this.geoApiPayloadPublished?.response ?? null,
-    );
     return html`
       <div class="space-y-2">
-        <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          <code>@get</code> (scoped) + <code>@publish</code> sur la clé du
-          payload + <code>@subscribe</code> sur <code>.result</code> — même
-          rendu que <code>&lt;demo-api-get&gt;</code> (doc @get).
+        <p class="text-xs text-neutral-500">
+          HTTP ${this.departures?.response?.status ?? "…"}
         </p>
-        ${status != null
-          ? html`<p class="text-xs text-neutral-500">
-              HTTP ${status} · fetch ${fetchedAt}
-            </p>`
-          : ""}
-        ${this.geoApiPayloadPublished === null
-          ? html`<p class="text-neutral-500">Chargement…</p>`
-          : !rows || rows.length === 0
-            ? html`<p class="text-neutral-500">Aucune commune</p>`
-            : html`
-                <ul class="list-disc pl-5 space-y-1">
-                  ${rows.map(
-                    (c) =>
-                      html`<li>
-                        <span class="font-medium">${c.nom}</span>
-                        <span class="text-neutral-500 text-sm">
-                          — ${c.code}</span
-                        >
-                      </li>`,
-                  )}
-                </ul>
-              `}
+        ${flightList(this.flights ?? undefined)}
       </div>
     `;
   }
 }
 
-type User = { firstName: string; lastName: string; email: string };
-
-const demoUsersSubKey = new DataProviderKey<User, { userIndex: number }>(
-  "demoUsers.${userIndex}",
-);
+/* ----------------------------------------------------- sub / @subscribe */
 
 @customElement("demo-sub-template")
 export class DemoSubTemplate extends LitElement {
   static styles = [tailwind];
 
   @property({ type: Number })
-  userIndex = 0;
+  seatIndex = 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>
+        ${seatIndexInput(this)}
         <p class="rounded border border-neutral-200 dark:border-neutral-700 p-3">
-          Email: <strong>${sub(demoUsersSubKey.email) || "—"}</strong>
+          <strong>${sub(personKey.name)}</strong> · ${sub(personKey.role)}
         </p>
       </div>
     `;
@@ -330,78 +265,63 @@ export class DemoSubscribeDynamic extends LitElement {
   static styles = [tailwind];
 
   @property({ type: Number })
-  userIndex = 0;
+  seatIndex = 0;
 
-  @subscribe(new DataProviderKey<User>("demoUsers.${userIndex}"))
+  @subscribe(personKey)
   @state()
-  user: User | null = null;
+  person: OnBoard | null = null;
 
   render() {
     return html`
       <div class="space-y-4">
-        <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          <code>@subscribe</code> avec chemin dynamique
-          <code>demoUsers.\${userIndex}</code>
-        </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>
-        ${this.user
+        ${seatIndexInput(this)}
+        ${this.person
           ? html`
               <div
                 class="rounded border border-neutral-200 dark:border-neutral-700 p-3"
               >
-                <p>${this.user.firstName} ${this.user.lastName}</p>
-                <p class="text-sm text-neutral-500">${this.user.email}</p>
+                <p>${this.person.name}</p>
+                <p class="text-sm text-neutral-500">
+                  ${this.person.role} · ${this.person.seat}
+                </p>
               </div>
             `
           : html`<p class="text-neutral-500">
-              No user at index ${this.userIndex}
+              Nobody at index ${this.seatIndex}
             </p>`}
       </div>
     `;
   }
 }
 
-type DemoCounterData = { count: number; title: string; user: { name: string } };
-const demoDataKey = new DataProviderKey<DemoCounterData>("demoData");
+/* -------------------------------------------------------------- @handle */
 
 @customElement("demo-handle")
 export class DemoHandle extends LitElement {
   static styles = [tailwind];
 
-  @state() doubled = 0;
-  @state() lastUpdate = "";
+  @state() meters = 0;
+  @state() flightLevel = "";
 
-  @handle(demoDataKey.count)
-  onCountChange(count: number) {
-    this.doubled = count * 2;
-    this.lastUpdate = new Date().toLocaleTimeString();
+  @handle(cockpitKey.altitude)
+  onAltitude(feet: number) {
+    this.meters = Math.round(feet * 0.3048);
+    this.flightLevel = `FL${Math.round(feet / 100)}`;
   }
 
-  incrementCount() {
-    const data = storeGet(demoDataKey);
-    set(demoDataKey, { ...data, count: data.count + 1 });
+  climb() {
+    const cockpit = storeGet(cockpitKey);
+    set(cockpitKey, { ...cockpit, altitude: cockpit.altitude + 1000 });
   }
 
   render() {
     return html`
       <div class="space-y-4">
-        <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          <code>@handle</code> sur <code>demoData.count</code> — calcul
-          <code>doubled = count * 2</code>
-        </p>
-        <p>Doubled count: <strong>${this.doubled}</strong></p>
-        <p class="text-sm text-neutral-500">
-          Last update: ${this.lastUpdate || "—"}
+        <p>
+          Altitude: <strong>${this.flightLevel}</strong> ·
+          ${this.meters.toLocaleString("en")} m
         </p>
-        <sonic-button @click=${this.incrementCount}>Increment count</sonic-button>
+        <sonic-button @click=${this.climb}>Climb 1,000 ft</sonic-button>
       </div>
     `;
   }
@@ -412,47 +332,24 @@ export class DemoHandleDynamic extends LitElement {
   static styles = [tailwind];
 
   @property({ type: Number })
-  userIndex = 0;
+  seatIndex = 0;
 
-  @state() displayName = "";
-  @state() lastUpdate = "";
+  @state() announcement = "";
 
-  @handle(new DataProviderKey<User, { userIndex: number }>("demoUsers.${userIndex}"))
-  onUserAssigned(user: User) {
-    this.displayName = `${user.firstName} ${user.lastName}`;
-    this.lastUpdate = new Date().toLocaleTimeString();
+  @handle(personKey)
+  onPerson(person: OnBoard | null) {
+    this.announcement = person
+      ? `${person.name}, please proceed to gate B12.`
+      : "";
   }
 
   render() {
     return html`
       <div class="space-y-4">
-        <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          <code>@handle</code> avec chemin dynamique
-          <code>demoUsers.\${userIndex}</code>
+        ${seatIndexInput(this)}
+        <p class="rounded border border-neutral-200 dark:border-neutral-700 p-3">
+          ${this.announcement || `Nobody at index ${this.seatIndex}`}
         </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>
-        ${this.displayName
-          ? html`
-              <div
-                class="rounded border border-neutral-200 dark:border-neutral-700 p-3"
-              >
-                <p>${this.displayName}</p>
-                <p class="text-sm text-neutral-500">
-                  Assigned at ${this.lastUpdate}
-                </p>
-              </div>
-            `
-          : html`<p class="text-neutral-500">
-              No user at index ${this.userIndex}
-            </p>`}
       </div>
     `;
   }