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

package/dist/frontendAdapters/react/useShape.js

@@ -8,27 +8,97 @@
 // according to those terms.
 // SPDX-License-Identifier: Apache-2.0 OR MIT
 import { useDeepSignal } from "@ng-org/alien-deepsignals/react";
-import { useEffect, useMemo } from "react";
-import { createSignalObjectForShape } from "../../connector/createSignalObjectForShape.js";
+import { useEffect, useMemo, useRef } from "react";
+import { OrmConnection } from "../../connector/ormConnectionHandler.js";
 /**
+ * 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>
+    );
+}
+```
  */
-const useShape = (shape, scope = "") => {
-    const signalHandler = useMemo(() => scope === undefined
-        ? undefined
-        : createSignalObjectForShape(shape, scope), [shape, scope]);
+const useShape = (shape, scope = {}) => {
+    const parsedScope = typeof scope === "string"
+        ? { graphs: [scope] }
+        : Array.isArray(scope)
+            ? { graphs: scope }
+            : scope;
+    const prevOrmConnection = useRef(undefined);
+    const ormConnection = useMemo(() => {
+        if (scope === undefined)
+            return undefined;
+        if (prevOrmConnection.current)
+            prevOrmConnection.current.close();
+        const newOrmConnection = OrmConnection.getOrCreate(shape, parsedScope);
+        prevOrmConnection.current = newOrmConnection;
+        return newOrmConnection;
+    }, [shape, scope, parsedScope.graphs, parsedScope.subjects]);
     useEffect(() => {
-        if (!signalHandler)
+        if (!ormConnection)
             return;
         return () => {
-            signalHandler.stop();
+            ormConnection.close();
         };
-    }, [signalHandler]);
-    const state = useDeepSignal(signalHandler?.signalObject ?? readOnlySet);
+    }, [ormConnection]);
+    const state = useDeepSignal(ormConnection?.signalObject ?? readOnlySet);
     return state;
 };
 const readOnlySet = new Proxy(new Set(), {

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/frontendAdapters/svelte/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/frontendAdapters/svelte/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC"}

package/dist/frontendAdapters/svelte/index.js

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

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

@@ -0,0 +1,85 @@
+import { UseDeepSignalResult } from "@ng-org/alien-deepsignals/svelte";
+import { DiscreteRootArray, DiscreteRootObject } from "../../types.ts";
+/**
+ * Svelte version 3/4 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 `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 The reactive JSON object of the CRDT document.
+ *
+ *@example
+```svelte
+<script lang="ts">
+
+    // We assume you have created a CRDT document already, as below.
+    // const documentId = await ng.doc_create(
+    //     session_id,
+    //     crdt, // "Automerge" | "YMap" | "YArray"
+    //     crdt === "Automerge" ? "data:json" : crdt === "YMap ? "data:map" : "data:array",
+    //     "store",
+    //     undefined
+
+    const data = useDiscrete(documentIdPromise);
+
+    // If the CRDT document is still empty, we need to initialize it.
+    if (data && !data.expenses) {
+        data.expenses = [];
+    }
+
+    // Call data.expenses.push({title: "Example title"}), to add new elements.
+
+
+    // 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
+</script>
+
+<section>
+    <div>
+        {#if !data}
+            Loading...
+        {:else if data.expenses.length === 0}
+        <p>
+            Nothing tracked yet - log your first purchase to kick things off.
+        </p>
+        {:else}
+        {#each data.expenses as expense, index (expense['@id']) }
+            <ExpenseCard
+            expense={expense}
+            />
+        {/each}
+        {/if}
+    </div>
+</section>
+```
+
+---
+In the ExpenseCard component:
+```svelte
+    let {
+        expense = $bindable(),
+    }: { expense: Expense; } = $props();
+</script>
+
+<div>
+    <input
+        value={expense.title ?? ""}
+        oninput={(event) => {expense.title = event.currentTarget?.value ?? ""}}
+        placeholder="Expense title"
+    />
+</div>
+```
+
+ */
+export declare function useDiscrete(documentIdOrPromise: string | Promise<string>): UseDeepSignalResult<DiscreteRootArray | DiscreteRootObject | undefined>;
+//# sourceMappingURL=useDiscrete.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDiscrete.svelte.d.ts","sourceRoot":"","sources":["../../../src/frontendAdapters/svelte/useDiscrete.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,EAEH,mBAAmB,EACtB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgFG;AACH,wBAAgB,WAAW,CACvB,mBAAmB,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,GAC9C,mBAAmB,CAAC,iBAAiB,GAAG,kBAAkB,GAAG,SAAS,CAAC,CAgCzE"}

package/dist/frontendAdapters/svelte/useDiscrete.svelte.js

@@ -0,0 +1,124 @@
+// 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 { onDestroy } from "svelte";
+import { useDeepSignal, } from "@ng-org/alien-deepsignals/svelte";
+import { DiscreteOrmConnection } from "../../connector/discrete/discreteOrmConnectionHandler.js";
+/**
+ * Svelte version 3/4 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 `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 The reactive JSON object of the CRDT document.
+ *
+ *@example
+```svelte
+<script lang="ts">
+
+    // We assume you have created a CRDT document already, as below.
+    // const documentId = await ng.doc_create(
+    //     session_id,
+    //     crdt, // "Automerge" | "YMap" | "YArray"
+    //     crdt === "Automerge" ? "data:json" : crdt === "YMap ? "data:map" : "data:array",
+    //     "store",
+    //     undefined
+
+    const data = useDiscrete(documentIdPromise);
+
+    // If the CRDT document is still empty, we need to initialize it.
+    if (data && !data.expenses) {
+        data.expenses = [];
+    }
+
+    // Call data.expenses.push({title: "Example title"}), to add new elements.
+
+
+    // 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
+</script>
+
+<section>
+    <div>
+        {#if !data}
+            Loading...
+        {:else if data.expenses.length === 0}
+        <p>
+            Nothing tracked yet - log your first purchase to kick things off.
+        </p>
+        {:else}
+        {#each data.expenses as expense, index (expense['@id']) }
+            <ExpenseCard
+            expense={expense}
+            />
+        {/each}
+        {/if}
+    </div>
+</section>
+```
+
+---
+In the ExpenseCard component:
+```svelte
+    let {
+        expense = $bindable(),
+    }: { expense: Expense; } = $props();
+</script>
+
+<div>
+    <input
+        value={expense.title ?? ""}
+        oninput={(event) => {expense.title = event.currentTarget?.value ?? ""}}
+        placeholder="Expense title"
+    />
+</div>
+```
+
+ */
+export function useDiscrete(documentIdOrPromise) {
+    let connection;
+    let isDestroyed = false;
+    const objectPromise = new Promise((resolve) => {
+        const init = (docId) => {
+            if (isDestroyed)
+                return;
+            connection = DiscreteOrmConnection.getOrCreate(docId);
+            connection.readyPromise.then(() => {
+                if (isDestroyed) {
+                    connection?.close();
+                    return;
+                }
+                resolve(connection.signalObject);
+            });
+        };
+        if (typeof documentIdOrPromise === "string") {
+            init(documentIdOrPromise);
+        }
+        else {
+            documentIdOrPromise.then(init);
+        }
+    });
+    onDestroy(() => {
+        isDestroyed = true;
+        if (connection) {
+            connection.close();
+        }
+    });
+    return useDeepSignal(objectPromise);
+}

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

@@ -7,8 +7,70 @@ export interface UseShapeRuneResult<T extends object> extends UseDeepSignalResul
     root: any;
 }
 /**
- * Shape-specific rune: constructs the signal object for a shape then delegates to {@link useDeepSignal}.
+ * Hook to subscribe to RDF data in the graph database using a shape, see {@link ShapeType}.
+ *
+ * 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} in which the objects should be.
+ * @returns A {@link DeepSignalSet} containing the objects matching the shape type and scope.
+ *
+ * @example
+```svelte
+<script lang="ts">
+    // Gets all expense objects with `@id` <s1 IRI> or <s2 IRI> and `@graph` <g1 IRI> or <g2 IRI>
+    const expenses: DeepSignalSet<Expense> = useShape(ExpenseShape,
+        {graphs: ["<g1 IRI>", "<g2 IRI>"],
+        subjects: ["<s1 IRI>", "<s2 IRI>"]});
+
+    const expensesSorted = computed(() => expenses.sort((a, b) =>
+        a.dateOfPurchase.localeCompare(b.dateOfPurchase)
+    ));
+
+    // Call expenses.add({"@graph": "<g1 or g2 IRI>", "@id": "", title: "Example title"}), to add new elements.
+    // Leave `@id` an empty string to auto-generate a subject IRI (adjust your scope accordingly).
+
+    // 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`.
+</script>
+
+<section>
+    <div>
+        {# if expensesSorted.length === 0}
+        <p>
+            No expense yet.
+        </p>
+        {:else}
+        {#each expensesSorted as expense, index (expense['@id']) }
+            <ExpenseCard
+            expense={expense}
+            />
+        {/each}
+        {/if}
+    </div>
+</section>
+```
+
+---
+In the ExpenseCard component:
+```svelte
+
+  let {
+    expense = $bindable(),
+  }: { expense: Expense; } = $props();
+</script>
+
+<div>
+  <input
+    value={expense.title ?? ""}
+    oninput={(event) => {expense.title = event.currentTarget!.value}}
+    placeholder="Expense title"
+  />
+</div>
+```
  */
-export declare function useShapeRune<T extends BaseType>(shape: ShapeType<T>, scope?: Scope): UseShapeRuneResult<Set<T>>;
-export default useShapeRune;
+export declare function useShape<T extends BaseType>(shape: ShapeType<T>, scope?: Scope): UseShapeRuneResult<Set<T>>;
+export default useShape;
 //# sourceMappingURL=useShape.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useShape.svelte.d.ts","sourceRoot":"","sources":["../../../src/frontendAdapters/svelte/useShape.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAEH,KAAK,mBAAmB,EAC3B,MAAM,kCAAkC,CAAC;AAE1C,YAAY,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAE5E,sFAAsF;AACtF,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAChD,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC9B,IAAI,EAAE,GAAG,CAAC;CACb;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,QAAQ,EAC3C,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EACnB,KAAK,CAAC,EAAE,KAAK,GACd,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAU5B;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"useShape.svelte.d.ts","sourceRoot":"","sources":["../../../src/frontendAdapters/svelte/useShape.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAEH,KAAK,mBAAmB,EAC3B,MAAM,kCAAkC,CAAC;AAG1C,YAAY,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAE5E,sFAAsF;AACtF,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAChD,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC9B,IAAI,EAAE,GAAG,CAAC;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,QAAQ,EACvC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EACnB,KAAK,GAAE,KAAU,GAClB,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAU5B;AAED,eAAe,QAAQ,CAAC"}

package/dist/frontendAdapters/svelte/useShape.svelte.js

@@ -7,16 +7,78 @@
 // notice may not be copied, modified, or distributed except
 // according to those terms.
 // SPDX-License-Identifier: Apache-2.0 OR MIT
-import { createSignalObjectForShape } from "../../connector/createSignalObjectForShape.js";
 import { onDestroy } from "svelte";
 import { useDeepSignal, } from "@ng-org/alien-deepsignals/svelte";
+import { OrmConnection } from "../../connector/ormConnectionHandler.js";
 /**
- * Shape-specific rune: constructs the signal object for a shape then delegates to {@link useDeepSignal}.
+ * Hook to subscribe to RDF data in the graph database using a shape, see {@link ShapeType}.
+ *
+ * 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} in which the objects should be.
+ * @returns A {@link DeepSignalSet} containing the objects matching the shape type and scope.
+ *
+ * @example
+```svelte
+<script lang="ts">
+    // Gets all expense objects with `@id` <s1 IRI> or <s2 IRI> and `@graph` <g1 IRI> or <g2 IRI>
+    const expenses: DeepSignalSet<Expense> = useShape(ExpenseShape,
+        {graphs: ["<g1 IRI>", "<g2 IRI>"],
+        subjects: ["<s1 IRI>", "<s2 IRI>"]});
+
+    const expensesSorted = computed(() => expenses.sort((a, b) =>
+        a.dateOfPurchase.localeCompare(b.dateOfPurchase)
+    ));
+
+    // Call expenses.add({"@graph": "<g1 or g2 IRI>", "@id": "", title: "Example title"}), to add new elements.
+    // Leave `@id` an empty string to auto-generate a subject IRI (adjust your scope accordingly).
+
+    // 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`.
+</script>
+
+<section>
+    <div>
+        {# if expensesSorted.length === 0}
+        <p>
+            No expense yet.
+        </p>
+        {:else}
+        {#each expensesSorted as expense, index (expense['@id']) }
+            <ExpenseCard
+            expense={expense}
+            />
+        {/each}
+        {/if}
+    </div>
+</section>
+```
+
+---
+In the ExpenseCard component:
+```svelte
+
+  let {
+    expense = $bindable(),
+  }: { expense: Expense; } = $props();
+</script>
+
+<div>
+  <input
+    value={expense.title ?? ""}
+    oninput={(event) => {expense.title = event.currentTarget!.value}}
+    placeholder="Expense title"
+  />
+</div>
+```
  */
-export function useShapeRune(shape, scope) {
-    const { signalObject: rootSignal, stop } = createSignalObjectForShape(shape, scope);
-    onDestroy(stop);
+export function useShape(shape, scope = {}) {
+    const { signalObject: rootSignal, close } = OrmConnection.getOrCreate(shape, scope);
+    onDestroy(close);
     const ds = useDeepSignal(rootSignal);
     return { root: rootSignal, ...ds };
 }
-export default useShapeRune;
+export default useShape;

package/dist/frontendAdapters/vue/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/vue/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/frontendAdapters/vue/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/vue/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC"}

package/dist/frontendAdapters/vue/index.js

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

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

@@ -0,0 +1,92 @@
+import { MaybeRefOrGetter } from "vue";
+import { type 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 `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.
+ *
+ *@example
+```html
+<script lang="ts">
+// We assume you have created a CRDT document already, as below.
+// const documentId = await ng.doc_create(
+//     session_id,
+//     crdt, // "Automerge" | "YMap" | "YArray"
+//     crdt === "Automerge" ? "data:json" : crdt === "YMap ? "data:map" : "data:array",
+//     "store",
+//     undefined
+// );
+const { data } = useDiscrete(documentId);
+
+// If document is new, we need to set up the basic structure.
+if (data && !data.expenses) {
+    data.expenses = [];
+}
+
+// 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
+</script>
+
+<template>
+    <div v-if="!data">
+        Loading...
+    </div>
+    <div v-else>
+        <p v-if="expensesSorted.length === 0">
+            No expenses yet.
+        </p>
+        <template v-else>
+            <ExpenseCard
+                v-for="expense in expenses"
+                :key="expense['@id']"
+                :expense="expense"
+            />
+        </template>
+    </div>
+</template>
+```
+
+In the `ExpenseCard` component:
+```html
+<script lang="ts">
+const props = defineProps<{
+    expense: DeepSignal<Expense>;
+}>();
+
+// Important!
+// In vue, you need to wrap children into useDeepSignal hooks,
+// to ensure the component re-renders on changes coming from
+// other components or the backend.
+const expense = useDeepSignal(props.expense);
+
+// If you modify expense in the component,
+// the changes are immediately propagated to the other components
+// And persisted in the database.
+</script>
+
+<template>
+    <input
+        v-model="expense.title"
+        placeholder="Expense title"
+    />
+</template>
+```
+ */
+export declare function useDiscrete(documentId: MaybeRefOrGetter<string | undefined>): {
+    data: import("vue").ComputedRef<DeepSignal<DiscreteArray | DiscreteObject> | undefined>;
+};
+//# sourceMappingURL=useDiscrete.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDiscrete.d.ts","sourceRoot":"","sources":["../../../src/frontendAdapters/vue/useDiscrete.ts"],"names":[],"mappings":"AAUA,OAAO,EAAY,gBAAgB,EAA4B,MAAM,KAAK,CAAC;AAC3E,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAG5D,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAI/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG;AACH,wBAAgB,WAAW,CAAC,UAAU,EAAE,gBAAgB,CAAC,MAAM,GAAG,SAAS,CAAC;;EAuB3E"}