@arcote.tech/arc-react 0.0.21 → 0.0.23

package/dist/form.d.ts

@@ -3,3 +3,4 @@ export declare function formResolver(schema: ArcObjectAny): (data: any) => Promi
     values: any;
     errors: {};
 }>;
+//# sourceMappingURL=form.d.ts.map

package/dist/idb.d.ts

@@ -1,2 +1,3 @@
 import { type DBAdapterFactory } from "@arcote.tech/arc";
 export declare const idbAdapterFactory: (name: string, version: number) => DBAdapterFactory;
+//# sourceMappingURL=idb.d.ts.map

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./form.ts";
 export * from "./idb.ts";
 export * from "./reactModel.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -8,6 +8,10 @@ function formResolver(schema) {
   };
 }
 // idb.ts
+import {
+  ArcCollection,
+  ArcIndexedCollection
+} from "@arcote.tech/arc";
 var idbAdapterFactory = (name, version) => (context) => new Promise((resolve, reject) => {
   const dbRequest = indexedDB.open(name, version);
   dbRequest.addEventListener("error", (err) => {
@@ -18,7 +22,7 @@ var idbAdapterFactory = (name, version) => (context) => new Promise((resolve, re
   });
   dbRequest.addEventListener("upgradeneeded", (ev) => {
     const db = ev.target.result;
-    context.collections.forEach((collection) => {
+    context.elements.filter((element) => element instanceof ArcIndexedCollection || element instanceof ArcCollection).forEach((collection) => {
       const name2 = collection.name;
       if (db.objectStoreNames.contains(name2)) {
         db.deleteObjectStore(collection.name);
@@ -26,7 +30,7 @@ var idbAdapterFactory = (name, version) => (context) => new Promise((resolve, re
       const objectStore = db.createObjectStore(collection.name, {
         keyPath: "_id"
       });
-      if (collection.indexes) {
+      if (collection instanceof ArcIndexedCollection) {
         Object.entries(collection.indexes).forEach(([name3, keyPath]) => {
           objectStore.createIndex(name3, keyPath, {
             unique: false
@@ -34,6 +38,12 @@ var idbAdapterFactory = (name, version) => (context) => new Promise((resolve, re
         });
       }
     });
+    if (db.objectStoreNames.contains("state")) {
+      db.deleteObjectStore("state");
+    }
+    db.createObjectStore("state", {
+      keyPath: "_id"
+    });
   });
 });
 
@@ -42,45 +52,39 @@ class IDBReadTransaction {
   constructor(transaction) {
     this.transaction = transaction;
   }
-  async findById(collection, id) {
+  async findById(store, id) {
     return new Promise((resolve) => {
-      const result = this.transaction.objectStore(collection.name).get(id);
+      const result = this.transaction.objectStore(store).get(id);
       result.onsuccess = (e) => {
-        if (!e.target.result)
-          return resolve(undefined);
-        const deserialized = collection.deserialize(e.target.result);
-        resolve(deserialized);
+        resolve(e.target.result);
       };
     });
   }
-  async findByIndex(collection, index, data) {
+  async findByIndex(store, index, data) {
     return new Promise((resolve) => {
-      const idbIndex = this.transaction.objectStore(collection.name).index(index);
+      const idbIndex = this.transaction.objectStore(store).index(index);
       const value = idbIndex.keyPath.map((key) => data[key]);
       const keyRange = IDBKeyRange.only(value);
       const result = idbIndex.getAll(keyRange);
       result.onsuccess = (e) => {
-        const deserialized = e.target.result.map((e2) => collection.deserialize(e2));
-        resolve(deserialized);
+        resolve(e.target.result);
       };
     });
   }
-  async findAll(collection) {
+  async findAll(store) {
     return new Promise((resolve) => {
-      const result = this.transaction.objectStore(collection.name).getAll();
+      const result = this.transaction.objectStore(store).getAll();
       result.onsuccess = (e) => {
-        const deserialized = e.target.result.map((e2) => collection.deserialize(e2));
-        resolve(deserialized);
+        resolve(e.target.result);
       };
     });
   }
 }
 
 class IDBReadWriteTransaction extends IDBReadTransaction {
-  async set(collection, data) {
+  async set(store, data) {
     return new Promise((resolve, reject) => {
-      const serialized = collection.serialize(data);
-      const result = this.transaction.objectStore(collection.name).put(serialized);
+      const result = this.transaction.objectStore(store).put(data);
       result.onsuccess = (e) => {
         resolve();
       };
@@ -89,9 +93,9 @@ class IDBReadWriteTransaction extends IDBReadTransaction {
       };
     });
   }
-  async remove(collection, id) {
+  async remove(store, id) {
     return new Promise((resolve, reject) => {
-      const result = this.transaction.objectStore(collection.name).delete(id);
+      const result = this.transaction.objectStore(store).delete(id);
       result.onsuccess = (e) => {
         resolve();
       };
@@ -115,98 +119,130 @@ class IDBAdapter {
   constructor(db) {
     this.db = db;
   }
-  readWriteTransaction(collections) {
-    const transaction = this.db.transaction(collections.map((c) => c.name), "readwrite");
+  readWriteTransaction(stores) {
+    if (!stores)
+      stores = Array.from(this.db.objectStoreNames);
+    const transaction = this.db.transaction(stores, "readwrite");
     return new IDBReadWriteTransaction(transaction);
   }
-  readTransaction(collections) {
-    const transaction = this.db.transaction(collections.map((c) => c.name), "readonly");
+  readTransaction(stores) {
+    if (!stores)
+      stores = Array.from(this.db.objectStoreNames);
+    const transaction = this.db.transaction(stores, "readonly");
     return new IDBReadTransaction(transaction);
   }
 }
 // reactModel.tsx
 import {
-  ArcSubModel
+  MasterDataStorage,
+  rtcClientFactory
 } from "@arcote.tech/arc";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-var reactModel = (model) => {
+var reactModel = (arcContext, databaseName) => {
   const LiveModelContext = createContext(null);
   const LocalModelContext = createContext(null);
+  let dataStorage = null;
   return [
     function LiveModelProvider(props) {
+      const dbAdapterPromise = idbAdapterFactory(databaseName, arcContext.version)(arcContext);
+      dataStorage = new MasterDataStorage(dbAdapterPromise, rtcClientFactory, arcContext);
+      const [syncProgress, setSyncProgress] = useState([]);
+      const [syncDone, setSyncDone] = useState(false);
+      useEffect(() => {
+        const sync = async () => {
+          await dataStorage?.sync(({ store, size }) => {
+            setSyncProgress((prev) => [...prev, { store, size }]);
+          });
+          setSyncDone(true);
+        };
+        sync();
+      }, []);
       return /* @__PURE__ */ jsx(LiveModelContext.Provider, {
-        value: {
-          model
-        },
-        children: props.children
+        value: { dataStorage, dbAdapterPromise },
+        children: syncDone ? props.children : /* @__PURE__ */ jsx(props.syncView, {
+          progress: syncProgress
+        }, undefined, false, undefined, this)
       }, undefined, false, undefined, this);
     },
-    function LocalModelProvider(props) {
-      const liveModelContext = useContext(LiveModelContext);
-      if (!liveModelContext) {
+    function LocalModelProvider({ children }) {
+      const parentContext = useContext(LiveModelContext);
+      if (!parentContext) {
         throw new Error("LocalModelProvider must be used within a LiveModelProvider");
       }
-      const [subModel] = useState(() => new ArcSubModel(liveModelContext.model));
+      const [localContext] = useState(() => ({
+        dbAdapterPromise: parentContext.dbAdapterPromise,
+        dataStorage: parentContext.dataStorage.fork()
+      }));
       return /* @__PURE__ */ jsx(LocalModelContext.Provider, {
-        value: {
-          model: subModel
-        },
-        children: props.children
+        value: localContext,
+        children
       }, undefined, false, undefined, this);
     },
-    function useQuery(queryBuilder, dependencies = []) {
-      const localContext = useContext(LocalModelContext);
-      const liveContext = useContext(LiveModelContext);
-      const context = localContext || liveContext;
-      if (!context)
-        throw new Error("useQuery must be used within a LiveModelProvider or LocalModelProvider");
+    function useQuery(queryBuilderFn, dependencies = []) {
+      const context = useContext(LocalModelContext) || useContext(LiveModelContext);
+      if (!context) {
+        throw new Error("useQuery must be used within a ModelProvider");
+      }
       const [result, setResult] = useState(null);
       const [loading, setLoading] = useState(true);
+      const queryRef = useRef(null);
       useEffect(() => {
-        const query = context.model.query(queryBuilder);
-        if (localContext)
-          console.log("local query", query);
-        query.result$.subscribe((result2) => {
+        const queryBuilder = arcContext.queryBuilder();
+        const query = queryBuilderFn(queryBuilder).toQuery();
+        queryRef.current = query;
+        const runQuery = async () => {
+          const result2 = await query.run(context.dataStorage, (newResult) => {
+            setResult(newResult);
+            setLoading(false);
+          });
           setResult(result2);
           setLoading(false);
-          if (localContext)
-            console.log("local query result change", result2);
-        });
+        };
+        runQuery();
         return () => {
-          query.unsubscribe();
+          queryRef.current?.unsubscribe();
+          queryRef.current = null;
         };
-      }, [context.model, ...dependencies]);
+      }, [context, ...dependencies]);
       return [result, loading];
     },
     function useCommands() {
-      const localContext = useContext(LocalModelContext);
-      const liveContext = useContext(LiveModelContext);
-      const context = localContext || liveContext;
-      if (!context)
-        throw new Error("useCommands must be used within a LiveModelProvider or LocalModelProvider");
-      return context.model.commands();
-    },
-    function query(queryBuilder) {
-      return new Promise((resolve, reject) => {
-        const query = model.query(queryBuilder);
-        const subscription = query.result$.subscribe({
-          next: (result) => {
-            subscription.unsubscribe();
-            resolve(result);
-          },
-          error: (error) => {
-            reject(error);
+      const context = useContext(LocalModelContext) || useContext(LiveModelContext);
+      if (!context) {
+        throw new Error("useQuery must be used within a ModelProvider");
+      }
+      const commands = arcContext.commands;
+      return new Proxy({}, {
+        get: (_, name) => {
+          if (name in commands) {
+            return async (...args) => {
+              const dataStorage2 = context.dataStorage.fork();
+              const commandContext = arcContext.commandContext(dataStorage2);
+              const result = await commands[name](commandContext, ...args);
+              await dataStorage2.merge();
+              return result;
+            };
           }
-        });
+          console.warn(`Command '${name}' not found in the context.`);
+          return;
+        }
       });
     },
-    function useLocalModel() {
-      const localContext = useContext(LocalModelContext);
-      if (!localContext) {
-        throw new Error("useLocalModel must be used within a LocalModelProvider");
+    async function query(queryBuilderFn) {
+      const queryBuilder = arcContext.queryBuilder();
+      const query = queryBuilderFn(queryBuilder).toQuery();
+      if (!dataStorage)
+        throw new Error("dataStorage not found");
+      const result = await query.run(dataStorage);
+      return result;
+    },
+    function useLocalDataStorage() {
+      const context = useContext(LocalModelContext);
+      if (!context) {
+        throw new Error("hook must be used within a ModelProvider");
       }
-      return localContext.model;
+      return context.dataStorage;
     }
   ];
 };
@@ -216,4 +252,4 @@ export {
   formResolver
 };
 
-//# debugId=9C5FFF223A0A726064756E2164756E21
+//# debugId=4A9F9D29F4CCB1FA64756E2164756E21

package/dist/reactModel.d.ts

@@ -1,6 +1,13 @@
-import { type ArcModelAny, type GetAnyCollectionQueryResult, type QueryFactoryFunction, ArcSubModel } from "@arcote.tech/arc";
-export declare const reactModel: <Model extends ArcModelAny>(model: Model) => readonly [(props: {
+import { ForkedDataStorage, type ArcContextAny, type CommandsClient, type QueryBuilderFunctionResult, type QueryFactoryFunction } from "@arcote.tech/arc";
+export declare const reactModel: <C extends ArcContextAny>(arcContext: C, databaseName: string) => readonly [(props: {
     children: React.ReactNode;
-}) => import("react/jsx-dev-runtime").JSX.Element, (props: {
+    syncView: React.ComponentType<{
+        progress: {
+            store: string;
+            size: number;
+        }[];
+    }>;
+}) => import("react/jsx-dev-runtime").JSX.Element, ({ children }: {
     children: React.ReactNode;
-}) => import("react/jsx-dev-runtime").JSX.Element, <QueryBuilderFn extends QueryFactoryFunction<Model["context"]>>(queryBuilder: QueryBuilderFn, dependencies?: any[]) => [GetAnyCollectionQueryResult<QueryBuilderFn>, false] | [null, true], () => ReturnType<Model["commands"]>, <QueryBuilderFn extends QueryFactoryFunction<Model["context"]>>(queryBuilder: QueryBuilderFn) => Promise<GetAnyCollectionQueryResult<QueryBuilderFn> | null>, () => ArcSubModel<Model["context"]>];
+}) => import("react/jsx-dev-runtime").JSX.Element, <QueryBuilderFn extends QueryFactoryFunction<C>>(queryBuilderFn: QueryBuilderFn, dependencies?: any[]) => [QueryBuilderFunctionResult<QueryBuilderFn>, boolean], () => CommandsClient<C["commands"]>, <QueryBuilderFn extends QueryFactoryFunction<C>>(queryBuilderFn: QueryBuilderFn) => Promise<QueryBuilderFunctionResult<QueryBuilderFn>>, () => ForkedDataStorage];
+//# sourceMappingURL=reactModel.d.ts.map

package/package.json

@@ -4,13 +4,13 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "private": false,
   "author": "Przemysław Krasiński [arcote.tech]",
   "description": "React client for the Arc framework, providing utilities for querying data and executing commands, enhancing the development of reactive and efficient user interfaces.",
   "scripts": {
     "build": "rm -rf dist && bun run ./build.ts && bun run build:declaration",
-    "build:declaration": "tsc --emitDeclarationOnly --project tsconfig.types.json",
+    "build:declaration": "tsc --emitDeclarationOnly --project tsconfig.types.json --declarationMap",
     "postbuild": "rimraf tsconfig.types.tsbuildinfo",
     "type-check": "tsc",
     "dev": "nodemon --ignore dist -e ts,tsx --exec 'bun run build'"
@@ -18,15 +18,16 @@
   "dependencies": {
     "@arcote.tech/arc": "latest",
     "react": "^18.3.1",
-    "rxjs": "^7.8.1"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@types/bun": "latest",
     "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.1",
+    "nodemon": "^2.0.22",
     "prettier": "^3.0.3",
     "rimraf": "^5.0.5",
-    "typescript": "^5.2.2",
-    "nodemon": "^2.0.22"
+    "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"