@feng3d/reactivity 0.0.1 → 1.0.2

package/src/index.ts

@@ -1,201 +1,8 @@
-/**
- * 创建响应式值的引用。
- *
- * @param value
- * @returns
- */
-export function ref<T>(value: T): { value: T }
-{
-    return new ValueReactiveNode<T>(value);
-}
-
-/**
- * 创建计算属性的函数
- * 计算属性的值会根据其依赖的响应式数据自动更新
- * @param func 计算属性的 getter 函数
- * @returns 包含 value 属性的对象，用于获取计算属性的值
- */
-export function computed<T>(func: () => T): { value: T }
-{
-    return new FunctionReactiveNode(func);
-}
-
-/**
- * 当前正在执行的反应式节点。
- */
-let activeReactiveNode: ReactiveNode;
-
-type ReactiveNodeLink = { node: ReactiveNode, value: any, next: ReactiveNodeLink };
-
-/**
- * 反应式节点。
- */
-class ReactiveNode<T = any>
-{
-    /**
-     * 父反应节点。
-     *
-     * 记录了哪些节点调用了当前节点。
-     */
-    parents = new Set<ReactiveNode>();
-
-    /**
-     * 是否脏，是否需要重新计算。
-     */
-    dirty = true;
-
-    /**
-     * 失效的子节点，需要在执行时检查子节点值是否发生变化。
-     */
-    invalidChildren: ReactiveNodeLink;
-
-    /**
-     * 当前节点值。
-     */
-    get value()
-    {
-        this.run();
-
-        return this._value;
-    }
-    protected _value: T;
-
-    constructor()
-    {
-    }
-
-    /**
-     * 执行当前节点。
-     */
-    run()
-    {
-        const parentReactiveNode = activeReactiveNode;
-        activeReactiveNode = this;
-
-        let node = this.invalidChildren;
-        while (node)
-        {
-            if (node.value !== node.node.value)
-            {
-                this.markDirty();
-            }
-
-            node = node.next;
-        }
-        this.invalidChildren = undefined as any;
-
-        //
-        // 保存当前节点作为父节点。
-        // 设置当前节点为父节点。
-        if (this.dirty)
-        {
-            this._value = this._runSelf();
-
-            // 连接父节点和子节点。
-            if (parentReactiveNode)
-            {
-                this.parents.add(parentReactiveNode);
-            }
-            //
-            this.dirty = false;
-        }
-
-        // 执行完毕后恢复父节点。
-        activeReactiveNode = parentReactiveNode;
-    }
-
-    /**
-     * 标记为脏，触发更新。
-     */
-    markDirty()
-    {
-        if (this.dirty)
-        {
-            return;
-        }
-        this.dirty = true;
-
-        this.invalidate();
-
-        //
-        this.parents.clear();
-    }
-
-    invalidate()
-    {
-        //
-        if (this.parents.size > 0)
-        {
-            this.parents.forEach((parent) =>
-            {
-                const node: ReactiveNodeLink = { node: this, value: this._value, next: parent.invalidChildren };
-                parent.invalidChildren = node;
-                parent.invalidate();
-            });
-        }
-    }
-
-    /**
-     * 执行当前节点自身。
-     */
-    protected _runSelf(): T
-    {
-        return this._value;
-    }
-}
-
-/**
- * 反应式函数节点。
- *
- * 当使用 computed 函数时，会创建一个 ReactiveFunctionNode 对象。
- *
- * 当获取value值时，会执行func函数，返回结果。
- */
-class FunctionReactiveNode<T> extends ReactiveNode
-{
-    /**
-     * 监听的函数。
-     */
-    func: () => T;
-
-    constructor(func: () => T)
-    {
-        super();
-        this.func = func;
-    }
-
-    protected _runSelf()
-    {
-        return this.func();
-    }
-}
-
-/**
- * 属性值反应式节点。
- *
- * 当使用 reactive 函数创建一个反应式对象后，访问该对象的属性时，会创建一个 ReactiveGetValueNode 对象。
- *
- * 当设置反应式对象对应属性值时，会触发该节点。
- */
-class ValueReactiveNode<V> extends ReactiveNode<V>
-{
-    get value()
-    {
-        this.run();
-
-        return this._value;
-    }
-    set value(v: V)
-    {
-        if (this._value === v) return;
-        this.markDirty();
-        this._value = v;
-    }
-
-    constructor(value: V)
-    {
-        super();
-        this._value = value;
-    }
-}
+export { batchRun } from './batch';
+export { ComputedReactivity as ComputedDep, computed, type Computed } from './computed';
+export { Reactivity as Dep, forceTrack, noTrack } from './Reactivity';
+export { EffectReactivity as EffectDep, effect, type Effect } from './effect';
+export { isProxy, isReactive, reactive, type Reactive } from './reactive';
+export { RefReactivity, isRef, ref, type Ref } from './ref';
+export { toRaw } from './shared/general';
 

package/src/property.ts

