update

Author: zhangfisher

docs/demos/form/formStore.tsx

@@ -0,0 +1,44 @@
+import React from "react"
+import { createStore, useForm } from "@autostorejs/react";
+import { Button, CheckBox, Input, JsonView, Layout, TextArea } from "x-react-components";
+
+const store = createStore({
+    users:[
+        {
+            name:"张三",
+            age:18,
+            address:"北京",
+            phone:"1234567890",
+            email:"[email protected]",
+            vip:false,
+            resume:"非常优秀的员工"            
+        }
+    ] 
+  }) 
+
+   
+
+export default ()=>{
+    
+    const { Form,reset } = useForm<typeof store.state.users[0]>(store,{entry:'users.0'})
+    const [ state ] = store.useReactive()
+      return (
+        <Layout>        
+            <div> 
+                <Form>
+                    <Input name="user.name" label="Name"/>
+                    <Input name="user.age" label="Age" type="number"/>
+                    <Input name="user.address" label="Address"/>
+                    <Input name="user.phone" label="Phone"/>
+                    <Input name="user.email" label="Email" type="email"/>
+                    <TextArea name="user.resume" label="Resume"/> 
+                    <CheckBox name='user.vip' label="VIP"/>
+                </Form>  
+                <Button onClick={()=>reset()}>Reset</Button>
+            </div>
+            <div>
+                <JsonView data={state}/>
+            </div>
+        </Layout>
+      )
+}

docs/demos/watch/useWatchDirty.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { createStore } from '@autostorejs/react';
 import { ColorBlock,Button,Input, Layout } from "x-react-components"
 
