reset-framework-cli 0.2.0

package/src/commands/init.js

@@ -0,0 +1,629 @@
+import { existsSync, readdirSync } from "node:fs"
+import { cp, mkdir, readFile, readdir, writeFile } from "node:fs/promises"
+import path from "node:path"
+
+import {
+  getInstallCommandArgs,
+  resolvePackageManagerCommand,
+  runCommand
+} from "../lib/process.js"
+import {
+  makeAppMetadata,
+  resolveFrameworkPaths,
+  resolveSdkDependencySpec
+} from "../lib/project.js"
+import {
+  createProgress,
+  isInteractiveSession,
+  printBanner,
+  printKeyValueTable,
+  printSection,
+  printStatusTable,
+  promptConfirm,
+  promptSelect,
+  promptText,
+  withPromptSession
+} from "../lib/ui.js"
+
+const sdkRuntimeReexport = `export {
+  createResetClient,
+  getResetRuntime,
+  invoke,
+  invokeRaw,
+  isResetRuntimeAvailable,
+  ResetRuntimeUnavailableError,
+} from '@reset-framework/sdk'
+
+export type {
+  ResetInvokeError,
+  ResetInvokeResponse,
+  ResetInvokeSuccess,
+  ResetRuntime,
+  ResetRuntimeWindow,
+} from '@reset-framework/sdk'
+`
+
+const standaloneViteConfig = `import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})
+`
+
+const tailwindViteConfig = `import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})
+`
+
+const standaloneTsconfigApp = `{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
+`
+
+const tailwindIndexCss = `@import "tailwindcss";
+
+:root {
+  color-scheme: dark;
+}
+
+body {
+  margin: 0;
+  font-family: "Avenir Next", "Segoe UI", sans-serif;
+  background: #111111;
+}
+`
+
+const tailwindAppTsx = `import { useEffect, useState } from 'react'
+import { invoke } from './lib/reset'
+
+function App() {
+  const [count, setCount] = useState(0)
+  const [appName, setAppName] = useState('Reset App')
+  const [platform, setPlatform] = useState('unknown')
+
+  useEffect(() => {
+    let cancelled = false
+
+    async function loadRuntimeInfo() {
+      try {
+        const [{ name }, { platform }] = await Promise.all([
+          invoke<{ name: string }>('app.getName'),
+          invoke<{ platform: string }>('runtime.platform'),
+        ])
+
+        if (cancelled) {
+          return
+        }
+
+        setAppName(name)
+        setPlatform(platform)
+      } catch (error) {
+        console.error('Failed to load runtime info', error)
+      }
+    }
+
+    loadRuntimeInfo()
+
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  return (
+    <main className="min-h-screen bg-stone-950 text-stone-100">
+      <div className="mx-auto flex min-h-screen max-w-6xl flex-col px-6 py-12 lg:px-10">
+        <div className="inline-flex w-fit items-center rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm tracking-[0.18em] text-stone-300 uppercase">
+          {appName} on {platform}
+        </div>
+
+        <div className="mt-12 grid gap-12 lg:grid-cols-[minmax(0,1.4fr)_minmax(20rem,0.8fr)] lg:items-end">
+          <section>
+            <p className="text-sm font-medium uppercase tracking-[0.32em] text-amber-300">
+              Reset Framework
+            </p>
+            <h1 className="mt-5 max-w-4xl text-5xl font-medium leading-[0.95] tracking-[-0.06em] text-white sm:text-6xl lg:text-7xl">
+              Tailwind-ready desktop apps with a native runtime underneath.
+            </h1>
+            <p className="mt-6 max-w-2xl text-lg leading-8 text-stone-300">
+              Edit the frontend, call native commands through the runtime bridge, and keep the
+              host layer out of the way while you build the actual product.
+            </p>
+          </section>
+
+          <section className="rounded-[2rem] border border-white/10 bg-white/5 p-6 shadow-2xl shadow-black/20 backdrop-blur">
+            <div className="flex items-center justify-between text-sm text-stone-400">
+              <span>Bridge</span>
+              <span>app.getName / runtime.platform</span>
+            </div>
+            <div className="mt-6 rounded-2xl border border-white/10 bg-black/30 p-5">
+              <div className="text-xs uppercase tracking-[0.24em] text-stone-500">
+                Counter
+              </div>
+              <div className="mt-4 text-4xl font-semibold text-white">{count}</div>
+              <button
+                className="mt-6 inline-flex items-center rounded-full bg-amber-300 px-5 py-3 text-sm font-semibold text-stone-950 transition hover:bg-amber-200"
+                onClick={() => setCount((value) => value + 1)}
+              >
+                Increment
+              </button>
+            </div>
+          </section>
+        </div>
+      </div>
+    </main>
+  )
+}
+
+export default App
+`
+
+export const description = "Scaffold a starter app with an interactive project setup"
+
+function listTemplates(templatesDir) {
+  return readdirSync(templatesDir, { withFileTypes: true })
+    .filter((entry) => entry.isDirectory())
+    .map((entry) => entry.name)
+    .sort()
+}
+
+function getRootGitignore(frontendDir) {
+  if (frontendDir === ".") {
+    return `.reset
+node_modules
+dist
+`
+  }
+
+  return `.reset
+${frontendDir}/node_modules
+${frontendDir}/dist
+`
+}
+
+function resolveDefaultFrontendDir(context) {
+  if (typeof context.flags["frontend-dir"] === "string") {
+    return context.flags["frontend-dir"]
+  }
+
+  if (context.flags.flat) {
+    return "."
+  }
+
+  return "frontend"
+}
+
+function resolveDefaultStyling(context) {
+  if (context.flags.tailwind) {
+    return "tailwindcss"
+  }
+
+  if (context.flags["no-tailwind"]) {
+    return "css"
+  }
+
+  return "css"
+}
+
+function resolvePackageManagerOption(context) {
+  if (typeof context.flags["package-manager"] === "string") {
+    return context.flags["package-manager"]
+  }
+
+  return "npm"
+}
+
+function describeInstallCommand(packageManager) {
+  return [packageManager, ...getInstallCommandArgs(packageManager)].join(" ")
+}
+
+async function ensureWritableTarget(targetDir, force) {
+  if (!existsSync(targetDir)) {
+    return
+  }
+
+  const entries = await readdir(targetDir)
+
+  if (entries.length > 0 && !force) {
+    throw new Error(`Target directory is not empty: ${targetDir}. Use --force to continue.`)
+  }
+}
+
+async function copyFrontendTemplate(sourceFrontendDir, targetFrontendDir, options) {
+  const { force, frontendDir } = options
+  const flatLayout = frontendDir === "."
+
+  if (!flatLayout) {
+    await cp(sourceFrontendDir, targetFrontendDir, {
+      recursive: true,
+      force,
+      filter(source) {
+        const baseName = path.basename(source)
+        return (
+          baseName !== "node_modules" &&
+          baseName !== "dist" &&
+          baseName !== "bun.lockb" &&
+          baseName !== "reset.config.json"
+        )
+      }
+    })
+
+    return
+  }
+
+  await mkdir(targetFrontendDir, { recursive: true })
+
+  const entries = await readdir(sourceFrontendDir, { withFileTypes: true })
+  for (const entry of entries) {
+    if (["node_modules", "dist", "bun.lockb", "reset.config.json", ".gitignore", "README.md"].includes(entry.name)) {
+      continue
+    }
+
+    await cp(
+      path.join(sourceFrontendDir, entry.name),
+      path.join(targetFrontendDir, entry.name),
+      { recursive: true, force }
+    )
+  }
+}
+
+async function applyFrontendOverrides(frontendDir, options) {
+  await writeFile(path.join(frontendDir, "src", "lib", "reset.ts"), sdkRuntimeReexport, "utf8")
+  await writeFile(path.join(frontendDir, "tsconfig.app.json"), standaloneTsconfigApp, "utf8")
+
+  const packageJsonPath = path.join(frontendDir, "package.json")
+  const frontendPackage = JSON.parse(await readFile(packageJsonPath, "utf8"))
+  frontendPackage.dependencies = {
+    ...frontendPackage.dependencies,
+    "@reset-framework/sdk": options.sdkDependencySpec
+  }
+
+  if (options.styling === "tailwindcss") {
+    frontendPackage.devDependencies = {
+      ...frontendPackage.devDependencies,
+      "@tailwindcss/vite": "latest",
+      tailwindcss: "latest"
+    }
+
+    await writeFile(packageJsonPath, JSON.stringify(frontendPackage, null, 2) + "\n", "utf8")
+    await writeFile(path.join(frontendDir, "vite.config.ts"), tailwindViteConfig, "utf8")
+    await writeFile(path.join(frontendDir, "src", "index.css"), tailwindIndexCss, "utf8")
+    await writeFile(path.join(frontendDir, "src", "App.tsx"), tailwindAppTsx, "utf8")
+    return
+  }
+
+  await writeFile(packageJsonPath, JSON.stringify(frontendPackage, null, 2) + "\n", "utf8")
+  await writeFile(path.join(frontendDir, "vite.config.ts"), standaloneViteConfig, "utf8")
+}
+
+async function writeProjectFiles(options) {
+  const templateConfig = JSON.parse(await readFile(options.templateConfigPath, "utf8"))
+
+  await writeFile(
+    path.join(options.targetDir, "reset.config.json"),
+    JSON.stringify(
+      {
+        ...templateConfig,
+        name: options.appName,
+        productName: options.productName,
+        appId: options.appId,
+        project: {
+          frontendDir: options.frontendDir,
+          styling: options.styling
+        },
+        window: {
+          ...templateConfig.window,
+          title: options.productName
+        }
+      },
+      null,
+      2
+    ) + "\n",
+    "utf8"
+  )
+
+  await writeFile(
+    path.join(options.targetDir, ".gitignore"),
+    getRootGitignore(options.frontendDir),
+    "utf8"
+  )
+}
+
+async function collectCreateAppOptions(context, templates) {
+  const initialTarget = context.args[0] ?? "my-app"
+  const defaultTargetDir = path.resolve(context.cwd, initialTarget)
+  const defaultMetadata = makeAppMetadata(path.basename(defaultTargetDir))
+  const frameworkPaths = resolveFrameworkPaths()
+
+  const defaults = {
+    targetDir: defaultTargetDir,
+    templateName: typeof context.flags.template === "string" ? context.flags.template : "basic",
+    appName: defaultMetadata.name,
+    productName:
+      typeof context.flags["product-name"] === "string"
+        ? context.flags["product-name"]
+        : defaultMetadata.productName,
+    appId:
+      typeof context.flags["app-id"] === "string"
+        ? context.flags["app-id"]
+        : defaultMetadata.appId,
+    frontendDir: resolveDefaultFrontendDir(context),
+    styling: resolveDefaultStyling(context)
+  }
+
+  const interactive = isInteractiveSession() && !context.flags.yes && !context.flags["no-prompt"]
+
+  if (!interactive) {
+    if (!context.args[0]) {
+      throw new Error("Missing target directory. Use: reset-framework-cli create-app <directory>")
+    }
+
+    return {
+      ...defaults,
+      templateDir: path.join(frameworkPaths.templatesDir, defaults.templateName),
+      templateConfigPath: path.join(frameworkPaths.templatesDir, defaults.templateName, "reset.config.json"),
+      sourceFrontendDir: path.join(frameworkPaths.templatesDir, defaults.templateName, "frontend"),
+      sdkDependencySpec: resolveSdkDependencySpec(frameworkPaths),
+      packageManager: resolvePackageManagerOption(context),
+      installDependencies: !context.flags["no-install"],
+      force: Boolean(context.flags.force)
+    }
+  }
+
+  const selected = await withPromptSession(async (rl) => {
+    const targetInput = await promptText(rl, {
+      label: "Project directory",
+      defaultValue: path.basename(defaults.targetDir),
+      validate(value) {
+        return value.trim() !== "" || "Enter a directory name."
+      }
+    })
+
+    const targetDir = path.resolve(context.cwd, targetInput)
+    const metadata = makeAppMetadata(path.basename(targetDir))
+
+    const templateName =
+      templates.length === 1
+        ? templates[0]
+        : await promptSelect(rl, {
+            label: "Template",
+            defaultValue: defaults.templateName,
+            choices: templates.map((template) => ({
+              value: template,
+              label: template,
+              description: "Starter project scaffold"
+            }))
+          })
+
+    const productName = await promptText(rl, {
+      label: "Product name",
+      defaultValue: defaults.productName || metadata.productName,
+      validate(value) {
+        return value.trim() !== "" || "Enter a product name."
+      }
+    })
+
+    const appId = await promptText(rl, {
+      label: "App ID",
+      defaultValue: defaults.appId || metadata.appId,
+      validate(value) {
+        return value.includes(".") || "Use a reverse-domain identifier such as com.example.my-app."
+      }
+    })
+
+    const frontendDir = await promptSelect(rl, {
+      label: "Frontend layout",
+      defaultValue: defaults.frontendDir === "." ? "." : "frontend",
+      choices: [
+        {
+          value: "frontend",
+          label: "Use a frontend/ subdirectory",
+          description: "Keeps the web app separate from config, output, and packaging files."
+        },
+        {
+          value: ".",
+          label: "Keep the frontend at project root",
+          description: "Flatter project layout with package.json and src/ directly in the app root."
+        }
+      ]
+    })
+
+    const styling = await promptSelect(rl, {
+      label: "Styling setup",
+      defaultValue: defaults.styling,
+      choices: [
+        {
+          value: "css",
+          label: "Vanilla CSS starter",
+          description: "Use the existing CSS-based starter with no extra styling dependency."
+        },
+        {
+          value: "tailwindcss",
+          label: "Tailwind CSS starter",
+          description: "Configure Tailwind CSS and swap the starter screen to utility classes."
+        }
+      ]
+    })
+
+    const installDependencies = await promptConfirm(rl, {
+      label: "Install frontend dependencies after scaffolding",
+      defaultValue: true
+    })
+
+    printSection("Summary")
+    printKeyValueTable([
+      ["Directory", targetDir],
+      ["Template", templateName],
+      ["Product", productName],
+      ["App ID", appId],
+      ["Frontend", frontendDir === "." ? "project root" : `${frontendDir}/`],
+      ["Styling", styling],
+      ["Install", installDependencies ? "yes" : "no"]
+    ])
+    console.log("")
+
+    const confirmed = await promptConfirm(rl, {
+      label: "Create this project",
+      defaultValue: true
+    })
+
+    if (!confirmed) {
+      throw new Error("Create app cancelled.")
+    }
+
+    return {
+      targetDir,
+      templateName,
+      appName: metadata.name,
+      productName,
+      appId,
+      frontendDir,
+      styling,
+      installDependencies,
+      packageManager: resolvePackageManagerOption(context)
+    }
+  })
+
+  return {
+    ...selected,
+    templateDir: path.join(frameworkPaths.templatesDir, selected.templateName),
+    templateConfigPath: path.join(frameworkPaths.templatesDir, selected.templateName, "reset.config.json"),
+    sourceFrontendDir: path.join(frameworkPaths.templatesDir, selected.templateName, "frontend"),
+    sdkDependencySpec: resolveSdkDependencySpec(frameworkPaths),
+    force: Boolean(context.flags.force)
+  }
+}
+
+export async function run(context) {
+  const frameworkPaths = resolveFrameworkPaths()
+  const templates = listTemplates(frameworkPaths.templatesDir)
+  const formatTargetForShell = (targetDir) => {
+    const relative = path.relative(context.cwd, targetDir)
+    if (relative === "" || (!relative.startsWith("..") && !path.isAbsolute(relative))) {
+      return relative || "."
+    }
+
+    return targetDir
+  }
+
+  printBanner("reset-framework-cli create-app", description)
+  const options = await collectCreateAppOptions(context, templates)
+
+  if (!templates.includes(options.templateName)) {
+    throw new Error(`Unknown template: ${options.templateName}`)
+  }
+
+  const targetFrontendDir =
+    options.frontendDir === "."
+      ? options.targetDir
+      : path.join(options.targetDir, options.frontendDir)
+
+  await ensureWritableTarget(options.targetDir, options.force)
+
+  printSection("Project")
+  printKeyValueTable([
+    ["Directory", options.targetDir],
+    ["Template", options.templateName],
+    ["Product", options.productName],
+    ["App ID", options.appId],
+    ["Frontend", options.frontendDir === "." ? "project root" : `${options.frontendDir}/`],
+    ["Styling", options.styling],
+    ["Install", options.installDependencies ? describeInstallCommand(options.packageManager) : "skipped"]
+  ])
+
+  if (Boolean(context.flags["dry-run"])) {
+    console.log("")
+    printSection("Dry run")
+    printStatusTable([
+      ["plan", "Copy starter", `${options.sourceFrontendDir} -> ${targetFrontendDir}`],
+      ["plan", "Write README", path.join(options.targetDir, "README.md")],
+      ["plan", "Write config", path.join(options.targetDir, "reset.config.json")],
+      ["plan", "Write ignore file", path.join(options.targetDir, ".gitignore")],
+      ["plan", "Write SDK bridge", path.join(targetFrontendDir, "src", "lib", "reset.ts")],
+      ["plan", "Write Vite config", path.join(targetFrontendDir, "vite.config.ts")],
+      ["plan", "Write TS config", path.join(targetFrontendDir, "tsconfig.app.json")]
+    ])
+    if (options.styling === "tailwindcss") {
+      printStatusTable([
+        ["plan", "Patch package.json", path.join(targetFrontendDir, "package.json")],
+        ["plan", "Write styles", path.join(targetFrontendDir, "src", "index.css")],
+        ["plan", "Write starter screen", path.join(targetFrontendDir, "src", "App.tsx")]
+      ])
+    }
+    if (options.installDependencies) {
+      printStatusTable([
+        ["plan", "Install dependencies", `${describeInstallCommand(options.packageManager)} in ${targetFrontendDir}`]
+      ])
+    }
+    return
+  }
+
+  console.log("")
+  const progress = createProgress(options.installDependencies ? 7 : 6, "Scaffold")
+
+  await mkdir(options.targetDir, { recursive: true })
+  progress.tick("Prepared project directory")
+
+  await copyFrontendTemplate(options.sourceFrontendDir, targetFrontendDir, options)
+  progress.tick("Copied frontend starter")
+
+  await cp(path.join(options.templateDir, "README.md"), path.join(options.targetDir, "README.md"), {
+    force: options.force
+  })
+  progress.tick("Wrote project README")
+
+  await writeProjectFiles(options)
+  progress.tick("Wrote reset.config.json and root files")
+
+  await applyFrontendOverrides(targetFrontendDir, options)
+  progress.tick("Applied frontend package wiring")
+
+  const packageJsonPath = path.join(targetFrontendDir, "package.json")
+  const frontendPackage = JSON.parse(await readFile(packageJsonPath, "utf8"))
+  frontendPackage.name = options.appName
+  await writeFile(packageJsonPath, JSON.stringify(frontendPackage, null, 2) + "\n", "utf8")
+  progress.tick("Finalized starter metadata")
+
+  if (options.installDependencies) {
+    await runCommand(
+      resolvePackageManagerCommand(options.packageManager),
+      getInstallCommandArgs(options.packageManager),
+      {
+        cwd: targetFrontendDir
+      }
+    )
+    progress.tick("Installed frontend dependencies")
+  }
+
+  console.log("")
+  printSection("Result")
+  printStatusTable([
+    ["done", "Project", options.targetDir],
+    ["done", "Next step", `cd ${formatTargetForShell(options.targetDir)} && reset-framework-cli dev`]
+  ])
+}