@@ -0,0 +1,223 @@
+import { batchRun } from './batch';
+import { Reactivity } from './Reactivity';
+import { ARRAY_ITERATE_KEY, ITERATE_KEY, MAP_KEY_ITERATE_KEY, TrackOpTypes, TriggerOpTypes } from './shared/constants';
+import { isArray, isIntegerKey, isMap, isSymbol } from './shared/general';
+
+/**
+ * 反应式属性。
+ *
+ * @param target 对象。
+ * @param key 属性
+ * @returns 反应式属性。
+ */
+function property<T, K extends keyof T>(target: T, key: K)
+{
+    let depsMap = PropertyReactivity._targetMap.get(target);
+    if (!depsMap)
+    {
+        depsMap = new Map();
+        PropertyReactivity._targetMap.set(target, depsMap);
+    }
+
+    //
+    let dep = depsMap.get(key);
+    if (!dep)
+    {
+        dep = new PropertyReactivity(target, key);
+        depsMap.set(key, dep);
+    }
+
+    return dep;
+}
+
+/**
+ * 属性反应式节点。
+ */
+export class PropertyReactivity<T, K extends keyof T> extends Reactivity<T>
+{
+    /**
+     * 获取当前节点值。
+     *
+     * 取值时将会建立与父节点的依赖关系。
+     */
+    get value(): T
+    {
+        this.track();
+
+        return this._value;
+    }
+    set value(v)
+    {
+        // 处理特殊字段，这些字段
+        if (this._key === 'length')
+        {
+            v = this._target['length'];
+        }
+        else if (isSymbol(this._key))
+        {
+            v = ~~this._value + 1 as any;
+        }
+        if (v === this._value) return;
+        // 触发属性的变化。
+        this.trigger();
+        this._value = v;
+    }
+
+    private _target: T;
+    private _key: K;
+
+    constructor(target: T, key: K)
+    {
+        super();
+        this._target = target;
+        this._key = key;
+        if (target instanceof Map
+            || target instanceof WeakMap
+        )
+        {
+            this._value = (target as any as WeakMap<any, any>).get(key);
+        }
+        else if (target instanceof Set
+            || target instanceof WeakSet
+        )
+        {
+            this._value = (target as any as WeakSet<any>).has(key) as any;
+        }
+        else
+        {
+            this._value = (target as any)[key as any];
+        }
+    }
+
+    triggerIfChanged()
+    {
+
+    }
+
+    /**
+     * 追踪属性的变化。
+     *
+     * 当属性被访问时，将会追踪属性的变化。
+     *
+     * @param target 目标对象。
+     * @param key  属性名。
+     * @returns
+     */
+    static track(target: object, type: TrackOpTypes, key: unknown): void
+    {
+        const dep = property(target as any, key as any);
+
+        // 取值，建立依赖关系。
+        dep.track();
+    }
+    /**
+     * @private
+     */
+    static _targetMap: WeakMap<any, Map<any, PropertyReactivity<any, any>>> = new WeakMap();
+
+    /**
+     * 触发属性的变化。
+     *
+     * @param target 目标对象。
+     * @param type    操作类型。
+     * @param key 属性名。
+     * @param newValue 新值。
+     * @param oldValue 旧值。
+     * @returns
+     */
+    static trigger(target: object, type: TriggerOpTypes, key?: unknown, newValue?: unknown, oldValue?: unknown): void
+    {
+        const depsMap = this._targetMap.get(target);
+        if (!depsMap) return;
+
+        const run = (dep: PropertyReactivity<any, any> | undefined) =>
+        {
+            if (dep)
+            {
+                // 触发属性的变化。
+                dep.value = newValue;
+            }
+        };
+
+        batchRun(() =>
+        {
+            if (type === TriggerOpTypes.CLEAR)
+            {
+                // collection being cleared
+                // trigger all effects for target
+                depsMap.forEach(run);
+            }
+            else
+            {
+                const targetIsArray = isArray(target);
+                const isArrayIndex = targetIsArray && isIntegerKey(key);
+
+                if (targetIsArray && key === 'length')
+                {
+                    const newLength = Number(newValue);
+                    depsMap.forEach((dep, key) =>
+                    {
+                        if (
+                            key === 'length'
+                            || key === ARRAY_ITERATE_KEY
+                            || (!isSymbol(key) && key >= newLength)
+                        )
+                        {
+                            run(dep);
+                        }
+                    });
+                }
+                else
+                {
+                    // schedule runs for SET | ADD | DELETE
+                    if (key !== undefined || depsMap.has(undefined))
+                    {
+                        run(depsMap.get(key));
+                    }
+
+                    // schedule ARRAY_ITERATE for any numeric key change (length is handled above)
+                    if (isArrayIndex)
+                    {
+                        run(depsMap.get(ARRAY_ITERATE_KEY));
+                    }
+
+                    // also run for iteration key on ADD | DELETE | Map.SET
+                    switch (type)
+                    {
+                        case TriggerOpTypes.ADD:
+                            if (!targetIsArray)
+                            {
+                                run(depsMap.get(ITERATE_KEY));
+                                if (isMap(target))
+                                {
+                                    run(depsMap.get(MAP_KEY_ITERATE_KEY));
+                                }
+                            }
+                            else if (isArrayIndex)
+                            {
+                                // new index added to array -> length changes
+                                run(depsMap.get('length'));
+                            }
+                            break;
+                        case TriggerOpTypes.DELETE:
+                            if (!targetIsArray)
+                            {
+                                run(depsMap.get(ITERATE_KEY));
+                                if (isMap(target))
+                                {
+                                    run(depsMap.get(MAP_KEY_ITERATE_KEY));
+                                }
+                            }
+                            break;
+                        case TriggerOpTypes.SET:
+                            if (isMap(target))
+                            {
+                                run(depsMap.get(ITERATE_KEY));
+                            }
+                            break;
+                    }
+                }
+            }
+        });
+    }
+}

