@supersoniks/concorde 4.9.9 → 4.9.91

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

@@ -5,7 +5,6 @@ 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";
@@ -13,30 +12,23 @@ import { publishDemoKey } from "./docs-provider-keys";
 import { tailwind } from "../tailwind";
 import "./decorators-demo-init";
 import {
-  docsDemoDynApiConfKeyTemplate,
   docsDemoGeoApiConfigurationKey,
-  docsDemoGeoCommunesRefreshKey,
   geoCommunesApiGetEndpoint,
   geoCommunesApiGetEndpointDynamic,
   geoCommunesApiGetPublishKey,
   type GeoCommuneRow,
 } from "./decorators-demo-geo";
 
-function formatFetchedAt(response: Response | null | undefined): string {
-  const raw = response?.headers.get("X-Fetched-At");
-  if (!raw) return "—";
-  try {
-    return new Date(raw).toLocaleTimeString();
-  } catch {
-    return raw;
-  }
-}
-
 type PublishDemoData = {
   email: string;
   message: string;
 };
 
+const geoCommunesGet = get(
+  geoCommunesApiGetEndpoint,
+  docsDemoGeoApiConfigurationKey,
+);
+
 @customElement("demo-publish")
 export class DemoPublish extends LitElement {
   static styles = [tailwind];
@@ -95,50 +87,35 @@ export class DemoPublish extends LitElement {
 export class DemoApiGet extends LitElement {
   static styles = [tailwind];
 
-  @get(geoCommunesApiGetEndpoint, docsDemoGeoApiConfigurationKey, {
-    triggerKey: docsDemoGeoCommunesRefreshKey,
-  })
+  @geoCommunesGet
   @state()
   geoApiPayload?: ApiResult<GeoCommuneRow[]>;
 
   private refresh() {
-    dp(docsDemoGeoCommunesRefreshKey).invalidate();
+    geoCommunesGet.refetch(this);
   }
 
   render() {
     const rows = this.geoApiPayload?.result;
-    const status = this.geoApiPayload?.response?.status;
-    const fetchedAt = formatFetchedAt(this.geoApiPayload?.response ?? null);
     return html`
-      <div class="space-y-2">
+      <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">
-          <code>@get</code> — même service que
-          <code>sonic-queue</code> (<code>/docs-mock-api/geo/</code>).
-          Propriété typée <code>ApiResult&lt;T&gt;</code>.
-          Refetch via <code>triggerKey</code> (<code
-            >docsDemoGeoCommunesRefresh</code
-          >).
+          Une liste de communes chargée avec <code>@get</code>.
         </p>
-        <sonic-button size="sm" @click=${this.refresh}>Rafraîchir</sonic-button>
-        ${status != null
-          ? html`<p class="text-xs text-neutral-500">
-              HTTP ${status} · fetch ${fetchedAt}
-            </p>`
-          : ""}
-        ${this.geoApiPayload === null
-          ? html`<p class="text-neutral-500">Chargement…</p>`
+        ${this.geoApiPayload == null
+          ? html`<p class="text-sm text-neutral-500">Chargement…</p>`
           : !rows || rows.length === 0
-            ? html`<p class="text-neutral-500">Aucune commune</p>`
+            ? html`<p class="text-sm text-neutral-500">Aucune commune</p>`
             : html`
-                <ul class="list-disc pl-5 space-y-1">
+                <ul class="grid gap-1 sm:grid-cols-2">
                   ${rows.map(
-                    (c) =>
-                      html`<li>
-                        <span class="font-medium">${c.nom}</span>
-                        <span class="text-neutral-500 text-sm">
-                          — ${c.code}</span
-                        >
-                      </li>`,
+                    (c) => html`<li class="text-sm">
+                      ${c.nom} <span class="text-neutral-500">(${c.code})</span>
+                    </li>`,
                   )}
                 </ul>
               `}
@@ -151,116 +128,48 @@ export class DemoApiGet extends LitElement {
 export class DemoApiGetConfigurationKey extends LitElement {
   static styles = [tailwind];
 
-  @property({ type: String })
-  configSlot: "A" | "B" = "A";
-
   @property({ type: Number })
-  communeLimit = 5;
+  communeLimit = 3;
 
-  @get(geoCommunesApiGetEndpointDynamic, docsDemoDynApiConfKeyTemplate, {
-    triggerKey: docsDemoGeoCommunesRefreshKey,
-  })
+  @get(geoCommunesApiGetEndpointDynamic, docsDemoGeoApiConfigurationKey)
   @state()
   geoApiPayloadDyn?: ApiResult<GeoCommuneRow[]>;
 
   render() {
     const rows = this.geoApiPayloadDyn?.result;
-    const status = this.geoApiPayloadDyn?.response?.status;
-    const fetchedAt = formatFetchedAt(this.geoApiPayloadDyn?.response ?? null);
     return html`
       <div class="space-y-3">
         <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          Config dynamique (<code>docsDemoDynApiConf\${configSlot}</code>) +
-          path d’endpoint avec <code>communeLimit</code>. Le refetch manuel
-          passe par <code>triggerKey</code> — voir le bouton « ailleurs »
-          ci-dessous dans la doc.
+          <code>@get</code> avec un endpoint et une configuration dynamiques.
         </p>
-        <div class="flex flex-wrap gap-2 items-center">
-          <span class="text-xs text-neutral-500">Limite API :</span>
+        <div class="flex flex-wrap items-center gap-2">
+          <span class="text-sm">Nombre de communes :</span>
           ${[3, 5, 10].map(
-            (n) => html`
+            (limit) => html`
               <sonic-button
                 size="sm"
-                type=${this.communeLimit === n ? "primary" : "neutral"}
+                type=${this.communeLimit === limit ? "primary" : "neutral"}
                 @click=${() => {
-                  this.communeLimit = n;
+                  this.communeLimit = limit;
                 }}
-                >${n}</sonic-button
               >
+                ${limit}
+              </sonic-button>
             `,
           )}
         </div>
-        <div class="flex flex-wrap gap-2 items-center">
-          <span class="text-xs text-neutral-500">Publisher config :</span>
-          <sonic-button
-            size="sm"
-            type=${this.configSlot === "A" ? "primary" : "neutral"}
-            @click=${() => {
-              this.configSlot = "A";
-            }}
-            >docsDemoDynApiConfA</sonic-button
-          >
-          <sonic-button
-            size="sm"
-            type=${this.configSlot === "B" ? "primary" : "neutral"}
-            @click=${() => {
-              this.configSlot = "B";
-            }}
-            >docsDemoDynApiConfB</sonic-button
-          >
-        </div>
-        ${status != null
-          ? html`<p class="text-xs text-neutral-500">
-              HTTP ${status} · fetch ${fetchedAt} · limit=${this.communeLimit} ·
-              conf=docsDemoDynApiConf${this.configSlot}
-            </p>`
-          : ""}
-        ${this.geoApiPayloadDyn === 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>
-              `}
-      </div>
-    `;
-  }
-}
-
-/** Déclenche le refetch d’un `@get` distant via `triggerKey` (sans toucher la config). */
-@customElement("demo-api-get-refresh-remote")
-export class DemoApiGetRefreshRemote extends LitElement {
-  static styles = [tailwind];
-
-  private refreshFromElsewhere() {
-    dp(docsDemoGeoCommunesRefreshKey).invalidate();
-  }
-
-  render() {
-    return html`
-      <div
-        class="rounded border border-dashed border-neutral-300 dark:border-neutral-600 p-3 space-y-2"
-      >
-        <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          Composant séparé — même publisher
-          <code>docsDemoGeoCommunesRefresh</code> :
+        <p class="font-mono text-xs text-neutral-500">
+          communes?limit=${this.communeLimit}
         </p>
-        <pre
-          class="text-xs bg-neutral-100 dark:bg-neutral-800 p-2 rounded overflow-x-auto"
-        ><code>dp(docsDemoGeoCommunesRefreshKey).invalidate();</code></pre>
-        <sonic-button size="sm" variant="secondary" @click=${this.refreshFromElsewhere}>
-          Rafraîchir le GET (depuis ailleurs)
-        </sonic-button>
+        ${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>
+            `}
       </div>
     `;
   }