@ng-org/orm 0.1.2-alpha.1 → 0.1.2-alpha.10

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

@@ -1,14 +1,83 @@
-import type { Scope } from "../../types.ts";
+import { type Scope } from "../../types.ts";
 import type { BaseType, ShapeType } from "@ng-org/shex-orm";
-import { type UseDeepSignalResult } from "@ng-org/alien-deepsignals/svelte";
-export type { UseDeepSignalResult } from "@ng-org/alien-deepsignals/svelte";
-/** Extended result including the originating root signal wrapper from shape logic. */
-export interface UseShapeRuneResult<T extends object> extends UseDeepSignalResult<T> {
-    root: any;
-}
+import { DeepSignalSet } from "@ng-org/alien-deepsignals";
 /**
- * Shape-specific rune: constructs the signal object for a shape then delegates to {@link useDeepSignal}.
+ * Svelte 5 hook to subscribe to RDF data in the graph database using a shape, see {@link ShapeType}.
+ *
+ * Returns a {@link DeepSignalSet} that contain the 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 engine (or other components) cause an immediate rerender.
+ *
+ * @param shape The {@link ShapeType} the objects should have (generated by the `@ng-org/shex-orm` tool).
+ * @param scope The {@link Scope} as graph string or scope object with graphs and subjects.
+ * @returns A {@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
+ * ```svelte
+ * <script lang="ts">
+ *     // Gets all expense objects with `@id` <s1 IRI> or <s2 IRI> and `@graph` <g1 NURI> or <g2 NURI>
+ *     const expenses: DeepSignal<Set<Expense>> = useShape(ExpenseShapeType,
+ *         {graphs: ["<g1 NURI>", "<g2 NURI>"],
+ *         subjects: ["<s1 NURI>", "<s2 NURI>"]});
+ *
+ *     const expensesSorted = computed(() => expenses.sort((a, b) =>
+ *         a.dateOfPurchase.localeCompare(b.dateOfPurchase)
+ *     ));
+ *
+ *     const createExpense = () => {
+ *         expenses.add({
+ *             "@graph": `<graph NURI>`,
+ *             "@type": "http://example.org/Expense",
+ *             "@id": "", // Assigns ID automatically, if set to "".
+ *             title: "New expense",
+ *             dateOfPurchase: obj.dateOfPurchase ?? new Date().toISOString(),
+ *         });
+ *     };
+ *
+ *
+ *     // Note 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 (i.e. there are two graphs with the same subject), use the combination of `@graph` and `@id`.
+ * </script>
+ *
+ * <section>
+ *     <div>
+ *         <button on:click={() => createExpense()}>
+ *             + Add expense
+ *         </button>
+ *
+ *         {# 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
+ * <script lang="ts">
+ * let {
+ *     expense,
+ * }: { expense: DeepSignal<Expense>; } = $props();
+ * </script>
+ *
+ * <div>
+ *     <input
+ *         bind:value={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 | string | undefined): DeepSignalSet<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,EAAkB,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5D,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAK1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,QAAQ,EACvC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EACnB,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,GAClC,aAAa,CAAC,CAAC,CAAC,CAclB;AAED,eAAe,QAAQ,CAAC"}

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

@@ -7,16 +7,95 @@
 // 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 { normalizeScope } from "../../types.js";
 import { onDestroy } from "svelte";
-import { useDeepSignal, } from "@ng-org/alien-deepsignals/svelte";
+import { useDeepSignal } from "@ng-org/alien-deepsignals/svelte";
+import { OrmSubscription } from "../../connector/ormSubscriptionHandler.js";
+import { readOnlySet } from "../utils.js";
 /**
- * Shape-specific rune: constructs the signal object for a shape then delegates to {@link useDeepSignal}.
+ * Svelte 5 hook to subscribe to RDF data in the graph database using a shape, see {@link ShapeType}.
+ *
+ * Returns a {@link DeepSignalSet} that contain the 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 engine (or other components) cause an immediate rerender.
+ *
+ * @param shape The {@link ShapeType} the objects should have (generated by the `@ng-org/shex-orm` tool).
+ * @param scope The {@link Scope} as graph string or scope object with graphs and subjects.
+ * @returns A {@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
+ * ```svelte
+ * <script lang="ts">
+ *     // Gets all expense objects with `@id` <s1 IRI> or <s2 IRI> and `@graph` <g1 NURI> or <g2 NURI>
+ *     const expenses: DeepSignal<Set<Expense>> = useShape(ExpenseShapeType,
+ *         {graphs: ["<g1 NURI>", "<g2 NURI>"],
+ *         subjects: ["<s1 NURI>", "<s2 NURI>"]});
+ *
+ *     const expensesSorted = computed(() => expenses.sort((a, b) =>
+ *         a.dateOfPurchase.localeCompare(b.dateOfPurchase)
+ *     ));
+ *
+ *     const createExpense = () => {
+ *         expenses.add({
+ *             "@graph": `<graph NURI>`,
+ *             "@type": "http://example.org/Expense",
+ *             "@id": "", // Assigns ID automatically, if set to "".
+ *             title: "New expense",
+ *             dateOfPurchase: obj.dateOfPurchase ?? new Date().toISOString(),
+ *         });
+ *     };
+ *
+ *
+ *     // Note 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 (i.e. there are two graphs with the same subject), use the combination of `@graph` and `@id`.
+ * </script>
+ *
+ * <section>
+ *     <div>
+ *         <button on:click={() => createExpense()}>
+ *             + Add expense
+ *         </button>
+ *
+ *         {# 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
+ * <script lang="ts">
+ * let {
+ *     expense,
+ * }: { expense: DeepSignal<Expense>; } = $props();
+ * </script>
+ *
+ * <div>
+ *     <input
+ *         bind:value={expense.title}
+ *     />
+ * </div>
+ * ```
  */
