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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 kenconnet666
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,70 @@
-# Temporary Holding Version
+# @zerodep-dev/vue-tsx-pro-mini
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+在微信、支付宝小程序里渲染 vue-tsx-pro 的组件：同一份 TSX 页面、同一个发布的组件库，H5 直接渲染 DOM，小程序经这里渲染。
+还在概念验证之后的补全阶段（ROADMAP 阶段 17），没有发布。
+
+## 怎么工作
+
+- **渲染**：Vue 的自定义渲染器（`renderer.ts`）把虚拟节点落到 `MiniNode` 树上（`node.ts`）；页面（`page.ts`）在微任务里把这一轮的变化
+  合成一次 setData——子节点变了的整段发，只是字段变了的按路径只发变了的那几个。
+- **模板**：每种元素一套通用模板，按层展开（小程序的模板不能递归调用自己），数据里的 `t` 选模板（`build/templates.ts`）。
+- **样式**：小程序不能在运行时插规则。样式引擎照常生成组合类，渲染时用 tsx 的 `inlineStyle` 按类名查回声明表，条件（属性选择器、
+  `:active`、`@media` 宽度）由 `style.ts` 按节点状态判定，展开成行内样式。主题变量与关键帧在构建时从包里收集成 app 样式表。
+  展开不了的写法（伪元素、`:nth-child`、标签与类名选择器、`@supports`）按不成立处理，开发构建的 console 里每种提示一次；
+  app 样式表里留着 WXSS 不认的写法（`:root`、`:not` 里的选择器列表）时构建时提示。
+- **事件**：模板一律 catch 绑定，原生冒泡停在最内层，冒泡由运行时按节点树做（两端冒泡时 `target` 的含义不同，不能靠它去重）。
+- **SVG**：小程序没有 SVG，`svg` 子树序列化成遮罩（`mask-image`），底色取 `currentColor`。
+
+## 用法
+
+新项目从模板建（`template/`：H5 与两端小程序共用页面）：
+
+```sh
+npx @zerodep-dev/vue-tsx-pro-mini create my-app
+```
+
+```ts
+// src/app.ts：声明页面，第一个是首页
+import { definePages } from '@zerodep-dev/vue-tsx-pro-mini';
+export default definePages({ index: HomePage });
+
+// mini.config.ts：构建配置（MiniBuildOptions 去掉 root、platform）
+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: 'wx…', darkmode: true });
+```
+
+命令（`vtp-mini`，在应用目录里运行）：`build [wx] [my]` 构建两端或指定的一端；`dev [wx|my]` 监听；
+`open [wx|my]` 在开发者工具里打开产物（微信按安装位置找命令行，装在别处时设 `WECHAT_DEVTOOLS_CLI`；支付宝用 `minidev ide`）；
+`create <目录>` 从模板建项目。也可以在脚本里直接调 `buildMini` / `watchMini`。
+
+页面组件收到 `query` 属性（跳转时带的参数，已解码）。页面级的回调与跳转：`onPageShow`、`onPageHide`、`onReachBottom`（在 H5 里调用什么也不做），
+`navigateTo('detail', { id: 42 })`、`redirectTo`、`reLaunch`、`navigateBack`（按 definePages 的页面名）。
+
+监听模式（`vtp-mini dev`、`watchMini`）：依赖（Vue、运行时、组件库）单独打成 `vtp-vendor.js`，只在依赖的列表变了时重打；
+改了源码只重打应用自己的代码（约 0.3–0.5 s，带源码映射），开发者工具看到产物变了会自己重新编译。
+
+授权类能力（`capability.ts`）是宿主约定的一部分：设备权限按微信的 scope、支付宝的 authSetting 查与申请，存储、登录、
+支付、订阅消息、手机号按两端各自的接口调用，支付结果统一成 success / cancel / pending / fail；微信的隐私协议回调交给组件库的弹窗。
+带 `open-type` 的 button 换成原生按钮模板（`btn`），平台事件统一成 `opentype`。`mini.config.ts` 的 `permissions`（位置权限的用途说明）
+与 `requiredPrivateInfos` 写进微信的 app.json。
+
+完整的例子是 `apps/mobile-demo`（`node build.ts` 两端都构建，`pnpm dev:mini` 监听微信端，`pnpm dev` 看 H5）。
+
+## 验证与踩过的坑
+
+- 微信：开发者工具自带技能 CLI，`wechatide -c <客户端名> <工具>`（导入项目、打开窗口、截图、读 console、自动化点击输入、执行 JS）；
+  第一次调用要在开发者工具里点授权。项目要有真实 AppID，`touristappid` 会报 APPID_ERROR。
+  `wcsc.exe`（开发者工具安装目录的 `resources/app.asar.unpacked/node_modules/wcc-exec/`）能单独编译 WXSS，报错带行列。
+- 支付宝：没有官方 MCP。`minidev build` 离线编译检查，`minidev ide -p <目录>` 在开发者工具里打开；IDE 有编译缓存，改了包要"清除构建缓存"。
+- WXSS 不认 `:root`，和 `page` 写在同一个选择器列表里会让整条规则失效；`:not(a,b)` 这种选择器列表编不过。
+- 支付宝的逻辑层跑在 Worker 里，旧环境没有 `globalThis`；编译器要看产物根目录的 `.browserslistrc` 才按新语法解析；
+  Vue 选项式 API 里 `computed` 那段（`set:e=>i.value=e`）它解析不了，构建时关掉选项式 API。
+- 依赖（animejs）在模块顶层取 `setImmediate` / `requestAnimationFrame`，逻辑层没有：`./globals` 补上，排在打包入口最前面。
+  补上了微信里裸写的 `requestAnimationFrame` 仍然取不到（报 not a function）：组件里要等视图层画完用宿主的 `nextFrame`（等 setData 生效）。
+- 模板层数（24）用完后，更深的节点交给递归的自定义组件 `vtp-comp`（模板从第 0 层重新开始）。它要在 app.json 的 usingComponents 里全局登记，`n 只在页面的 json 里登记时微信不实例化；组件里的原生 tap 不可靠（按下时整段子树重发给组件属性，tap 会丢），
+  那一段的点击由运行时按 touchstart / touchend 合成（同一节点、移动不到 10px、不到 700ms）。
+- 行内样式走字典：页面数据的 `ss` 里每种样式串只发一次，节点只带编号（`st`），模板写 `sd[i.st]`。1000 行单元格的首屏
+  setData 从 1.9 MB 降到 320 KB（微信单次上限 1 MB）；基准在 `packages/mobile/src/.test/setdata.bench.test.tsx`。
+  传给模板时写成 `data="{{i: item, ss: ss}}"`（键与变量同名）微信的模板里取不到，换了名字（`sd: ss`）才行。
+- Taro 按使用方源码扫描裁剪模板，预编译库里动态创建的元素没有模板；这里的模板按元素全量生成，不扫描源码。

package/dist/build.d.ts

@@ -0,0 +1,104 @@
+import { PluginOption } from "vite";
+//#region src/build/platforms.d.ts
+/** 微信与支付宝在产物上的差别：文件后缀、模板指令前缀、事件属性写法、项目配置文件 */
+interface Platform {
+  readonly name: 'wx' | 'my';
+  readonly template: 'wxml' | 'axml';
+  readonly style: 'wxss' | 'acss';
+  /** 列表指令前缀：wx:for / a:for */
+  readonly directive: 'wx' | 'a';
+  /**
+   * 事件属性：catchtap / catchTap。用 catch 让原生冒泡停在最内层的节点，冒泡由运行时按节点树做（page.ts）；
+   * 两端冒泡时 target 的含义不同（支付宝每一层的 target 都是当前节点），不能靠它去重
+   */
+  event(name: NativeEventName): string;
+  /**
+   * 冒泡的事件属性：bindtouchstart / onTouchStart。按下、松开不能 catch：真机上 catch 掉之后不再产生 tap
+   * （模拟器照常有），冒泡带来的重复由运行时按事件时间去掉
+   */
+  bubble(name: NativeEventName): string;
+  /**
+   * 手势节点（模板 touch）的 touchmove：平时 bind（页面照常滚动），节点要 catch 时（横向滑动的过程中）换成 catch。
+   * 微信的事件名可以是表达式；支付宝不行，只 bind
+   */
+  touchMove: string;
+  /**
+   * 无障碍属性：节点数据里的读屏字段（page.ts 的 A11Y_ATTRS）写到模板上。微信的组件认 aria-role、aria-label 等；
+   * 支付宝没有对应的属性，空着
+   */
+  a11y: string;
+  /** 开放能力按钮（模板 btn）的原生 button 上额外绑的属性与事件 */
+  openButton: string;
+}
+/** 模板上绑的原生事件 */
+type NativeEventName = 'tap' | 'longpress' | 'touchstart' | 'touchmove' | 'touchend' | 'touchcancel' | 'input' | 'confirm' | 'focus' | 'blur' | 'load' | 'error';
+//#endregion
+//#region src/build/index.d.ts
+export interface MiniBuildOptions {
+  /** 应用目录 */
+  root: string;
+  /** 平台：wx 微信，my 支付宝 */
+  platform: Platform['name'];
+  /** 应用入口，相对 root；默认导出 definePages 的结果 */
+  entry?: string;
+  /** 产物目录，相对 root；默认 dist/<平台> */
+  outDir?: string;
+  /** 编译应用源码的插件（vueTsxPro()） */
+  plugins?: PluginOption[];
+  /** 微信的 AppID（project.config.json） */
+  appId?: string;
+  /** app.json 的 window */
+  window?: Record<string, unknown>;
+  /**
+   * 跟随系统的深浅色：微信要在 app.json 里开 darkmode 才会报告深色（ConfigProvider 的 theme="system" 用）；
+   * 导航栏的颜色在 window 里写死时不受影响
+   */
+  darkmode?: boolean;
+  /**
+   * 位置权限的用途说明，用户授权时看到（微信 app.json 的 permission；精确位置 location、模糊位置 fuzzyLocation）。
+   * 申请位置权限时必须写
+   */
+  permissions?: {
+    location?: string;
+    fuzzyLocation?: string;
+  };
+  /**
+   * 用到的地理位置接口（微信 app.json 的 requiredPrivateInfos，没声明的调用时报错）：如 getLocation、chooseLocation、
+   * getFuzzyLocation。模糊位置与精确位置的接口互斥，同时声明时构建报错
+   */
+  requiredPrivateInfos?: string[];
+  /** 开发构建：不压缩，Vue 带开发期检查 */
+  development?: boolean;
+}
+/** 应用目录里 mini.config.ts 的内容：vtp-mini 命令按它构建，root 是配置文件所在目录，平台与开发模式由命令决定 */
+export type MiniConfig = Omit<MiniBuildOptions, 'root' | 'platform' | 'development'>;
+/**
+ * 写 mini.config.ts 用，只为带上类型：
+ *
+ *   export default defineMiniConfig({ plugins: vueTsxPro(), appId: 'wx…' });
+ */
+export declare const defineMiniConfig: (config: MiniConfig) => MiniConfig;
+export declare function buildMini(options: MiniBuildOptions): Promise<{
+  outDir: string;
+  pages: readonly string[];
+}>;
+/** 监听模式的句柄 */
+export interface MiniWatcher {
+  /** 停止监听 */
+  close(): Promise<void>;
+}
+/**
+ * 监听模式：应用的包不打依赖（Vue、运行时、组件库……），对它们的 require 换成从 vtp-vendor.js 取；
+ * 依赖包只在依赖的列表变了时重打。源码改了只重打应用自己的代码，再重写小程序的文件，开发者工具看到产物变了会自己重新编译。
+ * 每次打完调用 onBuild（第几次、页面、耗时）
+ *
+ *   const watcher = await watchMini({ ...options, development: true }, ({ pages, ms }) => console.log(ms));
+ */
+export declare function watchMini(options: MiniBuildOptions, onBuild?: (result: {
+  outDir: string;
+  pages: readonly string[];
+  ms: number;
+  count: number;
+}) => void): Promise<MiniWatcher>;
+//#endregion
+export {};

package/dist/build.js

@@ -0,0 +1,430 @@
+import { copyFileSync, existsSync, mkdirSync, rmSync, writeFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { join, resolve } from "node:path";
+import { build } from "vite";
+//#region src/build/app.ts
+/** 精确位置的接口：与模糊位置 getFuzzyLocation 不能同时声明（微信编译时报错） */
+const PRECISE_LOCATION = [
+	"getLocation",
+	"onLocationChange",
+	"startLocationUpdate",
+	"startLocationUpdateBackground"
+];
+/** 微信 app.json 独有的字段：深浅色、位置权限的用途说明、地理位置接口的声明 */
+function wechatAppFields(options) {
+	const fields = {};
+	if (options.darkmode) fields.darkmode = true;
+	const { location, fuzzyLocation } = options.permissions ?? {};
+	if (location || fuzzyLocation) fields.permission = {
+		...location ? { "scope.userLocation": { desc: location } } : {},
+		...fuzzyLocation ? { "scope.userFuzzyLocation": { desc: fuzzyLocation } } : {}
+	};
+	const infos = options.requiredPrivateInfos;
+	if (infos?.length) {
+		const precise = infos.filter((name) => PRECISE_LOCATION.includes(name));
+		if (precise.length && infos.includes("getFuzzyLocation")) throw new Error(`requiredPrivateInfos 里 getFuzzyLocation 与精确位置的接口（${precise.join("、")}）互斥，只能留一类`);
+		fields.requiredPrivateInfos = infos;
+	}
+	return fields;
+}
+/** app.json 的 window 按微信的字段写；支付宝的标题字段叫 defaultTitle，补上 */
+function windowConfig(platform, window = {}) {
+	if (platform.name !== "my" || window.navigationBarTitleText === void 0) return window;
+	return {
+		...window,
+		defaultTitle: window.navigationBarTitleText
+	};
+}
+//#endregion
+//#region src/build/platforms.ts
+/** 支付宝的事件名是驼峰：onTouchStart、catchLongTap */
+const camel = {
+	tap: "Tap",
+	longpress: "LongTap",
+	touchstart: "TouchStart",
+	touchmove: "TouchMove",
+	touchend: "TouchEnd",
+	touchcancel: "TouchCancel",
+	input: "Input",
+	confirm: "Confirm",
+	focus: "Focus",
+	blur: "Blur",
+	load: "Load",
+	error: "Error"
+};
+const PLATFORMS = {
+	wx: {
+		name: "wx",
+		template: "wxml",
+		style: "wxss",
+		directive: "wx",
+		event: (name) => `catch${name}`,
+		bubble: (name) => `bind${name}`,
+		touchMove: `bindtouchmove="{{i.cm ? '' : 'eh'}}" catchtouchmove="{{i.cm ? 'eh' : ''}}"`,
+		a11y: "aria-role=\"{{i.ar}}\" aria-label=\"{{i.al}}\" aria-hidden=\"{{i.ahi}}\" aria-checked=\"{{i.ack}}\" aria-disabled=\"{{i.adi}}\" aria-selected=\"{{i.ase}}\" aria-expanded=\"{{i.aex}}\"",
+		openButton: "open-type=\"{{i.ot}}\" hover-class=\"none\" bindgetphonenumber=\"eh\" bindchooseavatar=\"eh\" bindagreeprivacyauthorization=\"eh\" binderror=\"eh\""
+	},
+	my: {
+		name: "my",
+		template: "axml",
+		style: "acss",
+		directive: "a",
+		event: (name) => `catch${camel[name]}`,
+		bubble: (name) => `on${camel[name]}`,
+		touchMove: "onTouchMove=\"eh\"",
+		a11y: "",
+		openButton: "open-type=\"{{i.ot}}\" scope=\"{{i.os}}\" onGetAuthorize=\"eh\" onError=\"eh\""
+	}
+};
+//#endregion
+//#region src/build/styles.ts
+/**
+* app 样式表：运行时没法插规则，构建时把"模块加载时就定下来的"静态规则收集出来——
+* 主题变量组（:root 上的默认值，换成小程序的 page）与关键帧；组合类在渲染时展开成行内样式，不进这里。
+* 规则来自打好的包自己（它导出 styleText），只含真正打进包里的模块。
+*/
+/** 元素的默认显示方式（运行时的 baseClassOf） */
+const BASE = [
+	".vtp-inline{display:inline}",
+	".vtp-inline-block{display:inline-block}",
+	".vtp-btn{margin:0;padding:0;border:0;border-radius:0;background:none;font-size:inherit;line-height:inherit;color:inherit;text-align:inherit;width:auto;overflow:visible}",
+	".vtp-btn::after{display:none}"
+].join("\n");
+/** 引擎收集的规则原文 → app 样式表 */
+function appStyles(styleText) {
+	const rules = topLevelRules(styleText).filter((rule) => rule.startsWith(":root") || rule.startsWith("@keyframes") || rule.startsWith("@media") && rule.includes(":root{")).map((rule) => rule.replaceAll(":root{", "page{"));
+	for (const rule of rules) {
+		const problem = WXSS_REJECTS.find(({ pattern }) => pattern.test(rule));
+		if (problem) console.warn(`[vtp-mini] app 样式表里 ${problem.reason}，WXSS 编不过：${rule}`);
+	}
+	return [BASE, ...rules].join("\n");
+}
+/** WXSS 编译器不认的写法（微信开发者工具的 wcsc 报错）：引擎改了规则的输出格式时在构建时就提示 */
+const WXSS_REJECTS = [{
+	pattern: /:root\b/,
+	reason: ":root 没换成 page（和别的选择器写在同一个列表里）"
+}, {
+	pattern: /:not\([^)]*,/,
+	reason: ":not 里写了选择器列表"
+}];
+/** 按顶层花括号配平切出规则（@media 等块规则整体算一条） */
+function topLevelRules(css) {
+	const rules = [];
+	let depth = 0;
+	let start = 0;
+	for (let index = 0; index < css.length; index++) if (css[index] === "{") depth++;
+	else if (css[index] === "}" && --depth === 0) {
+		rules.push(css.slice(start, index + 1).trim());
+		start = index + 1;
+	}
+	return rules;
+}
+//#endregion
+//#region src/build/templates.ts
+/**
+* 通用模板：每种元素一套模板，按层级展开（小程序的模板不能递归调用自己），
+* 节点数据的 t 选模板（运行时见 page.ts）。层数用完后，更深的子节点交给递归的自定义组件 vtp-comp：
+* 它的模板从第 0 层重新开始，所以嵌套多深都能画（同 Taro 的 comp）。
+*/
+/** base 模板文件（base.wxml / base.axml） */
+function baseTemplate(platform) {
+	const on = (names) => names.map((name) => `${platform.event(name)}="eh"`).join(" ");
+	const bubbling = (names) => names.map((name) => `${platform.bubble(name)}="eh"`).join(" ");
+	const tapEvents = `${on(["tap", "longpress"])} ${bubbling([
+		"touchstart",
+		"touchend",
+		"touchcancel"
+	])}`;
+	const common = `id="{{i.id}}" class="{{i.c}}" style="{{sd[i.st]}}" data-s="{{i.s}}" ${platform.a11y}`;
+	const field = `maxlength="{{i.maxlength || -1}}" disabled="{{i.dis}}" focus="{{i.af}}" confirm-type="{{i.ct || 'done'}}"`;
+	const inputEvents = on([
+		"input",
+		"confirm",
+		"focus",
+		"blur"
+	]);
+	const templates = [];
+	for (let level = 0; level < 24; level++) {
+		const children = level + 1 < 24 ? `${loop(platform, "i.cn")}<template is="{{'vtp_' + item.t + '_${level + 1}'}}" data="{{i: item, sd: sd}}"/></block>` : `${loop(platform, "i.cn")}<vtp-comp i="{{item}}" sd="{{sd}}"/></block>`;
+		const view = (type, events) => `<template name="vtp_${type}_${level}"><view ${common} ${events}>${children}</view></template>`;
+		templates.push(view("v", tapEvents), view("lock", `${tapEvents} ${on(["touchmove"])}`), view("touch", `${tapEvents} ${platform.touchMove}`), `<template name="vtp_btn_${level}"><button ${platform.openButton} ${common} ${tapEvents}>${children}</button></template>`, `<template name="vtp_x_${level}">{{i.v}}</template>`, `<template name="vtp_n_${level}"><block></block></template>`, `<template name="vtp_svg_${level}"><view ${common} ${tapEvents}/></template>`, `<template name="vtp_image_${level}"><image src="{{i.src}}" mode="{{i.mode || 'scaleToFill'}}" lazy-load="{{i.lz}}" ${common} ${tapEvents} ${on(["load", "error"])}/></template>`, `<template name="vtp_input_${level}"><input value="{{i.value}}" placeholder="{{i.placeholder}}" type="{{i.type || 'text'}}" password="{{i.pw}}" ${field} ${common} ${tapEvents} ${inputEvents}/></template>`, `<template name="vtp_textarea_${level}"><textarea value="{{i.value}}" placeholder="{{i.placeholder}}" auto-height="{{i.ah}}" ${field} ${common} ${tapEvents} ${inputEvents}/></template>`);
+	}
+	return templates.join("\n");
+}
+/** 递归组件 vtp-comp 的模板：引入 base，从第 0 层画传进来的节点 */
+function componentTemplate(platform) {
+	return [`<import src="../../base.${platform.template}"/>`, `<block ${platform.directive}:if="{{i.t}}"><template is="{{'vtp_' + i.t + '_0'}}" data="{{i: i, sd: sd}}"/></block>`].join("\n");
+}
+/** 页面模板：引入 base，从根节点的子节点开始渲染 */
+function pageTemplate(platform) {
+	return [`<import src="../../base.${platform.template}"/>`, `${loop(platform, "root.cn")}<template is="{{'vtp_' + item.t + '_0'}}" data="{{i: item, sd: ss}}"/></block>`].join("\n");
+}
+const loop = (platform, list) => `<block ${platform.directive}:for="{{${list}}}" ${platform.directive}:key="s">`;
+//#endregion
+//#region src/build/index.ts
+/**
+* 构建小程序：应用入口（definePages 的默认导出）连同运行时、Vue、组件库打成一个 CommonJS 包 vtp.js，
+* 再生成小程序要的文件——app.js / app.json、每个页面的 js / json / 模板、通用模板、app 样式表、项目配置。
+* 组件库按发布的产物（dist）打进来，不重新编译；应用自己的 TSX 由传入的插件（vueTsxPro）编译。
+*
+*   await buildMini({ root: import.meta.dirname, platform: 'wx', plugins: vueTsxPro(), appId: 'wx…' });
+*/
+/**
+* 写 mini.config.ts 用，只为带上类型：
+*
+*   export default defineMiniConfig({ plugins: vueTsxPro(), appId: 'wx…' });
+*/
+const defineMiniConfig = (config) => config;
+async function buildMini(options) {
+	const { config, outDir, platform } = prepare(options, false);
+	await build(config);
+	return finish(options, platform, outDir, 0);
+}
+/** 监听模式下依赖单独成包的文件名 */
+const VENDOR = "vtp-vendor.js";
+/** 包名（依赖）：不是相对路径、绝对路径、虚拟模块 */
+const isBare = (id) => !/^(?:[./\\]|[A-Za-z]:|\0)/.test(id);
+/**
+* 监听模式：应用的包不打依赖（Vue、运行时、组件库……），对它们的 require 换成从 vtp-vendor.js 取；
+* 依赖包只在依赖的列表变了时重打。源码改了只重打应用自己的代码，再重写小程序的文件，开发者工具看到产物变了会自己重新编译。
+* 每次打完调用 onBuild（第几次、页面、耗时）
+*
+*   const watcher = await watchMini({ ...options, development: true }, ({ pages, ms }) => console.log(ms));
+*/
+async function watchMini(options, onBuild) {
+	const { config, outDir, platform } = prepare(options, true);
+	const externals = /* @__PURE__ */ new Set();
+	config.plugins = [...await cacheTransforms(config.plugins ?? []), vendorRequires(externals)];
+	config.build.rolldownOptions.external = isBare;
+	const watcher = await build(config);
+	let count = 0;
+	let started = performance.now();
+	let vendorKey = "";
+	let queue = Promise.resolve();
+	watcher.on("event", (event) => {
+		if (event.code === "START") started = performance.now();
+		else if (event.code === "ERROR") console.error(event.error);
+		else if (event.code === "END") queue = queue.then(async () => {
+			const key = [...externals].sort().join("\n");
+			if (key !== vendorKey) {
+				vendorKey = key;
+				await buildVendor(options, outDir, [...externals].sort());
+			}
+			const result = finish(options, platform, outDir, ++count);
+			onBuild?.({
+				...result,
+				ms: Math.round(performance.now() - started),
+				count
+			});
+		}).catch((error) => console.error(error));
+	});
+	return { close: () => watcher.close() };
+}
+/**
+* 插件的 transform 按文件内容缓存：监听模式下每次重打都会把应用的每个文件再交给插件编译一遍（TSX 编译最费时），
+* 内容没变的直接用上次的结果
+*/
+async function cacheTransforms(options) {
+	return (await flatPlugins(options)).map((plugin) => {
+		const hook = plugin.transform;
+		if (!hook) return plugin;
+		const handler = typeof hook === "function" ? hook : hook.handler;
+		const cache = /* @__PURE__ */ new Map();
+		const cached = async function(code, id, ...rest) {
+			const hit = cache.get(id);
+			if (hit?.code === code) return hit.result;
+			const result = await handler.call(this, code, id, ...rest);
+			cache.set(id, {
+				code,
+				result
+			});
+			return result;
+		};
+		return {
+			...plugin,
+			transform: typeof hook === "function" ? cached : {
+				...hook,
+				handler: cached
+			}
+		};
+	});
+}
+/** Vite 的插件选项可以嵌套数组、Promise，展开成插件列表 */
+async function flatPlugins(option) {
+	const value = await option;
+	if (Array.isArray(value)) return (await Promise.all(value.map(flatPlugins))).flat();
+	return value ? [value] : [];
+}
+/** 应用的包里对依赖的 require 换成从 vtp-vendor.js 取（小程序的 require 只认相对路径），顺带记下用到了哪些依赖 */
+function vendorRequires(externals) {
+	return {
+		name: "vtp-mini:vendor-requires",
+		renderChunk(code, chunk) {
+			for (const id of chunk.imports) if (isBare(id)) externals.add(id);
+			return {
+				code: code.replace(/require\((["'])([^"']+)\1\)/g, (match, _quote, id) => externals.has(id) ? `require("./${VENDOR}").modules[${JSON.stringify(id)}]` : match),
+				map: null
+			};
+		}
+	};
+}
+/** 依赖单独成包：各依赖的模块对象放进 modules（键是包名），补全全局函数的模块排在最前面 */
+async function buildVendor(options, outDir, ids) {
+	const file = join(cacheDir(options.root), "vendor-entry.js");
+	writeFileSync(file, [
+		`import '@zerodep-dev/vue-tsx-pro-mini/globals';`,
+		...ids.map((id, index) => `import * as m${index} from ${JSON.stringify(id)};`),
+		`export const modules = { ${ids.map((id, index) => `${JSON.stringify(id)}: m${index}`).join(", ")} };`
+	].join("\n"));
+	const { config } = prepare(options, false, file);
+	await build({
+		...config,
+		plugins: [],
+		build: {
+			...config.build,
+			emptyOutDir: false,
+			sourcemap: false,
+			lib: {
+				entry: file,
+				formats: ["cjs"],
+				fileName: () => VENDOR
+			}
+		}
+	});
+}
+/** 两种构建共用的 Vite 配置 */
+function prepare(options, watch, entryFile) {
+	const platform = PLATFORMS[options.platform];
+	const outDir = resolve(options.root, options.outDir ?? `dist/${platform.name}`);
+	const entry = entryFile ?? writeEntry(options.root, resolve(options.root, options.entry ?? "src/app.ts"));
+	const mode = options.development ? "development" : "production";
+	return {
+		config: {
+			root: options.root,
+			configFile: false,
+			logLevel: "warn",
+			mode,
+			plugins: options.plugins ?? [],
+			define: {
+				"process.env.NODE_ENV": JSON.stringify(mode),
+				__VUE_OPTIONS_API__: "false",
+				__VUE_PROD_DEVTOOLS__: "false",
+				__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "false"
+			},
+			build: {
+				outDir,
+				emptyOutDir: !watch,
+				minify: !options.development,
+				sourcemap: !!options.development,
+				target: "es2017",
+				lib: {
+					entry,
+					formats: ["cjs"],
+					fileName: () => "vtp.js"
+				},
+				rolldownOptions: { output: {
+					exports: "named",
+					codeSplitting: false
+				} },
+				watch: watch ? {} : null
+			}
+		},
+		outDir,
+		platform
+	};
+}
+/**
+* 打完之后：在 Node 里加载包（运行时只在页面 onLoad 时才碰小程序的全局 API）取页面列表与静态样式，写出小程序的其余文件。
+* 包（与依赖包）复制到缓存目录里一个声明了 CommonJS 的子目录再 require（应用目录多半是 type: module）；
+* 每次一个新目录，躲开 require 的缓存
+*/
+function finish(options, platform, outDir, count) {
+	const dir = join(cacheDir(options.root), `run-${platform.name}-${count}`);
+	mkdirSync(dir, { recursive: true });
+	writeFileSync(join(dir, "package.json"), "{\"type\":\"commonjs\"}");
+	for (const name of ["vtp.js", VENDOR]) if (existsSync(join(outDir, name))) copyFileSync(join(outDir, name), join(dir, name));
+	const bundle = createRequire(join(dir, "vtp.js"))(join(dir, "vtp.js"));
+	rmSync(dir, {
+		recursive: true,
+		force: true
+	});
+	emit(outDir, platform, bundle, options);
+	return {
+		outDir,
+		pages: bundle.names
+	};
+}
+/** 构建的中间文件放在应用的 node_modules/.cache 下，不污染源码目录 */
+function cacheDir(root) {
+	const dir = join(root, "node_modules", ".cache", "vtp-mini");
+	mkdirSync(dir, { recursive: true });
+	return dir;
+}
+/** 打包入口：应用的页面加上静态样式的导出 */
+function writeEntry(root, appEntry) {
+	const dir = cacheDir(root);
+	const file = join(dir, "entry.js");
+	writeFileSync(file, [
+		`import '@zerodep-dev/vue-tsx-pro-mini/globals';`,
+		`import pages from ${JSON.stringify(appEntry.replaceAll("\\", "/"))};`,
+		`export { styleText } from '@zerodep-dev/vue-tsx-pro-tsx/styles';`,
+		"export const names = pages.names;",
+		"export const page = (name) => pages.page(name);",
+		`export { dispatchToCurrentPage as eh } from '@zerodep-dev/vue-tsx-pro-mini';`
+	].join("\n"));
+	return file;
+}
+/**
+* 递归组件的脚本：节点数据从属性 i、样式字典从 sd 传进来，事件交给运行时（页面栈顶的页面）。
+* 不渲染组件自己的节点（virtualHost），也用 app 的样式表（微信默认把组件的样式隔开）
+*/
+function componentScript(platform) {
+	return `const { eh } = require('../../vtp.js');\nComponent(${platform.name === "wx" ? `{ options: { virtualHost: true, styleIsolation: 'apply-shared' }, properties: { i: { type: Object, value: {} }, sd: { type: Object, value: {} } }, methods: { eh } }` : `{ options: { virtualHost: true }, props: { i: {}, sd: {} }, methods: { eh } }`});\n`;
+}
+function emit(outDir, platform, bundle, options) {
+	const write = (path, content) => {
+		mkdirSync(join(outDir, path, ".."), { recursive: true });
+		writeFileSync(join(outDir, path), content);
+	};
+	const pages = bundle.names.map((name) => `pages/${name}/index`);
+	const usingComponents = { "vtp-comp": "/components/vtp-comp/index" };
+	write("app.js", "require('./vtp.js');\nApp({});\n");
+	write("app.json", JSON.stringify({
+		pages,
+		window: windowConfig(platform, options.window),
+		usingComponents,
+		...platform.name === "wx" ? wechatAppFields(options) : {}
+	}, null, 2));
+	write(`app.${platform.style}`, appStyles(bundle.styleText()));
+	write(`base.${platform.template}`, baseTemplate(platform));
+	for (const name of bundle.names) {
+		write(`pages/${name}/index.js`, `Page(require('../../vtp.js').page(${JSON.stringify(name)}));\n`);
+		write(`pages/${name}/index.json`, JSON.stringify({ usingComponents }));
+		write(`pages/${name}/index.${platform.template}`, pageTemplate(platform));
+	}
+	write("components/vtp-comp/index.json", JSON.stringify({
+		component: true,
+		usingComponents
+	}));
+	write(`components/vtp-comp/index.${platform.template}`, componentTemplate(platform));
+	write("components/vtp-comp/index.js", componentScript(platform));
+	if (platform.name === "wx") write("project.config.json", JSON.stringify({
+		appid: options.appId ?? "touristappid",
+		compileType: "miniprogram",
+		libVersion: "latest",
+		setting: {
+			es6: true,
+			minified: false,
+			urlCheck: false
+		}
+	}, null, 2));
+	else {
+		write("mini.project.json", JSON.stringify({
+			format: 2,
+			compileOptions: {}
+		}, null, 2));
+		write(".browserslistrc", "defaults and fully supports es6-module");
+	}
+}
+//#endregion
+export { buildMini, defineMiniConfig, watchMini };

package/dist/cli.d.ts

@@ -0,0 +1 @@
+export {}