@supersoniks/concorde 4.9.92 → 4.9.94

package/src/core/components/functional/jsonata/jsonata.spec.ts

@@ -0,0 +1,202 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import TestUtils from "@supersoniks/concorde/test-utils/TestUtils";
+import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
+import { deriveStateKey } from "@supersoniks/concorde/core/utils/derive";
+import { clearJsonataCache } from "@supersoniks/concorde/core/utils/jsonataRuntime";
+import { dp, set } from "@supersoniks/concorde/utils";
+import "./jsonata";
+import "../states/states";
+import {
+  DOCS_COFFEE_BAGS,
+  DOCS_SPACE_CAT_MISSIONS,
+} from "../../../../docs/mock-api/fixtures-jsonata";
+
+const missionsKey = new DataProviderKey<typeof DOCS_SPACE_CAT_MISSIONS>(
+  "jsonata-test-missions",
+);
+const formKey = new DataProviderKey<{ top: number | string }>(
+  "jsonata-test-form",
+);
+const boardKey = new DataProviderKey<
+  Array<{ name: string; points: number }>
+>("jsonata-test-board");
+
+function wait(ms: number) {
+  return new Promise((r) => setTimeout(r, ms));
+}
+
+afterEach(() => {
+  clearJsonataCache();
+});
+
+describe("sonic-jsonata", () => {
+  it("calcule un leaderboard (groupby + top N) en live", async () => {
+    set(missionsKey, DOCS_SPACE_CAT_MISSIONS);
+    set(formKey, { top: 2 });
+
+    const [elt] = TestUtils.bootstrap(`
+      <sonic-jsonata
+        inputProvider="jsonata-test-missions"
+        outputProvider="jsonata-test-board"
+        formDataProvider="jsonata-test-form"
+        expression='$input{name: $sum(points)} ~> $each(function($v, $k) {{"name": $k, "points": $v}}) ^(>points)[[0..$number($top)-1]]'
+      ></sonic-jsonata>
+    `);
+
+    await wait(80);
+    const result = dp(boardKey).get();
+    expect(result).toHaveLength(2);
+    expect(result[0].name).toBe("Nebula Paws");
+    expect(result[0].points).toBe(75);
+    expect(result[1].name).toBe("Captain Whiskers");
+    expect(dp(deriveStateKey(boardKey)).get().status).toBe("ready");
+
+    // Comme sonic-input / sonic-select : mutation profonde sur le form DP
+    dp(formKey).top.set(1);
+    await wait(80);
+    const top1 = dp(boardKey).get();
+    const rows = Array.isArray(top1) ? top1 : [top1];
+    expect(rows).toHaveLength(1);
+    expect(rows[0].name).toBe("Nebula Paws");
+
+    (elt as HTMLElement).remove();
+  });
+
+  it("agrège le stock café par origine avec filtre roast", async () => {
+    const bagsKey = new DataProviderKey<typeof DOCS_COFFEE_BAGS>(
+      "jsonata-test-bags",
+    );
+    const coffeeForm = new DataProviderKey<{ roast: string }>(
+      "jsonata-test-coffee-form",
+    );
+    const stockKey = new DataProviderKey<Array<{ origin: string; kg: number }>>(
+      "jsonata-test-stock",
+    );
+    set(bagsKey, DOCS_COFFEE_BAGS);
+    set(coffeeForm, { roast: "light" });
+
+    const [elt] = TestUtils.bootstrap(`
+      <sonic-jsonata
+        inputProvider="jsonata-test-bags"
+        outputProvider="jsonata-test-stock"
+        formDataProvider="jsonata-test-coffee-form"
+        expression='($roast = "all" ? $input : $input[roast=$roast]){origin: $sum(kg)} ~> $each(function($v, $k) {{"origin": $k, "kg": $v}}) ^(>kg)'
+      ></sonic-jsonata>
+    `);
+
+    await wait(80);
+    const stock = dp(stockKey).get();
+    expect(stock.length).toBeGreaterThan(0);
+    expect(stock[0].origin).toBe("Ethiopia");
+    expect(stock[0].kg).toBe(16);
+    expect(stock.map((r) => r.origin)).not.toContain("Brazil");
+
+    dp(coffeeForm).roast.set("all");
+    await wait(80);
+    const all = dp(stockKey).get();
+    expect(all.map((r) => r.origin)).toContain("Brazil");
+
+    (elt as HTMLElement).remove();
+  });
+
+  it("expose status error sur expression invalide", async () => {
+    const err = vi.spyOn(console, "error").mockImplementation(() => {});
+    set(missionsKey, DOCS_SPACE_CAT_MISSIONS);
+
+    const [elt] = TestUtils.bootstrap(`
+      <sonic-jsonata
+        inputProvider="jsonata-test-missions"
+        outputProvider="jsonata-test-board"
+        expression='$input ~> $$$$invalid'
+      ></sonic-jsonata>
+    `);
+
+    await wait(80);
+    const state = dp(deriveStateKey(boardKey)).get();
+    expect(state.status).toBe("error");
+    expect(state.error).toBeTruthy();
+    err.mockRestore();
+    (elt as HTMLElement).remove();
+  });
+
+  it("branche sonic-states sur le DP /_state_", async () => {
+    set(missionsKey, DOCS_SPACE_CAT_MISSIONS);
+    set(formKey, { top: 3 });
+
+    const [wrap] = TestUtils.bootstrap(`
+      <div>
+        <sonic-jsonata
+          inputProvider="jsonata-test-missions"
+          outputProvider="jsonata-test-board"
+          formDataProvider="jsonata-test-form"
+          expression='$input[0].name'
+        ></sonic-jsonata>
+        <sonic-states dataProvider="jsonata-test-board/_state_" data-path="status">
+          <template data-value="ready"><span id="ok">prêt</span></template>
+          <template data-value="error"><span id="ko">erreur</span></template>
+        </sonic-states>
+      </div>
+    `);
+
+    await wait(80);
+    expect(wrap.querySelector("#ok")?.textContent).toBe("prêt");
+    (wrap as HTMLElement).remove();
+  });
+
+  it("calcule total + moyenne par ligne d’un tableau", async () => {
+    const linesKey = new DataProviderKey<
+      Array<{ qty: number; unitPrice: number }>
+    >("jsonata-test-lines");
+    const taxForm = new DataProviderKey<{ taxPercent: number | string }>(
+      "jsonata-test-tax-form",
+    );
+    const totalsKey = new DataProviderKey<{
+      count: number;
+      subtotal: number;
+      average: number;
+      tax: number;
+      grandTotal: number;
+    }>("jsonata-test-totals");
+
+    set(linesKey, [
+      { qty: 4, unitPrice: 3.5 },
+      { qty: 2, unitPrice: 6 },
+      { qty: 1, unitPrice: 8.5 },
+    ]);
+    set(taxForm, { taxPercent: 10 });
+
+    const [elt] = TestUtils.bootstrap(`
+      <sonic-jsonata
+        inputProvider="jsonata-test-lines"
+        outputProvider="jsonata-test-totals"
+        formDataProvider="jsonata-test-tax-form"
+        expression='(
+          $lines := $input.(qty * unitPrice);
+          {
+            "count": $count($input),
+            "subtotal": $round($sum($lines), 2),
+            "average": $round($average($lines), 2),
+            "tax": $round($sum($lines) * $number($taxPercent) / 100, 2),
+            "grandTotal": $round($sum($lines) * (1 + $number($taxPercent) / 100), 2)
+          }
+        )'
+      ></sonic-jsonata>
+    `);
+
+    await wait(80);
+    expect(dp(totalsKey).get()).toMatchObject({
+      count: 3,
+      subtotal: 34.5,
+      average: 11.5,
+      tax: 3.45,
+      grandTotal: 37.95,
+    });
+
+    dp(taxForm).taxPercent.set(20);
+    await wait(80);
+    expect(dp(totalsKey).get().tax).toBe(6.9);
+    expect(dp(totalsKey).get().grandTotal).toBe(41.4);
+
+    (elt as HTMLElement).remove();
+  });
+});

