feat: add global useWatch/useSubscribe/form.watch

Author: 97vack

.vscode/settings.json

@@ -6,4 +6,4 @@
       "strings": "on"
     }
   }
-}
+}

scripts/generateApiData.js

@@ -111,15 +111,16 @@ function writeMarkdownFileSync(fileName, doscInstance) {
   const outputFilePath = path.join(outputDir, `${fileName}.md`);
   const { props, tags } = doscInstance;
 
-  const { group, groupOrder, embed, name, pageTitle, order, toc } = tags || {};
+  const { group, groupOrder, embed, name, pageTitle, order, toc, version } =
+    tags || {};
 
   const content = generateWriteContent(props);
 
   const title = name || fileName;
 
   const groupStr = `
 group:
-  title: ${group}
+  title: ${group || ''}
   order: ${groupOrder || 0}
   `;
 
@@ -134,7 +135,7 @@ nav:
 title: ${title}
 order: ${order || 0}
 ${toc === 'false' ? '' : tocStr}
-${group ? groupStr : ''}
+${group || groupOrder ? groupStr : ''}
 ---
 
 `;

scripts/generateApimd.js

@@ -1,21 +1,13 @@
 import { cloneDeep } from 'lodash';
 import ProxyPolyfillBuilder from 'proxy-polyfill/src/proxy';
 import React from 'react';
-import { isObject, isObjectOrArray } from './util';
+import type { DefaultRecord } from 'react-form-simple';
+import { isObject, isObjectOrArray } from 'react-form-simple/utils/util';
 
-export const proxyMap = new WeakMap();
-export const rawMap = new WeakMap();
-
-const _proxyMap = proxyMap;
-const _rawMap = rawMap;
-
-const proxyPolyfill = ProxyPolyfillBuilder();
-const Proxys = window.Proxy || proxyPolyfill;
+const ProxyPolyfill = window.Proxy || ProxyPolyfillBuilder();
 
 export type ObserverOptions = {
   path?: string[];
-  proxyMap: WeakMap<object, any>;
-  rawMap: WeakMap<object, any>;
   onChangeLength?: () => void;
 };
 
@@ -131,28 +123,14 @@ export const updateProxyValue = (
   }
 };
 
-export const observer = <T extends object>(
+export const observer = <T extends DefaultRecord>(
   initialVal: T,
   cb?: (args: ObserverCb) => void,
   options?: ObserverOptions,
 ): T => {
-  const {
-    path = [],
-    onChangeLength,
-    proxyMap,
-    rawMap,
-  } = (options || {}) as ObserverOptions;
-
-  const existingProxy = proxyMap.get(initialVal);
-  if (existingProxy) {
-    return existingProxy;
-  }
-
-  if (rawMap.has(initialVal)) {
-    return initialVal;
-  }
+  const { path = [], onChangeLength } = (options || {}) as ObserverOptions;
 
-  const proxy = new Proxys(initialVal, {
+  const proxy = new ProxyPolyfill(initialVal, {
     get(target, key, receiver) {
       const ret = Reflect.get(target, key, receiver);
       if (React.isValidElement(ret)) return ret;
@@ -184,42 +162,3 @@ export const observer = <T extends object>(
 
   return proxy;
 };
-
-export const createControllerObserver = <T extends object>(
-  initialVal: T,
-  cb?: (args: ObserverCb) => void,
-  options?: ObserverOptions,
-): T => {
-  const { path = [], rawMap = _rawMap, proxyMap = _proxyMap } = options || {};
-  const existingProxy = proxyMap.get(initialVal);
-  if (existingProxy) {
-    return existingProxy;
-  }
-
-  if (rawMap.has(initialVal)) {
-    return initialVal;
-  }
-
-  const proxy = new Proxys(initialVal, {
-    get(target, key, receiver) {
-      const ret = Reflect.get(target, key, receiver);
-      if (React.isValidElement(ret)) return ret;
-      return isObjectOrArray(ret)
-        ? createControllerObserver(ret as T, cb, {
-            ...(options as ObserverOptions),
-            path: [...path, key.toString()],
-          })
-        : ret;
-    },
-    set(target, key, val) {
-      const newPath = [...path, key.toString()];
-      const ret = Reflect.set(target, key, val);
-      cb?.({ path: newPath.join('.'), value: val });
-      return ret;
-    },
-  });
-
-  proxyMap.set(initialVal, proxy);
-  rawMap.set(proxy, initialVal);
-  return proxy;
-};

src/utils/controller.ts renamed to src/driver/ControllerDriver/controller.ts

@@ -0,0 +1 @@
+export * from './controller';

src/driver/ControllerDriver/index.ts

@@ -0,0 +1,25 @@
+import SubscribeMediator from './mediator/SubscribeMediator';
+import WatchMediator from './mediator/WatchMediator';
+
+export class ObserverFactory<T> {
+  public watchManager: WatchMediator<T> = {} as WatchMediator<T>;
+  public subscribeManager: SubscribeMediator<T> = {} as SubscribeMediator<T>;
+
+  private checkState(instance: WatchMediator<T> | SubscribeMediator<T>) {
+    return instance.getMountedState && instance.getMountedState();
+  }
+  create(type: 'watch' | 'subscribe') {
+    switch (type) {
+      case 'watch':
+        if (!this.checkState(this.watchManager)) {
+          this.watchManager = new WatchMediator<T>();
+        }
+      case 'subscribe':
+        if (!this.checkState(this.subscribeManager)) {
+          this.subscribeManager = new SubscribeMediator<T>();
+        }
+    }
+  }
+}
+
+export default ObserverFactory;

src/driver/ObserverDriver/Factory.ts

@@ -0,0 +1,6 @@
+export abstract class AbstractImp {
+  abstract emit(...args: any[]): void;
+  abstract update(...args: any[]): void;
+}
+
+export default AbstractImp;

src/driver/ObserverDriver/abstract/AbstractImp.ts

@@ -0,0 +1,36 @@
+import { isMeaningful } from 'react-form-simple/utils/util';
+import type { KeyType } from '../type';
+
+export abstract class AbstractObserver<
+  T extends { key: KeyType; destroy: () => void; emit: () => void },
+> {
+  protected readonly queue: T[] = [];
+  protected mounted: boolean = false;
+  abstract getMountedState(): boolean;
+  constructor() {
+    this.mounted = true;
+  }
+  public notify() {
+    this.get().forEach((observer) => void observer.emit?.());
+  }
+  protected get(index: number): T;
+  protected get(): T[];
+  protected get(index?: number) {
+    return isMeaningful(index) ? this.queue[index as number] : this.queue;
+  }
+
+  abstract register(...args: any[]): void;
+  protected findKeyIndex(key: KeyType) {
+    return this.get().findIndex((v) => v.key === key);
+  }
+  public destroy(key: KeyType) {
+    const index = this.findKeyIndex(key);
+    if (index >= 0) {
+      const instance = this.get(index);
+      instance.destroy();
+      this.get().splice(index, 1);
+    }
+  }
+}
+
+export default AbstractObserver;