@ossy/app 1.4.1 → 1.6.0

package/cli/render-page.task.js

@@ -0,0 +1,35 @@
+import React, { cloneElement } from 'react'
+import { prerenderToNodeStream } from 'react-dom/static'
+
+/** Strips non-JSON content (e.g. React elements on `pages`) for the bootstrap script. */
+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
+  return { ...appConfig, pages }
+}
+
+export const BuildPage = {
+  async handle ({ route, appConfig, isDevReloadEnabled }) {
+    const rootElement = cloneElement(route.element, appConfig)
+    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}`,
+      bootstrapModules: [hydrateUrl],
+    })
+
+    return new Promise((resolve, reject) => {
+      let data = ''
+      prelude.on('data', (chunk) => {
+        data += chunk
+      })
+      prelude.on('end', () => resolve(data))
+      prelude.on('error', reject)
+    })
+  },
+}

package/cli/server.js

@@ -1,12 +1,11 @@
 import path from 'path';
 import url from 'url'
-import React, { cloneElement } from 'react';
 import express from 'express'
 import morgan from 'morgan'
 import { Router as OssyRouter } from '@ossy/router'
-import { prerenderToNodeStream } from 'react-dom/static'
 import { ProxyInternal } from './proxy-internal.js'
 import cookieParser from 'cookie-parser'
+import { BuildPage } from './render-page.task.js'
 
 import pages from './.ossy/pages.bundle.js'
 import ApiRoutes from './.ossy/api.bundle.js'
@@ -112,36 +111,54 @@ const Router = OssyRouter.of({
   pages: [...apiRouteList, ...pageList]
 })
 
-app.all('*all', (req, res) => {
-  const pathname = req.originalUrl
-
-  const route = Router.getPageByUrl(pathname)
-
-  if (route && typeof route.handle === 'function') {
-    console.log(`[@ossy/app][server] Handling API route: ${pathname}`)
-    route.handle(req, res)
-    return
-  }
-
+function resolveAppConfig ({ req, buildTimeConfig, activeRouteId }) {
   const userAppSettings = req.userAppSettings || {}
-
-  const appConfig = {
+  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
+  })
+  return {
     ...buildTimeConfig,
     url: req.originalUrl,
     theme: userAppSettings.theme || buildTimeConfig.theme || 'light',
     isAuthenticated: req.isAuthenticated || false,
     workspaceId: userAppSettings.workspaceId || buildTimeConfig.workspaceId,
     apiUrl: buildTimeConfig.apiUrl,
+    pages,
     /** Primary app shell sidebar: icon rail when true (persisted in `x-ossy-user-settings`). */
     sidebarPrimaryCollapsed: userAppSettings.sidebarPrimaryCollapsed === true,
   }
+}
+
+app.all('*all', (req, res) => {
+  const pathname = req.originalUrl
+
+  const route = Router.getPageByUrl(pathname)
+
+  if (route && typeof route.handle === 'function') {
+    console.log(`[@ossy/app][server] Handling API route: ${pathname}`)
+    route.handle(req, res)
+    return
+  }
 
   if (!route?.element) {
     res.status(404).send('Not found')
     return
   }
 
-  prerenderHtmlDocument(cloneElement(route.element, appConfig), appConfig, route.id)
+  const appConfig = resolveAppConfig({
+    req,
+    buildTimeConfig,
+    activeRouteId: route.id,
+  })
+
+  BuildPage.handle({ route, appConfig, isDevReloadEnabled })
     .then(html => { res.send(html) })
     .catch(err => { res.send(err) })
 
@@ -149,28 +166,4 @@ app.all('*all', (req, res) => {
 
 app.listen(port, () => {
   console.log(`[@ossy/app][server] Running on http://localhost:${port}`);
-});
-
-async function prerenderHtmlDocument (rootElement, config, pageId) {
-
-  const devReloadScript = isDevReloadEnabled
-    ? `(function(){try{var es=new EventSource('/__ossy_reload');es.addEventListener('reload',function(){location.reload();});}catch(e){}})();`
-    : ``
-
-  const hydrateUrl = `/static/hydrate-${pageId}.js`
-
-  const { prelude } = await prerenderToNodeStream(rootElement, {
-    bootstrapScriptContent: `window.__INITIAL_APP_CONFIG__ = ${JSON.stringify(config)};${devReloadScript}`,
-    bootstrapModules: [hydrateUrl]
-  });
-
-  return new Promise((resolve, reject) => {
-    let data = '';
-    prelude.on('data', chunk => {
-      data += chunk;
-    });
-    prelude.on('end', () => resolve(data));
-    prelude.on('error', reject);
-  });
-
-}
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ossy/app",
-  "version": "1.4.1",
+  "version": "1.6.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.4.1",
-    "@ossy/design-system": "^1.4.1",
-    "@ossy/pages": "^1.4.1",
-    "@ossy/router": "^1.4.1",
-    "@ossy/router-react": "^1.4.1",
-    "@ossy/sdk": "^1.4.1",
-    "@ossy/sdk-react": "^1.4.1",
-    "@ossy/themes": "^1.4.1",
+    "@ossy/connected-components": "^1.6.0",
+    "@ossy/design-system": "^1.6.0",
+    "@ossy/pages": "^1.6.0",
+    "@ossy/router": "^1.6.0",
+    "@ossy/router-react": "^1.6.0",
+    "@ossy/sdk": "^1.6.0",
+    "@ossy/sdk-react": "^1.6.0",
+    "@ossy/themes": "^1.6.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": "ffccd09f5b13bddbf48e2b88ebb8b9d1e02c43f1"
+  "gitHead": "a1c29650f72ec23bd397d3c9e1c42387461acf8e"
 }