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

package/README.md

@@ -19,7 +19,7 @@ pnpm add @viewfly/core
 import 'reflect-metadata'
 ```
 
-更稳妥的做法以 [官网](https://viewfly.org) 与当前版本的说明为准。
+更稳妥的做法以**当前安装版本**随附的类型定义与 README 为准。
 
 ---
 
@@ -49,7 +49,7 @@ import 'reflect-metadata'
 | 组件 | 函数组件：在 JSX 中当标签使用；配合生命周期钩子使用。 |
 | 生命周期 | **`onMounted`**、**`onUpdated`**、**`onUnmounted`** 等（须在组件 setup 阶段调用）。 |
 | 响应式 | **`reactive`**、**`shallowReactive`**、**`watch`** 等（`reactive` 模块）。 |
-| 信号 | **`createSignal`**、**`createEffect`**、**`createDerived`** 等（`signals` 模块）。 |
+| 信号 / 派生 | **`createSignal`**、**`computed`** 等（见 `reactive` 导出；具体符号以类型为准）。 |
 | 依赖注入 | 在组件内用 **`inject`** 解析 token；用 **`Injectable()`** 声明可注入类；用 **`withAnnotation`** 或 **`createContext`** / **`createContextProvider`** 挂载 **`Provider`**；根应用上通过 **`createApp(...).provide(...)`**（由 **`@viewfly/platform-browser`** 提供）注册全局提供者。 |
 | 自定义 DOM 属性标记 | **`withMark(marks, setup)`**：为组件渲染出的元素附加与 `marks` 同名的属性（常用于 scoped CSS 的 `scopeId` 等场景）。 |
 
@@ -59,7 +59,7 @@ import 'reflect-metadata'
 
 ## 文档与示例
 
-- **官方文档**：[viewfly.org](https://viewfly.org)
+- **权威说明**：本文件、源码注释与发布包中的 **`.d.ts`**（第三方文档站点可能滞后）。
 - **本仓库试跑**：仓库根目录执行 `pnpm dev` 打开 playground
 
 ---

package/dist/index.esm.js

@@ -1063,9 +1063,17 @@ function hasChange(newProps, oldProps) {
 	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]);
-	else if (oldProps[key] !== newProps[key]) onUpdated(key, newProps[key], oldProps[key]);
+	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]);
+	}
 }
 function classToString(config) {
 	if (typeof config === "string") return config;
@@ -1729,24 +1737,85 @@ 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 = [];
-	while (newAtom) {
-		oldAtom = createChanges(newAtom, oldAtom, commits);
-		newAtom = newAtom.sibling;
-	}
+	const oldAtoms = [];
 	let dirtyDiffAtom = oldAtom;
 	while (dirtyDiffAtom) {
-		cleanView(nativeRenderer, dirtyDiffAtom, true);
+		oldAtoms.push(dirtyDiffAtom);
 		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 (oldAtom) {
-			if (oldAtom.index <= i) {
+		while (pendingDeleteCursor < pendingDeleteIndices.length) {
+			if (oldAtoms[pendingDeleteIndices[pendingDeleteCursor]].index <= i) {
 				offset--;
-				oldAtom = oldAtom.sibling;
+				pendingDeleteCursor++;
 				continue;
 			}
 			break;
@@ -1769,29 +1838,6 @@ 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;
@@ -1984,7 +2030,10 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
 	const nativeNode = nativeRenderer.createElement(jsxNode.type, namespace);
 	const props = jsxNode.props;
 	let bindingRefs;
-	for (const key in props) {
+	const propKeys = Object.keys(props);
+	const propKeyLen = propKeys.length;
+	for (let i = 0; i < propKeyLen; i++) {
+		const key = propKeys[i];
 		if (key === "children") {
 			atom.child = createElementChildren(jsxNode.type, props.children, nativeRenderer, namespace);
 			continue;
@@ -2045,6 +2094,17 @@ 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;
@@ -2056,7 +2116,12 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "style") {
-			for (const styleName in styleToObject(oldValue)) nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
+			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);
+			}
 			return;
 		}
 		if (listenerReg.test(key)) {
@@ -2080,8 +2145,12 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "style") {
-			const styleObj = styleToObject(value);
-			for (const styleName in styleObj) nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName], isSvg);
+			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);
+			}
 			return;
 		}
 		if (listenerReg.test(key)) {
@@ -2109,7 +2178,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "style") {
-			comparePropsWithCallbacks(styleToObject(oldValue), styleToObject(newValue), (styleName) => {
+			comparePropsWithCallbacks(toStyleObject(oldValue), toStyleObject(newValue), (styleName) => {
 				nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
 			}, (styleName, styleValue) => {
 				nativeRenderer.setStyle(nativeNode, styleName, styleValue, isSvg);
@@ -2234,9 +2303,13 @@ function viewfly(config) {
 * @returns 一个对象，对象的 value 属性是计算的值
 */
 function computed(getter) {
-	return { get value() {
-		return getter();
-	} };
+	const proxy = new Proxy({ value: null }, readonlyProxyHandler);
+	watchEffect(() => {
+		internalWrite(() => {
+			proxy.value = getter();
+		});
+	});
+	return proxy;
 }
 //#endregion
 //#region src/reactive/shallow-reactive.ts

package/dist/index.js

@@ -1064,9 +1064,17 @@ function hasChange(newProps, oldProps) {
 	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]);
-	else if (oldProps[key] !== newProps[key]) onUpdated(key, newProps[key], oldProps[key]);
+	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]);
+	}
 }
 function classToString(config) {
 	if (typeof config === "string") return config;
@@ -2290,24 +2298,85 @@ 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 = [];
-	while (newAtom) {
-		oldAtom = createChanges(newAtom, oldAtom, commits);
-		newAtom = newAtom.sibling;
-	}
+	const oldAtoms = [];
 	let dirtyDiffAtom = oldAtom;
 	while (dirtyDiffAtom) {
-		cleanView(nativeRenderer, dirtyDiffAtom, true);
+		oldAtoms.push(dirtyDiffAtom);
 		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 (oldAtom) {
-			if (oldAtom.index <= i) {
+		while (pendingDeleteCursor < pendingDeleteIndices.length) {
+			if (oldAtoms[pendingDeleteIndices[pendingDeleteCursor]].index <= i) {
 				offset--;
-				oldAtom = oldAtom.sibling;
+				pendingDeleteCursor++;
 				continue;
 			}
 			break;
@@ -2330,29 +2399,6 @@ 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;
@@ -2545,7 +2591,10 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
 	const nativeNode = nativeRenderer.createElement(jsxNode.type, namespace);
 	const props = jsxNode.props;
 	let bindingRefs;
-	for (const key in props) {
+	const propKeys = Object.keys(props);
+	const propKeyLen = propKeys.length;
+	for (let i = 0; i < propKeyLen; i++) {
+		const key = propKeys[i];
 		if (key === "children") {
 			atom.child = createElementChildren(jsxNode.type, props.children, nativeRenderer, namespace);
 			continue;
@@ -2606,6 +2655,17 @@ 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;
@@ -2617,7 +2677,12 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "style") {
-			for (const styleName in styleToObject(oldValue)) nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
+			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);
+			}
 			return;
 		}
 		if (listenerReg.test(key)) {
@@ -2641,8 +2706,12 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "style") {
-			const styleObj = styleToObject(value);
-			for (const styleName in styleObj) nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName], isSvg);
+			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);
+			}
 			return;
 		}
 		if (listenerReg.test(key)) {
@@ -2670,7 +2739,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 			return;
 		}
 		if (key === "style") {
-			comparePropsWithCallbacks(styleToObject(oldValue), styleToObject(newValue), (styleName) => {
+			comparePropsWithCallbacks(toStyleObject(oldValue), toStyleObject(newValue), (styleName) => {
 				nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
 			}, (styleName, styleValue) => {
 				nativeRenderer.setStyle(nativeNode, styleName, styleValue, isSvg);
@@ -2795,9 +2864,13 @@ function viewfly(config) {
 * @returns 一个对象，对象的 value 属性是计算的值
 */
 function computed(getter) {
-	return { get value() {
-		return getter();
-	} };
+	const proxy = new Proxy({ value: null }, readonlyProxyHandler);
+	watchEffect(() => {
+		internalWrite(() => {
+			proxy.value = getter();
+		});
+	});
+	return proxy;
 }
 //#endregion
 //#region src/reactive/shallow-reactive.ts

package/package.json

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