@whitesev/utils 2.2.8 → 2.3.0

package/dist/index.system.js

@@ -3650,6 +3650,245 @@ System.register('Utils', [], (function (exports) {
                 }
             }
 
+            const VueUtils = {
+                /** 标签 */
+                ReactiveFlags: {
+                    IS_REACTIVE: Symbol("isReactive"),
+                },
+                /**
+                 * 判断是否是对象
+                 * @param value
+                 */
+                isObject(value) {
+                    return typeof value === "object" && value !== null;
+                },
+                /**
+                 * 判断是否是函数
+                 * @param val
+                 */
+                isFunction(val) {
+                    return typeof val === "function";
+                },
+                /**
+                 * 处理对象再次代理，可以直接返回
+                 * @param value
+                 */
+                isReactive(value) {
+                    return !!(value && value[VueUtils.ReactiveFlags.IS_REACTIVE]);
+                },
+                /**
+                 * 判断是否是数组
+                 * @param value
+                 */
+                isArray(value) {
+                    return Array.isArray(value);
+                },
+            };
+            class ReactiveEffect {
+                deps = [];
+                active = true;
+                fn;
+                // @ts-ignore
+                scheduler;
+                constructor(fn, scheduler) {
+                    this.fn = fn;
+                    this.scheduler = scheduler;
+                }
+                run(cb) {
+                    if (!this.active) {
+                        this.fn();
+                    }
+                    try {
+                        if (typeof cb === "function") {
+                            cb(this);
+                        }
+                        return this.fn();
+                    }
+                    finally {
+                        if (typeof cb === "function") {
+                            cb(undefined);
+                        }
+                    }
+                }
+            }
+            class RefImpl {
+                _value;
+                _isRef = true;
+                _rawValue;
+                _vue;
+                constructor(vueIns, rawValue) {
+                    this._vue = vueIns;
+                    this._rawValue = rawValue;
+                    this._value = this._vue.toReactive(rawValue);
+                }
+                get value() {
+                    return this._value;
+                }
+                set value(newValue) {
+                    if (newValue !== this._rawValue) {
+                        this._value = this._vue.toReactive(newValue);
+                        this._rawValue = newValue;
+                    }
+                }
+            }
+            class ObjectRefImpl {
+                object;
+                key;
+                constructor(object, key) {
+                    this.object = object;
+                    this.key = key;
+                }
+                get value() {
+                    return this.object[this.key];
+                }
+                set value(newValue) {
+                    this.object[this.key] = newValue;
+                }
+            }
+            class Vue {
+                reactMap = new WeakMap();
+                targetMap = new WeakMap();
+                activeEffect = undefined;
+                constructor() {
+                    // 将数据转化成响应式的数据，只能做对象的代理
+                }
+                /**
+                 * 生成一个被代理的对象
+                 * @param target 需要代理的对象
+                 */
+                reactive(target) {
+                    const that = this;
+                    if (!(typeof target === "object" && target !== null)) {
+                        // @ts-ignore
+                        return;
+                    }
+                    if (VueUtils.isReactive(target)) {
+                        return target;
+                    }
+                    let exisProxy = this.reactMap.get(target);
+                    if (exisProxy) {
+                        return exisProxy;
+                    }
+                    const proxy = new Proxy(target, {
+                        get(target, key, receiver) {
+                            if (key === VueUtils.ReactiveFlags.IS_REACTIVE) {
+                                return true;
+                            }
+                            that.track(target, "get", key);
+                            return Reflect.get(target, key, receiver);
+                        },
+                        set(target, key, value, receiver) {
+                            let oldValue = target[key];
+                            let result = Reflect.set(target, key, value, receiver);
+                            if (oldValue !== value) {
+                                that.trigger(target, "set", key, oldValue, value);
+                            }
+                            return result;
+                        },
+                    });
+                    that.reactMap.set(target, proxy);
+                    return proxy;
+                }
+                /**
+                 * 观察被reactive的对象值改变
+                 * @param source 被观察的对象，这里采用函数返回对象
+                 * @param changeCallBack 值改变的回调
+                 */
+                watch(source, changeCallBack) {
+                    let getter;
+                    if (VueUtils.isReactive(source)) {
+                        getter = () => this.traversal(source);
+                    }
+                    else if (VueUtils.isFunction(source)) {
+                        getter = source;
+                    }
+                    else {
+                        return;
+                    }
+                    let oldValue;
+                    const job = () => {
+                        const newValue = effect.run((activeEffect) => {
+                            this.activeEffect = activeEffect;
+                        });
+                        changeCallBack(newValue, oldValue);
+                        oldValue = newValue;
+                    };
+                    const effect = new ReactiveEffect(getter, job);
+                    oldValue = effect.run((activeEffect) => {
+                        this.activeEffect = activeEffect;
+                    });
+                }
+                toReactive(value) {
+                    return VueUtils.isObject(value) ? this.reactive(value) : value;
+                }
+                ref(value) {
+                    return new RefImpl(this, value);
+                }
+                toRef(object, key) {
+                    return new ObjectRefImpl(object, key);
+                }
+                toRefs(object) {
+                    const result = VueUtils.isArray(object) ? new Array(object.length) : {};
+                    for (let key in object) {
+                        // @ts-ignore
+                        result[key] = this.toRef(object, key);
+                    }
+                    return result;
+                }
+                trigger(target, type, key, oldValue, value) {
+                    const depsMap = this.targetMap.get(target);
+                    if (!depsMap)
+                        return;
+                    const effects = depsMap.get(key);
+                    this.triggerEffect(effects, "effects");
+                }
+                triggerEffect(effects, name) {
+                    effects &&
+                        effects.forEach((effect) => {
+                            if (effect.scheduler) {
+                                effect.scheduler();
+                            }
+                            else {
+                                effect.run();
+                            }
+                        });
+                }
+                track(target, type, key) {
+                    if (!this.activeEffect)
+                        return;
+                    let depsMap = this.targetMap.get(target);
+                    if (!depsMap) {
+                        this.targetMap.set(target, (depsMap = new Map()));
+                    }
+                    let dep = depsMap.get(key);
+                    if (!dep) {
+                        depsMap.set(key, (dep = new Set()));
+                    }
+                    this.trackEffect(dep);
+                }
+                trackEffect(dep) {
+                    if (this.activeEffect) {
+                        let shouldTrack = !dep.has(this.activeEffect);
+                        if (shouldTrack) {
+                            dep.add(this.activeEffect);
+                            this.activeEffect.deps.push(dep);
+                        }
+                    }
+                }
+                traversal(value, set = new Set()) {
+                    if (!VueUtils.isObject(value))
+                        return value;
+                    if (set.has(value)) {
+                        return value;
+                    }
+                    set.add(value);
+                    for (let key in value) {
+                        this.traversal(value[key], set);
+                    }
+                    return value;
+                }
+            }
+
             class Utils {
                 windowApi;
                 constructor(option) {
@@ -5769,7 +6008,6 @@ System.register('Utils', [], (function (exports) {
                         }
                         /**
                          * 申请剪贴板权限
-                         * @returns {Promise<boolean>}
                          */
                         requestClipboardPermission() {
                             return new Promise((resolve, reject) => {
@@ -5782,9 +6020,7 @@ System.register('Utils', [], (function (exports) {
                                         .then((permissionStatus) => {
                                         resolve(true);
                                     })
-                                        .catch(
-                                    /** @param {TypeError} error */
-                                    (error) => {
+                                        .catch((error) => {
                                         console.error([
                                             "申请剪贴板权限失败，尝试直接写入👉",
                                             error.message ?? error.name ?? error.stack,
@@ -6717,6 +6953,10 @@ System.register('Utils', [], (function (exports) {
                  * Utils.generateUUID()
                  */
                 generateUUID = GenerateUUID;
+                /**
+                 * 自定义的动态响应对象
+                 */
+                Vue = Vue;
             }
             let utils = exports("default", new Utils());