@feng3d/reactivity 0.0.1 → 1.0.2

package/lib/reactive.d.ts

@@ -0,0 +1,66 @@
+import { Computed } from './computed';
+import { Ref } from './ref';
+import { Target } from './shared/general';
+/**
+ * 创建或者获取响应式对象的代理对象。
+ *
+ * @param target 被响应式的对象。
+ * @returns 响应式代理对象。
+ *
+ * 注意：
+ *
+ * 扩大被反应式的对象的类型范围，只有`Object.isExtensible`不通过的对象不被响应化。Float32Array等都允许被响应化。
+ */
+export declare function reactive<T extends object>(target: T): Reactive<T>;
+export declare const reactiveMap: WeakMap<Target, any>;
+/**
+ * 判断一个对象是否为响应式对象。
+ *
+ * @param value 对象。
+ * @returns
+ */
+export declare function isReactive(value: unknown): boolean;
+/**
+ * 转换为响应式对象。
+ *
+ * @param value 对象。
+ * @returns
+ */
+export declare const toReactive: <T>(value: T) => T;
+/**
+ * 判断一个对象是否为代理对象。
+ *
+ * @param value 对象。
+ * @returns
+ */
+export declare function isProxy(value: any): boolean;
+export type Reactive<T> = UnwrapRefSimple<T>;
+/**
+ * 原始类型
+ */
+type Primitive = string | number | boolean | bigint | symbol | undefined | null;
+/**
+ * 内置类型
+ */
+export type Builtin = Primitive | Function | Date | Error | RegExp;
+/**
+ * 用于扩展不被 unwrap 的类型。
+ *
+ * ``` ts
+ * declare module '@vue/reactivity' {
+ *   export interface RefUnwrapBailTypes {
+ *     runtimeDOMBailTypes: Node | Window
+ *   }
+ * }
+ * ```
+ */
+export interface RefUnwrapBailTypes {
+}
+/**
+ * 解包类型。
+ */
+export type UnwrapRefSimple<T> = T extends Builtin | Ref | RefUnwrapBailTypes[keyof RefUnwrapBailTypes] ? T : T extends Ref<infer TT> ? TT : T extends Computed<infer TT> ? TT : T extends object ? {
+    [K in keyof T]: UnwrapRefSimple<T[K]>;
+} : T;
+export {};
+//# sourceMappingURL=reactive.d.ts.map

package/lib/reactive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactive.d.ts","sourceRoot":"","sources":["../src/reactive.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAA2B,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEnE;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAiCjE;AACD,eAAO,MAAM,WAAW,sBAA6B,CAAC;AAEtD;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAGlD;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,oBAQtB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,GAAG,GAAG,OAAO,CAG3C;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC;AAE7C;;GAEG;AACH,KAAK,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;AAChF;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;AAEnE;;;;;;;;;;GAUG;AACH,MAAM,WAAW,kBAAkB;CAAI;AAEvC;;GAEG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,IACzB,CAAC,SACC,OAAO,GACP,GAAG,GACH,kBAAkB,CAAC,MAAM,kBAAkB,CAAC,GAC5C,CAAC,GACH,CAAC,SAAS,GAAG,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,GAC5B,CAAC,SAAS,QAAQ,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,GACjC,CAAC,SAAS,MAAM,GAAG;KACd,CAAC,IAAI,MAAM,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACxC,GACD,CAAC,CAAC"}

package/lib/ref.d.ts

