@viewfly/core 3.0.0 → 3.0.1

package/dist/base/component.d.ts

@@ -28,7 +28,7 @@ export declare class Component {
     props: Record<string, any>;
     readonly key?: Key;
     instance: ComponentInstance;
-    changedSubComponents: Set<Component>;
+    changedSubComponents: Set<Component> | null;
     get dirty(): boolean;
     get changed(): boolean;
     /**
@@ -55,6 +55,7 @@ export declare class Component {
     rendered(): void;
     private invokeMountHooks;
     private invokeUpdatedHooks;
+    private getOrCreateRefEffects;
 }
 /**
  * 获取当前组件实例

package/dist/index.esm.js

@@ -615,6 +615,15 @@ function cleanupEmptyEffects(target, type, key, effects, record, subscriber) {
 	subscriber.delete(type);
 	if (subscriber.size === 0) subscribers.delete(target);
 }
+/** @internal 是否有订阅者监听 target 上某一追踪键（用于 computed 等按需刷新） */
+function hasEffectSubscribers(target, type, key = unKnownKey) {
+	const subscriber = subscribers.get(target);
+	if (!subscriber) return false;
+	const record = subscriber.get(type);
+	if (!record) return false;
+	const effects = record.get(key);
+	return !!effects && effects.size > 0;
+}
 function track(target, type, key = unKnownKey) {
 	const dep = getDepContext();
 	if (dep) {
@@ -1469,7 +1478,7 @@ var Component = class {
 		this.props = props;
 		this.key = key;
 		this.instance = null;
-		this.changedSubComponents = /* @__PURE__ */ new Set();
+		this.changedSubComponents = null;
 		this.viewMetadata = null;
 		this.unmountedCallbacks = null;
 		this.mountCallbacks = null;
@@ -1480,7 +1489,7 @@ var Component = class {
 		this.isFirstRendering = true;
 		this.rawProps = props;
 		this.props = createShallowReadonlyProxy({ ...props });
-		this.refEffects = /* @__PURE__ */ new Map();
+		this.refEffects = null;
 		this.listener = new Dep(() => {
 			this.markAsDirtied();
 		}, "sync");
@@ -1490,7 +1499,10 @@ var Component = class {
 		this.markAsChanged();
 	}
 	markAsChanged(changedComponent) {
-		if (changedComponent) this.changedSubComponents.add(changedComponent);
+		if (changedComponent) {
+			if (!this.changedSubComponents) this.changedSubComponents = /* @__PURE__ */ new Set();
+			this.changedSubComponents.add(changedComponent);
+		}
 		if (this._changed) return;
 		this._changed = true;
 		if (this.parentComponent) this.parentComponent.markAsChanged(this);
@@ -1501,8 +1513,13 @@ var Component = class {
 		const isRenderFn = typeof render === "function";
 		this.instance = isRenderFn ? { render } : render;
 		onMounted(() => {
-			applyRefs(this.props.ref, this.instance, this.refEffects);
+			const refs = this.props.ref;
+			if (refs) {
+				const refEffects = this.getOrCreateRefEffects();
+				applyRefs(refs, this.instance, refEffects);
+			}
 			return () => {
+				if (!this.refEffects) return;
 				this.refEffects.forEach((fn) => {
 					if (typeof fn === "function") fn();
 				});
@@ -1519,7 +1536,10 @@ var Component = class {
 		const oldProps = this.rawProps;
 		this.rawProps = newProps;
 		const newRefs = newProps.ref;
-		updateRefs(newRefs, this.instance, this.refEffects);
+		if (oldProps.ref || newRefs) {
+			const refEffects = this.getOrCreateRefEffects();
+			updateRefs(newRefs, this.instance, refEffects);
+		}
 		comparePropsWithCallbacks(oldProps, newProps, (key) => {
 			internalWrite(() => {
 				Reflect.deleteProperty(oldProps, key);
@@ -1549,10 +1569,10 @@ var Component = class {
 		if (this.unmountedCallbacks) this.unmountedCallbacks.forEach((fn) => {
 			fn();
 		});
-		this.parentComponent = this.updatedDestroyCallbacks = this.mountCallbacks = this.updatedCallbacks = this.unmountedCallbacks = null;
+		this.parentComponent = this.changedSubComponents = this.refEffects = this.updatedDestroyCallbacks = this.mountCallbacks = this.updatedCallbacks = this.unmountedCallbacks = null;
 	}
 	rendered() {
-		this.changedSubComponents.clear();
+		this.changedSubComponents?.clear();
 		const is = this.isFirstRendering;
 		this.isFirstRendering = false;
 		this._dirty = this._changed = false;
@@ -1591,6 +1611,10 @@ var Component = class {
 			this.updatedDestroyCallbacks = updatedDestroyCallbacks.length ? updatedDestroyCallbacks : null;
 		}
 	}
+	getOrCreateRefEffects() {
+		if (!this.refEffects) this.refEffects = /* @__PURE__ */ new Map();
+		return this.refEffects;
+	}
 };
 /**
 * 获取当前组件实例
@@ -1979,18 +2003,15 @@ function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, contex
 	const rawContext = context;
 	const { computedContainer, contextContainer } = component.viewMetadata;
 	popContainer();
-	if (portalContainer) if (portalContainer === context.contextContainer) {
-		if (portalContainer !== computedContainer) needMove = true;
-	} else {
+	if (portalContainer) {
 		if (portalContainer !== computedContainer) needMove = true;
-		context = {
+		if (portalContainer !== context.contextContainer) context = {
 			isParent: true,
 			anchorNode: portalContainer,
 			contextContainer: context.contextContainer,
 			computedContainer: portalContainer
 		};
-	}
-	else if (contextContainer !== context.contextContainer) needMove = true;
+	} else if (contextContainer !== context.contextContainer) needMove = true;
 	component.viewMetadata = {
 		atom: newAtom,
 		...context
@@ -2018,9 +2039,8 @@ function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
 		}
 		component.rendered();
 	} else if (component.changed) {
-		component.changedSubComponents.forEach((child) => {
-			deepUpdateByComponentDirtyTree(nativeRenderer, child, needMove);
-		});
+		const changedSubComponents = component.changedSubComponents;
+		if (changedSubComponents) for (const child of changedSubComponents) deepUpdateByComponentDirtyTree(nativeRenderer, child, needMove);
 		component.rendered();
 	}
 }
@@ -2128,7 +2148,7 @@ function updateComponent(nativeRenderer, context, offset, needMove, newAtom, old
 			...context
 		};
 		newAtom.child = oldAtom.child;
-		const skipSubComponentDiff = !component.changedSubComponents.size;
+		const skipSubComponentDiff = !component.changedSubComponents?.size;
 		reuseComponentView(nativeRenderer, newAtom.child, context, needMove, skipSubComponentDiff);
 		if (!skipSubComponentDiff) component.rendered();
 	}
@@ -2457,7 +2477,10 @@ var RootComponent = class extends Component {
 	}
 	markAsChanged(changedComponent) {
 		this._changed = true;
-		if (changedComponent) this.changedSubComponents.add(changedComponent);
+		if (changedComponent) {
+			if (!this.changedSubComponents) this.changedSubComponents = /* @__PURE__ */ new Set();
+			this.changedSubComponents.add(changedComponent);
+		}
 		this.refresh();
 	}
 };
@@ -2534,29 +2557,39 @@ function viewfly(config) {
 /**
 * 创建一个 computed，当依赖的值发生变化时，会重新计算值。
 * computed 会返回一个对象，对象的 value 属性是计算的值。
+*
+* 若重新计算的结果与缓存值 `Object.is` 相等，不会对访问该 computed 的订阅者触发更新，
+* 避免无关依赖抖动导致的下游副作用。
+*
 * @param getter 计算函数，用于计算值
 * @returns 一个对象，对象的 value 属性是计算的值
 */
 function computed(getter) {
 	let cacheValue;
+	let hasCache = false;
 	let dirty = true;
 	const target = { get value() {
-		if (dirty) {
-			dep.destroy();
-			pushDepContext(dep);
-			try {
-				cacheValue = getter();
-				dirty = false;
-			} finally {
-				popDepContext();
-			}
-		}
+		if (dirty) flushComputed(false);
 		return cacheValue;
 	} };
+	function flushComputed(notify) {
+		dep.destroy();
+		pushDepContext(dep);
+		try {
+			const newValue = getter();
+			const changed = !hasCache || !Object.is(newValue, cacheValue);
+			hasCache = true;
+			cacheValue = newValue;
+			dirty = false;
+			if (notify && changed) trigger(target, TriggerOpTypes.Set, "value");
+		} finally {
+			popDepContext();
+		}
+	}
 	const dep = new Dep(() => {
 		if (!dirty) {
 			dirty = true;
-			trigger(target, TriggerOpTypes.Set, "value");
+			if (hasEffectSubscribers(target, TrackOpTypes.Get, "value")) flushComputed(true);
 		}
 	}, "sync");
 	registryComponentDestroyCallback(() => {
@@ -2643,4 +2676,4 @@ function createSignal(state) {
 	return signal;
 }
 //#endregion
-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, flushReactiveEffectsSync, forwardRef, getCurrentInstance, getDepContext, getSetupContext, inject, internalWrite, isReactive, jsx, jsxs, makeError, nextTick, normalizeProvider, onMounted, onUnmounted, onUpdated, popDepContext, proxyToRawCache, pushDepContext, rawToProxyCache, reactive, readonlyProxyHandler, registryComponentDestroyCallback, shallowProxyToRawCache, shallowRawToProxyCache, shallowReactive, toRaw, track, trigger, updateRefs, viewfly, watch, watchEffect, withAnnotation, withMark };
+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, flushReactiveEffectsSync, forwardRef, getCurrentInstance, getDepContext, getSetupContext, hasEffectSubscribers, inject, internalWrite, isReactive, jsx, jsxs, makeError, nextTick, normalizeProvider, onMounted, onUnmounted, onUpdated, popDepContext, proxyToRawCache, pushDepContext, rawToProxyCache, reactive, readonlyProxyHandler, registryComponentDestroyCallback, shallowProxyToRawCache, shallowRawToProxyCache, shallowReactive, toRaw, track, trigger, updateRefs, viewfly, watch, watchEffect, withAnnotation, withMark };

package/dist/index.js

@@ -616,6 +616,15 @@ function cleanupEmptyEffects(target, type, key, effects, record, subscriber) {
 	subscriber.delete(type);
 	if (subscriber.size === 0) subscribers.delete(target);
 }
+/** @internal 是否有订阅者监听 target 上某一追踪键（用于 computed 等按需刷新） */
+function hasEffectSubscribers(target, type, key = unKnownKey) {
+	const subscriber = subscribers.get(target);
+	if (!subscriber) return false;
+	const record = subscriber.get(type);
+	if (!record) return false;
+	const effects = record.get(key);
+	return !!effects && effects.size > 0;
+}
 function track(target, type, key = unKnownKey) {
 	const dep = getDepContext();
 	if (dep) {
@@ -1470,7 +1479,7 @@ var Component = class {
 		this.props = props;
 		this.key = key;
 		this.instance = null;
-		this.changedSubComponents = /* @__PURE__ */ new Set();
+		this.changedSubComponents = null;
 		this.viewMetadata = null;
 		this.unmountedCallbacks = null;
 		this.mountCallbacks = null;
@@ -1481,7 +1490,7 @@ var Component = class {
 		this.isFirstRendering = true;
 		this.rawProps = props;
 		this.props = createShallowReadonlyProxy({ ...props });
-		this.refEffects = /* @__PURE__ */ new Map();
+		this.refEffects = null;
 		this.listener = new Dep(() => {
 			this.markAsDirtied();
 		}, "sync");
@@ -1491,7 +1500,10 @@ var Component = class {
 		this.markAsChanged();
 	}
 	markAsChanged(changedComponent) {
-		if (changedComponent) this.changedSubComponents.add(changedComponent);
+		if (changedComponent) {
+			if (!this.changedSubComponents) this.changedSubComponents = /* @__PURE__ */ new Set();
+			this.changedSubComponents.add(changedComponent);
+		}
 		if (this._changed) return;
 		this._changed = true;
 		if (this.parentComponent) this.parentComponent.markAsChanged(this);
@@ -1502,8 +1514,13 @@ var Component = class {
 		const isRenderFn = typeof render === "function";
 		this.instance = isRenderFn ? { render } : render;
 		onMounted(() => {
-			applyRefs(this.props.ref, this.instance, this.refEffects);
+			const refs = this.props.ref;
+			if (refs) {
+				const refEffects = this.getOrCreateRefEffects();
+				applyRefs(refs, this.instance, refEffects);
+			}
 			return () => {
+				if (!this.refEffects) return;
 				this.refEffects.forEach((fn) => {
 					if (typeof fn === "function") fn();
 				});
@@ -1520,7 +1537,10 @@ var Component = class {
 		const oldProps = this.rawProps;
 		this.rawProps = newProps;
 		const newRefs = newProps.ref;
-		updateRefs(newRefs, this.instance, this.refEffects);
+		if (oldProps.ref || newRefs) {
+			const refEffects = this.getOrCreateRefEffects();
+			updateRefs(newRefs, this.instance, refEffects);
+		}
 		comparePropsWithCallbacks(oldProps, newProps, (key) => {
 			internalWrite(() => {
 				Reflect.deleteProperty(oldProps, key);
@@ -1550,10 +1570,10 @@ var Component = class {
 		if (this.unmountedCallbacks) this.unmountedCallbacks.forEach((fn) => {
 			fn();
 		});
-		this.parentComponent = this.updatedDestroyCallbacks = this.mountCallbacks = this.updatedCallbacks = this.unmountedCallbacks = null;
+		this.parentComponent = this.changedSubComponents = this.refEffects = this.updatedDestroyCallbacks = this.mountCallbacks = this.updatedCallbacks = this.unmountedCallbacks = null;
 	}
 	rendered() {
-		this.changedSubComponents.clear();
+		this.changedSubComponents?.clear();
 		const is = this.isFirstRendering;
 		this.isFirstRendering = false;
 		this._dirty = this._changed = false;
@@ -1592,6 +1612,10 @@ var Component = class {
 			this.updatedDestroyCallbacks = updatedDestroyCallbacks.length ? updatedDestroyCallbacks : null;
 		}
 	}
+	getOrCreateRefEffects() {
+		if (!this.refEffects) this.refEffects = /* @__PURE__ */ new Map();
+		return this.refEffects;
+	}
 };
 /**
 * 获取当前组件实例
@@ -1980,18 +2004,15 @@ function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, contex
 	const rawContext = context;
 	const { computedContainer, contextContainer } = component.viewMetadata;
 	popContainer();
-	if (portalContainer) if (portalContainer === context.contextContainer) {
-		if (portalContainer !== computedContainer) needMove = true;
-	} else {
+	if (portalContainer) {
 		if (portalContainer !== computedContainer) needMove = true;
-		context = {
+		if (portalContainer !== context.contextContainer) context = {
 			isParent: true,
 			anchorNode: portalContainer,
 			contextContainer: context.contextContainer,
 			computedContainer: portalContainer
 		};
-	}
-	else if (contextContainer !== context.contextContainer) needMove = true;
+	} else if (contextContainer !== context.contextContainer) needMove = true;
 	component.viewMetadata = {
 		atom: newAtom,
 		...context
@@ -2019,9 +2040,8 @@ function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
 		}
 		component.rendered();
 	} else if (component.changed) {
-		component.changedSubComponents.forEach((child) => {
-			deepUpdateByComponentDirtyTree(nativeRenderer, child, needMove);
-		});
+		const changedSubComponents = component.changedSubComponents;
+		if (changedSubComponents) for (const child of changedSubComponents) deepUpdateByComponentDirtyTree(nativeRenderer, child, needMove);
 		component.rendered();
 	}
 }
@@ -2129,7 +2149,7 @@ function updateComponent(nativeRenderer, context, offset, needMove, newAtom, old
 			...context
 		};
 		newAtom.child = oldAtom.child;
-		const skipSubComponentDiff = !component.changedSubComponents.size;
+		const skipSubComponentDiff = !component.changedSubComponents?.size;
 		reuseComponentView(nativeRenderer, newAtom.child, context, needMove, skipSubComponentDiff);
 		if (!skipSubComponentDiff) component.rendered();
 	}
@@ -2458,7 +2478,10 @@ var RootComponent = class extends Component {
 	}
 	markAsChanged(changedComponent) {
 		this._changed = true;
-		if (changedComponent) this.changedSubComponents.add(changedComponent);
+		if (changedComponent) {
+			if (!this.changedSubComponents) this.changedSubComponents = /* @__PURE__ */ new Set();
+			this.changedSubComponents.add(changedComponent);
+		}
 		this.refresh();
 	}
 };
@@ -2535,29 +2558,39 @@ function viewfly(config) {
 /**
 * 创建一个 computed，当依赖的值发生变化时，会重新计算值。
 * computed 会返回一个对象，对象的 value 属性是计算的值。
+*
+* 若重新计算的结果与缓存值 `Object.is` 相等，不会对访问该 computed 的订阅者触发更新，
+* 避免无关依赖抖动导致的下游副作用。
+*
 * @param getter 计算函数，用于计算值
 * @returns 一个对象，对象的 value 属性是计算的值
 */
 function computed(getter) {
 	let cacheValue;
+	let hasCache = false;
 	let dirty = true;
 	const target = { get value() {
-		if (dirty) {
-			dep.destroy();
-			pushDepContext(dep);
-			try {
-				cacheValue = getter();
-				dirty = false;
-			} finally {
-				popDepContext();
-			}
-		}
+		if (dirty) flushComputed(false);
 		return cacheValue;
 	} };
+	function flushComputed(notify) {
+		dep.destroy();
+		pushDepContext(dep);
+		try {
+			const newValue = getter();
+			const changed = !hasCache || !Object.is(newValue, cacheValue);
+			hasCache = true;
+			cacheValue = newValue;
+			dirty = false;
+			if (notify && changed) trigger(target, TriggerOpTypes.Set, "value");
+		} finally {
+			popDepContext();
+		}
+	}
 	const dep = new Dep(() => {
 		if (!dirty) {
 			dirty = true;
-			trigger(target, TriggerOpTypes.Set, "value");
+			if (hasEffectSubscribers(target, TrackOpTypes.Get, "value")) flushComputed(true);
 		}
 	}, "sync");
 	registryComponentDestroyCallback(() => {
@@ -2696,6 +2729,7 @@ exports.forwardRef = forwardRef;
 exports.getCurrentInstance = getCurrentInstance;
 exports.getDepContext = getDepContext;
 exports.getSetupContext = getSetupContext;
+exports.hasEffectSubscribers = hasEffectSubscribers;
 exports.inject = inject;
 exports.internalWrite = internalWrite;
 exports.isReactive = isReactive;

package/dist/reactive/computed.d.ts

@@ -4,6 +4,10 @@ export interface Computed<T> {
 /**
  * 创建一个 computed，当依赖的值发生变化时，会重新计算值。
  * computed 会返回一个对象，对象的 value 属性是计算的值。
+ *
+ * 若重新计算的结果与缓存值 `Object.is` 相等，不会对访问该 computed 的订阅者触发更新，
+ * 避免无关依赖抖动导致的下游副作用。
+ *
  * @param getter 计算函数，用于计算值
  * @returns 一个对象，对象的 value 属性是计算的值
  */

package/dist/reactive/effect.d.ts

@@ -16,5 +16,7 @@ export declare enum TriggerOpTypes {
     Clear = "Clear",
     Iterate = "Iterate"
 }
+/** @internal 是否有订阅者监听 target 上某一追踪键（用于 computed 等按需刷新） */
+export declare function hasEffectSubscribers(target: object, type: TrackOpTypes, key?: unknown): boolean;
 export declare function track(target: object, type: TrackOpTypes, key?: unknown): void;
 export declare function trigger(target: object, type: TriggerOpTypes, key?: unknown): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience.",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",