@feng3d/reactivity 0.0.1 → 1.0.3

package/src/batch.ts

@@ -0,0 +1,91 @@
+import { ComputedReactivity } from './computed';
+import { Reactivity } from './Reactivity';
+
+/**
+ * 合批处理。
+ *
+ * @param dep 要处理的依赖。
+ * @param isRunning 添加时是否是正在运行。
+ */
+export function batch(dep: ComputedReactivity, isRunning: boolean): void
+{
+    if (isRunning)
+    {
+        _isRunedDeps.push(dep);
+    }
+    else
+    {
+        _needEffectDeps.push(dep);
+    }
+}
+
+/**
+ * 批次执行多次修改反应式对象，可以减少不必要的反应式触发。
+ *
+ * ```ts
+ * batchRun(() => {
+ *     // 修改反应式对象
+ *     reactiveObj.a = 1;
+ *     reactiveObj.b = 2;
+ * })
+ * ```
+ *
+ * @param fn 要执行的函数，在此函数中多次修改反应式对象。
+ */
+export function batchRun<T>(fn: () => T): T
+{
+    _batchDepth++;
+
+    const result = fn();
+
+    if (--_batchDepth > 0)
+    {
+        return;
+    }
+
+    // 处理已经运行过的依赖，
+    if (_isRunedDeps.length > 0)
+    {
+        _isRunedDeps.forEach((dep) =>
+        {
+            // 此时依赖以及子依赖都已经运行过了，只需修复与子节点关系。
+            __DEV__ && console.assert(dep._isDirty === false, 'dep.dirty === false');
+
+            // 修复与子节点关系
+            dep._children.forEach((version, node) =>
+            {
+                node._parents.set(dep, dep._version);
+            });
+            dep._children.clear();
+        });
+        _isRunedDeps.length = 0;
+    }
+
+    // 批次处理
+    if (_needEffectDeps.length > 0)
+    {
+        _needEffectDeps.forEach((dep) =>
+        {
+            // 独立执行回调
+            const pre = Reactivity.activeReactivity;
+            Reactivity.activeReactivity = null;
+
+            dep.runIfDirty();
+
+            Reactivity.activeReactivity = pre;
+        });
+        _needEffectDeps.length = 0;
+    }
+
+    return result;
+}
+
+let _batchDepth = 0;
+/**
+ * 正在运行的依赖。
+ */
+const _needEffectDeps: ComputedReactivity[] = [];
+/**
+ * 已经运行过的依赖，只需要修复与子节点关系。
+ */
+const _isRunedDeps: ComputedReactivity[] = [];

package/src/collectionHandlers.ts

