@ng-org/orm 0.1.2-alpha.5 → 0.1.2-alpha.7

package/dist/connector/ormConnectionHandler.js

@@ -10,6 +10,8 @@
 import { applyPatchesToDeepSignal } from "./applyPatches.js";
 import { ngSession } from "./initNg.js";
 import { deepSignal, watch as watchDeepSignal, batch, } from "@ng-org/alien-deepsignals";
+import { deepPatchesToWasm } from "./utils.js";
+const WAIT_BEFORE_CLOSE = 500;
 export class OrmConnection {
     static idToEntry = new Map();
     /**
@@ -17,38 +19,45 @@ export class OrmConnection {
      * Useful when a hook unsubscribes and resubscribes in a short time interval
      * so that no new connections need to be set up.
      */
-    WAIT_BEFORE_RELEASE = 500;
     shapeType;
     scope;
     signalObject;
+    stopSignalListening;
+    subscriptionId;
     refCount;
     /** Identifier as a combination of shape type and scope. Prevents duplications. */
     identifier;
     suspendDeepWatcher;
+    inTransaction = false;
+    /** Aggregation of patches to be sent when in transaction. */
+    pendingPatches;
     readyPromise;
-    cancel;
+    closeOrmConnection;
     /** Promise that resolves once initial data has been applied. */
     resolveReady;
     // FinalizationRegistry to clean up connections when signal objects are GC'd.
     static cleanupSignalRegistry = typeof FinalizationRegistry === "function"
         ? new FinalizationRegistry((connectionId) => {
+            console.log("finalization called for", connectionId);
             // Best-effort fallback; look up by id and clean
             const entry = this.idToEntry.get(connectionId);
-            //console.log("cleaning up connection",connectionId)
+            console.log("cleaning up connection", connectionId);
             if (!entry)
                 return;
-            entry.release();
+            entry.close();
         })
         : null;
     constructor(shapeType, scope) {
         // @ts-expect-error
         window.ormSignalConnections = OrmConnection.idToEntry;
+        // @ts-expect-error
+        window.OrmConnection = OrmConnection;
         this.shapeType = shapeType;
         this.scope = scope;
         this.refCount = 1;
-        this.cancel = () => { };
+        this.closeOrmConnection = () => { };
         this.suspendDeepWatcher = false;
-        this.identifier = `${shapeType.shape}::${canonicalScope(scope)}`;
+        this.identifier = `${shapeType.shape}|${canonicalScope(scope)}`;
         this.signalObject = deepSignal(new Set(), {
             propGenerator: this.signalObjectPropGenerator,
             // Don't set syntheticIdPropertyName - let propGenerator handle all ID logic
@@ -57,16 +66,15 @@ export class OrmConnection {
         // Schedule cleanup of the connection when the signal object is GC'd.
         OrmConnection.cleanupSignalRegistry?.register(this.signalObject, this.identifier, this.signalObject);
         // Add listener to deep signal object to report changes back to wasm land.
-        watchDeepSignal(this.signalObject, this.onSignalObjectUpdate);
+        const { stopListening } = watchDeepSignal(this.signalObject, this.onSignalObjectUpdate);
+        this.stopSignalListening = stopListening;
         // Initialize per-entry readiness promise that resolves in setUpConnection
         this.readyPromise = new Promise((resolve) => {
             this.resolveReady = resolve;
         });
         ngSession.then(async ({ ng, session }) => {
-            //console.log("Creating orm connection. ng and session", ng, session);
             try {
-                //await new Promise((resolve) => setTimeout(resolve, 4_000));
-                this.cancel = await ng.orm_start(scope.length == 0 ? "" : scope, shapeType, session.session_id, this.onBackendMessage);
+                this.closeOrmConnection = await ng.orm_start_graph(scope.graphs ?? ["did:ng:i"], scope.subjects ?? [], shapeType, session.session_id, this.onBackendMessage);
             }
             catch (e) {
                 console.error(e);
@@ -74,16 +82,16 @@ export class OrmConnection {
         });
     }
     /**
-     * Get a connection which contains the ORM and lifecycle methods.
+     * Get or create a connection which contains the ORM and lifecycle methods.
      * @param shapeType
      * @param scope
      * @param ng
      * @returns
      */
-    static getConnection = (shapeType, scope) => {
+    static getOrCreate = (shapeType, scope) => {
         const scopeKey = canonicalScope(scope);
         // Unique identifier for a given shape type and scope.
-        const identifier = `${shapeType.shape}::${scopeKey}`;
+        const identifier = `${shapeType.shape}|${scopeKey}`;
         // If we already have an object for this shape+scope,
         // return it and just increase the reference count.
         // Otherwise, create new one.
@@ -98,39 +106,45 @@ export class OrmConnection {
             return newConnection;
         }
     };
-    release = () => {
+    close = () => {
         setTimeout(() => {
             if (this.refCount > 0)
                 this.refCount--;
             if (this.refCount === 0) {
                 OrmConnection.idToEntry.delete(this.identifier);
                 OrmConnection.cleanupSignalRegistry?.unregister(this.signalObject);
-                this.cancel();
+                this.closeOrmConnection();
             }
-        }, this.WAIT_BEFORE_RELEASE);
+        }, WAIT_BEFORE_CLOSE);
     };
     onSignalObjectUpdate = async ({ patches }) => {
         if (this.suspendDeepWatcher || !patches.length)
             return;
         const ormPatches = deepPatchesToWasm(patches);
+        // If in transaction, collect patches immediately (no await before).
+        if (this.inTransaction) {
+            this.pendingPatches?.push(...ormPatches);
+            return;
+        }
         // Wait for session and subscription to be initialized.
         const { ng, session } = await ngSession;
         await this.readyPromise;
-        ng.orm_update(this.scope.length == 0 ? "" : this.scope, this.shapeType.shape, ormPatches, session.session_id);
+        ng.graph_orm_update(this.subscriptionId, ormPatches, session.session_id);
     };
     onBackendMessage = (message) => {
         const data = message?.V0;
-        if (data?.OrmInitial) {
-            this.handleInitialResponse(data.OrmInitial);
+        if (data?.GraphOrmInitial) {
+            this.handleInitialResponse(data.GraphOrmInitial);
         }
-        else if (data?.OrmUpdate) {
-            this.onBackendUpdate(data.OrmUpdate);
+        else if (data?.GraphOrmUpdate) {
+            this.onBackendUpdate(data.GraphOrmUpdate);
         }
         else {
             console.warn("Received unknown ORM message from backend", message);
         }
     };
-    handleInitialResponse = (initialData) => {
+    handleInitialResponse = ([initialData, subscriptionId]) => {
+        this.subscriptionId = subscriptionId;
         // Assign initial data to empty signal object without triggering watcher at first.
         this.suspendDeepWatcher = true;
         batch(() => {
@@ -150,7 +164,7 @@ export class OrmConnection {
     };
     onBackendUpdate = (patches) => {
         this.suspendDeepWatcher = true;
-        applyPatchesToDeepSignal(this.signalObject, patches);
+        applyPatchesToDeepSignal(this.signalObject, patches, "set");
         // Use queueMicrotask to ensure watcher is re-enabled _after_ batch completes
         queueMicrotask(() => {
             this.suspendDeepWatcher = false;
@@ -198,19 +212,37 @@ export class OrmConnection {
             syntheticId: graphIri + "|" + subjectIri,
         };
     };
-}
-/**
- * Converts DeepSignal patches to ORM Wasm-compatible patches
- * @param patches DeepSignal patches
- * @returns Patches with stringified path
- */
-export function deepPatchesToWasm(patches) {
-    return patches.flatMap((patch) => {
-        if (patch.op === "add" && patch.type === "set" && !patch.value?.length)
-            return [];
-        const path = "/" + patch.path.join("/");
-        return { ...patch, path };
-    });
+    beginTransaction = () => {
+        this.inTransaction = true;
+        this.pendingPatches = [];
+        // Use a listener that immediately triggers on object modifications.
+        // We don't need the deep-signal's batching (through microtasks) here.
+        this.stopSignalListening();
+        const { stopListening } = watchDeepSignal(this.signalObject, this.onSignalObjectUpdate, { triggerInstantly: true });
+        this.stopSignalListening = stopListening;
+    };
+    commitTransaction = async () => {
+        if (!this.inTransaction) {
+            throw new Error("No transaction is open. Call `beginTransaction` first.");
+        }
+        const { ng, session } = await ngSession;
+        await this.readyPromise;
+        this.inTransaction = false;
+        if (this.pendingPatches?.length == 0) {
+            // Nothing to send to the backend.
+        }
+        else {
+            // Send patches to backend.
+            await ng.graph_orm_update(this.subscriptionId, this.pendingPatches, session.session_id);
+        }
+        this.pendingPatches = undefined;
+        // Go back to the regular object modification listening where we want batching
+        // scheduled in a microtask only triggered after the main task.
+        // This way we prevent excessive calls to the backend.
+        this.stopSignalListening();
+        const { stopListening } = watchDeepSignal(this.signalObject, this.onSignalObjectUpdate);
+        this.stopSignalListening = stopListening;
+    };
 }
 const parseOrmInitialObject = (obj) => {
     // Regular arrays become sets.
@@ -231,10 +263,12 @@ const parseOrmInitialObject = (obj) => {
     }
     return obj;
 };
+/**
+ * Creates a string out of the scope in the format
+ * `graphIri1,graphIri2|subjectIri1,subjectIri2`
+ */
 function canonicalScope(scope) {
-    if (scope == null)
+    if (!scope)
         return "";
-    return Array.isArray(scope)
-        ? scope.slice().sort().join(",")
-        : String(scope);
+    return `${(scope.graphs || []).slice().sort().join(",")}|${(scope.subjects || []).slice().sort().join(",")}`;
 }

package/dist/connector/utils.d.ts

@@ -0,0 +1,14 @@
+import type { DeepPatch } from "@ng-org/alien-deepsignals";
+import { Patch } from "./applyPatches.ts";
+/**
+ * Deep clone function with support for Sets and Maps.
+ * Function generated by Claude Opus 4.5
+ */
+export declare const deepClone: <T>(object: T, seen?: WeakMap<WeakKey, any>) => T;
+/**
+ * Converts DeepSignal patches to ORM Wasm-compatible patches
+ * @param patches DeepSignal patches
+ * @returns Patches with stringified path
+ */
+export declare function deepPatchesToWasm(patches: DeepPatch[]): Patch[];
+//# sourceMappingURL=utils.d.ts.map

package/dist/connector/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/connector/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C;;;GAGG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,EAAE,QAAQ,CAAC,EAAE,4BAAoB,KAAG,CAwD9D,CAAC;AAEF;;;;GAIG;AAEH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,CAO/D"}

package/dist/connector/utils.js

@@ -0,0 +1,65 @@
+/**
+ * Deep clone function with support for Sets and Maps.
+ * Function generated by Claude Opus 4.5
+ */
+export const deepClone = (object, seen = new WeakMap()) => {
+    // Handle primitives and null
+    if (object === null || typeof object !== "object") {
+        return object;
+    }
+    // Handle circular references
+    if (seen.has(object)) {
+        return seen.get(object);
+    }
+    // Handle Date
+    if (object instanceof Date) {
+        return new Date(object.getTime());
+    }
+    // Handle Set
+    if (object instanceof Set) {
+        const clonedSet = new Set();
+        seen.set(object, clonedSet);
+        for (const item of object) {
+            clonedSet.add(deepClone(item, seen));
+        }
+        return clonedSet;
+    }
+    // Handle Map
+    if (object instanceof Map) {
+        const clonedMap = new Map();
+        seen.set(object, clonedMap);
+        for (const [key, value] of object) {
+            clonedMap.set(deepClone(key, seen), deepClone(value, seen));
+        }
+        return clonedMap;
+    }
+    // Handle Array
+    if (Array.isArray(object)) {
+        const clonedArray = [];
+        seen.set(object, clonedArray);
+        for (const item of object) {
+            clonedArray.push(deepClone(item, seen));
+        }
+        return clonedArray;
+    }
+    // Handle plain objects
+    const clonedObject = {};
+    seen.set(object, clonedObject);
+    for (const key of Object.keys(object)) {
+        clonedObject[key] = deepClone(object[key], seen);
+    }
+    return clonedObject;
+};
+/**
+ * Converts DeepSignal patches to ORM Wasm-compatible patches
+ * @param patches DeepSignal patches
+ * @returns Patches with stringified path
+ */
+export function deepPatchesToWasm(patches) {
+    return patches.flatMap((patch) => {
+        if (patch.op === "add" && patch.type === "set" && !patch.value?.length)
+            return [];
+        const path = "/" + patch.path.join("/");
+        return { ...patch, path };
+    });
+}

package/dist/frontendAdapters/react/index.d.ts

@@ -1,3 +1,4 @@
 import useShape from "./useShape.ts";
-export { useShape };
+import { useDiscrete } from "./useDiscrete.ts";
+export { useShape, useDiscrete };
 //# sourceMappingURL=index.d.ts.map

package/dist/frontendAdapters/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/frontendAdapters/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/frontendAdapters/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC"}

package/dist/frontendAdapters/react/index.js

@@ -1,2 +1,3 @@
 import useShape from "./useShape.js";
-export { useShape };
+import { useDiscrete } from "./useDiscrete.js";
+export { useShape, useDiscrete };

package/dist/frontendAdapters/react/useDiscrete.d.ts

@@ -0,0 +1,84 @@
+import { DeepSignal } from "@ng-org/alien-deepsignals";
+import { DiscreteArray, DiscreteObject } from "../../types.ts";
+/**
+ * Hook to subscribe to discrete (JSON) CRDT documents.
+ * You can modify the returned object like any other JSON object. Changes are immediately
+ * reflected in the CRDT.
+ *
+ * Establishes a 2-way binding: Modifications to the object are immediately committed,
+ * changes coming from the backend (or other components) cause an immediate rerender.
+ *
+ * In comparison to {@link useShape}, discrete CRDTs are untyped.
+ * You can put any JSON data inside and need to validate the schema yourself.
+ *
+ * @param documentId The IRI of the crdt document.
+ * @returns An object that contains as `data` the reactive DeepSignal object or undefined if `documentId` is undefined.
+ *
+ *@example
+```tsx
+// We assume you have created a CRDT document already, as below.
+// const documentId = await ng.doc_create(
+//     session_id,
+//     crdt, // "Automerge" | "YMap" | "YArray". YArray is for root arrays, the other two have objects at root.
+//     crdt === "Automerge" ? "data:json" : crdt === "YMap ? "data:map" : "data:array",
+//     "store",
+//     undefined
+// );
+
+function Expenses({documentId}: {documentId: string}) {
+    const { data } = useDiscrete(documentIdPromise);
+
+    // If the CRDT document is still empty, we need to initialize it.
+    if (data && !data.expenses) {
+        data.expenses = [];
+    }
+    const expenses = data?.expenses;
+
+    const createExpense = useCallback(() => {
+            expenses.add({
+                title: "New expense",
+                dateOfPurchase: obj.dateOfPurchase ?? new Date().toISOString(),
+            });
+        },
+        [expenses]
+    );
+
+    // Loaded already?
+    if (!expenses) return <div>Loading...</div>;
+
+    // Note that we use expense["@id"] as a key in the expense list.
+    // Every object added to a CRDT array gets a stable `@id` property assigned
+    // which you can use for referencing objects in arrays even as
+    // objects are removed from the array. The ID is an IRI with the schema `<documentId>:d:<object-specific id>`.
+    // Since the `@id` is generated in the backend, the object is preliminarily
+    // given a mock id which will be replaced immediately
+
+    return (
+        <div>
+            <button
+                onClick={() => createExpense()}
+            >
+                + Add expense
+            </button>
+            <div>
+                {expenses.length === 0 ? (
+                    <p>
+                        No expenses yet.
+                    </p>
+                ) : (
+                    expenses.map((expense) => (
+                        <ExpenseCard
+                            key={expense["@id"]}
+                            expense={expense}
+                        />
+                    ))
+                )}
+            </div>
+        </div>
+    );
+}
+ */
+export declare function useDiscrete(documentId: string | undefined): {
+    data: DeepSignal<DiscreteArray | DiscreteObject> | undefined;
+};
+//# sourceMappingURL=useDiscrete.d.ts.map

package/dist/frontendAdapters/react/useDiscrete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDiscrete.d.ts","sourceRoot":"","sources":["../../../src/frontendAdapters/react/useDiscrete.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAI/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AAEH,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS;;EAmDzD"}

package/dist/frontendAdapters/react/useDiscrete.js

@@ -0,0 +1,127 @@
+// Copyright (c) 2026 Laurin Weger, Par le Peuple, NextGraph.org developers
+// All rights reserved.
+// Licensed under the Apache License, Version 2.0
+// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0>
+// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>,
+// at your option. All files in the project carrying such
+// notice may not be copied, modified, or distributed except
+// according to those terms.
+// SPDX-License-Identifier: Apache-2.0 OR MIT
+import { useEffect, useMemo, useRef } from "react";
+import { DiscreteOrmConnection } from "../../connector/discrete/discreteOrmConnectionHandler.js";
+import { useDeepSignal } from "@ng-org/alien-deepsignals/react";
+const EMPTY_OBJECT = {};
+/**
+ * Hook to subscribe to discrete (JSON) CRDT documents.
+ * You can modify the returned object like any other JSON object. Changes are immediately
+ * reflected in the CRDT.
+ *
+ * Establishes a 2-way binding: Modifications to the object are immediately committed,
+ * changes coming from the backend (or other components) cause an immediate rerender.
+ *
+ * In comparison to {@link useShape}, discrete CRDTs are untyped.
+ * You can put any JSON data inside and need to validate the schema yourself.
+ *
+ * @param documentId The IRI of the crdt document.
+ * @returns An object that contains as `data` the reactive DeepSignal object or undefined if `documentId` is undefined.
+ *
+ *@example
+```tsx
+// We assume you have created a CRDT document already, as below.
+// const documentId = await ng.doc_create(
+//     session_id,
+//     crdt, // "Automerge" | "YMap" | "YArray". YArray is for root arrays, the other two have objects at root.
+//     crdt === "Automerge" ? "data:json" : crdt === "YMap ? "data:map" : "data:array",
+//     "store",
+//     undefined
+// );
+
+function Expenses({documentId}: {documentId: string}) {
+    const { data } = useDiscrete(documentIdPromise);
+
+    // If the CRDT document is still empty, we need to initialize it.
+    if (data && !data.expenses) {
+        data.expenses = [];
+    }
+    const expenses = data?.expenses;
+
+    const createExpense = useCallback(() => {
+            expenses.add({
+                title: "New expense",
+                dateOfPurchase: obj.dateOfPurchase ?? new Date().toISOString(),
+            });
+        },
+        [expenses]
+    );
+
+    // Loaded already?
+    if (!expenses) return <div>Loading...</div>;
+
+    // Note that we use expense["@id"] as a key in the expense list.
+    // Every object added to a CRDT array gets a stable `@id` property assigned
+    // which you can use for referencing objects in arrays even as
+    // objects are removed from the array. The ID is an IRI with the schema `<documentId>:d:<object-specific id>`.
+    // Since the `@id` is generated in the backend, the object is preliminarily
+    // given a mock id which will be replaced immediately
+
+    return (
+        <div>
+            <button
+                onClick={() => createExpense()}
+            >
+                + Add expense
+            </button>
+            <div>
+                {expenses.length === 0 ? (
+                    <p>
+                        No expenses yet.
+                    </p>
+                ) : (
+                    expenses.map((expense) => (
+                        <ExpenseCard
+                            key={expense["@id"]}
+                            expense={expense}
+                        />
+                    ))
+                )}
+            </div>
+        </div>
+    );
+}
+ */
+export function useDiscrete(documentId) {
+    const prevDocumentId = useRef(undefined);
+    const prevOrmConnection = useRef(undefined);
+    const ormConnection = useMemo(() => {
+        // Close previous connection if documentId changed.
+        if (prevOrmConnection.current &&
+            prevDocumentId.current !== documentId) {
+            prevOrmConnection.current.close();
+            prevOrmConnection.current = undefined;
+        }
+        // If no documentId, return undefined.
+        if (!documentId) {
+            prevDocumentId.current = undefined;
+            return undefined;
+        }
+        // Create new connection only if needed.
+        if (!prevOrmConnection.current ||
+            prevDocumentId.current !== documentId) {
+            prevOrmConnection.current =
+                DiscreteOrmConnection.getOrCreate(documentId);
+            prevDocumentId.current = documentId;
+        }
+        return prevOrmConnection.current;
+    }, [documentId]);
+    useEffect(() => {
+        return () => {
+            prevOrmConnection.current?.close();
+        };
+    }, []);
+    // useDeepSignal requires an object, so pass empty object when no connection.
+    const signalSource = ormConnection?.signalObject ?? EMPTY_OBJECT;
+    const state = useDeepSignal(signalSource);
+    // Only return data if we have a valid connection with a signal object.
+    const data = ormConnection?.signalObject ? state : undefined;
+    return { data };
+}

package/dist/frontendAdapters/react/useShape.d.ts

@@ -1,13 +1,72 @@
 import type { BaseType } from "@ng-org/shex-orm";
 import type { ShapeType } from "@ng-org/shex-orm";
 import type { Scope } from "../../types.ts";
+import { DeepSignalSet } from "@ng-org/alien-deepsignals";
 /**
+ * Hook to subscribe to RDF data in the graph database using a shape, see {@link ShapeType}.
  *
- * @param shape The shape type
- * @param scope The document scope (IRI of named graph)
- * @returns A deep signal set with the orm objects, an empty set if still loading,
- *          or an empty set which errors on modifications if scope is undefined.
+ * Returns a {@link DeepSignalSet} of objects matching the shape and that are within the scope.
+ * Establishes a 2-way binding: Modifications to the object are immediately committed,
+ * changes coming from the backend (or other components) cause an immediate rerender.
+ *
+ * @param shape The {@link ShapeType} the objects should have (generated by the shex-orm tool).
+ * @param scope The {@link Scope} as graph, array of graphs or scope object with graphs and subjects.
+ * @returns A deep {@link DeepSignalSet} with the orm objects or an empty set, if still loading.\
+ *          If the scope is explicitly set to `undefined`, an empty set is returned which errors
+ *          if you try to make modifications on it.
+ *
+ * @example
+ ```tsx
+function Expenses() {
+    const expenses = useShape(ExpenseShapeType, {graphs: ["<graph IRI>"]});
+
+    const createExpense = useCallback(
+        () => {
+            expenses.add({
+                "@graph": `<graph IRI>`,
+                "@type": "http://example.org/Expense",
+                "@id": "", // Assigns id automatically, if set to "".
+                title: "New expense",
+                dateOfPurchase: obj.dateOfPurchase ?? new Date().toISOString(),
+            });
+        },
+        [expenses]
+    );
+
+    const expensesSorted = [...expenses].sort((a, b) =>
+        a.dateOfPurchase.localeCompare(b.dateOfPurchase)
+    );
+
+    // Not that if you use `@id` (the subject IRI) as key, you need to ensure that it is unique within your scope.
+    // If it is not, use the combination of `@graph` and `@id`.
+    
+    return (
+        <div>
+            <button
+                onClick={() => createExpense({})}
+            >
+                + Add expense
+            </button>
+            <div>
+                {expensesSorted.length === 0 ? (
+                    <p>
+                        No expenses yet.
+                    </p>
+                ) : (
+                    expensesSorted.map((expense) => (
+                        <ExpenseCard
+                            key={expense["@id"]}
+                            expense={expense}
+                            availableCategories={expenseCategories}
+                        />
+                    ))
+                )}
+            </div>
+        </div>
+    );
+}
+```
  */
-declare const useShape: <T extends BaseType>(shape: ShapeType<T>, scope?: Scope | undefined) => import("@ng-org/alien-deepsignals").DeepSignalSet<unknown> | import("@ng-org/alien-deepsignals").DeepSignalSet<T>;
+declare const useShape: <T extends BaseType>(shape: ShapeType<T>, scope?: Scope | string[] | string) => DeepSignalSet<T>;
 export default useShape;
 //# sourceMappingURL=useShape.d.ts.map

package/dist/frontendAdapters/react/useShape.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useShape.d.ts","sourceRoot":"","sources":["../../../src/frontendAdapters/react/useShape.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C;;;;;;GAMG;AACH,QAAA,MAAM,QAAQ,GAAI,CAAC,SAAS,QAAQ,EAChC,OAAO,SAAS,CAAC,CAAC,CAAC,EACnB,QAAO,KAAK,GAAG,SAAc,sHAqBhC,CAAC;AAiBF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"useShape.d.ts","sourceRoot":"","sources":["../../../src/frontendAdapters/react/useShape.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,QAAA,MAAM,QAAQ,GAAI,CAAC,SAAS,QAAQ,EAChC,OAAO,SAAS,CAAC,CAAC,CAAC,EACnB,QAAO,KAAK,GAAG,MAAM,EAAE,GAAG,MAAW,KA6BrB,aAAa,CAAC,CAAC,CAClC,CAAC;AAiBF,eAAe,QAAQ,CAAC"}