@arcote.tech/arc-react 0.0.1

package/dist/reactModel.d.ts

@@ -0,0 +1,5 @@
+import { type ArcModelDependencies, type GetAnyCollectionQueryResult, type QueryFactoryFunction } from "@arcote.tech/arc";
+import type { ArcContextWithCommandsAny } from "@arcote.tech/arc/context/context";
+export declare const reactModel: <C extends ArcContextWithCommandsAny>(context: C, dependecies: ArcModelDependencies<C>) => readonly [(props: {
+    children: React.ReactNode;
+}) => "Ekran ładowania" | import("react/jsx-runtime").JSX.Element, <QueryBuilderFn extends QueryFactoryFunction<C>>(queryBuilder: QueryBuilderFn, dependencies?: any[]) => [GetAnyCollectionQueryResult<QueryBuilderFn>, false] | [null, true], () => import("@arcote.tech/arc/context/commands").CommandsClient<C["commands"]>];

package/form.ts

@@ -0,0 +1,12 @@
+import { type ArcObjectAny } from "@arcote.tech/arc";
+
+export function formResolver(schema: ArcObjectAny) {
+  return async (data: any) => {
+    // const { valid, errors } = await schema.validate(data);
+
+    return {
+      values: data,
+      errors: {},
+    };
+  };
+}

package/idb.ts

@@ -0,0 +1,166 @@
+import type { util } from "@arcote.tech/arc";
+import {
+  ArcIndexedCollection,
+  type ArcCollectionAny,
+  type ArcIndexedCollectionAny,
+} from "@arcote.tech/arc/collection/collection";
+import type {
+  DatabaseAdapter,
+  DBAdapterFactory,
+  ReadTransaction,
+  ReadWriteTransaction,
+} from "@arcote.tech/arc/collection/db";
+
+export const idbAdapterFactory =
+  (name: string, version: number): DBAdapterFactory =>
+  (context) =>
+    new Promise((resolve, reject) => {
+      const dbRequest = indexedDB.open(name, version);
+
+      dbRequest.addEventListener("error", (err) => {
+        reject(err);
+      });
+      dbRequest.addEventListener("success", (ev: any) => {
+        resolve(new IDBAdapter(ev.target.result));
+      });
+      dbRequest.addEventListener("upgradeneeded", (ev: any) => {
+        const db = ev.target.result as IDBDatabase;
+
+        context.collections.forEach((collection) => {
+          const name = collection.name;
+          if (db.objectStoreNames.contains(name)) {
+            db.deleteObjectStore(collection.name);
+          }
+          const objectStore = db.createObjectStore(collection.name, {
+            keyPath: "_id",
+          });
+
+          if (collection instanceof ArcIndexedCollection) {
+            Object.entries(collection.indexes).forEach(([name, keyPath]) => {
+              objectStore.createIndex(name, keyPath as string[], {
+                unique: false,
+              });
+            });
+          }
+        });
+      });
+    });
+
+class IDBReadTransaction implements ReadTransaction {
+  constructor(protected transaction: IDBTransaction) {}
+
+  async findById<C extends ArcCollectionAny>(
+    collection: C,
+    id: util.GetType<C["id"]>
+  ) {
+    return new Promise<util.CollectionItemWithId<C>>((resolve) => {
+      const result = this.transaction.objectStore(collection.name).get(id);
+      result.onsuccess = (e: any) => {
+        const deserialized = collection.deserialize(e.target.result);
+        resolve(deserialized as any);
+      };
+    });
+  }
+
+  async findByIndex<C extends ArcIndexedCollectionAny>(
+    collection: C,
+    index: string,
+    data: any
+  ) {
+    return new Promise<util.CollectionItemWithId<C>[]>((resolve) => {
+      const idbIndex = this.transaction
+        .objectStore(collection.name)
+        .index(index);
+      const value = (idbIndex.keyPath as string[]).map((key) => data[key]);
+      const keyRange = IDBKeyRange.only(value);
+      const result = idbIndex.getAll(keyRange);
+      result.onsuccess = (e: any) => {
+        const deserialized = e.target.result.map((e: any) =>
+          collection.deserialize(e)
+        );
+        resolve(deserialized as any);
+      };
+    });
+  }
+
+  async findAll<C extends ArcCollectionAny>(collection: C): Promise<any[]> {
+    return new Promise<util.CollectionItemWithId<C>[]>((resolve) => {
+      const result = this.transaction.objectStore(collection.name).getAll();
+      result.onsuccess = (e: any) => {
+        const deserialized = e.target.result.map((e: any) =>
+          collection.deserialize(e)
+        );
+        resolve(deserialized as any);
+      };
+    });
+  }
+}
+
+class IDBReadWriteTransaction
+  extends IDBReadTransaction
+  implements ReadWriteTransaction
+{
+  async set<C extends ArcCollectionAny>(
+    collection: C,
+    data: util.CollectionItemWithId<C>
+  ) {
+    return new Promise<void>((resolve, reject) => {
+      const serialized = collection.serialize(data as any);
+      const result = this.transaction
+        .objectStore(collection.name)
+        .put(serialized);
+      result.onsuccess = (e) => {
+        resolve();
+      };
+      result.onerror = (e) => {
+        reject(e);
+      };
+    });
+  }
+
+  async remove<C extends ArcCollectionAny>(
+    collection: C,
+    id: util.GetType<C["id"]>
+  ) {
+    return new Promise<void>((resolve, reject) => {
+      const result = this.transaction.objectStore(collection.name).delete(id);
+      result.onsuccess = (e) => {
+        resolve();
+      };
+      result.onerror = (e) => {
+        reject(e);
+      };
+    });
+  }
+
+  async commit() {
+    return new Promise<void>((resolve) => {
+      this.transaction.oncomplete = () => {
+        resolve();
+      };
+      this.transaction.commit();
+    });
+  }
+}
+
+class IDBAdapter implements DatabaseAdapter {
+  constructor(private db: IDBDatabase) {}
+
+  readWriteTransaction(collections: ArcCollectionAny[]) {
+    const transaction = this.db.transaction(
+      collections.map((c) => c.name),
+      "readwrite"
+    );
+
+    return new IDBReadWriteTransaction(transaction);
+  }
+
+  readTransaction(collections: ArcCollectionAny[]) {
+    const transaction = this.db.transaction(
+      collections.map((c) => c.name),
+      "readonly"
+    );
+
+    return new IDBReadTransaction(transaction);
+  }
+}

