transone-cli 0.3.0 → 0.4.0

package/README.md

@@ -1,35 +1,148 @@
 # transone-cli
 
-TransOne 多端编译器：Bun 原生 CLI，按 Target 将一份 TypeScript 源码静态转换为多端原生工程。
+**English** · [简体中文](./README.zh-CN.md)
 
-## 目标端抽象（Target）
+Bun-native, multi-target compiler CLI for TransOne applications. It statically converts **one TypeScript source** into Web and multi-platform mini-program native projects at compile time, per target.
+
+The CLI is the compiler half of the TransOne framework — the runtime model is in [`transone`](../transone), and the component library is in [`transone-ui`](../transone-ui).
+
+## Install
+
+```bash
+bun add -g transone-cli
+# or npm i -g transone-cli
+```
+
+Requires Bun >= 1.3.0.
+
+## Usage
 
 ```text
-web            直接渲染（HTML + 浏览器运行时，M1 已实现）
-mp-weixin      WXML / WXSS / JS 静态转换（M2 规划中）
-mp-alipay      AXML / ACSS 静态转换（M3 规划中）
-mp-bytedance   ttml / ttss 静态转换（M3 规划中）
-app-*          远期占位（app-ios / app-android / app-harmony）
+Usage:
+  transone create
+  transone dev [--host <host>] [--port <port>] [--base <path>] [--no-watch]
+  transone build [--target <target>] [--out-dir <path>] [--base <path>] [--library]
+
+Targets: web, mp-weixin, mp-alipay, mp-bytedance, mp-xiaohongshu, app-ios, app-android, app-harmony (default: web)
+```
+
+### `transone create`
+
+Scaffolds a new TransOne project in the current directory (refuses to overwrite existing project files).
+
+### `transone dev`
+
+Starts the development server (Web target only) with optional watch mode (`--no-watch` to disable), custom `--host` / `--port`, and a `--base` path.
+
+### `transone build`
+
+Builds the app for a target:
+
+```bash
+transone build --target web           # H5 site / SPA
+transone build --target mp-weixin     # WeChat mini-program project (WXML/WXSS/JS)
+transone build --target mp-alipay     # Alipay mini-program project (AXML/ACSS)
+transone build --target mp-bytedance  # ByteDance mini-program project (TTML/TTSS)
+transone build --target mp-xiaohongshu # Xiaohongshu mini-program project (XHSML/CSS)
+```
+
+- `--out-dir` overrides the output directory.
+- `--base` sets the deployment base path (e.g. a GitHub Pages sub-path).
+- `--library` builds in library mode (no page entry required).
+
+The iOS, Android, and Harmony native app targets are implemented. A generated project should still be opened in its platform IDE for runtime/device validation.
+
+## Targets
+
+| Target | Output | Mechanism | Status |
+| --- | --- | --- | --- |
+| `web` | H5 site / SPA | Direct rendering (HTML + browser runtime) | Implemented |
+| `mp-weixin` | Native WeChat mini-program project | Compile-time static conversion (WXML / WXSS / JS) | Implemented |
+| `mp-alipay` | Native Alipay mini-program project | Compile-time static conversion (AXML / ACSS) | Implemented |
+| `mp-bytedance` | Native ByteDance mini-program project | Compile-time static conversion (TTML / TTSS) | Implemented |
+| `mp-xiaohongshu` | Native Xiaohongshu Mini Program (not Mini Widget) | Compile-time static conversion (XHSML / CSS) | Implemented |
+| `app-ios` / `app-android` / `app-harmony` | Native app (SwiftUI / Jetpack Compose / ArkUI) | Compile-time source generation | Implemented |
+
+Mini-program builds emit a complete native project: `app.json` / `app.js` / app style file / project config, plus `pages/<route>/<name>.*` and `components/<tag>/<tag>.*`. Platform differences (template syntax, style language, event binding, lifecycle mapping) are handled by the `MpDialect` abstraction.
+
+## Configuration
+
+Create a `transone.config.ts` in the project root and export the config with `defineConfig`:
+
+```ts
+import { defineConfig } from 'transone-cli';
+
+export default defineConfig({
+  entry: 'src/main.ts',            // default
+  server: {
+    host: '127.0.0.1',             // default
+    port: 52211,                   // default
+    proxy: {
+      '/api': { target: 'http://localhost:8080', changeOrigin: true },
+    },
+  },
+  build: {
+    outDir: 'dist/build/h5',       // default
+    basePath: '',
+    directoryPages: false,
+  },
+  mp: {
+    appId: 'touristappid',         // WeChat dev-tool test id by default
+    navigationBarTitleText: 'TransOne',
+    lengthUnit: 'px',              // or 'rpx' (values converted at 1px = 2rpx)
+    // pages, window, tabBar, appExtra, pageExtra, globalData, publicDir ...
+  },
+});
 ```
 
