@ossy/app 1.10.1 → 1.11.0

package/cli/build-terminal.js

@@ -0,0 +1,210 @@
+const SPINNER = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
+
+const dim = (s) => `\x1b[2m${s}\x1b[0m`
+const bold = (s) => `\x1b[1m${s}\x1b[0m`
+const green = (s) => `\x1b[32m${s}\x1b[0m`
+const red = (s) => `\x1b[31m${s}\x1b[0m`
+const yellow = (s) => `\x1b[33m${s}\x1b[0m`
+
+function stripAnsi (s) {
+  return String(s).replace(/\x1b\[[0-9;]*m/g, '')
+}
+
+function padVisible (s, width) {
+  const n = stripAnsi(s).length
+  return n >= width ? s : s + ' '.repeat(width - n)
+}
+
+export function pageIdFromHydrateEntryName (entryName) {
+  const p = String(entryName)
+  return p.startsWith('hydrate__') ? p.slice('hydrate__'.length) : p
+}
+
+function fmtPart (part, shortLabel, frame) {
+  if (part.s === 'idle') return dim('—')
+  if (part.s === 'running') {
+    const sp = SPINNER[frame % SPINNER.length]
+    return `${yellow(sp)} ${dim(shortLabel + '…')}`
+  }
+  if (part.s === 'ok') return `${green('✔')} ${dim(`${part.ms}ms`)}`
+  if (part.s === 'fail') return `${red('✖')} ${dim(shortLabel)}`
+  if (part.s === 'skip') return dim(part.note ? `— ${part.note}` : '—')
+  return dim('—')
+}
+
+function rowLeadIcon (r, mode) {
+  if (mode === 'prerender-only') {
+    const p = r.prerender.s
+    if (p === 'fail') return red('✖')
+    if (p === 'running') return yellow('◐')
+    if (p === 'ok' || p === 'skip') return green('✔')
+    if (p === 'idle') return dim('·')
+    return green('✔')
+  }
+  const b = r.bundle.s
+  const p = r.prerender.s
+  if (b === 'fail' || p === 'fail') return red('✖')
+  if (b === 'running' || p === 'running') return yellow('◐')
+  if (b === 'ok' && p === 'idle') return yellow('◐')
+  if (b === 'ok' && (p === 'ok' || p === 'skip')) return green('✔')
+  if (b === 'idle' && p === 'idle') return dim('·')
+  return green('✔')
+}
+
+/**
+ * Lerna-style live table: one row per page, hydrate + prerender columns.
+ * TTY: redraws in place with a spinner while work runs. Non-TTY: one line per finished step.
+ */
+export function createParallelPagesReporter ({
+  scope = '@ossy/app',
+  pageIds,
+  stream = process.stdout,
+  /** `'full'`: hydrate + prerender columns. `'prerender-only'`: dev watch (client built separately). */
+  mode = 'full',
+} = {}) {
+  const ids = [...pageIds].sort()
+  const maxId = Math.max(8, ...ids.map((id) => String(id).length))
+  const tty =
+    stream.isTTY === true &&
+    process.env.TERM !== 'dumb' &&
+    process.env.CI !== 'true' &&
+    process.env.OSSY_PLAIN_OUTPUT !== '1'
+
+  /** @type {Map<string, { bundle: object, prerender: object }>} */
+  const rows = new Map()
+  for (const id of ids) {
+    rows.set(id, {
+      bundle: { s: 'idle' },
+      prerender: { s: 'idle' },
+    })
+  }
+
+  let frame = 0
+  let spinTimer = null
+  let blockLines = 0
+
+  const anyRunning = () => {
+    for (const r of rows.values()) {
+      if (r.bundle.s === 'running' || r.prerender.s === 'running') return true
+    }
+    return false
+  }
+
+  function ensureSpin () {
+    if (!tty || spinTimer) return
+    spinTimer = setInterval(() => {
+      frame += 1
+      redraw()
+    }, 80)
+  }
+
+  function stopSpin () {
+    if (spinTimer) {
+      clearInterval(spinTimer)
+      spinTimer = null
+    }
+  }
+
+  function lineFor (id) {
+    const r = rows.get(id)
+    const lead = rowLeadIcon(r, mode)
+    const idCol = padVisible(dim(String(id)), maxId)
+    const p = fmtPart(r.prerender, 'html', frame)
+    if (mode === 'prerender-only') {
+      return `  ${lead} ${dim(scope)}  ${idCol}  ${p}`
+    }
+    const b = fmtPart(r.bundle, 'hydrate', frame)
+    return `  ${lead} ${dim(scope)}  ${idCol}  ${padVisible(b, 24)}  ${p}`
+  }
+
+  function redraw () {
+    if (!tty) return
+    const lines = ids.map((id) => lineFor(id))
+    if (blockLines === 0) {
+      for (const ln of lines) stream.write(`${ln}\n`)
+      blockLines = lines.length
+      return
+    }
+    stream.write(`\x1b[${blockLines}A`)
+    for (const ln of lines) {
+      stream.write(`\x1b[2K\r${ln}\n`)
+    }
+  }
+
+  function nonTtyLine (id, phase, ok, ms, err) {
+    const label = phase === 'bundle' ? 'hydrate' : 'prerender'
+    const icon = ok ? green('✔') : red('✖')
+    const time = ms != null ? dim(` (${ms}ms)`) : ''
+    stream.write(`${icon} ${dim(`${scope}:${label}:`)}${id}${time}\n`)
+    if (err && !ok) stream.write(`    ${red(String(err.message || err))}\n`)
+  }
+
+  return {
+    startBundle (pageId) {
+      if (mode === 'prerender-only') return
+      const r = rows.get(pageId)
+      if (!r) return
+      r.bundle = { s: 'running' }
+      ensureSpin()
+      redraw()
+    },
+
+    completeBundle (pageId, { ok, ms, error }) {
+      if (mode === 'prerender-only') return
+      const r = rows.get(pageId)
+      if (!r) return
+      r.bundle = ok ? { s: 'ok', ms } : { s: 'fail', ms, error }
+      if (!ok) {
+        r.prerender = { s: 'skip', note: 'bundle failed' }
+        if (!tty) nonTtyLine(pageId, 'bundle', false, ms, error)
+      }
+      if (!anyRunning()) stopSpin()
+      redraw()
+    },
+
+    startPrerender (pageId) {
+      const r = rows.get(pageId)
+      if (!r || r.prerender.s === 'skip') return
+      r.prerender = { s: 'running' }
+      ensureSpin()
+      redraw()
+    },
+
+    completePrerender (pageId, { ok, ms, error }) {
+      const r = rows.get(pageId)
+      if (!r || r.prerender.s === 'skip') return
+      r.prerender = ok ? { s: 'ok', ms } : { s: 'fail', ms, error }
+      if (!tty) nonTtyLine(pageId, 'prerender', ok, ms, error)
+      if (!anyRunning()) stopSpin()
+      redraw()
+    },
+
+    skipPrerender (pageId, note) {
+      const r = rows.get(pageId)
+      if (!r) return
+      if (r.bundle.s === 'fail') return
+      r.prerender = { s: 'skip', note: note || 'skipped' }
+      if (!tty) stream.write(`${dim('—')} ${scope}:prerender:${pageId} (${note})\n`)
+      redraw()
+    },
+
+    /** Stop spinner and leave cursor below the block (TTY). */
+    dispose () {
+      stopSpin()
+      if (tty && blockLines > 0) {
+        redraw()
+        stream.write('\n')
+        blockLines = 0
+      }
+    },
+
+    printSectionTitle (title) {
+      stopSpin()
+      if (tty && blockLines > 0) {
+        stream.write('\n')
+        blockLines = 0
+      }
+      stream.write(`\n  ${bold(scope)}  ${dim(title)}\n`)
+    },
+  }
+}

package/cli/build.js

@@ -12,6 +12,7 @@ import copy from 'rollup-plugin-copy';
 import replace from '@rollup/plugin-replace';
 import arg from 'arg'
 import prerenderReactTask from './prerender-react.task.js'
+import { createParallelPagesReporter } from './build-terminal.js'
 
 export const PAGE_FILE_PATTERN = /\.page\.(jsx?|tsx?)$/
 export const API_FILE_PATTERN = /\.api\.(mjs|cjs|js)$/
@@ -600,7 +601,8 @@ export const build = async (cliArgs) => {
         '-c': '--config',
       }, { argv: cliArgs })
 