@@ -0,0 +1,41 @@
+import { Reactivity } from './Reactivity';
+import { ReactiveFlags } from './shared/constants';
+/**
+ * 创建一个引用，该引用的值可以被响应式系统追踪和更新。
+ *
+ * @param value 引用的值。
+ * @returns 包含 value 属性的对象，用于获取和设置引用的值。
+ */
+export declare function ref<T>(value?: T): Ref<T>;
+/**
+ * 判断一个对象是否为引用。
+ * @param r 引用。
+ */
+export declare function isRef<T>(r: Ref<T> | unknown): r is Ref<T>;
+export interface RefReactivity<T = any> extends Ref<T> {
+}
+/**
+ * 引用反应式节点。
+ *
+ * 当使用 ref 函数时，会创建一个 RefReactivity 对象。
+ */
+export declare class RefReactivity<T = any> extends Reactivity<T> implements Ref<T> {
+    readonly [ReactiveFlags.IS_REF] = true;
+    get value(): T;
+    set value(v: T);
+    /**
+     * 原始值。
+     *
+     * 用于比较值是否发生变化。
+     */
+    private _rawValue;
+    constructor(value: T);
+}
+export interface Ref<T = any, S = T> {
+    get value(): T;
+    set value(_: S);
+    [RefSymbol]: true;
+}
+declare const RefSymbol: unique symbol;
+export {};
+//# sourceMappingURL=ref.d.ts.map

package/lib/ref.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ref.d.ts","sourceRoot":"","sources":["../src/ref.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD;;;;;GAKG;AACH,wBAAgB,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAQxC;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,OAAO,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC;AAM3D,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,GAAG,CAAC,CAAC,CAAC;CAAI;AAE1D;;;;GAIG;AACH,qBAAa,aAAa,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,UAAU,CAAC,CAAC,CAAE,YAAW,GAAG,CAAC,CAAC,CAAC;IAEvE,SAAgB,CAAC,aAAa,CAAC,MAAM,CAAC,QAAQ;IAE9C,IAAI,KAAK,IAOI,CAAC,CAFb;IAED,IAAI,KAAK,CAAC,CAAC,EAAE,CAAC,EAcb;IAED;;;;OAIG;IACH,OAAO,CAAC,SAAS,CAAI;gBAET,KAAK,EAAE,CAAC;CAMvB;AAED,MAAM,WAAW,GAAG,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;IAE/B,IAAI,KAAK,IAAI,CAAC,CAAA;IACd,IAAI,KAAK,CAAC,CAAC,EAAE,CAAC,EAAC;IACf,CAAC,SAAS,CAAC,EAAE,IAAI,CAAA;CACpB;AACD,OAAO,CAAC,MAAM,SAAS,EAAE,OAAO,MAAM,CAAC"}

package/lib/shared/constants.d.ts

@@ -0,0 +1,34 @@
+/**
+ * 响应式标志枚举，用于标识响应式对象的特殊属性或状态
+ */
+export declare enum ReactiveFlags {
+    IS_REACTIVE = "__v_isReactive",
+    RAW = "__v_raw",
+    IS_REF = "__v_isRef"
+}
+export declare enum TargetType {
+    INVALID = 0,
+    COMMON = 1,
+    COLLECTION = 2
+}
+/**
+ * 跟踪操作类型枚举，用于标识在响应式系统中对对象属性进行的操作类型
+ */
+export declare enum TrackOpTypes {
+    GET = "get",
+    HAS = "has",
+    ITERATE = "iterate"
+}
+/**
+ * 触发操作类型枚举，用于标识在响应式系统中对对象属性进行的修改操作类型
+ */
+export declare enum TriggerOpTypes {
+    SET = "set",
+    ADD = "add",
+    DELETE = "delete",
+    CLEAR = "clear"
+}
+export declare const ITERATE_KEY: unique symbol;
+export declare const MAP_KEY_ITERATE_KEY: unique symbol;
+export declare const ARRAY_ITERATE_KEY: unique symbol;
+//# sourceMappingURL=constants.d.ts.map

