@arcote.tech/arc-react 0.1.1 → 0.1.3

package/dist/form/field.d.ts

@@ -1,4 +1,4 @@
-import type { ArcElement } from "@arcote.tech/arc/elements/element";
+import type { ArcElement } from "@arcote.tech/arc";
 import React from "react";
 export type FormFieldContext = {
     errors: any;
@@ -16,8 +16,9 @@ type FormFieldProps<E extends ArcElement> = {
 export type FormFieldData<T> = {
     onChange: (value: any) => void;
     value: any;
+    defaultValue?: any;
     name: string;
 };
-export declare function FormField<E extends ArcElement>(name: string): ({ translations, render }: FormFieldProps<E>) => import("react/jsx-dev-runtime").JSX.Element;
+export declare function FormField<E extends ArcElement>(name: string, defaultValue?: any): ({ translations, render }: FormFieldProps<E>) => import("react/jsx-dev-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=field.d.ts.map

package/dist/form/form-part.d.ts

@@ -0,0 +1,17 @@
+import { type ArcObjectAny } from "@arcote.tech/arc";
+import React from "react";
+export type FormPartContextValue = {
+    registerField: (field: string) => void;
+    unregisterField: (field: string) => void;
+    validatePart: () => boolean;
+};
+export declare const FormPartContext: React.Context<FormPartContextValue | null>;
+export declare function FormPart({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-dev-runtime").JSX.Element;
+export declare namespace FormPart {
+    var displayName: string;
+}
+export declare function useFormPart<T extends ArcObjectAny>(): FormPartContextValue;
+export declare function useFormPartField(fieldName: string): FormPartContextValue | null;
+//# sourceMappingURL=form-part.d.ts.map

package/dist/form/form.d.ts

@@ -1,4 +1,4 @@
-import { type ArcObjectAny, type ArcObjectKeys, type ArcObjectValueByKey } from "@arcote.tech/arc";
+import { type $type, type ArcObjectAny, type ArcObjectKeys, type ArcObjectValueByKey } from "@arcote.tech/arc";
 import React from "react";
 import { FormField } from "./field";
 export type FormContextValue<T extends ArcObjectAny> = {
@@ -8,16 +8,22 @@ export type FormContextValue<T extends ArcObjectAny> = {
     isSubmitted: boolean;
     setFieldValue: (field: ArcObjectKeys<T>, value: any) => void;
     setFieldDirty: (field: ArcObjectKeys<T>) => void;
+    validatePartial: (keys: ArcObjectKeys<T>[]) => boolean;
 };
-export declare const FormContext: React.Context<FormContextValue<any> | null>;
-export declare function Form<T extends ArcObjectAny>({ render, schema, onSubmit, }: {
+export type FormRef<T extends ArcObjectAny> = {
+    submit: () => Promise<void>;
+    getValues: () => Partial<$type<T>>;
+    validate: () => boolean;
+};
+export type FormProps<T extends ArcObjectAny> = {
     render: (props: {
         [K in ArcObjectKeys<T> as Capitalize<`${K}`>]: ReturnType<typeof FormField<ArcObjectValueByKey<T, K>>>;
-    }) => React.ReactNode;
+    }, values: Partial<$type<T>>) => React.ReactNode;
     schema: T;
-    onSubmit: (values: Record<ArcObjectKeys<T>, any>) => void | Promise<void>;
-}): import("react/jsx-dev-runtime").JSX.Element;
-export declare namespace Form {
-    var displayName: string;
-}
+    onSubmit: (values: $type<T>) => void | Promise<void>;
+    onUnvalidatedSubmit?: (values: Partial<$type<T>>, errors: any) => void;
+    defaults?: Partial<$type<T>>;
+};
+export declare const FormContext: React.Context<FormContextValue<any> | null>;
+export declare const Form: <T extends ArcObjectAny>(props: FormProps<T> & React.RefAttributes<FormRef<T>>) => JSX.Element;
 //# sourceMappingURL=form.d.ts.map

package/dist/form/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./field";
 export * from "./form";
+export * from "./form-part";
 export * from "./legacy_form_resolver";
 export * from "./message";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,99 +1,195 @@
 'use client';
 // form/field.tsx
-import { createContext as createContext2, useCallback as useCallback2, useContext, useMemo as useMemo2 } from "react";
+import { createContext as createContext3, useCallback as useCallback3, useContext as useContext2, useMemo as useMemo2 } from "react";
 
 // form/form.tsx
+import {
+  deepMerge
+} from "@arcote.tech/arc";
 import {
   createContext,
+  forwardRef,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useMemo,
   useState
 } from "react";
 import { jsx } from "react/jsx-runtime";
 var FormContext = createContext(null);
-function Form({
-  render,
-  schema,
-  onSubmit
-}) {
+var Form = forwardRef(function Form2(props, ref) {
+  const { render, schema, onSubmit, defaults, onUnvalidatedSubmit } = props;
   const [values, setValues] = useState({});
   const [errors, setErrors] = useState({});
   const [dirty, setDirty] = useState(new Set);
   const [isSubmitted, setIsSubmitted] = useState(false);
+  useEffect(() => {
+    if (defaults) {
+      setValues((prev) => ({
+        ...prev,
+        ...defaults
+      }));
+    }
+  }, [defaults]);
   const validate = useCallback(() => {
     const errors2 = schema.validate(values);
     setErrors(errors2);
+    setDirty(new Set(schema.entries().map(([key]) => key)));
     return Object.values(errors2).some((result) => result);
   }, [schema, values]);
+  const validatePartial = useCallback((keys) => {
+    const partialValues = keys.reduce((acc, key) => ({ ...acc, [key]: values[key] }), {});
+    const errors2 = schema.validatePartial(partialValues);
+    if (errors2)
+      setErrors((prev) => deepMerge(prev, errors2));
+    setDirty((prev) => {
+      const newSet = new Set([...prev, ...keys]);
+      if (newSet.size === prev.size && [...prev].every((key) => newSet.has(key))) {
+        return prev;
+      }
+      return newSet;
+    });
+    return Object.values(errors2).some((result) => result);
+  }, [schema, values, dirty]);
   const setFieldValue = useCallback((field, value) => {
     setValues((prev) => ({ ...prev, [field]: value }));
-  }, [schema, isSubmitted]);
-  useEffect(() => {
-    if (isSubmitted) {
-      validate();
-    }
-  }, [isSubmitted, values]);
+  }, []);
   const setFieldDirty = useCallback((field) => {
     setDirty((prev) => new Set([...prev, field]));
   }, []);
-  const hasErrors = useMemo(() => Object.values(errors).some((result) => result), [errors]);
+  useEffect(() => {
+    const partialValues = Array.from(dirty).reduce((acc, key) => ({ ...acc, [key]: values[key] }), {});
+    const errors2 = schema.validatePartial(partialValues);
+    setErrors(errors2);
+  }, [values, dirty]);
   const handleSubmit = useCallback(async (e) => {
-    e.preventDefault();
+    if (e) {
+      e.preventDefault();
+    }
     setIsSubmitted(true);
-    const hasErrors2 = validate();
-    if (!hasErrors2) {
+    const hasErrors = validate();
+    if (!hasErrors) {
       await onSubmit(values);
+    } else {
+      onUnvalidatedSubmit?.(values, errors);
     }
-  }, [schema, values, onSubmit, hasErrors]);
+  }, [schema, values, onSubmit, validate, errors, onUnvalidatedSubmit]);
+  useImperativeHandle(ref, () => ({
+    submit: handleSubmit,
+    getValues: () => values,
+    validate
+  }), [handleSubmit, values, validate]);
   const Fields = useMemo(() => {
     return Object.fromEntries(schema.entries().map(([key, value]) => [
       key.charAt(0).toUpperCase() + key.slice(1),
-      FormField(key)
+      FormField(key, defaults?.[key])
     ]));
-  }, [schema]);
+  }, [schema, defaults]);
   const contextValue = useMemo(() => ({
     values,
     errors,
     dirty,
     isSubmitted,
     setFieldValue,
-    setFieldDirty
-  }), [values, errors, dirty, isSubmitted, setFieldValue, setFieldDirty]);
+    setFieldDirty,
+    validatePartial
+  }), [
+    values,
+    errors,
+    dirty,
+    isSubmitted,
+    setFieldValue,
+    setFieldDirty,
+    validatePartial
+  ]);
   return /* @__PURE__ */ jsx(FormContext.Provider, {
     value: contextValue,
     children: /* @__PURE__ */ jsx("form", {
       onSubmit: handleSubmit,
-      children: render(Fields)
+      children: render(Fields, values)
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
+});
+
+// form/form-part.tsx
+import React2, { createContext as createContext2, useCallback as useCallback2, useContext, useState as useState2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FormPartContext = createContext2(null);
+function FormPart({ children }) {
+  const formContext = useContext(FormContext);
+  if (!formContext) {
+    throw new Error("FormPart must be used within a Form");
+  }
+  const [registeredFields, setRegisteredFields] = useState2(new Set);
+  const registerField = useCallback2((field) => {
+    setRegisteredFields((prev) => new Set([...prev, field]));
+  }, []);
+  const unregisterField = useCallback2((field) => {
+    setRegisteredFields((prev) => {
+      const newSet = new Set(prev);
+      newSet.delete(field);
+      return newSet;
+    });
+  }, []);
+  const validatePart = useCallback2(() => {
+    const { validatePartial } = formContext;
+    return validatePartial(Array.from(registeredFields));
+  }, [formContext, registeredFields]);
+  return /* @__PURE__ */ jsx2(FormPartContext.Provider, {
+    value: {
+      registerField,
+      unregisterField,
+      validatePart
+    },
+    children
+  }, undefined, false, undefined, this);
+}
+FormPart.displayName = "FormPart";
+function useFormPart() {
+  const context = useContext(FormPartContext);
+  if (!context) {
+    throw new Error("useFormPart must be used within a FormPart");
+  }
+  return context;
+}
+function useFormPartField(fieldName) {
+  const context = useContext(FormPartContext);
+  if (!context)
+    return null;
+  React2.useEffect(() => {
+    context.registerField(fieldName);
+    return () => {
+      context.unregisterField(fieldName);
+    };
+  }, [fieldName]);
+  return context;
 }
-Form.displayName = "Form";
 
 // form/field.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var FormFieldContext = createContext2(null);
+import { jsx as jsx3 } from "react/jsx-runtime";
+var FormFieldContext = createContext3(null);
 function useFormField() {
-  const context = useContext(FormFieldContext);
+  const context = useContext2(FormFieldContext);
   if (!context)
     throw new Error("useFormField must be used within a FormFieldProvider");
   return context;
 }
-function FormField(name) {
+function FormField(name, defaultValue) {
   return ({ translations, render }) => {
-    const form = useContext(FormContext);
+    const form = useContext2(FormContext);
     if (!form)
       throw new Error("FormField must be used within a Form");
+    useFormPartField(name);
     const { values, errors, dirty, isSubmitted, setFieldValue, setFieldDirty } = form;
     const schemaErrors = errors?.["schema"] || {};
     const fieldErrors = schemaErrors[name] || false;
-    const value = values[name] || "";
+    const value = values[name] ?? defaultValue ?? "";
     const isDirty = dirty.has(name);
-    const handleChange = useCallback2((value2) => {
-      if (typeof value2 === "string") {
-        setFieldValue(name, value2);
-      } else if (value2?.target?.value !== undefined) {
+    const handleChange = useCallback3((value2) => {
+      if (value2?.target?.value !== undefined) {
         setFieldValue(name, value2.target.value);
+      } else {
+        setFieldValue(name, value2);
       }
       if (!isDirty) {
         setFieldDirty(name);
@@ -116,12 +212,13 @@ function FormField(name) {
       errors: isSubmitted ? fieldErrors : false,
       messages: errorMessages
     }), [fieldErrors, isSubmitted, errorMessages]);
-    return /* @__PURE__ */ jsx2(FormFieldContext.Provider, {
+    return /* @__PURE__ */ jsx3(FormFieldContext.Provider, {
       value: contextValue,
       children: render({
         onChange: handleChange,
         name: name.toString(),
-        value
+        value,
+        defaultValue
       })
     }, undefined, false, undefined, this);
   };
@@ -136,12 +233,12 @@ function formResolver(schema) {
   };
 }
 // form/message.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function FormMessage({ ...props }) {
   const { messages } = useFormField();
   if (messages.length === 0)
     return null;
-  return /* @__PURE__ */ jsx3("span", {
+  return /* @__PURE__ */ jsx4("span", {
     ...props,
     children: messages[0]
   }, undefined, false, undefined, this);
@@ -155,12 +252,13 @@ import {
   rtcClientFactory
 } from "@arcote.tech/arc";
 import {
-  createContext as createContext3,
-  useContext as useContext2,
+  createContext as createContext4,
+  useCallback as useCallback4,
+  useContext as useContext3,
   useEffect as useEffect2,
   useMemo as useMemo3,
   useRef,
-  useState as useState2
+  useState as useState3
 } from "react";
 
 // sqliteWasmAdapter.ts
@@ -174,19 +272,22 @@ var sqliteWasmAdapterFactory = (db) => {
 };
 
 // reactModel.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var reactModel = (arcContextPromise, options) => {
-  const LiveModelContext = createContext3(null);
-  const LocalModelContext = createContext3(null);
+  const LiveModelContext = createContext4(null);
+  const LocalModelContext = createContext4(null);
   let masterModel = null;
   return [
     function LiveModelProvider(props) {
-      const [context, setContext] = useState2(null);
+      const [context, setContext] = useState3(null);
       useEffect2(() => {
         arcContextPromise.then((arcContext) => {
           setContext(arcContext);
         });
       }, [arcContextPromise]);
+      useEffect2(() => {
+        model?.setAuthToken(props.token);
+      }, [props.token]);
       const model = useMemo3(() => {
         if (typeof window === "undefined")
           return null;
@@ -201,13 +302,13 @@ var reactModel = (arcContextPromise, options) => {
         } else {
           const dbAdapterPromise = sqliteWasmAdapterFactory(options.sqliteAdapter)(context);
           const dataStorage = new MasterDataStorage(dbAdapterPromise, rtcClientFactory(props.token), context);
-          const model2 = new Model(context, dataStorage, props.client, props.catchErrorCallback);
+          const model2 = new Model(context, dataStorage, props.catchErrorCallback);
           masterModel = model2;
           return model2;
         }
       }, [context, options, props.client]);
-      const [syncProgress, setSyncProgress] = useState2([]);
-      const [syncDone, setSyncDone] = useState2(false);
+      const [syncProgress, setSyncProgress] = useState3([]);
+      const [syncDone, setSyncDone] = useState3(false);
       useEffect2(() => {
         if (typeof window === "undefined" || !model)
           return;
@@ -222,81 +323,128 @@ var reactModel = (arcContextPromise, options) => {
         sync();
       }, [model]);
       if (!model || !syncDone)
-        return props.syncView ? /* @__PURE__ */ jsx4(props.syncView, {
+        return props.syncView ? /* @__PURE__ */ jsx5(props.syncView, {
           progress: syncProgress
         }, undefined, false, undefined, this) : null;
-      return /* @__PURE__ */ jsx4(LiveModelContext.Provider, {
+      return /* @__PURE__ */ jsx5(LiveModelContext.Provider, {
         value: model,
         children: props.children
       }, undefined, false, undefined, this);
     },
     function LocalModelProvider({ children }) {
-      const parentModel = useContext2(LiveModelContext);
+      const parentModel = useContext3(LiveModelContext);
       if (!parentModel || !(parentModel instanceof Model)) {
         throw new Error("LocalModelProvider must be used within a LiveModelProvider");
       }
-      const [localModel] = useState2(() => parentModel.fork());
-      return /* @__PURE__ */ jsx4(LocalModelContext.Provider, {
+      const [localModel] = useState3(() => parentModel);
+      return /* @__PURE__ */ jsx5(LocalModelContext.Provider, {
         value: localModel,
         children
       }, undefined, false, undefined, this);
     },
-    function useQuery(queryBuilderFn, dependencies = []) {
-      const model = useContext2(LocalModelContext) || useContext2(LiveModelContext);
+    function useQuery(queryBuilderFn, dependencies = [], cacheKey) {
+      const model = useContext3(LocalModelContext) || useContext3(LiveModelContext);
       if (!model) {
         throw new Error("useQuery must be used within a ModelProvider");
       }
-      const [result, setResult] = useState2(null);
-      const [loading, setLoading] = useState2(true);
+      const [result, setResult] = useState3(null);
+      const [revalidationTrigger, setRevalidationTrigger] = useState3(0);
       const unsubscribeRef = useRef(null);
+      useEffect2(() => {
+        if (cacheKey) {
+          if (!model.__cacheRegistry) {
+            model.__cacheRegistry = new Map;
+          }
+          if (!model.__cacheRegistry.has(cacheKey)) {
+            model.__cacheRegistry.set(cacheKey, new Set);
+          }
+          const revalidateFn = () => {
+            setRevalidationTrigger((prev) => prev + 1);
+          };
+          model.__cacheRegistry.get(cacheKey).add(revalidateFn);
+          return () => {
+            const registry = model.__cacheRegistry?.get(cacheKey);
+            if (registry) {
+              registry.delete(revalidateFn);
+              if (registry.size === 0) {
+                model.__cacheRegistry.delete(cacheKey);
+              }
+            }
+          };
+        }
+      }, [model, cacheKey]);
       useEffect2(() => {
         if (unsubscribeRef.current) {
           unsubscribeRef.current();
         }
+        const defaultAuthContext = { userId: "react-user", roles: ["user"] };
         const { unsubscribe, result: result2 } = model.subscribe(queryBuilderFn, (newResult) => {
           setResult(newResult);
-          setLoading(false);
-        });
+        }, defaultAuthContext);
         unsubscribeRef.current = unsubscribe;
-        result2.then(() => {
-          setLoading(false);
-        });
         return () => {
           if (unsubscribeRef.current) {
             unsubscribeRef.current();
             unsubscribeRef.current = null;
           }
         };
-      }, [model, ...dependencies]);
-      return [result, loading];
+      }, [model, revalidationTrigger, ...dependencies]);
+      return [result];
+    },
+    function useRevalidate() {
+      const model = useContext3(LocalModelContext) || useContext3(LiveModelContext);
+      if (!model) {
+        throw new Error("useRevalidate must be used within a ModelProvider");
+      }
+      return useCallback4((cacheKey) => {
+        const registry = model.__cacheRegistry;
+        if (registry && registry.has(cacheKey)) {
+          const revalidators = registry.get(cacheKey);
+          revalidators?.forEach((revalidateFn) => {
+            revalidateFn();
+          });
+        }
+      }, [model]);
     },
     function useCommands() {
-      const model = useContext2(LocalModelContext) || useContext2(LiveModelContext);
+      const model = useContext3(LocalModelContext) || useContext3(LiveModelContext);
       if (!model) {
         throw new Error("useCommands must be used within a ModelProvider");
       }
-      return model.commands();
+      const defaultAuthContext = { userId: "react-user", roles: ["user"] };
+      return model.commands(defaultAuthContext);
     },
     async function query(queryBuilderFn, model) {
       if (!model)
         model = masterModel;
       if (!model)
         throw new Error("Model not found");
-      return model.query(queryBuilderFn);
+      const defaultAuthContext = { userId: "react-user", roles: ["user"] };
+      return model.query(queryBuilderFn, defaultAuthContext);
     },
     function useLocalModel() {
-      const model = useContext2(LocalModelContext);
+      const model = useContext3(LocalModelContext);
       if (!model) {
         return null;
       }
       return model;
+    },
+    function useModel(token) {
+      const parentModel = useContext3(LiveModelContext);
+      if (!parentModel)
+        throw new Error("useModel have to be used in Provider");
+      return parentModel;
     }
   ];
 };
 export {
+  useFormPartField,
+  useFormPart,
   useFormField,
   reactModel,
   formResolver,
+  FormPartContext,
+  FormPart,
   FormMessage,
   FormFieldContext,
   FormField,
@@ -304,4 +452,4 @@ export {
   Form
 };
 
-//# debugId=1DFCDB435242322064756E2164756E21
+//# debugId=8ECE7A0A6915EECC64756E2164756E21