@zerodep-dev/vue-tsx-pro-mini 0.0.0-stage → 0.4.1

package/dist/testing.d.ts

@@ -0,0 +1,50 @@
+import { Component } from "vue";
+//#region src/testing.d.ts
+/** 页面数据里的一个节点（模板看到的字段） */
+export interface PageNode {
+  /** 编号 */
+  s: string;
+  /** 模板类型 */
+  t: string;
+  /** 文字（文本节点） */
+  v?: string;
+  /** 类名 */
+  c?: string;
+  /** 行内样式（页面数据里是样式字典 ss 的编号，测试工具换回样式串） */
+  st?: string;
+  /** 子节点 */
+  cn?: PageNode[];
+  [field: string]: unknown;
+}
+type Data = Record<string, unknown>;
+/** 按小程序的规则应用 setData：键是 a.b[0].c 这样的路径，中间缺的对象、数组自动补上 */
+export declare function applySetData(target: Data, payload: Data): void;
+/** 挂上的页面 */
+export interface MountedPage {
+  /** 页面数据 */
+  readonly data: {
+    root: {
+      cn: PageNode[];
+    };
+  };
+  /** 等 Vue 的更新与 setData 都完成 */
+  settle(): Promise<void>;
+  /** 按深度优先找第一个满足条件的节点 */
+  find(predicate: (node: PageNode) => boolean): PageNode | undefined;
+  /** 页面上的全部文字 */
+  text(): string;
+  /** 点一下（touchstart → touchend → tap，与真机的顺序一致），等更新完成 */
+  tap(node: PageNode): Promise<void>;
+  /** 派发一个原生事件（input、scroll…），detail 是小程序事件的 detail */
+  dispatch(node: PageNode, type: string, detail?: unknown): Promise<void>;
+  /** 派发一次触摸（touchstart / touchmove / touchend），触点在 (x, y) */
+  touch(node: PageNode, type: string, x: number, y: number): Promise<void>;
+  /** 页面的生命周期：显示、隐藏、滚到底 */
+  lifecycle(event: 'show' | 'hide' | 'reachBottom'): Promise<void>;
+  /** 卸载 */
+  unmount(): void;
+}
+/** 把组件挂成一个页面 */
+export declare function mountPage(component: Component, query?: Record<string, string>): MountedPage;
+//#endregion
+export {};

package/dist/testing.js

@@ -0,0 +1,109 @@
+import { n as pageOptions } from "./page-upnBSowU.js";
+import { nextTick } from "vue";
+//#region src/testing.ts
+/** 按小程序的规则应用 setData：键是 a.b[0].c 这样的路径，中间缺的对象、数组自动补上 */
+function applySetData(target, payload) {
+	for (const [path, value] of Object.entries(payload)) {
+		const keys = path.match(/[^.[\]]+/g);
+		let current = target;
+		keys.slice(0, -1).forEach((key, index) => {
+			if (current[key] === void 0 || current[key] === null) current[key] = /^\d+$/.test(keys[index + 1]) ? [] : {};
+			current = current[key];
+		});
+		current[keys.at(-1)] = structuredClone(value);
+	}
+}
+/** 节点的 st 是样式字典的编号：换回样式串，断言照常写 node.st.includes(…) */
+function resolveStyles(data) {
+	const dictionary = data.ss ?? {};
+	const walk = (node) => {
+		if (typeof node.st === "string" && node.st in dictionary) node.st = dictionary[node.st];
+		node.cn?.forEach(walk);
+	};
+	walk(data.root);
+}
+/** 把组件挂成一个页面 */
+function mountPage(component, query = {}) {
+	const options = pageOptions(component);
+	const page = {
+		data: structuredClone(options.data),
+		setData(payload, callback) {
+			applySetData(page.data, payload);
+			resolveStyles(page.data);
+			callback?.();
+		}
+	};
+	options.onLoad.call(page, query);
+	const settle = async () => {
+		for (let round = 0; round < 3; round++) {
+			await nextTick();
+			await Promise.resolve();
+		}
+	};
+	const all = (nodes = page.data.root.cn) => nodes.flatMap((node) => [node, ...all(node.cn ?? [])]);
+	/** 从节点往上到根的每一层（含自己） */
+	const ancestors = (node, nodes = page.data.root.cn ?? []) => {
+		for (const child of nodes) {
+			if (child === node) return [node];
+			const path = ancestors(node, child.cn ?? []);
+			if (path.length) return [...path, child];
+		}
+		return [];
+	};
+	let timeStamp = 0;
+	const fire = async (node, event) => {
+		const stamp = ++timeStamp;
+		const targets = event.type.startsWith("touch") ? ancestors(node) : [node];
+		for (const target of targets) options.eh.call(page, {
+			...event,
+			timeStamp: stamp,
+			currentTarget: { dataset: { s: target.s } }
+		});
+		await settle();
+	};
+	const dispatch = (node, type, detail) => fire(node, {
+		type,
+		detail
+	});
+	return {
+		data: page.data,
+		settle,
+		find: (predicate) => all().find(predicate),
+		text: () => all().map((node) => node.v ?? "").join(""),
+		async tap(node) {
+			await this.touch(node, "touchstart", 0, 0);
+			await this.touch(node, "touchend", 0, 0);
+			await fire(node, {
+				type: "tap",
+				changedTouches: [{
+					clientX: 0,
+					clientY: 0
+				}]
+			});
+		},
+		dispatch,
+		touch(node, type, x, y) {
+			const point = {
+				identifier: 0,
+				clientX: x,
+				clientY: y,
+				pageX: x,
+				pageY: y
+			};
+			return fire(node, {
+				type,
+				touches: type === "touchend" ? [] : [point],
+				changedTouches: [point]
+			});
+		},
+		async lifecycle(event) {
+			if (event === "show") options.onShow.call(page);
+			else if (event === "hide") options.onHide.call(page);
+			else options.onReachBottom.call(page);
+			await settle();
+		},
+		unmount: () => options.onUnload.call(page)
+	};
+}
+//#endregion
+export { applySetData, mountPage };