-新增目标端：实现 `BuildTarget` 接口并注册到 `TargetRegistry`，无需改动构建入口。
+The `mp` field accepts either a single `MiniProgramConfig` (applies to every mini-program target) or a per-platform map like `{ 'mp-weixin': {...}, 'mp-alipay': {...}, 'mp-xiaohongshu': {...} }` — only the config for the current target is used. Xiaohongshu uses the default placeholder app ID unless you set its own `appId`.
 
-## 使用
+Generate the Counter playground project for Xiaohongshu with:
 
 ```bash
-transone build --target web           # 产出 H5 站点
-transone build --target mp-weixin     # 未实现时编译期报错并给出路线图阶段
-transone dev                          # 开发服务（仅 web）
-transone create                       # 脚手架
+bun run --cwd playground/counter build:xiaohongshu
 ```
 
+The output is `playground/counter/dist/build/mp-xiaohongshu`.
+
+## How the compiler works
+
+1. Loads the project config and resolves pages from the entry file.
+2. For Web: renders directly with the browser runtime (H5 site / SPA).
+3. For mini-program targets: statically analyzes the root component class of each page, then compiles the component tree into native files — WXML/WXSS (WeChat), AXML/ACSS (Alipay), TTML/TTSS (ByteDance), and XHSML/CSS (Xiaohongshu) — including styles, template bindings, event methods, and data-state mapping. The generated code is a standalone native project with no TransOne runtime.
+4. Library components are resolved through the `"source"` field of each package's `package.json` (see `transone-ui`).
+
+## Extending a new target
+
+Implement the `BuildTarget` interface and register it with `TargetRegistry` — no changes to the build entry point are needed:
+
+```ts
+import type { BuildTarget, TargetType, ResolvedConfig, BuildOptions, BuildResult } from 'transone-cli';
+
+export class MyTarget implements BuildTarget {
+  readonly type: TargetType = 'my-target';
+  readonly label = 'My target platform';
+  async build(config: ResolvedConfig, options: BuildOptions): Promise<BuildResult> {
+    // generate the native project for your platform
+  }
+}
+```
+
+## Development
+
 ```bash
-bun test          # 测试
-bun run build     # 构建 dist（CLI bundle + .d.ts）
+bun test          # run tests
+bun run build     # build dist (CLI bundle + .d.ts)
+bun run build:types
+bun run lint
 ```
 
-## 文档
+## Documentation
+
+- Online docs (CLI site): <https://geektech-team.github.io/transone/cli/>
+- Main docs site: <https://geektech-team.github.io/transone/>
+- Repository: <https://github.com/geektech-team/transone>
+
+## License
 
-- 在线文档（CLI 子站）：<https://geektech-team.github.io/transone/cli/>
-- 主文档站：<https://geektech-team.github.io/transone/>
-- 仓库：<https://github.com/geektech-team/transone>
+MIT

package/README.zh-CN.md