@@ -0,0 +1,298 @@
+import { toReactive } from './reactive';
+import { ITERATE_KEY, MAP_KEY_ITERATE_KEY, ReactiveFlags, TrackOpTypes, TriggerOpTypes } from './shared/constants';
+import { hasChanged, hasOwn, isMap, Target, toRaw, toRawType, warn } from './shared/general';
+import { PropertyReactivity } from './property';
+
+export const mutableCollectionHandlers: ProxyHandler<CollectionTypes> = {
+    get: createInstrumentationGetter(),
+};
+
+function createInstrumentationGetter()
+{
+    const instrumentations = createInstrumentations();
+
+    return (
+        target: CollectionTypes,
+        key: string | symbol,
+        receiver: CollectionTypes,
+    ) =>
+    {
+        if (key === ReactiveFlags.IS_REACTIVE)
+        {
+            return true;
+        }
+        else if (key === ReactiveFlags.RAW)
+        {
+            return target;
+        }
+
+        return Reflect.get(
+            hasOwn(instrumentations, key) && key in target
+                ? instrumentations
+                : target,
+            key,
+            receiver,
+        );
+    };
+}
+
+type Instrumentations = Record<string | symbol, Function | number>;
+
+function createInstrumentations(): Instrumentations
+{
+    const instrumentations: Instrumentations = {
+        get(this: MapTypes, key: unknown)
+        {
+            // #1772: readonly(reactive(Map)) should return readonly + reactive version
+            // of the value
+            const target = this[ReactiveFlags.RAW];
+            const rawTarget = toRaw(target);
+            const rawKey = toRaw(key);
+
+            if (hasChanged(key, rawKey))
+            {
+                PropertyReactivity.track(rawTarget, TrackOpTypes.GET, key);
+            }
+            PropertyReactivity.track(rawTarget, TrackOpTypes.GET, rawKey);
+
+            const { has } = getProto(rawTarget);
+            const wrap = toReactive;
+            if (has.call(rawTarget, key))
+            {
+                return wrap(target.get(key));
+            }
+            else if (has.call(rawTarget, rawKey))
+            {
+                return wrap(target.get(rawKey));
+            }
+            else if (target !== rawTarget)
+            {
+                // #3602 readonly(reactive(Map))
+                // ensure that the nested reactive `Map` can do tracking for itself
+                target.get(key);
+            }
+        },
+        get size()
+        {
+            const target = (this as unknown as IterableCollections)[ReactiveFlags.RAW];
+            PropertyReactivity.track(toRaw(target), TrackOpTypes.ITERATE, ITERATE_KEY);
+
+            return Reflect.get(target, 'size', target);
+        },
+        has(this: CollectionTypes, key: unknown): boolean
+        {
+            const target = this[ReactiveFlags.RAW];
+            const rawTarget = toRaw(target);
+            const rawKey = toRaw(key);
+
+            if (hasChanged(key, rawKey))
+            {
+                PropertyReactivity.track(rawTarget, TrackOpTypes.HAS, key);
+            }
+            PropertyReactivity.track(rawTarget, TrackOpTypes.HAS, rawKey);
+
+            return key === rawKey
+                ? target.has(key)
+                : target.has(key) || target.has(rawKey);
+        },
+        forEach(this: IterableCollections, callback: Function, thisArg?: unknown)
+        {
+            const observed = this;
+            const target = observed[ReactiveFlags.RAW];
+            const rawTarget = toRaw(target);
+            const wrap = toReactive;
+            PropertyReactivity.track(rawTarget, TrackOpTypes.ITERATE, ITERATE_KEY);
+
+            return target.forEach((value: unknown, key: unknown) =>
+
+                // important: make sure the callback is
+                // 1. invoked with the reactive map as `this` and 3rd arg
+                // 2. the value received should be a corresponding reactive/readonly.
+                callback.call(thisArg, wrap(value), wrap(key), observed)
+            );
+        },
+
+        add(this: SetTypes, value: unknown)
+        {
+            value = toRaw(value);
+            const target = toRaw(this);
+            const proto = getProto(target);
+            const hadKey = proto.has.call(target, value);
+            if (!hadKey)
+            {
+                target.add(value);
+                PropertyReactivity.trigger(target, TriggerOpTypes.ADD, value, value);
+            }
+
+            return this;
+        },
+        set(this: MapTypes, key: unknown, value: unknown)
+        {
+            value = toRaw(value);
+            const target = toRaw(this);
+            const { has, get } = getProto(target);
+
+            let hadKey = has.call(target, key);
+            if (!hadKey)
+            {
+                key = toRaw(key);
+                hadKey = has.call(target, key);
+            }
+            else if (__DEV__)
+            {
+                checkIdentityKeys(target, has, key);
+            }
+
+            const oldValue = get.call(target, key);
+            target.set(key, value);
+            if (!hadKey)
+            {
+                PropertyReactivity.trigger(target, TriggerOpTypes.ADD, key, value);
+            }
+            else if (hasChanged(value, oldValue))
+            {
+                PropertyReactivity.trigger(target, TriggerOpTypes.SET, key, value, oldValue);
+            }
+
+            return this;
+        },
+        delete(this: CollectionTypes, key: unknown)
+        {
+            const target = toRaw(this);
+            const { has, get } = getProto(target);
+            let hadKey = has.call(target, key);
+            if (!hadKey)
+            {
+                key = toRaw(key);
+                hadKey = has.call(target, key);
+            }
+            else if (__DEV__)
+            {
+                checkIdentityKeys(target, has, key);
+            }
+
+            const oldValue = get ? get.call(target, key) : undefined;
+            // forward the operation before queueing reactions
+            const result = target.delete(key);
+            if (hadKey)
+            {
+                PropertyReactivity.trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue);
+            }
+
+            return result;
+        },
+        clear(this: IterableCollections)
+        {
+            const target = toRaw(this);
+            const hadItems = target.size !== 0;
+            const oldTarget = __DEV__
+                ? isMap(target)
+                    ? new Map(target)
+                    : new Set(target)
+                : undefined;
+            // forward the operation before queueing reactions
+            const result = target.clear();
+            if (hadItems)
+            {
+                PropertyReactivity.trigger(
+                    target,
+                    TriggerOpTypes.CLEAR,
+                    undefined,
+                    undefined,
+                    oldTarget,
+                );
+            }
+
+            return result;
+        },
+    };
+
+    const iteratorMethods = [
+        'keys',
+        'values',
+        'entries',
+        Symbol.iterator,
+    ] as const;
+
+    iteratorMethods.forEach((method) =>
+    {
+        instrumentations[method] = createIterableMethod(method);
+    });
+
+    return instrumentations;
+}
+
+function createIterableMethod(method: string | symbol)
+{
+    return function (
+        this: IterableCollections,
+        ...args: unknown[]
+    ): Iterable<unknown> & Iterator<unknown>
+    {
+        const target = this[ReactiveFlags.RAW];
+        const rawTarget = toRaw(target);
+        const targetIsMap = isMap(rawTarget);
+        const isPair
+            = method === 'entries' || (method === Symbol.iterator && targetIsMap);
+        const isKeyOnly = method === 'keys' && targetIsMap;
+        const innerIterator = target[method](...args);
+        const wrap = toReactive;
+
+        PropertyReactivity.track(
+            rawTarget,
+            TrackOpTypes.ITERATE,
+            isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY,
+        );
+
+        // return a wrapped iterator which returns observed versions of the
+        // values emitted from the real iterator
+        return {
+            // iterator protocol
+            next()
+            {
+                const { value, done } = innerIterator.next();
+
+                return done
+                    ? { value, done }
+                    : {
+                        value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),
+                        done,
+                    };
+            },
+            // iterable protocol
+            [Symbol.iterator]()
+            {
+                return this;
+            },
+        };
+    };
+}
+
+function checkIdentityKeys(
+    target: CollectionTypes,
+    has: (key: unknown) => boolean,
+    key: unknown,
+)
+{
+    const rawKey = toRaw(key);
+    if (rawKey !== key && has.call(target, rawKey))
+    {
+        const type = toRawType(target);
+        warn(
+            `Reactive ${type} contains both the raw and reactive `
+            + `versions of the same object${type === `Map` ? ` as keys` : ``}, `
+            + `which can lead to inconsistencies. `
+            + `Avoid differentiating between the raw and reactive versions `
+            + `of an object and only use the reactive version if possible.`,
+        );
+    }
+}
+
+const getProto = <T extends CollectionTypes>(v: T): any => Reflect.getPrototypeOf(v);
+
+type CollectionTypes = IterableCollections | WeakCollections;
+
+type IterableCollections = (Map<any, any> | Set<any>) & Target;
+type WeakCollections = (WeakMap<any, any> | WeakSet<any>) & Target;
+type MapTypes = (Map<any, any> | WeakMap<any, any>) & Target;
+type SetTypes = (Set<any> | WeakSet<any>) & Target;

