@ossy/app 0.15.13 → 1.0.1

package/cli/dev.js

@@ -7,20 +7,20 @@ import {
   generatePagesModule,
   discoverModulePageFiles,
   resolveApiSource,
-  ossyCleanBuildDirPlugin,
-  ensureOssyGeneratedDir,
+  resetOssyBuildDir,
+  createOssyRollupPlugins,
+  writePageHydrateStubs,
+  buildClientHydrateInput,
+  clientHydrateIdForPage,
   ossyGeneratedDir,
   OSSY_GEN_PAGES_BASENAME,
   OSSY_GEN_API_BASENAME,
-  resolvePageShellSource,
+  writeResourceTemplatesBarrelIfPresent,
+  resourceTemplatesDir,
+  OSSY_RESOURCE_TEMPLATES_OUT,
+  ossyServerExternal,
 } from './build.js';
 import { watch } from 'rollup';
-import babel from '@rollup/plugin-babel';
-import { nodeResolve as resolveDependencies } from '@rollup/plugin-node-resolve'
-import resolveCommonJsDependencies from '@rollup/plugin-commonjs'
-import json from "@rollup/plugin-json"
-import copy from 'rollup-plugin-copy';
-import replace from '@rollup/plugin-replace';
 import arg from 'arg'
 import { spawn } from 'node:child_process'
 // import inject from '@rollup/plugin-inject'
