@monimesl/dot-cli 0.1.0-alpha.8 → 0.1.0-alpha.9

package/README.md

@@ -8,19 +8,20 @@ dotctl create [dir]       # scaffold a dot (asks for its name and template)
 dotctl create page <path> # add a page to the dot you are in
 dotctl build [root]       # compile the dot into dist/ui and dist/logic, minified
 dotctl dev [root]         # build, run it in the browser simulator, and reload it on each change
+dotctl preview [root]     # build it as `build` does, and run that build in the browser simulator
 dotctl keys show          # print this computer's developer key: its public key and key ID
 dotctl lsp                # the .dml language server, which editors start
 ```
 
-| Option                | Applies to | What it does                                                             |
-| --------------------- | ---------- | ------------------------------------------------------------------------ |
-| `--out-dir <dir>`     | both       | Output directory (default: `<root>/dist`)                                |
-| `--conditions <list>` | both       | Extra export conditions, such as `@monimesl/dot-source`                  |
-| `--port <port>`       | `dev`      | Simulator port (default: `3680`, or the next free one)                   |
-| `--device`            | `dev`      | Also serve the dot to the Dot example apps on phones, through a QR code  |
-| `--name <name>`       | `create`   | The dot's name, instead of asking                                        |
-| `--template <name>`   | `create`   | `starter` (one page to build on, the default) or `showcase` (every page) |
-| `--pm <name>`         | `create`   | The package manager to install with: npm, pnpm, yarn or bun              |
+| Option                | Applies to                | What it does                                                             |
+| --------------------- | ------------------------- | ------------------------------------------------------------------------ |
+| `--out-dir <dir>`     | `build`, `dev`, `preview` | Output directory (default: `<root>/dist`)                                |
+| `--conditions <list>` | `build`, `dev`, `preview` | Extra export conditions, such as `@monimesl/dot-source`                  |
+| `--port <port>`       | `dev`, `preview`          | Simulator port (default: `3680`, or the next free one)                   |
+| `--device`            | `dev`                     | Also serve the dot to the Dot example apps on phones, through a QR code  |
+| `--name <name>`       | `create`                  | The dot's name, instead of asking                                        |
+| `--template <name>`   | `create`                  | `starter` (one page to build on, the default) or `showcase` (every page) |
+| `--pm <name>`         | `create`                  | The package manager to install with: npm, pnpm, yarn or bun              |
 
 ## `dotctl create`
 
@@ -45,6 +46,13 @@ With `--device`, it also serves each build on the local network to the Dot examp
 QR code to scan with one, which then follows the dot in the same way: see
 [the example apps](../hosts/native/README.md#the-example-apps).
 
+## `dotctl preview`
+
+Builds the dot as `dotctl build` does, and runs that build in the browser simulator: minified, and
+with only the components its pages use, as the host app gets it. Use it to check a build before
+publishing it. It doesn't rebuild on change: run it again after editing. The dot keeps the files it
+saved under `dotctl dev`.
+
 ## Developer keys
 
 Dash opens only links that one of the signed-in developer's keys signed. `dotctl dev --device`

package/dist/cli.js

@@ -1,8 +1,7 @@
 import { createRequire } from "node:module";
 import { spawn, spawnSync } from "node:child_process";
 import { basename, dirname, join, relative, resolve, sep } from "node:path";
-import { createInterface } from "node:readline/promises";
-import { parseArgs } from "node:util";
+import { parseArgs, styleText } from "node:util";
 import { CompileError, PAGES_DIR, build, installedRuntime, loadProject } from "@monimesl/dot-compiler";
 import { DEFAULT_PORT, startSimulator } from "@monimesl/dot-simulator";
 import { existsSync, readFileSync, readdirSync, watch } from "node:fs";
@@ -14,6 +13,8 @@ import { renderUnicodeCompact } from "uqr";
 import { createHash, createHmac, createPrivateKey, createPublicKey, randomBytes, sign, timingSafeEqual } from "node:crypto";
 import { homedir, networkInterfaces } from "node:os";
 import { createServer } from "node:http";
+import { emitKeypressEvents } from "node:readline";
+import { createInterface } from "node:readline/promises";
 //#region src/report.ts
 /** A mistake in how a command was used, which its message alone explains. */
 var CommandError = class extends Error {
@@ -36,6 +37,10 @@ function printBuildTime(startedAt) {
 //#endregion
 //#region src/create/template.ts
 const TEMPLATES = ["starter", "showcase"];
+const TEMPLATE_HINTS = {
+	starter: "one page to build on",
+	showcase: "a page for each feature, to read"
+};
 function isTemplate(name) {
 	return TEMPLATES.includes(name);
 }
@@ -75,6 +80,7 @@ function packageJson({ packageName, dotVersion, workspace }) {
 		scripts: {
 			dev: `dotctl dev${conditions}`,
 			build: `dotctl build${conditions}`,
+			preview: `dotctl preview${conditions}`,
 			typecheck: "tsc --noEmit"
 		},
 		dependencies: { "@monimesl/dot-runtime": dotVersion },
@@ -115,8 +121,8 @@ function dotJson({ name, packageName, template }) {
 		version: "0.1.0"
 	};
 	if (template === "showcase") dot.network = { hosts: [
-		"api.github.com",
-		"avatars.githubusercontent.com",
+		"itunes.apple.com",
+		"*.mzstatic.com",
 		"httpbin.org"
 	] };
 	return json(dot);
@@ -218,11 +224,17 @@ function cliRoot() {
 	return dirname(createRequire(import.meta.url).resolve("@monimesl/dot-cli/package.json"));
 }
 //#endregion
+//#region src/dot-root.ts
+function findDotRoot(dir) {
+	while (true) {
+		if (existsSync(join(dir, "dot.json"))) return dir;
+		const parent = dirname(dir);
+		if (parent === dir) return;
+		dir = parent;
+	}
+}
+//#endregion
 //#region src/create/page.ts
-/**
-* Adds a page to the dot around `cwd`: its folder under pages/, with its three files, listed last in
-* dot.ts.
-*/
 async function createPage(path, cwd) {
 	if (!isPageId(path)) throw new CommandError(`"${path}" is not a page path: use letters, digits, "-" and "_", with "/" between folders, such as "cart/checkout"`);
 	const root = findDotRoot(resolve(cwd));
@@ -277,14 +289,6 @@ function listsPage(source, dotFile, path) {
 		return false;
 	}
 }
-function findDotRoot(dir) {
-	while (true) {
-		if (existsSync(join(dir, "dot.json"))) return dir;
-		const parent = dirname(dir);
-		if (parent === dir) return;
-		dir = parent;
-	}
-}
 //#endregion
 //#region src/create/package-manager.ts
 const PACKAGE_MANAGERS = [
@@ -520,6 +524,17 @@ async function readText(request) {
 	return Buffer.concat(chunks).toString("utf8");
 }
 //#endregion
+//#region src/simulator.ts
+function startDotSimulator(project, outDir, port) {
+	return startSimulator({
+		dotDir: outDir,
+		reactHostDir: installedRuntime(project.root).react.dir,
+		name: project.dotJson.name,
+		port,
+		storageDir: join(project.root, ".dot", "files")
+	});
+}
+//#endregion
 //#region src/dev.ts
 const CHANGE_DEBOUNCE_MS = 50;
 async function dev({ port, device, ...options }) {
@@ -543,13 +558,7 @@ async function dev({ port, device, ...options }) {
 		}
 	};
 	const firstError = await buildApp();
-	const simulator = await startSimulator({
-		dotDir: outDir,
-		reactHostDir: installedRuntime(project.root).react.dir,
-		name: project.dotJson.name,
-		port,
-		storageDir: join(project.root, ".dot", "files")
-	});
+	const simulator = await startDotSimulator(project, outDir, port);
 	if (firstError) simulator.error(firstError);
 	console.log(`\n  Simulator running at: ${simulator.url}\n`);
 	let devices;
@@ -637,6 +646,99 @@ function isIgnored(file) {
 	});
 }
 //#endregion
+//#region src/preview.ts
+async function preview({ port, ...options }) {
+	const project = await loadProject(options.root);
+	const outDir = resolve(project.root, options.outDir ?? "dist");
+	const started = performance.now();
+	printWarnings(await build({
+		...options,
+		outDir,
+		mode: "production"
+	}));
+	printBuildTime(started);
+	const simulator = await startDotSimulator(project, outDir, port);
+	console.log(`\n  Simulator running at: ${simulator.url}\n`);
+	return simulator;
+}
+//#endregion
+//#region src/prompts.ts
+const TERMINAL = {
+	input: process.stdin,
+	output: process.stdout
+};
+const ERASE_BELOW = "\x1B[0J";
+const HIDE_CURSOR = "\x1B[?25l";
+const SHOW_CURSOR = "\x1B[?25h";
+const cursorUp = (lines) => `\x1b[${lines}A`;
+async function select(question, choices, fallback, { input, output } = TERMINAL) {
+	if (!input.isTTY) return fallback;
+	let current = Math.max(0, choices.findIndex((choice) => choice.value === fallback));
+	const width = choices.some((choice) => choice.hint) ? Math.max(...choices.map((choice) => choice.value.length)) : 0;
+	const row = (choice, index) => {
+		const name = choice.value.padEnd(width);
+		const hint = choice.hint ? styleText("dim", `  ${choice.hint}`) : "";
+		const defaultMark = choice.value === fallback ? styleText("green", " (default)") : "";
+		if (index === current) return `${styleText("cyan", "❯")} ${styleText(["cyan", "bold"], name)}${hint}${defaultMark}`;
+		return `  ${name}${hint}${defaultMark}`;
+	};
+	let drawnLines = 0;
+	const draw = (lines) => {
+		output.write(`${drawnLines ? cursorUp(drawnLines) : ""}${ERASE_BELOW}${lines.join("\n")}\n`);
+		drawnLines = lines.length;
+	};
+	const drawList = () => draw([`${styleText("bold", question)} ${styleText("dim", "↑/↓ to move, Enter to choose")}`, ...choices.map(row)]);
+	emitKeypressEvents(input);
+	input.setRawMode(true);
+	input.resume();
+	output.write(HIDE_CURSOR);
+	drawList();
+	return new Promise((resolve) => {
+		const onKeypress = (_text, key) => {
+			if (key.ctrl && key.name === "c") {
+				output.write(`${SHOW_CURSOR}\n`);
+				process.exit(130);
+			}
+			if (key.name === "up" || key.name === "k") {
+				current = (current - 1 + choices.length) % choices.length;
+				drawList();
+			} else if (key.name === "down" || key.name === "j") {
+				current = (current + 1) % choices.length;
+				drawList();
+			} else if (key.name === "return" || key.name === "enter") {
+				const { value } = choices[current];
+				input.off("keypress", onKeypress);
+				input.setRawMode(false);
+				input.pause();
+				draw([`${styleText("bold", question)} ${styleText("cyan", value)}`]);
+				output.write(SHOW_CURSOR);
+				resolve(value);
+			}
+		};
+		input.on("keypress", onKeypress);
+	});
+}
+async function confirm(question, fallback, terminal = TERMINAL) {
+	if (!terminal.input.isTTY) return false;
+	return await select(question, [{ value: "Yes" }, { value: "No" }], fallback ? "Yes" : "No", terminal) === "Yes";
+}
+async function ask(question, fallback, { input, output } = TERMINAL) {
+	if (!input.isTTY) return fallback;
+	const hint = fallback ? styleText("dim", ` (default: ${fallback})`) : "";
+	const readline = createInterface({
+		input,
+		output
+	});
+	try {
+		return (await readline.question(`${styleText("bold", question)}${hint}: `)).trim() || fallback;
+	} catch (error) {
+		if (error.name === "AbortError") return;
+		throw error;
+	} finally {
+		readline.close();
+	}
+}
+//#endregion
 //#region src/cli.ts
 const USAGE = `Usage:
   dotctl create [dir] [--name <name>] [--template <starter|showcase>]
@@ -648,6 +750,8 @@ const USAGE = `Usage:
                                         view.dml, state.ts and controller.ts
   dotctl build [root] [options]         Build the minified bundles the host app runs
   dotctl dev [root] [options]           Run in the browser simulator, rebuilding on change
+  dotctl preview [root] [options]       Build as \`build\` does, and run that build in the browser
+                                        simulator, as the host app gets it
   dotctl keys show                      Show the public key and key ID of this computer's
                                         developer key, which signs the links \`dev --device\`
                                         shows, for Dash to open
@@ -657,8 +761,8 @@ const USAGE = `Usage:
 Options:
   --out-dir <dir>       Output directory (default: <root>/dist)
   --conditions <list>   Extra export conditions, comma separated
-  --port <port>         Simulator port for \`dev\`; the next free one is used if taken
-                        (default: ${DEFAULT_PORT})
+  --port <port>         Simulator port for \`dev\` and \`preview\`; the next free one is used
+                        if taken (default: ${DEFAULT_PORT})
   --device              With \`dev\`, also serve the dot to the Dot example apps on phones on
                         the local network, through a link and QR code; they reload on each build
   -h, --help            Show this message`;
@@ -683,14 +787,14 @@ async function main(argv) {
 	});
 	const [command, target, pagePath] = positionals;
 	if (command === "lsp" && !values.help) {
-		const { serveStdio } = await import("./server-DFOUQnLA.js");
+		const { serveStdio } = await import("./server-BfPAnsSf.js");
 		serveStdio();
 		return new Promise(() => {});
 	}
 	if (command === "keys" && !values.help) return keys(target);
 	if (command === "create" && target === "page" && !values.help) return addPage(pagePath);
 	if (command === "create" && !values.help) return createApp(target, values.name, values.template, values.pm);
