@briancray/belte 0.1.0 → 0.2.0

package/src/buildCli.ts

@@ -1,17 +1,19 @@
-import type { BunPlugin } from 'bun'
-import { belteResolverPlugin } from './belteResolverPlugin.ts'
 import type { CompileTarget } from './lib/server/runtime/types/CompileTarget.ts'
 import { detectTarget } from './lib/shared/detectTarget.ts'
+import { exitOnBuildFailure } from './lib/shared/exitOnBuildFailure.ts'
 import { loadSvelteConfig } from './lib/shared/loadSvelteConfig.ts'
 import { log } from './lib/shared/log.ts'
 import { programNameForPackage } from './lib/shared/programNameForPackage.ts'
-import { sveltePlugin } from './sveltePlugin.ts'
+import { serverBuildPlugins } from './serverBuildPlugins.ts'
 
 const DISCOVERY_ENTRY = new URL('./discoveryEntry.ts', import.meta.url).pathname
 const CLI_ENTRY = new URL('./cliEntry.ts', import.meta.url).pathname
 
 /*
-Two-pass CLI binary build:
+Two-pass CLI binary build. The CLI is always a thin remote client — it
+bakes in the per-rpc manifest and talks to a running server over HTTP
+(APP_URL at runtime); no handler code is bundled. For an embedded
+backend, `belte compile` produces the standalone server binary instead.
 
   1. Discovery: build the discovery entry into a temporary JS bundle and
      run it. It imports every rpc/socket module so defineVerb /
@@ -21,28 +23,19 @@ Two-pass CLI binary build:
      resolver plugin's `belte:cli-manifest` virtual reads the manifest
      JSON written in step 1 and splices it into the bundle.
 
-The `thin` flag decides thin vs full (default full):
-  - thin: empty `belte:cli-rpcs` virtual — no handlers bundled, the
-          manifest is the only RPC surface; requires APP_URL at runtime.
-  - full: `belte:cli-rpcs` emits eager imports for every rpc module so the
-          verbRegistry is populated and the binary runs in-process (and
-          still reaches a remote server when APP_URL is set at runtime).
-`platforms` cross-compiles in either mode; thin per-platform binaries land
-in `dist/cli-thin/<platform>/` (the layout the /__belte/cli download endpoint
-serves), full ones in `dist/cli/<platform>/`.
+`platforms` cross-compiles per target into `dist/cli-thin/<platform>/`
+— the layout the /__belte/cli download endpoint serves.
 */
 export async function buildCli({
     cwd = process.cwd(),
     target = detectTarget(),
     outfile,
     platforms,
-    thin: thinOverride,
 }: {
     cwd?: string
     target?: CompileTarget
     outfile?: string
     platforms?: CompileTarget[]
-    thin?: boolean
 } = {}): Promise<string[]> {
     const distDir = `${cwd}/dist`
     await Bun.$`mkdir -p ${distDir}`.quiet()
@@ -50,11 +43,7 @@ export async function buildCli({
     const discoveryOut = `${distDir}/_discovery.js`
 
     const svelteConfig = await loadSvelteConfig(cwd)
-    const isThin = thinOverride ?? false
-    const sharedPlugins = (): BunPlugin[] => [
-        sveltePlugin({ generate: 'server', svelteConfig }),
-        belteResolverPlugin({ cwd, target: 'server', thin: isThin }),
-    ]
+    const plugins = serverBuildPlugins({ cwd, svelteConfig })
 
     /*
     Step 1 — discovery. Build a runnable bundle, execute it under bun,
@@ -66,14 +55,9 @@ export async function buildCli({
         target: 'bun',
         outdir: distDir,
         naming: '_discovery.js',
-        plugins: sharedPlugins(),
+        plugins,
     })
-    if (!discoveryResult.success) {
-        for (const entry of discoveryResult.logs) {
-            log.error(entry)
-        }
-        process.exit(1)
-    }
+    exitOnBuildFailure(discoveryResult)
 
     const proc = Bun.spawn({
         cmd: ['bun', discoveryOut],
@@ -96,38 +80,32 @@ export async function buildCli({
 
     /*
     Step 2 — compile. The cliEntry imports the now-populated
-    belte:cli-manifest virtual + the eager rpc imports (full mode only,
-    empty for thin). bun build --compile emits the standalone binary.
-    When `platforms` is set, loops once per target and writes binaries
-    into `dist/cli-thin/<platform>/<programName>` (thin — the layout the
-    download route expects) or `dist/cli/<platform>/<programName>` (full).
+    belte:cli-manifest virtual; bun build --compile emits the standalone
+    binary. When `platforms` is set, loops once per target and writes
+    binaries into `dist/cli-thin/<platform>/<programName>` — the layout
+    the download route expects.
     */
     const programName = await readProgramName(cwd)
 
     if (platforms && platforms.length > 0) {
-        const platformDir = isThin ? 'cli-thin' : 'cli'
-        const outPaths: string[] = []
-        for (const platformTarget of platforms) {
-            const shortName = platformTarget.replace(/^bun-/, '')
-            const suffix = platformTarget.includes('windows') ? '.exe' : ''
-            const platformOut = `${distDir}/${platformDir}/${shortName}/${programName}${suffix}`
-            await Bun.$`mkdir -p ${`${distDir}/${platformDir}/${shortName}`}`.quiet()
-            const result = await Bun.build({
-                entrypoints: [CLI_ENTRY],
-                target: 'bun',
-                compile: { target: platformTarget, outfile: platformOut },
-                plugins: sharedPlugins(),
-            })
-            if (!result.success) {
-                for (const entry of result.logs) {
-                    log.error(entry)
-                }
-                process.exit(1)
-            }
-            log.success(`compiled ${isThin ? 'thin' : 'full'} cli binary: ${platformOut}`)
-            outPaths.push(platformOut)
-        }
-        return outPaths
+        // Cross-compile every target in parallel — each build is independent.
+        return Promise.all(
+            platforms.map(async (platformTarget) => {
+                const shortName = platformTarget.replace(/^bun-/, '')
+                const suffix = platformTarget.includes('windows') ? '.exe' : ''
+                const platformOut = `${distDir}/cli-thin/${shortName}/${programName}${suffix}`
+                await Bun.$`mkdir -p ${`${distDir}/cli-thin/${shortName}`}`.quiet()
+                const result = await Bun.build({
+                    entrypoints: [CLI_ENTRY],
+                    target: 'bun',
+                    compile: { target: platformTarget, outfile: platformOut },
+                    plugins,
+                })
+                exitOnBuildFailure(result)
+                log.success(`compiled thin cli binary: ${platformOut}`)
+                return platformOut
+            }),
+        )
     }
 
     const suffix = target.includes('windows') ? '.exe' : ''
@@ -137,16 +115,11 @@ export async function buildCli({
         entrypoints: [CLI_ENTRY],
         target: 'bun',
         compile: { target, outfile: outPath },
-        plugins: sharedPlugins(),
+        plugins,
     })
-    if (!cliResult.success) {
-        for (const entry of cliResult.logs) {
-            log.error(entry)
-        }
-        process.exit(1)
-    }
+    exitOnBuildFailure(cliResult)
 
-    log.success(`compiled ${isThin ? 'thin' : 'full'} cli binary: ${outPath} (target: ${target})`)
+    log.success(`compiled thin cli binary: ${outPath} (target: ${target})`)
     return [outPath]
 }
 

package/src/buildDisconnected.ts

@@ -0,0 +1,127 @@
+import type { BunPlugin } from 'bun'
+import { belteResolverPlugin } from './belteResolverPlugin.ts'
+import { dedupeSveltePlugin } from './dedupeSveltePlugin.ts'
+import type { SvelteConfig } from './lib/server/runtime/types/SvelteConfig.ts'
+import { exitOnBuildFailure } from './lib/shared/exitOnBuildFailure.ts'
+import { log } from './lib/shared/log.ts'
+import { sveltePlugin } from './sveltePlugin.ts'
+
+const ENTRY = new URL('./bundleDisconnectedEntry.ts', import.meta.url).pathname
+const CSS_ENTRY = new URL('./lib/bundle/disconnected.css', import.meta.url).pathname
+
+/*
+Default screen logo: a minimal inline-SVG belte mark, used when the project ships
+no src/bundle/logo.png. Inline SVG keeps the bundle self-contained with no asset
+file to vendor; a project overrides it just by adding the PNG.
+*/
+const DEFAULT_LOGO = `data:image/svg+xml,${encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">' +
+        '<rect width="64" height="64" rx="16" fill="#111827"/>' +
+        '<text x="32" y="45" font-family="system-ui,sans-serif" font-size="38" ' +
+        'font-weight="700" fill="#fff" text-anchor="middle">b</text></svg>',
+)}`
+
+/*
+Builds the bundle connect screen into a single self-contained HTML string and
+writes it to `dist/bundle-disconnected.html`, which the launcher bakes in via the
+`belte:bundle-disconnected` virtual. The client bundle (Svelte component +
+injected CSS + compiled Tailwind) is inlined into the page so the launcher serves
+it with zero external requests; the logo is embedded as a data URI. The app title
+(`window.__BELTE_TITLE__`) is injected by the launcher at serve time, so a
+`<!--belte:connect-config-->` marker is left in <head> for it.
+
+Must run after the client build has cleared and repopulated dist (it writes a
+file into dist), and before the launcher build that reads it. Uses no outdir of
+its own — Bun.build artifacts are read from memory — so it never touches dist
+beyond the one file it writes.
+*/
+export async function buildDisconnected({
+    cwd = process.cwd(),
+    svelteConfig,
+}: {
+    cwd?: string
+    svelteConfig?: SvelteConfig
+} = {}): Promise<string> {
+    const plugins: BunPlugin[] = [
+        dedupeSveltePlugin({ cwd, conditions: ['browser', 'default'] }),
+        sveltePlugin({ generate: 'client', svelteConfig }),
+        belteResolverPlugin({ cwd, target: 'client' }),
+    ]
+    try {
+        const tailwind = (await import('bun-plugin-tailwind')).default
+        plugins.push(tailwind)
+    } catch {
+        log.warn('bun-plugin-tailwind not installed; building connect screen without Tailwind')
+    }
+
+    /*
+    The Tailwind CSS rides as its own entrypoint rather than a `.css` import from
+    the entry (which TS can't type), so it compiles to a standalone artifact we
+    inline alongside the JS — the component carries no <style> of its own.
+    */
+    const result = await Bun.build({
+        entrypoints: [ENTRY, CSS_ENTRY],
+        target: 'browser',
+        minify: true,
+        plugins,
+    })
+    exitOnBuildFailure(result)
+
+    // Collect the JS bundle + extracted CSS from the in-memory artifacts.
+    let js = ''
+    let css = ''
+    for (const output of result.outputs) {
+        const text = await output.text()
+        if (output.path.endsWith('.css')) {
+            css += text
+        } else if (output.path.endsWith('.js')) {
+            js += text
+        }
+    }
+
+    const logo = await readLogo(cwd)
+    const html = composeHtml({ js, css, logo })
+    const outPath = `${cwd}/dist/bundle-disconnected.html`
+    await Bun.write(outPath, html)
+    log.success(`built connect screen: ${outPath} (${(html.length / 1024).toFixed(1)} KiB)`)
+    return outPath
+}
+
+// Reads the project's src/bundle/logo.png as a data URI, or the default mark.
+async function readLogo(cwd: string): Promise<string> {
+    const userLogo = Bun.file(`${cwd}/src/bundle/logo.png`)
+    if (await userLogo.exists()) {
+        const bytes = await userLogo.bytes()
+        return `data:image/png;base64,${bytes.toBase64()}`
+    }
+    return DEFAULT_LOGO
+}
+
+/*
+Escapes a closing `</script>` so an inline `<script>` body can't be terminated
+early by content in the bundle (rare, but a `</script>` substring would break the
+page). The browser still parses `<\/script>` as the intended characters.
+*/
+function escapeScriptBody(value: string): string {
+    return value.replace(/<\/(script)/gi, '<\\/$1')
+}
+
+// Assembles the final standalone HTML document from the inlined pieces.
+function composeHtml({ js, css, logo }: { js: string; css: string; logo: string }): string {
+    const logoScript = `window.__BELTE_LOGO__=${JSON.stringify(logo)}`
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<!--belte:connect-config-->
+<script>${escapeScriptBody(logoScript)}</script>
+<style>${css}</style>
+</head>
+<body>
+<div id="app"></div>
+<script type="module">${escapeScriptBody(js)}</script>
+</body>
+</html>
+`
+}

package/src/bundleApp.ts

@@ -0,0 +1,123 @@
+import { buildDisconnected } from './buildDisconnected.ts'
+import { compile } from './compile.ts'
+import { ensureWebviewLib } from './lib/bundle/ensureWebviewLib.ts'
+import { infoPlist } from './lib/bundle/infoPlist.ts'
+import { pngToIcns } from './lib/bundle/pngToIcns.ts'
+import { serverBinaryFilename } from './lib/bundle/serverBinaryFilename.ts'
+import { webviewLibName } from './lib/bundle/webviewLibName.ts'
+import { detectTarget } from './lib/shared/detectTarget.ts'
+import { exitOnBuildFailure } from './lib/shared/exitOnBuildFailure.ts'
+import { loadSvelteConfig } from './lib/shared/loadSvelteConfig.ts'
+import { log } from './lib/shared/log.ts'
+import { programNameForPackage } from './lib/shared/programNameForPackage.ts'
+import { serverBuildPlugins } from './serverBuildPlugins.ts'
+
+const APP_ENTRY = new URL('./appEntry.ts', import.meta.url).pathname
+const WORKER_ENTRY = new URL('./controlServerWorker.ts', import.meta.url).pathname
+
+/*
+Assembles a movable, self-contained app bundle for the host platform —
+no signing, no cross-compilation. Three pieces travel together so the app
+runs on another machine of the same OS with nothing installed:
+
+  - the standalone server binary (`compile()`, assets embedded)
+  - the launcher binary (appEntry — spawns the server, opens the webview)
+  - the native webview shared library
+
+macOS gets a `.app` bundle (`Contents/MacOS/` + `Contents/Frameworks/` +
+Info.plist); other platforms get a flat `<name>/` directory with the two
+binaries and the lib side by side. The launcher finds both relatives at
+runtime via resolveServerBinary / resolveWebviewLib.
+*/
+export async function bundleApp({ cwd = process.cwd() }: { cwd?: string } = {}): Promise<string> {
+    const target = detectTarget()
+    const { name, version } = await readPackage(cwd)
+    const programName = programNameForPackage(name)
+    const svelteConfig = await loadSvelteConfig(cwd)
+
+    /*
+    Layout differs by OS: a macOS .app nests binaries under Contents/MacOS
+    and the lib under Contents/Frameworks; elsewhere everything sits flat
+    in one directory. binDir is where the launcher + server land, libDir
+    where the webview lib lands — matching resolveWebviewLib's candidates.
+    */
+    const isMac = process.platform === 'darwin'
+    const bundleRoot = isMac ? `${cwd}/dist/${programName}.app` : `${cwd}/dist/${programName}`
+    const binDir = isMac ? `${bundleRoot}/Contents/MacOS` : bundleRoot
+    const libDir = isMac ? `${bundleRoot}/Contents/Frameworks` : bundleRoot
+
+    await Bun.$`rm -rf ${bundleRoot}`.quiet()
+    await Bun.$`mkdir -p ${binDir} ${libDir}`.quiet()
+
+    // 1. Server binary — self-contained, embeds the client assets. compile()
+    // runs the client build, which clears dist first, so it must precede the
+    // connect-screen build that writes into dist.
+    await compile({ cwd, target, outfile: `${binDir}/${serverBinaryFilename()}` })
+
+    // 2. Connect screen — bake dist/bundle-disconnected.html before the launcher
+    // build, which inlines it via the belte:bundle-disconnected virtual.
+    await buildDisconnected({ cwd, svelteConfig })
+
+    // 3. Launcher binary — named after the program so CFBundleExecutable matches.
+    const launcherSuffix = target.includes('windows') ? '.exe' : ''
+    const launcherPath = `${binDir}/${programName}${launcherSuffix}`
+    const launcherResult = await Bun.build({
+        entrypoints: [APP_ENTRY],
+        target: 'bun',
+        compile: { target, outfile: launcherPath },
+        plugins: serverBuildPlugins({ cwd, svelteConfig }),
+        /*
+        Inject the worker's absolute path as a static literal. `new Worker()` is
+        embedded into the standalone binary only when its specifier is a build-time
+        literal, and a relative one would resolve against `cwd` (the consumer
+        project) rather than appEntry's directory — so the launcher passes the
+        absolute path through this define instead.
+        */
+        define: { __BELTE_WORKER_ENTRY__: JSON.stringify(WORKER_ENTRY) },
+    })
+    exitOnBuildFailure(launcherResult)
+
+    // 4. Webview lib — built from the vendored source if needed, then copied
+    // beside the binaries (or into Frameworks on macOS) so the bundle is self-contained.
+    const libSource = await ensureWebviewLib(cwd)
+    await Bun.write(`${libDir}/${webviewLibName()}`, Bun.file(libSource))
+
+    /*
+    macOS-only: produce Contents/Resources/icon.icns from an optional project
+    icon, then write the Info.plist that makes the .app launchable from
+    Finder, wiring CFBundleIconFile when an icon was produced. A ready-made
+    src/bundle/icon.icns is used as-is; otherwise src/bundle/icon.png is
+    converted via sips + iconutil so authors don't need to make an .icns.
+    */
+    if (isMac) {
+        const resourcesDir = `${bundleRoot}/Contents/Resources`
+        const icnsSource = `${cwd}/src/bundle/icon.icns`
+        const pngSource = `${cwd}/src/bundle/icon.png`
+        let hasIcon = false
+        if (await Bun.file(icnsSource).exists()) {
+            await Bun.$`mkdir -p ${resourcesDir}`.quiet()
+            await Bun.write(`${resourcesDir}/icon.icns`, Bun.file(icnsSource))
+            hasIcon = true
+        } else if (await Bun.file(pngSource).exists()) {
+            await Bun.$`mkdir -p ${resourcesDir}`.quiet()
+            hasIcon = await pngToIcns(pngSource, `${resourcesDir}/icon.icns`)
+        }
+        await Bun.write(
+            `${bundleRoot}/Contents/Info.plist`,
+            infoPlist({ name: programName, version, icon: hasIcon ? 'icon' : undefined }),
+        )
+    }
+
+    log.success(`bundled app: ${bundleRoot} (target: ${target})`)
+    return bundleRoot
+}
+
+// Reads name + version from package.json, with fallbacks when absent.
+async function readPackage(cwd: string): Promise<{ name: string | undefined; version: string }> {
+    const pkgFile = Bun.file(`${cwd}/package.json`)
+    if (!(await pkgFile.exists())) {
+        return { name: undefined, version: '0.0.0' }
+    }
+    const pkg = (await pkgFile.json()) as { name?: string; version?: string }
+    return { name: pkg.name, version: pkg.version ?? '0.0.0' }
+}

package/src/bundleDisconnectedEntry.ts

@@ -0,0 +1,17 @@
+import { mount } from 'svelte'
+// @ts-expect-error virtual module resolved by belteResolverPlugin
+import Disconnected from './_virtual/bundle-disconnected-component.ts'
+
+/*
+Client entry for the bundle connect screen. Standalone — it mounts the
+disconnected component (the user's src/bundle/disconnected.svelte override or the
+lib default, picked by the resolver) into #app, with no router or SSR hydration.
+buildDisconnected bundles this into a single self-contained HTML file (the Tailwind
+CSS is a separate build entrypoint, not imported here). The `svelte` import sits
+first so biome's import sorting leaves the `_virtual` component's `@ts-expect-error`
+attached.
+*/
+const target = document.getElementById('app')
+if (target) {
+    mount(Disconnected, { target })
+}

package/src/cliEntry.ts

@@ -4,22 +4,16 @@ import { banner, footer } from './_virtual/cli-chrome.ts'
 import manifest from './_virtual/cli-manifest.ts'
 // @ts-expect-error virtual module resolved by belteResolverPlugin
 import programName from './_virtual/cli-name.ts'
-// @ts-expect-error virtual module resolved by belteResolverPlugin — side-effect import that
-// populates verbRegistry for in-process mode on full builds; empty on thin builds
-import './_virtual/cli-rpcs.ts'
 import { runCli } from './lib/cli/runCli.ts'
 
 /*
 Standalone CLI binary entry. Compiled with `bun build --compile` into
-`dist/cli` (full, default) or `dist/cli-thin` (with `--thin`). The
-bundler emits:
+`dist/cli` (or `dist/cli-thin/<platform>/` for cross-builds). The CLI is
+a thin remote client — no handler code is bundled; it talks to a running
+server over HTTP (APP_URL at runtime). The bundler emits:
   - belte:cli-manifest — the per-rpc manifest (method, url, jsonSchema)
   - belte:cli-name     — the program name from package.json
   - belte:cli-chrome   — optional banner/footer text from src/cli/
-
-All are virtual modules so the same source file works for thin and
-full builds; what differs is whether the verbRegistry is also bundled
-in (full mode → in-process fallback; thin mode → APP_URL required).
 */
 const exitCode = await runCli({
     programName,

package/src/compile.ts

@@ -1,11 +1,10 @@
-import type { BunPlugin } from 'bun'
-import { belteResolverPlugin } from './belteResolverPlugin.ts'
 import { build } from './build.ts'
 import type { CompileTarget } from './lib/server/runtime/types/CompileTarget.ts'
 import { detectTarget } from './lib/shared/detectTarget.ts'
+import { exitOnBuildFailure } from './lib/shared/exitOnBuildFailure.ts'
 import { loadSvelteConfig } from './lib/shared/loadSvelteConfig.ts'
 import { log } from './lib/shared/log.ts'
-import { sveltePlugin } from './sveltePlugin.ts'
+import { serverBuildPlugins } from './serverBuildPlugins.ts'
 
 const SERVER_ENTRY = new URL('./serverEntry.ts', import.meta.url).pathname
 
@@ -31,11 +30,6 @@ export async function compile({
 
     const outPath = outfile ?? `${cwd}/dist/app${target.includes('windows') ? '.exe' : ''}`
 
-    const plugins: BunPlugin[] = [
-        sveltePlugin({ generate: 'server', svelteConfig }),
-        belteResolverPlugin({ cwd, embedAssets: true, target: 'server' }),
-    ]
-
     const result = await Bun.build({
         entrypoints: [SERVER_ENTRY],
         target: 'bun',
@@ -49,15 +43,10 @@ export async function compile({
         */
         bytecode: true,
         compile: { target, outfile: outPath },
-        plugins,
+        plugins: serverBuildPlugins({ cwd, svelteConfig, embedAssets: true }),
     })
 
-    if (!result.success) {
-        for (const entry of result.logs) {
-            log.error(entry)
-        }
-        process.exit(1)
-    }
+    exitOnBuildFailure(result)
 
     log.success(`compiled standalone binary: ${outPath} (target: ${target})`)
     return outPath