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

package/dist/cli.js

@@ -0,0 +1,123 @@
+#!/usr/bin/env node
+import { cpSync, existsSync, readFileSync, readdirSync, renameSync, writeFileSync } from "node:fs";
+import { basename, join, resolve } from "node:path";
+import { spawnSync } from "node:child_process";
+import { pathToFileURL } from "node:url";
+//#region src/cli.ts
+/**
+* 小程序的命令行，在应用目录（有 mini.config.ts）里运行：
+*
+*   vtp-mini build [wx] [my]   构建两端（或指定的一端）工程到 dist/<平台>
+*   vtp-mini dev [wx|my]       监听模式（默认微信）：改了源码只重打应用代码
+*   vtp-mini open [wx|my]      在开发者工具里打开产物（默认微信）
+*   vtp-mini create <目录>     从模板建一个新项目：H5 加两端小程序
+*
+* 微信开发者工具的命令行默认按安装位置找，装在别处时设环境变量 WECHAT_DEVTOOLS_CLI；
+* 支付宝用 minidev（npx 临时取）
+*/
+const [command = "help", ...args] = process.argv.slice(2);
+const cwd = process.cwd();
+const platformsIn = (list) => list.filter((arg) => arg === "wx" || arg === "my");
+/** 读应用目录里的 mini.config.ts（Node 直接按 TS 加载，不在 node_modules 里的文件会去掉类型） */
+async function loadConfig() {
+	const file = resolve(cwd, "mini.config.ts");
+	if (!existsSync(file)) throw new Error(`没有找到 ${file}：vtp-mini 要在应用目录里运行`);
+	const { default: config } = await import(pathToFileURL(file).href);
+	if (!config || typeof config !== "object") throw new Error(`${file} 要默认导出 defineMiniConfig(…)`);
+	return config;
+}
+async function build(platforms) {
+	const { buildMini } = await import("./build.js");
+	const config = await loadConfig();
+	for (const platform of platforms.length ? platforms : ["wx", "my"]) {
+		const started = performance.now();
+		const { outDir, pages } = await buildMini({
+			...config,
+			root: cwd,
+			platform
+		});
+		const seconds = ((performance.now() - started) / 1e3).toFixed(1);
+		console.log(`${platform}: ${pages.length} 个页面 → ${outDir}（${seconds}s）`);
+	}
+}
+async function dev(platform) {
+	const { watchMini } = await import("./build.js");
+	await watchMini({
+		...await loadConfig(),
+		root: cwd,
+		platform,
+		development: true
+	}, ({ outDir, ms, count }) => console.log(`${platform}: 第 ${count} 次（${ms} ms）→ ${outDir}`));
+}
+/** 微信开发者工具的命令行：环境变量优先，再按 Windows、macOS 的默认安装位置找 */
+function wechatCli() {
+	const found = [
+		process.env.WECHAT_DEVTOOLS_CLI,
+		"C:\\Program Files (x86)\\Tencent\\微信web开发者工具\\cli.bat",
+		"C:\\Program Files\\Tencent\\微信web开发者工具\\cli.bat",
+		"/Applications/wechatwebdevtools.app/Contents/MacOS/cli"
+	].find((path) => path && existsSync(path));
+	if (!found) throw new Error("没找到微信开发者工具的命令行，装在别处时设环境变量 WECHAT_DEVTOOLS_CLI");
+	return found;
+}
+async function open(platform) {
+	const config = await loadConfig();
+	const project = resolve(cwd, config.outDir ?? `dist/${platform}`);
+	if (!existsSync(project)) throw new Error(`${project} 还没有构建，先运行 vtp-mini build ${platform}`);
+	const [file, fileArgs] = platform === "wx" ? [wechatCli(), [
+		"open",
+		"--project",
+		project
+	]] : ["npx", [
+		"--yes",
+		"minidev",
+		"ide",
+		"-p",
+		project
+	]];
+	const quoted = [file, ...fileArgs].map((part) => /\s/.test(part) ? `"${part}"` : part);
+	const result = spawnSync(quoted.join(" "), {
+		stdio: "inherit",
+		shell: true
+	});
+	process.exitCode = result.status ?? 1;
+}
+/** 模板在包里的 template 目录（src/cli.ts 与 dist/cli.js 都在它的上一级） */
+const TEMPLATE = new URL("../template/", import.meta.url);
+function create(dir) {
+	if (!dir) throw new Error("用法：vtp-mini create <目录>");
+	const target = resolve(cwd, dir);
+	if (existsSync(target) && readdirSync(target).length) throw new Error(`${target} 不是空目录`);
+	cpSync(TEMPLATE, target, { recursive: true });
+	renameSync(join(target, "gitignore"), join(target, ".gitignore"));
+	const own = JSON.parse(readFileSync(new URL("../package.json", TEMPLATE), "utf8"));
+	const manifest = JSON.parse(readFileSync(join(target, "package.json"), "utf8"));
+	manifest.name = basename(target);
+	Object.assign(manifest.dependencies, {
+		"@zerodep-dev/vue-tsx-pro-mobile": `^${own.version}`,
+		"@zerodep-dev/vue-tsx-pro-tsx": own.peerDependencies["@zerodep-dev/vue-tsx-pro-tsx"],
+		vue: own.peerDependencies.vue
+	});
+	Object.assign(manifest.devDependencies, {
+		"@zerodep-dev/vue-tsx-pro-mini": `^${own.version}`,
+		vite: own.peerDependencies.vite
+	});
+	writeFileSync(join(target, "package.json"), `${JSON.stringify(manifest, null, 2)}\n`);
+	console.log(`已建好 ${target}\n  cd ${dir}\n  npm install\n  npm run dev        # H5\n  npm run dev:wx     # 微信，另开一个终端 npm run open:wx`);
+}
+const HELP = `用法：
+  vtp-mini build [wx] [my]   构建两端（或指定的一端）
+  vtp-mini dev [wx|my]       监听模式（默认微信）
+  vtp-mini open [wx|my]      在开发者工具里打开产物（默认微信）
+  vtp-mini create <目录>     从模板建一个新项目`;
+try {
+	if (command === "build") await build(platformsIn(args));
+	else if (command === "dev") await dev(platformsIn(args)[0] ?? "wx");
+	else if (command === "open") await open(platformsIn(args)[0] ?? "wx");
+	else if (command === "create") create(args[0]);
+	else console.log(HELP);
+} catch (error) {
+	console.error(error instanceof Error ? error.message : error);
+	process.exitCode = 1;
+}
+//#endregion