-	if (values.help || command !== "build" && command !== "dev") {
+	if (values.help || command !== "build" && command !== "dev" && command !== "preview") {
 		console.log(USAGE);
 		return values.help ? 0 : 1;
 	}
@@ -712,6 +816,19 @@ async function main(argv) {
 		await stop();
 		return 0;
 	}
+	if (command === "preview") {
+		if (values.device) {
+			console.error("--device works only with dotctl dev");
+			return 1;
+		}
+		const simulator = await preview({
+			...options,
+			port
+		});
+		await new Promise((resolve) => process.once("SIGINT", resolve));
+		await simulator.close();
+		return 0;
+	}
 	const started = performance.now();
 	const result = await build(options);
 	for (const file of result.files.filter((file) => !file.endsWith(".map"))) console.log(`  ${relative(process.cwd(), file)}`);
@@ -755,7 +872,7 @@ async function createApp(dir, name, templateFlag, packageManagerFlag) {
 		console.error(`--pm must be one of ${PACKAGE_MANAGERS.join(", ")}`);
 		return 1;
 	}
-	name ??= await ask("Dot name:", dir ? toDisplayName(dir) : "Dot");
+	name ??= await ask("Dot name", dir ? toDisplayName(dir) : "Dot");
 	if (!name) {
 		console.error("A dot needs a name: dotctl create [dir] --name \"My Dot\"");
 		return 1;
@@ -770,7 +887,8 @@ async function createApp(dir, name, templateFlag, packageManagerFlag) {
 	console.log(`\nCreated ${name} in ${path}`);
 	if (workspace) console.log("It is inside the Dot repository, so it uses the workspace packages.");
 	let packageManager = workspace ? "pnpm" : packageManagerFlag ?? launchedBy();
-	if (await confirm("\nInstall and start it now?")) {
+	console.log();
+	if (await confirm("Install and start it now?", true)) {
 		if (!workspace && !packageManagerFlag) packageManager = await choosePackageManager(packageManager);
 		if (await run(packageManager, ["install"], root) === 0) return run(packageManager, ["run", "dev"], root);
 		console.error(`\n${packageManager} install failed.`);
@@ -789,53 +907,24 @@ function run(command, args, cwd) {
 		child.on("exit", (code) => resolvePromise(code ?? 1));
 	});
 }
-async function confirm(question) {
-	if (!process.stdin.isTTY) return false;
-	const answer = await readAnswer(`${question} (Y/n)`, "y");
-	return answer !== void 0 && answer.toLowerCase().startsWith("y");
-}
-async function ask(question, fallback) {
-	return readAnswer(`${question}${fallback ? ` (${fallback})` : ""}`, fallback);
-}
-async function readAnswer(prompt, fallback) {
-	if (!process.stdin.isTTY) return fallback;
-	const readline = createInterface({
-		input: process.stdin,
-		output: process.stdout
-	});
-	try {
-		return (await readline.question(`${prompt} `)).trim() || fallback;
-	} catch (error) {
-		if (error.name === "AbortError") return;
-		throw error;
-	} finally {
-		readline.close();
-	}
-}
-async function chooseTemplate() {
-	if (!process.stdin.isTTY) return "starter";
-	console.log("\nTemplates:\n  starter   one page to build on\n  showcase  a page for each feature, to read");
-	return chooseOne("Template?", TEMPLATES, "starter");
+function chooseTemplate() {
+	console.log();
+	return select("Template?", TEMPLATES.map((template) => ({
+		value: template,
+		hint: TEMPLATE_HINTS[template]
+	})), "starter");
 }
 async function choosePackageManager(suggested) {
 	const installed = installedManagers();
 	if (installed.length < 2) return installed[0] ?? suggested;
-	return chooseOne("Package manager?", installed, installed.includes(suggested) ? suggested : installed[0]);
-}
-async function chooseOne(question, options, fallback) {
-	while (true) {
-		const answer = await ask(`${question} ${options.join(" / ")}`, fallback);
-		if (answer === void 0) return fallback;
-		const chosen = options.find((option) => option === answer);
-		if (chosen) return chosen;
-		console.log(`Choose one of ${options.join(", ")}.`);
-	}
+	const fallback = installed.includes(suggested) ? suggested : installed[0];
+	return select("Package manager?", installed.map((manager) => ({ value: manager })), fallback);
 }
 main(process.argv.slice(2)).then((code) => process.exit(code), (error) => {
 	console.error(`error: ${describeError(error)}`);
 	process.exit(1);
 });
 //#endregion
-export {};
+export { findDotRoot as t };
 
 //# sourceMappingURL=cli.js.map