package/lib/shared/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/shared/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,oBAAY,aAAa;IAErB,WAAW,mBAAmB;IAC9B,GAAG,YAAY;IACf,MAAM,cAAc;CACvB;AAED,oBAAY,UAAU;IAElB,OAAO,IAAI;IACX,MAAM,IAAI;IACV,UAAU,IAAI;CACjB;AAED;;GAEG;AACH,oBAAY,YAAY;IAEpB,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,OAAO,YAAY;CACtB;AAED;;GAEG;AACH,oBAAY,cAAc;IAEtB,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,KAAK,UAAU;CAClB;AAED,eAAO,MAAM,WAAW,EAAE,OAAO,MAAgD,CAAC;AAClF,eAAO,MAAM,mBAAmB,EAAE,OAAO,MAAkD,CAAC;AAC5F,eAAO,MAAM,iBAAiB,EAAE,OAAO,MAA+C,CAAC"}

package/lib/shared/general.d.ts

@@ -0,0 +1,36 @@
+import { ReactiveFlags, TargetType } from './constants';
+export {};
+declare global {
+    /**
+     * 是否为开发模式。
+     */
+    var __DEV__: boolean;
+}
+export declare const isObject: (val: unknown) => val is Record<any, any>;
+export declare const isArray: typeof Array.isArray;
+export declare const isSymbol: (val: unknown) => val is symbol;
+export declare const isString: (val: unknown) => val is string;
+export declare const isIntegerKey: (key: unknown) => boolean;
+export declare const isMap: (val: unknown) => val is Map<any, any>;
+export declare const hasOwn: (val: object, key: string | symbol) => key is never;
+export declare const hasChanged: (value: any, oldValue: any) => boolean;
+export declare function getTargetType(value: Target): TargetType;
+export declare const toRawType: (value: unknown) => string;
+export interface Target {
+    [ReactiveFlags.IS_REACTIVE]?: boolean;
+    [ReactiveFlags.RAW]?: any;
+}
+/**
+ * 将一个响应式对象转换为原始对象。
+ * @param observed 响应式对象。
+ * @returns 原始对象。
+ */
+export declare function toRaw<T>(observed: T): T;
+export declare function warn(msg: string, ...args: any[]): void;
+/**
+ * 创建一个映射，并返回一个用于检查键是否存在于该映射中的函数。
+ * 重要提示：所有调用此函数的地方都必须以 \/\*#\_\_PURE\_\_\*\/ 作为前缀，
+ * 以便在必要时 Rollup 可以进行 tree-shaking。
+ */
+export declare function makeMap(str: string): (key: string) => boolean;
+//# sourceMappingURL=general.d.ts.map

