@arcote.tech/arc-react 0.3.4 → 0.4.2

package/dist/index.js

@@ -304,9 +304,19 @@ import {
   Model,
   QueryWire,
   StreamingEventPublisher,
-  StreamingQueryCache
+  StreamingQueryCache,
+  buildContextAccessor,
+  resolveQueryChange
 } from "@arcote.tech/arc";
-import { createContext as createContext4, useContext as useContext3, useEffect as useEffect2, useState as useState3 } from "react";
+import {
+  createContext as createContext4,
+  useContext as useContext3,
+  useEffect as useEffect2,
+  useLayoutEffect,
+  useMemo as useMemo3,
+  useRef,
+  useState as useState3
+} from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var modelProviderFactory = (context, options) => {
   const ModelContext = createContext4(null);
@@ -314,11 +324,21 @@ var modelProviderFactory = (context, options) => {
   const eventWire = options.remoteUrl ? new EventWire(options.remoteUrl) : undefined;
   const queryWire = options.remoteUrl ? new QueryWire(options.remoteUrl) : undefined;
   const authAdapter = new AuthAdapter;
+  authAdapter.loadPersisted();
   let initialized = false;
   let cachedModel = null;
   let cachedDataStorage = null;
   let onResetCallback = null;
   let needsReconnect = false;
+  const scopeTokenListeners = new Map;
+  function notifyScopeTokenListeners(scope) {
+    const listeners = scopeTokenListeners.get(scope);
+    if (listeners) {
+      for (const listener of listeners) {
+        listener();
+      }
+    }
+  }
   function ModelProvider(props) {
     const [model, setModel] = useState3(cachedModel);
     const [resetTrigger, setResetTrigger] = useState3(0);
@@ -455,13 +475,12 @@ Event payload:`, event.payload);
         }
         if (cancelled)
           return;
-        const modelEventWire = options.dbAdapterFactory ? eventWire : undefined;
         const newModel = new Model(context, {
           adapters: {
             dataStorage,
             commandWire,
             eventPublisher,
-            eventWire: modelEventWire,
+            eventWire,
             authAdapter,
             queryWire,
             streamingCache
@@ -501,16 +520,153 @@ Event payload:`, event.payload);
     }
     return model;
   }
