annil 1.2.2-dev.202312100 → 1.3.0

package/src/behaviors/BComputedAndWatch/index.ts

@@ -1,22 +1,23 @@
-import type { Func } from "hry-types/src/Misc/Func";
-
+import type { Func } from "hry-types/src/Misc/_api";
 import type { FinalOptionsOfComponent } from "../../api/DefineComponent/collectOptionsForComponent";
 import { deepClone } from "../../utils/deepClone";
 import { deleteProtoField } from "../../utils/deleteProtoField";
 import { isEmptyObject } from "../../utils/isEmptyObject";
+import { computedUpdater } from "./computedUpdater";
 import { getPathsValue } from "./getPathsValue";
+import { getPropertiesValue } from "./getPropertiesValue";
 import { initComputed } from "./initComputed";
 import { isEqual } from "./isEqual";
-import { isPage } from "./IsPage";
 import type { Instance, WatchOldValue } from "./types";
 function initWatchOldValue(this: Instance, watchConfig: object): WatchOldValue {
   const watchOldValue = {};
   for (const key in watchConfig) {
-    watchOldValue[key] = deepClone(getPathsValue.call(this, key.split(".")));
+    watchOldValue[key] = deepClone(getPathsValue(this.data, key));
   }
 
   return watchOldValue;
 }
