@whitesev/utils 2.9.13 → 2.11.0

package/dist/types/src/Utils.d.ts

@@ -1519,14 +1519,39 @@ declare class Utils {
     /**
      * 自定义的动态响应对象
      * @example
-     * let vue = new Utils.Vue();
-     * let reactive = new vue.reactive({});
-     * vue.watch(()=>reactive["name"], (newValue, oldValue)=>{
+     * const vue = new Utils.Vue();
+     * const reactive = vue.reactive({
+     *   name: "",
+     * });
+     * vue.watch(()=>reactive.name, (newValue, oldValue)=>{
+     *     console.log("newValue ==> " + newValue);
+     *     console.log("oldValue ==> " + oldValue);
+     * })
+     * reactive.name = "测试";
+     * > newValue ==> 测试
+     * > oldValue ==>
+     * reactive.name = "null";
+     * > newValue ==> null
+     * > oldValue ==> 测试
+     * reactive.name = "null";
+     * @example
+     * const vue = new Utils.Vue();
+     * const reactive = vue.reactive({
+     *   name: "",
+     * });
+     * vue.watch(()=>reactive.name, (newValue, oldValue)=>{
      *     console.log("newValue ==> " + newValue);
      *     console.log("oldValue ==> " + oldValue);
+     * },{
+     *   triggerMethod: "set",
      * })
-     * vue["name"] = "测试";
-     * > "测试"
+     * reactive.name = "测试";
+     * > newValue ==> 测试
+     * > oldValue ==>
+     * reactive.name = "测试";
+     * > newValue ==> 测试
+     * > oldValue ==> 测试
+     *
      */
     Vue: typeof Vue;
     ModuleRaid: typeof ModuleRaid;
@@ -1590,6 +1615,10 @@ declare class Utils {
     }) => Promise<any> : (...args: {
         [K in keyof P]: any;
     }) => any;
+    /**
+     * 判断页面中是否存在`worker-src`的CSP规则
+     */
+    hasWorkerCSP(): Promise<boolean>;
 }
 declare const utils: Utils;
 export { utils as Utils };

package/dist/types/src/Vue.d.ts

