@ossy/app 1.4.0 → 1.5.0

package/cli/build.js

@@ -159,8 +159,8 @@ export function createOssyAppBundlePlugins ({ nodeEnv }) {
     }),
     json(),
     nodeExternals({
-      deps: true,
-      devDeps: false,
+      deps: false,
+      devDeps: true,
       peerDeps: true,
       packagePath: path.join(process.cwd(), 'package.json'),
     }),
@@ -185,8 +185,8 @@ export function createOssyClientRollupPlugins ({ nodeEnv, copyPublicFrom, buildP
     }),
     json(),
     nodeExternals({
-      deps: true,
-      devDeps: false,
+      deps: false,
+      devDeps: true,
       peerDeps: true,
       packagePath: path.join(process.cwd(), 'package.json'),
     }),
@@ -407,21 +407,18 @@ export function clientHydrateIdForPage (pageAbsPath, srcDir) {
  * One client entry per page: imports only that page module and hydrates the document.
  * Keeps the same `toPage` shape as `generatePagesModule` so SSR and client trees match.
  */
-export function generatePageHydrateModule ({ pageAbsPath, stubAbsPath, srcDir, pagesGeneratedPath }) {
+export function generatePageHydrateModule ({ pageAbsPath, stubAbsPath, srcDir }) {
   const rel = relToGeneratedImport(stubAbsPath, pageAbsPath)
-  const pagesRel = relToGeneratedImport(stubAbsPath, pagesGeneratedPath)
   const { id, path: routePath } = filePathToRoute(pageAbsPath, srcDir)
   const pathLiteral = JSON.stringify(routePath)
   const idLiteral = JSON.stringify(id)
   return [
     '// Generated by @ossy/app — do not edit',
     '',
-    "import React, { cloneElement, createElement } from 'react'",
+    "import React, { cloneElement } from 'react'",
     "import 'react-dom'",
     "import { hydrateRoot } from 'react-dom/client'",
-    "import { App } from '@ossy/connected-components'",
     `import * as _page from './${rel}'`,
-    `import pageRoutes from './${pagesRel}'`,
     '',
     'function toPage(mod, derived) {',
     '  const meta = mod?.metadata || {}',
@@ -434,17 +431,9 @@ export function generatePageHydrateModule ({ pageAbsPath, stubAbsPath, srcDir, p
     '',
     `const _route = toPage(_page, { id: ${idLiteral}, path: ${pathLiteral} })`,
     'const initialConfig = window.__INITIAL_APP_CONFIG__ || {}',
-    'const pagesForApp = pageRoutes.map((p) =>',
-    '  p.id === _route.id',
-    '    ? { ...p, element: cloneElement(p.element, initialConfig) }',
-    '    : p',
-    ')',
-    'const rootTree = createElement(App, {',
-    '  ...initialConfig,',
-    '  url: window.location.href,',
-    '  pages: pagesForApp,',
-    '  includeDocumentShell: false,',
-    '})',
+    'const rootTree = _route?.element',
+    '  ? cloneElement(_route.element, initialConfig)',
+    "  : React.createElement('p', null, 'Not found')",
     'hydrateRoot(document, rootTree)',
     '',
   ].join('\n')
@@ -452,7 +441,6 @@ export function generatePageHydrateModule ({ pageAbsPath, stubAbsPath, srcDir, p
 
 /** Writes `hydrate-<id>.jsx` for each page; removes stale `hydrate-*` outputs in `ossyDir` first. */
 export function writePageHydrateStubs (pageFiles, srcDir, ossyDir) {
-  const pagesGeneratedPath = path.join(ossyDir, OSSY_GEN_PAGES_BASENAME)
   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)
@@ -479,12 +467,7 @@ export function writePageHydrateStubs (pageFiles, srcDir, ossyDir) {
     fs.mkdirSync(path.dirname(stubPath), { recursive: true })
     fs.writeFileSync(
       stubPath,
-      generatePageHydrateModule({
-        pageAbsPath: f,
-        stubAbsPath: stubPath,
-        srcDir,
-        pagesGeneratedPath,
-      })
+      generatePageHydrateModule({ pageAbsPath: f, stubAbsPath: stubPath, srcDir })
     )
   }
 }

package/cli/render-page.task.js

@@ -0,0 +1,26 @@
+import React, { cloneElement } from 'react'
+import { prerenderToNodeStream } from 'react-dom/static'
+
+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(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,13 +1,11 @@
 import path from 'path';
 import url from 'url'
-import React, { cloneElement, createElement } from 'react';
 import express from 'express'
 import morgan from 'morgan'
 import { Router as OssyRouter } from '@ossy/router'
-import { App } from '@ossy/connected-components'
-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'
@@ -113,6 +111,25 @@ const Router = OssyRouter.of({
   pages: [...apiRouteList, ...pageList]
 })
 
+function resolveAppConfig ({ req, buildTimeConfig }) {
+  const userAppSettings = req.userAppSettings || {}
+  const pages = pageList.map((page) => ({
+    id: page?.id,
+    path: page?.path,
+  }))
+  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
 
@@ -124,36 +141,14 @@ app.all('*all', (req, res) => {
     return
   }
 
-  const userAppSettings = req.userAppSettings || {}
-
-  const appConfig = {
-    ...buildTimeConfig,
-    url: req.originalUrl,
-    theme: userAppSettings.theme || buildTimeConfig.theme || 'light',
-    isAuthenticated: req.isAuthenticated || false,
-    workspaceId: userAppSettings.workspaceId || buildTimeConfig.workspaceId,
-    apiUrl: buildTimeConfig.apiUrl,
-    /** Primary app shell sidebar: icon rail when true (persisted in `x-ossy-user-settings`). */
-    sidebarPrimaryCollapsed: userAppSettings.sidebarPrimaryCollapsed === true,
-  }
+  const appConfig = resolveAppConfig({ req, buildTimeConfig })
 
   if (!route?.element) {
     res.status(404).send('Not found')
     return
   }
 
-  const pagesForApp = pageList.map((p) =>
-    p.id === route.id
-      ? { ...p, element: cloneElement(p.element, appConfig) }
-      : p
-  )
-  const rootElement = createElement(App, {
-    ...appConfig,
-    pages: pagesForApp,
-    includeDocumentShell: false,
-  })
-
-  prerenderHtmlDocument(rootElement, appConfig, route.id)
+  BuildPage.handle({ route, appConfig, isDevReloadEnabled })
     .then(html => { res.send(html) })
     .catch(err => { res.send(err) })
 
@@ -161,28 +156,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.0",
+  "version": "1.5.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.0",
-    "@ossy/design-system": "^1.4.0",
-    "@ossy/pages": "^1.4.0",
-    "@ossy/router": "^1.4.0",
-    "@ossy/router-react": "^1.4.0",
-    "@ossy/sdk": "^1.4.0",
-    "@ossy/sdk-react": "^1.4.0",
-    "@ossy/themes": "^1.4.0",
+    "@ossy/connected-components": "^1.5.0",
+    "@ossy/design-system": "^1.5.0",
+    "@ossy/pages": "^1.5.0",
+    "@ossy/router": "^1.5.0",
+    "@ossy/router-react": "^1.5.0",
+    "@ossy/sdk": "^1.5.0",
+    "@ossy/sdk-react": "^1.5.0",
+    "@ossy/themes": "^1.5.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": "69e80ed4e43a04263df106e0f504c6d2fb55e0fb"
+  "gitHead": "b1a36350ae22ae6776163952e3bf03b2a6cb6498"
 }