-  const { state,useFields,batchUpdate,$,useWatch  } = createStore({
+  const { reset,useFields,$,useWatch  } = createStore({
   user:{
     firstName:"Zhang",
     lastName:"Fisher",
@@ -15,24 +15,18 @@ import { ColorBlock,Button,Input, Layout } from "x-react-components"
 export default ()=>{
   const bindings = useFields({entry:'user'})
 
-  const [ dirty,setDirty ]  = useWatch<boolean>(({path})=>{   
+  const [ dirty ]  = useWatch<boolean>(({path})=>{   
             if(['firstName','lastName'].includes(path[path.length-1])){
                 return true
             }
           },{initial:false})
-
-
   return (
     <Layout>
     <div>
       <Input label="FirstName" {...bindings.firstName}/>
       <Input label="lastName" {...bindings.lastName}/>
       <Button onClick={()=>{
-          batchUpdate(state=>{
-            state.user.firstName = "Zhang"
-            state.user.lastName = "Fisher"
-          })          
-          setDirty(false)
+          reset()        
       }}>Reset</Button>
     </div>     
     <div>

docs/guide/form/useform/basic.md

@@ -1,7 +1,11 @@
 
 # 基本用法
 
-`useForm`返回一个`Form`组件，该组件是对标准`form`元素的封装。
+`useForm`返回`Form`或`Field`等组件，该组件是对标准`form`元素的封装。
+
+## 全新表单
+
+可以通过`useForm`创建一个全新的表单，如下：
 
 ```tsx
 import { useForm } from "@autostorejs/react"
@@ -26,10 +30,17 @@ const { Form } = useForm({
 
 **下面是一个简单的示例：**
 
-<demo react="form/formBase.tsx"/>
+demo react="form/formBase.tsx"
+
+:::warning 提示
+`useForm`内部会创建一个`Store`实例，用于存储表单数据。
+::: 
+
+
+## 基于现有Store
+
+`useForm`还可以基于现有的`Store`实例创建表单，如下：
 
+<demo react="form/formStore.tsx" />
 
 
-:::info 提示
-配置`input`元素的`name=<状态数据路径>`即可。
-::: 

docs/guide/watch/use-watch.md

@@ -37,11 +37,16 @@ export interface UseWatchType<State extends Dict> {
 
 ## 基本用法
 
-同样的`diray`功能实现如下:
+同样的`diray`检测功能实现如下:
 
 <demo react="watch/useWatchDirty.tsx"/>
 
 
+- `useWatch`创建的侦听会在组件销毁时自动取消订阅，不需要手动取消订阅。
+- `useWatch`不会创建`WatchObject`.
+- `useWatch`的`getter`函数可以返回一个值作为`React`状态，该状态会在`selector`所指向的状态变化后自动更新。
+- 如果没有指定`selector`，则会侦听`store`对象的所有变化。
+
 
 :::warning 提示
 `useWatch`会在组件销毁时自动取消订阅，不需要手动取消订阅。

packages/core/src/events/types.ts

@@ -5,6 +5,7 @@ import type { WatchObject } from "../watch/watchObject";
 export type StoreEvents = {
     'load'              : AutoStore<any>;                               // 响应对象创建后
     'unload'            : AutoStore<any>                                // 响应对象销毁后
+    'reset'             : AutoStore<any>                                // 对象重置后
     'computed:created'  : ComputedObject                                // 当计算对象创建时
     'computed:done'     : {id:string,path:string[],value:any,computedObject:ComputedObject}           // 当计算函数执行成功后
     'computed:error'    : {id:string,path:string[],error:any,computedObject:ComputedObject}           // 当计算函数执行出错时

packages/core/src/store/store.ts

@@ -144,6 +144,7 @@ export class AutoStore<State extends Dict> extends EventEmitter<StoreEvents>{
                     this._updatedState![pathKey] = oldValue
                 }
             },{operates:'write'})
+
         }else{
             if(this._updatedWatcher){
                 this._updatedWatcher.off()
@@ -171,9 +172,10 @@ export class AutoStore<State extends Dict> extends EventEmitter<StoreEvents>{
                 })  
             }finally{
                 this._updatedState = {}
+                this.emit("reset",this)
             }          
         }else{
-            throw new Error("resetable option is not enabled")
+            this.log("resetable option is not enabled","warn")
         }
     }
 

packages/core/src/types.ts

@@ -76,34 +76,10 @@ declare global {
 
 export type Primitive = string | number | boolean | null | undefined | symbol | bigint;
 
-export type Dict<T=any> = Record<string,T>
- 
-
+export type Dict<T=any> = T extends (...args:any[])=>any ? never : Record<string,T>
+   
 
 export type ObjectKeyPaths<T> =Exclude<Paths<T,{maxRecursionDepth:30}>,number>
 
-export type GetTypeByPath<State extends Dict,Path extends string> = Get<State,Path>
-
-
-
-// type Project = {
-// 	filename: string;
-// 	listA: string[];
-// 	listB: [{filename: string}];
-// 	folder: {
-// 		subfolder: {
-// 			filename: string;
-// 		};
-// 	};
-// };
-
-// type ProjectPaths = Paths<Project>;
+export type GetTypeByPath<State extends Dict,Path extends string> = Path extends '' | undefined ? State : Get<State,Path>
 
-// type G<
-//     State extends Dict,
-//     Name extends Exclude<Paths<State>,number>,
-//     VALUE extends  GetTypeByPath<State,Name> // string
-//     >={
-//     name:Name,
-//     value:VALUE
-// }

packages/core/src/utils/getVal.ts

@@ -1,14 +1,16 @@
+import { PATH_DELIMITER } from "../consts";
 import { getMapVal } from "./getMapVal";
 import { isMap } from "./isMap";
 
-export function getVal(obj: any, keyPath: string[] | undefined,defaultValue?:any): any {
+export function getVal(obj: any, keyPath: string | string[] | undefined,defaultValue?:any): any {
     if(!keyPath) return obj
     if(keyPath.length === 0) return obj
+    let paths:string[] = Array.isArray(keyPath) ? keyPath : keyPath.split(PATH_DELIMITER);
     let val;
     let parent = obj;
 
-    for (let i = 0; i < keyPath.length; i++) {
-      const key = keyPath[i];
+    for (let i = 0; i < paths.length; i++) {
+      const key = paths[i];
       if (isMap(parent)) {
         val = getMapVal(parent, key);
       } else {
@@ -18,7 +20,7 @@ export function getVal(obj: any, keyPath: string[] | undefined,defaultValue?:any
           if(defaultValue!==undefined){
             return defaultValue
           }else{
-            throw new Error(`invalid state path: ${keyPath.join(".")}`);
+            throw new Error(`invalid state path: ${paths.join(".")}`);
           }
         }
       }

packages/react/src/form/Field.tsx

@@ -258,7 +258,6 @@ export function createAutoFieldComponent<State extends Dict>(store: ReactAutoSto
                 error      : validate?.error?.message,
                 onChange
             })   
-            // formCtx.current?.validator!.updateInvalids(name, isValid)
         }  
 
         const getFieldPropObj = useCallback((path:string[]):[string | undefined,ComputedObject<any> | undefined]=>{
@@ -273,6 +272,7 @@ export function createAutoFieldComponent<State extends Dict>(store: ReactAutoSto
         useEffect(()=>{
             const watchers:Watcher[] =[]
             let count:number = 0
+            // 当validate字段校验失败时触发错误导致计算出错，此处可以捕获进行更新
             watchers.push(store.on("computed:error",({path,error})=>{
                 const [propKey,propObj] = getFieldPropObj(path)
                 if(propObj && propKey){   
@@ -281,12 +281,13 @@ export function createAutoFieldComponent<State extends Dict>(store: ReactAutoSto
                     setRefresh(++count)
                 }
             }))
+            // 侦听字段的变化，当变化时，重新渲染字段
             watchers.push(store.watch(name,({value}:any)=>{
                 Object.assign(renderProps.current!,{value})
                 Object.assign(renderProps.current!.bind,{value})
                 setRefresh(++count)
             }))
-            // 侦听所有字段计算属性的变化，当变化时，重新渲染字段
+            // 侦听所有字段相关的计算属性(validate,visible等)的变化，当变化时，重新渲染字段
             watchers.push(store.watch(`#${name}.*`,({path,value})=>{
                 const [propKey,propObj] = getFieldPropObj(path)
                 if(propObj && propKey){
@@ -305,7 +306,12 @@ export function createAutoFieldComponent<State extends Dict>(store: ReactAutoSto
                     Object.assign(renderProps.current!,updated)
                     setRefresh(++count)                    
                 }
-            }))  
+            })) 
+            // 侦听Field字段的validate属性的变化，当变化里需要更新校验结果 
+            // Field字段的validate属性是一个计算属性，其path="#name.validate"形式，具有以#开头，以validate结尾的特点
+            watchers.push(store.watch(`#${name}.validate`,({value})=>{
+
+            }))
             return ()=>watchers.forEach(w=>w.off())
         },[])
         return <>{props.render(renderProps.current as any)}</> 

packages/react/src/form/Form.tsx

@@ -5,7 +5,6 @@ import { UseFormOptions } from "./types";
 import { Validator } from './validator';
 import { findAutoFields } from "./utils/findAutoFields";
 import React from "react"; 
-import { isEmpty } from "../utils/isEmpty"; 
 import { fromStateToField } from "./utils/fromStateToField";
 import { fromFieldToState } from "./utils";
 import { isFalse } from "./utils/isFalse";
@@ -51,16 +50,13 @@ export function createAutoFormComponent<State extends Dict>(store: ReactAutoStor
 	const options:UseFormOptions<State> = formCtx.current!.options	
     return (props:AutoFormProps<State>)=>{        		
 		const initial = useRef<boolean>(false);
+		
         // 仅在初始化时执行一次
         const initForm = useCallback(()=>{
             const form = options.ref!.current;            
 			if (!form) return;             
             let initValid:boolean	= true
-			ctx.fields = findAutoFields(form,options.findFields);            
-			if(isEmpty(ctx.fields)){
-				store.log('No fields found in the autoform', 'warn')
-				return
-			}			
+			ctx.fields = findAutoFields(form,options.findFields);       	
 			ctx.validator.attach()
 			// 初始化表单控件的值: 从state读取数据更新到表单控件
 			initFormFields(store,ctx.fields,options)            
@@ -76,15 +72,16 @@ export function createAutoFormComponent<State extends Dict>(store: ReactAutoStor
 		useEffect(() => {
 			const form = options.ref!.current;
 			if (!form) return;
-			const { entry = [] } = options;
+			const { entry =[] } = options;
+			const entryPath = Array.isArray(entry) ? entry :  entry.split(PATH_DELIMITER) 
             // 1. 初始化表单控件
 			if (!initial.current && form) {
 				initForm()
 			}
 			// 2. 侦听来自变更
 			const watcher = store.watch(({path, value }) => {
 				// 2.1 如果变更的路径不是表单的路径，则忽略
-				if (!pathStartsWith(entry, path)) return;
+				if (!pathStartsWith(entryPath, path)) return;
 				// 2.2 更新到表单的输入控件
 				const spath = path.join(PATH_DELIMITER);
 				if (spath in ctx.fields) {
@@ -133,8 +130,6 @@ export function createAutoFormComponent<State extends Dict>(store: ReactAutoStor
 			};
 
 		},[]);
-
-		
 
 		return <form {...props} 
 			ref={options.ref}