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

package/dist/base/_utils.d.ts

@@ -1,7 +1,6 @@
 import { Key, ViewFlyNode } from './jsx-element';
 import { NativeNode } from './injection-tokens';
 import { Component, ComponentSetup } from './component';
-export declare function hasChange(newProps: Record<string, any>, oldProps: Record<string, any>): boolean;
 export declare const refKey = "ref";
 export declare function comparePropsWithCallbacks(oldProps: Record<string, any>, newProps: Record<string, any>, onDeleted: (key: string, oldValue: any) => void, onAdded: (key: string, value: any) => void, onUpdated: (key: string, newValue: any, oldValue: any) => void): void;
 export declare function classToString(config: unknown): string;

package/dist/base/component.d.ts

@@ -14,10 +14,10 @@ export interface ComponentSetup<P = any> {
 }
 export interface ComponentViewMetadata {
     atom: ComponentAtom;
-    container: NativeNode;
+    anchorNode: NativeNode;
+    contextContainer: NativeNode;
     isParent: boolean;
-    rootContainer: NativeNode;
-    expectContainer: NativeNode;
+    computedContainer: NativeNode;
 }
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等

package/dist/index.esm.js

@@ -1271,17 +1271,6 @@ function reactive(raw) {
 }
 //#endregion
 //#region src/base/_utils.ts
-function hasChange(newProps, oldProps) {
-	const newKeys = Object.keys(oldProps);
-	const oldKeys = Object.keys(newProps);
-	if (oldKeys.length !== newKeys.length) return true;
-	const len = oldKeys.length;
-	for (let i = 0; i < len; i++) {
-		const key = newKeys[i];
-		if (newProps[key] !== oldProps[key]) return true;
-	}
-	return false;
-}
 function comparePropsWithCallbacks(oldProps, newProps, onDeleted, onAdded, onUpdated) {
 	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]);
@@ -1494,7 +1483,7 @@ var Component = class {
 		this.refEffects = /* @__PURE__ */ new Map();
 		this.listener = new Dep(() => {
 			this.markAsDirtied();
-		}, "async");
+		}, "sync");
 	}
 	markAsDirtied() {
 		this._dirty = true;
@@ -1530,6 +1519,7 @@ var Component = class {
 		const oldProps = this.rawProps;
 		this.rawProps = newProps;
 		const newRefs = newProps.ref;
+		updateRefs(newRefs, this.instance, this.refEffects);
 		comparePropsWithCallbacks(oldProps, newProps, (key) => {
 			internalWrite(() => {
 				Reflect.deleteProperty(oldProps, key);
@@ -1543,7 +1533,6 @@ var Component = class {
 				this.props[key] = value;
 			});
 		});
-		updateRefs(newRefs, this.instance, this.refEffects);
 	}
 	rerender() {
 		this.listener.destroy();
@@ -1961,8 +1950,9 @@ function createRenderer(component, nativeRenderer, namespace) {
 				namespace
 			}, {
 				isParent: true,
-				container,
-				rootContainer: container
+				anchorNode: container,
+				contextContainer: container,
+				computedContainer: container
 			});
 		} else deepUpdateByComponentDirtyTree(nativeRenderer, component, false);
 	};
@@ -1984,40 +1974,46 @@ function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
 	}
 }
 function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, context, needMove) {
-	const oldContainer = component.viewMetadata.container;
-	const expectContainer = component.viewMetadata.expectContainer;
 	const newTemplate = component.rerender();
 	const portalContainer = getContainer();
+	const rawContext = context;
+	const { computedContainer } = component.viewMetadata;
 	popContainer();
-	if (portalContainer && portalContainer !== expectContainer) context = {
-		isParent: true,
-		container: portalContainer,
-		rootContainer: portalContainer
-	};
+	if (portalContainer) if (portalContainer === context.contextContainer) {
+		if (portalContainer !== computedContainer) needMove = true;
+	} else {
+		needMove = true;
+		context = {
+			isParent: true,
+			anchorNode: portalContainer,
+			contextContainer: context.contextContainer,
+			computedContainer: portalContainer
+		};
+	}
+	else if (computedContainer !== context.contextContainer) needMove = true;
 	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;
+	return rawContext;
 }
 function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
 	if (component.dirty) {
-		const { atom, container, isParent, rootContainer } = component.viewMetadata;
+		const { atom, anchorNode, isParent, computedContainer, contextContainer } = component.viewMetadata;
 		const context = {
-			container,
+			anchorNode,
 			isParent,
-			rootContainer
+			contextContainer,
+			computedContainer
 		};
 		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.container = context.container;
+			view.anchorNode = context.anchorNode;
 			view.isParent = context.isParent;
 		}
 		component.rendered();
