@viewfly/core 2.2.0 → 3.0.0-alpha.0

package/dist/index.js

@@ -442,12 +442,17 @@ var Type = Function;
 //#endregion
 //#region src/base/lifecycle.ts
 /**
-* 当组件第一次渲染完成时触发
-* @param callback
+* 当组件挂载后调用回调函数
+* @param callback 回调函数
+* @returns 一个函数，用于停止监听
+* @example
 * ```tsx
 * function App() {
-*   onMount(() => {
+*   onMounted(() => {
 *     console.log('App mounted!')
+*     return () => {
+*       console.log('destroy prev mount!')
+*     }
 *   })
 *   return () => <div>...</div>
 * }
@@ -459,8 +464,10 @@ function onMounted(callback) {
 	component.mountCallbacks.push(callback);
 }
 /**
-* 当组件视图更新后调用
-* @param callback
+* 当组件视图更新后调用回调函数
+* @param callback 回调函数
+* @returns 一个函数，用于停止监听
+* @example
 * ```tsx
 * function App() {
 *   onUpdated(() => {
@@ -483,89 +490,36 @@ function onUpdated(callback) {
 	};
 }
 /**
-* 当组件销毁时调用回调函数
-* @param callback
-*/
-function onUnmounted(callback) {
-	const component = getSetupContext();
-	if (!component.unmountedCallbacks) component.unmountedCallbacks = [];
-	component.unmountedCallbacks.push(callback);
-}
-//#endregion
-//#region src/base/ref.ts
-var DynamicRef = class {
-	unBindMap = /* @__PURE__ */ new Map();
-	targetCaches = /* @__PURE__ */ new Set();
-	constructor(callback) {
-		this.callback = callback;
-	}
-	bind(value) {
-		if (typeof value !== "object" || value === null) return;
-		if (this.targetCaches.has(value)) return;
-		const unBindFn = this.callback(value);
-		if (typeof unBindFn === "function") this.unBindMap.set(value, unBindFn);
-		this.targetCaches.add(value);
-	}
-	unBind(value) {
-		this.targetCaches.delete(value);
-		const unBindFn = this.unBindMap.get(value);
-		this.unBindMap.delete(value);
-		if (typeof unBindFn === "function") unBindFn();
-	}
-};
-/**
-* 用于节点渲染完成时获取 DOM 节点
-* @param callback 获取 DOM 节点的回调函数
+* 当组件销毁后调用回调函数
+* @param callback 回调函数
+* @returns 一个函数，用于停止监听
 * @example
 * ```tsx
 * function App() {
-*   const ref = createDynamicRef(node => {
-*     function fn() {
-*       // do something...
-*     }
-*     node.addEventListener('click', fn)
-*     return () => {
-*       node.removeEventListener('click', fn)
-*     }
+*   onUnmounted(() => {
+*     console.log('App unmounted!')
 *   })
-*   return () => {
-*     return <div ref={ref}>xxx</div>
-*   }
+*   return () => <div>...</div>
 * }
 * ```
 */