package/src/computed.ts

@@ -0,0 +1,201 @@
+import { batch } from './batch';
+import { Reactivity, ReactivityLink, forceTrack } from './Reactivity';
+import { hasChanged } from './shared/general';
+
+/**
+ * 创建计算反应式对象。
+ *
+ * 首次获取值将会执行函数，后续获取值且在依赖发生变化的情况下将会重新计算。
+ *
+ * @param func 检测的可能包含响应式的函数。
+ * @returns 包含 value 属性的对象，用于获取计算结果。
+ */
+export function computed<T>(func: (oldValue?: T) => T): Computed<T>
+{
+    return new ComputedReactivity(func) as any;
+}
+
+/**
+ * 计算反应式对象。
+ */
+export interface Computed<T = any>
+{
+    readonly value: T
+    [ComputedSymbol]: true
+}
+declare const ComputedSymbol: unique symbol;
+
+export interface ComputedReactivity<T = any> extends Computed<T> { }
+
+/**
+ * 计算反应式节点。
+ *
+ * 当使用 computed 函数时，会创建一个 ComputedDep 对象。
+ *
+ * 首次获取值将会执行函数，后续获取值且在依赖发生变化的情况下将会重新计算。
+ */
+export class ComputedReactivity<T = any> extends Reactivity<T>
+{
+    /**
+     * @internal
+     */
+    readonly __v_isRef = true;
+
+    /**
+     * 监听的函数。
+     */
+    protected _func: (oldValue?: T) => T;
+
+    /**
+     * 失效子节点。
+     *
+     * @private
+     */
+    _children = new Map<Reactivity, any>();
+
+    /**
+     * 是否脏，是否需要重新计算。
+     *
+     * 用于在没有值发生变化时，避免重复计算。
+     *
+     * @private
+     */
+    _isDirty = true;
+
+    /**
+     * 版本号。
+     *
+     * 重新计算后自动递增。用于判断子节点中的父节点引用是否过期。
+     *
+     * @private
+     */
+    _version = -1;
+
+    /**
+     * 创建计算依赖。
+     * @param func 检测的可能包含响应式的函数。
+     */
+    constructor(func: (oldValue?: T) => T)
+    {
+        super();
+        this._func = func;
+    }
+
+    /**
+     * 捕捉。
+     *
+     * 建立与父节点的依赖关系。
+     */
+    track()
+    {
+        this.runIfDirty();
+
+        super.track();
+    }
+
+    /**
+     * 触发。
+     *
+     * 冒泡到所有父节点，设置失效子节点字典。
+     *
+     * 把触发节点添加到失效子节点字典队列中。
+     */
+    trigger(): void
+    {
+        // 正在运行时被触发，需要在运行结束后修复父子节点关系。
+        if (Reactivity.activeReactivity === this)
+        {
+            batch(this, Reactivity.activeReactivity === this);
+        }
+
+        super.trigger();
+    }
+
+    /**
+     * 执行当前节点。
+     */
+    run()
+    {
+        // 不受嵌套的 effect 影响。
+        forceTrack(() =>
+        {
+            // 保存当前节点作为父节点。
+            const parentReactiveNode = Reactivity.activeReactivity;
+            // 设置当前节点为活跃节点。
+            Reactivity.activeReactivity = this as any;
+
+            this._version++;
+            this._value = this._func(this._value);
+
+            // 执行完毕后恢复父节点。
+            Reactivity.activeReactivity = parentReactiveNode;
+        });
+    }
+
+    /**
+     * 检查当前节点是否脏。
+     *
+     * 如果脏，则执行计算。
+     */
+    runIfDirty()
+    {
+        // 检查是否存在失效子节点字典。
+        this._isDirty = this._isDirty || this.isChildrenChanged();
+
+        // 标记为脏的情况下，执行计算。
+        if (this._isDirty)
+        {
+            // 立即去除脏标记，避免循环多重计算。
+            this._isDirty = false;
+
+            //
+            this.run();
+        }
+    }
+
+    /**
+     * 判断子节点是否发生变化。
+     */
+    protected isChildrenChanged()
+    {
+        if (this._children.size === 0) return false;
+
+        // 检查是否存在子节点发生变化。
+        let isChanged = false;
+
+        // 避免在检查过程建立依赖关系。
+        const preReactiveNode = Reactivity.activeReactivity;
+        Reactivity.activeReactivity = null;
+
+        // 检查子节点是否发生变化。
+        this._children.forEach((value, node) =>
+        {
+            if (isChanged) return;
+            if (node.value !== value)
+            {
+                // 子节点变化，需要重新计算。
+                isChanged = true;
+
+                return;
+            }
+        });
+
+        // 恢复父节点。
+        Reactivity.activeReactivity = preReactiveNode;
+
+        if (!isChanged)
+        {
+            // 修复与子节点关系
+            this._children.forEach((version, node) =>
+            {
+                node._parents.set(this, this._version);
+            });
+        }
+
+        // 清空子节点。
+        this._children.clear();
+
+        return isChanged;
+    }
+}
+