@@ -1,3 +1,23 @@
+type ObjectWatchOptionItem = {
+    /**
+     * 是否立即执行
+     * @default false
+     */
+    immediate?: boolean;
+    /**
+     * 是否仅触发一次
+     * @default false
+     */
+    once?: boolean;
+    /**
+     * 值改变触发监听器的条件
+     * @default "not-same"
+     * @desc
+     * + `not-same`: 值改变时触发
+     * + `set`: 值被设置时触发
+     */
+    triggerMethod: "not-same" | "set";
+};
 declare class RefImpl {
     _value: any;
     _isRef: boolean;
@@ -28,8 +48,11 @@ export declare class Vue {
      * 观察被reactive的对象值改变
      * @param source 被观察的对象，这里采用函数返回对象
      * @param changeCallBack 值改变的回调
+     * @param options 配置项
      */
-    watch<T>(source: () => T, changeCallBack: (newValue: T | undefined, oldValue: T | undefined) => void): void;
+    watch<T>(source: () => T, changeCallBack: (newValue: T | undefined, oldValue: T | undefined) => void, options?: ObjectWatchOptionItem): {
+        unwatch: () => void;
+    } | undefined;
     toReactive(value: any): any;
     ref(value: any): RefImpl;
     toRef(object: any, key: any): ObjectRefImpl;

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@whitesev/utils",
-  "version": "2.9.13",
+  "version": "2.11.0",
   "description": "一个常用的工具库",
   "keywords": [
     "ScriptCat",

package/src/Utils.ts

@@ -234,8 +234,8 @@ class Utils {
     let timer: any = null as any;
     const that = this;
     return function (...args: A) {
-      that.workerClearTimeout(timer);
-      timer = that.workerSetTimeout(function () {
+      clearTimeout(timer);
+      timer = setTimeout(function () {
         fn.apply(that, args);
       }, delay);
     };
@@ -263,7 +263,6 @@ class Utils {
    **/
   downloadBase64(base64Data: string, fileName: string, isIFrame?: boolean): void;
   downloadBase64(base64Data: string, fileName: string, isIFrame = false) {
-    const that = this;
     if (typeof base64Data !== "string") {
       throw new Error("Utils.downloadBase64 参数 base64Data 必须为 string 类型");
     }
@@ -276,7 +275,7 @@ class Utils {
       $iframe.style.display = "none";
       $iframe.src = base64Data;
       (this.windowApi.document.body || this.windowApi.document.documentElement).appendChild($iframe);
-      that.workerSetTimeout(() => {
+      setTimeout(() => {
         $iframe!.contentWindow!.document.execCommand("SaveAs", true, fileName);
         (this.windowApi.document.body || this.windowApi.document.documentElement).removeChild($iframe);
       }, 100);
@@ -2841,7 +2840,6 @@ class Utils {
    **/
   setTimeout(callback: (() => void) | string, delayTime?: number): Promise<any>;
   setTimeout(callback: (() => void) | string, delayTime: number = 0): Promise<any> {
-    const that = this;
     if (typeof callback !== "function" && typeof callback !== "string") {
       throw new TypeError("Utils.setTimeout 参数 callback 必须为 function|string 类型");
     }
@@ -2849,8 +2847,8 @@ class Utils {
       throw new TypeError("Utils.setTimeout 参数 delayTime 必须为 number 类型");
     }
     return new Promise((resolve) => {
-      that.workerSetTimeout(() => {
-        resolve(that.tryCatch().run(callback));
+      setTimeout(() => {
+        resolve(this.tryCatch().run(callback));
       }, delayTime);
     });
   }
@@ -2862,12 +2860,11 @@ class Utils {
    **/
   sleep(delayTime?: number): Promise<void>;
   sleep(delayTime: number = 0): Promise<void> {
-    const that = this;
     if (typeof delayTime !== "number") {
       throw new Error("Utils.sleep 参数 delayTime 必须为 number 类型");
     }
     return new Promise((resolve) => {
-      that.workerSetTimeout(() => {
+      setTimeout(() => {
         resolve(void 0);
       }, delayTime);
     });
@@ -3397,13 +3394,12 @@ class Utils {
     intervalTimer: number = 250,
     maxTime: number = -1
   ): Promise<T> {
-    const that = this;
     if (checkFn == null) {
       throw new TypeError("checkObj 不能为空对象 ");
     }
     let isResolve = false;
     return new Promise((resolve, reject) => {
-      const interval = that.workerSetInterval(() => {
+      const interval = setInterval(() => {
         let inst = checkFn;
         if (typeof checkFn === "function") {
           inst = checkFn();
@@ -3416,14 +3412,14 @@ class Utils {
         }
         if ((typeof propertyName === "function" && propertyName(inst)) || Reflect.has(inst, propertyName as string)) {
           isResolve = true;
-          that.workerClearInterval(interval);
+          clearInterval(interval);
           resolve((inst as any)[propertyName as string]);
         }
       }, intervalTimer);
       if (maxTime !== -1) {
-        that.workerSetTimeout(() => {
+        setTimeout(() => {
           if (!isResolve) {
-            that.workerClearInterval(interval);
+            clearInterval(interval);
             reject();
           }
         }, maxTime);
@@ -3733,14 +3729,39 @@ class Utils {
   /**
    * 自定义的动态响应对象
    * @example
-   * let vue = new Utils.Vue();
-   * let reactive = new vue.reactive({});
-   * vue.watch(()=>reactive["name"], (newValue, oldValue)=>{
+   * const vue = new Utils.Vue();
+   * const reactive = vue.reactive({
+   *   name: "",
+   * });
+   * vue.watch(()=>reactive.name, (newValue, oldValue)=>{
+   *     console.log("newValue ==> " + newValue);
+   *     console.log("oldValue ==> " + oldValue);
+   * })
+   * reactive.name = "测试";
+   * > newValue ==> 测试
+   * > oldValue ==>
+   * reactive.name = "null";
+   * > newValue ==> null
+   * > oldValue ==> 测试
+   * reactive.name = "null";
+   * @example
+   * const vue = new Utils.Vue();
+   * const reactive = vue.reactive({
+   *   name: "",
+   * });
+   * vue.watch(()=>reactive.name, (newValue, oldValue)=>{
    *     console.log("newValue ==> " + newValue);
    *     console.log("oldValue ==> " + oldValue);
+   * },{
+   *   triggerMethod: "set",
    * })
-   * vue["name"] = "测试";
-   * > "测试"
+   * reactive.name = "测试";
+   * > newValue ==> 测试
+   * > oldValue ==>
+   * reactive.name = "测试";
+   * > newValue ==> 测试
+   * > oldValue ==> 测试
+   *
    */
   Vue = Vue;
   ModuleRaid = ModuleRaid;
@@ -3752,8 +3773,7 @@ class Utils {
   workerSetTimeout(callback: (...args: any[]) => any, timeout: number = 0) {
     try {
       return WorkerSetTimeout(callback, timeout);
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    } catch (error) {
+    } catch {
       return this.windowApi.setTimeout(callback, timeout);
     }
   }
@@ -3766,10 +3786,7 @@ class Utils {
       if (timeId != null) {
         WorkerClearTimeout(timeId);
       }
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    } catch (error) {
-      // console.log(error);
-    } finally {
+    } catch {
       this.windowApi.clearTimeout(timeId);
     }
   }
@@ -3781,8 +3798,7 @@ class Utils {
   workerSetInterval(callback: (...args: any[]) => any, timeout: number = 0) {
     try {
       return WorkerSetInterval(callback, timeout);
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    } catch (error) {
+    } catch {
       return this.windowApi.setInterval(callback, timeout);
     }
   }
@@ -3795,10 +3811,7 @@ class Utils {
       if (timeId != null) {
         WorkerClearInterval(timeId);
       }
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    } catch (error) {
-      // console.log(error);
-    } finally {
+    } catch {
       this.windowApi.clearInterval(timeId);
     }
   }
@@ -3853,6 +3866,65 @@ class Utils {
       return new FunctionConstructor(...args);
     }
   }
+  /**
+   * 判断页面中是否存在`worker-src`的CSP规则
+   */
+  hasWorkerCSP() {
+    return new Promise<boolean>((resolve) => {
+      let flag = true;
+      let workerBlobUrl: string | undefined = void 0;
+
+      const workerJs = /*js*/ `
+(() => {
+    this.addEventListener(
+    "message",
+    function () {
+        this.postMessage({
+          success: true,
+        });
+    },
+    {
+        capture: true,
+    }
+    );
+})();`;
+      try {
+        const workerScript = new Blob([workerJs], {
+          type: "application/javascript",
+        });
+        workerBlobUrl = window.URL.createObjectURL(workerScript);
+        // @ts-expect-error
+        if (globalThis.trustedTypes && typeof globalThis.trustedTypes.createPolicy === "function") {
+          // 使用这个后虽然不报错，但是仍会有blob错误
+          // violates the following Content Security Policy directive: "worker-src 'self'". The action has been blocked.
+          // 且这个错误无法使用try/catch捕捉，导致本该提醒使用手动匹配的结果并无提醒弹窗
+          // @ts-expect-error
+          const workerPolicy = globalThis.trustedTypes.createPolicy("workerPolicy", {
+            createScriptURL: (url: string) => url,
+          });
+          workerBlobUrl = workerPolicy.createScriptURL(workerBlobUrl);
+        }
+        const worker = new Worker(workerBlobUrl!);
+        worker.onmessage = (data) => {
+          if (data.data.success) {
+            flag = false;
+          }
+        };
+        setTimeout(() => {
+          worker.terminate();
+          resolve(flag);
+        }, 500);
+        worker.postMessage("test");
+      } catch {
+        flag = true;
+      } finally {
+        // 释放
+        if (typeof workerBlobUrl === "string") {
+          globalThis.URL.revokeObjectURL(workerBlobUrl);
+        }
+      }
+    });
+  }
 }
 
 const utils = new Utils();

package/src/Vue.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 const VueUtils = {
   /** 标签 */
   ReactiveFlags: {
@@ -34,16 +33,39 @@ const VueUtils = {
   },
 };
 
+type ObjectWatchOptionItem = {
+  /**
+   * 是否立即执行
+   * @default false
+   */
+  immediate?: boolean;
+  /**
+   * 是否仅触发一次
+   * @default false
+   */
+  once?: boolean;
+  /**
+   * 值改变触发监听器的条件
+   * @default "not-same"
+   * @desc
+   * + `not-same`: 值改变时触发
+   * + `set`: 值被设置时触发
+   */
+  triggerMethod: "not-same" | "set";
+};
+
 class ReactiveEffect {
   deps: any[] = [];
-  private active = true;
-  private fn;
-  private scheduler;
-  constructor(fn: (...args: any[]) => any, scheduler: any) {
+  active = true;
+  fn;
+  scheduler;
+  options;
+  constructor(fn: (...args: any[]) => any, scheduler: any, options: ObjectWatchOptionItem) {
     this.fn = fn;
     this.scheduler = scheduler;
+    this.options = options; // 默认值为'same'
   }
-  run(cb: (activeEffect: any) => void) {
+  run(cb?: (activeEffect: any) => void) {
     if (!this.active) {
       this.fn();
     }
@@ -58,6 +80,18 @@ class ReactiveEffect {
       }
     }
   }
+  stop() {
+    if (this.active) {
+      // 清除依赖关系
+      if (this.deps && this.deps.length) {
+        this.deps.forEach((dep: any) => {
+          dep.delete(this);
+        });
+        this.deps.length = 0;
+      }
+      this.active = false;
+    }
+  }
 }
 class RefImpl {
   _value;
@@ -127,9 +161,7 @@ export class Vue {
       set(target, key, value, receiver) {
         const oldValue = target[key as keyof T];
         const result = Reflect.set(target, key, value, receiver);
-        if (oldValue !== value) {
-          that.trigger(target, "set", key, oldValue, value);
-        }
+        that.trigger(target, "set", key, oldValue, value);
         return result;
       },
     });
@@ -140,8 +172,13 @@ export class Vue {
    * 观察被reactive的对象值改变
    * @param source 被观察的对象，这里采用函数返回对象
    * @param changeCallBack 值改变的回调
+   * @param options 配置项
    */
-  watch<T>(source: () => T, changeCallBack: (newValue: T | undefined, oldValue: T | undefined) => void) {
+  watch<T>(
+    source: () => T,
+    changeCallBack: (newValue: T | undefined, oldValue: T | undefined) => void,
+    options?: ObjectWatchOptionItem
+  ) {
     let getter;
     if (VueUtils.isReactive(source)) {
       getter = () => this.traversal(source);
@@ -151,17 +188,35 @@ export class Vue {
       return;
     }
     let oldValue: any;
+    const unwatch = () => {
+      effect.stop();
+    };
     const job = () => {
       const newValue = effect.run((activeEffect) => {
         this.activeEffect = activeEffect;
       });
       changeCallBack(newValue, oldValue);
+      if (options?.once) {
+        // 仅触发一次
+        unwatch();
+      }
       oldValue = newValue;
     };
-    const effect = new ReactiveEffect(getter, job);
+    const effect = new ReactiveEffect(getter, job, {
+      triggerMethod: "not-same",
+      ...(options ?? {}),
+    });
     oldValue = effect.run((activeEffect) => {
       this.activeEffect = activeEffect;
     });
+    if (options) {
+      if (options.immediate) {
+        job();
+      }
+    }
+    return {
+      unwatch,
+    };
   }
   toReactive(value: any) {
     return VueUtils.isObject(value) ? this.reactive(value) : value;
@@ -179,26 +234,42 @@ export class Vue {
     }
     return result;
   }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  private trigger(target: any, type: string, key: string | symbol, oldValue: any, value: any) {
+  private trigger(target: any, type: "set", key: string | symbol, oldValue: any, value: any) {
     const depsMap = this.targetMap.get(target);
     if (!depsMap) return;
     const effects = depsMap.get(key);
-    this.triggerEffect(effects, "effects");
+    this.triggerEffect(effects, type, "effects", oldValue, value);
   }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  private triggerEffect(effects: any[], name: string) {
+  private triggerEffect(
+    effects: (typeof ReactiveEffect)["prototype"][],
+    _type: "set",
+    _name: string,
+    oldValue: any,
+    value: any
+  ) {
     if (effects) {
+      const isSame = oldValue === value;
       effects.forEach((effect) => {
-        if (effect.scheduler) {
-          effect.scheduler();
-        } else {
-          effect.run();
+        if (effect.options.triggerMethod === "not-same") {
+          if (isSame) {
+            return;
+          }
+          if (effect.scheduler) {
+            effect.scheduler();
+          } else {
+            effect.run();
+          }
+        } else if (effect.options.triggerMethod === "set") {
+          if (effect.scheduler) {
+            effect.scheduler();
+          } else {
+            effect.run();
+          }
         }
       });
     }
   }
-  private track(target: WeakKey, type: string, key: string | symbol) {
+  private track(target: WeakKey, _type: "get", key: string | symbol) {
     if (!this.activeEffect) return;
     let depsMap = this.targetMap.get(target);
     if (!depsMap) {