@viewfly/core 3.0.0-alpha.2 → 3.0.0-alpha.3

package/dist/index.js

@@ -210,7 +210,7 @@ var NullInjector = class {
 * @param provider
 */
 function normalizeProvider(provider) {
-	if (provider.useValue) return normalizeValueProviderFactory(provider);
+	if (Object.prototype.hasOwnProperty.call(provider, "useValue")) return normalizeValueProviderFactory(provider);
 	if (provider.useClass) return normalizeClassProviderFactory(provider);
 	if (provider.useExisting) return normalizeExistingProviderFactory(provider);
 	if (provider.useFactory) return normalizeFactoryProviderFactory(provider);
@@ -346,13 +346,14 @@ var provideScopeError = (token) => {
 * 反射注入器
 */
 var ReflectiveInjector = class {
-	normalizedProviders;
+	normalizedProviders = /* @__PURE__ */ new Map();
 	recordValues = /* @__PURE__ */ new Map();
 	constructor(parentInjector, staticProviders, scope) {
 		this.parentInjector = parentInjector;
 		this.scope = scope;
-		this.normalizedProviders = staticProviders.map((provide) => {
-			return normalizeProvider(provide);
+		staticProviders.forEach((provide) => {
+			const normalizedProvider = normalizeProvider(provide);
+			this.normalizedProviders.set(normalizedProvider.provide, normalizedProvider);
 		});
 	}
 	/**
@@ -369,22 +370,20 @@ var ReflectiveInjector = class {
 			throw reflectiveInjectorErrorFn(token);
 		}
 		if (this.recordValues.has(token)) return this.recordValues.get(token);
-		for (let i = 0; i < this.normalizedProviders.length; i++) {
-			const normalizedProvider = this.normalizedProviders[i];
-			if (normalizedProvider.provide === token) return this.getValue(token, normalizedProvider);
-		}
+		const normalizedProvider = this.normalizedProviders.get(token);
+		if (normalizedProvider) return this.getValue(token, normalizedProvider);
 		if (!(token instanceof InjectionToken)) {
 			const scope = getAnnotations(token).getClassMetadata(Injectable)?.metadata.provideIn;
 			if (scope) {
 				const normalizedProvider = normalizeProvider(token);
 				if (this.scope === scope) {
-					this.normalizedProviders.push(normalizedProvider);
+					this.normalizedProviders.set(normalizedProvider.provide, normalizedProvider);
 					return this.getValue(token, normalizedProvider);
 				}
 				const parentInjector = this.parentInjector;
 				if (!parentInjector || parentInjector instanceof NullInjector) {
 					if (normalizedProvider.scope === "root") {
-						this.normalizedProviders.push(normalizedProvider);
+						this.normalizedProviders.set(normalizedProvider.provide, normalizedProvider);
 						return this.getValue(token, normalizedProvider);
 					}
 					if (notFoundValue !== THROW_IF_NOT_FOUND) return notFoundValue;
@@ -403,9 +402,8 @@ var ReflectiveInjector = class {
 	getValue(token, normalizedProvider) {
 		const { generateFactory, deps } = normalizedProvider;
 		const params = this.resolveDeps(deps);
-		let value = this.recordValues.get(token);
-		if (value) return value;
-		value = generateFactory(this, (token, value) => {
+		if (this.recordValues.has(token)) return this.recordValues.get(token);
+		const value = generateFactory(this, (token, value) => {
 			this.recordValues.set(token, value);
 		})(...params);
 		this.recordValues.set(token, value);
@@ -510,47 +508,89 @@ function onUnmounted(callback) {
 }
 //#endregion
 //#region src/reactive/_help.ts
-var toStr$1 = Object.prototype.toString;
-function getStringType$1(v) {
-	return toStr$1.call(v);
+var toStr = Object.prototype.toString;
+function getStringType(v) {
+	return toStr.call(v);
 }
-function isArray$1(v) {
+function isArray(v) {
 	return Array.isArray(v);
 }
-var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
-function hasOwn$1(target, key) {
-	return hasOwnProperty$1.call(target, key);
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+function hasOwn(target, key) {
+	return hasOwnProperty.call(target, key);
 }
 //#endregion
 //#region src/base/dep.ts
 var Dep = class {
 	destroyCallbacks = [];
-	constructor(effect) {
+	constructor(effect, flushMode = "sync") {
 		this.effect = effect;
+		this.flushMode = flushMode;
 	}
 	destroy() {
 		this.destroyCallbacks.forEach((callback) => callback());
 		this.destroyCallbacks = [];
 	}
 };
-var deps$1 = [];
+var deps = [];
 function getDepContext() {
-	return deps$1.at(-1);
+	return deps[deps.length - 1];
 }
 function pushDepContext(dep) {
-	deps$1.push(dep);
+	deps.push(dep);
 }
 function popDepContext() {
-	deps$1.pop();
+	deps.pop();
 }
 //#endregion
 //#region src/reactive/effect.ts
-var subscribers$1 = /* @__PURE__ */ new WeakMap();
-function getSubscriber$1(target) {
-	let subscriber = subscribers$1.get(target);
+var subscribers = /* @__PURE__ */ new WeakMap();
+var pendingDeps = /* @__PURE__ */ new Set();
+var isFlushScheduled = false;
+var effectErrorFn = makeError("Effect");
+function scheduleDep(dep) {
+	if (dep.flushMode === "sync") {
+		dep.effect();
+		return;
+	}
+	pendingDeps.add(dep);
+	if (!isFlushScheduled) {
+		isFlushScheduled = true;
+		queueMicrotask(flushPendingDeps);
+	}
+}
+function flushPendingDeps() {
+	try {
+		while (pendingDeps.size > 0) {
+			const deps = Array.from(pendingDeps);
+			pendingDeps.clear();
+			deps.forEach((dep) => {
+				dep.effect();
+			});
+		}
+	} finally {
+		isFlushScheduled = false;
+		if (pendingDeps.size > 0) {
+			isFlushScheduled = true;
+			queueMicrotask(flushPendingDeps);
+		}
+	}
+}
+function nextTick() {
+	return Promise.resolve();
+}
+/**
+* 同步清空响应式调度队列。
+* @internal 仅用于框架内部桥接与测试控制，不建议业务代码使用。
+*/
+function flushReactiveEffectsSync() {
+	flushPendingDeps();
+}
+function getSubscriber(target) {
+	let subscriber = subscribers.get(target);
 	if (!subscriber) {
 		subscriber = /* @__PURE__ */ new Map();
-		subscribers$1.set(target, subscriber);
+		subscribers.set(target, subscriber);
 	}
 	return subscriber;
 }
@@ -565,13 +605,21 @@ var TriggerOpTypes = /* @__PURE__ */ function(TriggerOpTypes) {
 	TriggerOpTypes["Add"] = "Add";
 	TriggerOpTypes["Delete"] = "Delete";
 	TriggerOpTypes["Clear"] = "Clear";
+	TriggerOpTypes["Iterate"] = "Iterate";
 	return TriggerOpTypes;
 }({});
-var unKnownKey$1 = Symbol("unKnownKey");
-function track(target, type, key = unKnownKey$1) {
+var unKnownKey = Symbol("unKnownKey");
+function cleanupEmptyEffects(target, type, key, effects, record, subscriber) {
+	if (effects.size > 0) return;
+	record.delete(key);
+	if (record.size > 0) return;
+	subscriber.delete(type);
+	if (subscriber.size === 0) subscribers.delete(target);
+}
+function track(target, type, key = unKnownKey) {
 	const dep = getDepContext();
 	if (dep) {
-		const subscriber = getSubscriber$1(target);
+		const subscriber = getSubscriber(target);
 		let record = subscriber.get(type);
 		if (!record) {
 			record = /* @__PURE__ */ new Map();
@@ -583,40 +631,124 @@ function track(target, type, key = unKnownKey$1) {
 			record.set(key, effects);
 			dep.destroyCallbacks.push(() => {
 				effects.delete(dep);
+				cleanupEmptyEffects(target, type, key, effects, record, subscriber);
 			});
 		} else if (!effects.has(dep)) {
 			dep.destroyCallbacks.push(() => {
 				effects.delete(dep);
+				cleanupEmptyEffects(target, type, key, effects, record, subscriber);
 			});
 			effects.add(dep);
 		}
 	}
 }
-function runEffect$1(key, record) {
+function runEffect(key, record) {
 	if (!record) return;
 	const effects = record.get(key);
-	if (effects) [...effects].forEach((i) => i.effect());
+	if (effects) [...effects].forEach((dep) => scheduleDep(dep));
 }
-function trigger(target, type, key = unKnownKey$1) {
-	const subscriber = getSubscriber$1(target);
-	if (subscriber) switch (type) {
+function collectAllEffects(record, effectSet) {
+	if (!record) return;
+	record.forEach((effects) => {
+		effects.forEach((effect) => {
+			effectSet.add(effect);
+		});
+	});
+}
+function trigger(target, type, key = unKnownKey) {
+	const subscriber = subscribers.get(target);
+	if (!subscriber) return;
+	if (isArray(target)) {
+		switch (type) {
+			case TriggerOpTypes.Set:
+				runEffect(key, subscriber.get(TrackOpTypes.Get));
+				runEffect(key, subscriber.get(TrackOpTypes.Has));
+				break;
+			case TriggerOpTypes.Iterate:
+				runEffect(key, subscriber.get(TrackOpTypes.Iterate));
+				break;
+			case TriggerOpTypes.Delete:
+				runEffect(key, subscriber.get(TrackOpTypes.Get));
+				runEffect(key, subscriber.get(TrackOpTypes.Has));
+				break;
+			default: throw effectErrorFn(`trigger: type '${type}' is not supported`);
+		}
+		return;
+	}
+	if (target instanceof Map || target instanceof WeakMap) {
+		switch (type) {
+			case TriggerOpTypes.Set:
+			case TriggerOpTypes.Add:
+				runEffect(key, subscriber.get(TrackOpTypes.Get));
+				runEffect(key, subscriber.get(TrackOpTypes.Has));
+				break;
+			case TriggerOpTypes.Iterate:
+				runEffect(key, subscriber.get(TrackOpTypes.Iterate));
+				break;
+			case TriggerOpTypes.Delete:
+				runEffect(key, subscriber.get(TrackOpTypes.Get));
+				runEffect(key, subscriber.get(TrackOpTypes.Has));
+				runEffect(key, subscriber.get(TrackOpTypes.Iterate));
+				break;
+			case TriggerOpTypes.Clear: {
+				const effects = /* @__PURE__ */ new Set();
+				collectAllEffects(subscriber.get(TrackOpTypes.Get), effects);
+				collectAllEffects(subscriber.get(TrackOpTypes.Has), effects);
+				collectAllEffects(subscriber.get(TrackOpTypes.Iterate), effects);
+				effects.forEach((effect) => scheduleDep(effect));
+				break;
+			}
+			default: throw effectErrorFn(`trigger: type '${type}' is not supported`);
+		}
+		return;
+	}
+	if (target instanceof Set || target instanceof WeakSet) {
+		switch (type) {
+			case TriggerOpTypes.Add:
+				runEffect(key, subscriber.get(TrackOpTypes.Get));
+				runEffect(key, subscriber.get(TrackOpTypes.Has));
+				break;
+			case TriggerOpTypes.Iterate:
+				runEffect(key, subscriber.get(TrackOpTypes.Iterate));
+				break;
+			case TriggerOpTypes.Delete:
+				runEffect(key, subscriber.get(TrackOpTypes.Get));
+				runEffect(key, subscriber.get(TrackOpTypes.Has));
+				runEffect(key, subscriber.get(TrackOpTypes.Iterate));
+				break;
+			case TriggerOpTypes.Clear: {
+				const effects = /* @__PURE__ */ new Set();
+				collectAllEffects(subscriber.get(TrackOpTypes.Get), effects);
+				collectAllEffects(subscriber.get(TrackOpTypes.Has), effects);
+				collectAllEffects(subscriber.get(TrackOpTypes.Iterate), effects);
+				effects.forEach((effect) => scheduleDep(effect));
+				break;
+			}
+			default: throw effectErrorFn(`trigger: type '${type}' is not supported`);
+		}
+		return;
+	}
+	switch (type) {
+		case TriggerOpTypes.Add:
+			runEffect(key, subscriber.get(TrackOpTypes.Get));
+			runEffect(key, subscriber.get(TrackOpTypes.Has));
+			break;
 		case TriggerOpTypes.Set:
-			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));
+			runEffect(key, subscriber.get(TrackOpTypes.Get));
 			break;
-		case TriggerOpTypes.Add:
-		case TriggerOpTypes.Clear:
 		case TriggerOpTypes.Delete:
-			runEffect$1(unKnownKey$1, subscriber.get(TrackOpTypes.Iterate));
-			runEffect$1(key, subscriber.get(TrackOpTypes.Has));
-			runEffect$1(key, subscriber.get(TrackOpTypes.Get));
+			runEffect(key, subscriber.get(TrackOpTypes.Get));
+			runEffect(key, subscriber.get(TrackOpTypes.Has));
+			break;
+		case TriggerOpTypes.Iterate:
+			runEffect(key, subscriber.get(TrackOpTypes.Iterate));
 			break;
+		default: throw effectErrorFn(`trigger: type '${type}' is not supported`);
 	}
 }
 //#endregion
 //#region src/reactive/iterable-iterator.ts
-function createIterableIterator$1(wrapper) {
+function createIterableIterator(wrapper) {
 	return {
 		*entries() {
 			const target = toRaw(this);
@@ -637,51 +769,54 @@ function createIterableIterator$1(wrapper) {
 }
 //#endregion
 //#region src/reactive/array-handlers.ts
-function applyPredicateMethod$1(self, methodName, predicate, wrapper, thisArg) {
+function applyPredicateMethod(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);
+	return target[methodName]((value, index) => {
+		return predicate.call(thisArg, wrapper(value), index, self);
 	}, thisArg);
 }
-function applySearchMethod$1(self, methodName, args) {
+function applySearchMethod(self, methodName, args) {
 	const target = toRaw(self);
 	track(target, TrackOpTypes.Iterate);
 	return target[methodName](...args.map(toRaw));
 }
-function createArrayHandlers$1(wrapper) {
+function triggerArrayByRange(target, startIndex, endIndex) {
+	for (; startIndex < endIndex; startIndex++) trigger(target, TriggerOpTypes.Set, startIndex + "");
+}
+function createArrayHandlers(wrapper) {
 	return {
 		concat(...items) {
 			const target = toRaw(this);
-			trigger(target, TriggerOpTypes.Add);
+			track(target, TrackOpTypes.Iterate);
 			return target.concat(...items);
 		},
 		every(predicate, thisArg) {
-			return applyPredicateMethod$1(this, "every", predicate, wrapper, thisArg);
+			return applyPredicateMethod(this, "every", predicate, wrapper, thisArg);
 		},
 		filter(predicate, thisArg) {
-			return applyPredicateMethod$1(this, "filter", predicate, wrapper, thisArg);
+			return applyPredicateMethod(this, "filter", predicate, wrapper, thisArg);
 		},
 		find(predicate, thisArg) {
-			return applyPredicateMethod$1(this, "find", predicate, wrapper, thisArg);
+			return applyPredicateMethod(this, "find", predicate, wrapper, thisArg);
 		},
 		findIndex(predicate, thisArg) {
-			return applyPredicateMethod$1(this, "findIndex", predicate, wrapper, thisArg);
+			return applyPredicateMethod(this, "findIndex", predicate, wrapper, thisArg);
 		},
 		findLast(predicate, thisArg) {
-			return applyPredicateMethod$1(this, "findLast", predicate, wrapper, thisArg);
+			return applyPredicateMethod(this, "findLast", predicate, wrapper, thisArg);
 		},
 		findLastIndex(predicate, thisArg) {
-			return applyPredicateMethod$1(this, "findLastIndex", predicate, wrapper, thisArg);
+			return applyPredicateMethod(this, "findLastIndex", predicate, wrapper, thisArg);
 		},
 		forEach(callbackfn, thisArg) {
-			return applyPredicateMethod$1(this, "forEach", callbackfn, wrapper, thisArg);
+			return applyPredicateMethod(this, "forEach", callbackfn, wrapper, thisArg);
 		},
 		includes(...args) {
-			return applySearchMethod$1(this, "includes", args);
+			return applySearchMethod(this, "includes", args);
 		},
 		indexOf(...args) {
-			return applySearchMethod$1(this, "indexOf", args);
+			return applySearchMethod(this, "indexOf", args);
 		},
 		join(separator) {
 			const target = toRaw(this);
@@ -689,20 +824,30 @@ function createArrayHandlers$1(wrapper) {
 			return target.join(separator);
 		},
 		lastIndexOf(...args) {
-			return applySearchMethod$1(this, "lastIndexOf", args);
+			return applySearchMethod(this, "lastIndexOf", args);
 		},
 		map(callbackFn, thisArg) {
-			return applyPredicateMethod$1(this, "map", callbackFn, wrapper, thisArg);
+			return applyPredicateMethod(this, "map", callbackFn, wrapper, thisArg);
 		},
 		pop() {
 			const target = toRaw(this);
-			trigger(target, TriggerOpTypes.Delete);
-			return target.pop();
+			const oldLength = target.length;
+			const value = target.pop();
+			const newLength = target.length;
+			if (newLength < oldLength) {
+				trigger(target, TriggerOpTypes.Set, newLength + "");
+				trigger(target, TriggerOpTypes.Set, "length");
+				trigger(target, TriggerOpTypes.Iterate);
+			}
+			return value;
 		},
 		push(...items) {
 			const target = toRaw(this);
-			trigger(target, TriggerOpTypes.Add);
-			return target.push(...items);
+			const oldLength = target.length;
+			const length = target.push(...items);
+			triggerArrayByRange(target, oldLength, length);
+			trigger(target, TriggerOpTypes.Iterate);
+			return length;
 		},
 		reduce(callbackFn, ...args) {
 			const target = toRaw(this);
@@ -722,18 +867,27 @@ function createArrayHandlers$1(wrapper) {
 		},
 		shift() {
 			const target = toRaw(this);
-			trigger(target, TriggerOpTypes.Delete);
-			return target.shift();
+			const oldLength = target.length;
+			const value = target.shift();
+			if (target.length < oldLength) {
+				triggerArrayByRange(target, 0, oldLength);
+				trigger(target, TriggerOpTypes.Set, "length");
+				trigger(target, TriggerOpTypes.Iterate);
+			}
+			return value;
 		},
 		some(predicate, thisArg) {
-			return applyPredicateMethod$1(this, "some", predicate, wrapper, thisArg);
+			return applyPredicateMethod(this, "some", predicate, wrapper, thisArg);
 		},
-		splice(start, deleteCount) {
+		splice(start, ...items) {
 			const target = toRaw(this);
-			trigger(target, TriggerOpTypes.Set);
-			trigger(target, TriggerOpTypes.Add);
-			trigger(target, TriggerOpTypes.Delete);
-			return target.splice(start, deleteCount).map((i) => wrapper(i));
+			const oldLength = target.length;
+			const deleted = target.splice(start, ...items).map((i) => wrapper(i));
+			const newLength = target.length;
+			triggerArrayByRange(target, start, Math.max(oldLength, newLength));
+			if (oldLength !== newLength) trigger(target, TriggerOpTypes.Set, "length");
+			trigger(target, TriggerOpTypes.Iterate);
+			return deleted;
 		},
 		toReversed() {
 			const target = toRaw(this);
@@ -752,20 +906,24 @@ function createArrayHandlers$1(wrapper) {
 		},
 		unshift(...items) {
 			const target = toRaw(this);
-			trigger(target, TriggerOpTypes.Add);
-			return target.unshift(...items);
+			const length = target.unshift(...items);
+			triggerArrayByRange(target, 0, length);
+			trigger(target, TriggerOpTypes.Set, "length");
+			trigger(target, TriggerOpTypes.Iterate);
+			return length;
 		},
 		[Symbol.iterator]() {
 			return this.values();
 		},
-		...createIterableIterator$1(wrapper)
+		...createIterableIterator(wrapper)
 	};
 }
 //#endregion
 //#region src/reactive/map-handlers.ts
-function createMapHandlers$1(wrapper) {
+function createMapHandlers(wrapper) {
 	return {
 		get(key) {
+			key = toRaw(key);
 			const target = toRaw(this);
 			track(target, TrackOpTypes.Get, key);
 			return wrapper(target.get(key));
@@ -775,8 +933,11 @@ function createMapHandlers$1(wrapper) {
 			key = toRaw(key);
 			value = toRaw(value);
 			const has = target.has(key);
+			const oldValue = has ? target.get(key) : void 0;
+			if (has && Object.is(oldValue, value)) return this;
 			const r = target.set(key, value);
 			trigger(target, has ? TriggerOpTypes.Set : TriggerOpTypes.Add, key);
+			if (!has) trigger(target, TriggerOpTypes.Iterate);
 			return r;
 		},
 		has(key) {
@@ -790,45 +951,50 @@ function createMapHandlers$1(wrapper) {
 			key = toRaw(key);
 			const r = target.delete(key);
 			trigger(target, TriggerOpTypes.Delete, key);
+			if (r) trigger(target, TriggerOpTypes.Iterate);
 			return r;
 		},
 		forEach(callbackFn, thisArg) {
 			const target = toRaw(this);
-			track(target, TrackOpTypes.Iterate, void 0);
+			track(target, TrackOpTypes.Iterate);
 			target.forEach((v, k, m) => {
-				callbackFn.call(this, wrapper(v), wrapper(k), m);
+				callbackFn.call(thisArg, wrapper(v), wrapper(k), m);
 			}, thisArg);
 		},
 		clear() {
 			const target = toRaw(this);
+			if (target.size === 0) return;
 			target.clear();
-			trigger(target, TriggerOpTypes.Clear, void 0);
+			trigger(target, TriggerOpTypes.Clear);
 		},
 		[Symbol.iterator]() {
 			return this.entries();
 		},
-		...createIterableIterator$1(wrapper)
+		...createIterableIterator(wrapper)
 	};
 }
 //#endregion
 //#region src/reactive/set-handlers.ts
-function createSetHandlers$1(wrapper) {
+function createSetHandlers(wrapper) {
 	return {
 		add(value) {
 			const target = toRaw(this);
 			value = toRaw(value);
 			if (!target.has(value)) {
 				target.add(value);
-				trigger(target, TriggerOpTypes.Add, void 0);
+				trigger(target, TriggerOpTypes.Add, value);
+				trigger(target, TriggerOpTypes.Iterate);
 			}
 			return this;
 		},
 		delete(value) {
 			const target = toRaw(this);
 			value = toRaw(value);
-			const has = target.has(value);
 			const b = target.delete(value);
-			if (!has) trigger(target, TriggerOpTypes.Delete, void 0);
+			if (b) {
+				trigger(target, TriggerOpTypes.Delete, value);
+				trigger(target, TriggerOpTypes.Iterate);
+			}
 			return b;
 		},
 		has(key) {
@@ -839,29 +1005,31 @@ function createSetHandlers$1(wrapper) {
 		},
 		forEach(callbackFn, thisArg) {
 			const target = toRaw(this);
-			track(target, TrackOpTypes.Iterate, void 0);
+			track(target, TrackOpTypes.Iterate);
 			target.forEach((v, k, m) => {
-				callbackFn.call(this, wrapper(v), wrapper(k), m);
+				callbackFn.call(thisArg, wrapper(v), wrapper(k), m);
 			}, thisArg);
 		},
 		clear() {
 			const target = toRaw(this);
 			if (target.size !== 0) {
 				target.clear();
-				trigger(target, TriggerOpTypes.Clear, void 0);
+				trigger(target, TriggerOpTypes.Clear);
 			}
 		},
 		[Symbol.iterator]() {
 			return this.values();
 		},
-		...createIterableIterator$1(wrapper)
+		...createIterableIterator(wrapper)
 	};
 }
 //#endregion
 //#region src/reactive/reactive.ts
-var reactiveErrorFn$1 = makeError("reactive");
+var reactiveErrorFn = makeError("reactive");
 var rawToProxyCache = /* @__PURE__ */ new WeakMap();
 var proxyToRawCache = /* @__PURE__ */ new WeakMap();
+var shallowRawToProxyCache = /* @__PURE__ */ new WeakMap();
+var shallowProxyToRawCache = /* @__PURE__ */ new WeakMap();
 /**
 * 将响应式对象转换为原始对象
 * @param value 响应式对象
@@ -877,6 +1045,7 @@ var proxyToRawCache = /* @__PURE__ */ new WeakMap();
 */
 function toRaw(value) {
 	if (proxyToRawCache.has(value)) return proxyToRawCache.get(value);
+	if (shallowProxyToRawCache.has(value)) return shallowProxyToRawCache.get(value);
 	return value;
 }
 /**
@@ -893,18 +1062,24 @@ function toRaw(value) {
 * ```
 */
 function isReactive(value) {
-	return proxyToRawCache.has(value);
+	return proxyToRawCache.has(value) || shallowProxyToRawCache.has(value);
+}
+var internalWriteDepth = 0;
+function isInternalWriting() {
+	return internalWriteDepth > 0;
 }
-var fromInternalWrite$1 = false;
 /**
 * 内部写入，用于避免类型为只读的响应式对象写入报错
 * @param fn 要执行的函数
 * @internal
 */
 function internalWrite(fn) {
-	fromInternalWrite$1 = true;
-	fn();
-	fromInternalWrite$1 = false;
+	internalWriteDepth++;
+	try {
+		fn();
+	} finally {
+		internalWriteDepth--;
+	}
 }
 var ObjectReactiveHandler = class {
 	isShallow;
@@ -914,69 +1089,114 @@ var ObjectReactiveHandler = class {
 		this.isShallow = config.shallow;
 	}
 	set(target, p, newValue, receiver) {
-		if (this.isReadonly && !fromInternalWrite$1) throw reactiveErrorFn$1("Object is readonly!");
+		if (this.isReadonly && !isInternalWriting()) throw reactiveErrorFn("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);
+		if (Object.is(oldValue, rawValue)) return Reflect.set(target, p, v, receiver);
+		const has = hasOwn(target, p);
 		const b = Reflect.set(target, p, v, receiver);
-		fromInternalWrite$1 = false;
-		if (hasOwn$1(target, p)) trigger(target, TriggerOpTypes.Set, p);
-		else trigger(target, TriggerOpTypes.Add, p);
+		if (has) trigger(target, TriggerOpTypes.Set, p);
+		else {
+			trigger(target, TriggerOpTypes.Add, p);
+			trigger(target, TriggerOpTypes.Iterate);
+		}
 		return b;
 	}
 	get(target, p, receiver) {
 		track(target, TrackOpTypes.Get, p);
 		const value = Reflect.get(target, p, receiver);
-		if (this.isShallow) return value;
+		if (this.isShallow || !value || typeof value !== "object") return value;
 		return reactive(value);
 	}
 	deleteProperty(target, p) {
+		if (this.isReadonly && !isInternalWriting()) throw reactiveErrorFn("Object is readonly!");
+		const has = hasOwn(target, p);
 		const b = Reflect.deleteProperty(target, p);
-		trigger(target, TriggerOpTypes.Delete, p);
+		if (b && has) {
+			trigger(target, TriggerOpTypes.Delete, p);
+			trigger(target, TriggerOpTypes.Iterate);
+		}
 		return b;
 	}
 	ownKeys(target) {
 		track(target, TrackOpTypes.Iterate);
 		return Reflect.ownKeys(target);
 	}
+	has(target, p) {
+		track(target, TrackOpTypes.Has, p);
+		return Reflect.has(target, p);
+	}
 };
-function noReactive$1(v) {
+function noReactive(v) {
 	return v;
 }
 var ArrayReactiveHandler = class extends ObjectReactiveHandler {
-	interceptors = createArrayHandlers$1(this.isShallow ? noReactive$1 : reactive);
+	interceptors = createArrayHandlers(this.isShallow ? noReactive : reactive);
 	constructor(config) {
 		super(config);
 	}
 	get(target, p, receiver) {
 		if (Reflect.has(this.interceptors, p) && p in target) return this.interceptors[p];
+		if (p === "length") {
+			track(target, TrackOpTypes.Iterate);
+			return Reflect.get(target, p, receiver);
+		}
 		return super.get(target, p, receiver);
 	}
+	set(target, p, newValue, receiver) {
+		if (this.isReadonly && !isInternalWriting()) throw reactiveErrorFn("Object is readonly!");
+		if (p === "length") {
+			const oldLength = target.length;
+			const b = super.set(target, p, newValue, receiver);
+			const newLength = target.length;
+			if (newLength < oldLength) triggerArrayByRange(target, newLength, oldLength);
+			if (oldLength !== newLength) trigger(target, TriggerOpTypes.Iterate);
+			return b;
+		}
+		const rawValue = toRaw(newValue);
+		const oldValue = target[p];
+		const v = this.isShallow ? newValue : rawValue;
+		if (Object.is(oldValue, rawValue)) return Reflect.set(target, p, v, receiver);
+		const oldLength = target.length;
+		const b = Reflect.set(target, p, v, receiver);
+		const newLength = target.length;
+		trigger(target, TriggerOpTypes.Set, p);
+		trigger(target, TriggerOpTypes.Iterate);
+		if (newLength > oldLength) trigger(target, TriggerOpTypes.Set, "length");
+		return b;
+	}
+	deleteProperty(target, p) {
+		if (this.isReadonly && !isInternalWriting()) throw reactiveErrorFn("Object is readonly!");
+		const has = hasOwn(target, p);
+		const b = Reflect.deleteProperty(target, p);
+		if (b && has) trigger(target, TriggerOpTypes.Delete, p);
+		return b;
+	}
 };
 var MapReactiveHandler = class extends ObjectReactiveHandler {
-	interceptors = createMapHandlers$1(this.isShallow ? noReactive$1 : reactive);
+	interceptors = createMapHandlers(this.isShallow ? noReactive : reactive);
 	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(target, TrackOpTypes.Iterate, p);
+			track(target, TrackOpTypes.Iterate);
 			return Reflect.get(target, p);
 		}
 		return super.get(target, p, receiver);
 	}
 };
 var SetReactiveHandler = class extends ObjectReactiveHandler {
-	interceptors = createSetHandlers$1(this.isShallow ? noReactive$1 : reactive);
+	interceptors = createSetHandlers(this.isShallow ? noReactive : reactive);
 	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(target, TrackOpTypes.Iterate, p);
+			track(target, TrackOpTypes.Iterate);
 			return Reflect.get(target, p);
 		}
 		return super.get(target, p, receiver);
@@ -1029,7 +1249,7 @@ function reactive(raw) {
 	if (isReactive(raw)) return raw;
 	let proxy = rawToProxyCache.get(raw);
 	if (proxy) return proxy;
-	switch (getStringType$1(raw)) {
+	switch (getStringType(raw)) {
 		case "[object Object]":
 			proxy = new Proxy(raw, defaultObjectReactiveHandler);
 			break;
@@ -1064,17 +1284,9 @@ function hasChange(newProps, oldProps) {
 	return false;
 }
 function comparePropsWithCallbacks(oldProps, newProps, onDeleted, onAdded, onUpdated) {
-	const oldKeys = Object.keys(oldProps);
-	for (let i = 0; i < oldKeys.length; i++) {
-		const key = oldKeys[i];
-		if (!(key in newProps)) onDeleted(key, oldProps[key]);
-	}
-	const newKeys = Object.keys(newProps);
-	for (let i = 0; i < newKeys.length; i++) {
-		const key = newKeys[i];
-		if (!(key in oldProps)) onAdded(key, newProps[key]);
-		else if (oldProps[key] !== newProps[key]) onUpdated(key, newProps[key], oldProps[key]);
-	}
+	for (const key in oldProps) if (!(key in newProps)) onDeleted(key, oldProps[key]);
+	for (const key in newProps) if (!(key in oldProps)) onAdded(key, newProps[key]);
+	else if (oldProps[key] !== newProps[key]) onUpdated(key, newProps[key], oldProps[key]);
 }
 function classToString(config) {
 	if (typeof config === "string") return config;
@@ -1109,7 +1321,7 @@ var ElementAtomType = Symbol("Element");
 var ComponentAtomType = Symbol("Component");
 //#endregion
 //#region src/base/ref.ts
-var refErrorFn$1 = makeError("Ref");
+var refErrorFn = makeError("Ref");
 /**
 * 创建一个动态 ref，当 ref 的绑定的元素或组件初始化后，会调用副作用函数，并把元素或组件的实例作为参数传入。
 * @param effect 用于接收实例的副作用函数，该函数还可以返回一个清理副作用的函数，当元素或组件销毁时调用
@@ -1128,6 +1340,30 @@ var refErrorFn$1 = makeError("Ref");
 *   }
 * }
 * ```
+* @example
+* ```tsx
+* function Child() {
+*   return {
+*     show() {
+*       console.log('show')
+*     },
+*     render() {
+*       return <div>child</div>
+*     }
+*   }
+* }
+* function App() {
+*   const ref = createDynamicRef<typeof Child>((child) => {
+*     child.show()
+*     return () => {
+*       console.log('destroy')
+*     }
+*   })
+*   return () => {
+*     return <Child ref={ref}/>
+*   }
+* }
+* ```
 */
 function createDynamicRef(effect) {
 	return effect;
@@ -1148,6 +1384,28 @@ function createDynamicRef(effect) {
 *   }
 * }
 * ```
+* @example
+* ```tsx
+* function Child() {
+*   return {
+*     show() {
+*       console.log('show')
+*     },
+*     render() {
+*       return <div>child</div>
+*     }
+*   }
+* }
+* function App() {
+*   const ref = createRef<typeof Child>()
+*   onMounted(() => {
+*      ref.value?.show()
+*   })
+*   return () => {
+*     return <Child ref={ref}/>
+*   }
+* }
+* ```
 */
 function createRef() {
 	return createShallowReadonlyProxy({ value: null });
@@ -1196,15 +1454,15 @@ function bindRefs(ref, value, refEffects) {
 				ref.value = null;
 			});
 		});
-	} else throw refErrorFn$1("ref must be a function or `Ref<T>` object!");
+	} else throw refErrorFn("ref must be a function or `Ref<T>` object!");
 }
 //#endregion
 //#region src/base/component.ts
-var componentSetupStack$1 = [];
-var componentErrorFn$1 = makeError("component");
+var componentSetupStack = [];
+var componentErrorFn = 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!");
+	const current = componentSetupStack[componentSetupStack.length - 1];
+	if (!current && need) throw componentErrorFn("cannot be called outside the component!");
 	return current;
 }
 /**
@@ -1237,7 +1495,7 @@ var Component = class {
 		this.refEffects = /* @__PURE__ */ new Map();
 		this.listener = new Dep(() => {
 			this.markAsDirtied();
-		});
+		}, "async");
 	}
 	markAsDirtied() {
 		this._dirty = true;
@@ -1250,10 +1508,10 @@ var Component = class {
 		if (this.parentComponent) this.parentComponent.markAsChanged(this);
 	}
 	render(update) {
-		componentSetupStack$1.push(this);
+		componentSetupStack.push(this);
 		const render = this.type(this.props);
 		const isRenderFn = typeof render === "function";
-		this.instance = isRenderFn ? { $render: render } : render;
+		this.instance = isRenderFn ? { render } : render;
 		onMounted(() => {
 			applyRefs(this.props.ref, this.instance, this.refEffects);
 			return () => {
@@ -1262,11 +1520,11 @@ var Component = class {
 				});
 			};
 		});
-		componentSetupStack$1.pop();
+		componentSetupStack.pop();
 		pushDepContext(this.listener);
-		const template = this.instance.$render();
+		const template = this.instance.render();
 		popDepContext();
-		update(template, this.instance.$portalHost);
+		update(template);
 		this.rendered();
 	}
 	updateProps(newProps) {
@@ -1291,7 +1549,7 @@ var Component = class {
 	rerender() {
 		this.listener.destroy();
 		pushDepContext(this.listener);
-		const template = this.instance.$render();
+		const template = this.instance.render();
 		popDepContext();
 		return template;
 	}
@@ -1374,6 +1632,18 @@ function registryComponentDestroyCallback(fn) {
 	}
 }
 //#endregion
+//#region src/base/_render-context.ts
+var containerStack = [];
+function pushContainer(container) {
+	containerStack.push(container);
+}
+function popContainer() {
+	containerStack.pop();
+}
+function getContainer() {
+	return containerStack[containerStack.length - 1];
+}
+//#endregion
 //#region src/base/jsx-element.ts
 function Fragment(props) {
 	return () => {
@@ -1411,8 +1681,8 @@ function withMark(marks, setup) {
 		if (typeof componentRenderFn === "function") return function() {
 			return applyMark(marks, componentRenderFn);
 		};
-		const oldRender = componentRenderFn.$render;
-		componentRenderFn.$render = function() {
+		const oldRender = componentRenderFn.render;
+		componentRenderFn.render = function() {
 			return applyMark(marks, () => {
 				return oldRender.call(componentRenderFn);
 			});
@@ -1451,7 +1721,7 @@ function applyMark(mark, render) {
 *   return () => {
 *     return (
 *       <div>
-*         <Portal host={modal}>
+*         <Portal container={modal}>
 *           这里的内容将渲染到 modal 节点
 *         </Portal>
 *       </div>
@@ -1461,632 +1731,76 @@ function applyMark(mark, render) {
 * ```
 */
 function Portal(props) {
-	return {
-		$portalHost: props.host,
-		$render() {
-			return props.children;
-		}
-	};
+	return { render() {
+		pushContainer(props.container);
+		return props.children;
+	} };
 }
 //#endregion
-//#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;
-	};
-}
-var toStr = Object.prototype.toString;
-function getStringType(v) {
-	return toStr.call(v);
-}
-function isArray(v) {
-	return Array.isArray(v);
-}
-var hasOwnProperty = Object.prototype.hasOwnProperty;
-function hasOwn(target, key) {
-	return hasOwnProperty.call(target, key);
-}
-var Dep$1 = class {
-	destroyCallbacks = [];
-	constructor(effect) {
-		this.effect = effect;
+//#region src/reactive/watch-effect.ts
+/**
+* 创建一个 watchEffect，立即执行 effect 函数，当依赖的值发生变化时，会再次执行 effect 函数。
+* watchEffect 会返回一个函数，用于停止监听
+* @param effect 执行的函数
+* @returns 一个函数，用于停止监听
+*/
+function watchEffect(effect) {
+	const dep = new Dep(function() {
+		pushDepContext(dep);
+		try {
+			effect();
+		} finally {
+			popDepContext();
+		}
+	}, "async");
+	pushDepContext(dep);
+	try {
+		effect();
+	} finally {
+		popDepContext();
 	}
-	destroy() {
-		this.destroyCallbacks.forEach((callback) => callback());
-		this.destroyCallbacks = [];
+	function unWatch() {
+		dep.destroy();
 	}
-};
-var deps = [];
-function getDepContext$1() {
-	return deps.at(-1);
-}
-function pushDepContext$1(dep) {
-	deps.push(dep);
+	registryComponentDestroyCallback(unWatch);
+	return unWatch;
 }
-function popDepContext$1() {
-	deps.pop();
+//#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 (!Object.is(newValue, oldValue)) {
+			callback(newValue, oldValue);
+			oldValue = newValue;
+		}
+	});
+	registryComponentDestroyCallback(unWatch);
+	return unWatch;
 }
-var subscribers = /* @__PURE__ */ new WeakMap();
-function getSubscriber(target) {
-	let subscriber = subscribers.get(target);
-	if (!subscriber) {
-		subscriber = /* @__PURE__ */ new Map();
-		subscribers.set(target, subscriber);
+//#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 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();
+	return new NullInjector();
 }
 /**
 * 创建一个上下文，用于在组件之间共享数据
@@ -2234,7 +1948,7 @@ var listenerReg = /^on[A-Z]/;
 var nativeNodeRefRecord = /* @__PURE__ */ new WeakMap();
 function createRenderer(component, nativeRenderer, namespace) {
 	let isInit = true;
-	return function render(host) {
+	return function render(container) {
 		if (isInit) {
 			isInit = false;
 			componentRender(nativeRenderer, component, {
@@ -2248,8 +1962,8 @@ function createRenderer(component, nativeRenderer, namespace) {
 				namespace
 			}, {
 				isParent: true,
-				host,
-				rootHost: host
+				container,
+				rootContainer: container
 			});
 		} else deepUpdateByComponentDirtyTree(nativeRenderer, component, false);
 	};
@@ -2271,23 +1985,40 @@ function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
 	}
 }
 function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, context, needMove) {
-	newAtom.child = createChildChain(component.rerender(), nativeRenderer, newAtom.namespace);
+	const oldContainer = component.viewMetadata.container;
+	const expectContainer = component.viewMetadata.expectContainer;
+	const newTemplate = component.rerender();
+	const portalContainer = getContainer();
+	popContainer();
+	if (portalContainer && portalContainer !== expectContainer) context = {
+		isParent: true,
+		container: portalContainer,
+		rootContainer: portalContainer
+	};
+	component.viewMetadata = {
+		atom: newAtom,
+		expectContainer,
+		...context
+	};
+	if (oldContainer !== context.container) needMove = true;
+	newAtom.child = createChildChain(newTemplate, nativeRenderer, newAtom.namespace);
 	diff(nativeRenderer, component, newAtom.child, oldChildAtom, context, needMove);
+	return context;
 }
 function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
 	if (component.dirty) {
-		const { atom, host, isParent, rootHost } = component.viewMetadata;
+		const { atom, container, isParent, rootContainer } = component.viewMetadata;
 		const context = {
-			host,
+			container,
 			isParent,
-			rootHost
+			rootContainer
 		};
 		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.container = context.container;
 			view.isParent = context.isParent;
 		}
 		component.rendered();
@@ -2298,85 +2029,24 @@ function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
 		component.rendered();
 	}
 }
-function createOldAtomMatcher(oldAtoms) {
-	const typeMap = /* @__PURE__ */ new Map();
-	const cursorMap = /* @__PURE__ */ new WeakMap();
-	for (let i = 0; i < oldAtoms.length; i++) {
-		const atom = oldAtoms[i];
-		let nodeTypeMap = typeMap.get(atom.type);
-		if (!nodeTypeMap) {
-			nodeTypeMap = /* @__PURE__ */ new Map();
-			typeMap.set(atom.type, nodeTypeMap);
-		}
-		let keyMap = nodeTypeMap.get(atom.nodeType);
-		if (!keyMap) {
-			keyMap = /* @__PURE__ */ new Map();
-			nodeTypeMap.set(atom.nodeType, keyMap);
-		}
-		const key = atom.key;
-		const indices = keyMap.get(key);
-		if (indices) indices.push(i);
-		else keyMap.set(key, [i]);
-	}
-	const take = (atom, matched) => {
-		const nodeTypeMap = typeMap.get(atom.type);
-		if (!nodeTypeMap) return -1;
-		const keyMap = nodeTypeMap.get(atom.nodeType);
-		if (!keyMap) return -1;
-		const indices = keyMap.get(atom.key);
-		if (!indices || !indices.length) return -1;
-		let cursor = cursorMap.get(indices) ?? 0;
-		while (cursor < indices.length) {
-			const index = indices[cursor];
-			cursor++;
-			if (!matched[index]) {
-				cursorMap.set(indices, cursor);
-				return index;
-			}
-		}
-		cursorMap.set(indices, cursor);
-		return -1;
-	};
-	return { take };
-}
 function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMove) {
 	const commits = [];
-	const oldAtoms = [];
+	while (newAtom) {
+		oldAtom = createChanges(newAtom, oldAtom, commits);
+		newAtom = newAtom.sibling;
+	}
 	let dirtyDiffAtom = oldAtom;
 	while (dirtyDiffAtom) {
-		oldAtoms.push(dirtyDiffAtom);
+		cleanView(nativeRenderer, dirtyDiffAtom, true);
 		dirtyDiffAtom = dirtyDiffAtom.sibling;
 	}
-	const matched = new Array(oldAtoms.length).fill(false);
-	const matcher = createOldAtomMatcher(oldAtoms);
-	const pendingDeleteIndices = [];
-	let cursor = newAtom;
-	while (cursor) {
-		const matchedIndex = matcher.take(cursor, matched);
-		if (matchedIndex >= 0) {
-			matched[matchedIndex] = true;
-			commits.push({
-				dirtyAtom: oldAtoms[matchedIndex],
-				newAtom: cursor
-			});
-		} else commits.push({
-			dirtyAtom: null,
-			newAtom: cursor
-		});
-		cursor = cursor.sibling;
-	}
-	for (let i = 0; i < oldAtoms.length; i++) if (!matched[i]) {
-		pendingDeleteIndices.push(i);
-		cleanView(nativeRenderer, oldAtoms[i], true);
-	}
 	let offset = 0;
-	let pendingDeleteCursor = 0;
 	const len = commits.length;
 	for (let i = 0; i < len; i++) {
-		while (pendingDeleteCursor < pendingDeleteIndices.length) {
-			if (oldAtoms[pendingDeleteIndices[pendingDeleteCursor]].index <= i) {
+		while (oldAtom) {
+			if (oldAtom.index <= i) {
 				offset--;
-				pendingDeleteCursor++;
+				oldAtom = oldAtom.sibling;
 				continue;
 			}
 			break;
@@ -2399,51 +2069,69 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMo
 		}
 	}
 }
+function createChanges(newAtom, oldAtom, commits) {
+	const startDiffAtom = oldAtom;
+	let prev = null;
+	while (oldAtom) {
+		if (oldAtom.type === newAtom.type && oldAtom.nodeType === newAtom.nodeType && oldAtom.key === newAtom.key) {
+			commits.push({
+				dirtyAtom: oldAtom,
+				newAtom
+			});
+			const next = oldAtom.sibling;
+			if (!prev) return next;
+			prev.sibling = next;
+			return startDiffAtom;
+		}
+		prev = oldAtom;
+		oldAtom = oldAtom.sibling;
+	}
+	commits.push({
+		dirtyAtom: null,
+		newAtom
+	});
+	return startDiffAtom;
+}
 function updateText(nativeRenderer, context, offset, needMove, newAtom, oldAtom) {
 	const nativeNode = oldAtom.nativeNode;
 	newAtom.nativeNode = nativeNode;
 	if (needMove || newAtom.index - offset !== oldAtom.index) insertNode(nativeRenderer, newAtom, context);
-	context.host = nativeNode;
+	context.container = nativeNode;
 	context.isParent = false;
 }
 function updateElement(nativeRenderer, context, parentComponent, offset, needMove, newAtom, oldAtom) {
 	const nativeNode = oldAtom.nativeNode;
 	newAtom.nativeNode = nativeNode;
 	if (needMove || newAtom.index - offset !== oldAtom.index) insertNode(nativeRenderer, newAtom, context);
-	context.host = nativeNode;
+	context.container = nativeNode;
 	context.isParent = false;
 	updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, {
-		host: nativeNode,
+		container: nativeNode,
 		isParent: true,
-		rootHost: context.rootHost
+		rootContainer: context.rootContainer
 	});
 }
 function updateComponent(nativeRenderer, context, offset, needMove, newAtom, oldAtom) {
 	const component = oldAtom.jsxNode;
-	const portalHost = component.instance.$portalHost;
-	context = portalHost ? {
-		isParent: true,
-		host: portalHost,
-		rootHost: portalHost
-	} : context;
-	component.viewMetadata = {
-		atom: newAtom,
-		...context
-	};
 	const newProps = newAtom.jsxNode.props;
 	newAtom.jsxNode = component;
 	needMove = needMove || newAtom.index - offset !== oldAtom.index;
 	const propsIsChanged = hasChange(newProps, component.props);
 	if (propsIsChanged) component.updateProps(newProps);
 	if (propsIsChanged || component.dirty) {
-		patchComponent(nativeRenderer, component, oldAtom.child, newAtom, context, needMove);
+		const updatedContext = patchComponent(nativeRenderer, component, oldAtom.child, newAtom, context, needMove);
 		const next = oldAtom.sibling;
 		if (next && next.jsxNode instanceof Component) {
 			const view = next.jsxNode.viewMetadata;
-			view.host = context.host;
-			view.isParent = context.isParent;
+			view.container = updatedContext.container;
+			view.isParent = updatedContext.isParent;
 		}
 	} else {
+		component.viewMetadata = {
+			atom: newAtom,
+			expectContainer: component.viewMetadata.expectContainer,
+			...context
+		};
 		newAtom.child = oldAtom.child;
 		reuseComponentView(nativeRenderer, newAtom.child, context, needMove, !component.changedSubComponents.size);
 	}
@@ -2459,7 +2147,7 @@ function reuseComponentView(nativeRenderer, child, context, moveView, skipSubCom
 			if (moveView) insertNode(nativeRenderer, atom, context);
 			if (!skipSubComponentDiff) reuseElementChildrenView(nativeRenderer, atom, context);
 			context.isParent = false;
-			context.host = atom.nativeNode;
+			context.container = atom.nativeNode;
 		}
 	};
 	while (child) {
@@ -2486,7 +2174,7 @@ function cleanElementChildren(atom, nativeRenderer) {
 function cleanView(nativeRenderer, atom, needClean) {
 	if (atom.type === ComponentAtomType) {
 		const jsxNode = atom.jsxNode;
-		if (jsxNode.instance.$portalHost) needClean = true;
+		if (jsxNode.viewMetadata.container !== jsxNode.viewMetadata.expectContainer) needClean = true;
 		cleanChildren(atom, nativeRenderer, needClean);
 		jsxNode.destroy();
 		return;
@@ -2514,15 +2202,19 @@ function cleanChildren(atom, nativeRenderer, needClean) {
 	}
 }
 function componentRender(nativeRenderer, component, from, context) {
-	component.render((template, portalHost) => {
+	component.render((template) => {
+		const portalContainer = getContainer();
+		popContainer();
 		from.child = createChildChain(template, nativeRenderer, from.namespace);
-		context = portalHost ? {
+		const expectContainer = context.container;
+		context = portalContainer && portalContainer !== context.container ? {
 			isParent: true,
-			host: portalHost,
-			rootHost: portalHost
+			container: portalContainer,
+			rootContainer: portalContainer
 		} : context;
 		component.viewMetadata = {
 			atom: from,
+			expectContainer,
 			...context
 		};
 		let child = from.child;
@@ -2579,9 +2271,9 @@ function createChildChain(template, nativeRenderer, namespace) {
 	return beforeAtom.sibling;
 }
 function insertNode(nativeRenderer, atom, context) {
-	if (context.isParent) if (context.host === context.rootHost) nativeRenderer.appendChild(context.host, atom.nativeNode, atom.namespace);
-	else nativeRenderer.prependChild(context.host, atom.nativeNode, atom.namespace);
-	else nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.namespace);
+	if (context.isParent) if (context.container === context.rootContainer) nativeRenderer.appendChild(context.container, atom.nativeNode, atom.namespace);
+	else nativeRenderer.prependChild(context.container, atom.nativeNode, atom.namespace);
+	else nativeRenderer.insertAfter(atom.nativeNode, context.container, atom.namespace);
 }
 function createElementChildren(type, children, nativeRenderer, namespace) {
 	return createChildChain(children, nativeRenderer, nativeRenderer.getNameSpace(type, namespace));
@@ -2591,10 +2283,7 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
 	const nativeNode = nativeRenderer.createElement(jsxNode.type, namespace);
 	const props = jsxNode.props;
 	let bindingRefs;
-	const propKeys = Object.keys(props);
-	const propKeyLen = propKeys.length;
-	for (let i = 0; i < propKeyLen; i++) {
-		const key = propKeys[i];
+	for (const key in props) {
 		if (key === "children") {
 			atom.child = createElementChildren(jsxNode.type, props.children, nativeRenderer, namespace);
 			continue;
@@ -2624,10 +2313,10 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
 	insertNode(nativeRenderer, atom, context);
 	buildElementChildren(atom, nativeRenderer, parentComponent, {
 		isParent: true,
-		host: nativeNode,
-		rootHost: context.rootHost
+		container: nativeNode,
+		rootContainer: context.rootContainer
 	});
-	context.host = nativeNode;
+	context.container = nativeNode;
 	context.isParent = false;
 	if (bindingRefs) {
 		const refEffects = /* @__PURE__ */ new Map();
@@ -2639,7 +2328,7 @@ function createTextNode(nativeRenderer, atom, context) {
 	const nativeNode = nativeRenderer.createTextNode(atom.jsxNode, atom.namespace);
 	atom.nativeNode = nativeNode;
 	insertNode(nativeRenderer, atom, context);
-	context.host = nativeNode;
+	context.container = nativeNode;
 	context.isParent = false;
 }
 function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context) {
@@ -2655,17 +2344,6 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 	let unBindRefs;
 	let bindRefs;
 	let updatedChildren = false;
-	const styleCache = /* @__PURE__ */ new WeakMap();
-	const toStyleObject = (style) => {
-		if (style && typeof style === "object") {
-			const cached = styleCache.get(style);
-			if (cached) return cached;
-			const normalized = styleToObject(style);
-			styleCache.set(style, normalized);
-			return normalized;
-		}
-		return styleToObject(style);
-	};
 	comparePropsWithCallbacks(oldVNode.props, newVNode.props, (key, oldValue) => {
 		if (key === "children") {
 			updatedChildren = true;
@@ -2677,12 +2355,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "style") {
-			const oldStyle = toStyleObject(oldValue);
-			const styleNames = Object.keys(oldStyle);
-			for (let i = 0; i < styleNames.length; i++) {
-				const styleName = styleNames[i];
-				nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
-			}
+			for (const styleName in styleToObject(oldValue)) nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
 			return;
 		}
 		if (listenerReg.test(key)) {
@@ -2706,12 +2379,8 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "style") {
-			const styleObj = toStyleObject(value);
-			const styleNames = Object.keys(styleObj);
-			for (let i = 0; i < styleNames.length; i++) {
-				const styleName = styleNames[i];
-				nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName], isSvg);
-			}
+			const styleObj = styleToObject(value);
+			for (const styleName in styleObj) nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName], isSvg);
 			return;
 		}
 		if (listenerReg.test(key)) {
@@ -2739,7 +2408,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "style") {
-			comparePropsWithCallbacks(toStyleObject(oldValue), toStyleObject(newValue), (styleName) => {
+			comparePropsWithCallbacks(styleToObject(oldValue), styleToObject(newValue), (styleName) => {
 				nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
 			}, (styleName, styleValue) => {
 				nativeRenderer.setStyle(nativeNode, styleName, styleValue, isSvg);
@@ -2798,7 +2467,7 @@ function viewfly(config) {
 	const { context, nativeRenderer, autoUpdate, root } = Object.assign({ autoUpdate: true }, config);
 	const modules = [];
 	let destroyed = false;
-	let appHost = null;
+	let appContainer = null;
 	const rootProviders = [];
 	const rootComponent = new RootComponent(() => {
 		const rootContext = createContext(rootProviders, null, context);
@@ -2808,7 +2477,7 @@ function viewfly(config) {
 	}, function() {
 		if (destroyed || !autoUpdate) return;
 		nextTick(() => {
-			render(appHost);
+			render(appContainer);
 		});
 	});
 	const render = createRenderer(rootComponent, nativeRenderer, config.elementNamespace);
@@ -2832,18 +2501,22 @@ function viewfly(config) {
 			else modules.push(module);
 			return app;
 		},
-		mount(host) {
+		mount(container) {
 			if (isStarted) throw viewflyErrorFn("application has already started.");
 			for (const module of modules) module.setup?.(app);
 			isStarted = true;
-			appHost = host;
-			render(host);
+			appContainer = container;
+			render(container);
 			for (const module of modules) module.onAfterStartup?.(app);
 			if (!autoUpdate) return app;
 			return app;
 		},
 		render() {
-			if (appHost) render(appHost);
+			if (appContainer) {
+				flushReactiveEffectsSync();
+				render(appContainer);
+				flushReactiveEffectsSync();
+			}
 			return app;
 		},
 		destroy() {
@@ -2864,13 +2537,31 @@ function viewfly(config) {
 * @returns 一个对象，对象的 value 属性是计算的值
 */
 function computed(getter) {
-	const proxy = new Proxy({ value: null }, readonlyProxyHandler);
-	watchEffect(() => {
-		internalWrite(() => {
-			proxy.value = getter();
-		});
+	let cacheValue;
+	let dirty = true;
+	const target = { get value() {
+		if (dirty) {
+			dep.destroy();
+			pushDepContext(dep);
+			try {
+				cacheValue = getter();
+				dirty = false;
+			} finally {
+				popDepContext();
+			}
+		}
+		return cacheValue;
+	} };
+	const dep = new Dep(() => {
+		if (!dirty) {
+			dirty = true;
+			trigger(target, TriggerOpTypes.Set, "value");
+		}
+	}, "sync");
+	registryComponentDestroyCallback(() => {
+		dep.destroy();
 	});
-	return proxy;
+	return new Proxy(target, readonlyProxyHandler);
 }
 //#endregion
 //#region src/reactive/shallow-reactive.ts
@@ -2892,9 +2583,9 @@ var defaultShallowSetReactiveHandler = new SetReactiveHandler({
 });
 function shallowReactive(raw) {
 	if (isReactive(raw)) return raw;
-	let proxy = rawToProxyCache.get(raw);
+	let proxy = shallowRawToProxyCache.get(raw);
 	if (proxy) return proxy;
-	switch (getStringType$1(raw)) {
+	switch (getStringType(raw)) {
 		case "[object Object]":
 			proxy = new Proxy(raw, defaultShallowObjectReactiveHandler);
 			break;
@@ -2911,8 +2602,8 @@ function shallowReactive(raw) {
 			break;
 		default: return raw;
 	}
-	rawToProxyCache.set(raw, proxy);
-	proxyToRawCache.set(proxy, raw);
+	shallowRawToProxyCache.set(raw, proxy);
+	shallowProxyToRawCache.set(proxy, raw);
 	return proxy;
 }
 //#endregion
@@ -2998,6 +2689,7 @@ exports.defaultShallowArrayReactiveHandler = defaultShallowArrayReactiveHandler;
 exports.defaultShallowMapReactiveHandler = defaultShallowMapReactiveHandler;
 exports.defaultShallowObjectReactiveHandler = defaultShallowObjectReactiveHandler;
 exports.defaultShallowSetReactiveHandler = defaultShallowSetReactiveHandler;
+exports.flushReactiveEffectsSync = flushReactiveEffectsSync;
 exports.forwardRef = forwardRef;
 exports.getCurrentInstance = getCurrentInstance;
 exports.getDepContext = getDepContext;
@@ -3008,6 +2700,7 @@ exports.isReactive = isReactive;
 exports.jsx = jsx;
 exports.jsxs = jsxs;
 exports.makeError = makeError;
+exports.nextTick = nextTick;
 exports.normalizeProvider = normalizeProvider;
 exports.onMounted = onMounted;
 exports.onUnmounted = onUnmounted;
@@ -3019,6 +2712,8 @@ exports.rawToProxyCache = rawToProxyCache;
 exports.reactive = reactive;
 exports.readonlyProxyHandler = readonlyProxyHandler;
 exports.registryComponentDestroyCallback = registryComponentDestroyCallback;
+exports.shallowProxyToRawCache = shallowProxyToRawCache;
+exports.shallowRawToProxyCache = shallowRawToProxyCache;
 exports.shallowReactive = shallowReactive;
 exports.toRaw = toRaw;
 exports.track = track;