package/dist/elements-BDIG7-jU.js

@@ -0,0 +1,63 @@
+//#region src/elements.ts
+/** 标签 → 模板类型；没列出的都是 view */
+const TEMPLATES = {
+	"#text": "x",
+	"#comment": "n",
+	svg: "svg",
+	img: "image",
+	input: "input",
+	textarea: "textarea"
+};
+const templateOf = (tag) => TEMPLATES[tag] ?? "v";
+/** 浏览器里默认行内的标签：映射成 view 后挂 vtp-inline */
+const INLINE = /* @__PURE__ */ new Set([
+	"a",
+	"abbr",
+	"b",
+	"code",
+	"em",
+	"i",
+	"kbd",
+	"label",
+	"mark",
+	"s",
+	"small",
+	"span",
+	"strong",
+	"sub",
+	"sup",
+	"u"
+]);
+/** 浏览器里默认行内块的标签 */
+const INLINE_BLOCK = /* @__PURE__ */ new Set([
+	"button",
+	"select",
+	"textarea"
+]);
+/** 标签的默认显示方式对应的基础类（app 样式表里定义，见 build/styles.ts） */
+function baseClassOf(tag) {
+	if (INLINE.has(tag)) return "vtp-inline";
+	if (INLINE_BLOCK.has(tag)) return "vtp-inline-block";
+	return "";
+}
+/** 浏览器里禁用后不派发 click 的表单控件 */
+const FORM_CONTROLS = /* @__PURE__ */ new Set([
+	"button",
+	"input",
+	"select",
+	"textarea",
+	"fieldset"
+]);
+/** HTML 的布尔属性：值为 false 时等于没有这个属性（同 Vue 的 includeBooleanAttr） */
+const BOOLEAN_ATTRS = /* @__PURE__ */ new Set([
+	"checked",
+	"disabled",
+	"hidden",
+	"multiple",
+	"open",
+	"readonly",
+	"required",
+	"selected"
+]);
+//#endregion
+export { templateOf as i, FORM_CONTROLS as n, baseClassOf as r, BOOLEAN_ATTRS as t };

