@viewfly/core 3.0.1 → 3.0.3

package/README.en.md

@@ -0,0 +1,71 @@
+# @viewfly/core
+
+**Languages:** [简体中文](./README.md)
+
+The **core** Viewfly package: function components, JSX, reactivity and `signal`, `watch`, lifecycle, `inject` / IoC APIs, and **`withMark`** for UI-facing utilities.
+
+To mount in the browser use **`createApp`** from **`@viewfly/platform-browser`** (built on this package’s application model).
+
+---
+
+## Install
+
+```bash
+npm install @viewfly/core
+```
+
+This package depends on **`reflect-metadata`**. Importing from the **`@viewfly/core`** main entry initializes it; if DI breaks after aggressive splitting, add at the **top** of your entry:
+
+```ts
+import 'reflect-metadata'
+```
+
+Prefer the **`.d.ts`** shipped with your installed version and the official docs (<https://viewfly.org>) as the source of truth.
+
+---
+
+## JSX / TSX setup
+
+Enable automatic JSX runtime and point it at this package:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@viewfly/core"
+  }
+}
+```
+
+With Babel, align `@babel/preset-react` (`runtime: "automatic"`, `importSource: "@viewfly/core"`).
+
+---
+
+## Capabilities (user-facing)
+
+Common directions below — **exact types and parameters come from `.d.ts` and the docs**.
+
+| Area | Public API hints |
+|------|------------------|
+| Components | Function components as JSX tags; pair with lifecycle hooks. |
+| Lifecycle | **`onMounted`**, **`onUpdated`**, **`onUnmounted`**, etc. (call during component setup). |
+| Reactivity | **`reactive`**, **`shallowReactive`**, **`watch`**, … (`reactive` module). |
+| `signal` / derived | **`createSignal`**, **`computed`**, … (see `reactive` exports). |
+| DI | **`inject`** in components; **`Injectable()`** on classes; **`withAnnotation`** or **`createContext`** / **`createContextProvider`** for providers; root **`createApp(...).provide(...)`** from **`@viewfly/platform-browser`**. |
+| DOM marks | **`withMark(marks, setup)`** — attach attributes (e.g. scoped CSS `scopeId`). |
+
+Symbols marked **`@internal`** or undocumented on the site are for framework/experimental use — **avoid relying on them** in apps; they may change without semver guarantees.
+
+---
+
+## Docs & examples
+
+- **Official docs:** <https://viewfly.org> (install, components, reactivity, DI).
+- **Types & comments:** published **`.d.ts`** and source comments.
+- **This repo:** `pnpm install` at root, then `pnpm dev` for the playground.
+
+---
+
+## License
+
+MIT

package/README.md

@@ -1,5 +1,7 @@
 # @viewfly/core
 
+**Languages:** [English](./README.en.md)
+
 Viewfly 的**内核包**：函数组件、`JSX`、响应式与 `signal`、`watch`、生命周期、`inject` 与 IoC 相关 API、以及 **`withMark`** 等与 UI 逻辑直接相关的入口均由此包提供。
 
 在浏览器里挂载应用请使用 **`@viewfly/platform-browser`** 的 **`createApp`**（其内部使用本包提供的应用模型）。

package/dist/base/component.d.ts

@@ -48,9 +48,8 @@ export declare class Component {
     constructor(parentComponent: Component | null, type: ComponentSetup, props: Record<string, any>, key?: Key);
     markAsDirtied(): void;
     markAsChanged(changedComponent?: Component): void;
-    render(update: (template: JSXNode) => void): void;
+    render(): JSXNode;
     updateProps(newProps: Record<string, any>): void;
-    rerender(): JSXNode;
     destroy(): void;
     rendered(): void;
     private invokeMountHooks;

package/dist/base/injection-tokens.d.ts

@@ -17,4 +17,5 @@ export declare abstract class NativeRenderer<ElementNode = NativeNode, TextNode
     abstract syncTextContent(target: TextNode, content: string, namespace: ElementNamespace): void;
     abstract insertAfter(newNode: ElementNode | TextNode, ref: ElementNode | TextNode, namespace: ElementNamespace): void;
     abstract getNameSpace(type: string, namespace: ElementNamespace): string | void;
+    abstract getChildrenNameSpace(type: string, namespace: ElementNamespace): string | void;
 }

package/dist/index.esm.js

@@ -1475,7 +1475,6 @@ var Component = class {
 	constructor(parentComponent, type, props, key) {
 		this.parentComponent = parentComponent;
 		this.type = type;
-		this.props = props;
 		this.key = key;
 		this.instance = null;
 		this.changedSubComponents = null;
@@ -1507,7 +1506,14 @@ var Component = class {
 		this._changed = true;
 		if (this.parentComponent) this.parentComponent.markAsChanged(this);
 	}
-	render(update) {
+	render() {
+		if (this.instance) {
+			this.listener.destroy();
+			pushDepContext(this.listener);
+			const template = this.instance.render();
+			popDepContext();
+			return template;
+		}
 		componentSetupStack.push(this);
 		const render = this.type(this.props);
 		const isRenderFn = typeof render === "function";
@@ -1529,8 +1535,7 @@ var Component = class {
 		pushDepContext(this.listener);
 		const template = this.instance.render();
 		popDepContext();
-		update(template);
-		this.rendered();
+		return template;
 	}
 	updateProps(newProps) {
 		const oldProps = this.rawProps;
@@ -1554,13 +1559,6 @@ var Component = class {
 			});
 		});
 	}
-	rerender() {
-		this.listener.destroy();
-		pushDepContext(this.listener);
-		const template = this.instance.render();
-		popDepContext();
-		return template;
-	}
 	destroy() {
 		this.listener.destroy();
 		if (this.updatedDestroyCallbacks) this.updatedDestroyCallbacks.forEach((fn) => {
@@ -1569,7 +1567,8 @@ var Component = class {
 		if (this.unmountedCallbacks) this.unmountedCallbacks.forEach((fn) => {
 			fn();
 		});
-		this.parentComponent = this.changedSubComponents = this.refEffects = this.updatedDestroyCallbacks = this.mountCallbacks = this.updatedCallbacks = this.unmountedCallbacks = null;
+		this.isFirstRendering = true;
+		this.changedSubComponents = this.refEffects = this.updatedDestroyCallbacks = this.mountCallbacks = this.updatedCallbacks = this.unmountedCallbacks = this.instance = null;
 	}
 	rendered() {
 		this.changedSubComponents?.clear();
@@ -1998,7 +1997,7 @@ function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
 	}
 }
 function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, context, needMove) {
-	const newTemplate = component.rerender();
+	const newTemplate = component.render();
 	const portalContainer = getContainer();
 	const rawContext = context;
 	const { computedContainer, contextContainer } = component.viewMetadata;
@@ -2218,26 +2217,26 @@ function cleanChildren(atom, nativeRenderer, needClean) {
 	}
 }
 function componentRender(nativeRenderer, component, from, context) {
-	component.render((template) => {
-		const portalContainer = getContainer();
-		popContainer();
-		from.child = createChildChain(template, nativeRenderer, from.namespace);
-		if (portalContainer && portalContainer !== context.contextContainer) context = {
-			isParent: true,
-			anchorNode: portalContainer,
-			contextContainer: context.contextContainer,
-			computedContainer: portalContainer
-		};
-		component.viewMetadata = {
-			atom: from,
-			...context
-		};
-		let child = from.child;
-		while (child) {
-			buildView(nativeRenderer, component, child, context);
-			child = child.sibling;
-		}
-	});
+	const template = component.render();
+	const portalContainer = getContainer();
+	popContainer();
+	from.child = createChildChain(template, nativeRenderer, from.namespace);
+	if (portalContainer && portalContainer !== context.contextContainer) context = {
+		isParent: true,
+		anchorNode: portalContainer,
+		contextContainer: context.contextContainer,
+		computedContainer: portalContainer
+	};
+	component.viewMetadata = {
+		atom: from,
+		...context
+	};
+	let child = from.child;
+	while (child) {
+		buildView(nativeRenderer, component, child, context);
+		child = child.sibling;
+	}
+	component.rendered();
 }
 function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, namespace, key) {
 	const atom = {
@@ -2262,7 +2261,7 @@ function createChainByNode(jsxNode, prevAtom, nativeRenderer, elementNamespace)
 			if (Array.isArray(jsxNode)) return createChainByChildren(jsxNode, prevAtom, nativeRenderer, elementNamespace);
 			const nodeType = typeof jsxNode.type;
 			if (nodeType === "string") return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, nativeRenderer.getNameSpace(jsxNode.type, elementNamespace), jsxNode.key);
-			else if (nodeType === "function") return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, elementNamespace, jsxNode.key);
+			if (nodeType === "function") return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, elementNamespace, jsxNode.key);
 		}
 		const text = String(jsxNode);
 		return createChainByJSXNode(TextAtomType, text, text, prevAtom, elementNamespace);
@@ -2291,7 +2290,7 @@ function insertNode(nativeRenderer, atom, context) {
 	else nativeRenderer.insertAfter(atom.nativeNode, context.anchorNode, atom.namespace);
 }
 function createElementChildren(type, children, nativeRenderer, namespace) {
-	return createChildChain(children, nativeRenderer, nativeRenderer.getNameSpace(type, namespace));
+	return createChildChain(children, nativeRenderer, nativeRenderer.getChildrenNameSpace(type, namespace));
 }
 function createElement(nativeRenderer, atom, parentComponent, context) {
 	const { namespace, jsxNode } = atom;

package/dist/index.js

@@ -1476,7 +1476,6 @@ var Component = class {
 	constructor(parentComponent, type, props, key) {
 		this.parentComponent = parentComponent;
 		this.type = type;
-		this.props = props;
 		this.key = key;
 		this.instance = null;
 		this.changedSubComponents = null;
@@ -1508,7 +1507,14 @@ var Component = class {
 		this._changed = true;
 		if (this.parentComponent) this.parentComponent.markAsChanged(this);
 	}
-	render(update) {
+	render() {
+		if (this.instance) {
+			this.listener.destroy();
+			pushDepContext(this.listener);
+			const template = this.instance.render();
+			popDepContext();
+			return template;
+		}
 		componentSetupStack.push(this);
 		const render = this.type(this.props);
 		const isRenderFn = typeof render === "function";
@@ -1530,8 +1536,7 @@ var Component = class {
 		pushDepContext(this.listener);
 		const template = this.instance.render();
 		popDepContext();
-		update(template);
-		this.rendered();
+		return template;
 	}
 	updateProps(newProps) {
 		const oldProps = this.rawProps;
@@ -1555,13 +1560,6 @@ var Component = class {
 			});
 		});
 	}
-	rerender() {
-		this.listener.destroy();
-		pushDepContext(this.listener);
-		const template = this.instance.render();
-		popDepContext();
-		return template;
-	}
 	destroy() {
 		this.listener.destroy();
 		if (this.updatedDestroyCallbacks) this.updatedDestroyCallbacks.forEach((fn) => {
@@ -1570,7 +1568,8 @@ var Component = class {
 		if (this.unmountedCallbacks) this.unmountedCallbacks.forEach((fn) => {
 			fn();
 		});
-		this.parentComponent = this.changedSubComponents = this.refEffects = this.updatedDestroyCallbacks = this.mountCallbacks = this.updatedCallbacks = this.unmountedCallbacks = null;
+		this.isFirstRendering = true;
+		this.changedSubComponents = this.refEffects = this.updatedDestroyCallbacks = this.mountCallbacks = this.updatedCallbacks = this.unmountedCallbacks = this.instance = null;
 	}
 	rendered() {
 		this.changedSubComponents?.clear();
@@ -1999,7 +1998,7 @@ function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
 	}
 }
 function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, context, needMove) {
-	const newTemplate = component.rerender();
+	const newTemplate = component.render();
 	const portalContainer = getContainer();
 	const rawContext = context;
 	const { computedContainer, contextContainer } = component.viewMetadata;
@@ -2219,26 +2218,26 @@ function cleanChildren(atom, nativeRenderer, needClean) {
 	}
 }
 function componentRender(nativeRenderer, component, from, context) {
-	component.render((template) => {
-		const portalContainer = getContainer();
-		popContainer();
-		from.child = createChildChain(template, nativeRenderer, from.namespace);
-		if (portalContainer && portalContainer !== context.contextContainer) context = {
-			isParent: true,
-			anchorNode: portalContainer,
-			contextContainer: context.contextContainer,
-			computedContainer: portalContainer
-		};
-		component.viewMetadata = {
-			atom: from,
-			...context
-		};
-		let child = from.child;
-		while (child) {
-			buildView(nativeRenderer, component, child, context);
-			child = child.sibling;
-		}
-	});
+	const template = component.render();
+	const portalContainer = getContainer();
+	popContainer();
+	from.child = createChildChain(template, nativeRenderer, from.namespace);
+	if (portalContainer && portalContainer !== context.contextContainer) context = {
+		isParent: true,
+		anchorNode: portalContainer,
+		contextContainer: context.contextContainer,
+		computedContainer: portalContainer
+	};
+	component.viewMetadata = {
+		atom: from,
+		...context
+	};
+	let child = from.child;
+	while (child) {
+		buildView(nativeRenderer, component, child, context);
+		child = child.sibling;
+	}
+	component.rendered();
 }
 function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, namespace, key) {
 	const atom = {
@@ -2263,7 +2262,7 @@ function createChainByNode(jsxNode, prevAtom, nativeRenderer, elementNamespace)
 			if (Array.isArray(jsxNode)) return createChainByChildren(jsxNode, prevAtom, nativeRenderer, elementNamespace);
 			const nodeType = typeof jsxNode.type;
 			if (nodeType === "string") return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, nativeRenderer.getNameSpace(jsxNode.type, elementNamespace), jsxNode.key);
-			else if (nodeType === "function") return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, elementNamespace, jsxNode.key);
+			if (nodeType === "function") return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, elementNamespace, jsxNode.key);
 		}
 		const text = String(jsxNode);
 		return createChainByJSXNode(TextAtomType, text, text, prevAtom, elementNamespace);
@@ -2292,7 +2291,7 @@ function insertNode(nativeRenderer, atom, context) {
 	else nativeRenderer.insertAfter(atom.nativeNode, context.anchorNode, atom.namespace);
 }
 function createElementChildren(type, children, nativeRenderer, namespace) {
-	return createChildChain(children, nativeRenderer, nativeRenderer.getNameSpace(type, namespace));
+	return createChildChain(children, nativeRenderer, nativeRenderer.getChildrenNameSpace(type, namespace));
 }
 function createElement(nativeRenderer, atom, parentComponent, context) {
 	const { namespace, jsxNode } = atom;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "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",