nowebcli 0.2.1

package/scripts/noweb.mjs

@@ -0,0 +1,625 @@
+#!/usr/bin/env node
+
+import { spawn, spawnSync } from "node:child_process";
+import { createHash } from "node:crypto";
+import { existsSync } from "node:fs";
+import { createServer } from "node:http";
+import { access, chmod, mkdir, readFile, readdir, stat, writeFile } from "node:fs/promises";
+import { homedir } from "node:os";
+import { basename, dirname, extname, join, resolve, sep } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { register } from "tsx/esm/api";
+
+const root = process.cwd();
+const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const engineRoot = existsSync(join(root, "templates/templateCompiler.ts")) ? root : packageRoot;
+const repositoryTemplatesRoot = join(root, "templates");
+const types = new Set(["portfolio", "app", "business", "other"]);
+const maxAssetBytes = 20 * 1024 * 1024;
+const maxAssetsBytes = 50 * 1024 * 1024;
+const cliArgs = process.argv.slice(2);
+const [command = "help", slug] = cliArgs.filter((argument) => !argument.startsWith("--"));
+const shouldInstall = !cliArgs.includes("--no-install");
+const dryRun = cliArgs.includes("--dry-run");
+const apiBase = (process.env.NOWEB_URL || "https://noweb.app").replace(/\/$/, "");
+const clientId = "noweb-cli";
+register({ tsconfig: join(engineRoot, "tsconfig.json") });
+
+function usage() {
+  console.log(`noweb
+
+  create [slug]   scaffold the current folder
+  setup           install local React and TypeScript dependencies
+  dev             preview at http://127.0.0.1:4173
+  check           validate and compile this template
+  login           connect the CLI to your Noweb account
+  list            list your uploaded templates
+  download <slug> restore one into the current folder
+  upload          publish this template directly to Noweb
+  publish [slug]  publish validated templates (deployment only)`);
+}
+
+async function createTemplate(value) {
+  const validSlug = requireSlug(value || basename(root));
+  const directory = root;
+  const name = validSlug.split("-").map((part) => part[0].toUpperCase() + part.slice(1)).join(" ");
+
+  for (const file of ["Template.tsx", "customizations.json", "template.json"]) {
+    if (existsSync(join(directory, file))) throw new Error(`Template file already exists: ${file}`);
+  }
+
+  await mkdir(join(directory, "public"), { recursive: true });
+  await Promise.all([
+    writeFile(join(directory, "template.json"), `${JSON.stringify({ slug: validSlug, name, type: "other" }, null, 2)}\n`),
+    writeFile(join(directory, "Template.tsx"), starterTemplate),
+    writeFile(join(directory, "customizations.json"), starterCustomizations),
+    writeFile(join(directory, "public/.gitkeep"), ""),
+  ]);
+  await setupWorkspace(shouldInstall);
+  console.log(`Created ${validSlug} in ${directory}`);
+}
+
+async function setupWorkspace(install = true) {
+  const packagePath = join(root, "package.json");
+  if (!existsSync(packagePath)) {
+    const { version } = JSON.parse(await readFile(join(packageRoot, "package.json"), "utf8"));
+    await Promise.all([
+      writeFile(packagePath, `${JSON.stringify(workspacePackage(version), null, 2)}\n`),
+      writeFile(join(root, "tsconfig.json"), `${JSON.stringify(workspaceTsconfig, null, 2)}\n`),
+    ]);
+  }
+  if (!install) return;
+  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.");
+}
+
+async function checkRepositoryTemplates(value, quiet = false, assetRoot = "/assets") {
+  const slugs = value ? [requireSlug(value)] : await findTemplates();
+  if (!slugs.length) throw new Error("No templates with template.json found.");
+
+  const results = [];
+  for (const currentSlug of slugs) {
+    const assetBase = assetRoot === "/assets" ? assetRoot : `${assetRoot}/${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)})`);
+  }
+  return results;
+}
+
+async function checkProject(quiet = false) {
+  const result = await buildTemplate(root);
+  if (!quiet) console.log(`✓ ${result.slug} (${result.fields} fields, ${formatBytes(result.js.length + result.css.length)})`);
+  return result;
+}
+
+async function buildTemplate(directory, slugOverride, assetBase = "/assets") {
+  const [metadataSource, source, customizationsSource] = await Promise.all([
+    readFile(join(directory, "template.json"), "utf8"),
+    readFile(join(directory, "Template.tsx"), "utf8"),
+    readFile(join(directory, "customizations.json"), "utf8"),
+  ]);
+  const metadata = JSON.parse(metadataSource);
+  const currentSlug = requireSlug(slugOverride || metadata?.slug);
+  if (!metadata || typeof metadata.name !== "string" || !metadata.name.trim() || !types.has(metadata.type)) {
+    throw new Error(`${currentSlug}: template.json needs a name and type (${[...types].join(", ")}).`);
+  }
+
+  const [{ compileTemplateAssets }, { validateTemplateCode }, { validateTemplateCustomizations }] = await Promise.all([
+    load("templates/templateCompiler.ts"),
+    load("templates/validateTemplateCode.ts"),
+    load("lib/customizations.ts"),
+  ]);
+  validateTemplateCode(source);
+  const customizations = validateTemplateCustomizations(JSON.parse(customizationsSource)).map((field) => ({
+    ...field,
+    defaultValue: resolveAssetValue(field.defaultValue, assetBase),
+  }));
+  const ids = customizations.map((field) => field.fieldId);
+  if (new Set(ids).size !== ids.length) throw new Error(`${currentSlug}: customization field IDs must be unique.`);
+  for (const match of source.matchAll(/\bcustom\(\s*(\d+)\s*\)/g)) {
+    if (!ids.includes(Number(match[1]))) throw new Error(`${currentSlug}: custom(${match[1]}) has no customization.`);
+  }
+  const assetFiles = await findAssetFiles(join(directory, "public"));
+  const assetHash = createHash("sha256");
+  for (const file of assetFiles) assetHash.update(file.path).update(file.body);
+  const { js, css } = await compileTemplateAssets(source, customizations, assetBase);
+  const versionedJs = assetFiles.length ? `${js}\n/* template-assets:${assetHash.digest("hex")} */` : js;
+  return { ...metadata, assetFiles, css, customizations, fields: customizations.length, js: versionedJs, slug: currentSlug, source };
+}
+
+async function dev() {
+  const port = Number(process.env.PORT || 4173);
+  if (!Number.isInteger(port) || port < 1 || port > 65535) throw new Error("PORT must be between 1 and 65535.");
+
+  const server = createServer(async (request, response) => {
+    try {
+      const url = new URL(request.url || "/", `http://${request.headers.host || "127.0.0.1"}`);
+      if (url.pathname === "/") {
+        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}`);
+        return;
+      }
+      await servePublic(url.pathname, response);
+    } catch (error) {
+      response.writeHead(500, { "Content-Type": "text/html; charset=utf-8" });
+      response.end(`<pre>${escapeHtml(error instanceof Error ? error.stack || error.message : String(error))}</pre>`);
+    }
+  });
+  server.on("error", (error) => {
+    console.error(error.message);
+    process.exitCode = 1;
+  });
+  server.listen(port, "127.0.0.1", () => {
+    console.log(`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}`);
+    return;
+  }
+
+  const credentials = await requireCredentials();
+  const form = new FormData();
+  form.set("slug", template.slug);
+  form.set("name", template.name);
+  form.set("type", template.type);
+  form.set("source", template.source);
+  form.set("customizations", JSON.stringify(template.customizations));
+  form.set("assetPaths", JSON.stringify(template.assetFiles.map((file) => file.path)));
+  for (const file of template.assetFiles) {
+    form.append("assets", new Blob([file.body]), basename(file.path));
+  }
+  const response = await fetch(`${apiBase}/api/templates/upload`, {
+    method: "POST",
+    headers: { Authorization: `Bearer ${credentials.token}` },
+    body: form,
+  });
+  const result = await response.json().catch(() => ({}));
+  if (!response.ok) throw new Error(result.error || `Upload failed (${response.status}).`);
+  console.log(`Published ${template.slug}: ${new URL(result.url, apiBase)}`);
+}
+
+async function listTemplates() {
+  const credentials = await requireCredentials();
+  const response = await fetch(`${apiBase}/api/templates/download`, {
+    headers: { Authorization: `Bearer ${credentials.token}` },
+  });
+  const result = await response.json().catch(() => ({}));
+  if (!response.ok) throw new Error(result.error || `Could not list templates (${response.status}).`);
+  const templates = Array.isArray(result.templates) ? result.templates : [];
+  const projects = Array.isArray(result.projects) ? result.projects : [];
+  if (!templates.length && !projects.length) {
+    console.log("No templates or projects.");
+    return;
+  }
+  if (templates.length) {
+    console.log("Templates");
+    for (const template of templates) console.log(`${template.slug}\t${template.name}`);
+  }
+  if (projects.length) {
+    if (templates.length) console.log();
+    console.log("Projects");
+    for (const project of projects) console.log(`${project.id}\t${project.name}`);
+  }
+}
+
+async function downloadTemplate(value) {
+  const selectedSlug = requireSlug(value);
+  for (const file of ["Template.tsx", "customizations.json", "template.json"]) {
+    if (existsSync(join(root, file))) throw new Error(`Template file already exists: ${file}`);
+  }
+
+  const credentials = await requireCredentials();
+  const response = await fetch(`${apiBase}/api/templates/download?slug=${encodeURIComponent(selectedSlug)}`, {
+    headers: { Authorization: `Bearer ${credentials.token}` },
+  });
+  const result = await response.json().catch(() => ({}));
+  if (!response.ok) throw new Error(result.error || `Download failed (${response.status}).`);
+  const template = result.template;
+  if (
+    !template || template.metadata?.slug !== selectedSlug || typeof template.metadata?.name !== "string" ||
+    !types.has(template.metadata?.type) || typeof template.source !== "string" ||
+    !Array.isArray(template.customizations) || !Array.isArray(template.assets) || template.assets.length > 200
+  ) throw new Error("The server returned an invalid template.");
+
+  const assets = await Promise.all(template.assets.map(async (asset) => {
+    const path = requireAssetPath(asset?.path);
+    if (typeof asset?.url !== "string" || !/^https?:\/\//.test(asset.url)) throw new Error("The server returned an invalid asset URL.");
+    if (existsSync(join(root, "public", path))) throw new Error(`Asset already exists: public/${path}`);
+    const assetResponse = await fetch(asset.url);
+    if (!assetResponse.ok) throw new Error(`Could not download public/${path}.`);
+    const body = Buffer.from(await assetResponse.arrayBuffer());
+    if (body.length > maxAssetBytes) throw new Error(`${path}: template assets must be 20 MB or smaller.`);
+    return { body, path };
+  }));
+  if (assets.reduce((sum, asset) => sum + asset.body.length, 0) > maxAssetsBytes) {
+    throw new Error("Template assets must be 50 MB or smaller in total.");
+  }
+
+  await mkdir(join(root, "public"), { recursive: true });
+  await Promise.all(assets.map(async (asset) => {
+    const destination = join(root, "public", asset.path);
+    await mkdir(dirname(destination), { recursive: true });
+    await writeFile(destination, asset.body);
+  }));
+  await Promise.all([
+    writeFile(join(root, "template.json"), `${JSON.stringify(template.metadata, null, 2)}\n`),
+    writeFile(join(root, "Template.tsx"), template.source),
+    writeFile(join(root, "customizations.json"), `${JSON.stringify(template.customizations, null, 2)}\n`),
+    ...(!assets.length ? [writeFile(join(root, "public/.gitkeep"), "")] : []),
+  ]);
+  await setupWorkspace(shouldInstall);
+  console.log(`Downloaded ${selectedSlug} into ${root}`);
+}
+
+async function login() {
+  const response = await fetch(`${apiBase}/api/auth/device/code`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ client_id: clientId, scope: "template:write" }),
+  });
+  const device = await response.json().catch(() => ({}));
+  if (!response.ok) throw new Error(device.error_description || device.message || "Could not start CLI login.");
+
+  console.log(`Open ${device.verification_uri}\nCode: ${device.user_code}`);
+  openBrowser(device.verification_uri_complete);
+  let interval = Math.max(1, Number(device.interval) || 5);
+  const expiresAt = Date.now() + Number(device.expires_in) * 1000;
+  while (Date.now() < expiresAt) {
+    await wait(interval * 1000);
+    const tokenResponse = await fetch(`${apiBase}/api/auth/device/token`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        grant_type: "urn:ietf:params:oauth:grant-type:device_code",
+        device_code: device.device_code,
+        client_id: clientId,
+      }),
+    });
+    const token = await tokenResponse.json().catch(() => ({}));
+    if (tokenResponse.ok) {
+      await writeCredentials({
+        baseUrl: apiBase,
+        token: token.access_token,
+        expiresAt: Date.now() + Number(token.expires_in) * 1000,
+      });
+      console.log("✓ Logged in to Noweb");
+      return;
+    }
+    if (token.error === "authorization_pending") continue;
+    if (token.error === "slow_down") {
+      interval += 5;
+      continue;
+    }
+    throw new Error(token.error_description || token.error || "CLI login failed.");
+  }
+  throw new Error("CLI login expired. Run the command again.");
+}
+
+function credentialPath() {
+  const configRoot = process.env.XDG_CONFIG_HOME || process.env.APPDATA || join(homedir(), ".config");
+  return join(configRoot, "noweb", "credentials.json");
+}
+
+async function readCredentials() {
+  try {
+    const credentials = JSON.parse(await readFile(credentialPath(), "utf8"));
+    return typeof credentials?.token === "string" && typeof credentials?.expiresAt === "number" ? credentials : null;
+  } catch (error) {
+    if (error?.code === "ENOENT") return null;
+    throw error;
+  }
+}
+
+async function requireCredentials() {
+  const credentials = await readCredentials();
+  if (!credentials || credentials.baseUrl !== apiBase || credentials.expiresAt <= Date.now()) {
+    throw new Error("Log in first: npx nowebcli login");
+  }
+  return credentials;
+}
+
+async function writeCredentials(credentials) {
+  const path = credentialPath();
+  await mkdir(dirname(path), { recursive: true, mode: 0o700 });
+  await writeFile(path, `${JSON.stringify(credentials, null, 2)}\n`, { mode: 0o600 });
+  await chmod(path, 0o600);
+}
+
+function openBrowser(url) {
+  const [commandName, args] = process.platform === "darwin"
+    ? ["open", [url]]
+    : process.platform === "win32"
+      ? ["cmd", ["/c", "start", "", url]]
+      : ["xdg-open", [url]];
+  try {
+    const child = spawn(commandName, args, { detached: true, stdio: "ignore" });
+    child.unref();
+  } catch {
+    // The printed URL is the fallback when no browser opener is available.
+  }
+}
+
+function wait(milliseconds) {
+  return new Promise((resolvePromise) => setTimeout(resolvePromise, milliseconds));
+}
+
+async function publish(value) {
+  if (engineRoot !== root) throw new Error("Publishing is only available from the Noweb repository.");
+  const databaseUrl = process.env.DATABASE_POOL_URL ?? process.env.DATABASE_URL;
+  if (!databaseUrl) throw new Error("DATABASE_POOL_URL or DATABASE_URL is required to publish templates.");
+
+  const storageApi = await load("lib/object-storage.ts");
+  const storage = storageApi.getObjectStorageClientConfig();
+  const publicUrl = storageApi.getObjectStoragePublicUrl()?.replace(/\/$/, "");
+  if (!storage || !publicUrl) throw new Error("Object storage configuration is required to publish templates.");
+  const templates = await checkRepositoryTemplates(value, false, `${publicUrl}/template-assets`);
+  const { default: postgres } = await import("postgres");
+  const sql = postgres(databaseUrl, { connect_timeout: 10, max: 1 });
+
+  try {
+    for (const template of templates) {
+      await uploadTemplateAssets(template, storageApi.createObjectStorageClient(storage), storage.bucketName);
+      const [published] = await sql`
+        INSERT INTO templates (
+          name, type, component, compiled_js, compiled_css, customizations,
+          author_id, approved_by, source_slug
+        ) VALUES (
+          ${template.name}, ${template.type}, ${template.source}, ${template.js},
+          ${template.css}, ${sql.json(template.customizations)}, 'github', 'github',
+          ${template.slug}
+        )
+        ON CONFLICT (source_slug) DO UPDATE SET
+          name = EXCLUDED.name,
+          type = EXCLUDED.type,
+          component = EXCLUDED.component,
+          compiled_js = EXCLUDED.compiled_js,
+          compiled_css = EXCLUDED.compiled_css,
+          customizations = EXCLUDED.customizations,
+          approved_by = 'github'
+        WHERE templates.name IS DISTINCT FROM EXCLUDED.name
+          OR templates.type IS DISTINCT FROM EXCLUDED.type
+          OR templates.component IS DISTINCT FROM EXCLUDED.component
+          OR templates.compiled_js IS DISTINCT FROM EXCLUDED.compiled_js
+          OR templates.compiled_css IS DISTINCT FROM EXCLUDED.compiled_css
+          OR templates.customizations::jsonb IS DISTINCT FROM EXCLUDED.customizations::jsonb
+          OR templates.approved_by IS DISTINCT FROM 'github'
+        RETURNING id
+      `;
+      if (!published) {
+        console.log(`Unchanged ${template.slug}`);
+        continue;
+      }
+      const screenshot = spawnSync(
+        process.execPath,
+        ["--import", "tsx", "scripts/generate-template-screenshots.ts", String(published.id)],
+        { cwd: root, env: process.env, stdio: "inherit" },
+      );
+      if (screenshot.status !== 0) throw new Error(`Could not generate preview for ${template.slug}.`);
+      console.log(`Published ${template.slug} as template ${published.id}`);
+    }
+  } finally {
+    await sql.end({ timeout: 5 });
+  }
+}
+
+async function findTemplates() {
+  const entries = await readdir(repositoryTemplatesRoot, { withFileTypes: true });
+  return entries
+    .filter((entry) => entry.isDirectory() && !entry.name.startsWith("."))
+    .map((entry) => entry.name)
+    .sort();
+}
+
+async function servePublic(pathname, response) {
+  if (pathname.startsWith("/assets/")) {
+    return serveFile(
+      resolve(root, "public"),
+      decodeURIComponent(pathname.slice("/assets/".length)),
+      response,
+    );
+  }
+  return serveFile(resolve(root, "public"), decodeURIComponent(pathname).replace(/^\/+/, ""), response);
+}
+
+async function serveFile(publicRoot, pathname, response) {
+  const target = resolve(publicRoot, pathname);
+  if (!target.startsWith(`${publicRoot}${sep}`)) {
+    response.writeHead(403).end();
+    return;
+  }
+  try {
+    const body = await readFile(target);
+    response.writeHead(200, { "Content-Type": mimeTypes[extname(target).toLowerCase()] || "application/octet-stream" });
+    response.end(body);
+  } catch {
+    response.writeHead(404).end();
+  }
+}
+
+async function findAssetFiles(directory, prefix = "") {
+  let entries;
+  try {
+    entries = await readdir(directory, { withFileTypes: true });
+  } catch (error) {
+    if (error?.code === "ENOENT") return [];
+    throw error;
+  }
+
+  const files = [];
+  for (const entry of entries) {
+    if (entry.name === ".gitkeep") continue;
+    if (entry.name.startsWith(".")) throw new Error(`Hidden template assets are not allowed: ${entry.name}`);
+    const absolutePath = join(directory, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...await findAssetFiles(absolutePath, join(prefix, entry.name)));
+      continue;
+    }
+    if (!entry.isFile()) throw new Error(`Template assets may only contain regular files: ${absolutePath}`);
+    const file = await stat(absolutePath);
+    if (file.size > maxAssetBytes) throw new Error(`${entry.name}: template assets must be 20 MB or smaller.`);
+    files.push({ body: await readFile(absolutePath), path: join(prefix, entry.name).split(sep).join("/"), size: file.size });
+  }
+  const total = files.reduce((sum, file) => sum + file.size, 0);
+  if (total > maxAssetsBytes) throw new Error("Template assets must be 50 MB or smaller in total.");
+  return files;
+}
+
+function resolveAssetValue(value, assetBase) {
+  if (typeof value === "string" && value.startsWith("/assets/")) {
+    return `${assetBase.replace(/\/$/, "")}/${value.slice("/assets/".length)}`;
+  }
+  if (Array.isArray(value)) return value.map((item) => resolveAssetValue(item, assetBase));
+  if (value && typeof value === "object") {
+    return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, resolveAssetValue(item, assetBase)]));
+  }
+  return value;
+}
+
+async function uploadTemplateAssets(template, client, bucketName) {
+  if (!template.assetFiles.length) return;
+  const { PutObjectCommand } = await import("@aws-sdk/client-s3");
+  for (const file of template.assetFiles) {
+    await client.send(new PutObjectCommand({
+      Bucket: bucketName,
+      Key: `template-assets/${template.slug}/${file.path}`,
+      Body: file.body,
+      CacheControl: "public, max-age=0, must-revalidate",
+      ContentType: mimeTypes[extname(file.path).toLowerCase()] || "application/octet-stream",
+    }));
+  }
+}
+
+function previewHtml(template) {
+  return `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${escapeHtml(template.name)}</title><style>${escapeClosingTag(template.css, "style")}</style></head><body><div id="root"></div><script>${escapeClosingTag(template.js, "script")}</script><script>window.__nowebRenderTemplate(document.getElementById("root"), {});</script></body></html>`;
+}
+
+function requireSlug(value) {
+  if (!value || !/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(value)) throw new Error("Use a lowercase template slug, for example: minimal-portfolio");
+  return value;
+}
+
+function requireAssetPath(value) {
+  if (typeof value !== "string" || value.length > 300 || value.includes("\\")) throw new Error("Invalid asset path.");
+  const parts = value.split("/");
+  if (parts.some((part) => !part || part === "." || part === ".." || part.startsWith("."))) throw new Error("Invalid asset path.");
+  return value;
+}
+
+function load(relativePath) {
+  return import(pathToFileURL(join(engineRoot, relativePath)).href);
+}
+
+function escapeHtml(value) {
+  return value.replace(/[&<>"']/g, (character) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[character]);
+}
+
+function escapeClosingTag(value, tag) {
+  return value.replace(new RegExp(`</${tag}`, "gi"), `<\\/${tag}`);
+}
+
+function formatBytes(bytes) {
+  return `${Math.round(bytes / 1024)} KB`;
+}
+
+const mimeTypes = {
+  ".css": "text/css; charset=utf-8",
+  ".gif": "image/gif",
+  ".jpeg": "image/jpeg",
+  ".jpg": "image/jpeg",
+  ".js": "text/javascript; charset=utf-8",
+  ".png": "image/png",
+  ".avif": "image/avif",
+  ".json": "application/json",
+  ".mp4": "video/mp4",
+  ".svg": "image/svg+xml",
+  ".webp": "image/webp",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+};
+
+const starterTemplate = `import React from "react";
+import { custom } from "noweb";
+
+export default function Template() {
+  return (
+    <main className="grid min-h-screen place-items-center bg-neutral-950 px-6 text-white">
+      <div className="max-w-2xl text-center">
+        <h1 className="text-5xl font-semibold tracking-tight">{custom(1)}</h1>
+        <p className="mt-5 text-lg text-white/60">{custom(2)}</p>
+      </div>
+    </main>
+  );
+}
+`;
+
+const starterCustomizations = `${JSON.stringify([
+  { fieldId: 1, name: "Title", type: "text", defaultValue: "Your new template" },
+  { fieldId: 2, name: "Description", type: "text", defaultValue: "Make it yours." },
+], null, 2)}\n`;
+
+function workspacePackage(version) {
+  return {
+    name: "noweb-project",
+    private: true,
+    scripts: {
+      check: "noweb check",
+      dev: "noweb dev",
+    },
+    dependencies: {
+      noweb: `npm:nowebcli@^${version}`,
+      react: "19.2.4",
+      "react-dom": "19.2.4",
+    },
+    devDependencies: {
+      "@types/react": "^19",
+      "@types/react-dom": "^19",
+      typescript: "^5",
+    },
+  };
+}
+
+const workspaceTsconfig = {
+  compilerOptions: {
+    allowImportingTsExtensions: true,
+    jsx: "react-jsx",
+    lib: ["DOM", "ES2022"],
+    module: "ESNext",
+    moduleResolution: "Bundler",
+    noEmit: true,
+    paths: {
+      "@noweb": ["./node_modules/noweb/templates/templateRuntime.tsx"],
+      "@noweb/shaders": ["./node_modules/noweb/templates/shadersRuntime.tsx"],
+      noweb: ["./node_modules/noweb/templates/templateRuntime.tsx"],
+    },
+    skipLibCheck: true,
+    strict: true,
+    target: "ES2022",
+  },
+  include: ["Template.tsx"],
+};
+
+try {
+  await access(join(engineRoot, "templates/templateCompiler.ts"));
+
+  if (command === "create") await createTemplate(slug);
+  else if (command === "setup") await setupWorkspace(shouldInstall);
+  else if (command === "check") await (slug && engineRoot === root ? checkRepositoryTemplates(slug) : checkProject());
+  else if (command === "dev") await dev();
+  else if (command === "login") await login();
+  else if (command === "list") await listTemplates();
+  else if (command === "download") await downloadTemplate(slug);
+  else if (command === "upload") await upload();
+  else if (command === "publish") await publish(slug);
+  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}`);
+  process.exitCode = 1;
+}

package/templates/compileTailwind.ts

@@ -0,0 +1,67 @@
+import { execFile } from "node:child_process";
+import { mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+import { promisify } from "node:util";
+
+const run = promisify(execFile);
+const require = createRequire(import.meta.url);
+const TAILWIND_COMPILE_TIMEOUT_MS = 10_000;
+const TAILWIND_COMPILE_MAX_BUFFER = 8 * 1024 * 1024;
+
+export async function compileTailwindForTemplate(
+  code: string,
+  additionalSources: string[] = [],
+) {
+  const dir = await mkdtemp(path.join(tmpdir(), "template-css-"));
+  const input = path.join(dir, "input.css");
+  const output = path.join(dir, "output.css");
+  const runner = path.join(dir, "runner.mjs");
+  const template = path.join(dir, "template.tsx");
+  const tailwindCss = path.join(path.dirname(require.resolve(/* turbopackIgnore: true */ "tailwindcss/package.json")), "index.css");
+  const packageJsonUrl = pathToFileURL(require.resolve(/* turbopackIgnore: true */ "postcss/package.json")).href;
+
+  try {
+    await writeFile(template, code);
+    await Promise.all(
+      additionalSources.map((source, index) =>
+        writeFile(path.join(dir, `additional-${index}.tsx`), source),
+      ),
+    );
+    const sources = [
+      '@source "./template.tsx";',
+      ...additionalSources.map((_, index) => `@source "./additional-${index}.tsx";`),
+    ].join("\n");
+    await writeFile(input, `@import ${JSON.stringify(tailwindCss)};\n${sources}\n`);
+    await writeFile(
+      runner,
+      `
+import { createRequire } from "node:module";
+import { readFile, writeFile } from "node:fs/promises";
+
+const require = createRequire(${JSON.stringify(packageJsonUrl)});
+const postcss = require("postcss");
+const tailwindcss = require("@tailwindcss/postcss");
+const input = ${JSON.stringify(input)};
+const output = ${JSON.stringify(output)};
+const css = await readFile(input, "utf8");
+const result = await postcss([
+  tailwindcss({ base: ${JSON.stringify(dir)}, optimize: { minify: true } }),
+]).process(css, { from: input });
+
+await writeFile(output, result.css);
+`,
+    );
+
+    await run(process.execPath, [runner], {
+      maxBuffer: TAILWIND_COMPILE_MAX_BUFFER,
+      timeout: TAILWIND_COMPILE_TIMEOUT_MS,
+    });
+
+    return readFile(output, "utf8");
+  } finally {
+    await rm(dir, { force: true, recursive: true });
+  }
+}