@viewfly/core 2.2.0 → 3.0.0-alpha.0

package/dist/index.esm.js

@@ -441,12 +441,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>
 * }
@@ -458,8 +463,10 @@ function onMounted(callback) {
 	component.mountCallbacks.push(callback);
 }
 /**
-* 当组件视图更新后调用
-* @param callback
+* 当组件视图更新后调用回调函数
+* @param callback 回调函数
+* @returns 一个函数，用于停止监听
+* @example
 * ```tsx
 * function App() {
 *   onUpdated(() => {
@@ -482,76 +489,23 @@ 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
@@ -907,14 +861,45 @@ function createSetHandlers(wrapper) {
 var reactiveErrorFn = 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;
+/**
+* 内部写入，用于避免类型为只读的响应式对象写入报错
+* @param fn 要执行的函数
+* @internal
+*/
 function internalWrite(fn) {
 	fromInternalWrite = true;
 	fn();
@@ -1016,6 +1001,29 @@ 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);
@@ -1091,6 +1099,97 @@ var TextAtomType = Symbol("Text");
 var ElementAtomType = Symbol("Element");
 var ComponentAtomType = Symbol("Component");
 //#endregion
+//#region src/base/ref.ts
+var refErrorFn = 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;
+}
+/**
+* 创建一个引用对象，并添加到 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 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("ref must be a function or `Ref<T>` object!");
+}
+//#endregion
 //#region src/base/component.ts
 var componentSetupStack = [];
 var componentErrorFn = makeError("component");
@@ -1099,14 +1198,6 @@ function getSetupContext(need = true) {
 	if (!current && need) throw componentErrorFn("cannot be called outside the component!");
 	return current;
 }
-function toRefs(ref) {
-	return (Array.isArray(ref) ? ref : [ref]).filter((i) => {
-		return i instanceof DynamicRef;
-	});
-}
-function createReadonlyProxy(value) {
-	return new Proxy(value, readonlyProxyHandler);
-}
 /**
 * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
 */
@@ -1132,9 +1223,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();
 		});
@@ -1154,20 +1245,14 @@ var Component = class {
 		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);
-				};
-			});
-		}
+		onMounted(() => {
+			applyRefs(this.props.ref, this.instance, this.refEffects);
+			return () => {
+				this.refEffects.forEach((fn) => {
+					if (typeof fn === "function") fn();
+				});
+			};
+		});
 		componentSetupStack.pop();
 		pushDepContext(this.listener);
 		const template = this.instance.$render();
@@ -1178,7 +1263,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);
@@ -1192,22 +1277,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();
@@ -1269,10 +1339,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) {
@@ -1376,24 +1460,22 @@ function Portal(props) {
 	};
 }
 //#endregion
-//#region src/reactive/watch.ts
-function watch(trigger, callback) {
-	let prevFn;
-	const dep = new Dep(() => {
+//#region src/reactive/watch-effect.ts
+/**
+* 创建一个 watchEffect，立即执行 effect 函数，当依赖的值发生变化时，会再次执行 effect 函数。
+* watchEffect 会返回一个函数，用于停止监听
+* @param effect 执行的函数
+* @returns 一个函数，用于停止监听
+*/
+function watchEffect(effect) {
+	const dep = new Dep(function() {
 		pushDepContext(dep);
-		const newValue = trigger();
+		effect();
 		popDepContext();
-		if (newValue === oldValue) return;
-		if (prevFn) prevFn();
-		prevFn = callback(newValue, oldValue);
-		oldValue = newValue;
 	});
 	pushDepContext(dep);
-	let oldValue = trigger();
+	effect();
 	popDepContext();
-	dep.destroyCallbacks.push(() => {
-		prevFn?.();
-	});
 	function unWatch() {
 		dep.destroy();
 	}
@@ -1401,6 +1483,32 @@ function watch(trigger, callback) {
 	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) {
@@ -1411,6 +1519,36 @@ function getInjector(start) {
 	}
 	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();
@@ -1421,6 +1559,33 @@ function createContext(providers, scope, parentInjector) {
 		};
 	};
 }
+/**
+* 创建一个上下文提供者组件，组件的子元素都可以通过 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([{
@@ -1442,6 +1607,19 @@ function createContextProvider(params) {
 }
 /**
 * 通过组件上下文获取 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);
@@ -1482,21 +1660,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) {
@@ -1541,21 +1707,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) {
@@ -1662,10 +1826,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) {
@@ -1675,7 +1838,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();
 }
@@ -1726,8 +1889,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);
 }
@@ -1851,7 +2016,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);
@@ -1870,7 +2037,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) => {
@@ -1891,10 +2057,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") {
@@ -1952,26 +2115,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
@@ -2055,39 +2209,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
@@ -2133,7 +2264,7 @@ function shallowReactive(raw) {
 	return proxy;
 }
 //#endregion
-//#region src/signals/signal.ts
+//#region src/reactive/signal.ts
 /**
 * 组件状态管理器
 * @param state 初始状态
@@ -2158,86 +2289,14 @@ 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
-export { ArrayReactiveHandler, Component, Dep, DynamicRef, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, MapReactiveHandler, NativeRenderer, NullInjector, ObjectReactiveHandler, Optional, Portal, Prop, ReflectiveInjector, RootComponent, Scope, Self, SetReactiveHandler, SkipSelf, StaticRef, THROW_IF_NOT_FOUND, TrackOpTypes, TriggerOpTypes, Type, applyMark, comparePropsWithCallbacks, computed, createContext, createContextProvider, createDerived, createDynamicRef, createEffect, createRef, createRenderer, createSignal, defaultArrayReactiveHandler, defaultMapReactiveHandler, defaultObjectReactiveHandler, defaultSetReactiveHandler, defaultShallowArrayReactiveHandler, defaultShallowMapReactiveHandler, defaultShallowObjectReactiveHandler, defaultShallowSetReactiveHandler, forwardRef, getCurrentInstance, getDepContext, getSetupContext, inject, internalWrite, isReactive, jsx, jsxs, makeError, normalizeProvider, onMounted, onUnmounted, onUpdated, popDepContext, proxyToRawCache, pushDepContext, rawToProxyCache, reactive, readonlyProxyHandler, registryComponentDestroyCallback, shallowReactive, toRaw, track, trigger, viewfly, watch, withAnnotation, withMark, withMemo };
+export { ArrayReactiveHandler, Component, Dep, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, MapReactiveHandler, NativeRenderer, NullInjector, ObjectReactiveHandler, Optional, Portal, Prop, ReflectiveInjector, RootComponent, Scope, Self, SetReactiveHandler, SkipSelf, THROW_IF_NOT_FOUND, TrackOpTypes, TriggerOpTypes, Type, applyMark, applyRefs, comparePropsWithCallbacks, computed, createContext, createContextProvider, createDynamicRef, createRef, createRenderer, createShallowReadonlyProxy, createSignal, defaultArrayReactiveHandler, defaultMapReactiveHandler, defaultObjectReactiveHandler, defaultSetReactiveHandler, defaultShallowArrayReactiveHandler, defaultShallowMapReactiveHandler, defaultShallowObjectReactiveHandler, defaultShallowSetReactiveHandler, forwardRef, getCurrentInstance, getDepContext, getSetupContext, inject, internalWrite, isReactive, jsx, jsxs, makeError, normalizeProvider, onMounted, onUnmounted, onUpdated, popDepContext, proxyToRawCache, pushDepContext, rawToProxyCache, reactive, readonlyProxyHandler, registryComponentDestroyCallback, shallowReactive, toRaw, track, trigger, updateRefs, viewfly, watch, watchEffect, withAnnotation, withMark };