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

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,7 +14,7 @@ export interface ComponentSetup<P = any> {
 }
 export interface ComponentViewMetadata {
     atom: ComponentAtom;
-    container: NativeNode;
+    anchorNode: NativeNode;
     isParent: boolean;
     rootContainer: NativeNode;
     expectContainer: NativeNode;

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,7 +1950,7 @@ function createRenderer(component, nativeRenderer, namespace) {
 				namespace
 			}, {
 				isParent: true,
-				container,
+				anchorNode: container,
 				rootContainer: container
 			});
 		} else deepUpdateByComponentDirtyTree(nativeRenderer, component, false);
@@ -1984,14 +1973,14 @@ function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
 	}
 }
 function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, context, needMove) {
-	const oldContainer = component.viewMetadata.container;
+	const oldContainer = component.viewMetadata.anchorNode;
 	const expectContainer = component.viewMetadata.expectContainer;
 	const newTemplate = component.rerender();
 	const portalContainer = getContainer();
 	popContainer();
 	if (portalContainer && portalContainer !== expectContainer) context = {
 		isParent: true,
-		container: portalContainer,
+		anchorNode: portalContainer,
 		rootContainer: portalContainer
 	};
 	component.viewMetadata = {
@@ -1999,16 +1988,16 @@ function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, contex
 		expectContainer,
 		...context
 	};
-	if (oldContainer !== context.container) needMove = true;
+	if (oldContainer !== context.anchorNode) 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, container, isParent, rootContainer } = component.viewMetadata;
+		const { atom, anchorNode, isParent, rootContainer } = component.viewMetadata;
 		const context = {
-			container,
+			anchorNode,
 			isParent,
 			rootContainer
 		};
@@ -2017,7 +2006,7 @@ function deepUpdateByComponentDirtyTree(nativeRenderer, component, 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,17 +2084,17 @@ 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,
 		isParent: true,
 		rootContainer: context.rootContainer
 	});
@@ -2115,14 +2104,13 @@ 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 {
@@ -2146,7 +2134,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 +2161,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.anchorNode !== jsxNode.viewMetadata.expectContainer) needClean = true;
 		cleanChildren(atom, nativeRenderer, needClean);
 		jsxNode.destroy();
 		return;
@@ -2205,10 +2193,10 @@ 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 ? {
+		const expectContainer = context.anchorNode;
+		context = portalContainer && portalContainer !== context.anchorNode ? {
 			isParent: true,
-			container: portalContainer,
+			anchorNode: portalContainer,
 			rootContainer: portalContainer
 		} : context;
 		component.viewMetadata = {
@@ -2270,9 +2258,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.anchorNode === context.rootContainer) nativeRenderer.appendChild(context.anchorNode, atom.nativeNode, atom.namespace);
+	else nativeRenderer.prependChild(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 +2300,10 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
 	insertNode(nativeRenderer, atom, context);
 	buildElementChildren(atom, nativeRenderer, parentComponent, {
 		isParent: true,
-		container: nativeNode,
+		anchorNode: nativeNode,
 		rootContainer: context.rootContainer
 	});
-	context.container = nativeNode;
+	context.anchorNode = nativeNode;
 	context.isParent = false;
 	if (bindingRefs) {
 		const refEffects = /* @__PURE__ */ new Map();
@@ -2327,7 +2315,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 +2324,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,7 +1951,7 @@ function createRenderer(component, nativeRenderer, namespace) {
 				namespace
 			}, {
 				isParent: true,
-				container,
+				anchorNode: container,
 				rootContainer: container
 			});
 		} else deepUpdateByComponentDirtyTree(nativeRenderer, component, false);
@@ -1985,14 +1974,14 @@ function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
 	}
 }
 function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, context, needMove) {
-	const oldContainer = component.viewMetadata.container;
+	const oldContainer = component.viewMetadata.anchorNode;
 	const expectContainer = component.viewMetadata.expectContainer;
 	const newTemplate = component.rerender();
 	const portalContainer = getContainer();
 	popContainer();
 	if (portalContainer && portalContainer !== expectContainer) context = {
 		isParent: true,
-		container: portalContainer,
+		anchorNode: portalContainer,
 		rootContainer: portalContainer
 	};
 	component.viewMetadata = {
@@ -2000,16 +1989,16 @@ function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, contex
 		expectContainer,
 		...context
 	};
-	if (oldContainer !== context.container) needMove = true;
+	if (oldContainer !== context.anchorNode) 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, container, isParent, rootContainer } = component.viewMetadata;
+		const { atom, anchorNode, isParent, rootContainer } = component.viewMetadata;
 		const context = {
-			container,
+			anchorNode,
 			isParent,
 			rootContainer
 		};
@@ -2018,7 +2007,7 @@ function deepUpdateByComponentDirtyTree(nativeRenderer, component, 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,17 +2085,17 @@ 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,
 		isParent: true,
 		rootContainer: context.rootContainer
 	});
@@ -2116,14 +2105,13 @@ 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 {
@@ -2147,7 +2135,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 +2162,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.anchorNode !== jsxNode.viewMetadata.expectContainer) needClean = true;
 		cleanChildren(atom, nativeRenderer, needClean);
 		jsxNode.destroy();
 		return;
@@ -2206,10 +2194,10 @@ 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 ? {
+		const expectContainer = context.anchorNode;
+		context = portalContainer && portalContainer !== context.anchorNode ? {
 			isParent: true,
-			container: portalContainer,
+			anchorNode: portalContainer,
 			rootContainer: portalContainer
 		} : context;
 		component.viewMetadata = {
@@ -2271,9 +2259,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.anchorNode === context.rootContainer) nativeRenderer.appendChild(context.anchorNode, atom.nativeNode, atom.namespace);
+	else nativeRenderer.prependChild(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 +2301,10 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
 	insertNode(nativeRenderer, atom, context);
 	buildElementChildren(atom, nativeRenderer, parentComponent, {
 		isParent: true,
-		container: nativeNode,
+		anchorNode: nativeNode,
 		rootContainer: context.rootContainer
 	});
-	context.container = nativeNode;
+	context.anchorNode = nativeNode;
 	context.isParent = false;
 	if (bindingRefs) {
 		const refEffects = /* @__PURE__ */ new Map();
@@ -2328,7 +2316,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 +2325,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.4",
   "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",