@21stware/rpui 0.3.1 → 0.3.2

package/README.md

@@ -32,16 +32,20 @@ import { parseToPage } from '@21stware/rpui';
 document.body.appendChild(parseToPage(rpmlSource));
 ```
 
-## `rpui serve` — host a directory of prototypes
+## `rpui` CLI
 
-The package ships an `rpui` bin that hosts a directory of `.rpml` files as one navigable gallery (collapsible sidebar, hash routing, `index.rpml` as the default home) and prints a local URL:
+The package ships an `rpui` bin with two commands for working with a directory of `.rpml` files. Both render the directory as one navigable gallery (collapsible sidebar, hash routing, `index.rpml` as the default home) and share the same zero-dependency runtime.
+
+### `rpui serve` — host a directory of prototypes
+
+Hosts the directory on a local server, prints the URL, and opens the browser:
 
 ```bash
 npx @21stware/rpui serve .
 ```
 
 ```
-  RPUI serving 9 .rpml files from /Users/me/prototypes
+  RPUI serving 8 .rpml files from /Users/me/prototypes
 
   Local:  http://localhost:3000
 
@@ -55,10 +59,34 @@ The directory is re-scanned on every page load, so editing a `.rpml` and refresh
 | `[dir]` | Directory to serve (default: current directory) |
 | `-p, --port` | Port (default `3000`; auto-increments if busy) |
 | `--host` | Host (default `localhost`) |
+| `--no-open` | Don't open the browser on start (headless / CI) |
+
+```bash
+# serve a specific directory on a chosen port, without opening a browser
+npx @21stware/rpui serve ./prototypes --port 4000 --no-open
+```
+
+### `rpui build` — compile to one HTML file
+
+Compiles the directory into a single self-contained HTML file (inlined runtime + gallery) that works offline from `file://`:
+
+```bash
+npx @21stware/rpui build .
+```
+
+```
+  ✓ compiled 8 .rpml files → prototypes.html
+```
+
+| Argument | Description |
+|----------|-------------|
+| `[dir]` | Directory of `.rpml` (recursive; default: current directory) |
+| `-o, --out` | Output HTML path (default: `<dir>.html`) |
+| `--title` | Gallery title (default: directory name) |
 
 ```bash
-# serve a specific directory on a chosen port
-npx @21stware/rpui serve ./prototypes --port 4000
+# compile to a named file with a custom title
+npx @21stware/rpui build ./prototypes -o prototypes.html --title "Prototypes"
 ```
 
 ## Exports
@@ -70,4 +98,4 @@ npx @21stware/rpui serve ./prototypes --port 4000
 | `parseToPage(source)` | parse `.rpml` text into a ready-to-mount `<page>` element |
 | `rewriteTags(source)` | rewrite bare RPML language tags to the registered component tags |
 
-See the repo root for the full [RPML spec](../../spec), [`llms.txt`](../../llms.txt) component reference, and the [`SKILL.md`](../../SKILL.md) authoring workflow.
+See the repo root for the full [RPML spec](../../spec), [`llms.txt`](../../llms.txt) component reference, and the [`SKILL.md`](../../rapid-prototype-implement/SKILL.md) authoring workflow.

package/dist/serve.js

@@ -1,8 +1,9 @@
 #!/usr/bin/env node
 import { createServer } from "node:http";
-import { existsSync, statSync, readFileSync, readdirSync } from "node:fs";
-import { dirname, join, resolve, sep, relative } from "node:path";
+import { existsSync, statSync, readFileSync, writeFileSync, readdirSync } from "node:fs";
+import { dirname, join, resolve, sep, basename, relative } from "node:path";
 import { fileURLToPath } from "node:url";