@@ -28,80 +28,55 @@ import { spawn } from 'node:child_process'
 export const dev = async (cliArgs) => {
     console.log('[@ossy/app][dev] Starting...')
 
-    const options = arg({
-        '--pages': String,
-        '--p': '--pages',
-
-        '--destination': String,
-        '--d': '--destination',
-    
+    const options = arg({    
         '--config': String,
         '-c': '--config',
-
-        '--api-source': String,
       }, { argv: cliArgs, permissive: true })
 
 
     const scriptDir = path.dirname(url.fileURLToPath(import.meta.url))
-    const cwd = process.cwd()
-    const pagesOpt = options['--pages'] || 'src'
-    const buildPath = path.resolve(options['--destination'] || 'build')
-    ensureOssyGeneratedDir(buildPath)
-    const srcDir = path.resolve(pagesOpt)
+    const buildPath = path.resolve('build')
+    const srcDir = path.resolve('src')
     const configPath = path.resolve(options['--config'] || 'src/config.js');
     const pageFiles = discoverPageFiles(srcDir)
-    const modulePageFiles = await discoverModulePageFiles({ cwd, configPath })
-    const pagesJsxPath = path.resolve('src/pages.jsx')
-    const hasPagesJsx = fs.existsSync(pagesJsxPath)
+    const modulePageFiles = await discoverModulePageFiles({ configPath })
 
-    let effectivePagesSource
-    let isPageFiles = false
-    if (pageFiles.length > 0 || modulePageFiles.length > 0) {
-      const pagesGeneratedPath = path.join(ossyGeneratedDir(buildPath), OSSY_GEN_PAGES_BASENAME)
-      fs.writeFileSync(
-        pagesGeneratedPath,
-        generatePagesModule([...pageFiles, ...modulePageFiles], cwd, pagesOpt, pagesGeneratedPath)
-      )
-      effectivePagesSource = pagesGeneratedPath
-      isPageFiles = true
-    } else if (hasPagesJsx) {
-      effectivePagesSource = pagesJsxPath
-    } else {
-      throw new Error(`[@ossy/app][dev] No pages found. Create *.page.jsx files in src/, or src/pages.jsx`);
-    }
+    resetOssyBuildDir(buildPath)
+
+    writeResourceTemplatesBarrelIfPresent({ cwd: process.cwd(), log: true })
+
+    const allPageFiles = [...pageFiles, ...modulePageFiles]
+    const pagesGeneratedPath = path.join(ossyGeneratedDir(buildPath), OSSY_GEN_PAGES_BASENAME)
+    fs.writeFileSync(
+      pagesGeneratedPath,
+      generatePagesModule(allPageFiles, srcDir, pagesGeneratedPath)
+    )
+    const effectivePagesSource = pagesGeneratedPath
+    const ossyDir = ossyGeneratedDir(buildPath)
+    writePageHydrateStubs(allPageFiles, srcDir, ossyDir)
+    const clientHydrateInput = buildClientHydrateInput(allPageFiles, srcDir, ossyDir)
 
     const {
       apiSourcePath: resolvedApi,
       apiOverviewFiles,
     } = resolveApiSource({
-      cwd,
-      pagesOpt,
-      scriptDir,
-      explicitApiSource: options['--api-source'],
+      srcDir,
       buildPath,
     })
     let apiSourcePath = resolvedApi
     let middlewareSourcePath = path.resolve(options['--middleware-source'] || 'src/middleware.js');
     const publicDir = path.resolve('public')
 
-    const inputClient = path.resolve(scriptDir, 'client.js')
     const inputServer = path.resolve(scriptDir, 'server.js')
 
-    const inputFiles = [inputClient, inputServer]
-
     printBuildOverview({
       pagesSourcePath: effectivePagesSource,
       apiSourcePath,
       apiOverviewFiles,
       configPath,
-      isPageFiles,
-      pageFiles: isPageFiles ? [...pageFiles, ...modulePageFiles] : [],
+      pageFiles,
     });
 
-    if (!fs.existsSync(apiSourcePath)) {
-      apiSourcePath = path.resolve(scriptDir, 'api.js')
-    }
-
     if (!fs.existsSync(middlewareSourcePath)) {
       middlewareSourcePath = path.resolve(scriptDir, 'middleware.js')
     }
@@ -110,80 +85,59 @@ export const dev = async (cliArgs) => {
       ? configPath
       : path.resolve(scriptDir, 'default-config.js')
 
-    const pageShellSourcePath = resolvePageShellSource(cwd, scriptDir)
+    const sharedPluginOpts = {
+      pagesGeneratedPath: effectivePagesSource,
+      apiSourcePath,
+      middlewareSourcePath,
+      configSourcePath,
+      nodeEnv: 'development',
+      buildPath,
+    }
+
+    const serverPlugins = createOssyRollupPlugins({
+      ...sharedPluginOpts,
+      nodeExternals: true,
+      preferBuiltins: true,
+      copyPublicFrom: publicDir,
+    })
 
-    const inputOptions = {
-        input: inputFiles,
-        plugins: [
-          ossyCleanBuildDirPlugin(buildPath),
-          // inject({ 'React': 'react' }),
-          replace({
-            preventAssignment: true,
-            delimiters: ['%%', '%%'],
-            '@ossy/app/source-file': path.resolve(scriptDir, 'default-app.jsx'),
-          }),
-          replace({
-            preventAssignment: true,
-            delimiters: ['%%', '%%'],
-            '@ossy/pages/source-file': effectivePagesSource,
-          }),
-          replace({
-            preventAssignment: true,
-            delimiters: ['%%', '%%'],
-            '@ossy/api/source-file': apiSourcePath,
-          }),
-          replace({
-            preventAssignment: true,
-            delimiters: ['%%', '%%'],
-            '@ossy/middleware/source-file': middlewareSourcePath,
-          }),
-          replace({
-            preventAssignment: true,
-            delimiters: ['%%', '%%'],
-            '@ossy/config/source-file': configSourcePath,
-          }),
-          replace({
-            preventAssignment: true,
-            delimiters: ['%%', '%%'],
-            '@ossy/page-shell/source-file': pageShellSourcePath,
-          }),
-          replace({
-            preventAssignment: true,
-            'process.env.NODE_ENV': JSON.stringify('development')
-          }),
-          json(),
-          // removeOwnPeerDependencies(),
-          resolveCommonJsDependencies(),
-          resolveDependencies({ preferBuiltins: true }),
-          babel({
-            babelHelpers: 'bundled',
-          //   exclude: ['**/node_modules/**/*'],
-            presets: ['@babel/preset-env', '@babel/preset-react']
-          }),
-          // preserveDirectives(),
-          // minifyJS(),
-          copy({
-              targets: [
-                fs.existsSync(publicDir)
-                  ? { src: `${publicDir}/**/*`, dest: 'build/public' }
-                  : undefined,
-              ].filter(x => !!x)
-            })
-        ],
-    };
+    const clientPlugins = createOssyRollupPlugins({
+      ...sharedPluginOpts,
+      nodeExternals: false,
+      preferBuiltins: false,
+    })
 
-    const outputOptions = {
-      dir: 'build',
-      // preserveModules: true,
-      entryFileNames: ({ name }) => {
-        const serverFileNames = ['server', 'api', 'middleware']
-        if (serverFileNames.includes(name)) return '[name].js'
-        if (name === 'client') return 'public/static/main.js'
-        if (name === 'config') return 'public/static/[name].js'
+    const serverOutput = {
+      dir: buildPath,
+      format: 'esm',
+      preserveModules: true,
+      preserveModulesRoot: path.dirname(inputServer),
+      entryFileNames ({ name }) {
+        return name === 'server' ? 'server.js' : '[name].js'
+      },
+      assetFileNames: '[name][extname]',
+    }
+
+    const clientOutput = {
+      dir: buildPath,
+      format: 'esm',
+      entryFileNames ({ name }) {
+        if (name.startsWith('hydrate__')) {
+          const pageId = name.slice('hydrate__'.length)
+          return `public/static/hydrate-${pageId}.js`
+        }
         return 'public/static/[name].js'
       },
       chunkFileNames: 'public/static/[name]-[hash].js',
-      format: 'esm',
+    }
+
+    let restartTimer = null
+    const scheduleRestart = () => {
+      clearTimeout(restartTimer)
+      restartTimer = setTimeout(async () => {
+        await triggerReload()
+        restartServer()
+      }, 100)
     }
 
     let serverProcess = null
@@ -218,11 +172,24 @@ export const dev = async (cliArgs) => {
       }
     }
 
-    const watcher = watch({
-      ...inputOptions,
-      output: outputOptions,
-      watch: { clearScreen: false },
-    })
+    const watchConfigs = [
+      {
+        input: { server: inputServer },
+        output: serverOutput,
+        plugins: serverPlugins,
+        external: ossyServerExternal,
+        watch: { clearScreen: false },
+      },
+    ]
+    if (Object.keys(clientHydrateInput).length > 0) {
+      watchConfigs.push({
+        input: clientHydrateInput,
+        output: clientOutput,
+        plugins: clientPlugins,
+        watch: { clearScreen: false },
+      })
+    }
+    const watcher = watch(watchConfigs)
 
     watcher.on('event', async (event) => {
       if (event.code === 'BUNDLE_START') {
@@ -235,18 +202,14 @@ export const dev = async (cliArgs) => {
         console.log(`[@ossy/app][dev] Built in ${event.duration}ms`)
       }
       if (event.code === 'END') {
-        await triggerReload()
-        restartServer()
+        scheduleRestart()
       }
     })
 
     const regenApiBundle = () => {
       if (options['--api-source']) return
       resolveApiSource({
-        cwd,
-        pagesOpt,
-        scriptDir,
-        explicitApiSource: undefined,
+        srcDir,
         buildPath,
       })
       const gen = path.join(ossyGeneratedDir(buildPath), OSSY_GEN_API_BASENAME)
@@ -258,18 +221,28 @@ export const dev = async (cliArgs) => {
     fs.watch(srcDir, { recursive: true }, (eventType, filename) => {
       if (!filename) return
       if (/\.page\.(jsx?|tsx?)$/.test(filename)) {
-        if (!isPageFiles) return
-        const files = discoverPageFiles(srcDir)
-        if (files.length > 0) {
-          const pagesGeneratedPath = path.join(ossyGeneratedDir(buildPath), OSSY_GEN_PAGES_BASENAME)
-          fs.writeFileSync(
-            pagesGeneratedPath,
-            generatePagesModule(files, cwd, pagesOpt, pagesGeneratedPath)
-          )
+        const combined = [...discoverPageFiles(srcDir), ...modulePageFiles]
+        const regenPath = path.join(ossyGeneratedDir(buildPath), OSSY_GEN_PAGES_BASENAME)
+        fs.writeFileSync(regenPath, generatePagesModule(combined, srcDir, regenPath))
+        writePageHydrateStubs(combined, srcDir, ossyDir)
+        if (typeof watcher?.invalidate === 'function') {
+          watcher.invalidate(regenPath)
+          for (const f of combined) {
+            const hid = clientHydrateIdForPage(f, srcDir)
+            watcher.invalidate(path.join(ossyDir, `hydrate-${hid}.jsx`))
+          }
         }
       }
-      if (/\.api\.(mjs|cjs|js)$/.test(filename) || /(^|\/)api\.js$/.test(filename.replace(/\\/g, '/'))) {
+      if (/\.api\.(mjs|cjs|js)$/.test(filename)) {
         regenApiBundle()
       }
+      const norm = filename.replace(/\\/g, '/')
+      if (/\.resource\.js$/.test(norm) && norm.includes('resource-templates/')) {
+        writeResourceTemplatesBarrelIfPresent({ cwd: process.cwd(), log: true })
+        const rtOut = path.join(resourceTemplatesDir(process.cwd()), OSSY_RESOURCE_TEMPLATES_OUT)
+        if (fs.existsSync(rtOut) && typeof watcher?.invalidate === 'function') {
+          watcher.invalidate(rtOut)
+        }
+      }
     })
 };

package/cli/server.js

@@ -1,20 +1,24 @@
 import path from 'path';
 import url from 'url'
-import React, { createElement } from 'react';
+import React, { cloneElement } from 'react';
 import express from 'express'
 import morgan from 'morgan'
-import { Router } from '@ossy/router'
+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 App from '%%@ossy/app/source-file%%'
+import pages from '%%@ossy/pages/source-file%%'
 import ApiRoutes from '%%@ossy/api/source-file%%'
 import Middleware from '%%@ossy/middleware/source-file%%'
 import configModule from '%%@ossy/config/source-file%%'
 
 const buildTimeConfig = configModule?.default ?? configModule ?? {}
 
+/** `api.generated.js` is always present; default may still be empty. */
+const apiRouteList = ApiRoutes ?? []
+const pageList = pages ?? []
+
 const app = express();
 
 const currentDir = path.dirname(url.fileURLToPath(import.meta.url))
@@ -104,16 +108,18 @@ const middleware = [
 
 app.use(middleware)
 
-const ApiRouter = Router.of({ pages: ApiRoutes || [] })
+const Router = OssyRouter.of({
+  pages: [...apiRouteList, ...pageList]
+})
 
 app.all('*all', (req, res) => {
   const pathname = req.originalUrl
 
-  const apiRoute = ApiRouter.getPageByUrl(pathname)
+  const route = Router.getPageByUrl(pathname)
 
-  if (apiRoute) {
+  if (route && typeof route.handle === 'function') {
     console.log(`[@ossy/app][server] Handling API route: ${pathname}`)
-    apiRoute.handle(req, res)
+    route.handle(req, res)
     return
   }
 
@@ -130,25 +136,32 @@ app.all('*all', (req, res) => {
     sidebarPrimaryCollapsed: userAppSettings.sidebarPrimaryCollapsed === true,
   }
 
-  renderToString(App, appConfig)
+  if (!route?.element) {
+    res.status(404).send('Not found')
+    return
+  }
+
+  prerenderHtmlDocument(cloneElement(route.element, appConfig), appConfig, route.id)
     .then(html => { res.send(html) })
     .catch(err => { res.send(err) })
 
-});
+})
 
 app.listen(port, () => {
   console.log(`[@ossy/app][server] Running on http://localhost:${port}`);
 });
 
-async function renderToString(App, config) {
+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 { prelude } = await prerenderToNodeStream(createElement(App, config), {
+  const hydrateUrl = `/static/hydrate-${pageId}.js`
+
+  const { prelude } = await prerenderToNodeStream(rootElement, {
     bootstrapScriptContent: `window.__INITIAL_APP_CONFIG__ = ${JSON.stringify(config)};${devReloadScript}`,
-    bootstrapModules: ['/static/main.js']
+    bootstrapModules: [hydrateUrl]
   });
 
   return new Promise((resolve, reject) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ossy/app",
-  "version": "0.15.13",
+  "version": "1.0.1",
   "description": "",
   "source": "./src/index.js",
   "main": "./src/index.js",
@@ -22,18 +22,17 @@
     "@babel/cli": "^7.26.4",
     "@babel/core": "^7.26.0",
     "@babel/eslint-parser": "^7.15.8",
-    "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.26.3",
     "@babel/register": "^7.25.9",
-    "@ossy/connected-components": ">=0.5.0 <1.0.0",
-    "@ossy/design-system": ">=0.5.0 <1.0.0",
-    "@ossy/pages": ">=0.5.0 <1.0.0",
-    "@ossy/resource-templates": ">=0.5.0 <1.0.0",
-    "@ossy/router": ">=0.5.0 <1.0.0",
-    "@ossy/router-react": ">=0.5.0 <1.0.0",
-    "@ossy/sdk": ">=0.5.0 <1.0.0",
-    "@ossy/sdk-react": ">=0.5.0 <1.0.0",
-    "@ossy/themes": ">=0.5.0 <1.0.0",
+    "@ossy/connected-components": ">=1.0.0 <2.0.0",
+    "@ossy/design-system": ">=1.0.0 <2.0.0",
+    "@ossy/pages": ">=1.0.0 <2.0.0",
+    "@ossy/resource-templates": ">=1.0.0 <2.0.0",
+    "@ossy/router": ">=1.0.0 <2.0.0",
+    "@ossy/router-react": ">=1.0.0 <2.0.0",
+    "@ossy/sdk": ">=1.0.0 <2.0.0",
+    "@ossy/sdk-react": ">=1.0.0 <2.0.0",
+    "@ossy/themes": ">=1.0.0 <2.0.0",
     "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-babel": "6.1.0",
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -41,7 +40,6 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.2",
-    "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "^12.3.0",
     "arg": "^5.0.2",
     "babel-loader": "^10.0.0",
@@ -57,7 +55,8 @@
     "rollup-plugin-node-externals": "^8.1.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss-modules": "^2.1.1",
-    "rollup-plugin-preserve-directives": "^0.4.0"
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "terser": "^5.17.4"
   },
   "files": [
     "/cli",
@@ -66,5 +65,5 @@
     "README.md",
     "tsconfig.json"
   ],
-  "gitHead": "280ce1f62d7daf721909ac5eabe4181991e00456"
+  "gitHead": "e5276fdb5dedf68b966d851077461b188c613241"
 }

package/scripts/ensure-build-stubs.mjs

@@ -3,11 +3,10 @@ import path from 'path'
 import { fileURLToPath } from 'url'
 
 const STUBS = [
-  ['api.js', 'export default []\n'],
   ['middleware.js', 'export default []\n'],
 ]
 
-/** Ensures build/api.js and build/middleware.js exist when Rollup omits empty chunks. */
+/** Ensures build/middleware.js exists when Rollup omits an empty middleware chunk. */
 export function ensureBuildStubs(buildDir) {
   if (!fs.existsSync(buildDir)) {
     console.warn(`[ensure-build-stubs] skip: ${buildDir} missing`)

package/src/index.js

@@ -1,2 +1,7 @@
-export { build, buildWorker } from '../cli/build.js'
+export {
+  build,
+  writeResourceTemplatesBarrelIfPresent,
+  resourceTemplatesDir,
+  OSSY_RESOURCE_TEMPLATES_OUT,
+} from '../cli/build.js'
 export { dev } from '../cli/dev.js'

package/cli/Api.js

@@ -1,3 +0,0 @@
-// dummy file so it can be imported
-
-export default undefined

package/cli/client.js

@@ -1,8 +0,0 @@
-import React, { createElement } from 'react'
-import 'react-dom'
-import { hydrateRoot } from 'react-dom/client';
-import App from '%%@ossy/app/source-file%%'
-
-const initialConfig = window.__INITIAL_APP_CONFIG__ || {}
-
-hydrateRoot(document, createElement(App, initialConfig))

package/cli/default-app.jsx

@@ -1,11 +0,0 @@
-import React from 'react'
-import { App } from '@ossy/connected-components'
-import pages from '%%@ossy/pages/source-file%%'
-import pageShell from '%%@ossy/page-shell/source-file%%'
-
-/**
- * App entry. Uses App from @ossy/connected-components with pages from src/pages.jsx.
- */
-export default function DefaultApp (config) {
-  return React.createElement(App, { ...config, pages, pageShell })
-}

package/cli/page-shell-default.jsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-/**
- * Used when the site has no `src/page-shell.jsx`.
- * Module pages still call {@link usePageShell} but get a passthrough.
- */
-export default function PageShellDefault ({ children }) {
-  return children
-}