package/index.ts

@@ -0,0 +1,2 @@
+export { idbAdapterFactory } from "./idb.ts";
+export { reactModel } from "./reactModel.tsx";

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@arcote.tech/arc-react",
+  "module": "index.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "version": "0.0.1",
+  "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": "bun build --target=node ./index.ts --outfile=dist/index.js && bun run build:declaration",
+    "build:declaration": "tsc --emitDeclarationOnly --project tsconfig.types.json",
+    "postbuild": "rimraf tsconfig.types.tsbuildinfo",
+    "type-check": "tsc"
+  },
+  "dependencies": {
+    "@arcote.tech/arc": "0.0.1",
+    "react": "^18.3.1",
+    "rxjs": "^7.8.1"
+  },
+  "devDependencies": {
+    "@arcote.tech/arc": "workspace:*",
+    "@types/bun": "latest",
+    "@types/react": "^18.3.5",
+    "prettier": "^3.0.3",
+    "rimraf": "^5.0.5",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.0"
+  }
+}

package/reactModel.tsx

@@ -0,0 +1,82 @@
+import {
+  type ArcModelDependencies,
+  type GetAnyCollectionQueryResult,
+  type QueryFactoryFunction,
+  ArcCollectionQuery,
+  ArcModel,
+  model,
+} from "@arcote.tech/arc";
+import type { ArcContextWithCommandsAny } from "@arcote.tech/arc/context/context";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+
+export const reactModel = <C extends ArcContextWithCommandsAny>(
+  context: C,
+  dependecies: ArcModelDependencies<C>
+) => {
+  const LiveModelContext = createContext<null | {
+    client: ArcModel<C>;
+  }>(null);
+
+  return [
+    function LiveModelProvider(props: { children: React.ReactNode }) {
+      const [client, setClient] = useState<ArcModel<C> | null>(null);
+      const clientRef = useRef<ArcModel<C> | null>(null);
+
+      useEffect(() => {
+        if (clientRef.current) return;
+
+        const client = model(context, dependecies);
+        clientRef.current = client;
+        setClient(client);
+      }, []);
+
+      if (!client) return "Ekran ładowania";
+
+      return (
+        <LiveModelContext.Provider
+          value={{
+            client,
+          }}
+        >
+          {props.children}
+        </LiveModelContext.Provider>
+      );
+    },
+    function useQuery<QueryBuilderFn extends QueryFactoryFunction<C>>(
+      queryBuilder: QueryBuilderFn,
+      dependencies: any[] = []
+    ): [GetAnyCollectionQueryResult<QueryBuilderFn>, false] | [null, true] {
+      const context = useContext(LiveModelContext);
+      if (!context)
+        throw new Error("useQuery must be used within a LiveModelProvider");
+
+      if (!context.client) throw new Error("client not found");
+
+      const [result, setResult] = useState<any>(null);
+      const [loading, setLoading] = useState<boolean>(true);
+
+      useEffect(() => {
+        const query = context.client.query(queryBuilder);
+
+        if (!(query instanceof ArcCollectionQuery)) throw new Error();
+
+        query.result$.subscribe((result: any) => {
+          setResult(result);
+          setLoading(false);
+        });
+        return () => {
+          query.unsubscribe();
+        };
+      }, [context.client, ...dependencies]);
+
+      return [result, loading];
+    },
+    function useCommands() {
+      const context = useContext(LiveModelContext);
+      if (!context)
+        throw new Error("useCommands must be used within a LiveModelProvider");
+
+      return context.client.commands();
+    },
+  ] as const;
+};

package/tsconfig.types.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "outDir": "./dist",
+    "rootDir": "./"
+  },
+  "include": ["**/*.ts"]
+}