@ossy/app 1.13.2 → 1.13.3

package/cli/build.js

@@ -92,14 +92,8 @@ export const OSSY_SSR_DIRNAME = 'ssr'
 /** Temp stub entries for SSR bundles (inside .ossy/). */
 const OSSY_SSR_ENTRIES_DIRNAME = 'ssr-entries'
 
-/** Per-page client entries: `hydrate-<pageId>.jsx` under `.ossy/` */
-const HYDRATE_STUB_PREFIX = 'hydrate-'
-const HYDRATE_STUB_SUFFIX = '.jsx'
-
-/** Rollup input chunk name for a page id (safe identifier; id may contain `-`). */
-export function hydrateEntryName (pageId) {
-  return `hydrate__${pageId}`
-}
+/** Single shared client hydrate entry filename under `.ossy/` */
+const HYDRATE_ENTRY_FILENAME = 'hydrate-entry.jsx'
 
 export function ossyGeneratedDir (buildPath) {
   return path.join(buildPath, OSSY_GEN_DIRNAME)
@@ -709,83 +703,81 @@ export function writePageServerRollupEntry ({ pageAbsPath, stubPath }) {
 }
 
 /**
- * One bundle per page: exports the component (for server SSR import) and auto-hydrates in the browser.
- * React is kept as a bare external import — resolved from node_modules on the server and via
- * import map on the client.
+ * Generates a single shared hydrate entry that dynamically imports the active page at runtime.
+ * Rollup processes this once, emitting React and shared deps as reusable chunks instead of
+ * bundling them into every page separately.
  */
-export function generatePageHydrateModule ({ pageAbsPath, stubAbsPath, srcDir }) {
-  const rel = relToGeneratedImport(stubAbsPath, pageAbsPath)
+export function generateHydrateEntry ({ pageFiles, srcDir, stubAbsPath }) {
+  const seenIds = new Set()
+  const pageLines = []
+  for (const f of pageFiles) {
+    const hydrateId = clientHydrateIdForPage(f, srcDir)
+    if (seenIds.has(hydrateId)) {
+      throw new Error(
+        `[@ossy/app] Duplicate client hydrate id "${hydrateId}" (${f}). Pages need unique ids.`
+      )
+    }
+    seenIds.add(hydrateId)
+    const rel = relToGeneratedImport(stubAbsPath, f)
+    pageLines.push(`  '${hydrateId}': () => import('./${rel}'),`)
+  }
+
   return [
     '// Generated by @ossy/app — do not edit',
     '',
     "import { createElement } from 'react'",
     "import { hydrateRoot } from 'react-dom/client'",
     "import { App } from '@ossy/connected-components'",
-    `import * as _page from './${rel}'`,
     '',
-    'export default _page.default',
-    'export const metadata = _page.metadata',
+    'const config = window.__INITIAL_APP_CONFIG__ || {}',
+    '',
+    'const pages = {',
+    ...pageLines,
+    '}',
     '',
-    "if (typeof window !== 'undefined') {",
-    "  const config = window.__INITIAL_APP_CONFIG__ || {}",
-    '  function PageShell (props) {',
-    "    return createElement('html', { lang: props.defaultLanguage || 'en' },",
-    "      createElement('head', null,",
-    "        createElement('meta', { charSet: 'utf-8' }),",
-    "        createElement('title', null, (_page.metadata && _page.metadata.title) || ''),",
-    '      ),',
-    '      createElement(App, props,',
-    '        createElement(_page.default, props)',
+    'const load = pages[config.pageId]',
+    'if (load) {',
+    '  load().then((mod) => {',
+    '    const Page = mod.default',
+    "    const metadata = mod.metadata || {}",
+    '    function PageShell (props) {',
+    "      return createElement('html', { lang: props.defaultLanguage || 'en' },",
+    "        createElement('head', null,",
+    "          createElement('meta', { charSet: 'utf-8' }),",
+    "          createElement('title', null, metadata.title || ''),",
+    '        ),',
+    '        createElement(App, props,',
+    '          createElement(Page, props)',
+    '        )',
     '      )',
-    '    )',
-    '  }',
-    '  hydrateRoot(document, createElement(PageShell, config))',
+    '    }',
+    '    hydrateRoot(document, createElement(PageShell, config))',
+    '  })',
     '}',
     '',
   ].join('\n')
 }
 
-/** Writes `hydrate-<id>.jsx` for each page; removes stale `hydrate-*` outputs in `ossyDir` first. */
-export function writePageHydrateStubs (pageFiles, srcDir, ossyDir) {
+/** Writes a single `hydrate-entry.jsx`; removes any stale per-page `hydrate-*.jsx` stubs first. */
+export function writeHydrateEntry (pageFiles, srcDir, ossyDir) {
   if (!fs.existsSync(ossyDir)) fs.mkdirSync(ossyDir, { recursive: true })
   for (const ent of fs.readdirSync(ossyDir, { withFileTypes: true })) {
-    const full = path.join(ossyDir, ent.name)
-    if (ent.isDirectory() && ent.name.startsWith(HYDRATE_STUB_PREFIX)) {
-      fs.rmSync(full, { recursive: true, force: true })
-    } else if (
+    if (
       ent.isFile() &&
-      ent.name.startsWith(HYDRATE_STUB_PREFIX) &&
-      ent.name.endsWith(HYDRATE_STUB_SUFFIX)
+      ent.name.startsWith('hydrate-') &&
+      ent.name.endsWith('.jsx') &&
+      ent.name !== HYDRATE_ENTRY_FILENAME
     ) {
-      fs.rmSync(full, { force: true })
-    }
-  }
-  const seenIds = new Set()
-  for (const f of pageFiles) {
-    const hydrateId = clientHydrateIdForPage(f, srcDir)
-    if (seenIds.has(hydrateId)) {
-      throw new Error(
-        `[@ossy/app] Duplicate client hydrate id "${hydrateId}" (${f}). Per-page hydrate bundles need unique ids.`
-      )
+      fs.rmSync(path.join(ossyDir, ent.name), { force: true })
     }
-    seenIds.add(hydrateId)
-    const stubPath = path.join(ossyDir, `${HYDRATE_STUB_PREFIX}${hydrateId}${HYDRATE_STUB_SUFFIX}`)
-    fs.mkdirSync(path.dirname(stubPath), { recursive: true })
-    fs.writeFileSync(
-      stubPath,
-      generatePageHydrateModule({ pageAbsPath: f, stubAbsPath: stubPath, srcDir })
-    )
   }
+  const stubPath = path.join(ossyDir, HYDRATE_ENTRY_FILENAME)
+  fs.writeFileSync(stubPath, generateHydrateEntry({ pageFiles, srcDir, stubAbsPath: stubPath }))
 }
 
-export function buildClientHydrateInput (pageFiles, srcDir, ossyDir) {
-  const input = {}
-  for (const f of pageFiles) {
-    const hydrateId = clientHydrateIdForPage(f, srcDir)
-    const stubPath = path.join(ossyDir, `${HYDRATE_STUB_PREFIX}${hydrateId}${HYDRATE_STUB_SUFFIX}`)
-    input[hydrateEntryName(hydrateId)] = stubPath
-  }
-  return input
+/** Returns a single-entry input map pointing at the shared hydrate entry. */
+export function buildClientHydrateInput (_pageFiles, _srcDir, ossyDir) {
+  return { app: path.join(ossyDir, HYDRATE_ENTRY_FILENAME) }
 }
 
 /** JSON manifest: route ids, default paths, and page source paths (posix, relative to `cwd`). */
@@ -936,7 +928,7 @@ export const build = async (cliArgs) => {
       srcDir,
       pagesGeneratedPath,
     })
-    writePageHydrateStubs(pageFiles, srcDir, ossyDir)
+    writeHydrateEntry(pageFiles, srcDir, ossyDir)
     writePageSsrStubs(pageFiles, srcDir, ossyDir)
     const clientHydrateInput = buildClientHydrateInput(pageFiles, srcDir, ossyDir)
 
@@ -955,7 +947,7 @@ export const build = async (cliArgs) => {
       ? configPath
       : path.resolve(scriptDir, 'default-config.js')
 
-    const useDashboard = Object.keys(clientHydrateInput).length > 0
+    const useDashboard = pageFiles.length > 0
     const overviewSnap = getBuildOverviewSnapshot({
       pagesSourcePath: pagesGeneratedPath,
       apiOverviewFiles,
@@ -1023,8 +1015,9 @@ export const build = async (cliArgs) => {
       try {
         await prerenderReactTask.handler({
           op: 'runProduction',
-          clientHydrateInput,
+          hydrateEntryPath: clientHydrateInput.app,
           pageFilesLength: pageFiles.length,
+          pageIds,
           copyPublicFrom: publicDir,
           buildPath,
           nodeEnv: 'production',

package/cli/prerender-react.task.js

@@ -1,7 +1,11 @@
 import path from 'path'
 import fs from 'fs'
 import { rollup } from 'rollup'
-import { pageIdFromHydrateEntryName } from './build-terminal.js'
+
+export function staticHtmlPathForRoute (routePath, publicDir) {
+  const segments = routePath === '/' ? [] : routePath.replace(/^\//, '').split('/')
+  return path.join(publicDir, ...segments, 'index.html')
+}
 
 function copyPublicToBuild ({ copyPublicFrom, buildPath }) {
   if (!copyPublicFrom || !fs.existsSync(copyPublicFrom)) return
@@ -10,31 +14,22 @@ function copyPublicToBuild ({ copyPublicFrom, buildPath }) {
   fs.cpSync(copyPublicFrom, dest, { recursive: true })
 }
 
-async function bundleOneHydratePage ({
-  entryName,
-  stubPath,
+async function bundleHydrateEntry ({
+  entryPath,
   buildPath,
   plugins,
   minifyPlugin,
 }) {
   const bundle = await rollup({
-    input: { [entryName]: stubPath },
+    input: { app: entryPath },
     plugins,
   })
   try {
     await bundle.write({
       dir: path.join(buildPath, 'public'),
       format: 'esm',
-      inlineDynamicImports: true,
-      entryFileNames (chunkInfo) {
-        const n = chunkInfo.name
-        if (n.startsWith('hydrate__')) {
-          const pageId = n.slice('hydrate__'.length)
-          return `static/${pageId}.js`
-        }
-        return 'static/[name].js'
-      },
-      chunkFileNames: 'static/[name]-[hash].js',
+      entryFileNames: 'static/[name].js',
+      chunkFileNames: 'static/chunks/[name]-[hash].js',
       plugins: minifyPlugin ? [minifyPlugin] : [],
     })
   } finally {
@@ -42,100 +37,58 @@ async function bundleOneHydratePage ({
   }
 }
 
-async function bundleWithConcurrency (entries, concurrency, processFn) {
-  const results = new Array(entries.length)
-  let nextIdx = 0
-  async function worker () {
-    while (nextIdx < entries.length) {
-      const idx = nextIdx++
-      results[idx] = await processFn(entries[idx]).then(
-        (value) => ({ status: 'fulfilled', value }),
-        (reason) => ({ status: 'rejected', reason }),
-      )
-    }
-  }
-  await Promise.all(Array.from({ length: concurrency }, worker))
-  return results
-}
-
-async function bundleHydratePagesParallel ({
-  clientHydrateInput,
-  buildPath,
-  copyPublicFrom,
-  nodeEnv,
-  buildPathForPlugins,
-  createClientRollupPlugins,
-  minifyBrowserStaticChunks,
-  reporter,
-}) {
-  copyPublicToBuild({ copyPublicFrom, buildPath })
-  fs.mkdirSync(path.join(buildPath, 'public', 'static'), { recursive: true })
+export default {
+  type: '@ossy/app/prerender-react',
+  async handler (input) {
+    const op = input?.op
+    if (op === 'runProduction') {
+      const {
+        hydrateEntryPath,
+        pageFilesLength,
+        pageIds,
+        copyPublicFrom,
+        buildPath,
+        nodeEnv,
+        buildPathForPlugins,
+        createClientRollupPlugins,
+        minifyBrowserStaticChunks,
+        reporter,
+      } = input
 
-  const entries = Object.entries(clientHydrateInput)
+      if (pageFilesLength === 0 || !hydrateEntryPath) {
+        return { bundleFailures: 0 }
+      }
 
-  const BUNDLE_CONCURRENCY = 4
+      copyPublicToBuild({ copyPublicFrom, buildPath })
+      fs.mkdirSync(path.join(buildPath, 'public', 'static'), { recursive: true })
+      fs.mkdirSync(path.join(buildPath, 'public', 'static', 'chunks'), { recursive: true })
 
-  const results = await bundleWithConcurrency(
-    entries,
-    BUNDLE_CONCURRENCY,
-    async ([entryName, stubPath]) => {
-      const pageId = pageIdFromHydrateEntryName(entryName)
+      const ids = pageIds || []
       const t0 = Date.now()
-      reporter?.startBundle?.(pageId)
+      for (const id of ids) reporter?.startBundle?.(id)
+
       try {
         const plugins = createClientRollupPlugins({
           nodeEnv,
           copyPublicFrom: undefined,
-          buildPath: buildPathForPlugins,
+          buildPath: buildPathForPlugins ?? buildPath,
         })
-        await bundleOneHydratePage({
-          entryName,
-          stubPath,
+        await bundleHydrateEntry({
+          entryPath: hydrateEntryPath,
           buildPath,
           plugins,
           minifyPlugin: minifyBrowserStaticChunks(),
         })
-        reporter?.completeBundle?.(pageId, { ok: true, ms: Date.now() - t0 })
+        const ms = Date.now() - t0
+        for (const id of ids) reporter?.completeBundle?.(id, { ok: true, ms })
       } catch (error) {
-        reporter?.completeBundle?.(pageId, {
-          ok: false,
-          ms: Date.now() - t0,
-          error,
-        })
-        console.error(`[@ossy/app][client-bundle] ${entryName} failed:`, error)
+        const ms = Date.now() - t0
+        for (const id of ids) reporter?.completeBundle?.(id, { ok: false, ms, error })
+        console.error(`[@ossy/app][client-bundle] hydrate-entry failed:`, error)
         throw error
       }
-    },
-  )
-
-  const failures = results.filter((r) => r.status === 'rejected').length
-  return { results, failures }
-}
 
-export default {
-  type: '@ossy/app/prerender-react',
-  async handler (input) {
-    const op = input?.op
-    if (op === 'runProduction') {
-      const { clientHydrateInput, pageFilesLength, copyPublicFrom, buildPath, nodeEnv,
-              buildPathForPlugins, createClientRollupPlugins, minifyBrowserStaticChunks, reporter } = input
-      if (pageFilesLength === 0 || Object.keys(clientHydrateInput).length === 0) {
-        return { bundleFailures: 0 }
-      }
-      const { failures: bundleFailures } = await bundleHydratePagesParallel({
-        clientHydrateInput,
-        buildPath,
-        copyPublicFrom,
-        nodeEnv,
-        buildPathForPlugins: buildPathForPlugins ?? buildPath,
-        createClientRollupPlugins,
-        minifyBrowserStaticChunks,
-        reporter,
-      })
-      if (bundleFailures > 0) {
-        console.warn(`[@ossy/app][build] Finished with ${bundleFailures} client bundle error(s)`)
-      }
-      return { bundleFailures }
+      return { bundleFailures: 0 }
     }
     throw new Error(
       `[@ossy/app][prerender-react] Unknown op: ${String(op)} (expected runProduction)`

package/cli/render-page.task.js

@@ -36,6 +36,7 @@ export function buildPrerenderAppConfig ({
     workspaceId: buildTimeConfig.workspaceId,
     apiUrl: buildTimeConfig.apiUrl,
     pages,
+    pageId: activeRouteId,
     sidebarPrimaryCollapsed: false,
   }
 }
@@ -61,12 +62,12 @@ export function buildHydrationAppConfig (appConfig) {
 
 export const BuildPage = {
   async handle ({ route, appConfig }) {
-    const hydrationConfig = buildHydrationAppConfig(appConfig)
+    const hydrationConfig = { ...buildHydrationAppConfig(appConfig), pageId: route.id }
     const { renderPage } = await loadSsrBundle(route)
 
     return renderPage(hydrationConfig, {
       bootstrapScriptContent: `window.__INITIAL_APP_CONFIG__=${JSON.stringify(hydrationConfig)}`,
-      bootstrapModules: [`/static/${route.id}.js`],
+      bootstrapModules: ['/static/app.js'],
     })
   },
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ossy/app",
-  "version": "1.13.2",
+  "version": "1.13.3",
   "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.13.2",
-    "@ossy/design-system": "^1.13.2",
-    "@ossy/pages": "^1.13.2",
-    "@ossy/router": "^1.13.2",
-    "@ossy/router-react": "^1.13.2",
-    "@ossy/sdk": "^1.13.2",
-    "@ossy/sdk-react": "^1.13.2",
-    "@ossy/themes": "^1.13.2",
+    "@ossy/connected-components": "^1.13.3",
+    "@ossy/design-system": "^1.13.3",
+    "@ossy/pages": "^1.13.3",
+    "@ossy/router": "^1.13.3",
+    "@ossy/router-react": "^1.13.3",
+    "@ossy/sdk": "^1.13.3",
+    "@ossy/sdk-react": "^1.13.3",
+    "@ossy/themes": "^1.13.3",
     "@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": "261f99aae788324c696edaeaa13a67380780e3fc"
+  "gitHead": "0d5eae5748fb9a32e5dcb147444b7e9a8113dcba"
 }