-export function useShapeRune(shape, scope) {
-    const { signalObject: rootSignal, stop } = createSignalObjectForShape(shape, scope);
-    onDestroy(stop);
-    const ds = useDeepSignal(rootSignal);
-    return { root: rootSignal, ...ds };
+export function useShape(shape, scope) {
+    if (scope === undefined) {
+        return useDeepSignal(readOnlySet);
+    }
+    const { signalObject: rootSignal, close } = OrmSubscription.getOrCreate(shape, normalizeScope(scope));
+    onDestroy(close);
+    const shapeSignalSet = useDeepSignal(rootSignal);
+    return shapeSignalSet;
 }
-export default useShapeRune;
+export default useShape;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/frontendAdapters/svelte4/index.ts"],"names":[],"mappings":"AAUA,OAAO,QAAQ,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,mBAAmB,EAAE,CAAC"}

package/dist/{connector/createSignalObjectForShape.js → frontendAdapters/svelte4/index.js}

@@ -7,18 +7,6 @@
 // notice may not be copied, modified, or distributed except
 // according to those terms.
 // SPDX-License-Identifier: Apache-2.0 OR MIT
-import { OrmConnection } from "./ormConnectionHandler.js";
-/**
- *
- * @param shapeType
- * @param scope
- * @returns
- */
-export function createSignalObjectForShape(shapeType, scope) {
-    const connection = OrmConnection.getConnection(shapeType, scope || "");
-    return {
-        signalObject: connection.signalObject,
-        stop: connection.release,
-        readyPromise: connection.readyPromise,
-    };
-}
+import useShape from "./useShape.svelte.js";
+import { useDiscrete } from "./useDiscrete.svelte.js";
+export { useShape, useDiscrete };

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

@@ -0,0 +1,84 @@
+import { UseDeepSignalResult } from "@ng-org/alien-deepsignals/svelte4";
+import { DiscreteRoot } from "../../types.ts";
+/**
+ * Svelte 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 {@link svelte4UseShape}, discrete CRDTs are untyped.
+ * You can put any JSON data inside and need to validate the schema yourself.
+ *
+ * @param documentIdOrPromise The NURI of the CRDT document or a promise to that.
+ * @returns The store of the reactive JSON object of the CRDT document or undefined.
+ *
+ * @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 doc = useDiscrete(documentIdPromise);
+ *
+ *     // If the CRDT document is still empty, we need to initialize it.
+ *     $: if (doc && !doc.expenses) {
+ *         doc.expenses = [];
+ *     }
+ *
+ *     // Call doc.expenses.push({title: "Example title"}), to add new elements.
+ *
+ *     // Note that we use expense["@id"] NURI 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.
+ *     // 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 !doc}
+ *             Loading...
+ *         {:else if doc.expenses.length === 0}
+ *         <p>
+ *             Nothing tracked yet - log your first purchase to kick things off.
+ *         </p>
+ *         {:else}
+ *         {#each doc.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<T extends DiscreteRoot = DiscreteRoot>(documentIdOrPromise: string | Promise<string> | undefined): UseDeepSignalResult<T | undefined>;
+//# sourceMappingURL=useDiscrete.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDiscrete.svelte.d.ts","sourceRoot":"","sources":["../../../src/frontendAdapters/svelte4/useDiscrete.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,EAEH,mBAAmB,EACtB,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,EAC7D,mBAAmB,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,SAAS,GAC1D,mBAAmB,CAAC,CAAC,GAAG,SAAS,CAAC,CAkCpC"}

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

@@ -0,0 +1,126 @@
+// 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/svelte4";
+import { DiscreteOrmSubscription } from "../../connector/discrete/discreteOrmSubscriptionHandler.js";
+/**
+ * Svelte 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 {@link svelte4UseShape}, discrete CRDTs are untyped.
+ * You can put any JSON data inside and need to validate the schema yourself.
+ *
+ * @param documentIdOrPromise The NURI of the CRDT document or a promise to that.
+ * @returns The store of the reactive JSON object of the CRDT document or undefined.
+ *
+ * @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 doc = useDiscrete(documentIdPromise);
+ *
+ *     // If the CRDT document is still empty, we need to initialize it.
+ *     $: if (doc && !doc.expenses) {
+ *         doc.expenses = [];
+ *     }
+ *
+ *     // Call doc.expenses.push({title: "Example title"}), to add new elements.
+ *
+ *     // Note that we use expense["@id"] NURI 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.
+ *     // 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 !doc}
+ *             Loading...
+ *         {:else if doc.expenses.length === 0}
+ *         <p>
+ *             Nothing tracked yet - log your first purchase to kick things off.
+ *         </p>
+ *         {:else}
+ *         {#each doc.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 = DiscreteOrmSubscription.getOrCreate(docId);
+            connection.readyPromise.then(() => {
+                if (isDestroyed) {
+                    connection?.close();
+                    return;
+                }
+                resolve(connection.signalObject);
+            });
+        };
+        if (typeof documentIdOrPromise === "string") {
+            init(documentIdOrPromise);
+        }
+        else if (documentIdOrPromise === undefined) {
+            // There is nothing to do without a document ID.
+        }
+        else {
+            documentIdOrPromise.then(init);
+        }
+    });
+    onDestroy(() => {
+        isDestroyed = true;
+        if (connection) {
+            connection.close();
+        }
+    });
+    return useDeepSignal(objectPromise);
+}

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

@@ -0,0 +1,77 @@
+import { type Scope } from "../../types.ts";
+import type { BaseType, ShapeType } from "@ng-org/shex-orm";
+import { type UseDeepSignalResult } from "@ng-org/alien-deepsignals/svelte4";
+export type { UseDeepSignalResult } from "@ng-org/alien-deepsignals/svelte4";
+/** Extended result including the originating root signal wrapper from shape logic. */
+export interface UseShapeRuneResult<T extends object> extends UseDeepSignalResult<T> {
+    root: any;
+}
+/**
+ * Svelte 3/4 hook to subscribe to RDF data in the graph database using a shape, see {@link ShapeType}.
+ *
+ * Returns a {@link DeepSignalSet} store containing the 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 string or scope object with graphs and subjects.
+ * @returns A {@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
+ * ```svelte
+ * <script lang="ts">
+ *     // Gets all expense objects with `@id` <s1 IRI> or <s2 IRI> and `@graph` <g1 NURI> or <g2 NURI>
+ *     const expenses: DeepSignal<Set<Expense>> = useShape(ExpenseShape,
+ *         {graphs: ["<g1 NURI>", "<g2 NURI>"],
+ *         subjects: ["<s1 NURI>", "<s2 NURI>"]});
+ *
+ *     const expensesSorted = computed(() => expenses.sort((a, b) =>
+ *         a.dateOfPurchase.localeCompare(b.dateOfPurchase)
+ *     ));
+ *
+ *     // Call expenses.add({"@graph": "<g1 or g2 NURI>", "@id": "", title: "Example title"}), to add new elements.
+ *     // Leave `@id` an empty string to auto-generate a subject IRI (adjust your scope accordingly).
+ *
+ *     // Note 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 (i.e. there are two graphs with the same subject), 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
+ *     bind:value={expense.title}
+ *     placeholder="Expense title"
+ *   />
+ * </div>
+ * ```
+ */
+export declare function useShape<T extends BaseType>(shape: ShapeType<T>, scope: Scope | string | undefined): UseShapeRuneResult<Set<T>>;
+export default useShape;
+//# sourceMappingURL=useShape.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useShape.svelte.d.ts","sourceRoot":"","sources":["../../../src/frontendAdapters/svelte4/useShape.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,EAAkB,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5D,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAEH,KAAK,mBAAmB,EAC3B,MAAM,mCAAmC,CAAC;AAK3C,YAAY,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAE7E,sFAAsF;AACtF,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAChD,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC9B,IAAI,EAAE,GAAG,CAAC;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,QAAQ,EACvC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EACnB,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,GAClC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAe5B;AAED,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,91 @@
+// Copyright (c) 2025 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 { normalizeScope } from "../../types.js";
+import { onDestroy } from "svelte";
+import { useDeepSignal, } from "@ng-org/alien-deepsignals/svelte4";
+import { OrmSubscription } from "../../connector/ormSubscriptionHandler.js";
+import { readOnlySet } from "../utils.js";
+/**
+ * Svelte 3/4 hook to subscribe to RDF data in the graph database using a shape, see {@link ShapeType}.
+ *
+ * Returns a {@link DeepSignalSet} store containing the 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 string or scope object with graphs and subjects.
+ * @returns A {@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
+ * ```svelte
+ * <script lang="ts">
+ *     // Gets all expense objects with `@id` <s1 IRI> or <s2 IRI> and `@graph` <g1 NURI> or <g2 NURI>
+ *     const expenses: DeepSignal<Set<Expense>> = useShape(ExpenseShape,
+ *         {graphs: ["<g1 NURI>", "<g2 NURI>"],
+ *         subjects: ["<s1 NURI>", "<s2 NURI>"]});
+ *
+ *     const expensesSorted = computed(() => expenses.sort((a, b) =>
+ *         a.dateOfPurchase.localeCompare(b.dateOfPurchase)
+ *     ));
+ *
+ *     // Call expenses.add({"@graph": "<g1 or g2 NURI>", "@id": "", title: "Example title"}), to add new elements.
+ *     // Leave `@id` an empty string to auto-generate a subject IRI (adjust your scope accordingly).
+ *
+ *     // Note 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 (i.e. there are two graphs with the same subject), 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
+ *     bind:value={expense.title}
+ *     placeholder="Expense title"
+ *   />
+ * </div>
+ * ```
+ */
+export function useShape(shape, scope) {
+    if (scope === undefined) {
+        const ds = useDeepSignal(readOnlySet);
+        return { root: readOnlySet, ...ds };
+    }
+    const { signalObject: rootSignal, close } = OrmSubscription.getOrCreate(shape, normalizeScope(scope));
+    onDestroy(close);
+    const ds = useDeepSignal(rootSignal);
+    return { root: rootSignal, ...ds };
+}
+export default useShape;

package/dist/frontendAdapters/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const readOnlySet: Set<unknown>;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/frontendAdapters/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,cAatB,CAAC"}

package/dist/frontendAdapters/utils.js

@@ -0,0 +1,14 @@
+export const readOnlySet = new Proxy(new Set(), {
+    get(target, key, receiver) {
+        if (key === "add" || key === "delete" || key === "clear") {
+            return () => {
+                throw new Error("Set is readonly because scope is empty.");
+            };
+        }
+        const value = target[key];
+        if (typeof value === "function") {
+            return value.bind(target);
+        }
+        return value;
+    },
+});

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"}