nowebcli 0.2.12 → 0.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nowebcli",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "description": "Create, preview and publish community templates for Noweb",
   "license": "MIT",
   "repository": {
@@ -68,6 +68,7 @@
     "motion": "^12.40.0",
     "next": "^16.2.10",
     "ogl": "^1.0.11",
+    "ora": "^9.4.1",
     "pg": "^8.22.0",
     "playwright": "^1.61.1",
     "postcss": "^8.5.6",

package/scripts/noweb.mjs

@@ -10,6 +10,8 @@ import { basename, dirname, extname, join, resolve, sep } from "node:path";
 import { createInterface } from "node:readline/promises";
 import { fileURLToPath, pathToFileURL } from "node:url";
 import { register } from "tsx/esm/api";
+import { styleText } from "node:util";
+import ora from "ora";
 
 const root = process.cwd();
 const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..");
@@ -26,6 +28,20 @@ const apiBase = (process.env.NOWEB_URL || "https://noweb.app").replace(/\/$/, ""
 const clientId = "noweb-cli";
 register({ tsconfig: join(engineRoot, "tsconfig.json") });
 
+const terminalColors = process.env.NO_COLOR === undefined && process.env.NODE_DISABLE_COLORS !== "1";
+const progress = ora({
+  spinner: "dots",
+  color: terminalColors ? "cyan" : false,
+  prefixText: styleText("magenta", "noweb"),
+  isSilent: !process.stderr.isTTY || Boolean(process.env.CI),
+  discardStdin: false,
+});
+
+function success(message) {
+  progress.stop();
+  console.log(styleText("green", message));
+}
+
 function usage() {
   console.log(`noweb
 
@@ -58,7 +74,7 @@ async function createTemplate(value) {
     writeFile(join(directory, "public/.gitkeep"), ""),
   ]);
   await setupWorkspace(shouldInstall);
-  console.log(`Created ${validSlug} in ${directory}. Add a 16:9 public/cover.jpg (JPEG, up to 5 MB).`);
+  success(`Created ${validSlug} in ${directory}. Add a 16:9 public/cover.jpg (JPEG, up to 5 MB).`);
 }
 
 async function setupWorkspace(install = true) {
@@ -71,6 +87,7 @@ async function setupWorkspace(install = true) {
     ]);
   }
   if (!install) return;
+  progress.stop();
   const result = spawnSync(process.platform === "win32" ? "npm.cmd" : "npm", ["install"], { cwd: root, stdio: "inherit" });
   if (result.status !== 0) throw new Error("Could not install the template workspace dependencies.");
 }
@@ -82,16 +99,18 @@ async function checkRepositoryTemplates(value, quiet = false, assetRoot = "/asse
   const results = [];
   for (const currentSlug of slugs) {
     const assetBase = assetRoot === "/assets" ? assetRoot : `${assetRoot}/${currentSlug}`;
+    if (!quiet) progress.start(`Compiling ${currentSlug}…`);
     const result = await buildTemplate(join(repositoryTemplatesRoot, currentSlug), currentSlug, assetBase);
     results.push(result);
-    if (!quiet) console.log(`✓ ${currentSlug} (${result.fields} fields, ${formatBytes(result.js.length + result.css.length)})`);
+    if (!quiet) success(`✓ ${currentSlug} (${result.fields} fields, ${formatBytes(result.js.length + result.css.length)})`);
   }
   return results;
 }
 
 async function checkProject(quiet = false) {
+  if (!quiet) progress.start("Validating and compiling template…");
   const result = await buildTemplate(root);
-  if (!quiet) console.log(`✓ ${result.slug} (${result.fields} fields, ${formatBytes(result.js.length + result.css.length)})`);
+  if (!quiet) success(`✓ ${result.slug} (${result.fields} fields, ${formatBytes(result.js.length + result.css.length)})`);
   return result;
 }
 
@@ -141,6 +160,7 @@ async function createCover() {
   const coverPath = join(root, "public", "cover.jpg");
   const force = cliArgs.includes("--force");
   if (!force && existsSync(coverPath)) throw new Error("public/cover.jpg already exists. Use `noweb cover --force` to replace it.");
+  progress.start("Compiling cover preview…");
   const template = await buildTemplate(root, undefined, "/assets", false);
   const server = createServer(async (request, response) => {
     try {
@@ -162,12 +182,17 @@ async function createCover() {
       server.once("error", reject);
       server.listen(0, "127.0.0.1", resolve);
     });
-    browser = await chromium.launch({ headless: true, args: ["--enable-unsafe-swiftshader", "--use-angle=swiftshader"] });
+    progress.color = terminalColors ? "magenta" : false;
+    progress.text = "Starting Chromium…";
+    browser = await chromium.launch({ headless: true, args: ["--enable-unsafe-swiftshader", "--enable-unsafe-webgpu", "--use-angle=swiftshader"] });
     const page = await browser.newPage({ viewport: { width: 1920, height: 1080 }, deviceScaleFactor: 1 });
     const errors = [];
     page.on("pageerror", (error) => errors.push(error.message));
     page.on("console", (message) => { if (message.type() === "error") errors.push(message.text()); });
     await page.goto(`http://127.0.0.1:${server.address().port}`, { waitUntil: "load" });
+    if (template.source.includes("shaders/react") && !await page.evaluate(async () => Boolean(await navigator.gpu?.requestAdapter()))) {
+      throw new Error("Cannot create shader cover: Chromium has no WebGPU adapter. Update Chromium with `npx playwright install chromium`.");
+    }
     await page.waitForFunction(() => document.getElementById("root")?.childElementCount, undefined, { timeout: 15_000 }).catch(() => {
       throw new Error(`Template did not render: ${errors.slice(0, 3).join("; ") || "empty preview"}`);
     });
@@ -177,13 +202,17 @@ async function createCover() {
         new Promise((resolve) => setTimeout(resolve, 10_000)),
       ]);
     });
+    progress.color = terminalColors ? "yellow" : false;
+    progress.text = "Rendering shaders — waiting 5 seconds…";
     await page.waitForTimeout(5000);
+    progress.color = terminalColors ? "cyan" : false;
+    progress.text = "Saving 1920×1080 cover…";
     const bytes = await page.screenshot({ type: "jpeg", quality: 90, fullPage: false });
     const { validateTemplateCover } = await load("lib/template-cover.ts");
     validateTemplateCover(bytes);
     await mkdir(join(root, "public"), { recursive: true });
     await writeFile(coverPath, bytes, { flag: force ? "w" : "wx" });
-    console.log("Created public/cover.jpg (1920×1080, 16:9). Check the image before uploading.");
+    success("Created public/cover.jpg (1920×1080, 16:9). Check the image before uploading.");
   } finally {
     await browser?.close();
     server.closeAllConnections();
@@ -202,7 +231,7 @@ async function dev() {
         const template = await checkProject(true);
         response.writeHead(200, { "Cache-Control": "no-store", "Content-Type": "text/html; charset=utf-8" });
         response.end(previewHtml(template));
-        console.log(`✓ rebuilt ${template.slug}`);
+        success(`✓ rebuilt ${template.slug}`);
         return;
       }
       await servePublic(url.pathname, response);
@@ -216,14 +245,14 @@ async function dev() {
     process.exitCode = 1;
   });
   server.listen(port, "127.0.0.1", () => {
-    console.log(`Preview: http://127.0.0.1:${port}\nRefresh the page to rebuild.`);
+    console.log(styleText("cyan", `Preview: http://127.0.0.1:${port}\nRefresh the page to rebuild.`));
   });
 }
 
 async function upload() {
   const template = await checkProject();
   if (dryRun) {
-    console.log(`Ready to upload ${template.slug}`);
+    success(`Ready to upload ${template.slug}`);
     return;
   }
 
@@ -239,6 +268,7 @@ async function upload() {
   for (const file of template.assetFiles) {
     form.append("assets", new Blob([file.body]), basename(file.path));
   }
+  progress.start("Uploading template, assets and cover…");
   const response = await fetch(`${apiBase}/api/templates/upload`, {
     method: "POST",
     headers: { Authorization: `Bearer ${credentials.token}` },
@@ -248,13 +278,14 @@ async function upload() {
   if (!response.ok) throw new Error(result.error || `Upload failed (${response.status}).`);
   if (!Number.isInteger(result.id) || result.id < 1) throw new Error("Upload returned an invalid template ID.");
   await writeFile(join(root, "template.json"), `${JSON.stringify({ id: result.id, slug: template.slug, type: template.type }, null, 2)}\n`);
-  console.log(`Uploaded ${template.slug} (unpublished): ${new URL(result.url, apiBase)}`);
+  success(`Uploaded ${template.slug} (unpublished): ${new URL(result.url, apiBase)}`);
 }
 
 async function publishUploadedTemplate() {
   const template = JSON.parse(await readFile(join(root, "template.json"), "utf8"));
   if (!Number.isInteger(template.id) || template.id < 1) throw new Error("Upload this template first: npx nowebcli upload");
   const credentials = await requireCredentials();
+  progress.start("Publishing template…");
   const response = await fetch(`${apiBase}/api/templates/visibility`, {
     method: "PATCH",
     headers: { Authorization: `Bearer ${credentials.token}`, "Content-Type": "application/json" },
@@ -262,7 +293,7 @@ async function publishUploadedTemplate() {
   });
   const result = await response.json().catch(() => ({}));
   if (!response.ok) throw new Error(result.error || `Publish failed (${response.status}).`);
-  console.log(`Published ${template.slug}: ${new URL(result.url, apiBase)}`);
+  success(`Published ${template.slug}: ${new URL(result.url, apiBase)}`);
 }
 
 async function deleteTemplate(value) {
@@ -286,7 +317,7 @@ async function deleteTemplate(value) {
   });
   const result = await response.json().catch(() => ({}));
   if (!response.ok) throw new Error(result.error || `Delete failed (${response.status}).`);
-  console.log(`Deleted ${selectedSlug}`);
+  success(`Deleted ${selectedSlug}`);
 }
 
 async function listTemplates() {
@@ -320,6 +351,7 @@ async function downloadTemplate(value) {
   }
 
   const credentials = await requireCredentials();
+  progress.start(`Downloading ${selectedSlug}…`);
   const response = await fetch(`${apiBase}/api/templates/download?slug=${encodeURIComponent(selectedSlug)}`, {
     headers: { Authorization: `Bearer ${credentials.token}` },
   });
@@ -361,7 +393,7 @@ async function downloadTemplate(value) {
     ...(!assets.length ? [writeFile(join(root, "public/.gitkeep"), "")] : []),
   ]);
   await setupWorkspace(shouldInstall);
-  console.log(`Downloaded ${downloadedSlug} into ${root}`);
+  success(`Downloaded ${downloadedSlug} into ${root}`);
 }
 
 async function login() {
@@ -375,6 +407,7 @@ async function login() {
 
   console.log(`Open ${device.verification_uri}\nCode: ${device.user_code}`);
   openBrowser(device.verification_uri_complete);
+  progress.start("Waiting for browser login…");
   let interval = Math.max(1, Number(device.interval) || 5);
   const expiresAt = Date.now() + Number(device.expires_in) * 1000;
   while (Date.now() < expiresAt) {
@@ -395,7 +428,7 @@ async function login() {
         token: token.access_token,
         expiresAt: Date.now() + Number(token.expires_in) * 1000,
       });
-      console.log("✓ Logged in to Noweb");
+      success("✓ Logged in to Noweb");
       return;
     }
     if (token.error === "authorization_pending") continue;
@@ -508,7 +541,7 @@ async function publish(value) {
         continue;
       }
       await (await load("lib/template-screenshot.ts")).generateTemplatePreview(Number(published.id));
-      console.log(`Published ${original.slug} as template ${published.id}`);
+      success(`Published ${original.slug} as template ${published.id}`);
     }
   } finally {
     await sql.end({ timeout: 5 });
@@ -738,6 +771,9 @@ try {
   else if (command === "help" || command === "--help" || command === "-h") usage();
   else throw new Error(`Unknown command: ${command}`);
 } catch (error) {
-  console.error(`\n${error instanceof Error ? error.message : error}`);
+  progress.stop();
+  console.error(styleText("red", `\n${error instanceof Error ? error.message : error}`));
   process.exitCode = 1;
+} finally {
+  progress.stop();
 }