-  function setAuthToken(token) {
-    authAdapter.setToken(token);
-    commandWire?.setAuthToken(token);
-    queryWire?.setAuthToken(token);
-    if (eventWire) {
-      eventWire.setAuthToken(token);
-      if (token && eventWire.getState() === "disconnected") {
-        eventWire.connect();
+  function syncPersistedToken(model, scopeName) {
+    const scoped = model.scope(scopeName);
+    const persisted = authAdapter.getToken(scopeName);
+    if (persisted && scoped.getToken() !== persisted) {
+      scoped.setToken(persisted);
+    }
+    return scoped;
+  }
+  function createScope(name) {
+    function setToken(token) {
+      authAdapter.setToken(token, name);
+      if (cachedModel) {
+        cachedModel.scope(name).setToken(token);
+      } else {
+        eventWire?.setScopeToken(name, token);
+        if (eventWire && token && eventWire.getState() === "disconnected") {
+          eventWire.connect();
+        }
       }
+      notifyScopeTokenListeners(name);
+    }
+    function useToken() {
+      const [token, setTokenState] = useState3(() => authAdapter.getToken(name));
+      useEffect2(() => {
+        if (!scopeTokenListeners.has(name)) {
+          scopeTokenListeners.set(name, new Set);
+        }
+        const listeners = scopeTokenListeners.get(name);
+        const listener = () => setTokenState(authAdapter.getToken(name));
+        listeners.add(listener);
+        return () => {
+          listeners.delete(listener);
+        };
+      }, []);
+      return token;
+    }
+    const ScopeContext = createContext4(null);
+    function Provider(props) {
+      return /* @__PURE__ */ jsx5(ScopeContext.Provider, {
+        value: name,
+        children: props.children
+      }, undefined, false, undefined, this);
     }
+    function useQuery() {
+      const model = useModel();
+      const token = useToken();
+      const [data, setData] = useState3(undefined);
+      const [loading, setLoading] = useState3(true);
+      const descriptorRef = useRef(null);
+      const [subKey, setSubKey] = useState3("");
+      const scoped = syncPersistedToken(model, name);
+      const adapters = scoped.getAdapters();
+      useLayoutEffect(() => {
+        const desc = descriptorRef.current;
+        if (!desc)
+          return;
+        const key = JSON.stringify({ ...desc, token });
+        if (key !== subKey)
+          setSubKey(key);
+      });
+      useEffect2(() => {
+        const desc = descriptorRef.current;
+        if (!desc || !subKey)
+          return;
+        const unsubs = [];
+        const element = model.context.get(desc.element);
+        const qCtx = element?.queryContext?.(adapters);
+        const method = qCtx?.[desc.method];
+        const reExecute = async () => {
+          if (!method)
+            return;
+          try {
+            const result = await method(...desc.args);
+            setData(result);
+            setLoading(false);
+          } catch (err) {
+            console.error(`[Arc] Query error:`, err);
+          }
+        };
+        if (adapters.streamingCache) {
+          const store = adapters.streamingCache.getStore(desc.element);
+          let cachedResult;
+          unsubs.push(store.subscribe((events) => {
+            if (!events) {
+              cachedResult = undefined;
+              reExecute();
+              return;
+            }
+            if (cachedResult !== undefined) {
+              let current = cachedResult;
+              let changed = false;
+              for (const event of events) {
+                const newResult = resolveQueryChange(current, event, desc.args[0] ?? {});
+                if (newResult !== false) {
+                  current = newResult;
+                  changed = true;
+                }
+              }
+              if (!changed)
+                return;
+              cachedResult = current;
+              reExecute();
+              return;
+            }
+            reExecute();
+          }));
+          unsubs.push(adapters.streamingCache.subscribeQuery(desc, adapters.eventWire, name));
+          if (store.hasData()) {
+            reExecute();
+          }
+        } else {
+          if (adapters.eventPublisher) {
+            const eventTypes = element?.getElements?.()?.map((e) => e.name) ?? [];
+            if (eventTypes.length > 0) {
+              for (const eventType of eventTypes) {
+                unsubs.push(adapters.eventPublisher.subscribe(eventType, () => reExecute()));
+              }
+            } else {
+              unsubs.push(adapters.eventPublisher.subscribe("*", () => reExecute()));
+            }
+          }
+          reExecute();
+        }
+        return () => {
+          for (const unsub of unsubs)
+            unsub();
+        };
+      }, [subKey]);
+      return useMemo3(() => buildContextAccessor(model.context, adapters, "queryContext", (desc, _execute) => {
+        descriptorRef.current = desc;
+        return [data, loading];
+      }), [model, token, data, loading]);
+    }
+    function useMutation() {
+      const model = useModel();
+      return useMemo3(() => {
+        const scoped = syncPersistedToken(model, name);
+        return buildContextAccessor(model.context, scoped.getAdapters(), "mutateContext", (_descriptor, execute) => execute());
+      }, [model]);
+    }
+    return {
+      Provider,
+      useQuery,
+      useMutation,
+      setToken,
+      useToken
+    };
   }
   async function resetModel() {
     eventWire?.disconnect();
@@ -520,72 +676,28 @@ Event payload:`, event.payload);
     }
     cachedModel = null;
     initialized = false;
-    authAdapter.setToken(null);
-    commandWire?.setAuthToken(null);
-    queryWire?.setAuthToken(null);
-    eventWire?.setAuthToken(null);
+    authAdapter.clear();
     if (onResetCallback) {
       onResetCallback();
     }
   }
-  function onReset(callback) {
-    onResetCallback = callback;
-  }
   return {
     ModelProvider,
     useModel,
     commandWire,
     eventWire,
-    setAuthToken,
-    resetModel,
-    onReset
-  };
-};
-// src/factories/use-commands-factory.tsx
-import {
-  mutationExecutor
-} from "@arcote.tech/arc";
-import { useMemo as useMemo3 } from "react";
-var useCommandsFactory = (useModel) => {
-  return function useCommands() {
-    const model = useModel();
-    return useMemo3(() => mutationExecutor(model), [model]);
-  };
-};
-// src/factories/use-query-factory.tsx
-import {
-  liveQuery
-} from "@arcote.tech/arc";
-import { useEffect as useEffect3, useState as useState4 } from "react";
-var useQueryFactory = (useModel) => {
-  return function useQuery(queryFn, dependencies = []) {
-    const model = useModel();
-    const [loading, setLoading] = useState4(true);
-    const [result, setResult] = useState4(undefined);
-    useEffect3(() => {
-      const { unsubscribe } = liveQuery(model, queryFn, (newResult) => {
-        setResult(newResult);
-        setLoading(false);
-      });
-      return () => {
-        unsubscribe();
-      };
-    }, [model, ...dependencies]);
-    return [result, loading];
+    createScope,
+    resetModel
   };
 };
 // src/react-model.tsx
 var reactModel = (context, options = {}) => {
-  const { ModelProvider, useModel, commandWire, setAuthToken, resetModel } = modelProviderFactory(context, options);
-  const useQuery = useQueryFactory(useModel);
-  const useCommands = useCommandsFactory(useModel);
+  const { ModelProvider, useModel, commandWire, createScope, resetModel } = modelProviderFactory(context, options);
   return {
     ModelProvider,
     useModel,
-    useQuery,
-    useCommands,
+    createScope,
     commandWire,
-    setAuthToken,
     resetModel
   };
 };
@@ -604,4 +716,4 @@ export {
   Form
 };
 
-//# debugId=AB2860A19A07A53D64756E2164756E21
+//# debugId=075760FF00A2465564756E2164756E21

package/dist/src/factories/index.d.ts

@@ -1,4 +1,2 @@
 export * from "./model-provider-factory";
-export * from "./use-commands-factory";
-export * from "./use-query-factory";
 //# sourceMappingURL=index.d.ts.map

package/dist/src/factories/model-provider-factory.d.ts

@@ -1,5 +1,29 @@
 import { CommandWire, EventWire, Model, type ArcContextAny } from "@arcote.tech/arc";
 import type { ReactModelOptions } from "../options";
+/**
+ * Accessor type for useQuery() — maps element names to their query methods,
+ * where each method returns [data, loading] tuple.
+ */
+export type QueryAccessor<C extends ArcContextAny> = {
+    [E in C["elements"][number] as E["queryContext"] extends (...args: any[]) => any ? E["name"] : never]: E["queryContext"] extends (...args: any[]) => infer R ? {
+        [K in keyof R]: R[K] extends (...args: infer A) => Promise<infer V> ? (...args: A) => readonly [V | undefined, boolean] : never;
+    } : never;
+};
+/**
+ * Accessor type for useMutation() — maps element names to their mutation methods.
+ */
+export type MutationAccessor<C extends ArcContextAny> = {
+    [E in C["elements"][number] as E["mutateContext"] extends (...args: any[]) => any ? E["name"] : never]: E["mutateContext"] extends (...args: any[]) => infer R ? R : never;
+};
+export interface ScopeAPI<C extends ArcContextAny = ArcContextAny> {
+    Provider: React.FC<{
+        children: React.ReactNode;
+    }>;
+    useQuery: () => QueryAccessor<C>;
+    useMutation: () => MutationAccessor<C>;
+    setToken: (token: string | null) => void;
+    useToken: () => string | null;
+}
 export declare const modelProviderFactory: <C extends ArcContextAny>(context: C, options: ReactModelOptions) => {
     ModelProvider: (props: {
         children: React.ReactNode;
@@ -7,8 +31,7 @@ export declare const modelProviderFactory: <C extends ArcContextAny>(context: C,
     useModel: () => Model<C>;
     commandWire: CommandWire | undefined;
     eventWire: EventWire | undefined;
-    setAuthToken: (token: string | null) => void;
+    createScope: (name: string) => ScopeAPI<C>;
     resetModel: () => Promise<void>;
-    onReset: (callback: () => void) => void;
 };
 //# sourceMappingURL=model-provider-factory.d.ts.map

package/dist/src/form/form.d.ts

@@ -28,5 +28,5 @@ export type FormProps<T extends ArcObjectAny> = {
 };
 export declare const FormContext: React.Context<FormContextValue<any> | null>;
 export declare function useForm<T extends ArcObjectAny>(): FormContextValue<T>;
-export declare const Form: <T extends ArcObjectAny>(props: FormProps<T> & React.RefAttributes<FormRef<T>>) => JSX.Element;
+export declare const Form: <T extends ArcObjectAny>(props: FormProps<T> & React.RefAttributes<FormRef<T>>) => React.JSX.Element;
 //# sourceMappingURL=form.d.ts.map

package/dist/src/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./form/";
 export * from "./options";
 export * from "./react-model";
+export type { ScopeAPI } from "./factories/model-provider-factory";
 //# sourceMappingURL=index.d.ts.map

package/dist/src/react-model.d.ts

@@ -5,12 +5,10 @@ export declare const reactModel: <C extends ArcContextAny>(context: C, options?:
         children: React.ReactNode;
     }) => import("react/jsx-dev-runtime").JSX.Element | undefined;
     readonly useModel: () => import("@arcote.tech/arc").Model<C>;
-    readonly useQuery: <TResult>(queryFn: (q: { [Element in C["elements"][number] as Element["queryContext"] extends (...args: any[]) => infer Return ? Element["name"] : never]: Element["queryContext"] extends (...args: any[]) => infer Return ? Return : never; } extends infer T ? { [K in keyof T]: T[K]; } : never) => Promise<TResult>, dependencies?: any[]) => [TResult | undefined, boolean];
-    readonly useCommands: () => { [Element in C["elements"][number] as Element["mutateContext"] extends (...args: any[]) => infer Return ? Element["name"] : never]: Element["mutateContext"] extends (...args: any[]) => infer Return ? Return : never; } extends infer T ? { [K in keyof T]: T[K]; } : never;
+    /** Create a named scope with its own token, Provider, and hooks */
+    readonly createScope: (name: string) => import("./factories").ScopeAPI<C>;
     /** CommandWire instance for remote execution (if remoteUrl provided) */
     readonly commandWire: import("@arcote.tech/arc").CommandWire | undefined;
-    /** Set auth token for remote command execution */
-    readonly setAuthToken: (token: string | null) => void;
     /** Reset model - destroys local database and disconnects from host */
     readonly resetModel: () => Promise<void>;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcote.tech/arc-react",
   "type": "module",
-  "version": "0.3.4",
+  "version": "0.4.2",
   "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.",
@@ -24,17 +24,17 @@
   },
   "devDependencies": {
     "@types/bun": "latest",
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "nodemon": "^2.0.22",
     "prettier": "^3.0.3",
     "rimraf": "^5.0.5",
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
-    "@arcote.tech/arc": "latest",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "@arcote.tech/arc": "^0.4.2",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
     "typescript": "^5.0.0"
   },
   "files": [

package/dist/src/factories/use-commands-factory.d.ts

@@ -1,3 +0,0 @@
-import { type ArcContextAny, type Model } from "@arcote.tech/arc";
-export declare const useCommandsFactory: <C extends ArcContextAny>(useModel: () => Model<C>) => () => { [Element in C["elements"][number] as Element["mutateContext"] extends (...args: any[]) => infer Return ? Element["name"] : never]: Element["mutateContext"] extends (...args: any[]) => infer Return ? Return : never; } extends infer T ? { [K in keyof T]: T[K]; } : never;
-//# sourceMappingURL=use-commands-factory.d.ts.map

package/dist/src/factories/use-query-factory.d.ts

@@ -1,3 +0,0 @@
-import { type ArcContextAny, type Model, type QueryContext } from "@arcote.tech/arc";
-export declare const useQueryFactory: <C extends ArcContextAny>(useModel: () => Model<C>) => <TResult>(queryFn: (q: QueryContext<C>) => Promise<TResult>, dependencies?: any[]) => [TResult | undefined, boolean];
-//# sourceMappingURL=use-query-factory.d.ts.map