@@ -0,0 +1,50 @@
+# transone-cli
+
+**简体中文** · [English](./README.md)
+
+TransOne 多端编译器：Bun 原生 CLI，按 Target 将一份 TypeScript 源码静态转换为多端原生工程。
+
+## 目标端抽象（Target）
+
+```text
+web            直接渲染（HTML + 浏览器运行时，M1 已实现）
+mp-weixin      WXML / WXSS / JS 静态转换（已实现）
+mp-alipay      AXML / ACSS 静态转换（已实现）
+mp-bytedance   TTML / TTSS 静态转换（已实现）
+mp-xiaohongshu XHSML / CSS 静态转换（已实现；小红书小程序，非小组件）
+app-*          原生应用代码生成（app-ios / app-android / app-harmony，已实现）
+```
+
+新增目标端：实现 `BuildTarget` 接口并注册到 `TargetRegistry`，无需改动构建入口。
+
+## 使用
+
+```bash
+transone build --target web           # 产出 H5 站点
+transone build --target mp-weixin     # 生成微信小程序原生工程
+transone build --target mp-xiaohongshu # 生成小红书小程序原生工程（XHSML / CSS）
+transone dev                          # 开发服务（仅 web）
+transone create                       # 脚手架
+```
+
+```bash
+bun test          # 测试
+bun run build     # 构建 dist（CLI bundle + .d.ts）
+```
+
+在 Counter 演练项目中生成微信、支付宝、字节和小红书小程序：
+
+```bash
+bun run --cwd playground/counter build:weixin
+bun run --cwd playground/counter build:alipay
+bun run --cwd playground/counter build:bytedance
+bun run --cwd playground/counter build:xiaohongshu
+```
+
+小红书产物位于 `playground/counter/dist/build/mp-xiaohongshu`。`mp` 配置既支持适用于所有小程序端的扁平配置，也支持按 target 分组；小红书未配置 `appId` 时使用占位默认值，导入开发者工具前应设置真实 App ID。
+
+## 文档
+
+- 在线文档（CLI 子站）：<https://geektech-team.github.io/transone/cli/>
+- 主文档站：<https://geektech-team.github.io/transone/>
+- 仓库：<https://github.com/geektech-team/transone>

package/dist/app/analyze.d.ts

@@ -0,0 +1,2 @@
+import type { NativeScreen } from './types';
+export declare function analyzeNativeScreen(entry: string): Promise<NativeScreen>;

package/dist/app/build-app.d.ts

@@ -0,0 +1,3 @@
+import type { BuildResult, ResolvedConfig } from '../types';
+import type { NativeDialect } from './types';
+export declare function buildNativeApp(config: ResolvedConfig, dialect: NativeDialect): Promise<BuildResult>;

package/dist/app/dialects.d.ts

@@ -0,0 +1,4 @@
+import type { NativeDialect } from './types';
+export declare const IOS_DIALECT: NativeDialect;
+export declare const ANDROID_DIALECT: NativeDialect;
+export declare const HARMONY_DIALECT: NativeDialect;

package/dist/app/errors.d.ts

@@ -0,0 +1 @@
+export declare function nativeError(filePath: string, message: string): Error;

package/dist/app/types.d.ts

@@ -0,0 +1,61 @@
+import type { ResolvedAppConfig } from '../types';
+export type NativeStateValue = string | number | boolean;
+export interface NativeStateEntry {
+    key: string;
+    value: NativeStateValue;
+}
+export interface NativeStyle {
+    color?: string;
+    backgroundColor?: string;
+    fontSize?: number;
+    fontWeight?: string | number;
+    padding?: number;
+    margin?: number;
+    width?: number;
+    height?: number;
+    borderRadius?: number;
+    textAlign?: string;
+}
+export type NativeTextPart = {
+    kind: 'literal';
+    value: string;
+} | {
+    kind: 'state';
+    key: string;
+};
+export type NativeAction = {
+    kind: 'increment';
+    key: string;
+    by: number;
+} | {
+    kind: 'set-literal';
+    key: string;
+    value: NativeStateValue;
+};
+export type NativeNode = {
+    kind: 'container';
+    children: NativeNode[];
+    style?: NativeStyle;
+} | {
+    kind: 'text';
+    parts: NativeTextPart[];
+    style?: NativeStyle;
+} | {
+    kind: 'button';
+    parts: NativeTextPart[];
+    action: NativeAction;
+    style?: NativeStyle;
+};
+export interface NativeScreen {
+    name: string;
+    state: NativeStateEntry[];
+    root: Extract<NativeNode, {
+        kind: 'container';
+    }>;
+}
+export interface NativeDialect {
+    readonly id: 'app-ios' | 'app-android' | 'app-harmony';
+    readonly label: string;
+    readonly resourceDirectory: string;
+    generateProject(screen: NativeScreen, config: ResolvedAppConfig): Record<string, string>;
+}

