@whitesev/utils 2.2.8 → 2.3.0

package/dist/index.umd.js

@@ -3651,6 +3651,245 @@
         }
     }
 
+    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) {
@@ -5770,7 +6009,6 @@
                 }
                 /**
                  * 申请剪贴板权限
-                 * @returns {Promise<boolean>}
                  */
                 requestClipboardPermission() {
                     return new Promise((resolve, reject) => {
@@ -5783,9 +6021,7 @@
                                 .then((permissionStatus) => {
                                 resolve(true);
                             })
-                                .catch(
-                            /** @param {TypeError} error */
-                            (error) => {
+                                .catch((error) => {
                                 console.error([
                                     "申请剪贴板权限失败，尝试直接写入👉",
                                     error.message ?? error.name ?? error.stack,
@@ -6718,6 +6954,10 @@
          * Utils.generateUUID()
          */
         generateUUID = GenerateUUID;
+        /**
+         * 自定义的动态响应对象
+         */
+        Vue = Vue;
     }
     let utils = new Utils();