package/src/reactive.ts

@@ -0,0 +1,130 @@
+import { mutableHandlers } from './baseHandlers';
+import { mutableCollectionHandlers } from './collectionHandlers';
+import { Computed } from './computed';
+import { Ref } from './ref';
+import { ReactiveFlags, TargetType } from './shared/constants';
+import { getTargetType, isObject, Target } from './shared/general';
+
+/**
+ * 创建或者获取响应式对象的代理对象。
+ *
+ * @param target 被响应式的对象。
+ * @returns 响应式代理对象。
+ *
+ * 注意：
+ *
+ * 扩大被反应式的对象的类型范围，只有`Object.isExtensible`不通过的对象不被响应化。Float32Array等都允许被响应化。
+ */
+export function reactive<T extends object>(target: T): Reactive<T>
+{
+    if (!isObject(target))
+    {
+        return target;
+    }
+
+    if (target[ReactiveFlags.RAW])
+    {
+        return target as any;
+    }
+
+    // only specific value types can be observed.
+    const targetType = getTargetType(target);
+    if (targetType === TargetType.INVALID)
+    {
+        return target as any;
+    }
+
+    // target already has corresponding Proxy
+    const existingProxy = reactiveMap.get(target);
+    if (existingProxy)
+    {
+        return existingProxy;
+    }
+
+    const proxy = new Proxy<T>(
+        target,
+        targetType === TargetType.COLLECTION ? mutableCollectionHandlers : mutableHandlers as any,
+    ) as T;
+    reactiveMap.set(target, proxy);
+
+    return proxy as any;
+}
+export const reactiveMap = new WeakMap<Target, any>();
+
+/**
+ * 判断一个对象是否为响应式对象。
+ *
+ * @param value 对象。
+ * @returns
+ */
+export function isReactive(value: unknown): boolean
+{
+    return !!(value && (value as Target)[ReactiveFlags.IS_REACTIVE]);
+}
+
+/**
+ * 转换为响应式对象。
+ *
+ * @param value 对象。
+ * @returns
+ */
+export const toReactive = <T>(value: T): T =>
+{
+    if (isObject(value))
+    {
+        return reactive(value as any) as any;
+    }
+
+    return value;
+};
+
+/**
+ * 判断一个对象是否为代理对象。
+ *
+ * @param value 对象。
+ * @returns
+ */
+export function isProxy(value: any): boolean
+{
+    return value ? !!value[ReactiveFlags.RAW] : false;
+}
+
+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;

package/src/ref.ts

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

package/src/shared/constants.ts

@@ -0,0 +1,41 @@
+/**
+ * 响应式标志枚举，用于标识响应式对象的特殊属性或状态
+ */
+export enum ReactiveFlags
+{
+    IS_REACTIVE = '__v_isReactive', // 标识对象是否为响应式对象
+    RAW = '__v_raw', // 获取对象的原始非响应式版本
+    IS_REF = '__v_isRef', // 标识对象是否为 ref 对象
+}
+
+export enum TargetType
+{
+    INVALID = 0,
+    COMMON = 1,
+    COLLECTION = 2,
+}
+
+/**
+ * 跟踪操作类型枚举，用于标识在响应式系统中对对象属性进行的操作类型
+ */
+export enum TrackOpTypes
+{
+    GET = 'get', // 获取属性值
+    HAS = 'has', // 检查属性是否存在
+    ITERATE = 'iterate', // 遍历对象属性
+}
+
+/**
+ * 触发操作类型枚举，用于标识在响应式系统中对对象属性进行的修改操作类型
+ */
+export enum TriggerOpTypes
+{
+    SET = 'set', // 设置属性值
+    ADD = 'add', // 添加新属性
+    DELETE = 'delete', // 删除属性
+    CLEAR = 'clear', // 清空对象属性
+}
+
+export const ITERATE_KEY: unique symbol = Symbol(__DEV__ ? 'Object iterate' : '');
+export const MAP_KEY_ITERATE_KEY: unique symbol = Symbol(__DEV__ ? 'Map keys iterate' : '');
+export const ARRAY_ITERATE_KEY: unique symbol = Symbol(__DEV__ ? 'Array iterate' : '');