package/src/commands/package.js

@@ -0,0 +1,63 @@
+import { existsSync } from "node:fs"
+
+import { createMacOSZipArchive } from "../lib/output.js"
+import {
+  assertAppProject,
+  loadResetConfig,
+  resolveAppOutputPaths,
+  resolveAppPaths
+} from "../lib/project.js"
+import {
+  createProgress,
+  printBanner,
+  printKeyValueTable,
+  printSection,
+  printStatusTable
+} from "../lib/ui.js"
+
+export const description = "Package the built desktop app into a distributable archive"
+
+export async function run(context) {
+  const dryRun = Boolean(context.flags["dry-run"])
+  const appPaths = resolveAppPaths(context.projectRoot)
+  assertAppProject(appPaths)
+
+  const config = loadResetConfig(appPaths)
+  assertAppProject(appPaths, config)
+  const outputPaths = resolveAppOutputPaths(appPaths, config)
+
+  printBanner("reset-framework-cli package", description)
+  printSection("Project")
+  printKeyValueTable([
+    ["Desktop app", outputPaths.appBundlePath],
+    ["Archive", outputPaths.zipPath]
+  ])
+  console.log("")
+
+  printSection("Plan")
+  printStatusTable([
+    ["ready", "Archive", "Create a macOS zip package from the built app bundle"]
+  ])
+
+  if (!existsSync(outputPaths.appBundlePath) && !dryRun) {
+    throw new Error(
+      `Missing built app bundle at ${outputPaths.appBundlePath}. Run 'reset-framework-cli build' first.`
+    )
+  }
+
+  if (dryRun) {
+    console.log("")
+    printSection("Dry run")
+    printStatusTable([["plan", "Package", "No archive will be written"]])
+    return
+  }
+
+  console.log("")
+  const progress = createProgress(1, "Package")
+  await createMacOSZipArchive(outputPaths, { dryRun })
+  progress.tick("Archive created")
+
+  console.log("")
+  printSection("Result")
+  printStatusTable([["done", "Package", outputPaths.zipPath]])
+}