-    console.log('[@ossy/app][build] Starting...')
+    console.log('\n  \x1b[1m@ossy/app\x1b[0m  \x1b[2mbuild\x1b[0m')
+    console.log('  \x1b[2m────────────────────────────────────────\x1b[0m')
 
 
     const scriptDir = path.dirname(url.fileURLToPath(import.meta.url))
@@ -678,19 +680,32 @@ export const build = async (cliArgs) => {
     copyOssyAppRuntime({ scriptDir, buildPath })
 
     if (Object.keys(clientHydrateInput).length > 0) {
-      await prerenderReactTask.handler({
-        op: 'runProduction',
-        clientHydrateInput,
-        pageFilesLength: pageFiles.length,
-        copyPublicFrom: publicDir,
-        buildPath,
-        nodeEnv: 'production',
-        pagesBundlePath,
-        configSourcePath,
-        createClientRollupPlugins: createOssyClientRollupPlugins,
-        minifyBrowserStaticChunks,
-      })
+      const pageIds = [
+        ...new Set(pageFiles.map((f) => clientHydrateIdForPage(f, srcDir))),
+      ].sort()
+      const reporter = pageIds.length
+        ? createParallelPagesReporter({ pageIds })
+        : null
+      reporter?.printSectionTitle('client hydrate + prerender (parallel)')
+      try {
+        await prerenderReactTask.handler({
+          op: 'runProduction',
+          clientHydrateInput,
+          pageFilesLength: pageFiles.length,
+          copyPublicFrom: publicDir,
+          buildPath,
+          nodeEnv: 'production',
+          pagesBundlePath,
+          configSourcePath,
+          createClientRollupPlugins: createOssyClientRollupPlugins,
+          minifyBrowserStaticChunks,
+          reporter,
+        })
+      } finally {
+        reporter?.dispose()
+      }
     }
 
-    console.log('[@ossy/app][build] Finished');
+    console.log('  \x1b[2m────────────────────────────────────────\x1b[0m')
+    console.log('  \x1b[32m✔\x1b[0m \x1b[1m@ossy/app\x1b[0m  \x1b[2mbuild finished\x1b[0m\n')
 };