package/dist/globals.d.ts

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

package/dist/globals.js

@@ -0,0 +1,16 @@
+//#region src/globals.ts
+/**
+* 小程序逻辑层缺的全局函数：组件库的依赖（animejs 等）在模块顶层就会取用，构建时排在打包入口最前面（build/index.ts）。
+* 只补缺的，宿主已有的不动；都用 setTimeout 实现，逻辑层没有屏幕刷新的回调。
+*/
+const scope = typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : {};
+/** 一帧按 16ms 算 */
+const FRAME = 16;
+const fill = (name, value) => {
+	if (typeof scope[name] === "undefined") scope[name] = value;
+};
+fill("setImmediate", (callback, ...args) => setTimeout(callback, 0, ...args));
+fill("clearImmediate", (id) => clearTimeout(id));
+fill("requestAnimationFrame", (callback) => setTimeout(() => callback(Date.now()), FRAME));
+fill("cancelAnimationFrame", (id) => clearTimeout(id));
+//#endregion

package/dist/index.d.ts

@@ -0,0 +1,188 @@
+import { App, Component } from "vue";
+//#region src/node.d.ts
+/** 一个触点：视口坐标与页面坐标 */
+interface MiniTouch {
+  readonly identifier: number;
+  readonly clientX: number;
+  readonly clientY: number;
+  readonly pageX: number;
+  readonly pageY: number;
+}
+/** 小程序事件转成的 DOM 风格事件：组件的 onClick、onTouchstart 收到它 */
+interface MiniEvent {
+  readonly type: string;
+  readonly target: MiniNode;
+  currentTarget: MiniNode;
+  defaultPrevented: boolean;
+  /** 小程序原始事件的 detail（input 的 value 等） */
+  readonly detail: unknown;
+  /** 触摸事件：屏幕上的触点（同 TouchEvent.touches 的形状，只有坐标） */
+  readonly touches: readonly MiniTouch[];
+  /** 触摸事件：这次变化的触点（touchend 时 touches 已经空了，坐标在这里） */
+  readonly changedTouches: readonly MiniTouch[];
+  /** 键盘事件的键：输入框里按了键盘的确认键时是 Enter（小程序的 confirm 转成 keydown） */
+  readonly key?: string;
+  preventDefault(): void;
+  stopPropagation(): void;
+}
+type Listener = (event: MiniEvent) => void;
+/** 节点所在的页面：节点变化时告诉它，它负责合并成 setData（page.ts） */
+interface NodeHost {
+  /** 节点自己的字段变了（类名、样式、属性、文字） */
+  touch(node: MiniNode): void;
+  /** 节点的子节点列表变了 */
+  restructure(node: MiniNode): void;
+}
+export declare class MiniNode {
+  /** 模板里的 data-s，事件按它找回节点 */
+  readonly sid: string;
+  parent: MiniNode | null;
+  readonly children: MiniNode[];
+  /** 文本节点的文字 */
+  text: string;
+  /** 普通属性：aria-*、data-* 统一成连字符写法 */
+  readonly attrs: Map<string, unknown>;
+  /** 渲染时的事件属性（onClick 等）：事件名 → 处理函数；随重新渲染整体替换 */
+  readonly handlers: Map<string, Listener[]>;
+  /** addEventListener 加上的 */
+  readonly listeners: Map<string, Listener[]>;
+  className: string;
+  /** 行内样式：Vue 的 style 绑定、动态样式的变量、样式绑定直接改的变量；排在类展开的样式后面 */
+  readonly inline: Map<string, string>;
+  /** 正被按着（:active） */
+  pressed: boolean;
+  /** 根节点才有：所在的页面 */
+  host: NodeHost | null;
+  /** Web 标签（div、span、button），文本节点是 #text，注释是 #comment */
+  readonly tag: string;
+  constructor(tag: string);
+  static text(text: string): MiniNode;
+  get nextSibling(): MiniNode | null;
+  /** 沿父节点找到页面 */
+  private get page();
+  /** 自己的字段变了 */
+  changed(): void;
+  insertBefore(child: MiniNode, anchor: MiniNode | null): void;
+  removeChild(child: MiniNode): void;
+  setChildren(children: MiniNode[]): void;
+  /** 属性的字符串值；没有这个属性时 undefined（布尔属性为 false 时也算没有） */
+  attribute(name: string): string | undefined;
+  setAttribute(name: string, value: unknown): void;
+  /** 输入框的值：用户输入时运行时随事件写回（page.ts），组件照 DOM 的写法读 `event.target.value` */
+  get value(): string;
+  /** 让输入框获得焦点：模板的 focus 属性；失焦时运行时去掉 */
+  focus(): void;
+  /** 让输入框失去焦点 */
+  blur(): void;
+  getAttribute(name: string): string | null;
+  removeAttribute(name: string): void;
+  addEventListener(type: string, listener: Listener): void;
+  removeEventListener(type: string, listener: Listener): void;
+  /** 样式引擎的绑定（bindings.ts）直接改变量用；赋值写法（vShow 的 style.display）也走这里 */
+  readonly style: {
+    setProperty(name: string, value: string): void;
+    removeProperty(name: string): void;
+  } & Record<string, unknown>;
+  /** 样式引擎的 css.select 就地换组合类用 */
+  readonly classList: {
+    add: (...names: string[]) => void;
+    remove: (...names: string[]) => void;
+    replace: (from: string, to: string) => void;
+    contains: (name: string) => boolean;
+  };
+  private updateClasses;
+  getBoundingClientRect(): {
+    x: number;
+    y: number;
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+  };
+}
+//#endregion
+//#region src/page.d.ts
+/** 页面实例上要用到的部分（微信、支付宝相同） */
+interface PageInstance {
+  setData(data: Record<string, unknown>, callback?: () => void): void;
+}
+/** 小程序事件里要用到的部分；支付宝的事件名是驼峰（touchStart），统一转小写 */
+interface NativeEvent {
+  type: string;
+  /** 事件发生的时间：bind 的 touchmove 会沿祖先冒泡，同一次移动按它只处理一次 */
+  timeStamp?: number;
+  detail?: unknown;
+  currentTarget?: {
+    dataset?: Record<string, string>;
+  };
+  touches?: readonly NativeTouch[];
+  changedTouches?: readonly NativeTouch[];
+}
+/** 小程序事件里的触点：微信给 clientX / pageX，支付宝有的版本只给 pageX（页面坐标），缺的用另一个补 */
+interface NativeTouch {
+  identifier?: number;
+  clientX?: number;
+  clientY?: number;
+  pageX?: number;
+  pageY?: number;
+}
+export declare function dispatchToCurrentPage(event: NativeEvent): void;
+/** 页面的选项：交给小程序的 Page() */
+export declare function pageOptions(component: Component, setup?: (app: App<MiniNode>) => void): {
+  data: {
+    root: {
+      cn: never[];
+    };
+    ss: {};
+  };
+  onLoad(this: PageInstance, query: Record<string, string>): void;
+  onUnload(this: PageInstance): void;
+  onShow(this: PageInstance): void;
+  onHide(this: PageInstance): void;
+  onReachBottom(this: PageInstance): void;
+  /** 模板上所有事件的入口（build/templates.ts） */
+  eh(this: PageInstance, event: NativeEvent): void;
+  /** 页面滚动：记下位置，通知组件（吸顶、回到顶部、下拉刷新） */
+  onPageScroll(this: PageInstance, { scrollTop }: {
+    scrollTop: number;
+  }): void;
+};
+//#endregion
+//#region src/renderer.d.ts
+/** 建一个渲染到 MiniNode 树上的 Vue 应用 */
+export declare const createMiniApp: (component: Component, props?: Record<string, unknown>) => App<MiniNode>;
+//#endregion
+//#region src/lifecycle.d.ts
+/** 页面显示（第一次进入，以及从别的页面、后台回来）时；组件 setup 里调用 */
+export declare const onPageShow: (listener: () => void) => void;
+/** 页面隐藏（进入下一页、切到后台）时 */
+export declare const onPageHide: (listener: () => void) => void;
+/** 页面滚到底时（加载更多）；离底部多近算到底在页面配置的 onReachBottomDistance */
+export declare const onReachBottom: (listener: () => void) => void;
+/** 跳转的参数：值会转成字符串，页面组件的 query 属性里取回 */
+type PageQuery = Record<string, string | number | boolean>;
+/** 页面名 → 路径（构建时页面在 pages/<名字>/index） */
+export declare function pageUrl(page: string, query?: PageQuery): string;
+/** 打开另一个页面（压进页面栈，可以返回） */
+export declare const navigateTo: (page: string, query?: PageQuery) => void;
+/** 换成另一个页面（不能返回到当前页） */
+export declare const redirectTo: (page: string, query?: PageQuery) => void;
+/** 关掉所有页面，打开这一个 */
+export declare const reLaunch: (page: string, query?: PageQuery) => void;
+/** 返回上一页（或上几页） */
+export declare const navigateBack: (delta?: number) => void;
+//#endregion
+//#region src/index.d.ts
+/** 应用里的页面：页面名（pages/<名字>/index）→ 页面组件 */
+export type PageMap = Readonly<Record<string, Component>>;
+/** 构建产物导出的对象：各页面的 Page() 选项按名字取 */
+export interface MiniPages {
+  readonly names: readonly string[];
+  page(name: string): ReturnType<typeof pageOptions>;
+}
+/** 声明应用的页面；setup 对每个页面的 Vue 应用调用一次（装插件、provide） */
+export declare function definePages(pages: PageMap, setup?: (app: App<MiniNode>) => void): MiniPages;
+//#endregion
+export type { MiniEvent, PageQuery };

package/dist/index.js

@@ -0,0 +1,15 @@
+import { a as onPageHide, c as pageUrl, d as createMiniApp, f as MiniNode, i as navigateTo, l as reLaunch, n as pageOptions, o as onPageShow, r as navigateBack, s as onReachBottom, t as dispatchToCurrentPage, u as redirectTo } from "./page-upnBSowU.js";
+//#region src/index.ts
+/** 声明应用的页面；setup 对每个页面的 Vue 应用调用一次（装插件、provide） */
+function definePages(pages, setup) {
+	return {
+		names: Object.keys(pages),
+		page(name) {
+			const component = pages[name];
+			if (!component) throw new Error(`没有这个页面：${name}（已声明 ${Object.keys(pages).join("、")}）`);
+			return pageOptions(component, setup);
+		}
+	};
+}
+//#endregion
+export { MiniNode, createMiniApp, definePages, dispatchToCurrentPage, navigateBack, navigateTo, onPageHide, onPageShow, onReachBottom, pageOptions, pageUrl, reLaunch, redirectTo };