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

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

@@ -1,85 +1,94 @@
-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.
+ * Svelte 5 hook to subscribe to existing 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.
+ * changes coming from the engine (or other components) cause an immediate rerender.
  *
- * In comparison to `useShape`, discrete CRDTs are untyped.
+ * In comparison to {@link svelteUseShape}, 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.
+ * @param documentIdOrPromise The IRI of the CRDT document or a promise to that.
  * @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>
-```
-
+ * ```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);
+ *
+ *     $effect(() => {
+ *         // If the CRDT document is still empty, we need to initialize it.
+ *         if (doc && !doc.expenses) {
+ *             doc.expenses = [];
+ *         }
+ *     });
+ *
+ *     const createExpense = () => {
+ *         // 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 or added from the array.
+ *         // The `@id` is an IRI with the schema `<documentId>:d:<object-specific id>`.
+ *         // Since the `@id` is generated in the engine, the object is
+ *         // *preliminarily given a mock id* which will be replaced immediately.
+ *         expenses.push({
+ *             title: "New expense",
+ *             date: new Date().toISOString(),
+ *         });
+ *      };
+ *
+ *
+ * </script>
+ *
+ * <section>
+ *     <div>
+ *         <button on:click={() => createExpense({})}/>
+ *
+ *         {#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 ?? ""}}
+ *     />
+ * </div>
+ * ```
  */
-export declare function useDiscrete(documentIdOrPromise: string | Promise<string>): UseDeepSignalResult<DiscreteRootArray | DiscreteRootObject | undefined>;
+export declare function useDiscrete(documentIdOrPromise: string | Promise<string>): {
+    doc: DiscreteRootArray | DiscreteRootObject | undefined;
+};
 //# sourceMappingURL=useDiscrete.svelte.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"useDiscrete.svelte.d.ts","sourceRoot":"","sources":["../../../src/frontendAdapters/svelte/useDiscrete.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwFG;AACH,wBAAgB,WAAW,CAAC,mBAAmB,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG;IACxE,GAAG,EAAE,iBAAiB,GAAG,kBAAkB,GAAG,SAAS,CAAC;CAC3D,CAwCA"}

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

@@ -8,117 +8,128 @@
 // 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";
+import { useDeepSignal } from "@ng-org/alien-deepsignals/svelte";
+import { DiscreteOrmSubscription } from "../../connector/discrete/discreteOrmSubscriptionHandler.js";
 /**
- * Svelte version 3/4 hook to subscribe to discrete (JSON) CRDT documents.
+ * Svelte 5 hook to subscribe to existing 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.
+ * changes coming from the engine (or other components) cause an immediate rerender.
  *
- * In comparison to `useShape`, discrete CRDTs are untyped.
+ * In comparison to {@link svelteUseShape}, 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.
+ * @param documentIdOrPromise The IRI of the CRDT document or a promise to that.
  * @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>
-```
-
+ * ```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);
+ *
+ *     $effect(() => {
+ *         // If the CRDT document is still empty, we need to initialize it.
+ *         if (doc && !doc.expenses) {
+ *             doc.expenses = [];
+ *         }
+ *     });
+ *
+ *     const createExpense = () => {
+ *         // 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 or added from the array.
+ *         // The `@id` is an IRI with the schema `<documentId>:d:<object-specific id>`.
+ *         // Since the `@id` is generated in the engine, the object is
+ *         // *preliminarily given a mock id* which will be replaced immediately.
+ *         expenses.push({
+ *             title: "New expense",
+ *             date: new Date().toISOString(),
+ *         });
+ *      };
+ *
+ *
+ * </script>
+ *
+ * <section>
+ *     <div>
+ *         <button on:click={() => createExpense({})}/>
+ *
+ *         {#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 ?? ""}}
+ *     />
+ * </div>
+ * ```
  */
 export function useDiscrete(documentIdOrPromise) {
     let connection;
     let isDestroyed = false;
-    const objectPromise = new Promise((resolve) => {
-        const init = (docId) => {
-            if (isDestroyed)
+    let doc = $state.raw(undefined);
+    const init = (docId) => {
+        if (isDestroyed)
+            return;
+        connection = DiscreteOrmSubscription.getOrCreate(docId);
+        connection.readyPromise.then(() => {
+            if (isDestroyed) {
+                connection?.close();
                 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);
-        }
-    });
+            }
+            doc = useDeepSignal(connection.signalObject);
+        });
+    };
+    if (typeof documentIdOrPromise === "string") {
+        init(documentIdOrPromise);
+    }
+    else {
+        documentIdOrPromise.then(init);
+    }
     onDestroy(() => {
         isDestroyed = true;
         if (connection) {
             connection.close();
         }
     });
-    return useDeepSignal(objectPromise);
+    return {
+        get doc() {
+            return doc;
+        },
+    };
 }

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

@@ -1,76 +1,82 @@
-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";
 /**
- * Hook to subscribe to RDF data in the graph database using a shape, see {@link ShapeType}.
+ * Svelte 5 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.
+ * 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 backend (or other components) cause an immediate rerender.
+ * changes coming from the engine (or other components) cause an immediate rerender.
  *
- * @param shape The {@link ShapeType} the objects should have (generated by the shex-orm tool).
+ * @param shape The {@link ShapeType} the objects should have (generated by the `@ng-org/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>
-```
+ * ```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(ExpenseShapeType,
+ *         {graphs: ["<g1 IRI>", "<g2 IRI>"],
+ *         subjects: ["<s1 IRI>", "<s2 IRI>"]});
+ *
+ *     const expensesSorted = computed(() => expenses.sort((a, b) =>
+ *         a.dateOfPurchase.localeCompare(b.dateOfPurchase)
+ *     ));
+ *
+ *     const createExpense = () => {
+ *         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(),
+ *         });
+ *     };
+ *
+ *
+ *     // 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, 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
+ *         value={expense.title ?? ""}
+ *         oninput={(event) => {expense.title = event.currentTarget.value}}
+ *     />
+ * </div>
+ * ```
  */
-export declare function useShape<T extends BaseType>(shape: ShapeType<T>, scope?: Scope): UseShapeRuneResult<Set<T>>;
+export declare function useShape<T extends BaseType>(shape: ShapeType<T>, scope: Scope): 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":"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"}
+{"version":3,"file":"useShape.svelte.d.ts","sourceRoot":"","sources":["../../../src/frontendAdapters/svelte/useShape.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAI1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,QAAQ,EACvC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EACnB,KAAK,EAAE,KAAK,GACb,aAAa,CAAC,CAAC,CAAC,CAUlB;AAED,eAAe,QAAQ,CAAC"}