package/src/core/components/functional/jsonata/jsonata.ts

@@ -0,0 +1,116 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import {
+  derive,
+  type DeriveHandle,
+} from "@supersoniks/concorde/core/utils/derive";
+import {
+  compileJsonata,
+  validateOutputSchema,
+} from "@supersoniks/concorde/core/utils/jsonataRuntime";
+import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
+
+/**
+ * Adaptateur JSONata de `derive` : 1 entrée → expression → 1 sortie (readonly).
+ *
+ * Contexte d’évaluation :
+ * - `$input` = contenu de `inputProvider`
+ * - champs du `formDataProvider` optionnel = `$top`, `$roast`, …
+ */
+@customElement("sonic-jsonata")
+export default class SonicJsonata extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: contents;
+      }
+    `,
+  ];
+
+  /** DataProvider d’entrée (source). */
+  @property({ type: String })
+  inputProvider = "";
+
+  /** DataProvider de sortie (agrégat, readonly). */
+  @property({ type: String })
+  outputProvider = "";
+
+  /**
+   * Form / variables optionnelles (`$top`, `$roast`, …).
+   * Même id que le `formDataProvider` du formulaire — recalcule sans refetch.
+   */
+  @property({ type: String })
+  formDataProvider = "";
+
+  @property({ type: String })
+  expression = "";
+
+  @property({ type: Object })
+  outputSchema: Record<string, unknown> | null = null;
+
+  private handle: DeriveHandle | null = null;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.restart();
+  }
+
+  disconnectedCallback(): void {
+    this.handle?.stop();
+    this.handle = null;
+    super.disconnectedCallback();
+  }
+
+  protected updated(
+    changed: Map<string | number | symbol, unknown>,
+  ): void {
+    if (
+      changed.has("expression") ||
+      changed.has("inputProvider") ||
+      changed.has("outputProvider") ||
+      changed.has("formDataProvider") ||
+      changed.has("outputSchema")
+    ) {
+      this.restart();
+    }
+  }
+
+  private restart(): void {
+    this.handle?.stop();
+    this.handle = null;
+    if (!this.isConnected) return;
+    if (!this.inputProvider || !this.outputProvider) return;
+    if (!this.expression?.trim()) return;
+
+    const expressionSource = this.expression;
+    const schema = this.outputSchema;
+
+    this.handle = derive({
+      inputs: { input: new DataProviderKey(this.inputProvider) },
+      output: new DataProviderKey(this.outputProvider),
+      variables: this.formDataProvider
+        ? new DataProviderKey(this.formDataProvider)
+        : undefined,
+      compute: async ({ input }, vars) => {
+        const expr = compileJsonata(expressionSource);
+        const bindings: Record<string, unknown> = {
+          ...((vars ?? {}) as Record<string, unknown>),
+          input,
+        };
+        let result: unknown;
+        try {
+          result = await expr.evaluate({}, bindings);
+        } catch (err) {
+          const message = err instanceof Error ? err.message : String(err);
+          throw new Error(`[sonic-jsonata] Évaluation : ${message}`);
+        }
+        validateOutputSchema(result, schema);
+        return result;
+      },
+    });
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

package/src/core/components/ui/button/button.ts

@@ -506,8 +506,8 @@ export class Button extends FormCheckable(FormElement(Subscriber(LitElement))) {
    * L'url
    */
   private _href: Route | string = "";
-  @property({ type: String }) set href(value: Route | string) {
-    this._href = value;
+  @property({ type: String }) set href(value: Route | string | null) {
+    this._href = value ?? "";
     const str = this._href.toString();
     if (str && str.indexOf("http") != 0) {
       LocationHandler.onChange(this);

package/src/core/decorators/Subscriber.ts

@@ -4,6 +4,8 @@ export { subscribe } from "./subscriber/subscribe";
 export { onAssign } from "./subscriber/onAssign";
 export { handle, Skip } from "./subscriber/handle";
 export type { HandleOptions } from "./subscriber/handle";
+export { derive } from "./subscriber/derive";
+export type { DeriveDecoratorOptions } from "./subscriber/derive";
 export { autoSubscribe } from "./subscriber/autoSubscribe";
 export { autoFill } from "./subscriber/autoFill";
 export { ancestorAttribute } from "./subscriber/ancestorAttribute";

package/src/core/decorators/api.post.spec.ts

@@ -303,6 +303,91 @@ describe("post", () => {
     );
     expect(el.payload?.result).toEqual({ ok: true });
   });
+
+  it("transmet le payload complet et conserve le retrigger du POST", async () => {
+    const bodyPubId = "postSpecHandlerBody";
+    const triggerPubId = "postSpecHandlerTrigger";
+    PublisherManager.get(bodyPubId).set({ tick: 1 });
+    const bodyKey = new DataProviderKey<{ tick: number }>(bodyPubId);
+    const triggerKey = new DataProviderKey<number>(triggerPubId);
+    const ep = new Endpoint<{ ok: boolean }>("items/handler");
+    const localPost = post(ep, bodyKey, {
+      autoPostOnBodyMutation: false,
+      triggerKey,
+    });
+    const received: Array<ApiResult<{ ok: boolean }> | undefined> = [];
+    const errorPayload = mockPayload({ ok: false });
+    errorPayload.response = new Response(JSON.stringify({ error: true }), {
+      status: 409,
+      headers: { "Content-Type": "application/json" },
+    });
+    vi.mocked(API.prototype.postDetailed).mockResolvedValueOnce(
+      errorPayload as never,
+    );
+    const tag = "test-api-post-handler";
+
+    class C extends HTMLElement {
+      @localPost
+      onPayload(payload: ApiResult<{ ok: boolean }> | undefined) {
+        received.push(payload);
+      }
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("serviceURL", "https://api.example.test");
+    const el = document.createElement(tag) as InstanceType<typeof C>;
+    wrap.appendChild(el);
+    document.body.appendChild(wrap);
+    await flushSendFrames();
+
+    expect(API.prototype.postDetailed).not.toHaveBeenCalled();
+    await localPost.send(el);
+    expect(received).toHaveLength(1);
+    expect(received[0]?.response?.status).toBe(409);
+
+    PublisherManager.get(triggerPubId).invalidate();
+    await flushSendFrames();
+    expect(API.prototype.postDetailed).toHaveBeenCalledTimes(2);
+    expect(received).toHaveLength(2);
+  });
+
+  it("transmet undefined à une méthode @post sur une erreur de transport", async () => {
+    const bodyPubId = "postSpecHandlerTransportBody";
+    PublisherManager.get(bodyPubId).set({ tick: 1 });
+    const bodyKey = new DataProviderKey<{ tick: number }>(bodyPubId);
+    const ep = new Endpoint<{ ok: boolean }>("items/handler-transport");
+    const localPost = post(ep, bodyKey, {
+      autoPostOnBodyMutation: false,
+    });
+    const received: Array<ApiResult<{ ok: boolean }> | undefined> = [];
+    vi.mocked(API.prototype.postDetailed).mockRejectedValueOnce(
+      new Error("network failure"),
+    );
+    const tag = "test-api-post-handler-transport";
+
+    class C extends HTMLElement {
+      @localPost
+      onPayload(payload: ApiResult<{ ok: boolean }> | undefined) {
+        received.push(payload);
+      }
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("serviceURL", "https://api.example.test");
+    const el = document.createElement(tag) as InstanceType<typeof C>;
+    wrap.appendChild(el);
+    document.body.appendChild(wrap);
+    await flushSendFrames();
+
+    await expect(localPost.send(el)).rejects.toThrow("network failure");
+    expect(received).toEqual([undefined]);
+  });
 });
 
 describe("put / patch", () => {
@@ -319,11 +404,15 @@ describe("put / patch", () => {
     PublisherManager.get(bodyPubId).set({ name: "x" });
     const bodyKey = new DataProviderKey<{ name: string }>(bodyPubId);
     const ep = new Endpoint<{ ok: boolean }>("items/1");
+    const localPut = put(ep, bodyKey);
+    const received: Array<ApiResult<{ ok: boolean }> | undefined> = [];
     const tag = "test-api-put";
 
     class C extends HTMLElement {
-      @put(ep, bodyKey)
-      payload: ApiResult<{ ok: boolean }> | null = null;
+      @localPut
+      onPayload(payload: ApiResult<{ ok: boolean }> | undefined) {
+        received.push(payload);
+      }
     }
     if (!customElements.get(tag)) {
       customElements.define(tag, C);
@@ -338,6 +427,7 @@ describe("put / patch", () => {
     expect(API.prototype.putDetailed).toHaveBeenCalledWith("items/1", {
       name: "x",
     });
+    expect(received).toHaveLength(1);
   });
 
   it("@patch appelle patchDetailed", async () => {
@@ -348,11 +438,15 @@ describe("put / patch", () => {
     PublisherManager.get(bodyPubId).set({ name: "y" });
     const bodyKey = new DataProviderKey<{ name: string }>(bodyPubId);
     const ep = new Endpoint<{ ok: boolean }>("items/1");
+    const localPatch = patch(ep, bodyKey);
+    const received: Array<ApiResult<{ ok: boolean }> | undefined> = [];
     const tag = "test-api-patch";
 
     class C extends HTMLElement {
-      @patch(ep, bodyKey)
-      payload: ApiResult<{ ok: boolean }> | null = null;
+      @localPatch
+      onPayload(payload: ApiResult<{ ok: boolean }> | undefined) {
+        received.push(payload);
+      }
     }
     if (!customElements.get(tag)) {
       customElements.define(tag, C);
@@ -367,5 +461,6 @@ describe("put / patch", () => {
     expect(API.prototype.patchDetailed).toHaveBeenCalledWith("items/1", {
       name: "y",
     });
+    expect(received).toHaveLength(1);
   });
 });

package/src/core/decorators/api.spec.ts

@@ -190,6 +190,96 @@ describe("get", () => {
     expect(el.payload?.result).toEqual({ id: "loaded" });
   });
 
+  it("transmet le payload complet à une méthode @get", async () => {
+    const itemEp = new Endpoint<{ id: string }>("items/handler");
+    const received: Array<ApiResult<{ id: string }> | undefined> = [];
+    const tag = "test-api-get-handler";
+    const errorPayload = mockPayload({ id: "error" });
+    errorPayload.response = new Response(JSON.stringify({ error: true }), {
+      status: 422,
+      headers: { "Content-Type": "application/json" },
+    });
+    vi.mocked(API.prototype.getDetailed).mockResolvedValueOnce(
+      errorPayload as never,
+    );
+
+    class C extends HTMLElement {
+      @get(itemEp)
+      onPayload(payload: ApiResult<{ id: string }> | undefined) {
+        received.push(payload);
+      }
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("serviceURL", "https://api.example.test");
+    wrap.appendChild(document.createElement(tag));
+    document.body.appendChild(wrap);
+    await flushGetFrames();
+
+    expect(received).toHaveLength(1);
+    expect(received[0]?.result).toEqual({ id: "error" });
+    expect(received[0]?.response?.status).toBe(422);
+    expect(received[0]?.request.url).toContain("api.example.test");
+  });
+
+  it("transmet undefined à une méthode @get quand aucun payload n'est produit", async () => {
+    vi.mocked(API.prototype.getDetailed).mockResolvedValueOnce(undefined);
+    const itemEp = new Endpoint<{ id: string }>("items/handler-error");
+    const received: Array<ApiResult<{ id: string }> | undefined> = [];
+    const tag = "test-api-get-handler-undefined";
+
+    class C extends HTMLElement {
+      @get(itemEp)
+      onPayload(payload: ApiResult<{ id: string }> | undefined) {
+        received.push(payload);
+      }
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("serviceURL", "https://api.example.test");
+    wrap.appendChild(document.createElement(tag));
+    document.body.appendChild(wrap);
+    await flushGetFrames();
+
+    expect(received).toEqual([undefined]);
+  });
+
+  it("permet d'appliquer un handle get directement à une méthode", async () => {
+    const itemEp = new Endpoint<{ id: string }>("items/method");
+    const localGet = get(itemEp);
+    const received: Array<ApiResult<{ id: string }> | undefined> = [];
+    const tag = "test-api-get-method-handler";
+
+    class C extends HTMLElement {
+      @localGet
+      onPayload(payload: ApiResult<{ id: string }> | undefined) {
+        received.push(payload);
+      }
+    }
+    if (!customElements.get(tag)) {
+      customElements.define(tag, C);
+    }
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("serviceURL", "https://api.example.test");
+    const el = document.createElement(tag) as InstanceType<typeof C>;
+    wrap.appendChild(el);
+    document.body.appendChild(wrap);
+    await flushGetFrames();
+
+    expect(received).toHaveLength(1);
+    expect(received[0]?.result).toEqual({ id: "loaded" });
+
+    await localGet.refetch(el);
+    expect(received).toHaveLength(2);
+  });
+
   it("expose un refetch local avant et après le premier payload", async () => {
     const pubId = "getSpecLocalRefetch";
     PublisherManager.get(pubId).set(staticConfig);