package/src/effect.ts

@@ -0,0 +1,108 @@
+import { batch, batchRun } from './batch';
+import { ComputedReactivity } from './computed';
+import { Reactivity } from './Reactivity';
+
+/**
+ * 创建效果反应式节点。
+ *
+ * 将会维持反应式效果，当被作用的函数所引用的响应式对象发生变化时，会立即执行 fn 函数。
+ *
+ * @param fn 要执行的函数
+ * @returns  暂停和恢复副作用的函数
+ *
+ * 注：
+ * 1. 与 `@vue/reactivity` 中的 effect 不同，此函数返回的是一个 Effect 对象，而不是一个函数。
+ * 2. 不希望用户直接执行，而是通过反应式自动触发。
+ * 3. 真有需求，可以使用 effect(func).run(true) 来代替 @vue/reactivity 中的 effect(func)() 。
+ *
+ */
+export function effect<T = any>(fn: () => T): Effect
+{
+    return new EffectReactivity(fn);
+}
+
+/**
+ * 效果反应式节点。
+ */
+export class EffectReactivity<T = any> extends ComputedReactivity<T> implements Effect
+{
+    /**
+     * 是否为启用, 默认为 true。
+     *
+     * 启用时，会立即执行函数。
+     */
+    private _isEnable = true;
+
+    constructor(func: (oldValue?: T) => T)
+    {
+        super(func);
+        this.runIfDirty();
+    }
+
+    pause()
+    {
+        this._isEnable = false;
+    }
+
+    resume()
+    {
+        if (this._isEnable) return;
+        this._isEnable = true;
+        if (EffectReactivity.pausedQueueEffects.has(this))
+        {
+            EffectReactivity.pausedQueueEffects.delete(this);
+            this.trigger();
+        }
+    }
+
+    trigger()
+    {
+        batchRun(() =>
+        {
+            super.trigger();
+
+            if (this._isEnable)
+            {
+                // 合批时需要判断是否已经运行的依赖。
+                batch(this, Reactivity.activeReactivity === this);
+            }
+            else
+            {
+                EffectReactivity.pausedQueueEffects.add(this);
+            }
+        });
+    }
+    private static pausedQueueEffects = new WeakSet<EffectReactivity>();
+
+    /**
+     * 执行当前节点。
+     *
+     * 当暂停时将会直接执行被包装的函数。
+     */
+    run(): void
+    {
+        if (this._isEnable)
+        {
+            super.run();
+        }
+        else
+        {
+            this._func(this._value);
+        }
+    }
+}
+
+/**
+ * 维持反应式效果。
+ */
+export interface Effect
+{
+    /**
+     * 暂停。
+     */
+    pause: () => void;
+    /**
+     * 恢复。
+     */
+    resume: () => void;
+}