@supersoniks/concorde 4.7.4 → 4.9.0

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

@@ -0,0 +1,249 @@
+import { html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { post, publish, type ApiResult } from "@supersoniks/concorde/decorators";
+import type { APIConfiguration } from "@supersoniks/concorde/core/utils/api";
+import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
+import { Endpoint } from "@supersoniks/concorde/core/utils/endpoint";
+import {
+  dp,
+  set,
+} from "@supersoniks/concorde/core/utils/PublisherProxy";
+import { DOCS_MOCK_REQRES_SERVICE } from "../mock-api/urls";
+import { tailwind } from "../tailwind";
+import "./decorators-demo-init";
+
+type RegisterResult = {
+  id?: number;
+  token?: string;
+  email?: string;
+};
+
+type RegisterRequest = {
+  email: string;
+  password: string;
+};
+
+const registerPostEndpoint = new Endpoint<RegisterResult>("api/register");
+
+type SessionSyncResult = {
+  ok?: boolean;
+  sessionId?: string;
+  serverTime?: number;
+  echo?: { note?: string };
+};
+
+type SessionSyncRequest = {
+  note: string;
+};
+
+const sessionSyncPostEndpoint = new Endpoint<
+  SessionSyncResult,
+  { sessionId: string }
+>("api/sessions/${sessionId}/sync");
+
+const reqresApiConfiguration: APIConfiguration = {
+  serviceURL: DOCS_MOCK_REQRES_SERVICE,
+  token: null,
+  userName: null,
+  password: null,
+  authToken: null,
+  tokenProvider: null,
+};
+
+export const docsDemoReqresApiConfigurationKey =
+  new DataProviderKey<APIConfiguration>("docsDemoReqresApiConfiguration");
+
+set(docsDemoReqresApiConfigurationKey, reqresApiConfiguration);
+
+export const docsDemoPostRequestKey = new DataProviderKey<RegisterRequest>(
+  "docsDemoPostRequest",
+);
+/** Clé body distincte — la page doc monte les deux démos live en même temps. */
+export const docsDemoPostPublishRequestKey = new DataProviderKey<RegisterRequest>(
+  "docsDemoPostPublishRequest",
+);
+export const docsDemoPostTriggerKey = new DataProviderKey<number>(
+  "docsDemoPostTrigger",
+);
+export const docsDemoPostDynamicRequestKey = new DataProviderKey<SessionSyncRequest>(
+  "docsDemoPostDynamicRequest",
+);
+
+@customElement("demo-api-post")
+export class DemoApiPost extends LitElement {
+  static styles = [tailwind];
+
+  @post(
+    registerPostEndpoint,
+    docsDemoPostRequestKey,
+    docsDemoReqresApiConfigurationKey,
+    { triggerKey: docsDemoPostTriggerKey },
+  )
+  @state()
+  payload?: ApiResult<RegisterResult> | null;
+
+  connectedCallback() {
+    super.connectedCallback();
+    set(docsDemoPostRequestKey, {
+      email: "demo@concorde.local",
+      password: "demo-password",
+    });
+    set(docsDemoPostTriggerKey, 0);
+  }
+
+  private send() {
+    set(docsDemoPostRequestKey, {
+      email: "demo@concorde.local",
+      password: "demo-password",
+    });
+  }
+
+  private resendSameBody() {
+    dp(docsDemoPostTriggerKey).invalidate();
+  }
+
+  render() {
+    const result = this.payload?.result;
+    const status = this.payload?.response?.status;
+    return html`
+      <div class="space-y-4">
+        <p class="text-sm text-neutral-600 dark:text-neutral-400">
+          <code>@post</code> vers le mock
+          <code>POST /docs-mock-api/api/register</code> — body lu depuis
+          <code>docsDemoPostRequest</code>.
+        </p>
+        <div class="flex flex-wrap gap-2">
+          <sonic-button @click=${this.send}>Set body &amp; POST</sonic-button>
+          <sonic-button variant="secondary" @click=${this.resendSameBody}>
+            invalidate trigger (re-POST)
+          </sonic-button>
+        </div>
+        <div
+          class="rounded border border-neutral-200 dark:border-neutral-700 p-3 text-sm space-y-1"
+        >
+          <p>HTTP status: <strong>${status ?? "—"}</strong></p>
+          ${result?.id != null
+            ? html`<p>id: <span class="font-mono">${result.id}</span></p>`
+            : nothing}
+          ${result?.email
+            ? html`<p>email: <span class="font-mono">${result.email}</span></p>`
+            : nothing}
+          ${result?.token
+            ? html`<p>
+                token:
+                <span class="font-mono break-all">${result.token}</span>
+              </p>`
+            : nothing}
+        </div>
+      </div>
+    `;
+  }
+}
+
+@customElement("demo-api-post-dynamic")
+export class DemoApiPostDynamic extends LitElement {
+  static styles = [tailwind];
+
+  @property({ type: String }) sessionId = "alpha";
+
+  @post(
+    sessionSyncPostEndpoint,
+    docsDemoPostDynamicRequestKey,
+    docsDemoReqresApiConfigurationKey,
+  )
+  @state()
+  payload?: ApiResult<SessionSyncResult> | null;
+
+  connectedCallback() {
+    super.connectedCallback();
+    set(docsDemoPostDynamicRequestKey, { note: "docs @post dynamic path" });
+  }
+
+  private setSession(sessionId: string) {
+    this.sessionId = sessionId;
+  }
+
+  render() {
+    const result = this.payload?.result;
+    const status = this.payload?.response?.status;
+    const requestUrl = this.payload?.request?.url ?? "";
+    return html`
+      <div class="space-y-4">
+        <p class="text-sm text-neutral-600 dark:text-neutral-400">
+          <code>@post</code> vers
+          <code>api/sessions/${"${sessionId}"}/sync</code> — changer
+          <code>sessionId</code> sur l'hôte relance le POST (même body).
+        </p>
+        <div class="flex flex-wrap items-center gap-2">
+          <span class="text-sm text-neutral-500">sessionId :</span>
+          ${(["alpha", "beta", "gamma"] as const).map(
+            (id) => html`
+              <sonic-button
+                variant=${this.sessionId === id ? "primary" : "secondary"}
+                size="sm"
+                @click=${() => this.setSession(id)}
+              >
+                ${id}
+              </sonic-button>
+            `,
+          )}
+        </div>
+        <div
+          class="rounded border border-neutral-200 dark:border-neutral-700 p-3 text-sm space-y-1"
+        >
+          <p>HTTP status: <strong>${status ?? "—"}</strong></p>
+          <p>
+            Dernier path :
+            <span class="font-mono text-xs break-all">${requestUrl || "—"}</span>
+          </p>
+          <p>
+            Réponse <code>sessionId</code> :
+            <strong class="font-mono">${result?.sessionId ?? "—"}</strong>
+          </p>
+        </div>
+      </div>
+    `;
+  }
+}
+
+@customElement("demo-api-post-publish")
+export class DemoApiPostPublish extends LitElement {
+  static styles = [tailwind];
+
+  @post(
+    registerPostEndpoint,
+    docsDemoPostPublishRequestKey,
+    docsDemoReqresApiConfigurationKey,
+  )
+  @publish(
+    registerPostEndpoint.getDataProviderKey() as DataProviderKey<
+      ApiResult<RegisterResult>
+    >,
+  )
+  @state()
+  payload?: ApiResult<RegisterResult> | null;
+
+  connectedCallback() {
+    super.connectedCallback();
+    set(docsDemoPostPublishRequestKey, {
+      email: "publish@concorde.local",
+      password: "secret",
+    });
+  }
+
+  render() {
+    const email = this.payload?.result?.email;
+    return html`
+      <div class="space-y-3 text-sm">
+        <p class="text-neutral-600 dark:text-neutral-400">
+          <code>@post</code> + <code>@publish</code> sur le même champ — même
+          pattern que <code>@get</code> + <code>@publish</code>.
+        </p>
+        <p>
+          Result email:
+          <strong class="font-mono">${email ?? "—"}</strong>
+        </p>
+      </div>
+    `;
+  }
+}

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

@@ -3,7 +3,7 @@ import { customElement, property, state } from "lit/decorators.js";
 import { get, handle, publish, subscribe } from "@supersoniks/concorde/decorators";
 import type {
   APIConfiguration,
-  ApiGetResult,
+  ApiResult,
 } from "@supersoniks/concorde/core/utils/api";
 import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
 import { sub } from "@supersoniks/concorde/directives";
@@ -92,7 +92,7 @@ export class DemoApiGet extends LitElement {
 
   @get(geoCommunesApiGetEndpoint, docsDemoGeoApiConfigurationKey)
   @state()
-  geoApiPayload?: ApiGetResult<GeoCommuneRow[]>;
+  geoApiPayload?: ApiResult<GeoCommuneRow[]>;
 
   render() {
     const rows = this.geoApiPayload?.result;
@@ -102,7 +102,7 @@ export class DemoApiGet extends LitElement {
         <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>ApiGetResult&lt;T&gt;</code>.
+          Propriété typée <code>ApiResult&lt;T&gt;</code>.
         </p>
         ${status != null
           ? html`<p class="text-xs text-neutral-500">HTTP ${status}</p>`
@@ -141,7 +141,7 @@ export class DemoApiGetConfigurationKey extends LitElement {
 
   @get(geoCommunesApiGetEndpointDynamic, docsDemoDynApiConfKeyTemplate)
   @state()
-  geoApiPayloadDyn?: ApiGetResult<GeoCommuneRow[]>;
+  geoApiPayloadDyn?: ApiResult<GeoCommuneRow[]>;
 
   private touchCurrentConfigPublisher() {
     const key =
@@ -237,7 +237,7 @@ export class DemoApiGetPublishSubscribe extends LitElement {
   @get(geoCommunesApiGetEndpoint)
   @publish(geoCommunesApiGetPublishKey)
   @state()
-  geoApiPayloadPublished: ApiGetResult<GeoCommuneRow[]> | null = null;
+  geoApiPayloadPublished: ApiResult<GeoCommuneRow[]> | null = null;
 
   @state()
   @subscribe(geoCommunesApiGetPublishKey.result)

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

@@ -1,4 +1,4 @@
-import { html, LitElement } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import {
   ancestorAttribute,
@@ -22,11 +22,16 @@ import {
   waitAncestorDemoKey,
 } from "./docs-provider-keys";
 import { tailwind } from "../tailwind";
+import "./decorators-demo-init";
+import "../../core/components/ui/button/button";
 import "./decorators-demo-bind-demos";
 import "./decorators-demo-subscribe-publish-get-demos";
+import "./decorators-demo-post";
 
 @customElement("demo-ancestor-attribute")
 export class DemoAncestorAttribute extends LitElement {
+  static styles = [tailwind];
+
   @ancestorAttribute("dataProvider")
   dataProvider: string | null = null;
 
@@ -35,16 +40,166 @@ export class DemoAncestorAttribute extends LitElement {
 
   render() {
     return html`
-      <section>
+      <div
+        class="space-y-2 rounded border border-neutral-200 dark:border-neutral-700 p-3"
+      >
+        <p class="text-sm text-neutral-600 dark:text-neutral-400">
+          <code>@ancestorAttribute</code> — lecture unique au connect (défaut)
+        </p>
         <p>
-          DataProvider property initialized from ancestor:
-          <strong>${this.dataProvider || "null"}</strong>
+          dataProvider:
+          <strong>${this.dataProvider ?? "null"}</strong>
         </p>
         <p>
-          TestAttribute property initialized from ancestor:
-          <strong>${this.testAttribute || "null"}</strong>
+          testAttribute:
+          <strong>${this.testAttribute ?? "null"}</strong>
+        </p>
+      </div>
+    `;
+  }
+}
+
+@customElement("demo-ancestor-attribute-dynamic")
+export class DemoAncestorAttributeDynamic extends LitElement {
+  static styles = [tailwind];
+
+  @ancestorAttribute("dataProvider", { dynamic: true })
+  @state()
+  dataProvider: string | null = null;
+
+  render() {
+    return html`
+      <div
+        class="rounded border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-950 p-3"
+      >
+        <p class="text-sm text-neutral-500">
+          Nearest ancestor <code>dataProvider</code>
+        </p>
+        <p class="text-lg font-semibold">${this.dataProvider ?? "null"}</p>
+      </div>
+    `;
+  }
+}
+
+@customElement("demo-ancestor-attribute-dynamic-section")
+export class DemoAncestorAttributeDynamicSection extends LitElement {
+  static styles = [tailwind];
+
+  /** Direct parent of the child — closest ancestor when set. */
+  @state() parentValue: string | null = "from-parent";
+  /** Grandparent — used when the parent has no attribute. */
+  @state() outerValue: string | null = "from-outer";
+  /** Optional wrapper inserted between parent and child (wins over parent). */
+  @state() closerActive = false;
+
+  render() {
+    return html`
+      <div class="space-y-4">
+        <p class="text-sm text-neutral-600 dark:text-neutral-400">
+          The child always displays the <strong>nearest</strong> ancestor
+          <code>dataProvider</code>. Change a value, add a closer wrapper, or
+          remove an attribute — the property follows automatically.
         </p>
-      </section>
+
+        <div class="flex flex-wrap gap-2">
+          <span class="text-xs text-neutral-500 self-center w-full"
+            >Parent</span
+          >
+          <sonic-button
+            size="sm"
+            @click=${() => (this.parentValue = "from-parent")}
+          >
+            parent-a
+          </sonic-button>
+          <sonic-button
+            size="sm"
+            @click=${() => (this.parentValue = "from-parent-b")}
+          >
+            parent-b
+          </sonic-button>
+          <sonic-button
+            size="sm"
+            variant="outline"
+            @click=${() => (this.parentValue = null)}
+          >
+            Remove parent attr
+          </sonic-button>
+        </div>
+
+        <div class="flex flex-wrap gap-2">
+          <span class="text-xs text-neutral-500 self-center w-full"
+            >Closer wrapper (inserted between parent and child)</span
+          >
+          <sonic-button
+            size="sm"
+            ?disabled=${this.closerActive}
+            @click=${() => (this.closerActive = true)}
+          >
+            Add closer → from-closer
+          </sonic-button>
+          <sonic-button
+            size="sm"
+            variant="outline"
+            ?disabled=${!this.closerActive}
+            @click=${() => (this.closerActive = false)}
+          >
+            Remove closer
+          </sonic-button>
+        </div>
+
+        <div class="flex flex-wrap gap-2">
+          <span class="text-xs text-neutral-500 self-center w-full">Outer</span>
+          <sonic-button
+            size="sm"
+            @click=${() => (this.outerValue = "from-outer")}
+          >
+            outer-a
+          </sonic-button>
+          <sonic-button
+            size="sm"
+            @click=${() => (this.outerValue = "from-outer-b")}
+          >
+            outer-b
+          </sonic-button>
+          <sonic-button
+            size="sm"
+            variant="outline"
+            @click=${() => (this.outerValue = null)}
+          >
+            Remove outer attr
+          </sonic-button>
+        </div>
+
+        <div
+          class="rounded border border-neutral-200 dark:border-neutral-700 p-3 space-y-2"
+          dataProvider=${this.outerValue ?? nothing}
+        >
+          <p class="text-xs text-neutral-400">
+            outer ${this.outerValue ?? "— no dataProvider —"}
+          </p>
+          <div
+            class="rounded border border-dashed border-neutral-300 dark:border-neutral-600 p-3 space-y-2"
+            dataProvider=${this.parentValue ?? nothing}
+          >
+            <p class="text-xs text-neutral-400">
+              parent ${this.parentValue ?? "— no dataProvider —"}
+            </p>
+            ${this.closerActive
+              ? html`
+                  <div
+                    class="rounded border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/30 p-2 space-y-2"
+                    dataProvider="from-closer"
+                  >
+                    <p class="text-xs text-amber-800 dark:text-amber-200">
+                      closer from-closer
+                    </p>
+                    <demo-ancestor-attribute-dynamic></demo-ancestor-attribute-dynamic>
+                  </div>
+                `
+              : html`<demo-ancestor-attribute-dynamic></demo-ancestor-attribute-dynamic>`}
+          </div>
+        </div>
+      </div>
     `;
   }
 }
@@ -132,7 +287,9 @@ export class DemoOnAssignDynamic extends LitElement {
 
   updateCurrentUserData() {
     const usersKey =
-      this.dataProvider === demoUsersAltKey.path ? demoUsersAltKey : demoUsersKey;
+      this.dataProvider === demoUsersAltKey.path
+        ? demoUsersAltKey
+        : demoUsersKey;
     const settingsKey =
       this.dataProvider === demoUsersAltKey.path
         ? demoUsersAltSettingsKey

package/src/docs/example/docs-api-config-demos.ts

@@ -1,7 +1,7 @@
 import { html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { get } from "@supersoniks/concorde/core/decorators/api";
-import type { ApiGetResult } from "@supersoniks/concorde/core/utils/api";
+import type { ApiResult } from "@supersoniks/concorde/core/utils/api";
 import { Endpoint } from "@supersoniks/concorde/core/utils/endpoint";
 import { set } from "@supersoniks/concorde/core/utils/PublisherProxy";
 import { wording } from "@supersoniks/concorde/core/directives/Wording";
@@ -33,7 +33,7 @@ type ProtectedResult = {
 
 const protectedEndpoint = new Endpoint<ProtectedResult>("api/config/protected");
 
-function resultPanel(payload: ApiGetResult<ProtectedResult> | null | undefined) {
+function resultPanel(payload: ApiResult<ProtectedResult> | null | undefined) {
   const status = payload?.response?.status;
   const r = payload?.result;
   if (payload === null) {
@@ -66,7 +66,7 @@ export class DocsApiConfigBearerDemo extends LitElement {
 
   @get(protectedEndpoint, docsApiConfBearerKey)
   @state()
-  private payload: ApiGetResult<ProtectedResult> | null = null;
+  private payload: ApiResult<ProtectedResult> | null = null;
 
   render() {
     return html`
@@ -86,7 +86,7 @@ export class DocsApiConfigTokenProviderDemo extends LitElement {
 
   @get(protectedEndpoint, docsApiConfTokenProviderKey)
   @state()
-  private payload: ApiGetResult<ProtectedResult> | null = null;
+  private payload: ApiResult<ProtectedResult> | null = null;
 
   render() {
     return html`
@@ -107,7 +107,7 @@ export class DocsApiConfigStaleTokenDemo extends LitElement {
 
   @get(protectedEndpoint, docsApiConfStaleTokenKey)
   @state()
-  private payload: ApiGetResult<ProtectedResult> | null = null;
+  private payload: ApiResult<ProtectedResult> | null = null;
 
   render() {
     const refreshed =

package/src/docs/mock-api/router.ts

@@ -180,6 +180,26 @@ export async function handleDocsMockApiRequest(
     );
   }
 
+  const sessionSyncMatch = subPath.match(/^\/api\/sessions\/([^/]+)\/sync$/);
+  if (sessionSyncMatch && method === "POST") {
+    const sessionId = decodeURIComponent(sessionSyncMatch[1]);
+    let body: Record<string, unknown> = {};
+    try {
+      const text = await request.text();
+      if (text.trim()) {
+        body = JSON.parse(text) as Record<string, unknown>;
+      }
+    } catch {
+      body = {};
+    }
+    return json({
+      ok: true,
+      sessionId,
+      serverTime: Date.now(),
+      echo: body,
+    });
+  }
+
   if (subPath === "/api/register/echo" && method === "GET") {
     const email = url.searchParams.get("email") ?? "";
     const password = url.searchParams.get("password") ?? "";

package/src/docs/navigation/navigation.ts

@@ -153,6 +153,18 @@ export class DocsNavigation extends LitElement {
       label: "@get",
       href: "#docs/_decorators/get.md/get",
     },
+    {
+      label: "@post",
+      href: "#docs/_decorators/post.md/post",
+    },
+    {
+      label: "@put",
+      href: "#docs/_decorators/put.md/put",
+    },
+    {
+      label: "@patch",
+      href: "#docs/_decorators/patch.md/patch",
+    },
     {
       label: "@onAssign",
       href: "#docs/_decorators/on-assign.md/on-assign",
@@ -174,6 +186,10 @@ export class DocsNavigation extends LitElement {
       label: "Endpoint",
       href: "#docs/_misc/endpoint.md/endpoint",
     },
+    {
+      label: "Dynamic paths",
+      href: "#docs/_misc/dynamic-path.md/dynamic-path",
+    },
     {
       label: "API configuration",
       href: "#docs/_misc/api-configuration.md/api-configuration",