package/package.json

@@ -1,6 +1,74 @@
 {
   "name": "@zerodep-dev/vue-tsx-pro-mini",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.4.1",
+  "description": "Render vue-tsx-pro components in WeChat and Alipay mini programs: a Vue renderer over setData with generic templates, runtime styles resolved inline",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "vtp-mini": "./dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "template"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kenconnet666/vue-tsx-pro.git",
+    "directory": "packages/mini"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "miniprogram",
+    "wechat",
+    "alipay",
+    "renderer",
+    "tsx"
+  ],
+  "sideEffects": [
+    "./src/globals.ts",
+    "./dist/globals.js"
+  ],
+  "exports": {
+    ".": {
+      "@vue-tsx-pro/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./globals": {
+      "@vue-tsx-pro/source": "./src/globals.ts",
+      "types": "./dist/globals.d.ts",
+      "default": "./dist/globals.js"
+    },
+    "./testing": {
+      "@vue-tsx-pro/source": "./src/testing.ts",
+      "types": "./dist/testing.d.ts",
+      "default": "./dist/testing.js"
+    },
+    "./build": {
+      "@vue-tsx-pro/source": "./src/build/index.ts",
+      "types": "./dist/build.d.ts",
+      "default": "./dist/build.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "@zerodep-dev/vue-tsx-pro-tsx": "^0.4.1",
+    "vite": "^8.0.0",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "24.19.2",
+    "@zerodep-dev/vue-tsx-pro-tsx": "^0.4.1",
+    "tsdown": "0.23.1",
+    "typescript": "7.1.0-beta",
+    "vite": "8.3.4",
+    "vitest": "5.0.5",
+    "vue": "3.5.44"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc -p . --incremental --tsBuildInfoFile node_modules/.cache/typecheck.tsbuildinfo",
+    "test": "vitest run --configLoader native"
+  }
 }

package/template/gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

package/template/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>vtp-mobile-app</title>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/mini.config.ts

@@ -0,0 +1,12 @@
+// 小程序：npm run dev:wx（监听）、npm run build:mini（两端）、npm run open:wx（在开发者工具里打开）
+import { defineMiniConfig } from '@zerodep-dev/vue-tsx-pro-mini/build';
+import { vueTsxPro } from '@zerodep-dev/vue-tsx-pro-tsx/vite';
+
+export default defineMiniConfig({
+  plugins: vueTsxPro(),
+  // 换成自己的 AppID（或微信的「小程序测试号」）：touristappid 在开发者工具里会报 APPID_ERROR
+  appId: 'touristappid',
+  // 微信报告系统的深浅色，ConfigProvider 的 theme="system" 跟着切换
+  darkmode: true,
+  window: { navigationBarTitleText: 'vtp-mobile-app' },
+});

package/template/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "vtp-mobile-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "dev:wx": "vtp-mini dev wx",
+    "dev:my": "vtp-mini dev my",
+    "build:mini": "vtp-mini build",
+    "open:wx": "vtp-mini open wx",
+    "open:my": "vtp-mini open my",
+    "typecheck": "tsc -p ."
+  },
+  "dependencies": {
+    "@lucide/icons": "^1.59.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "typescript": "^7.0.2"
+  }
+}

package/template/src/app.ts

@@ -0,0 +1,5 @@
+// 小程序入口：页面名 → 页面组件，第一个是首页（mini.config.ts 的构建从这里开始）
+import { definePages } from '@zerodep-dev/vue-tsx-pro-mini';
+import { HomePage } from './pages/HomePage.tsx';
+
+export default definePages({ index: HomePage });

package/template/src/main.ts

@@ -0,0 +1,5 @@
+// H5 入口：页面组件直接挂到浏览器上
+import { createApp } from 'vue';
+import { HomePage } from './pages/HomePage.tsx';
+
+createApp(HomePage).mount('#app');

package/template/src/pages/HomePage.tsx

@@ -0,0 +1,25 @@
+// 首页：H5（main.ts）与两端小程序（app.ts）共用这一份
+import { Plus } from '@lucide/icons';
+import { _component } from '@zerodep-dev/vue-tsx-pro-tsx';
+import {
+  Button,
+  Cell,
+  CellGroup,
+  ConfigProvider,
+  showToast,
+} from '@zerodep-dev/vue-tsx-pro-mobile';
+
+export const HomePage = _component(() => {
+  let count = _state(0);
+  return () => (
+    <ConfigProvider theme="system">
+      <CellGroup title="开始">
+        <Cell title="计数" value={String(count)} />
+        <Cell title="提示" arrow onClick={() => showToast('你好')} />
+      </CellGroup>
+      <Button icon={Plus} onClick={() => count++}>
+        加一
+      </Button>
+    </ConfigProvider>
+  );
+});

package/template/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "jsx": "preserve",
+    "jsxImportSource": "@zerodep-dev/vue-tsx-pro-tsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["node", "vite/client", "@zerodep-dev/vue-tsx-pro-tsx/runes"]
+  },
+  "include": ["src", "*.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,5 @@
+// H5：npm run dev / npm run build
+import { defineConfig } from 'vite';
+import { vueTsxPro } from '@zerodep-dev/vue-tsx-pro-tsx/vite';
+
+export default defineConfig({ plugins: vueTsxPro() });