@nextclaw/app-runtime 0.1.0 → 0.2.0

package/README.md

@@ -4,6 +4,7 @@
 
 当前 MVP 提供三件事：
 
+- `napp create <app-dir>`：生成一个最小可跑的微应用骨架
 - `napp inspect <app-dir>`：校验应用目录与 manifest
 - `napp run <app-dir>`：启动本地宿主，提供 UI 静态服务和桥接 API
 - `napp dev <app-dir>`：当前等价于 `run`
@@ -44,6 +45,14 @@ assets/
 
 ## 示例
 
+```bash
+napp create ./my-first-napp
+napp inspect ./my-first-napp
+napp run ./my-first-napp
+```
+
+已有示例应用：
+
 ```bash
 napp inspect ./apps/examples/hello-notes
 napp run ./apps/examples/hello-notes --document notes=/absolute/path/to/notes

package/dist/commands/create.controller.js

@@ -0,0 +1,23 @@
+import { AppScaffoldService } from "../scaffold/app-scaffold.service.js";
+//#region src/commands/create.controller.ts
+var CreateCommand = class {
+	constructor(scaffoldService = new AppScaffoldService()) {
+		this.scaffoldService = scaffoldService;
+	}
+	run = async (params) => {
+		const { appDirectory, json, write } = params;
+		const result = await this.scaffoldService.scaffold(appDirectory);
+		if (json) {
+			write(`${JSON.stringify({
+				ok: true,
+				created: result
+			}, null, 2)}\n`);
+			return;
+		}
+		write(`Created app scaffold at ${result.appDirectory}\n`);
+		write(`Manifest: ${result.manifestPath}\n`);
+		write("Next: napp inspect <app-dir> && napp run <app-dir>\n");
+	};
+};
+//#endregion
+export { CreateCommand };

package/dist/main.js

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
 import { version } from "./package.js";
+import { CreateCommand } from "./commands/create.controller.js";
 import { RunCommand } from "./commands/run.controller.js";
 import { DevCommand } from "./commands/dev.controller.js";
 import { InspectCommand } from "./commands/inspect.controller.js";
@@ -19,7 +20,16 @@ var AppRuntimeCli = class {
 			this.writeUsage();
 			process.exit(1);
 		}
-		const options = this.readOptions(restArgs);
+		if (command === "create") {
+			const options = this.readCreateOptions(restArgs);
+			await new CreateCommand().run({
+				appDirectory,
+				json: options.json,
+				write: this.write
+			});
+			return;
+		}
+		const options = this.readRuntimeOptions(restArgs);
 		if (command === "inspect") {
 			await new InspectCommand().run({
 				appDirectory,
@@ -53,7 +63,20 @@ var AppRuntimeCli = class {
 		this.writeUsage();
 		process.exit(1);
 	};
-	readOptions = (rawArgs) => {
+	readCreateOptions = (rawArgs) => {
+		const options = { json: false };
+		for (const current of rawArgs) {
+			if (!current?.startsWith("--")) throw new Error(`未知参数：${current}`);
+			switch (current) {
+				case "--json":
+					options.json = true;
+					break;
+				default: throw new Error(`未知参数：${current}`);
+			}
+		}
+		return options;
+	};
+	readRuntimeOptions = (rawArgs) => {
 		const options = {
 			host: "127.0.0.1",
 			port: 3100,
@@ -62,7 +85,7 @@ var AppRuntimeCli = class {
 		};
 		for (let index = 0; index < rawArgs.length; index += 1) {
 			const current = rawArgs[index];
-			if (!current?.startsWith("--")) continue;
+			if (!current?.startsWith("--")) throw new Error(`未知参数：${current}`);
 			const nextValue = rawArgs[index + 1];
 			switch (current) {
 				case "--host":
@@ -99,7 +122,8 @@ var AppRuntimeCli = class {
 		return nextValue;
 	};
 	writeUsage = () => {
-		this.write("Usage: napp <inspect|run|dev> <app-dir> [--host 127.0.0.1] [--port 3100] [--json] [--document scope=/path]\n");
+		this.write("Usage: napp create <app-dir> [--json]\n");
+		this.write("       napp <inspect|run|dev> <app-dir> [--host 127.0.0.1] [--port 3100] [--json] [--document scope=/path]\n");
 		this.write("       napp --help\n");
 		this.write("       napp --version\n");
 	};

package/dist/package.js

@@ -1,4 +1,4 @@
 //#region package.json
-var version = "0.1.0";
+var version = "0.2.0";
 //#endregion
 export { version };

package/dist/scaffold/app-scaffold.service.js

@@ -0,0 +1,260 @@
+import { access, mkdir, writeFile } from "node:fs/promises";
+import path from "node:path";
+//#region src/scaffold/app-scaffold.service.ts
+var AppScaffoldService = class {
+	scaffold = async (targetDirectory) => {
+		const appDirectory = path.resolve(targetDirectory);
+		await this.assertTargetDoesNotExist(appDirectory);
+		await mkdir(path.join(appDirectory, "main"), { recursive: true });
+		await mkdir(path.join(appDirectory, "ui"), { recursive: true });
+		await mkdir(path.join(appDirectory, "assets"), { recursive: true });
+		const appName = this.buildAppName(appDirectory);
+		const appId = this.buildAppId(appDirectory);
+		const manifestPath = path.join(appDirectory, "manifest.json");
+		await Promise.all([
+			writeFile(manifestPath, `${JSON.stringify(this.buildManifest(appId, appName), null, 2)}\n`, "utf-8"),
+			writeFile(path.join(appDirectory, "main", "app.wasm"), Buffer.from(APP_WASM_BASE64, "base64")),
+			writeFile(path.join(appDirectory, "main", "app.wat"), this.buildWatSource(), "utf-8"),
+			writeFile(path.join(appDirectory, "ui", "index.html"), this.buildUiHtml(appName), "utf-8"),
+			writeFile(path.join(appDirectory, "ui", "app.controller.js"), this.buildUiController(), "utf-8"),
+			writeFile(path.join(appDirectory, "assets", "icon.svg"), this.buildIconSvg(), "utf-8")
+		]);
+		return {
+			appDirectory,
+			manifestPath
+		};
+	};
+	assertTargetDoesNotExist = async (targetDirectory) => {
+		try {
+			await access(targetDirectory);
+		} catch {
+			return;
+		}
+		throw new Error(`目标目录已存在：${targetDirectory}`);
+	};
+	buildAppId = (targetDirectory) => {
+		return `nextclaw.${this.normalizeSlug(path.basename(targetDirectory))}`;
+	};
+	buildAppName = (targetDirectory) => {
+		return this.normalizeSlug(path.basename(targetDirectory)).split("-").map((part) => `${part[0]?.toUpperCase() ?? ""}${part.slice(1)}`).join(" ");
+	};
+	normalizeSlug = (value) => {
+		const normalized = value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+		if (!normalized) throw new Error("应用目录名无法生成合法的应用标识。");
+		return normalized;
+	};
+	buildManifest = (appId, appName) => {
+		return {
+			schemaVersion: 1,
+			id: appId,
+			name: appName,
+			version: "0.1.0",
+			description: "A minimal NextClaw micro app scaffold created by napp.",
+			icon: "assets/icon.svg",
+			main: {
+				kind: "wasm",
+				entry: "main/app.wasm",
+				export: "summarize_notes",
+				action: "runStarterDemo"
+			},
+			ui: { entry: "ui/index.html" },
+			permissions: {
+				storage: { namespace: appId.replace(/\./g, "-") },
+				capabilities: { hostBridge: true }
+			}
+		};
+	};
+	buildWatSource = () => {
+		return `(module
+  (func (export "summarize_notes") (param i32 i32) (result i32)
+    local.get 0
+    local.get 1
+    i32.add
+    i32.const 200
+    i32.add))\n`;
+	};
+	buildUiHtml = (appName) => {
+		return `<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>${appName}</title>
+    <style>
+      :root {
+        color-scheme: light;
+        font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
+        background:
+          radial-gradient(circle at top left, rgba(255, 206, 134, 0.24), transparent 30%),
+          linear-gradient(165deg, #f7f1e7 0%, #fcfcfe 48%, #e1ebf5 100%);
+        color: #11233a;
+      }
+
+      body {
+        margin: 0;
+        min-height: 100vh;
+      }
+
+      main {
+        box-sizing: border-box;
+        max-width: 760px;
+        margin: 0 auto;
+        padding: 48px 20px 72px;
+      }
+
+      .panel {
+        background: rgba(255, 255, 255, 0.78);
+        border: 1px solid rgba(17, 35, 58, 0.08);
+        border-radius: 24px;
+        box-shadow: 0 18px 42px rgba(17, 35, 58, 0.12);
+        padding: 28px;
+        backdrop-filter: blur(18px);
+      }
+
+      h1 {
+        margin: 0 0 12px;
+        font-size: clamp(30px, 6vw, 54px);
+        line-height: 1;
+      }
+
+      p {
+        line-height: 1.6;
+      }
+
+      button {
+        border: 0;
+        border-radius: 999px;
+        background: #11233a;
+        color: #fff;
+        padding: 12px 18px;
+        font-size: 15px;
+        cursor: pointer;
+      }
+
+      dl {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+        gap: 12px;
+        margin: 24px 0 0;
+      }
+
+      dt {
+        font-size: 12px;
+        color: #556881;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+      }
+
+      dd {
+        margin: 6px 0 0;
+        font-size: 24px;
+        font-weight: 600;
+      }
+
+      pre {
+        margin-top: 20px;
+        padding: 14px;
+        border-radius: 16px;
+        background: rgba(17, 35, 58, 0.07);
+        overflow: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <section class="panel">
+        <p>NextClaw Micro App</p>
+        <h1 id="title">Loading...</h1>
+        <p id="description">A starter scaffold created by napp create.</p>
+        <button id="run-button" type="button">Run Starter Demo</button>
+        <dl>
+          <div>
+            <dt>Action</dt>
+            <dd id="action">-</dd>
+          </div>
+          <div>
+            <dt>Documents</dt>
+            <dd id="document-count">-</dd>
+          </div>
+          <div>
+            <dt>Text Bytes</dt>
+            <dd id="text-bytes">-</dd>
+          </div>
+          <div>
+            <dt>Wasm Score</dt>
+            <dd id="wasm-score">-</dd>
+          </div>
+        </dl>
+        <pre id="details"></pre>
+      </section>
+    </main>
+    <script type="module" src="./app.controller.js"><\/script>
+  </body>
+</html>
+`;
+	};
+	buildUiController = () => {
+		return `const titleNode = document.getElementById("title");
+const descriptionNode = document.getElementById("description");
+const actionNode = document.getElementById("action");
+const documentCountNode = document.getElementById("document-count");
+const textBytesNode = document.getElementById("text-bytes");
+const wasmScoreNode = document.getElementById("wasm-score");
+const detailsNode = document.getElementById("details");
+const runButton = document.getElementById("run-button");
+
+const setDetails = (value) => {
+  detailsNode.textContent = JSON.stringify(value, null, 2);
+};
+
+const loadManifest = async () => {
+  const response = await fetch("/__napp/manifest");
+  const payload = await response.json();
+  titleNode.textContent = payload.manifest.name;
+  descriptionNode.textContent = payload.manifest.description;
+  actionNode.textContent = payload.manifest.main.action;
+  setDetails(payload);
+};
+
+const runDemo = async () => {
+  runButton.disabled = true;
+  try {
+    const response = await fetch("/__napp/run", {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+      },
+      body: JSON.stringify({
+        action: actionNode.textContent,
+      }),
+    });
+    const payload = await response.json();
+    documentCountNode.textContent = String(payload.result.input.documentCount);
+    textBytesNode.textContent = String(payload.result.input.textBytes);
+    wasmScoreNode.textContent = String(payload.result.output.output);
+    setDetails(payload);
+  } finally {
+    runButton.disabled = false;
+  }
+};
+
+runButton.addEventListener("click", () => {
+  void runDemo();
+});
+
+await loadManifest();
+`;
+	};
+	buildIconSvg = () => {
+		return `<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="160" height="160" rx="40" fill="#11233A" />
+  <path d="M42 45H118V58H74V115H58V58H42V45Z" fill="#F8C97E" />
+  <path d="M92 74H118V87H92V74Z" fill="#FFFFFF" fill-opacity="0.92" />
+  <path d="M92 95H118V108H92V95Z" fill="#FFFFFF" fill-opacity="0.72" />
+</svg>
+`;
+	};
+};
+const APP_WASM_BASE64 = "AGFzbQEAAAABBwFgAn9/AX8DAgEABxMBD3N1bW1hcml6ZV9ub3RlcwAACg0BCwAgACABagsQQQQK";
+//#endregion
+export { AppScaffoldService };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/app-runtime",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
   "description": "Standalone micro app runtime and CLI for NextClaw apps.",
   "type": "module",