package/lib/shared/general.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"general.d.ts","sourceRoot":"","sources":["../../src/shared/general.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAExD,OAAO,EAAG,CAAC;AACX,OAAO,CAAC,MAAM,CACd;IACI;;OAEG;IACH,IAAI,OAAO,EAAE,OAAO,CAAC;CACxB;AAGD,eAAO,MAAM,QAAQ,QAAS,OAAO,4BAAqE,CAAC;AAE3G,eAAO,MAAM,OAAO,EAAE,OAAO,KAAK,CAAC,OAAuB,CAAC;AAC3D,eAAO,MAAM,QAAQ,QAAS,OAAO,kBAA2C,CAAC;AACjF,eAAO,MAAM,QAAQ,QAAS,OAAO,kBAA2C,CAAC;AACjF,eAAO,MAAM,YAAY,QAAS,OAAO,KAAG,OAIA,CAAC;AAC7C,eAAO,MAAM,KAAK,QAAS,OAAO,yBACM,CAAC;AAGzC,eAAO,MAAM,MAAM,QACV,MAAM,OACN,MAAM,GAAG,MAAM,iBACoD,CAAC;AAG7E,eAAO,MAAM,UAAU,UAAW,GAAG,YAAY,GAAG,KAAG,OACxB,CAAC;AAmBhC,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,cAK1C;AAKD,eAAO,MAAM,SAAS,UAAW,OAAO,KAAG,MAGP,CAAC;AAErC,MAAM,WAAW,MAAM;IAEnB,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,EAAE,OAAO,CAAA;IACrC,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAA;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,CAAC,CAKvC;AAED,wBAAgB,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAGtD;AAED;;;;GAIG;AAGH,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAU7D"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@feng3d/reactivity",
   "type": "module",
-  "version": "0.0.1",
+  "version": "1.0.2",
   "description": "反应式",
   "homepage": "https://feng3d.com/reactivity",
   "main": "./dist/index.umd.cjs",
@@ -17,6 +17,7 @@
     }
   },
   "scripts": {
+    "dev": "cd examples && npm run dev",
     "clean": "rimraf \"{lib,dist,public}\"",
     "build": "vite build",
     "test": "vitest",
@@ -25,7 +26,7 @@
     "watch": "tsc -w",
     "lint": "eslint --ext .js --ext .ts src test --ignore-path .gitignore --max-warnings 0",
     "lintfix": "npm run lint -- --fix",
-    "docs": "typedoc",
+    "docs": "typedoc && cd examples && vite build --outDir ../public",
     "upload_oss": "npm run docs && feng3d-cli oss_upload_dir",
     "release": "npm run clean && npm run lint && npm run build && npm run docs && npm run types && npm publish",
     "prepublishOnly": "node scripts/prepublish.js",

package/src/Reactivity.ts

@@ -0,0 +1,126 @@
+import { type ComputedReactivity } from './computed';
+
+/**
+ * 反应式节点。
+ *
+ * 拥有节点值以及被捕捉与触发的能力。
+ *
+ * 用于被 computed effect 等构建的节点所继承。
+ */
+export class Reactivity<T = any>
+{
+    /**
+     * 获取当前节点值。
+     *
+     * 取值时将会建立与父节点的依赖关系。
+     */
+    get value(): T
+    {
+        this.track();
+
+        return this._value;
+    }
+    /**
+     * @private
+     */
+    _value: T;
+
+    /**
+     * 父反应节点。
+     *
+     * 记录了哪些节点调用了当前节点。
+     *
+     * 当前节点失效时，会通知并移除所有父节点。
+     *
+     * @private
+     */
+    _parents = new Map<ComputedReactivity, number>();
+
+    /**
+     * 捕捉。
+     *
+     * 建立与父节点的依赖关系。
+     */
+    track()
+    {
+        if (!_shouldTrack) return;
+
+        // 连接父节点和子节点。
+        const parent = Reactivity.activeReactivity;
+        if (parent)
+        {
+            this._parents.set(parent, parent._version);
+        }
+    }
+
+    /**
+     * 触发。
+     *
+     * 冒泡到所有父节点，设置失效子节点字典。
+     */
+    trigger()
+    {
+        // 冒泡到所有父节点，设置失效子节点字典。
+        this._parents.forEach((version, parent) =>
+        {
+            if (parent._version !== version) return;
+
+            parent.trigger();
+            // 失效时添加子节点到父节点中。
+            parent._children.set(this, this._value);
+        });
+
+        //
+        this._parents.clear();
+    }
+
+    /**
+     * 当前正在执行的反应式节点。
+     *
+     * @internal
+     */
+    static activeReactivity: ComputedReactivity;
+}
+
+/**
+ * 反应式节点链。
+ */
+export type ReactivityLink = { node: Reactivity, value: any, next: ReactivityLink };
+
+/**
+ * 强制跟踪。
+ *
+ * @param fn 强制跟踪的函数。
+ */
+export function forceTrack<T>(fn: () => T): T
+{
+    const preShouldTrack = _shouldTrack;
+    _shouldTrack = true;
+    const result = fn();
+    _shouldTrack = preShouldTrack;
+
+    return result;
+}
+
+/**
+ * 不跟踪。
+ *
+ * @param fn 不跟踪的函数。
+ */
+export function noTrack<T>(fn: () => T): T
+{
+    const preShouldTrack = _shouldTrack;
+    _shouldTrack = false;
+    const result = fn();
+    _shouldTrack = preShouldTrack;
+
+    return result;
+}
+
+/**
+ * 是否应该跟踪的标志
+ * 控制是否进行依赖跟踪
+ *
+ * @private
+ */
+let _shouldTrack = true;