@ossy/app 1.11.5 → 1.11.6

package/README.md

@@ -21,11 +21,9 @@ export const metadata = { path: { en: '/about', sv: '/om' } }
 export default () => <h1>About</h1>
 ```
 
-For a single-file setup, use `src/pages.jsx` (legacy).
+During `dev` / `build`, the tooling writes **JSON manifests** under **`build/.ossy/`**: **`pages.generated.json`** (after compile: route ids, paths, `sourceFile`, merged `metadata`, and **`module`** — a `page-modules/<id>.mjs` path used for lazy `import()` in the browser and on SSR), **`pages.bundle.json`** (compiled module index), plus the same pattern for API and tasks. Small **`*.runtime.mjs`** loaders (copied from `@ossy/app`) load the app shell; **`pages.runtime.mjs`** exports the route table from **`pages.generated.json`** only. The server exposes compiled page modules at **`/__ossy/page-modules/`** for same-origin dynamic imports.
 
-During `dev` / `build`, the tooling writes **JSON manifests** under **`build/.ossy/`**: **`pages.generated.json`** (route ids, default paths, and `sourceFile` paths), **`pages.bundle.json`** (compiled `page-modules/<id>.mjs` paths), plus the same pattern for API and tasks (`*.generated.json` / `*.bundle.json`). Small **`*.runtime.mjs`** loaders (copied from `@ossy/app`) dynamically `import()` those compiled modules at runtime.
-
-**Client JS (per-page):** For each `*.page.jsx`, the build emits **`build/.ossy/hydrate-<pageId>.jsx`** → **`public/static/hydrate-<pageId>.js`**. The HTML for a request only loads the hydrate script for the **current** route (full document navigation), so other pages’ components are not part of that entry. React and shared dependencies still go into hashed shared chunks. The inline config (`window.__INITIAL_APP_CONFIG__`) no longer includes the full `pages` list—only request-time fields (theme, `apiUrl`, etc.).
+**Client JS (per-page):** For each `*.page.jsx`, the build emits **`build/.ossy/hydrate-<pageId>.jsx`** → **`public/static/<pageId>.js`**. The HTML for a request only loads the hydrate script for the **current** route (full document navigation), so other pages’ components are not part of that entry. React and shared dependencies still go into hashed shared chunks. The inline config (`window.__INITIAL_APP_CONFIG__`) no longer includes the full `pages` list—only request-time fields (theme, `apiUrl`, etc.).
 
 Add `src/config.js` for workspace and theme:
 

package/cli/build.js

@@ -1,6 +1,7 @@
 import path from 'path';
 import url from 'url';
 import fs from 'fs';
+import { pathToFileURL } from 'node:url'
 import { rollup } from 'rollup';
 import babel from '@rollup/plugin-babel';
 import { nodeResolve as resolveDependencies } from '@rollup/plugin-node-resolve'
@@ -67,6 +68,9 @@ export const OSSY_API_RUNTIME_BASENAME = 'api.runtime.mjs'
 export const OSSY_TASKS_RUNTIME_BASENAME = 'tasks.runtime.mjs'
 
 export const OSSY_PAGE_MODULES_DIRNAME = 'page-modules'
+
+/** Express serves compiled page modules here for browser `import()`. Must match `server.js`. */
+export const OSSY_PAGE_MODULE_WEB_PREFIX = '/__ossy/page-modules'
 /** Tiny Rollup inputs that re-export `metadata` so per-page server bundles keep i18n paths. */
 export const OSSY_PAGE_SERVER_ENTRIES_DIRNAME = 'page-server-entries'
 export const OSSY_API_MODULES_DIRNAME = 'api-modules'
@@ -385,7 +389,8 @@ export async function compilePageServerModules ({
   for (const f of pageFiles) {
     const pageId = clientHydrateIdForPage(f, srcDir)
     const safeId = String(pageId).replace(/[^a-zA-Z0-9_-]+/g, '-') || 'page'
-    const outName = `${safeId}.mjs`
+    const relPath = pageServerModuleRelPath(f, srcDir)
+    const outName = path.posix.basename(relPath)
     const outFile = path.join(modsDir, outName)
     const stubPath = path.join(entriesDir, `${safeId}.mjs`)
     writePageServerRollupEntry({ pageAbsPath: f, stubPath })
@@ -398,7 +403,7 @@ export async function compilePageServerModules ({
     })
     bundlePages.push({
       id: pageId,
-      module: `${OSSY_PAGE_MODULES_DIRNAME}/${outName}`,
+      module: relPath,
     })
   }
   return bundlePages
@@ -448,6 +453,50 @@ export async function compileTaskServerModules ({ taskFiles, ossyDir, nodeEnv, o
   return modules
 }
 
+/**
+ * Merges compiled `metadata` + `module` into `pages.generated.json` (same order as `pageBundleList`).
+ * Enables lazy `import()` in the browser and Node without putting `Component` on the route object.
+ */
+export async function enrichPagesGeneratedManifest ({
+  ossyDir,
+  pagesGeneratedPath,
+  pageBundleList,
+}) {
+  if (!pageBundleList?.length || !fs.existsSync(pagesGeneratedPath)) return
+  const raw = JSON.parse(fs.readFileSync(pagesGeneratedPath, 'utf8'))
+  const basePages = raw?.pages
+  if (!Array.isArray(basePages) || basePages.length !== pageBundleList.length) {
+    throw new Error(
+      '[@ossy/app] pages.generated.json page count must match compiled page modules (re-run build).'
+    )
+  }
+  const pages = []
+  for (let i = 0; i < basePages.length; i++) {
+    const abs = path.join(ossyDir, pageBundleList[i].module)
+    const mod = await import(pathToFileURL(abs).href)
+    const meta = mod?.metadata && typeof mod.metadata === 'object' ? mod.metadata : {}
+    const derived = { id: basePages[i].id, path: basePages[i].path }
+    const merged = {
+      ...derived,
+      ...meta,
+      sourceFile: basePages[i].sourceFile,
+      module: pageBundleList[i].module,
+    }
+    try {
+      JSON.stringify(merged)
+    } catch {
+      pages.push({
+        ...derived,
+        sourceFile: basePages[i].sourceFile,
+        module: pageBundleList[i].module,
+      })
+      continue
+    }
+    pages.push(merged)
+  }
+  writeOssyJson(pagesGeneratedPath, { version: raw.version ?? 1, pages })
+}
+
 /**
  * Writes `pages.bundle.json`, `api.bundle.json`, `tasks.bundle.json` by Rollup-compiling each source module.
  */
@@ -477,6 +526,11 @@ export async function compileOssyNodeArtifacts ({
     version: 1,
     modules: taskModuleList,
   })
+  await enrichPagesGeneratedManifest({
+    ossyDir,
+    pagesGeneratedPath: path.join(ossyDir, OSSY_GEN_PAGES_BASENAME),
+    pageBundleList,
+  })
 }
 
 export function filePathToRoute(filePath, srcDir) {
@@ -489,7 +543,7 @@ export function filePathToRoute(filePath, srcDir) {
 }
 
 /**
- * Basename for `/static/hydrate-<id>.js` must match `route.id` after `metadata` is merged in `toPage`
+ * Basename for `/static/<id>.js` (per-page client bundle) must match `route.id` after `metadata` is merged in `toPage`
  * (`{ ...derived, ...metadata }`). Uses a light `metadata` scan when possible.
  */
 export function clientHydrateIdForPage (pageAbsPath, srcDir) {
@@ -507,6 +561,13 @@ export function clientHydrateIdForPage (pageAbsPath, srcDir) {
   return idMatch ? idMatch[1] : derived.id
 }
 
+/** Posix path relative to `build/.ossy/` for the compiled server/browser page module. */
+export function pageServerModuleRelPath (pageAbsPath, srcDir) {
+  const pageId = clientHydrateIdForPage(pageAbsPath, srcDir)
+  const safeId = String(pageId).replace(/[^a-zA-Z0-9_-]+/g, '-') || 'page'
+  return `${OSSY_PAGE_MODULES_DIRNAME}/${safeId}.mjs`
+}
+
 export function pageSourceExportsMetadata (pageAbsPath) {
   try {
     const src = fs.readFileSync(pageAbsPath, 'utf8')
@@ -539,37 +600,35 @@ export function writePageServerRollupEntry ({ pageAbsPath, stubPath }) {
 }
 
 /**
- * One client entry per page: imports only that page module and hydrates the document.
- * Keeps the same `toPage` shape as `pages.runtime.mjs` + manifests so SSR and client trees match.
+ * One client entry per page: `import()` the compiled page module URL, then hydrates the document.
  */
 export function generatePageHydrateModule ({ pageAbsPath, stubAbsPath, srcDir }) {
-  const rel = relToGeneratedImport(stubAbsPath, pageAbsPath)
-  const { id, path: routePath } = filePathToRoute(pageAbsPath, srcDir)
-  const pathLiteral = JSON.stringify(routePath)
-  const idLiteral = JSON.stringify(id)
+  void stubAbsPath
+  const outName = path.posix.basename(pageServerModuleRelPath(pageAbsPath, srcDir))
+  const pageImportUrl = `${OSSY_PAGE_MODULE_WEB_PREFIX}/${outName}`
+  const pageImportLiteral = JSON.stringify(pageImportUrl)
   return [
     '// Generated by @ossy/app — do not edit',
     '',
-    "import React, { cloneElement } from 'react'",
+    "import React, { createElement } from 'react'",
     "import 'react-dom'",
     "import { hydrateRoot } from 'react-dom/client'",
-    `import * as _page from './${rel}'`,
     '',
-    'function toPage(mod, derived) {',
-    '  const meta = mod?.metadata || {}',
-    '  const def = mod?.default',
-    '  if (typeof def === \'function\') {',
-    '    return { ...derived, ...meta, element: React.createElement(def) }',
+    'async function main () {',
+    '  const initialConfig = window.__INITIAL_APP_CONFIG__ || {}',
+    `  const _page = await import(${pageImportLiteral})`,
+    '  const Page = _page?.default',
+    '  if (typeof Page !== \'function\') {',
+    '    throw new Error(`[@ossy/app] Page must export default as a function component`)',
     '  }',
-    '  return { ...derived, ...meta, ...(def || {}) }',
+    '  const rootTree = createElement(Page, initialConfig)',
+    '  hydrateRoot(document, rootTree)',
     '}',
     '',
-    `const _route = toPage(_page, { id: ${idLiteral}, path: ${pathLiteral} })`,
-    'const initialConfig = window.__INITIAL_APP_CONFIG__ || {}',
-    'const rootTree = _route?.element',
-    '  ? cloneElement(_route.element, initialConfig)',
-    "  : React.createElement('p', null, 'Not found')",
-    'hydrateRoot(document, rootTree)',
+    'main().catch((err) => {',
+    '  console.error(err)',
+    "  document.body.innerHTML = '<p style=\\'font-family:sans-serif;padding:1rem\\'>Hydration failed.</p>'",
+    '})',
     '',
   ].join('\n')
 }
@@ -646,33 +705,30 @@ export function parsePagesFromManifestJson (manifestPath) {
     const data = JSON.parse(raw)
     const pages = data?.pages
     if (!Array.isArray(pages)) return []
-    return pages.map((p) => ({ id: p.id, path: p.path }))
+    return pages.map((p) => ({
+      id: p.id,
+      path: p.path,
+      ...(typeof p.module === 'string' ? { module: p.module } : {}),
+    }))
   } catch {
     return []
   }
 }
 
-export function parsePagesFromSource(filePath) {
+/**
+ * Best-effort scan of a source file for `{ id, path }` literals (e.g. `*.api.js` default export).
+ * Used only for the build dashboard API list — **not** for page discovery (`*.page.jsx` only).
+ */
+export function parseIdPathPairsFromFile (filePath) {
   try {
     const content = fs.readFileSync(filePath, 'utf8')
     const items = []
-    // Match { id: 'x', path: '/y' } or { id: "x", path: "/y" }
     const idPathPattern = /\{\s*id\s*:\s*['"]([^'"]*)['"]\s*,\s*path\s*:\s*['"]([^'"]*)['"]/g
-    // Match { path: '/y', element: ... } (path-first)
-    const pathElementPattern = /\{\s*path\s*:\s*['"]([^'"]*)['"]\s*,\s*element\s*:/g
-    // Match { path: { en: '/x', sv: '/y' }, ... }
     const pathObjPattern = /\{\s*path\s*:\s*\{\s*([^}]+)\}/g
     let m
     while ((m = idPathPattern.exec(content)) !== null) {
       items.push({ id: m[1], path: m[2] })
     }
-    if (items.length === 0) {
-      while ((m = pathElementPattern.exec(content)) !== null) {
-        const p = m[1]
-        const id = p === '/' ? 'home' : p.replace(/^\//, '').replace(/\/$/, '').replace(/\//g, '-') || 'page'
-        items.push({ id, path: p })
-      }
-    }
     if (items.length === 0) {
       while ((m = pathObjPattern.exec(content)) !== null) {
         const pathStr = m[1].replace(/\s/g, '').replace(/:/g, ': ')
@@ -707,7 +763,7 @@ export function getBuildOverviewSnapshot ({
 
   const apiRoutes = []
   for (const f of apiOverviewFiles) {
-    if (fs.existsSync(f)) apiRoutes.push(...parsePagesFromSource(f))
+    if (fs.existsSync(f)) apiRoutes.push(...parseIdPathPairsFromFile(f))
   }
 
   return { configRel, pages, apiRoutes }

package/cli/dev.js

@@ -132,7 +132,7 @@ export const dev = async (cliArgs) => {
       entryFileNames ({ name }) {
         if (name.startsWith('hydrate__')) {
           const pageId = name.slice('hydrate__'.length)
-          return `static/hydrate-${pageId}.js`
+          return `static/${pageId}.js`
         }
         return 'static/[name].js'
       },

package/cli/pages.runtime.mjs

@@ -1,7 +1,6 @@
 import fs from 'node:fs'
 import path from 'node:path'
-import { fileURLToPath, pathToFileURL } from 'node:url'
-import React from 'react'
+import { fileURLToPath } from 'node:url'
 
 const __ossyDir = path.dirname(fileURLToPath(import.meta.url))
 
@@ -9,31 +8,7 @@ function readJson (name) {
   return JSON.parse(fs.readFileSync(path.join(__ossyDir, name), 'utf8'))
 }
 
-function toPage (mod, derived) {
-  const meta = mod?.metadata || {}
-  const def = mod?.default
-  if (typeof def === 'function') {
-    return { ...derived, ...meta, element: React.createElement(def) }
-  }
-  return { ...derived, ...meta, ...(def || {}) }
-}
-
-const { pages: metaPages } = readJson('pages.generated.json')
-const { pages: bundlePages } = readJson('pages.bundle.json')
-
-if (metaPages.length !== bundlePages.length) {
-  throw new Error(
-    '[@ossy/app][pages.runtime] pages.generated.json and pages.bundle.json must list the same number of pages'
-  )
-}
-
-const out = []
-for (let i = 0; i < metaPages.length; i++) {
-  const derived = { id: metaPages[i].id, path: metaPages[i].path }
-  const rel = bundlePages[i].module
-  const abs = path.resolve(__ossyDir, rel)
-  const mod = await import(pathToFileURL(abs).href)
-  out.push(toPage(mod, derived))
-}
+/** Route list from `pages.generated.json` (includes `module` for lazy `import()` after build). */
+const { pages } = readJson('pages.generated.json')
 
-export default out
+export default Array.isArray(pages) ? pages : []

package/cli/prerender-react.task.js

@@ -55,7 +55,7 @@ async function bundleOneHydratePage ({
         const n = chunkInfo.name
         if (n.startsWith('hydrate__')) {
           const pageId = n.slice('hydrate__'.length)
-          return `static/hydrate-${pageId}.js`
+          return `static/${pageId}.js`
         }
         return 'static/[name].js'
       },
@@ -157,7 +157,7 @@ async function prerenderPagesParallel ({
 
   const routesToRender = []
   for (const route of pageList) {
-    if (!route?.element) continue
+    if (typeof route?.module !== 'string' || !route.module) continue
     if (!pathIsPrerenderable(route.path)) {
       reporter?.skipPrerender?.(
         route.id,

package/cli/render-page.task.js

@@ -1,8 +1,29 @@
-import React, { cloneElement } from 'react'
+import path from 'node:path'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+import React, { createElement } from 'react'
 import { prerenderToNodeStream } from 'react-dom/static'
 
+const __ossyDir = path.dirname(fileURLToPath(import.meta.url))
+
+async function loadPageDefaultExport (route) {
+  if (typeof route?.module !== 'string' || !route.module) {
+    throw new Error(
+      `[@ossy/app][BuildPage] Route "${route?.id ?? '?'}" has no compiled module path (re-run build so pages.generated.json includes "module").`
+    )
+  }
+  const abs = path.join(__ossyDir, route.module)
+  const mod = await import(pathToFileURL(abs).href)
+  const def = mod?.default
+  if (typeof def !== 'function') {
+    throw new Error(
+      `[@ossy/app][BuildPage] Page "${route?.id}" must export default as a function component (got ${typeof def}).`
+    )
+  }
+  return def
+}
+
 /**
- * App shell config for SSR / prerender (mirrors client: theme, pages metadata, active route element).
+ * App shell config for SSR / prerender (mirrors client: theme, pages metadata, props for the active page).
  */
 export function buildPrerenderAppConfig ({
   buildTimeConfig,
@@ -11,10 +32,11 @@ export function buildPrerenderAppConfig ({
   urlPath,
   isAuthenticated = false,
 }) {
-  /** Never attach `element` here — it cannot round-trip through `JSON.stringify` in the hydrate bootstrap. */
+  /** `module` is the lazy import path segment (see `OSSY_PAGE_MODULE_WEB_PREFIX` in the server). */
   const pages = pageList.map((page) => ({
     id: page?.id,
     path: page?.path,
+    ...(typeof page?.module === 'string' ? { module: page.module } : {}),
   }))
   return {
     ...buildTimeConfig,
@@ -28,11 +50,15 @@ export function buildPrerenderAppConfig ({
   }
 }
 
-/** Strips non-JSON content (e.g. React elements on `pages`) for the bootstrap script. */
+/** Strips non-JSON content for the bootstrap script; keeps serializable route fields including `module`. */
 export function appConfigForBootstrap (appConfig) {
   if (!appConfig || typeof appConfig !== 'object') return appConfig
   const pages = Array.isArray(appConfig.pages)
-    ? appConfig.pages.map(({ id, path }) => ({ id, path }))
+    ? appConfig.pages.map(({ id, path, module }) => ({
+        id,
+        path,
+        ...(typeof module === 'string' ? { module } : {}),
+      }))
     : appConfig.pages
   return { ...appConfig, pages }
 }
@@ -65,12 +91,13 @@ export function buildHydrationAppConfig (appConfig) {
 export const BuildPage = {
   async handle ({ route, appConfig, isDevReloadEnabled }) {
     const hydrationConfig = buildHydrationAppConfig(appConfig)
-    const rootElement = cloneElement(route.element, hydrationConfig)
+    const Page = await loadPageDefaultExport(route)
+    const rootElement = createElement(Page, hydrationConfig)
     const devReloadScript = isDevReloadEnabled
       ? `(function(){try{var es=new EventSource('/__ossy_reload');es.addEventListener('reload',function(){location.reload();});}catch(e){}})();`
       : ``
 
-    const hydrateUrl = `/static/hydrate-${route.id}.js`
+    const hydrateUrl = `/static/${route.id}.js`
     const { prelude } = await prerenderToNodeStream(rootElement, {
       bootstrapScriptContent: `window.__INITIAL_APP_CONFIG__ = ${JSON.stringify(hydrationConfig)};${devReloadScript}`,
       bootstrapModules: [hydrateUrl],

package/cli/server.js

@@ -38,6 +38,7 @@ const app = express();
 
 const currentDir = path.dirname(url.fileURLToPath(import.meta.url))
 const ROOT_PATH = path.resolve(currentDir, 'public')
+const OSSY_PAGE_MODULES_STATIC = path.resolve(currentDir, '.ossy', 'page-modules')
 
 const isDevReloadEnabled = process.env.OSSY_DEV_RELOAD === '1'
 const reloadClients = new Set()
@@ -121,6 +122,10 @@ const middleware = [
   ProxyInternal(),
 ]
 
+const pageModuleRouter = express.Router()
+pageModuleRouter.use(express.static(OSSY_PAGE_MODULES_STATIC))
+app.use('/__ossy/page-modules', pageModuleRouter)
+
 app.use(middleware)
 
 const apiRouter = OssyRouter.of({
@@ -155,7 +160,7 @@ app.all('*all', async (req, res) => {
     }
 
     const pageRoute = pageRouter.getPageByUrl(requestUrl)
-    if (pageRoute?.element) {
+    if (pageRoute?.module) {
       const appConfig = buildPrerenderAppConfig({
         buildTimeConfig,
         pageList: sitePageList,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ossy/app",
-  "version": "1.11.5",
+  "version": "1.11.6",
   "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.11.5",
-    "@ossy/design-system": "^1.11.5",
-    "@ossy/pages": "^1.11.5",
-    "@ossy/router": "^1.11.5",
-    "@ossy/router-react": "^1.11.5",
-    "@ossy/sdk": "^1.11.5",
-    "@ossy/sdk-react": "^1.11.5",
-    "@ossy/themes": "^1.11.5",
+    "@ossy/connected-components": "^1.11.6",
+    "@ossy/design-system": "^1.11.6",
+    "@ossy/pages": "^1.11.6",
+    "@ossy/router": "^1.11.6",
+    "@ossy/router-react": "^1.11.6",
+    "@ossy/sdk": "^1.11.6",
+    "@ossy/sdk-react": "^1.11.6",
+    "@ossy/themes": "^1.11.6",
     "@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": "9dcb9e0e0a09c23690f1a8e009fa79e2961fe6d6"
+  "gitHead": "f9bbe1dbd426b6ee5d07021428b900c570952ea4"
 }