+
 /**
  * 实现
  * 1. 计算属性初始化在attached之后(前版本在beforeCreate)
@@ -32,60 +33,50 @@ function initWatchOldValue(this: Instance, watchConfig: object): WatchOldValue {
  */
 
 export const BComputedAndWatch = Behavior({
+  // @ts-ignore
   definitionFilter(options: FinalOptionsOfComponent) {
+    // 计算属性初始化
+    const rawPropertiesValue = getPropertiesValue(options.properties);
+    const methodOpt = options.methods;
     const computedConfig = options.computed;
 
-    // computed handle
     if (computedConfig && !isEmptyObject(computedConfig)) {
-      /* istanbul ignore next */
-      options.methods ||= {};
-
-      const methodsConfig = options.methods;
-
-      // 把计算属性配置保留在methods的__computedConfig__字段下带入到组件实例中。
-      methodsConfig.__computedConfig__ = () => computedConfig;
-
-      const observersConfig = options.observers ||= {};
-      // 通过observers加入`**`字段来触发计算属性更新
-      const originalFunc = observersConfig["**"] as Func | undefined;
-
-      observersConfig["**"] = function(this: Instance): undefined {
-        const computedStatus = this.__computedStatus__;
-        switch (computedStatus) {
-          case undefined:
-            // 1 触发来自attach时或没有计算属性时
-            originalFunc && /* istanbul ignore next */ originalFunc.call(this);
-
-            break;
-          case "初始化中":
-            // 2 触发来自计算属性初始化时的setData,什么都不需要做。 初始化后__computedStatus__变为待更新
-
-            break;
-          case "待更新":
-            // 3. 触发来自attached后的setData或properties更新
-            {
-              const isUpdated = this.__computedUpdater__();
-              if (isUpdated) {
-                // 更新了会再次触发自身转到 4
-                this.__computedStatus__ = "更新完毕";
-              } else {
-                // 无需更新计算属性
-                originalFunc && /* istanbul ignore next */ originalFunc.call(this);
-              }
-            }
-            break;
-          case "更新完毕":
-            {
-              // 4 来自计算属性更新后的自身回调
-              // console.log("来自计算属性更新后的自身回调");
-              this.__computedStatus__ = "待更新";
+      const computedCache = initComputed(options, computedConfig, { ...options.data, ...rawPropertiesValue });
 
+      // 把计算属性缓存从方法中带入到实例中,在created周期加入实例后删除
+      methodOpt.__computedInitCache__ = () => computedCache;
+    }
+    const observersConfig = options.observers;
+    // 通过observers加入`**`字段来触发计算属性更新
+    const originalFunc = observersConfig["**"] as Func | undefined;
+
+    observersConfig["**"] = function(this: Instance): undefined {
+      const computedStatus = this.__computedStatus__;
+      switch (computedStatus) {
+        case "待更新":
+          // 3. 触发来自attached后的setData或properties更新
+          {
+            const isUpdated = this.__computedUpdater__();
+            if (isUpdated) {
+              // 更新了会再次触发自身转到 4
+              this.__computedStatus__ = "更新完毕";
+            } else {
+              // 无需更新计算属性
               originalFunc && /* istanbul ignore next */ originalFunc.call(this);
             }
-            break;
-        }
-      };
-    }
+          }
+          break;
+        case "更新完毕":
+          {
+            // 4 来自计算属性更新后的自身回调
+            // console.log("来自计算属性更新后的自身回调");
+            this.__computedStatus__ = "待更新";
+
+            originalFunc && /* istanbul ignore next */ originalFunc.call(this);
+          }
+          break;
+      }
+    };
 
     // watch handle
     const watchConfig = options.watch;
@@ -96,40 +87,44 @@ export const BComputedAndWatch = Behavior({
       // 把watch配置保留在methods的__watchConfig__字段下带入到组件实例中。
       methodsConfig.__watchConfig__ = () => watchConfig;
 
+      /* istanbul ignore next */
       const observersConfig = options.observers ||= {};
       for (const key in watchConfig) {
         const watchHadle = watchConfig[key];
 
-        observersConfig[key] = function(this: Instance, newValue: unknown) {
+        // 在监控多个数据时,参数是多个值
+        observersConfig[key] = function(this: Instance, ...newValue: unknown[]) {
           const watchOldValue = this.__watchOldValue__!;
           const oldValue = watchOldValue[key];
-          // 当watch对象的子属性时,有可能对象为null(properties默认值)
-          if ((newValue === undefined) || isEqual(newValue, oldValue)) return;
+          if (isEqual(newValue, oldValue)) return;
           watchOldValue[key] = deepClone(newValue);
 
-          watchHadle.call(this, newValue, oldValue);
+          watchHadle.call(this, ...newValue, ...oldValue);
         };
       }
     }
   },
   lifetimes: {
     created(this: Instance) {
+      // 把计算属性的初始缓存放入实例
+      const __computedInitCache__ = this.__computedInitCache__?.();
+
+      this.__computedCache__ = __computedInitCache__;
+
+      deleteProtoField(this, "__computedInitCache__");
+
+      this.__computedStatus__ = "待更新";
+
+      this.__computedUpdater__ = computedUpdater.bind(this);
+
       // 初始化watch 生成OldValue
       const watchConfig = this.__watchConfig__?.();
 
       deleteProtoField(this, "__watchConfig__");
 
       if (watchConfig) {
-        // 此时计算属性还未初始化,properties还未第一次传入
         this.__watchOldValue__ = initWatchOldValue.call(this, watchConfig);
       }
     },
-    attached(this: Instance) {
-      if (!isPage(this)) {
-        // 组件此时properties已传入
-        initComputed.call(this);
-      }
-      // else 页面在onLoad时传入properties 计算属性初始化逻辑通过onLoadHijack函数完成
-    },
   },
 });

package/src/behaviors/BComputedAndWatch/initComputed.ts

@@ -2,17 +2,11 @@
 // import type { IsDependOnOthers } from "./data-tracer";
 
 import type { Func } from "hry-types/src/Misc/Func";
-import { deleteProtoField } from "../../utils/deleteProtoField";
-import { computedUpdater } from "./computedUpdater";
+import type { FinalOptionsOfComponent } from "../../api/DefineComponent/collectOptionsForComponent";
 import { deepProxy, unwrap } from "./data-tracer";
-import type { ComputedCache, Instance } from "./types";
+import type { ComputedCache, ItemCache } from "./types";
 export type ComputedDependence = { paths: string[]; val: unknown };
 
-type ComputedInfo = {
-  dependences: ComputedDependence[];
-  value: unknown;
-};
-
 /**
  * 如果依赖列表某项的首个字段值为undefined并且字段为其他计算属性字段 返回false(即被依赖的计算字段写在了依赖他的计算字段后面), 否则返回ComputedInfo。
  */
@@ -20,7 +14,7 @@ function isValidDependences(dependences: ComputedDependence[], computedKeys: str
   for (const { paths: path, val } of dependences) {
     // 引用值为undefined时
     // console.log(path[0]);
-    if (val === undefined && computedKeys.includes(path[0])) {
+    if ((val === undefined) && computedKeys.includes(path[0])) {
       return false;
     }
   }
@@ -28,49 +22,22 @@ function isValidDependences(dependences: ComputedDependence[], computedKeys: str
   return true; // 依赖有效
 }
 
-export function getComputedInfo(
-  this: Instance,
+export function getItemCache(
+  initAllData: object,
   computedKeys: string[],
   computedFunc: Func,
-  key: string,
-): false | ComputedInfo {
-  // 建立当前计算字段的依赖
+): false | ItemCache {
+  // 当前计算字段的依赖列表
   const dependences: ComputedDependence[] = [];
-  let initValue: unknown;
-  // eslint-disable-next-line @typescript-eslint/no-this-alias
-  const _this = this;
-  const computedThis = new Proxy({ data: deepProxy(this.data, dependences) }, {
-    get(target, key) {
-      if (key === "data") {
-        return Reflect.get(target, key);
-      }
-
-      return Reflect.get(_this, key);
-    },
-  });
-
-  initValue = computedFunc.call(computedThis);
-
-  // } catch (error) {
-  //   // 为js开发考虑使用了 this.data.xxx.age 当xxx为undefined时
-  //   if (!isValidDependences(dependences, computedKeys)) {
-  //     console.log(222);
+  const initValue = computedFunc.call({ data: deepProxy(initAllData, dependences) });
 
-  //     // 情形2 依赖了未初始化的计算属性的子属性(会报错) 对应测试文件[NoOptionalProperties.ts](../../../jest/computed/NoOptionalProperties/NoOptionalProperties.test.ts)的age字段
-  //     return false;
-  //   }
-  //   // 其他错误正常报错
-  //   throw error;
-  // }
   if (isValidDependences(dependences, computedKeys)) {
-    // 有效的依赖
-    initValue = unwrap(initValue);
-
-    this.setData({
-      [key]: initValue,
-    });
-
-    return { dependences, value: initValue };
+    return {
+      // 去重 避免 如: ` age(){ return this.data.xxx.num + this.data.xxx.str + this.data.xxx} ` 造成的多个依赖相同情况。应就要一个 xxx
+      dependences: uniqueDependences(dependences),
+      method: computedFunc,
+      value: unwrap(initValue),
+    };
   } else {
     /**
      * 情形1 依赖了其他未初始化的计算属性(不报错) 对应测试文件[NoOptionalProperties.ts](../../../jest/computed/NoOptionalProperties/NoOptionalProperties.test.ts)的copyPropUser字段
@@ -118,66 +85,44 @@ function uniqueDependences(dependences: ComputedDependence[]): ComputedDependenc
 
   return dependences;
 }
+
 /**
- * 初始化计算属性配置返回计算属性缓存
- * @param computedConfig - 计算属性配置
- * @param uninitedkeys - 未初始的计算属性keys
- * @param computedCache - 计算属性缓存默认=`{}`
- * @returns 计算属性缓存
+ * 把计算属性初始值加入到options.data中返回缓存
  */
-function _initComputed(
-  this: Instance,
+export function initComputed(
+  options: FinalOptionsOfComponent,
   computedConfig: Record<string, Func>,
-  uninitedkeys: string[], //
+  initAllData: object,
+  uninitedkeys: string[] = Object.keys(computedConfig),
   computedCache: ComputedCache = {},
 ): ComputedCache {
-  // 收集依赖
+  // 收集依赖 uninitedkeys不受内部2处重新赋值的影响
   for (const key of uninitedkeys) {
-    const computedInfo = getComputedInfo.call(this, uninitedkeys, computedConfig[key], key);
+    // uninitedkeys 受2处重新赋值的影响
+    const itemCache = getItemCache(initAllData, uninitedkeys, computedConfig[key]);
 
-    // 去除完成的依赖key
+    // 去除当前的key 2
     uninitedkeys = uninitedkeys.filter(ele => ele !== key);
 
-    if (computedInfo === false) {
+    if (itemCache === false) {
       // 把当前依赖不正确的key放到后面去
       uninitedkeys.push(key);
     } else {
-      computedCache[key] = {
-        // 去重 避免 如: ` age(){ return this.data.xxx.num + this.data.xxx.str + this.data.xxx} ` 造成的多个依赖相同情况。应就要一个 xxx
-        dependences: uniqueDependences(computedInfo.dependences),
-        method: computedConfig[key],
-        value: computedInfo.value, // 为了watch的oldValue
-      };
+      /* istanbul ignore next */
+      const dataOpt = options.data ||= {};
+
+      dataOpt[key] = itemCache.value;
+
+      initAllData[key] = itemCache.value;
+
+      computedCache[key] = itemCache;
     }
   }
-  // 看uninitedkey是否未空，空表示所有依赖收集完毕直接返回
+  // 看uninitedkey(2处的新值)是否未空，空表示所有依赖收集完毕直接返回
   if (uninitedkeys.length === 0) {
     return computedCache;
   }
 
   // uninitedkey不为空,递归
-  return _initComputed.call(this, computedConfig, uninitedkeys, computedCache);
-}
-export function initComputed(this: Instance) {
-  const computedConfig = this.__computedConfig__?.();
-
-  deleteProtoField(this, "__computedConfig__");
-
-  if (computedConfig) {
-    // 实例加入 __computedUpdateStatus__ 提高性能
-    this.__computedStatus__ = "初始化中";
-
-    // 初始化计算属性(返回缓存)
-    this.__computedCache__ = _initComputed.call(
-      this,
-      computedConfig,
-      Object.keys(computedConfig),
-    );
-
-    // 给原型上加入__computedUpdater__方法 在observers下的'**'配置中触发
-
-    this.__computedUpdater__ = computedUpdater.bind(this);
-
-    this.__computedStatus__ = "待更新";
-  }
+  return initComputed(options, computedConfig, initAllData, uninitedkeys, computedCache);
 }

package/src/behaviors/BComputedAndWatch/types.ts

@@ -5,25 +5,27 @@ import type { ComputedDependence } from "./initComputed";
 export type InstanceCustomFields = {
   __pendingSetData__?: object | null;
   __storeConfig__?: () => Record<string, () => unknown>;
-  __computedStatus__?: "初始化中" | "待更新" | "更新完毕";
+  __computedStatus__?: "待更新" | "更新完毕";
   __computedUpdater__: Func;
-  __computedConfig__?: () => Record<string, Func>;
-  __computedCache__?: ComputedCache;
+  __computedInitCache__?: () => ComputedCache;
+  __computedCache__: ComputedCache | undefined;
   __watchOldValue__?: WatchOldValue;
   __watchConfig__?: () => Record<string, Func>;
   __compLoadList__?: Func[];
+
+  __prePropertiesValue__: object | undefined;
+  __setDataFromInner__?: boolean;
   disposer: Record<string, Func>;
 };
 
 export type Instance = (ComponentInstance | PageInstance) & InstanceCustomFields;
 
-export type ComputedCache = Record<
-  string,
-  {
-    dependences: ComputedDependence[];
-    method: Func;
-    value: unknown;
-  }
->;
+export type ItemCache = {
+  dependences: ComputedDependence[];
+  method: Func;
+  value: unknown;
+};
+
+export type ComputedCache = Record<string, ItemCache>;
 
-export type WatchOldValue = Record<string, unknown>;
+export type WatchOldValue = Record<string, unknown[]>;

package/src/behaviors/BStore.ts

@@ -5,22 +5,17 @@ import { deleteProtoField } from "../utils/deleteProtoField";
 import type { Instance } from "./BComputedAndWatch/types";
 
 export const BStore = Behavior({
+  // @ts-ignore
   definitionFilter(options: FinalOptionsOfComponent) {
     // 初始化store
     const storeConfig = options.store;
     if (!storeConfig) return;
     const { toJS } = require("mobx") as typeof mobx;
     for (const key in storeConfig) {
-      options.data ||= {};
-
       options.data[key] = toJS(storeConfig[key]());
 
       // 把响应式数据配置保留在methods的__storeConfig__字段下带入到组件实例中(不用函数返回方式也可以,但不符合methods字段类型),后续再从原型上删除。
-      options.methods ||= {};
-
       options.methods.__storeConfig__ = () => storeConfig;
-
-      delete options.store;
     }
   },
   lifetimes: {
@@ -28,6 +23,8 @@ export const BStore = Behavior({
       // 取出通过addStoreConfigToMethods函数带入的storeConfig
       const storeConfig = this.__storeConfig__?.();
       if (!storeConfig) return;
+      deleteProtoField(this, "__storeConfig__");
+
       const { comparer, reaction, toJS } = require("mobx") as typeof mobx;
 
       this.disposer = {};
@@ -47,7 +44,6 @@ export const BStore = Behavior({
           },
         );
       }
-      deleteProtoField(this, "__storeConfig__");
     },
     /* istanbul ignore next */
     detached(this: Instance) {

package/src/behaviors/BbeforeCreated.ts

@@ -1,8 +1,11 @@
 import type { FinalOptionsOfComponent } from "../api/DefineComponent/collectOptionsForComponent";
 
 export const BBeforeCreate = Behavior({
-  definitionFilter(options: FinalOptionsOfComponent) {
-    // 触发beforeCreate生命周期函数
+  // @ts-ignore
+  definitionFilter(
+    options: Omit<FinalOptionsOfComponent, "customEvents" | "store" | "events" | "computed">,
+  ) {
+    // 触发beforeCreate生命周期函数  options.lifetimes在之前被赋值过默认{}所以！
     const beforeCreateFunc = options.lifetimes!.beforeCreate;
 
     beforeCreateFunc && beforeCreateFunc(options);

package/src/utils/InnerMarker.ts

@@ -1,4 +1,3 @@
 export const INNERMARKER = {
-  url: "__annil__" satisfies `_${string}`, // url默认传值Data字段 必须是内部字段,因为会加入到实例的data下。
-  // defUrl: "/xx&xx", // 标记 组件默认的的url类型
+  url: "__annil__", // url默认传值Data字段
 };

package/src/utils/isEmptyObject.ts

@@ -1,7 +1,7 @@
 /**
  * 判断一个值是否为空对象 `{}`
  */
-export function isEmptyObject(obj: unknown) {
+export function isEmptyObject(obj: object) {
   if (
     typeof obj !== "object" || obj === null || Array.isArray(obj) || obj instanceof Set || obj instanceof Map
     || obj instanceof WeakSet || obj instanceof WeakMap

package/dist/behaviors/BComputedAndWatch/IsPage.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInstance, PageInstance } from "../../api/RootComponent/Instance/RootComponentInstance";
-export declare function isPage(Ins: ComponentInstance | PageInstance): Ins is PageInstance;

package/dist/behaviors/BComputedAndWatch/IsPage.js

@@ -1,4 +0,0 @@
-export function isPage(Ins) {
-    return typeof Ins.route === "string";
-}
-//# sourceMappingURL=IsPage.js.map

package/dist/behaviors/BComputedAndWatch/IsPage.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IsPage.js","sourceRoot":"","sources":["../../../src/behaviors/BComputedAndWatch/IsPage.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,MAAM,CAAC,GAAqC;IAC1D,OAAO,OAAQ,GAAoB,CAAC,KAAK,KAAK,QAAQ,CAAC;AACzD,CAAC"}

package/src/behaviors/BComputedAndWatch/IsPage.ts

@@ -1,5 +0,0 @@
-import type { ComponentInstance, PageInstance } from "../../api/RootComponent/Instance/RootComponentInstance";
-
-export function isPage(Ins: ComponentInstance | PageInstance): Ins is PageInstance {
-  return typeof (Ins as PageInstance).route === "string";
-}