@ossy/app 1.39.4 → 1.39.6

package/cli/build.task.js

@@ -227,7 +227,7 @@ function generateE2eStub ({ stubAbs, sourceAbs }) {
 }
 
 // Layouts are React components that wrap page renders. The stub re-exports
-// everything (including the optional `applies` glob and required `id`) plus the
+// everything (including required `id`) plus the
 // default component so the manifest plugin can validate them and the server
 // can inject them at render time.
 function generateLayoutStub ({ stubAbs, sourceAbs }) {

package/cli/manifest-plugin.js

@@ -73,7 +73,6 @@ import { metadataIdFromFile, defaultPageRoute } from './get-platform-files.task.
  * @typedef {object} LayoutManifestEntry
  * @property {string} id      Unique layout id (e.g. `'app-shell'`).
  * @property {string} entry   URL the platform serves the layout bundle from.
- * @property {string} [applies]  Optional glob pattern of page paths this layout applies to (default `'*'` = all pages).
  *
  * @typedef {object} E2eManifestEntry
  * @property {string} id       Unique test id (e.g. `'authentication/sign-in'`).
@@ -346,11 +345,10 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
           continue
         }
 
-        // Layouts wrap page renders automatically. The bundle exports `id`
-        // (a unique slug), an optional `applies` glob, and a default export
-        // (the React component). They don't produce routable entries; they
-        // accumulate into a separate `layouts` array so the server can
-        // match and inject them at render time.
+        // Layouts wrap every page render. The bundle exports `id` and a default
+        // export (the React component). Only one `*.layout.jsx` per app is
+        // supported. They don't produce routable entries; they accumulate into
+        // `manifest.layouts` so the server can inject them at render time.
         if (entryInfo.kind === 'layout') {
           const layoutId = mod && mod.id
           const component = mod && mod.default
@@ -368,8 +366,7 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
             this.error(`[@ossy/app][build] Duplicate layout id "${layoutId}"`)
           }
           seenLayoutIds.add(layoutId)
-          const applies = typeof mod.applies === 'string' ? mod.applies : '*'
-          layouts.push({ id: layoutId, entry: url, applies })
+          layouts.push({ id: layoutId, entry: url })
           continue
         }
 
@@ -419,7 +416,13 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
 
         if (entryInfo.kind === 'page') {
           const pagePath = rawMeta.path !== undefined ? rawMeta.path : defaultPageRoute(id)
-          entries.push({ type: 'page', id, path: pagePath, title: rawMeta.title, entry: url })
+          entries.push({
+            type: 'page',
+            id,
+            path: pagePath,
+            title: rawMeta.title,
+            entry: url,
+          })
         } else if (entryInfo.kind === 'api') {
           // APIs have no sensible default route (unlike pages where we can
           // derive `/<id>`). Failing here surfaces a missing `metadata.path`
@@ -438,6 +441,13 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
         }
       }
 
+      if (layouts.length > 1) {
+        this.error(
+          `[@ossy/app][build] Only one *.layout.jsx per app is allowed (found ${layouts.length}). ` +
+          'Use conditional rendering inside the app layout for route-specific chrome.',
+        )
+      }
+
       /** @type {Manifest} */
       const manifest = { entries, components, slots, resourceTemplates, aggregates, integrations, startups, emails, actions, e2es, layouts, config: configValue || {} }
       fs.mkdirSync(path.dirname(manifestPath), { recursive: true })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ossy/app",
-  "version": "1.39.4",
+  "version": "1.39.6",
   "description": "",
   "source": "./src/index.js",
   "main": "./src/index.js",
@@ -38,14 +38,14 @@
     "@babel/eslint-parser": "^7.15.8",
     "@babel/preset-react": "^7.26.3",
     "@babel/register": "^7.25.9",
-    "@ossy/design-system": "^1.39.4",
+    "@ossy/design-system": "^1.39.6",
     "@ossy/pages": "^1.23.0",
-    "@ossy/platform": "^1.38.4",
-    "@ossy/router": "^1.39.4",
-    "@ossy/router-react": "^1.39.4",
-    "@ossy/sdk": "^1.39.4",
-    "@ossy/sdk-react": "^1.39.4",
-    "@ossy/themes": "^1.39.4",
+    "@ossy/platform": "^1.38.6",
+    "@ossy/router": "^1.39.6",
+    "@ossy/router-react": "^1.39.6",
+    "@ossy/sdk": "^1.39.6",
+    "@ossy/sdk-react": "^1.39.6",
+    "@ossy/themes": "^1.39.6",
     "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-babel": "^7.0.0",
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -79,5 +79,5 @@
     "README.md",
     "tsconfig.json"
   ],
-  "gitHead": "188d15e1d90f102bc31996da3b32a5aef213f4b7"
+  "gitHead": "72d150cf20ff7ba25b328bc5b429b065c2840b2b"
 }

package/runtime/page-runtime.js

@@ -26,6 +26,25 @@ export async function loadComponents (entries = []) {
   return map
 }
 
+/**
+ * Dynamically imports the app's single layout bundle. Layout components cannot
+ * be serialized into the bootstrap JSON (functions are stripped), so the server
+ * passes `layoutEntry` and the client loads the same module here. When present,
+ * every page is wrapped — route-specific chrome is decided inside the layout.
+ *
+ * @param {string | null | undefined} layoutEntry
+ * @returns {Promise<import('react').ComponentType | null>}
+ */
+export async function loadLayout (layoutEntry) {
+  if (!layoutEntry) return null
+  try {
+    const mod = await import(layoutEntry)
+    return mod?.default ?? null
+  } catch {
+    return null
+  }
+}
+
 function buildTree ({ Component, Layout, metadata, props }) {
   const lang = props.htmlLang || props.defaultLanguage || 'en'
   const pageEl = createElement(Component, props)
@@ -82,8 +101,11 @@ export function createPageEntry (pageModule, options = {}) {
     const tree = buildTree({ Component, Layout, metadata, props: { ...pageProps, components } })
     const bootstrapUrl = toBootstrapUrl(entryUrl)
     const bootstrapModules = bootstrapUrl ? [bootstrapUrl] : []
+    // Layout is a React component — JSON.stringify drops functions, so hydration
+    // would render without the shell unless we pass the serializable entry URL.
+    const { Layout: _layout, ...bootstrapProps } = props
     const bootstrapScriptContent =
-      'window.__OSSY__=' + escapeBootstrapJson(JSON.stringify(props ?? {}))
+      'window.__OSSY__=' + escapeBootstrapJson(JSON.stringify(bootstrapProps ?? {}))
 
     return new Promise((resolve, reject) => {
       let html = ''
@@ -111,11 +133,12 @@ export function createPageEntry (pageModule, options = {}) {
     if (typeof document === 'undefined' || typeof window === 'undefined') return
     hydrated = true
     const props = window.__OSSY__ || {}
-    const { Layout = null, componentEntries = [], ...pageProps } = props
+    const { layoutEntry = null, componentEntries = [], ...pageProps } = props
     Promise.all([
       import('react-dom/client'),
       loadComponents(componentEntries),
-    ]).then(([{ hydrateRoot }, components]) => {
+      loadLayout(layoutEntry),
+    ]).then(([{ hydrateRoot }, components, Layout]) => {
       hydrateRoot(document, buildTree({ Component, Layout, metadata, props: { ...pageProps, components } }))
     })
   }