+import { spawn } from "node:child_process";
 const __dirname$1 = dirname(fileURLToPath(import.meta.url));
 const GALLERY_JS = join(__dirname$1, "gallery.js");
 function collectRpml(dir) {
@@ -44,31 +45,51 @@ ${galleryJs}
 </html>
 `;
 }
+function openBrowser(url) {
+  const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "cmd" : "xdg-open";
+  const args = process.platform === "win32" ? ["/c", "start", "", url] : [url];
+  try {
+    const child = spawn(cmd, args, { stdio: "ignore", detached: true });
+    child.on("error", () => {
+    });
+    child.unref();
+  } catch {
+  }
+}
 function parseArgs(argv) {
   let dir = ".";
   let port = 3e3;
   let host = "localhost";
+  let open = true;
   let sawPositional = false;
   for (let i = 0; i < argv.length; i++) {
     const a = argv[i];
     if (a === "-p" || a === "--port") port = Number(argv[++i]) || port;
     else if (a === "--host") host = argv[++i] || host;
+    else if (a === "--no-open") open = false;
+    else if (a === "--open") open = true;
     else if (a === "-h" || a === "--help") usage();
     else if (!a.startsWith("-") && !sawPositional) {
       dir = a;
       sawPositional = true;
     }
   }
-  return { dir, port, host };
+  return { dir, port, host, open };
 }
 function usage() {
-  console.error(`Usage: rpui serve [dir] [--port 3000] [--host localhost]
+  console.error(`Usage:
+  rpui serve [dir] [--port 3000] [--host localhost] [--no-open]
+  rpui build [dir] [-o out.html] [--title "..."]
 
-Host a directory of .rpml files as one navigable gallery.
+serve  — host a directory of .rpml files as one navigable gallery (opens the browser).
+build  — compile a directory of .rpml files into one self-contained HTML.
 
-  dir            directory to serve (default: current directory)
-  -p, --port     port (default 3000; auto-increments if busy)
-      --host     host (default localhost)`);
+  dir            directory (default: current directory)
+  -p, --port     serve: port (default 3000; auto-increments if busy)
+      --host     serve: host (default localhost)
+      --no-open  serve: do not open the browser
+  -o, --out      build: output HTML path (default: <dir>.html)
+      --title    build: gallery title (default: directory name)`);
   process.exit(1);
 }
 function listen(server, port, host) {
@@ -88,7 +109,7 @@ function listen(server, port, host) {
   });
 }
 async function serve(argv) {
-  const { dir, port, host } = parseArgs(argv);
+  const { dir, port, host, open } = parseArgs(argv);
   const root = resolve(dir);
   if (!existsSync(root) || !statSync(root).isDirectory()) {
     console.error(`✗ Not a directory: ${dir}`);
@@ -130,10 +151,49 @@ async function serve(argv) {
   console.log(`  Local:  ${addr}`);
   console.log(``);
   console.log(`  Press Ctrl+C to stop`);
+  if (open) openBrowser(addr);
+}
+function build(argv) {
+  let dir = ".";
+  let out = "";
+  let title = "";
+  let sawPositional = false;
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === "-o" || a === "--out") out = argv[++i] || out;
+    else if (a === "--title") title = argv[++i] || title;
+    else if (a === "-h" || a === "--help") usage();
+    else if (!a.startsWith("-") && !sawPositional) {
+      dir = a;
+      sawPositional = true;
+    }
+  }
+  const root = resolve(dir);
+  if (!existsSync(root) || !statSync(root).isDirectory()) {
+    console.error(`✗ Not a directory: ${dir}`);
+    process.exit(1);
+  }
+  if (!existsSync(GALLERY_JS)) {
+    console.error(`✗ Missing runtime bundle (gallery.js). Reinstall @21stware/rpui or run the build.`);
+    process.exit(1);
+  }
+  const name = basename(root) || "RPML";
+  if (!out) out = `${name}.html`;
+  if (!title) title = name;
+  const galleryJs = readFileSync(GALLERY_JS, "utf8");
+  const count = collectRpml(root).length;
+  if (!count) {
+    console.error(`✗ No .rpml files found in ${root}`);
+    process.exit(1);
+  }
+  writeFileSync(out, buildHtml(root, title, galleryJs));
+  console.log(`✓ compiled ${count} .rpml file${count === 1 ? "" : "s"} → ${out}`);
 }
 const [sub, ...rest] = process.argv.slice(2);
 if (sub === "serve") {
   serve(rest);
+} else if (sub === "build") {
+  build(rest);
 } else if (sub === "-h" || sub === "--help" || sub === void 0) {
   usage();
 } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@21stware/rpui",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "RPUI: static UI prototype renderer (RPML Web Components runtime)",
   "type": "module",
   "main": "dist/rpui.js",
@@ -16,7 +16,7 @@
     },
     "./dist/rpui.js": "./dist/rpui.js",
     "./llms.txt": "../../llms.txt",
-    "./SKILL.md": "../../SKILL.md"
+    "./SKILL.md": "../../rapid-prototype-implement/SKILL.md"
   },
   "sideEffects": true,
   "files": [