package/dist/{build-mp-kcnx989m.js → build-mp-6j38wf4r.js}

@@ -1,23 +1,14 @@
 // @bun
 import {
-  __require
-} from "./index-yb2wsc7f.js";
+  loadTypescript
+} from "./index-k1qfvp0y.js";
+import"./index-yb2wsc7f.js";
 
 // src/mp/build-mp.ts
 import { cp, mkdir, readdir, rm, writeFile } from "fs/promises";
 import { existsSync as existsSync2 } from "fs";
 import { basename, dirname as dirname3, join as join3, relative, resolve as resolve2 } from "path";
 
-// src/mp/ts-loader.ts
-var tsModule = null;
-async function loadTypescript() {
-  if (tsModule) {
-    return tsModule;
-  }
-  tsModule = await import("typescript");
-  return tsModule;
-}
-
 // src/mp/analyze.ts
 import { existsSync, readFileSync } from "fs";
 import { dirname, join, resolve } from "path";
@@ -1452,6 +1443,9 @@ function compileSlot(context, classSource, node, env) {
     return [indent(env.indent) + "<slot/>"];
   }
   const name = compileLiteralString(context, classSource, nameExpr, "slot \u540D\u79F0");
+  if (name === "default") {
+    return [indent(env.indent) + "<slot/>"];
+  }
   return [indent(env.indent) + `<slot name="${name}"/>`];
 }
 function compileListener(context, classSource, eventName, handlerExpr, env) {
@@ -2119,6 +2113,7 @@ function collectModuleConsts3(context, classSource) {
 // src/mp/methods.ts
 var PAGE_LIFECYCLE = {
   beforeMount: "onLoad",
+  onLoad: "onLoad",
   onMounted: "onReady",
   onUnmounted: "onUnload",
   onShow: "onShow",
@@ -2149,6 +2144,9 @@ function compileMethods(context, classSource, usedNames, kind, customEvents) {
       seed.add(hook);
     }
   }
+  if (methods.has("onPropsChange")) {
+    seed.add("onPropsChange");
+  }
   const queue = [...seed];
   const visited = new Set;
   const entries = [];
@@ -2621,6 +2619,13 @@ function generateComponentJs(unit, dialect) {
     }
     parts.push("  },");
   }
+  const hasPropsHook = unit.methods.some((entry) => entry.key === "onPropsChange");
+  if (hasPropsHook) {
+    const watched = Object.keys(unit.properties);
+    parts.push("  observers: {");
+    parts.push(`    ${JSON.stringify(watched.join(", "))}: function () { if (typeof this.onPropsChange === 'function') this.onPropsChange(); },`);
+    parts.push("  },");
+  }
   parts.push("});");
   return parts.join(`
 `) + `
@@ -2791,5 +2796,5 @@ export {
   buildMiniProgram
 };
 
-//# debugId=1B46276CC3CBABAA64756E2164756E21
-//# sourceMappingURL=build-mp-kcnx989m.js.map
+//# debugId=B563DD7B11FB4E5E64756E2164756E21
+//# sourceMappingURL=build-mp-6j38wf4r.js.map