@whitesev/utils 2.2.8 → 2.3.0

package/src/Vue.ts

@@ -0,0 +1,241 @@
+const VueUtils = {
+	/** 标签 */
+	ReactiveFlags: {
+		IS_REACTIVE: Symbol("isReactive"),
+	},
+	/**
+	 * 判断是否是对象
+	 * @param value
+	 */
+	isObject(value: any) {
+		return typeof value === "object" && value !== null;
+	},
+	/**
+	 * 判断是否是函数
+	 * @param val
+	 */
+	isFunction(val: any) {
+		return typeof val === "function";
+	},
+	/**
+	 * 处理对象再次代理，可以直接返回
+	 * @param value
+	 */
+	isReactive(value: any) {
+		return !!(value && value[VueUtils.ReactiveFlags.IS_REACTIVE]);
+	},
+	/**
+	 * 判断是否是数组
+	 * @param value
+	 */
+	isArray(value: any): boolean {
+		return Array.isArray(value);
+	},
+};
+
+class ReactiveEffect {
+	deps: any[] = [];
+	private active = true;
+	private fn;
+	// @ts-ignore
+	private scheduler;
+	constructor(fn: Function, scheduler: any) {
+		this.fn = fn;
+		this.scheduler = scheduler;
+	}
+	run(cb: (activeEffect: any) => void) {
+		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: Vue;
+	constructor(vueIns: Vue, rawValue: any) {
+		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: any, key: any) {
+		this.object = object;
+		this.key = key;
+	}
+	get value() {
+		return this.object[this.key];
+	}
+	set value(newValue) {
+		this.object[this.key] = newValue;
+	}
+}
+export class Vue {
+	private reactMap = new WeakMap();
+	private targetMap = new WeakMap();
+	private activeEffect = undefined as any as ReactiveEffect;
+	constructor() {
+		// 将数据转化成响应式的数据，只能做对象的代理
+	}
+	/**
+	 * 生成一个被代理的对象
+	 * @param target 需要代理的对象
+	 */
+	reactive<T extends object>(target: T): T {
+		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 as keyof T];
+				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<T>(
+		source: () => T,
+		changeCallBack: (newValue: T | undefined, oldValue: T | undefined) => void
+	) {
+		let getter;
+		if (VueUtils.isReactive(source)) {
+			getter = () => this.traversal(source);
+		} else if (VueUtils.isFunction(source)) {
+			getter = source;
+		} else {
+			return;
+		}
+		let oldValue: any;
+		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: any) {
+		return VueUtils.isObject(value) ? this.reactive(value) : value;
+	}
+	ref(value: any) {
+		return new RefImpl(this, value);
+	}
+	toRef(object: any, key: any) {
+		return new ObjectRefImpl(object, key);
+	}
+	toRefs(object: any) {
+		const result = VueUtils.isArray(object) ? new Array(object.length) : {};
+		for (let key in object) {
+            // @ts-ignore
+			result[key] = this.toRef(object, key);
+		}
+		return result;
+	}
+	private trigger(
+		target: any,
+		type: string,
+		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");
+	}
+	private triggerEffect(effects: any[], name: string) {
+		effects &&
+			effects.forEach((effect) => {
+				if (effect.scheduler) {
+					effect.scheduler();
+				} else {
+					effect.run();
+				}
+			});
+	}
+	private track(target: WeakKey, type: string, key: string | symbol) {
+		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);
+	}
+	private trackEffect(dep: any) {
+		if (this.activeEffect) {
+			let shouldTrack = !dep.has(this.activeEffect);
+			if (shouldTrack) {
+				dep.add(this.activeEffect);
+				this.activeEffect.deps.push(dep);
+			}
+		}
+	}
+	private traversal(value: any, 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;
+	}
+}

package/src/VueObject.ts

@@ -1,52 +1,50 @@
-import type { AnyObject } from "./Utils";
-
-export declare interface Vue2Object extends AnyObject {
-	$attrs: AnyObject;
+export declare interface Vue2Object {
+	$attrs: any;
 	$children: Vue2Object[];
 	$createElement: (...args: any[]) => any;
 	$el: HTMLElement;
-	$listeners: AnyObject;
-	$options: AnyObject;
+	$listeners: any;
+	$options: any;
 	$parent: Vue2Object;
-	$refs: AnyObject;
+	$refs: any;
 	$root: Vue2Object;
-	$scopedSlots: AnyObject;
-	$slots: AnyObject;
-	$store: AnyObject;
-	$vnode: AnyObject;
+	$scopedSlots: any;
+	$slots: any;
+	$store: any;
+	$vnode: any;
 
-	_data: AnyObject;
+	_data: any;
 	_directInactive: boolean;
-	_events: AnyObject;
+	_events: any;
 	_hasHookEvent: boolean;
 	_isBeingDestroyed: boolean;
 	_isDestroyed: boolean;
 	_isMounted: boolean;
 	_isVue: boolean;
 
-	$data: AnyObject;
+	$data: any;
 	$isServer: boolean;
-	$props: AnyObject;
-	$route: AnyObject & {
+	$props: any;
+	$route: any & {
 		fullPath: string;
 		hash: string;
-		matched: AnyObject[];
-		meta: AnyObject;
+		matched: any[];
+		meta: any;
 		name: string;
-		params: AnyObject;
+		params: any;
 		path: string;
-		query: AnyObject;
+		query: any;
 	};
-	$router: AnyObject & {
+	$router: any & {
 		afterHooks: Function[];
 		app: Vue2Object;
 		apps: Vue2Object[];
 		beforeHooks: Function[];
 		fallback: boolean;
-		history: AnyObject & {
+		history: any & {
 			base: string;
-			current: AnyObject;
-			listeners: AnyObject[];
+			current: any;
+			listeners: any[];
 			router: Vue2Object["$router"];
 			/**
 			 *
@@ -61,16 +59,16 @@ export declare interface Vue2Object extends AnyObject {
 			 * @param data 可选的 HistoryState 以关联该导航记录
 			 * @returns
 			 */
-			push: (to: string, data?: AnyObject) => void;
+			push: (to: string, data?: any) => void;
 			/**
 			 *
 			 * @param to 要设置的地址
 			 * @param data 可选的 HistoryState 以关联该导航记录
 			 * @returns
 			 */
-			replace: (to: string, data?: AnyObject) => void;
+			replace: (to: string, data?: any) => void;
 		};
-		matcher: AnyObject & {
+		matcher: any & {
 			addRoute: (...args: any[]) => any;
 			addRoutes: (...args: any[]) => any;
 			getRoutes: () => any;
@@ -78,7 +76,7 @@ export declare interface Vue2Object extends AnyObject {
 		};
 		mode: string;
 		resolveHooks: ((...args: any[]) => any)[];
-		currentRoute: AnyObject;
+		currentRoute: any;
 		beforeEach: (
 			callback:
 				| ((
@@ -111,7 +109,7 @@ export declare interface Vue2Object extends AnyObject {
 				| (() => void)
 		) => void;
 	};
-	$ssrContext: AnyObject;
+	$ssrContext: any;
 
 	$watch: (
 		key: string | string[] | (() => any),
@@ -121,6 +119,8 @@ export declare interface Vue2Object extends AnyObject {
 			deep?: boolean;
 		}
 	) => void;
+
+	[key: string]: any;
 }
 
 export declare interface HTMLVue2DivElement extends HTMLDivElement {