-function createDynamicRef(callback) {
-	return new DynamicRef(callback);
-}
-var StaticRef = class extends DynamicRef {
-	get current() {
-		return this._current;
-	}
-	_current = null;
-	constructor() {
-		super((v) => {
-			this._current = v;
-			return () => {
-				this._current = null;
-			};
-		});
-	}
-};
-function createRef() {
-	return new StaticRef();
+function onUnmounted(callback) {
+	const component = getSetupContext();
+	if (!component.unmountedCallbacks) component.unmountedCallbacks = [];
+	component.unmountedCallbacks.push(callback);
 }
 //#endregion
 //#region src/reactive/_help.ts
-var toStr = Object.prototype.toString;
-function getStringType(v) {
-	return toStr.call(v);
+var toStr$1 = Object.prototype.toString;
+function getStringType$1(v) {
+	return toStr$1.call(v);
 }
-function isArray(v) {
+function isArray$1(v) {
 	return Array.isArray(v);
 }
-var hasOwnProperty = Object.prototype.hasOwnProperty;
-function hasOwn(target, key) {
-	return hasOwnProperty.call(target, key);
+var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
+function hasOwn$1(target, key) {
+	return hasOwnProperty$1.call(target, key);
 }
 //#endregion
 //#region src/base/dep.ts
@@ -579,24 +533,24 @@ var Dep = class {
 		this.destroyCallbacks = [];
 	}
 };
-var deps = [];
+var deps$1 = [];
 function getDepContext() {
-	return deps.at(-1);
+	return deps$1.at(-1);
 }
 function pushDepContext(dep) {
-	deps.push(dep);
+	deps$1.push(dep);
 }
 function popDepContext() {
-	deps.pop();
+	deps$1.pop();
 }
 //#endregion
 //#region src/reactive/effect.ts
-var subscribers = /* @__PURE__ */ new WeakMap();
-function getSubscriber(target) {
-	let subscriber = subscribers.get(target);
+var subscribers$1 = /* @__PURE__ */ new WeakMap();
+function getSubscriber$1(target) {
+	let subscriber = subscribers$1.get(target);
 	if (!subscriber) {
 		subscriber = /* @__PURE__ */ new Map();
-		subscribers.set(target, subscriber);
+		subscribers$1.set(target, subscriber);
 	}
 	return subscriber;
 }
@@ -613,11 +567,11 @@ var TriggerOpTypes = /* @__PURE__ */ function(TriggerOpTypes) {
 	TriggerOpTypes["Clear"] = "Clear";
 	return TriggerOpTypes;
 }({});
-var unKnownKey = Symbol("unKnownKey");
-function track(target, type, key = unKnownKey) {
+var unKnownKey$1 = Symbol("unKnownKey");
+function track(target, type, key = unKnownKey$1) {
 	const dep = getDepContext();
 	if (dep) {
-		const subscriber = getSubscriber(target);
+		const subscriber = getSubscriber$1(target);
 		let record = subscriber.get(type);
 		if (!record) {
 			record = /* @__PURE__ */ new Map();
@@ -638,31 +592,31 @@ function track(target, type, key = unKnownKey) {
 		}
 	}
 }
-function runEffect(key, record) {
+function runEffect$1(key, record) {
 	if (!record) return;
 	const effects = record.get(key);
 	if (effects) [...effects].forEach((i) => i.effect());
 }
-function trigger(target, type, key = unKnownKey) {
-	const subscriber = getSubscriber(target);
+function trigger(target, type, key = unKnownKey$1) {
+	const subscriber = getSubscriber$1(target);
 	if (subscriber) switch (type) {
 		case TriggerOpTypes.Set:
-			if (isArray(target)) runEffect(unKnownKey, subscriber.get(TrackOpTypes.Iterate));
-			runEffect(key, subscriber.get(TrackOpTypes.Get));
-			runEffect(key, subscriber.get(TrackOpTypes.Has));
+			if (isArray$1(target)) runEffect$1(unKnownKey$1, subscriber.get(TrackOpTypes.Iterate));
+			runEffect$1(key, subscriber.get(TrackOpTypes.Get));
+			runEffect$1(key, subscriber.get(TrackOpTypes.Has));
 			break;
 		case TriggerOpTypes.Add:
 		case TriggerOpTypes.Clear:
 		case TriggerOpTypes.Delete:
-			runEffect(unKnownKey, subscriber.get(TrackOpTypes.Iterate));
-			runEffect(key, subscriber.get(TrackOpTypes.Has));
-			runEffect(key, subscriber.get(TrackOpTypes.Get));
+			runEffect$1(unKnownKey$1, subscriber.get(TrackOpTypes.Iterate));
+			runEffect$1(key, subscriber.get(TrackOpTypes.Has));
+			runEffect$1(key, subscriber.get(TrackOpTypes.Get));
 			break;
 	}
 }
 //#endregion
 //#region src/reactive/iterable-iterator.ts
-function createIterableIterator(wrapper) {
+function createIterableIterator$1(wrapper) {
 	return {
 		*entries() {
 			const target = toRaw(this);
@@ -683,19 +637,19 @@ function createIterableIterator(wrapper) {
 }
 //#endregion
 //#region src/reactive/array-handlers.ts
-function applyPredicateMethod(self, methodName, predicate, wrapper, thisArg) {
+function applyPredicateMethod$1(self, methodName, predicate, wrapper, thisArg) {
 	const target = toRaw(self);
 	track(target, TrackOpTypes.Iterate);
 	return target[methodName]((value, index, array) => {
 		return predicate.call(target, wrapper(value), index, array);
 	}, thisArg);
 }
-function applySearchMethod(self, methodName, args) {
+function applySearchMethod$1(self, methodName, args) {
 	const target = toRaw(self);
 	track(target, TrackOpTypes.Iterate);
 	return target[methodName](...args.map(toRaw));
 }
-function createArrayHandlers(wrapper) {
+function createArrayHandlers$1(wrapper) {
 	return {
 		concat(...items) {
 			const target = toRaw(this);
@@ -703,31 +657,31 @@ function createArrayHandlers(wrapper) {
 			return target.concat(...items);
 		},
 		every(predicate, thisArg) {
-			return applyPredicateMethod(this, "every", predicate, wrapper, thisArg);
+			return applyPredicateMethod$1(this, "every", predicate, wrapper, thisArg);
 		},
 		filter(predicate, thisArg) {
-			return applyPredicateMethod(this, "filter", predicate, wrapper, thisArg);
+			return applyPredicateMethod$1(this, "filter", predicate, wrapper, thisArg);
 		},
 		find(predicate, thisArg) {
-			return applyPredicateMethod(this, "find", predicate, wrapper, thisArg);
+			return applyPredicateMethod$1(this, "find", predicate, wrapper, thisArg);
 		},
 		findIndex(predicate, thisArg) {
-			return applyPredicateMethod(this, "findIndex", predicate, wrapper, thisArg);
+			return applyPredicateMethod$1(this, "findIndex", predicate, wrapper, thisArg);
 		},
 		findLast(predicate, thisArg) {
-			return applyPredicateMethod(this, "findLast", predicate, wrapper, thisArg);
+			return applyPredicateMethod$1(this, "findLast", predicate, wrapper, thisArg);
 		},
 		findLastIndex(predicate, thisArg) {
-			return applyPredicateMethod(this, "findLastIndex", predicate, wrapper, thisArg);
+			return applyPredicateMethod$1(this, "findLastIndex", predicate, wrapper, thisArg);
 		},
 		forEach(callbackfn, thisArg) {
-			return applyPredicateMethod(this, "forEach", callbackfn, wrapper, thisArg);
+			return applyPredicateMethod$1(this, "forEach", callbackfn, wrapper, thisArg);
 		},
 		includes(...args) {
-			return applySearchMethod(this, "includes", args);
+			return applySearchMethod$1(this, "includes", args);
 		},
 		indexOf(...args) {
-			return applySearchMethod(this, "indexOf", args);
+			return applySearchMethod$1(this, "indexOf", args);
 		},
 		join(separator) {
 			const target = toRaw(this);
@@ -735,10 +689,10 @@ function createArrayHandlers(wrapper) {
 			return target.join(separator);
 		},
 		lastIndexOf(...args) {
-			return applySearchMethod(this, "lastIndexOf", args);
+			return applySearchMethod$1(this, "lastIndexOf", args);
 		},
 		map(callbackFn, thisArg) {
-			return applyPredicateMethod(this, "map", callbackFn, wrapper, thisArg);
+			return applyPredicateMethod$1(this, "map", callbackFn, wrapper, thisArg);
 		},
 		pop() {
 			const target = toRaw(this);
@@ -772,7 +726,7 @@ function createArrayHandlers(wrapper) {
 			return target.shift();
 		},
 		some(predicate, thisArg) {
-			return applyPredicateMethod(this, "some", predicate, wrapper, thisArg);
+			return applyPredicateMethod$1(this, "some", predicate, wrapper, thisArg);
 		},
 		splice(start, deleteCount) {
 			const target = toRaw(this);
@@ -804,12 +758,12 @@ function createArrayHandlers(wrapper) {
 		[Symbol.iterator]() {
 			return this.values();
 		},
-		...createIterableIterator(wrapper)
+		...createIterableIterator$1(wrapper)
 	};
 }
 //#endregion
 //#region src/reactive/map-handlers.ts
-function createMapHandlers(wrapper) {
+function createMapHandlers$1(wrapper) {
 	return {
 		get(key) {
 			const target = toRaw(this);
@@ -853,12 +807,12 @@ function createMapHandlers(wrapper) {
 		[Symbol.iterator]() {
 			return this.entries();
 		},
-		...createIterableIterator(wrapper)
+		...createIterableIterator$1(wrapper)
 	};
 }
 //#endregion
 //#region src/reactive/set-handlers.ts
-function createSetHandlers(wrapper) {
+function createSetHandlers$1(wrapper) {
 	return {
 		add(value) {
 			const target = toRaw(this);
@@ -900,26 +854,57 @@ function createSetHandlers(wrapper) {
 		[Symbol.iterator]() {
 			return this.values();
 		},
-		...createIterableIterator(wrapper)
+		...createIterableIterator$1(wrapper)
 	};
 }
 //#endregion
 //#region src/reactive/reactive.ts
-var reactiveErrorFn = makeError("reactive");
+var reactiveErrorFn$1 = makeError("reactive");
 var rawToProxyCache = /* @__PURE__ */ new WeakMap();
 var proxyToRawCache = /* @__PURE__ */ new WeakMap();
+/**
+* 将响应式对象转换为原始对象
+* @param value 响应式对象
+* @returns 原始对象
+* @example
+* ```tsx
+* const obj = reactive({
+*   name: 'John',
+*   age: 18
+* })
+* console.log(toRaw(obj))
+* ```
+*/
 function toRaw(value) {
 	if (proxyToRawCache.has(value)) return proxyToRawCache.get(value);
 	return value;
 }
+/**
+* 检查对象是否是响应式对象
+* @param value 要检查的对象
+* @returns 是否是响应式对象
+* @example
+* ```tsx
+* const obj = reactive({
+*   name: 'John',
+*   age: 18
+* })
+* console.log(isReactive(obj))
+* ```
+*/
 function isReactive(value) {
 	return proxyToRawCache.has(value);
 }
-var fromInternalWrite = false;
+var fromInternalWrite$1 = false;
+/**
+* 内部写入，用于避免类型为只读的响应式对象写入报错
+* @param fn 要执行的函数
+* @internal
+*/
 function internalWrite(fn) {
-	fromInternalWrite = true;
+	fromInternalWrite$1 = true;
 	fn();
-	fromInternalWrite = false;
+	fromInternalWrite$1 = false;
 }
 var ObjectReactiveHandler = class {
 	isShallow;
@@ -929,14 +914,14 @@ var ObjectReactiveHandler = class {
 		this.isShallow = config.shallow;
 	}
 	set(target, p, newValue, receiver) {
-		if (this.isReadonly && !fromInternalWrite) throw reactiveErrorFn("Object is readonly!");
+		if (this.isReadonly && !fromInternalWrite$1) throw reactiveErrorFn$1("Object is readonly!");
 		const rawValue = toRaw(newValue);
 		const oldValue = target[p];
 		const v = this.isShallow ? newValue : rawValue;
 		if (oldValue === rawValue) return Reflect.set(target, p, v, receiver);
 		const b = Reflect.set(target, p, v, receiver);
-		fromInternalWrite = false;
-		if (hasOwn(target, p)) trigger(target, TriggerOpTypes.Set, p);
+		fromInternalWrite$1 = false;
+		if (hasOwn$1(target, p)) trigger(target, TriggerOpTypes.Set, p);
 		else trigger(target, TriggerOpTypes.Add, p);
 		return b;
 	}
@@ -956,11 +941,11 @@ var ObjectReactiveHandler = class {
 		return Reflect.ownKeys(target);
 	}
 };
-function noReactive(v) {
+function noReactive$1(v) {
 	return v;
 }
 var ArrayReactiveHandler = class extends ObjectReactiveHandler {
-	interceptors = createArrayHandlers(this.isShallow ? noReactive : reactive);
+	interceptors = createArrayHandlers$1(this.isShallow ? noReactive$1 : reactive);
 	constructor(config) {
 		super(config);
 	}
@@ -970,7 +955,7 @@ var ArrayReactiveHandler = class extends ObjectReactiveHandler {
 	}
 };
 var MapReactiveHandler = class extends ObjectReactiveHandler {
-	interceptors = createMapHandlers(this.isShallow ? noReactive : reactive);
+	interceptors = createMapHandlers$1(this.isShallow ? noReactive$1 : reactive);
 	constructor(config) {
 		super(config);
 	}
@@ -984,7 +969,7 @@ var MapReactiveHandler = class extends ObjectReactiveHandler {
 	}
 };
 var SetReactiveHandler = class extends ObjectReactiveHandler {
-	interceptors = createSetHandlers(this.isShallow ? noReactive : reactive);
+	interceptors = createSetHandlers$1(this.isShallow ? noReactive$1 : reactive);
 	constructor(config) {
 		super(config);
 	}
@@ -1017,11 +1002,34 @@ var readonlyProxyHandler = new ObjectReactiveHandler({
 	shallow: true,
 	readonly: true
 });
+function createShallowReadonlyProxy(value) {
+	return new Proxy(value, readonlyProxyHandler);
+}
+/**
+* 创建一个响应式对象
+* @param raw 原始对象
+* @returns 响应式对象
+* @example
+* ```tsx
+* const obj = reactive({
+*   name: 'John',
+*   age: 18,
+*   children: [
+*     {
+*       name: 'Jane',
+*       age: 16
+*     }
+*   ]
+* })
+* console.log(obj.name)
+* console.log(obj.children[0].name)
+* ```
+*/
 function reactive(raw) {
 	if (isReactive(raw)) return raw;
 	let proxy = rawToProxyCache.get(raw);
 	if (proxy) return proxy;
-	switch (getStringType(raw)) {
+	switch (getStringType$1(raw)) {
 		case "[object Object]":
 			proxy = new Proxy(raw, defaultObjectReactiveHandler);
 			break;
@@ -1092,21 +1100,104 @@ var TextAtomType = Symbol("Text");
 var ElementAtomType = Symbol("Element");
 var ComponentAtomType = Symbol("Component");
 //#endregion
-//#region src/base/component.ts
-var componentSetupStack = [];
-var componentErrorFn = makeError("component");
-function getSetupContext(need = true) {
-	const current = componentSetupStack[componentSetupStack.length - 1];
-	if (!current && need) throw componentErrorFn("cannot be called outside the component!");
-	return current;
+//#region src/base/ref.ts
+var refErrorFn$1 = makeError("Ref");
+/**
+* 创建一个动态 ref，当 ref 的绑定的元素或组件初始化后，会调用副作用函数，并把元素或组件的实例作为参数传入。
+* @param effect 用于接收实例的副作用函数，该函数还可以返回一个清理副作用的函数，当元素或组件销毁时调用
+* @returns 一个函数，用于清理副作用
+* @example
+* ```tsx
+* function App() {
+*   const ref = createDynamicRef<HTMLDivElement>((node) => {
+*     console.log(node)
+*     return () => {
+*       console.log('destroy')
+*     }
+*   })
+*   return () => {
+*     return <div ref={ref}>test</div>
+*   }
+* }
+* ```
+*/
+function createDynamicRef(effect) {
+	return effect;
 }
-function toRefs(ref) {
-	return (Array.isArray(ref) ? ref : [ref]).filter((i) => {
-		return i instanceof DynamicRef;
+/**
+* 创建一个引用对象，并添加到 JSX 节点上属性上，当组件渲染后，即可通过 .value 获取到绑定节点的实例
+* - 当绑定到虚拟 DOM 元素节点上时，value 为当前节点的 DOM 元素
+* - 当绑定到组件节点上时，value 为组件函数返回的对象
+* @example
+* ```tsx
+* function App() {
+*   const ref = createRef<HTMLDivElement>()
+*   onMounted(() => {
+*      console.log(ref.value)
+*   })
+*   return () => {
+*     return <div ref={ref}>...</div>
+*   }
+* }
+* ```
+*/
+function createRef() {
+	return createShallowReadonlyProxy({ value: null });
+}
+function applyRefs(ref, value, refEffects) {
+	if (!ref) return;
+	const refs = toRefs(ref);
+	const length = refs.length;
+	for (let i = 0; i < length; i++) bindRefs(refs[i], value, refEffects);
+}
+function updateRefs(ref, value, refEffects) {
+	if (!ref) {
+		refEffects.forEach((fn, oldRef) => {
+			refEffects.delete(oldRef);
+			if (typeof fn === "function") fn();
+		});
+		return;
+	}
+	const newRefs = toRefs(ref);
+	refEffects.forEach((fn, oldRef) => {
+		if (newRefs.includes(oldRef)) return;
+		refEffects.delete(oldRef);
+		if (typeof fn === "function") fn();
 	});
+	const len = newRefs.length;
+	for (let i = 0; i < len; i++) {
+		const newRef = newRefs[i];
+		if (refEffects.has(newRef)) continue;
+		bindRefs(newRef, value, refEffects);
+	}
 }
-function createReadonlyProxy(value) {
-	return new Proxy(value, readonlyProxyHandler);
+function toRefs(ref) {
+	return Array.isArray(ref) ? ref : [ref];
+}
+function bindRefs(ref, value, refEffects) {
+	const type = typeof ref;
+	if (type === "function") {
+		const fn = ref(value);
+		refEffects.set(ref, fn);
+	} else if (type === "object") {
+		internalWrite(() => {
+			ref.value = value;
+		});
+		refEffects.set(ref, () => {
+			internalWrite(() => {
+				ref.value = null;
+			});
+		});
+	} else throw refErrorFn$1("ref must be a function or `Ref<T>` object!");
+}
+//#endregion
+//#region src/base/component.ts
+var componentSetupStack$1 = [];
+var componentErrorFn$1 = makeError("component");
+function getSetupContext(need = true) {
+	const current = componentSetupStack$1[componentSetupStack$1.length - 1];
+	if (!current && need) throw componentErrorFn$1("cannot be called outside the component!");
+	return current;
 }
 /**
 * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
@@ -1133,9 +1224,9 @@ var Component = class {
 		this._dirty = true;
 		this._changed = false;
 		this.isFirstRendering = true;
-		this.refs = null;
 		this.rawProps = props;
-		this.props = createReadonlyProxy({ ...props });
+		this.props = createShallowReadonlyProxy({ ...props });
+		this.refEffects = /* @__PURE__ */ new Map();
 		this.listener = new Dep(() => {
 			this.markAsDirtied();
 		});
@@ -1151,25 +1242,19 @@ var Component = class {
 		if (this.parentComponent) this.parentComponent.markAsChanged(this);
 	}
 	render(update) {
-		componentSetupStack.push(this);
+		componentSetupStack$1.push(this);
 		const render = this.type(this.props);
 		const isRenderFn = typeof render === "function";
 		this.instance = isRenderFn ? { $render: render } : render;
-		const refs = toRefs(this.props.ref);
-		if (refs.length) {
-			this.refs = refs;
-			onMounted(() => {
-				const refs = this.refs;
-				const length = refs.length;
-				for (let i = 0; i < length; i++) refs[i].bind(this.instance);
-				return () => {
-					const refs = this.refs;
-					const length = refs.length;
-					for (let i = 0; i < length; i++) refs[i].unBind(this.instance);
-				};
-			});
-		}
-		componentSetupStack.pop();
+		onMounted(() => {
+			applyRefs(this.props.ref, this.instance, this.refEffects);
+			return () => {
+				this.refEffects.forEach((fn) => {
+					if (typeof fn === "function") fn();
+				});
+			};
+		});
+		componentSetupStack$1.pop();
 		pushDepContext(this.listener);
 		const template = this.instance.$render();
 		popDepContext();
@@ -1179,7 +1264,7 @@ var Component = class {
 	updateProps(newProps) {
 		const oldProps = this.rawProps;
 		this.rawProps = newProps;
-		const newRefs = toRefs(newProps.ref);
+		const newRefs = newProps.ref;
 		comparePropsWithCallbacks(oldProps, newProps, (key) => {
 			internalWrite(() => {
 				Reflect.deleteProperty(oldProps, key);
@@ -1193,22 +1278,7 @@ var Component = class {
 				this.props[key] = value;
 			});
 		});
-		if (this.refs) {
-			const len = this.refs.length;
-			for (let i = 0; i < len; i++) {
-				const oldRef = this.refs[i];
-				if (!newRefs.includes(oldRef)) oldRef.unBind(this.instance);
-			}
-		}
-		const len = newRefs.length;
-		for (let i = 0; i < len; i++) newRefs[i].bind(this.instance);
-		if (len) this.refs = newRefs;
-	}
-	canUpdate(oldProps, newProps) {
-		if (typeof this.instance.$useMemo === "function") {
-			if (this.instance.$useMemo(newProps, oldProps)) return false;
-		}
-		return true;
+		updateRefs(newRefs, this.instance, this.refEffects);
 	}
 	rerender() {
 		this.listener.destroy();
@@ -1270,10 +1340,24 @@ var Component = class {
 };
 /**
 * 获取当前组件实例
+* @returns 当前组件实例
+* @example
+* ```tsx
+* function App() {
+*   const instance = getCurrentInstance()
+*   console.log(instance)
+*   return () => <div>...</div>
+* }
+* ```
 */
 function getCurrentInstance() {
 	return getSetupContext();
 }
+/**
+* 注册组件销毁回调函数
+* @param fn 要注册的回调函数
+* @internal
+*/
 function registryComponentDestroyCallback(fn) {
 	const component = getSetupContext(false);
 	if (component) {
@@ -1377,84 +1461,738 @@ function Portal(props) {
 	};
 }
 //#endregion
-//#region src/reactive/watch.ts
-function watch(trigger, callback) {
-	let prevFn;
-	const dep = new Dep(() => {
-		pushDepContext(dep);
-		const newValue = trigger();
-		popDepContext();
-		if (newValue === oldValue) return;
-		if (prevFn) prevFn();
-		prevFn = callback(newValue, oldValue);
-		oldValue = newValue;
-	});
-	pushDepContext(dep);
-	let oldValue = trigger();
-	popDepContext();
-	dep.destroyCallbacks.push(() => {
-		prevFn?.();
-	});
-	function unWatch() {
-		dep.destroy();
-	}
-	registryComponentDestroyCallback(unWatch);
-	return unWatch;
+//#region dist/index.esm.js
+function makeError$1(name) {
+	return function viewflyError(message) {
+		const error = new Error(message);
+		error.name = `[ViewflyError: ${name}]`;
+		error.stack = error.stack.replace(/\n.*?(?=\n)/, "");
+		return error;
+	};
 }
-//#endregion
-//#region src/base/context.ts
-var injectMap = /* @__PURE__ */ new WeakMap();
-function getInjector(start) {
-	while (start) {
-		const injector = injectMap.get(start);
-		if (injector) return injector;
-		start = start.parentComponent;
-	}
-	return new NullInjector();
+var toStr = Object.prototype.toString;
+function getStringType(v) {
+	return toStr.call(v);
 }
-function createContext(providers, scope, parentInjector) {
-	return function context(props) {
-		const instance = getCurrentInstance();
-		const injector = new ReflectiveInjector(parentInjector || getInjector(instance), providers, scope);
-		injectMap.set(instance, injector);
-		return () => {
-			return props.children;
-		};
-	};
+function isArray(v) {
+	return Array.isArray(v);
 }
-function createContextProvider(params) {
-	return function contextProvider(props) {
-		let Context = createContext([{
-			provide: params.provide,
-			...props
-		}]);
-		watch(() => {
-			return props.useClass || props.useFactory || props.useValue || props.useExisting;
-		}, () => {
-			Context = createContext([{
-				provide: params.provide,
-				...props
-			}]);
-		});
-		return () => {
-			return jsx(Context, { children: props.children });
-		};
-	};
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+function hasOwn(target, key) {
+	return hasOwnProperty.call(target, key);
 }
-/**
-* 通过组件上下文获取 IoC 容器内数据的勾子方法
-*/
-function inject(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
-	return getInjector(getCurrentInstance()).get(token, notFoundValue, flags);
+var Dep$1 = class {
+	destroyCallbacks = [];
+	constructor(effect) {
+		this.effect = effect;
+	}
+	destroy() {
+		this.destroyCallbacks.forEach((callback) => callback());
+		this.destroyCallbacks = [];
+	}
+};
+var deps = [];
+function getDepContext$1() {
+	return deps.at(-1);
 }
-/**
-* 给组件添加注解
-* @param annotation
-* @param componentSetup
-* @example
-* ```ts
-* export customScope = new Scope('scopeName')
-* export const App = withAnnotation({
+function pushDepContext$1(dep) {
+	deps.push(dep);
+}
+function popDepContext$1() {
+	deps.pop();
+}
+var subscribers = /* @__PURE__ */ new WeakMap();
+function getSubscriber(target) {
+	let subscriber = subscribers.get(target);
+	if (!subscriber) {
+		subscriber = /* @__PURE__ */ new Map();
+		subscribers.set(target, subscriber);
+	}
+	return subscriber;
+}
+var TrackOpTypes$1 = /* @__PURE__ */ function(TrackOpTypes) {
+	TrackOpTypes["Get"] = "Get";
+	TrackOpTypes["Has"] = "Has";
+	TrackOpTypes["Iterate"] = "Iterate";
+	return TrackOpTypes;
+}({});
+var TriggerOpTypes$1 = /* @__PURE__ */ function(TriggerOpTypes) {
+	TriggerOpTypes["Set"] = "Set";
+	TriggerOpTypes["Add"] = "Add";
+	TriggerOpTypes["Delete"] = "Delete";
+	TriggerOpTypes["Clear"] = "Clear";
+	return TriggerOpTypes;
+}({});
+var unKnownKey = Symbol("unKnownKey");
+function track$1(target, type, key = unKnownKey) {
+	const dep = getDepContext$1();
+	if (dep) {
+		const subscriber = getSubscriber(target);
+		let record = subscriber.get(type);
+		if (!record) {
+			record = /* @__PURE__ */ new Map();
+			subscriber.set(type, record);
+		}
+		let effects = record.get(key);
+		if (!effects) {
+			effects = new Set([dep]);
+			record.set(key, effects);
+			dep.destroyCallbacks.push(() => {
+				effects.delete(dep);
+			});
+		} else if (!effects.has(dep)) {
+			dep.destroyCallbacks.push(() => {
+				effects.delete(dep);
+			});
+			effects.add(dep);
+		}
+	}
+}
+function runEffect(key, record) {
+	if (!record) return;
+	const effects = record.get(key);
+	if (effects) [...effects].forEach((i) => i.effect());
+}
+function trigger$1(target, type, key = unKnownKey) {
+	const subscriber = getSubscriber(target);
+	if (subscriber) switch (type) {
+		case TriggerOpTypes$1.Set:
+			if (isArray(target)) runEffect(unKnownKey, subscriber.get(TrackOpTypes$1.Iterate));
+			runEffect(key, subscriber.get(TrackOpTypes$1.Get));
+			runEffect(key, subscriber.get(TrackOpTypes$1.Has));
+			break;
+		case TriggerOpTypes$1.Add:
+		case TriggerOpTypes$1.Clear:
+		case TriggerOpTypes$1.Delete:
+			runEffect(unKnownKey, subscriber.get(TrackOpTypes$1.Iterate));
+			runEffect(key, subscriber.get(TrackOpTypes$1.Has));
+			runEffect(key, subscriber.get(TrackOpTypes$1.Get));
+			break;
+	}
+}
+function createIterableIterator(wrapper) {
+	return {
+		*entries() {
+			const target = toRaw$1(this);
+			track$1(target, TrackOpTypes$1.Iterate);
+			for (const [key, value] of target.entries()) yield [wrapper(key), wrapper(value)];
+		},
+		*keys() {
+			const target = toRaw$1(this);
+			track$1(target, TrackOpTypes$1.Iterate);
+			for (const item of target.keys()) yield wrapper(item);
+		},
+		*values() {
+			const target = toRaw$1(this);
+			track$1(target, TrackOpTypes$1.Iterate);
+			for (const item of target.values()) yield wrapper(item);
+		}
+	};
+}
+function applyPredicateMethod(self, methodName, predicate, wrapper, thisArg) {
+	const target = toRaw$1(self);
+	track$1(target, TrackOpTypes$1.Iterate);
+	return target[methodName]((value, index, array) => {
+		return predicate.call(target, wrapper(value), index, array);
+	}, thisArg);
+}
+function applySearchMethod(self, methodName, args) {
+	const target = toRaw$1(self);
+	track$1(target, TrackOpTypes$1.Iterate);
+	return target[methodName](...args.map(toRaw$1));
+}
+function createArrayHandlers(wrapper) {
+	return {
+		concat(...items) {
+			const target = toRaw$1(this);
+			trigger$1(target, TriggerOpTypes$1.Add);
+			return target.concat(...items);
+		},
+		every(predicate, thisArg) {
+			return applyPredicateMethod(this, "every", predicate, wrapper, thisArg);
+		},
+		filter(predicate, thisArg) {
+			return applyPredicateMethod(this, "filter", predicate, wrapper, thisArg);
+		},
+		find(predicate, thisArg) {
+			return applyPredicateMethod(this, "find", predicate, wrapper, thisArg);
+		},
+		findIndex(predicate, thisArg) {
+			return applyPredicateMethod(this, "findIndex", predicate, wrapper, thisArg);
+		},
+		findLast(predicate, thisArg) {
+			return applyPredicateMethod(this, "findLast", predicate, wrapper, thisArg);
+		},
+		findLastIndex(predicate, thisArg) {
+			return applyPredicateMethod(this, "findLastIndex", predicate, wrapper, thisArg);
+		},
+		forEach(callbackfn, thisArg) {
+			return applyPredicateMethod(this, "forEach", callbackfn, wrapper, thisArg);
+		},
+		includes(...args) {
+			return applySearchMethod(this, "includes", args);
+		},
+		indexOf(...args) {
+			return applySearchMethod(this, "indexOf", args);
+		},
+		join(separator) {
+			const target = toRaw$1(this);
+			track$1(target, TrackOpTypes$1.Iterate);
+			return target.join(separator);
+		},
+		lastIndexOf(...args) {
+			return applySearchMethod(this, "lastIndexOf", args);
+		},
+		map(callbackFn, thisArg) {
+			return applyPredicateMethod(this, "map", callbackFn, wrapper, thisArg);
+		},
+		pop() {
+			const target = toRaw$1(this);
+			trigger$1(target, TriggerOpTypes$1.Delete);
+			return target.pop();
+		},
+		push(...items) {
+			const target = toRaw$1(this);
+			trigger$1(target, TriggerOpTypes$1.Add);
+			return target.push(...items);
+		},
+		reduce(callbackFn, ...args) {
+			const target = toRaw$1(this);
+			track$1(target, TrackOpTypes$1.Iterate);
+			return target.reduce((p, c, i, a) => {
+				if (args.length > 0) return callbackFn(p, wrapper(c), i, a);
+				return callbackFn(wrapper(p), wrapper(c), i, a);
+			}, ...args);
+		},
+		reduceRight(callbackFn, ...args) {
+			const target = toRaw$1(this);
+			track$1(target, TrackOpTypes$1.Iterate);
+			return target.reduceRight((p, c, i, a) => {
+				if (args.length > 0) return callbackFn(p, wrapper(c), i, a);
+				return callbackFn(wrapper(p), wrapper(c), i, a);
+			}, ...args);
+		},
+		shift() {
+			const target = toRaw$1(this);
+			trigger$1(target, TriggerOpTypes$1.Delete);
+			return target.shift();
+		},
+		some(predicate, thisArg) {
+			return applyPredicateMethod(this, "some", predicate, wrapper, thisArg);
+		},
+		splice(start, deleteCount) {
+			const target = toRaw$1(this);
+			trigger$1(target, TriggerOpTypes$1.Set);
+			trigger$1(target, TriggerOpTypes$1.Add);
+			trigger$1(target, TriggerOpTypes$1.Delete);
+			return target.splice(start, deleteCount).map((i) => wrapper(i));
+		},
+		toReversed() {
+			const target = toRaw$1(this);
+			track$1(target, TrackOpTypes$1.Iterate);
+			return target.toReversed();
+		},
+		toSorted(compareFn) {
+			const target = toRaw$1(this);
+			track$1(target, TrackOpTypes$1.Iterate);
+			return target.toSorted(compareFn);
+		},
+		toSpliced(start, deleteCount, ...items) {
+			const target = toRaw$1(this);
+			track$1(target, TrackOpTypes$1.Iterate);
+			return target.toSpliced(start, deleteCount, ...items);
+		},
+		unshift(...items) {
+			const target = toRaw$1(this);
+			trigger$1(target, TriggerOpTypes$1.Add);
+			return target.unshift(...items);
+		},
+		[Symbol.iterator]() {
+			return this.values();
+		},
+		...createIterableIterator(wrapper)
+	};
+}
+function createMapHandlers(wrapper) {
+	return {
+		get(key) {
+			const target = toRaw$1(this);
+			track$1(target, TrackOpTypes$1.Get, key);
+			return wrapper(target.get(key));
+		},
+		set(key, value) {
+			const target = toRaw$1(this);
+			key = toRaw$1(key);
+			value = toRaw$1(value);
+			const has = target.has(key);
+			const r = target.set(key, value);
+			trigger$1(target, has ? TriggerOpTypes$1.Set : TriggerOpTypes$1.Add, key);
+			return r;
+		},
+		has(key) {
+			const target = toRaw$1(this);
+			key = toRaw$1(key);
+			track$1(target, TrackOpTypes$1.Has, key);
+			return target.has(key);
+		},
+		delete(key) {
+			const target = toRaw$1(this);
+			key = toRaw$1(key);
+			const r = target.delete(key);
+			trigger$1(target, TriggerOpTypes$1.Delete, key);
+			return r;
+		},
+		forEach(callbackFn, thisArg) {
+			const target = toRaw$1(this);
+			track$1(target, TrackOpTypes$1.Iterate, void 0);
+			target.forEach((v, k, m) => {
+				callbackFn.call(this, wrapper(v), wrapper(k), m);
+			}, thisArg);
+		},
+		clear() {
+			const target = toRaw$1(this);
+			target.clear();
+			trigger$1(target, TriggerOpTypes$1.Clear, void 0);
+		},
+		[Symbol.iterator]() {
+			return this.entries();
+		},
+		...createIterableIterator(wrapper)
+	};
+}
+function createSetHandlers(wrapper) {
+	return {
+		add(value) {
+			const target = toRaw$1(this);
+			value = toRaw$1(value);
+			if (!target.has(value)) {
+				target.add(value);
+				trigger$1(target, TriggerOpTypes$1.Add, void 0);
+			}
+			return this;
+		},
+		delete(value) {
+			const target = toRaw$1(this);
+			value = toRaw$1(value);
+			const has = target.has(value);
+			const b = target.delete(value);
+			if (!has) trigger$1(target, TriggerOpTypes$1.Delete, void 0);
+			return b;
+		},
+		has(key) {
+			const target = toRaw$1(this);
+			key = toRaw$1(key);
+			track$1(target, TrackOpTypes$1.Has, key);
+			return target.has(key);
+		},
+		forEach(callbackFn, thisArg) {
+			const target = toRaw$1(this);
+			track$1(target, TrackOpTypes$1.Iterate, void 0);
+			target.forEach((v, k, m) => {
+				callbackFn.call(this, wrapper(v), wrapper(k), m);
+			}, thisArg);
+		},
+		clear() {
+			const target = toRaw$1(this);
+			if (target.size !== 0) {
+				target.clear();
+				trigger$1(target, TriggerOpTypes$1.Clear, void 0);
+			}
+		},
+		[Symbol.iterator]() {
+			return this.values();
+		},
+		...createIterableIterator(wrapper)
+	};
+}
+var reactiveErrorFn = makeError$1("reactive");
+var rawToProxyCache$1 = /* @__PURE__ */ new WeakMap();
+var proxyToRawCache$1 = /* @__PURE__ */ new WeakMap();
+/**
+* 将响应式对象转换为原始对象
+* @param value 响应式对象
+* @returns 原始对象
+* @example
+* ```tsx
+* const obj = reactive({
+*   name: 'John',
+*   age: 18
+* })
+* console.log(toRaw(obj))
+* ```
+*/
+function toRaw$1(value) {
+	if (proxyToRawCache$1.has(value)) return proxyToRawCache$1.get(value);
+	return value;
+}
+/**
+* 检查对象是否是响应式对象
+* @param value 要检查的对象
+* @returns 是否是响应式对象
+* @example
+* ```tsx
+* const obj = reactive({
+*   name: 'John',
+*   age: 18
+* })
+* console.log(isReactive(obj))
+* ```
+*/
+function isReactive$1(value) {
+	return proxyToRawCache$1.has(value);
+}
+var fromInternalWrite = false;
+var ObjectReactiveHandler$1 = class {
+	isShallow;
+	isReadonly;
+	constructor(config) {
+		this.isReadonly = config.readonly;
+		this.isShallow = config.shallow;
+	}
+	set(target, p, newValue, receiver) {
+		if (this.isReadonly && !fromInternalWrite) throw reactiveErrorFn("Object is readonly!");
+		const rawValue = toRaw$1(newValue);
+		const oldValue = target[p];
+		const v = this.isShallow ? newValue : rawValue;
+		if (oldValue === rawValue) return Reflect.set(target, p, v, receiver);
+		const b = Reflect.set(target, p, v, receiver);
+		fromInternalWrite = false;
+		if (hasOwn(target, p)) trigger$1(target, TriggerOpTypes$1.Set, p);
+		else trigger$1(target, TriggerOpTypes$1.Add, p);
+		return b;
+	}
+	get(target, p, receiver) {
+		track$1(target, TrackOpTypes$1.Get, p);
+		const value = Reflect.get(target, p, receiver);
+		if (this.isShallow) return value;
+		return reactive$1(value);
+	}
+	deleteProperty(target, p) {
+		const b = Reflect.deleteProperty(target, p);
+		trigger$1(target, TriggerOpTypes$1.Delete, p);
+		return b;
+	}
+	ownKeys(target) {
+		track$1(target, TrackOpTypes$1.Iterate);
+		return Reflect.ownKeys(target);
+	}
+};
+function noReactive(v) {
+	return v;
+}
+var ArrayReactiveHandler$1 = class extends ObjectReactiveHandler$1 {
+	interceptors = createArrayHandlers(this.isShallow ? noReactive : reactive$1);
+	constructor(config) {
+		super(config);
+	}
+	get(target, p, receiver) {
+		if (Reflect.has(this.interceptors, p) && p in target) return this.interceptors[p];
+		return super.get(target, p, receiver);
+	}
+};
+var MapReactiveHandler$1 = class extends ObjectReactiveHandler$1 {
+	interceptors = createMapHandlers(this.isShallow ? noReactive : reactive$1);
+	constructor(config) {
+		super(config);
+	}
+	get(target, p, receiver) {
+		if (Reflect.has(this.interceptors, p) && p in target) return this.interceptors[p];
+		if (p === "size") {
+			track$1(target, TrackOpTypes$1.Iterate, p);
+			return Reflect.get(target, p);
+		}
+		return super.get(target, p, receiver);
+	}
+};
+var SetReactiveHandler$1 = class extends ObjectReactiveHandler$1 {
+	interceptors = createSetHandlers(this.isShallow ? noReactive : reactive$1);
+	constructor(config) {
+		super(config);
+	}
+	get(target, p, receiver) {
+		if (Reflect.has(this.interceptors, p) && p in target) return this.interceptors[p];
+		if (p === "size") {
+			track$1(target, TrackOpTypes$1.Iterate, p);
+			return Reflect.get(target, p);
+		}
+		return super.get(target, p, receiver);
+	}
+};
+var defaultObjectReactiveHandler$1 = new ObjectReactiveHandler$1({
+	readonly: false,
+	shallow: false
+});
+var defaultArrayReactiveHandler$1 = new ArrayReactiveHandler$1({
+	readonly: false,
+	shallow: false
+});
+var defaultMapReactiveHandler$1 = new MapReactiveHandler$1({
+	readonly: false,
+	shallow: false
+});
+var defaultSetReactiveHandler$1 = new SetReactiveHandler$1({
+	readonly: false,
+	shallow: false
+});
+new ObjectReactiveHandler$1({
+	shallow: true,
+	readonly: true
+});
+/**
+* 创建一个响应式对象
+* @param raw 原始对象
+* @returns 响应式对象
+* @example
+* ```tsx
+* const obj = reactive({
+*   name: 'John',
+*   age: 18,
+*   children: [
+*     {
+*       name: 'Jane',
+*       age: 16
+*     }
+*   ]
+* })
+* console.log(obj.name)
+* console.log(obj.children[0].name)
+* ```
+*/
+function reactive$1(raw) {
+	if (isReactive$1(raw)) return raw;
+	let proxy = rawToProxyCache$1.get(raw);
+	if (proxy) return proxy;
+	switch (getStringType(raw)) {
+		case "[object Object]":
+			proxy = new Proxy(raw, defaultObjectReactiveHandler$1);
+			break;
+		case "[object Array]":
+			proxy = new Proxy(raw, defaultArrayReactiveHandler$1);
+			break;
+		case "[object Set]":
+		case "[object WeakSet]":
+			proxy = new Proxy(raw, defaultSetReactiveHandler$1);
+			break;
+		case "[object Map]":
+		case "[object WeakMap]":
+			proxy = new Proxy(raw, defaultMapReactiveHandler$1);
+			break;
+		default: return raw;
+	}
+	rawToProxyCache$1.set(raw, proxy);
+	proxyToRawCache$1.set(proxy, raw);
+	return proxy;
+}
+makeError$1("Ref");
+var componentSetupStack = [];
+var componentErrorFn = makeError$1("component");
+function getSetupContext$1(need = true) {
+	const current = componentSetupStack[componentSetupStack.length - 1];
+	if (!current && need) throw componentErrorFn("cannot be called outside the component!");
+	return current;
+}
+/**
+* 注册组件销毁回调函数
+* @param fn 要注册的回调函数
+* @internal
+*/
+function registryComponentDestroyCallback$1(fn) {
+	const component = getSetupContext$1(false);
+	if (component) {
+		if (!component.unmountedCallbacks) component.unmountedCallbacks = [];
+		component.unmountedCallbacks.push(fn);
+	}
+}
+makeError$1("Viewfly");
+new ObjectReactiveHandler$1({
+	readonly: false,
+	shallow: true
+});
+new ArrayReactiveHandler$1({
+	readonly: false,
+	shallow: true
+});
+new MapReactiveHandler$1({
+	readonly: false,
+	shallow: true
+});
+new SetReactiveHandler$1({
+	readonly: false,
+	shallow: true
+});
+//#endregion
+//#region src/reactive/watch-effect.ts
+/**
+* 创建一个 watchEffect，立即执行 effect 函数，当依赖的值发生变化时，会再次执行 effect 函数。
+* watchEffect 会返回一个函数，用于停止监听
+* @param effect 执行的函数
+* @returns 一个函数，用于停止监听
+*/
+function watchEffect(effect) {
+	const dep = new Dep$1(function() {
+		pushDepContext$1(dep);
+		effect();
+		popDepContext$1();
+	});
+	pushDepContext$1(dep);
+	effect();
+	popDepContext$1();
+	function unWatch() {
+		dep.destroy();
+	}
+	registryComponentDestroyCallback$1(unWatch);
+	return unWatch;
+}
+//#endregion
+//#region src/reactive/watch.ts
+/**
+* 创建一个 watch，当依赖的值发生变化时，会执行 callback 函数。
+* watch 会返回一个函数，用于停止监听。
+* @param trigger 触发函数，用于获取依赖的值
+* @param callback 回调函数，当依赖的值发生变化时，会执行 callback 函数
+* @returns 一个函数，用于停止监听
+*/
+function watch(trigger, callback) {
+	const initValue = {};
+	let oldValue = initValue;
+	const unWatch = watchEffect(function() {
+		if (oldValue === initValue) {
+			oldValue = trigger();
+			return;
+		}
+		const newValue = trigger();
+		if (newValue !== oldValue) {
+			callback(newValue, oldValue);
+			oldValue = newValue;
+		}
+	});
+	registryComponentDestroyCallback(unWatch);
+	return unWatch;
+}
+//#endregion
+//#region src/base/context.ts
+var injectMap = /* @__PURE__ */ new WeakMap();
+function getInjector(start) {
+	while (start) {
+		const injector = injectMap.get(start);
+		if (injector) return injector;
+		start = start.parentComponent;
+	}
+	return new NullInjector();
+}
+/**
+* 创建一个上下文，用于在组件之间共享数据
+* @param providers 提供者，用于提供数据
+* @param scope 作用域，用于限制提供者的作用域
+* @param parentInjector 父注入器，用于自定义父注入器，默认从当前组件树中自动获取
+* @returns 一个上下文组件，组件的子元素都可以通过 inject 获取到提供者提供的数据
+* @example
+* ```tsx
+* @Injectable()
+* class ExampleService {}
+*
+* function Child(props) {
+*   const exampleService = inject(ExampleService)
+*   console.log(exampleService)
+*   return () => {
+*     return <div>{props.children}</div>
+*   }
+* }
+* function App() {
+*   const Context = createContext([
+*     ExampleService
+*   ])
+*   return () => {
+*     return <Context>
+*       <Child>test</Child>
+*     </Context>
+*   }
+* }
+* ```
+*/
+function createContext(providers, scope, parentInjector) {
+	return function context(props) {
+		const instance = getCurrentInstance();
+		const injector = new ReflectiveInjector(parentInjector || getInjector(instance), providers, scope);
+		injectMap.set(instance, injector);
+		return () => {
+			return props.children;
+		};
+	};
+}
+/**
+* 创建一个上下文提供者组件，组件的子元素都可以通过 inject 获取到提供者提供的数据
+* @param params 提供者参数
+* @returns 一个上下文提供者组件，组件的子元素都可以通过 inject 获取到提供者提供的数据
+* @example
+* ```tsx
+* const ExampleService = createContextProvider({
+*   provide: ExampleService
+* })
+* 
+* function Child() {
+*   const exampleService = inject(ExampleService)
+*   console.log(exampleService)
+*   return () => {
+*     return <div>{exampleService.name}</div>
+*   }
+* }
+* 
+* function App() {
+*   const value = new ExampleService()
+*   return () => {
+*     return <ExampleService useValue={value}>
+*       <Child/>
+*     </ExampleService>
+*   }
+* }
+*/
+function createContextProvider(params) {
+	return function contextProvider(props) {
+		let Context = createContext([{
+			provide: params.provide,
+			...props
+		}]);
+		watch(() => {
+			return props.useClass || props.useFactory || props.useValue || props.useExisting;
+		}, () => {
+			Context = createContext([{
+				provide: params.provide,
+				...props
+			}]);
+		});
+		return () => {
+			return jsx(Context, { children: props.children });
+		};
+	};
+}
+/**
+* 通过组件上下文获取 IoC 容器内数据的勾子方法
+* @param token 注入的 token
+* @param notFoundValue 未找到时的值
+* @param flags 注入标志
+* @returns 注入的值
+* @example
+* ```tsx
+* function ChildComponent() {
+*   const exampleService = inject(ExampleService)
+*   console.log(exampleService)
+*   return () => {
+*     return <div>{exampleService.name}</div>
+*   }
+* }
+*/
+function inject(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
+	return getInjector(getCurrentInstance()).get(token, notFoundValue, flags);
+}
+/**
+* 给组件添加注解
+* @param annotation
+* @param componentSetup
+* @example
+* ```ts
+* export customScope = new Scope('scopeName')
+* export const App = withAnnotation({
 *   scope: customScope,
 *   providers: [
 *     ExampleService
@@ -1483,21 +2221,9 @@ function withAnnotation(annotation, componentSetup) {
 //#region src/base/injection-tokens.ts
 var NativeRenderer = class {};
 //#endregion
-//#region src/base/memo.ts
-/**
-* @deprecated 即将弃用，Viewfly 默认就有 memo 的效果
-* @param canUseMemo
-* @param render
-*/
-function withMemo(canUseMemo, render) {
-	return {
-		$useMemo: canUseMemo,
-		$render: render
-	};
-}
-//#endregion
 //#region src/base/renderer.ts
 var listenerReg = /^on[A-Z]/;
+var nativeNodeRefRecord = /* @__PURE__ */ new Map();
 function createRenderer(component, nativeRenderer, namespace) {
 	let isInit = true;
 	return function render(host) {
@@ -1542,21 +2268,19 @@ function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, contex
 }
 function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
 	if (component.dirty) {
-		if (component.canUpdate(component.props, component.props)) {
-			const { atom, host, isParent, rootHost } = component.viewMetadata;
-			const context = {
-				host,
-				isParent,
-				rootHost
-			};
-			const diffAtom = atom.child;
-			patchComponent(nativeRenderer, component, diffAtom, atom, context, needMove);
-			const next = atom.sibling;
-			if (next && next.jsxNode instanceof Component) {
-				const view = next.jsxNode.viewMetadata;
-				view.host = context.host;
-				view.isParent = context.isParent;
-			}
+		const { atom, host, isParent, rootHost } = component.viewMetadata;
+		const context = {
+			host,
+			isParent,
+			rootHost
+		};
+		const diffAtom = atom.child;
+		patchComponent(nativeRenderer, component, diffAtom, atom, context, needMove);
+		const next = atom.sibling;
+		if (next && next.jsxNode instanceof Component) {
+			const view = next.jsxNode.viewMetadata;
+			view.host = context.host;
+			view.isParent = context.isParent;
 		}
 		component.rendered();
 	} else if (component.changed) {
@@ -1663,10 +2387,9 @@ function updateComponent(nativeRenderer, context, offset, needMove, newAtom, old
 	const newProps = newAtom.jsxNode.props;
 	newAtom.jsxNode = component;
 	needMove = needMove || newAtom.index - offset !== oldAtom.index;
-	const canUpdate = component.canUpdate(component.props, newProps);
 	const propsIsChanged = hasChange(newProps, component.props);
 	if (propsIsChanged) component.updateProps(newProps);
-	if (canUpdate && (propsIsChanged || component.dirty)) {
+	if (propsIsChanged || component.dirty) {
 		patchComponent(nativeRenderer, component, oldAtom.child, newAtom, context, needMove);
 		const next = oldAtom.sibling;
 		if (next && next.jsxNode instanceof Component) {
@@ -1676,7 +2399,7 @@ function updateComponent(nativeRenderer, context, offset, needMove, newAtom, old
 		}
 	} else {
 		newAtom.child = oldAtom.child;
-		reuseComponentView(nativeRenderer, newAtom.child, context, needMove, !canUpdate || !component.changedSubComponents.size);
+		reuseComponentView(nativeRenderer, newAtom.child, context, needMove, !component.changedSubComponents.size);
 	}
 	component.rendered();
 }
@@ -1727,8 +2450,10 @@ function cleanView(nativeRenderer, atom, needClean) {
 		needClean = false;
 	}
 	if (atom.type === ElementAtomType) {
-		const ref = atom.jsxNode.props["ref"];
-		applyRefs(ref, atom.nativeNode, false);
+		const record = nativeNodeRefRecord.get(atom);
+		if (record) record.forEach((fn) => {
+			if (typeof fn === "function") fn();
+		});
 	}
 	cleanChildren(atom, nativeRenderer, needClean);
 }
@@ -1852,7 +2577,9 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
 	});
 	context.host = nativeNode;
 	context.isParent = false;
-	applyRefs(bindingRefs, nativeNode, true);
+	const refEffects = /* @__PURE__ */ new Map();
+	nativeNodeRefRecord.set(atom, refEffects);
+	applyRefs(bindingRefs, nativeNode, refEffects);
 }
 function createTextNode(nativeRenderer, atom, context) {
 	const nativeNode = nativeRenderer.createTextNode(atom.jsxNode, atom.namespace);
@@ -1871,7 +2598,6 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 		reuseElementChildrenView(nativeRenderer, newAtom, context);
 		return;
 	}
-	let unBindRefs;
 	let bindRefs;
 	let updatedChildren = false;
 	comparePropsWithCallbacks(oldVNode.props, newVNode.props, (key, oldValue) => {
@@ -1892,10 +2618,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			if (typeof oldValue === "function") nativeRenderer.unListen(nativeNode, key, oldValue, isSvg);
 			return;
 		}
-		if (key === "ref") {
-			unBindRefs = oldValue;
-			return;
-		}
+		if (key === "ref") return;
 		nativeRenderer.removeProperty(nativeNode, key, isSvg);
 	}, (key, value) => {
 		if (key === "children") {
@@ -1953,26 +2676,17 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "ref") {
-			unBindRefs = oldValue;
 			bindRefs = newValue;
 			return;
 		}
 		nativeRenderer.setProperty(nativeNode, key, newValue, isSvg);
 	});
 	if (!updatedChildren) newAtom.child = oldAtom.child;
-	applyRefs(unBindRefs, nativeNode, false);
-	applyRefs(bindRefs, nativeNode, true);
-}
-function applyRefs(refs, nativeNode, binding) {
-	if (refs) {
-		const refList = Array.isArray(refs) ? refs : [refs];
-		const len = refList.length;
-		for (let i = 0; i < len; i++) {
-			const item = refList[i];
-			if (item instanceof DynamicRef) if (binding) item.bind(nativeNode);
-			else item.unBind(nativeNode);
-		}
-	}
+	let refEffects = nativeNodeRefRecord.get(oldAtom);
+	if (!refEffects) refEffects = /* @__PURE__ */ new Map();
+	nativeNodeRefRecord.delete(oldAtom);
+	nativeNodeRefRecord.set(newAtom, refEffects);
+	updateRefs(bindRefs, nativeNode, refEffects);
 }
 //#endregion
 //#region src/base/root.component.ts
@@ -2056,39 +2770,16 @@ function viewfly(config) {
 }
 //#endregion
 //#region src/reactive/computed.ts
-function computed(callback, isContinue) {
-	let isStop = false;
-	const dep = new Dep(() => {
-		if (isStop) return;
-		isStop = true;
-		dep.destroy();
-		pushDepContext(dep);
-		const value = callback();
-		popDepContext();
-		internalWrite(() => {
-			proxy.value = value;
-		});
-		canListen(value);
-		isStop = false;
-	});
-	pushDepContext(dep);
-	const value = callback();
-	popDepContext();
-	const proxy = new Proxy({ value }, readonlyProxyHandler);
-	function canListen(value) {
-		if (isContinue) {
-			if (isContinue(value) === false) {
-				dep.destroy();
-				return false;
-			}
-		}
-		return true;
-	}
-	if (!canListen(value)) return proxy;
-	registryComponentDestroyCallback(() => {
-		dep.destroy();
-	});
-	return proxy;
+/**
+* 创建一个 computed，当依赖的值发生变化时，会重新计算值。
+* computed 会返回一个对象，对象的 value 属性是计算的值。
+* @param getter 计算函数，用于计算值
+* @returns 一个对象，对象的 value 属性是计算的值
+*/
+function computed(getter) {
+	return { get value() {
+		return getter();
+	} };
 }
 //#endregion
 //#region src/reactive/shallow-reactive.ts
@@ -2112,7 +2803,7 @@ function shallowReactive(raw) {
 	if (isReactive(raw)) return raw;
 	let proxy = rawToProxyCache.get(raw);
 	if (proxy) return proxy;
-	switch (getStringType(raw)) {
+	switch (getStringType$1(raw)) {
 		case "[object Object]":
 			proxy = new Proxy(raw, defaultShallowObjectReactiveHandler);
 			break;
@@ -2134,7 +2825,7 @@ function shallowReactive(raw) {
 	return proxy;
 }
 //#endregion
-//#region src/signals/signal.ts
+//#region src/reactive/signal.ts
 /**
 * 组件状态管理器
 * @param state 初始状态
@@ -2159,92 +2850,19 @@ function shallowReactive(raw) {
 * }
 */
 function createSignal(state) {
-	const subscribers = /* @__PURE__ */ new Set();
+	const ref = shallowReactive({ value: state });
 	function signal() {
-		const listener = getDepContext();
-		if (listener && !subscribers.has(listener)) {
-			listener.destroyCallbacks.push(() => {
-				subscribers.delete(listener);
-			});
-			subscribers.add(listener);
-		}
-		return state;
+		return ref.value;
 	}
 	signal.set = function(newValue) {
-		if (newValue === state) return;
-		state = newValue;
-		Array.from(subscribers).forEach((listener) => listener.effect());
+		ref.value = newValue;
 	};
 	return signal;
 }
 //#endregion
-//#region src/signals/derived.ts
-/**
-* 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
-* 并在你获取 createDerived 函数返回的 Signal 的值时，自动计算最新的值。
-*
-* @param fn
-* @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
-*/
-function createDerived(fn, isContinue) {
-	let isStop = false;
-	function canListen(value) {
-		if (isContinue) {
-			if (isContinue(value) === false) {
-				listener.destroy();
-				return false;
-			}
-		}
-		return true;
-	}
-	const listener = new Dep(() => {
-		if (isStop) return;
-		isStop = true;
-		listener.destroy();
-		pushDepContext(listener);
-		const value = fn();
-		popDepContext();
-		signal.set(value);
-		canListen(value);
-		isStop = false;
-	});
-	pushDepContext(listener);
-	const value = fn();
-	const signal = createSignal(value);
-	popDepContext();
-	isStop = false;
-	if (canListen(value)) registryComponentDestroyCallback(() => listener.destroy());
-	return signal;
-}
-//#endregion
-//#region src/signals/effect.ts
-function createEffect(deps, callback) {
-	let prevFn;
-	const isArray = Array.isArray(deps);
-	const effect = new Dep(function() {
-		if (prevFn) prevFn();
-		const newValue = isArray ? deps.map((fn) => fn()) : deps();
-		prevFn = callback(newValue, oldValue);
-		oldValue = newValue;
-	});
-	pushDepContext(effect);
-	let oldValue = isArray ? deps.map((fn) => fn()) : deps();
-	popDepContext();
-	let isUnWatch = false;
-	function unWatch() {
-		if (isUnWatch) return;
-		isUnWatch = true;
-		if (prevFn) prevFn();
-		effect.destroy();
-	}
-	registryComponentDestroyCallback(unWatch);
-	return unWatch;
-}
-//#endregion
 exports.ArrayReactiveHandler = ArrayReactiveHandler;
 exports.Component = Component;
 exports.Dep = Dep;
-exports.DynamicRef = DynamicRef;
 exports.ForwardRef = ForwardRef;
 exports.Fragment = Fragment;
 exports.Inject = Inject;
@@ -2266,21 +2884,20 @@ exports.Scope = Scope;
 exports.Self = Self;
 exports.SetReactiveHandler = SetReactiveHandler;
 exports.SkipSelf = SkipSelf;
-exports.StaticRef = StaticRef;
 exports.THROW_IF_NOT_FOUND = THROW_IF_NOT_FOUND;
 exports.TrackOpTypes = TrackOpTypes;
 exports.TriggerOpTypes = TriggerOpTypes;
 exports.Type = Type;
 exports.applyMark = applyMark;
+exports.applyRefs = applyRefs;
 exports.comparePropsWithCallbacks = comparePropsWithCallbacks;
 exports.computed = computed;
 exports.createContext = createContext;
 exports.createContextProvider = createContextProvider;
-exports.createDerived = createDerived;
 exports.createDynamicRef = createDynamicRef;
-exports.createEffect = createEffect;
 exports.createRef = createRef;
 exports.createRenderer = createRenderer;
+exports.createShallowReadonlyProxy = createShallowReadonlyProxy;
 exports.createSignal = createSignal;
 exports.defaultArrayReactiveHandler = defaultArrayReactiveHandler;
 exports.defaultMapReactiveHandler = defaultMapReactiveHandler;
@@ -2315,8 +2932,9 @@ exports.shallowReactive = shallowReactive;
 exports.toRaw = toRaw;
 exports.track = track;
 exports.trigger = trigger;
+exports.updateRefs = updateRefs;
 exports.viewfly = viewfly;
 exports.watch = watch;
+exports.watchEffect = watchEffect;
 exports.withAnnotation = withAnnotation;
 exports.withMark = withMark;
-exports.withMemo = withMemo;