@@ -2095,19 +2091,20 @@ 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.container = nativeNode;
+	context.anchorNode = 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.container = nativeNode;
+	context.anchorNode = nativeNode;
 	context.isParent = false;
 	updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, {
-		container: nativeNode,
+		anchorNode: nativeNode,
+		contextContainer: nativeNode,
 		isParent: true,
-		rootContainer: context.rootContainer
+		computedContainer: nativeNode
 	});
 }
 function updateComponent(nativeRenderer, context, offset, needMove, newAtom, oldAtom) {
@@ -2115,20 +2112,18 @@ function updateComponent(nativeRenderer, context, offset, needMove, newAtom, old
 	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) {
+	component.updateProps(newProps);
+	if (component.dirty) {
 		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.container = updatedContext.container;
+			view.anchorNode = updatedContext.anchorNode;
 			view.isParent = updatedContext.isParent;
 		}
 	} else {
 		component.viewMetadata = {
 			atom: newAtom,
-			expectContainer: component.viewMetadata.expectContainer,
 			...context
 		};
 		newAtom.child = oldAtom.child;
@@ -2146,7 +2141,7 @@ function reuseComponentView(nativeRenderer, child, context, moveView, skipSubCom
 			if (moveView) insertNode(nativeRenderer, atom, context);
 			if (!skipSubComponentDiff) reuseElementChildrenView(nativeRenderer, atom, context);
 			context.isParent = false;
-			context.container = atom.nativeNode;
+			context.anchorNode = atom.nativeNode;
 		}
 	};
 	while (child) {
@@ -2173,7 +2168,7 @@ function cleanElementChildren(atom, nativeRenderer) {
 function cleanView(nativeRenderer, atom, needClean) {
 	if (atom.type === ComponentAtomType) {
 		const jsxNode = atom.jsxNode;
-		if (jsxNode.viewMetadata.container !== jsxNode.viewMetadata.expectContainer) needClean = true;
+		if (jsxNode.viewMetadata.computedContainer !== jsxNode.viewMetadata.contextContainer) needClean = true;
 		cleanChildren(atom, nativeRenderer, needClean);
 		jsxNode.destroy();
 		return;
@@ -2205,15 +2200,14 @@ function componentRender(nativeRenderer, component, from, context) {
 		const portalContainer = getContainer();
 		popContainer();
 		from.child = createChildChain(template, nativeRenderer, from.namespace);
-		const expectContainer = context.container;
-		context = portalContainer && portalContainer !== context.container ? {
+		if (portalContainer && portalContainer !== context.contextContainer) context = {
 			isParent: true,
-			container: portalContainer,
-			rootContainer: portalContainer
-		} : context;
+			anchorNode: portalContainer,
+			contextContainer: context.contextContainer,
+			computedContainer: portalContainer
+		};
 		component.viewMetadata = {
 			atom: from,
-			expectContainer,
 			...context
 		};
 		let child = from.child;
@@ -2270,9 +2264,9 @@ function createChildChain(template, nativeRenderer, namespace) {
 	return beforeAtom.sibling;
 }
 function insertNode(nativeRenderer, atom, context) {
-	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);
+	if (context.isParent) if (context.contextContainer === context.computedContainer) nativeRenderer.prependChild(context.anchorNode, atom.nativeNode, atom.namespace);
+	else nativeRenderer.appendChild(context.anchorNode, atom.nativeNode, atom.namespace);
+	else nativeRenderer.insertAfter(atom.nativeNode, context.anchorNode, atom.namespace);
 }
 function createElementChildren(type, children, nativeRenderer, namespace) {
 	return createChildChain(children, nativeRenderer, nativeRenderer.getNameSpace(type, namespace));
@@ -2312,10 +2306,11 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
 	insertNode(nativeRenderer, atom, context);
 	buildElementChildren(atom, nativeRenderer, parentComponent, {
 		isParent: true,
-		container: nativeNode,
-		rootContainer: context.rootContainer
+		anchorNode: nativeNode,
+		contextContainer: nativeNode,
+		computedContainer: nativeNode
 	});
-	context.container = nativeNode;
+	context.anchorNode = nativeNode;
 	context.isParent = false;
 	if (bindingRefs) {
 		const refEffects = /* @__PURE__ */ new Map();
@@ -2327,7 +2322,7 @@ function createTextNode(nativeRenderer, atom, context) {
 	const nativeNode = nativeRenderer.createTextNode(atom.jsxNode, atom.namespace);
 	atom.nativeNode = nativeNode;
 	insertNode(nativeRenderer, atom, context);
-	context.container = nativeNode;
+	context.anchorNode = nativeNode;
 	context.isParent = false;
 }
 function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context) {
@@ -2336,6 +2331,11 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 	const nativeNode = newAtom.nativeNode;
 	const oldVNode = oldAtom.jsxNode;
 	if (newVNode === oldVNode) {
+		const refEffects = nativeNodeRefRecord.get(oldAtom);
+		if (refEffects) {
+			nativeNodeRefRecord.delete(oldAtom);
+			nativeNodeRefRecord.set(newAtom, refEffects);
+		}
 		newAtom.child = oldAtom.child;
 		reuseElementChildrenView(nativeRenderer, newAtom, context);
 		return;

package/dist/index.js

@@ -1272,17 +1272,6 @@ function reactive(raw) {
 }
 //#endregion
 //#region src/base/_utils.ts
-function hasChange(newProps, oldProps) {
-	const newKeys = Object.keys(oldProps);
-	const oldKeys = Object.keys(newProps);
-	if (oldKeys.length !== newKeys.length) return true;
-	const len = oldKeys.length;
-	for (let i = 0; i < len; i++) {
-		const key = newKeys[i];
-		if (newProps[key] !== oldProps[key]) return true;
-	}
-	return false;
-}
 function comparePropsWithCallbacks(oldProps, newProps, onDeleted, onAdded, onUpdated) {
 	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]);
@@ -1495,7 +1484,7 @@ var Component = class {
 		this.refEffects = /* @__PURE__ */ new Map();
 		this.listener = new Dep(() => {
 			this.markAsDirtied();
-		}, "async");
+		}, "sync");
 	}
 	markAsDirtied() {
 		this._dirty = true;
@@ -1531,6 +1520,7 @@ var Component = class {
 		const oldProps = this.rawProps;
 		this.rawProps = newProps;
 		const newRefs = newProps.ref;
+		updateRefs(newRefs, this.instance, this.refEffects);
 		comparePropsWithCallbacks(oldProps, newProps, (key) => {
 			internalWrite(() => {
 				Reflect.deleteProperty(oldProps, key);
@@ -1544,7 +1534,6 @@ var Component = class {
 				this.props[key] = value;
 			});
 		});
-		updateRefs(newRefs, this.instance, this.refEffects);
 	}
 	rerender() {
 		this.listener.destroy();
@@ -1962,8 +1951,9 @@ function createRenderer(component, nativeRenderer, namespace) {
 				namespace
 			}, {
 				isParent: true,
-				container,
-				rootContainer: container
+				anchorNode: container,
+				contextContainer: container,
+				computedContainer: container
 			});
 		} else deepUpdateByComponentDirtyTree(nativeRenderer, component, false);
 	};
@@ -1985,40 +1975,46 @@ function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
 	}
 }
 function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, context, needMove) {
-	const oldContainer = component.viewMetadata.container;
-	const expectContainer = component.viewMetadata.expectContainer;
 	const newTemplate = component.rerender();
 	const portalContainer = getContainer();
+	const rawContext = context;
+	const { computedContainer } = component.viewMetadata;
 	popContainer();
-	if (portalContainer && portalContainer !== expectContainer) context = {
-		isParent: true,
-		container: portalContainer,
-		rootContainer: portalContainer
-	};
+	if (portalContainer) if (portalContainer === context.contextContainer) {
+		if (portalContainer !== computedContainer) needMove = true;
+	} else {
+		needMove = true;
+		context = {
+			isParent: true,
+			anchorNode: portalContainer,
+			contextContainer: context.contextContainer,
+			computedContainer: portalContainer
+		};
+	}
+	else if (computedContainer !== context.contextContainer) needMove = true;
 	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;
+	return rawContext;
 }
 function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
 	if (component.dirty) {
-		const { atom, container, isParent, rootContainer } = component.viewMetadata;
+		const { atom, anchorNode, isParent, computedContainer, contextContainer } = component.viewMetadata;
 		const context = {
-			container,
+			anchorNode,
 			isParent,
-			rootContainer
+			contextContainer,
+			computedContainer
 		};
 		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.container = context.container;
+			view.anchorNode = context.anchorNode;
 			view.isParent = context.isParent;
 		}
 		component.rendered();
@@ -2096,19 +2092,20 @@ 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.container = nativeNode;
+	context.anchorNode = 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.container = nativeNode;
+	context.anchorNode = nativeNode;
 	context.isParent = false;
 	updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, {
-		container: nativeNode,
+		anchorNode: nativeNode,
+		contextContainer: nativeNode,
 		isParent: true,
-		rootContainer: context.rootContainer
+		computedContainer: nativeNode
 	});
 }
 function updateComponent(nativeRenderer, context, offset, needMove, newAtom, oldAtom) {
@@ -2116,20 +2113,18 @@ function updateComponent(nativeRenderer, context, offset, needMove, newAtom, old
 	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) {
+	component.updateProps(newProps);
+	if (component.dirty) {
 		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.container = updatedContext.container;
+			view.anchorNode = updatedContext.anchorNode;
 			view.isParent = updatedContext.isParent;
 		}
 	} else {
 		component.viewMetadata = {
 			atom: newAtom,
-			expectContainer: component.viewMetadata.expectContainer,
 			...context
 		};
 		newAtom.child = oldAtom.child;
@@ -2147,7 +2142,7 @@ function reuseComponentView(nativeRenderer, child, context, moveView, skipSubCom
 			if (moveView) insertNode(nativeRenderer, atom, context);
 			if (!skipSubComponentDiff) reuseElementChildrenView(nativeRenderer, atom, context);
 			context.isParent = false;
-			context.container = atom.nativeNode;
+			context.anchorNode = atom.nativeNode;
 		}
 	};
 	while (child) {
@@ -2174,7 +2169,7 @@ function cleanElementChildren(atom, nativeRenderer) {
 function cleanView(nativeRenderer, atom, needClean) {
 	if (atom.type === ComponentAtomType) {
 		const jsxNode = atom.jsxNode;
-		if (jsxNode.viewMetadata.container !== jsxNode.viewMetadata.expectContainer) needClean = true;
+		if (jsxNode.viewMetadata.computedContainer !== jsxNode.viewMetadata.contextContainer) needClean = true;
 		cleanChildren(atom, nativeRenderer, needClean);
 		jsxNode.destroy();
 		return;
@@ -2206,15 +2201,14 @@ function componentRender(nativeRenderer, component, from, context) {
 		const portalContainer = getContainer();
 		popContainer();
 		from.child = createChildChain(template, nativeRenderer, from.namespace);
-		const expectContainer = context.container;
-		context = portalContainer && portalContainer !== context.container ? {
+		if (portalContainer && portalContainer !== context.contextContainer) context = {
 			isParent: true,
-			container: portalContainer,
-			rootContainer: portalContainer
-		} : context;
+			anchorNode: portalContainer,
+			contextContainer: context.contextContainer,
+			computedContainer: portalContainer
+		};
 		component.viewMetadata = {
 			atom: from,
-			expectContainer,
 			...context
 		};
 		let child = from.child;
@@ -2271,9 +2265,9 @@ function createChildChain(template, nativeRenderer, namespace) {
 	return beforeAtom.sibling;
 }
 function insertNode(nativeRenderer, atom, context) {
-	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);
+	if (context.isParent) if (context.contextContainer === context.computedContainer) nativeRenderer.prependChild(context.anchorNode, atom.nativeNode, atom.namespace);
+	else nativeRenderer.appendChild(context.anchorNode, atom.nativeNode, atom.namespace);
+	else nativeRenderer.insertAfter(atom.nativeNode, context.anchorNode, atom.namespace);
 }
 function createElementChildren(type, children, nativeRenderer, namespace) {
 	return createChildChain(children, nativeRenderer, nativeRenderer.getNameSpace(type, namespace));
@@ -2313,10 +2307,11 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
 	insertNode(nativeRenderer, atom, context);
 	buildElementChildren(atom, nativeRenderer, parentComponent, {
 		isParent: true,
-		container: nativeNode,
-		rootContainer: context.rootContainer
+		anchorNode: nativeNode,
+		contextContainer: nativeNode,
+		computedContainer: nativeNode
 	});
-	context.container = nativeNode;
+	context.anchorNode = nativeNode;
 	context.isParent = false;
 	if (bindingRefs) {
 		const refEffects = /* @__PURE__ */ new Map();
@@ -2328,7 +2323,7 @@ function createTextNode(nativeRenderer, atom, context) {
 	const nativeNode = nativeRenderer.createTextNode(atom.jsxNode, atom.namespace);
 	atom.nativeNode = nativeNode;
 	insertNode(nativeRenderer, atom, context);
-	context.container = nativeNode;
+	context.anchorNode = nativeNode;
 	context.isParent = false;
 }
 function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context) {
@@ -2337,6 +2332,11 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 	const nativeNode = newAtom.nativeNode;
 	const oldVNode = oldAtom.jsxNode;
 	if (newVNode === oldVNode) {
+		const refEffects = nativeNodeRefRecord.get(oldAtom);
+		if (refEffects) {
+			nativeNodeRefRecord.delete(oldAtom);
+			nativeNodeRefRecord.set(newAtom, refEffects);
+		}
 		newAtom.child = oldAtom.child;
 		reuseElementChildrenView(nativeRenderer, newAtom, context);
 		return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-alpha.5",
   "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",