@ossy/app 1.11.3 → 1.11.5

package/cli/build.js

@@ -22,8 +22,8 @@ const RESOURCE_TEMPLATE_FILE_PATTERN = /\.resource\.js$/
 /** Written next to `*.resource.js` under `src/resource-templates/` when that dir exists. */
 export const OSSY_RESOURCE_TEMPLATES_OUT = '.ossy-system-templates.generated.js'
 
-/** Rollup output paths for JS served to the browser (see `entryFileNames` / `chunkFileNames`). */
-const BROWSER_STATIC_PREFIX = 'public/static/'
+/** Rollup output paths when `output.dir` is `<build>/public` (see `entryFileNames` / `chunkFileNames`). */
+const BROWSER_STATIC_PREFIX = 'static/'
 
 export function minifyBrowserStaticChunks () {
   return {

package/cli/dev.js

@@ -125,17 +125,18 @@ export const dev = async (cliArgs) => {
       buildPath,
     })
 
+    // `dir` must not be an ancestor of hydrate stubs (`build/.ossy/…`) or Rollup watch errors.
     const clientOutput = {
-      dir: buildPath,
+      dir: path.join(buildPath, 'public'),
       format: 'esm',
       entryFileNames ({ name }) {
         if (name.startsWith('hydrate__')) {
           const pageId = name.slice('hydrate__'.length)
-          return `public/static/hydrate-${pageId}.js`
+          return `static/hydrate-${pageId}.js`
         }
-        return 'public/static/[name].js'
+        return 'static/[name].js'
       },
-      chunkFileNames: 'public/static/[name]-[hash].js',
+      chunkFileNames: 'static/[name]-[hash].js',
     }
 
     let restartTimer = null

package/cli/prerender-react.task.js

@@ -48,18 +48,18 @@ async function bundleOneHydratePage ({
   })
   try {
     await bundle.write({
-      dir: buildPath,
+      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 `public/static/hydrate-${pageId}.js`
+          return `static/hydrate-${pageId}.js`
         }
-        return 'public/static/[name].js'
+        return 'static/[name].js'
       },
-      chunkFileNames: 'public/static/[name]-[hash].js',
+      chunkFileNames: 'static/[name]-[hash].js',
       plugins: minifyPlugin ? [minifyPlugin] : [],
     })
   } finally {

package/cli/render-page.task.js

@@ -11,16 +11,11 @@ export function buildPrerenderAppConfig ({
   urlPath,
   isAuthenticated = false,
 }) {
-  const pages = pageList.map((page) => {
-    const entry = {
-      id: page?.id,
-      path: page?.path,
-    }
-    if (activeRouteId != null && page?.id === activeRouteId) {
-      entry.element = page?.element
-    }
-    return entry
-  })
+  /** Never attach `element` here — it cannot round-trip through `JSON.stringify` in the hydrate bootstrap. */
+  const pages = pageList.map((page) => ({
+    id: page?.id,
+    path: page?.path,
+  }))
   return {
     ...buildTimeConfig,
     url: urlPath,
@@ -42,16 +37,42 @@ export function appConfigForBootstrap (appConfig) {
   return { ...appConfig, pages }
 }
 
+/** Plain data clone so server render props match `JSON.parse(JSON.stringify(...))` on the client. */
+function jsonSafeClone (value) {
+  if (value == null || typeof value !== 'object') return value
+  if (typeof value === 'function' || React.isValidElement(value)) return value
+  try {
+    return JSON.parse(JSON.stringify(value))
+  } catch {
+    return value
+  }
+}
+
+/**
+ * Props passed to `<App>` for SSR and the exact object embedded in `window.__INITIAL_APP_CONFIG__`.
+ * Keeps server and hydrate trees aligned (fixes React #418 hydration mismatches).
+ */
+export function buildHydrationAppConfig (appConfig) {
+  const base = appConfigForBootstrap(appConfig)
+  return {
+    ...base,
+    theme: jsonSafeClone(base.theme),
+    themes: jsonSafeClone(base.themes),
+    resourceTemplates: jsonSafeClone(base.resourceTemplates),
+  }
+}
+
 export const BuildPage = {
   async handle ({ route, appConfig, isDevReloadEnabled }) {
-    const rootElement = cloneElement(route.element, appConfig)
+    const hydrationConfig = buildHydrationAppConfig(appConfig)
+    const rootElement = cloneElement(route.element, 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 { prelude } = await prerenderToNodeStream(rootElement, {
-      bootstrapScriptContent: `window.__INITIAL_APP_CONFIG__ = ${JSON.stringify(appConfigForBootstrap(appConfig))};${devReloadScript}`,
+      bootstrapScriptContent: `window.__INITIAL_APP_CONFIG__ = ${JSON.stringify(hydrationConfig)};${devReloadScript}`,
       bootstrapModules: [hydrateUrl],
     })
 

package/package.json

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