@feng3d/reactivity 1.0.3 → 1.0.5

package/src/reactive.ts

@@ -1,130 +1,139 @@
-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;
+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';
+
+/**
+ * 移除对象属性中的 readonly 关键字。
+ */
+type UnReadonly<T> = {
+    -readonly [P in keyof T]: T[P];
+};
+
+/**
+ * 创建或者获取响应式对象的代理对象。
+ *
+ * @param target 被响应式的对象。
+ * @returns 响应式代理对象。
+ *
+ * 注意：
+ *
+ * 1. 扩大被反应式的对象的类型范围，只有`Object.isExtensible`不通过的对象不被响应化。Float32Array等都允许被响应化。
+ * 2. 被反应式的对象的只读属性也会被标记为可编辑。希望被反应对象属性一般为只读属性，通过反应式来改变属性值，同时又通过反应式系统来处理其更改后响应逻辑。
+ *
+ */
+export function reactive<T extends object>(target: T): UnReadonly<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

@@ -1,88 +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;
+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

@@ -1,41 +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' : '');
+/**
+ * 响应式标志枚举，用于标识响应式对象的特殊属性或状态
+ */
+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' : '');