package/cli/dev.js

@@ -29,13 +29,15 @@ import {
   OSSY_RESOURCE_TEMPLATES_OUT,
 } from './build.js';
 import prerenderReactTask from './prerender-react.task.js'
+import { createParallelPagesReporter } from './build-terminal.js'
 import { watch } from 'rollup';
 import arg from 'arg'
 import { spawn } from 'node:child_process'
 // import inject from '@rollup/plugin-inject'
 
 export const dev = async (cliArgs) => {
-    console.log('[@ossy/app][dev] Starting...')
+    console.log('\n  \x1b[1m@ossy/app\x1b[0m  \x1b[2mdev\x1b[0m')
+    console.log('  \x1b[2m────────────────────────────────────────\x1b[0m')
 
     const options = arg({    
         '--config': String,
@@ -225,13 +227,15 @@ export const dev = async (cliArgs) => {
 
     watcher.on('event', async (event) => {
       if (event.code === 'BUNDLE_START') {
-        console.log('[@ossy/app][dev] Building...')
+        console.log('  \x1b[2m◐\x1b[0m \x1b[1m@ossy/app\x1b[0m  \x1b[2mrollup watch …\x1b[0m')
       }
       if (event.code === 'ERROR') {
-        console.error('[@ossy/app][dev] Build error', event.error)
+        console.error('  \x1b[31m✖\x1b[0m \x1b[1m@ossy/app\x1b[0m  build error', event.error)
       }
       if (event.code === 'BUNDLE_END') {
-        console.log(`[@ossy/app][dev] Built in ${event.duration}ms`)
+        console.log(
+          `  \x1b[32m✔\x1b[0m \x1b[1m@ossy/app\x1b[0m  \x1b[2mbundles\x1b[0m  \x1b[2m(${event.duration}ms)\x1b[0m`
+        )
       }
       if (event.code === 'END') {
         writeAppRuntimeShims({
@@ -240,15 +244,25 @@ export const dev = async (cliArgs) => {
         })
         copyOssyAppRuntime({ scriptDir, buildPath })
         if (pageFiles.length > 0) {
+          const pageIds = [
+            ...new Set(pageFiles.map((f) => clientHydrateIdForPage(f, srcDir))),
+          ].sort()
+          const reporter = pageIds.length
+            ? createParallelPagesReporter({ pageIds, mode: 'prerender-only' })
+            : null
+          reporter?.printSectionTitle('prerender (parallel)')
           try {
             await prerenderReactTask.handler({
               op: 'prerenderPagesParallel',
               pagesBundlePath,
               configSourcePath,
               publicDir: path.join(buildPath, 'public'),
+              reporter,
             })
           } catch (err) {
-            console.error('[@ossy/app][dev] Prerender failed', err)
+            console.error('  \x1b[31m✖\x1b[0m \x1b[1m@ossy/app\x1b[0m  prerender failed', err)
+          } finally {
+            reporter?.dispose()
           }
         }
         scheduleRestart()

package/cli/prerender-react.task.js

@@ -3,6 +3,7 @@ import url from 'url'
 import fs from 'fs'
 import { rollup } from 'rollup'
 import { BuildPage } from './render-page.task.js'
+import { pageIdFromHydrateEntryName } from './build-terminal.js'
 
 /**
  * Maps an app route path to the file path express.static will serve for that URL
@@ -103,6 +104,7 @@ async function bundleHydratePagesParallel ({
   buildPathForPlugins,
   createClientRollupPlugins,
   minifyBrowserStaticChunks,
+  reporter,
 }) {
   copyPublicToBuild({ copyPublicFrom, buildPath })
   fs.mkdirSync(path.join(buildPath, 'public', 'static'), { recursive: true })
@@ -110,29 +112,37 @@ async function bundleHydratePagesParallel ({
   const entries = Object.entries(clientHydrateInput)
 
   const results = await Promise.allSettled(
-    entries.map(([entryName, stubPath]) => {
-      const plugins = createClientRollupPlugins({
-        nodeEnv,
-        copyPublicFrom: undefined,
-        buildPath: buildPathForPlugins,
-      })
-      return bundleOneHydratePage({
-        entryName,
-        stubPath,
-        buildPath,
-        plugins,
-        minifyPlugin: minifyBrowserStaticChunks(),
-      })
+    entries.map(async ([entryName, stubPath]) => {
+      const pageId = pageIdFromHydrateEntryName(entryName)
+      const t0 = Date.now()
+      reporter?.startBundle?.(pageId)
+      try {
+        const plugins = createClientRollupPlugins({
+          nodeEnv,
+          copyPublicFrom: undefined,
+          buildPath: buildPathForPlugins,
+        })
+        await bundleOneHydratePage({
+          entryName,
+          stubPath,
+          buildPath,
+          plugins,
+          minifyPlugin: minifyBrowserStaticChunks(),
+        })
+        reporter?.completeBundle?.(pageId, { ok: true, ms: Date.now() - t0 })
+      } catch (error) {
+        reporter?.completeBundle?.(pageId, {
+          ok: false,
+          ms: Date.now() - t0,
+          error,
+        })
+        console.error(`[@ossy/app][client-bundle] ${entryName} failed:`, error)
+        throw error
+      }
     })
   )
 
   const failures = countSettledFailures(results)
-  results.forEach((r, i) => {
-    if (r.status === 'rejected') {
-      const [entryName] = entries[i]
-      console.error(`[@ossy/app][client-bundle] ${entryName} failed:`, r.reason)
-    }
-  })
 
   return { results, failures }
 }
@@ -157,15 +167,13 @@ async function prerenderOnePage ({
   const outPath = staticHtmlPathForRoute(route.path, publicDir)
   fs.mkdirSync(path.dirname(outPath), { recursive: true })
   fs.writeFileSync(outPath, html, 'utf8')
-  console.log(
-    `[@ossy/app][prerender] ${route.path} → ${path.relative(process.cwd(), outPath)}`
-  )
 }
 
 async function prerenderPagesParallel ({
   pagesBundlePath,
   configSourcePath,
   publicDir,
+  reporter,
 }) {
   const cfgHref = url.pathToFileURL(path.resolve(configSourcePath)).href
   const pagesHref = url.pathToFileURL(path.resolve(pagesBundlePath)).href
@@ -180,6 +188,10 @@ async function prerenderPagesParallel ({
   for (const route of pageList) {
     if (!route?.element) continue
     if (!pathIsPrerenderable(route.path)) {
+      reporter?.skipPrerender?.(
+        route.id,
+        `not static (${JSON.stringify(route.path)})`
+      )
       console.warn(
         `[@ossy/app][prerender] Skipping "${route.id}" (path not prerenderable: ${JSON.stringify(route.path)})`
       )
@@ -189,25 +201,32 @@ async function prerenderPagesParallel ({
   }
 
   const results = await Promise.allSettled(
-    routesToRender.map((route) =>
-      prerenderOnePage({
-        route,
-        buildTimeConfig,
-        pageList,
-        publicDir,
-      })
-    )
+    routesToRender.map(async (route) => {
+      const t0 = Date.now()
+      reporter?.startPrerender?.(route.id)
+      try {
+        await prerenderOnePage({
+          route,
+          buildTimeConfig,
+          pageList,
+          publicDir,
+        })
+        reporter?.completePrerender?.(route.id, { ok: true, ms: Date.now() - t0 })
+      } catch (error) {
+        reporter?.completePrerender?.(route.id, {
+          ok: false,
+          ms: Date.now() - t0,
+          error,
+        })
+        console.error(
+          `[@ossy/app][prerender] "${route?.id}" (${route?.path}) failed:`,
+          error
+        )
+        throw error
+      }
+    })
   )
   const failures = countSettledFailures(results)
-  results.forEach((r, i) => {
-    if (r.status === 'rejected') {
-      const route = routesToRender[i]
-      console.error(
-        `[@ossy/app][prerender] "${route?.id}" (${route?.path}) failed:`,
-        r.reason
-      )
-    }
-  })
 
   return { results, failures }
 }
@@ -222,6 +241,7 @@ async function runProduction ({
   configSourcePath,
   createClientRollupPlugins,
   minifyBrowserStaticChunks,
+  reporter,
 }) {
   if (pageFilesLength === 0 || Object.keys(clientHydrateInput).length === 0) {
     return { bundleFailures: 0, prerenderFailures: 0 }
@@ -235,12 +255,14 @@ async function runProduction ({
     buildPathForPlugins: buildPath,
     createClientRollupPlugins,
     minifyBrowserStaticChunks,
+    reporter,
   })
 
   const { failures: prerenderFailures } = await prerenderPagesParallel({
     pagesBundlePath,
     configSourcePath,
     publicDir: path.join(buildPath, 'public'),
+    reporter,
   })
 
   if (bundleFailures + prerenderFailures > 0) {
@@ -261,7 +283,12 @@ export default {
       return runProduction(input)
     }
     if (op === 'prerenderPagesParallel') {
-      return prerenderPagesParallel(input)
+      return prerenderPagesParallel({
+        pagesBundlePath: input.pagesBundlePath,
+        configSourcePath: input.configSourcePath,
+        publicDir: input.publicDir,
+        reporter: input.reporter,
+      })
     }
     throw new Error(
       `[@ossy/app][prerender-react] Unknown op: ${String(op)} (expected runProduction | prerenderPagesParallel)`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ossy/app",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "description": "",
   "source": "./src/index.js",
   "main": "./src/index.js",
@@ -27,14 +27,14 @@
     "@babel/eslint-parser": "^7.15.8",
     "@babel/preset-react": "^7.26.3",
     "@babel/register": "^7.25.9",
-    "@ossy/connected-components": "^1.10.1",
-    "@ossy/design-system": "^1.10.1",
-    "@ossy/pages": "^1.10.1",
-    "@ossy/router": "^1.10.1",
-    "@ossy/router-react": "^1.10.1",
-    "@ossy/sdk": "^1.10.1",
-    "@ossy/sdk-react": "^1.10.1",
-    "@ossy/themes": "^1.10.1",
+    "@ossy/connected-components": "^1.11.0",
+    "@ossy/design-system": "^1.11.0",
+    "@ossy/pages": "^1.11.0",
+    "@ossy/router": "^1.11.0",
+    "@ossy/router-react": "^1.11.0",
+    "@ossy/sdk": "^1.11.0",
+    "@ossy/sdk-react": "^1.11.0",
+    "@ossy/themes": "^1.11.0",
     "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-babel": "6.1.0",
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -67,5 +67,5 @@
     "README.md",
     "tsconfig.json"
   ],
-  "gitHead": "d1148a29edb70bdf5daec5571504268723c9d669"
+  "gitHead": "a151faf7a9af599b885ea98137575978fa1dffae"
 }