@ossy/app 0.7.15 → 0.8.0

package/README.md

@@ -0,0 +1,22 @@
+# `@ossy/app`
+
+Server-side rendering runtime for Ossy apps.
+
+## Port configuration
+
+By default, the server listens on port **3000**.
+
+- **Environment variable**: set `PORT`
+- **CLI argument**: pass `--port <number>` (or `-p <number>`) when running the built server file
+
+Examples:
+
+```bash
+# env var
+PORT=4000 node build/server.js
+
+# CLI arg
+node build/server.js --port 4000
+node build/server.js -p 4000
+```
+

package/cli/dev.js

@@ -1,7 +1,7 @@
 import path from 'path';
 import url from 'url';
 import fs from 'fs';
-import { rollup } from 'rollup';
+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'
@@ -14,10 +14,11 @@ import copy from 'rollup-plugin-copy';
 import replace from '@rollup/plugin-replace';
 import remove from 'rollup-plugin-delete';
 import arg from 'arg'
+import { spawn } from 'node:child_process'
 // import inject from '@rollup/plugin-inject'
 
 export const dev = async (cliArgs) => {
-    console.log('[@ossy/app][build] Starting...')
+    console.log('[@ossy/app][dev] Starting...')
 
     const options = arg({
         '--source': String,
@@ -28,12 +29,12 @@ export const dev = async (cliArgs) => {
     
         '--config': String,
         '-c': '--config',
-      }, { argv: cliArgs })
+      }, { argv: cliArgs, permissive: true })
 
 
     const appSourcePath = path.resolve(options['--source'] || 'src/App.jsx');
-    let apiSourcePath = path.resolve(options['--api-source'] || 'src/Api.js');
-    let middlewareSourcePath = path.resolve(options['--middleware-source'] || 'src/Middleware.js');
+    let apiSourcePath = path.resolve(options['--api-source'] || 'src/api.js');
+    let middlewareSourcePath = path.resolve(options['--middleware-source'] || 'src/middleware.js');
     const configPath = path.resolve(options['--config'] || 'src/config.js');
     const buildPath = path.resolve(options['--destination'] || 'build');
     const publicDir = path.resolve('public')
@@ -49,11 +50,11 @@ export const dev = async (cliArgs) => {
     }
 
     if (!fs.existsSync(apiSourcePath)) {
-      apiSourcePath = path.resolve(scriptDir, 'Api.js')
+      apiSourcePath = path.resolve(scriptDir, 'api.js')
     }
 
     if (!fs.existsSync(middlewareSourcePath)) {
-      apiSourcePath = path.resolve(scriptDir, 'Middleware.js')
+      middlewareSourcePath = path.resolve(scriptDir, 'middleware.js')
     }
 
     if (fs.existsSync(configPath)) {
@@ -78,11 +79,11 @@ export const dev = async (cliArgs) => {
           replace({
             preventAssignment: true,
             delimiters: ['%%', '%%'],
-            '@ossy/middleware/source-file': apiSourcePath,
+            '@ossy/middleware/source-file': middlewareSourcePath,
           }),
           replace({
             preventAssignment: true,
-            'process.env.NODE_ENV': JSON.stringify('production')
+            'process.env.NODE_ENV': JSON.stringify('development')
           }),
           json(),
           // removeOwnPeerDependencies(),
@@ -105,33 +106,71 @@ export const dev = async (cliArgs) => {
         ],
     };
 
-    const outputOptions = [
-        {
-            dir: 'build',
-            // preserveModules: true,
-            entryFileNames: ({ name }) => {
-              if (name === 'server') {
-                return '[name].js'
-              } else if (name === 'Api') {
-                return '[name].js'
-              } else if (name === 'client') {
-                return 'public/static/main.js'
-              } else if (name === 'config') {
-                return 'public/static/[name].js'
-              } else {
-                return 'public/static/[name].js'
-              }
-            },
-            chunkFileNames: 'public/static/[name]-[hash].js',
-            format: 'esm',
-        }
-    ];
-
-    const bundle = await rollup.watch(inputOptions);
-
-    for (const options of outputOptions) {
-        await bundle.write(options);
+    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'
+        return 'public/static/[name].js'
+      },
+      chunkFileNames: 'public/static/[name]-[hash].js',
+      format: 'esm',
     }
 
-    console.log('[@ossy/app][build] Finished');
+    let serverProcess = null
+    const startServer = () => {
+      if (serverProcess) return
+      serverProcess = spawn(process.execPath, [path.resolve(buildPath, 'server.js'), ...process.argv.slice(3)], {
+        stdio: 'inherit',
+        env: {
+          ...process.env,
+          OSSY_DEV_RELOAD: '1',
+          NODE_ENV: 'development',
+        },
+      })
+      serverProcess.on('exit', () => {
+        serverProcess = null
+      })
+    }
+
+    const restartServer = () => {
+      if (!serverProcess) return startServer()
+      serverProcess.kill('SIGTERM')
+      serverProcess = null
+      startServer()
+    }
+
+    const triggerReload = async () => {
+      const port = process.env.PORT || '3000'
+      try {
+        await fetch(`http://localhost:${port}/__ossy_reload`, { method: 'POST' })
+      } catch {
+        // server might not be up yet
+      }
+    }
+
+    const watcher = watch({
+      ...inputOptions,
+      output: outputOptions,
+      watch: { clearScreen: false },
+    })
+
+    watcher.on('event', async (event) => {
+      if (event.code === 'BUNDLE_START') {
+        console.log('[@ossy/app][dev] Building...')
+      }
+      if (event.code === 'ERROR') {
+        console.error('[@ossy/app][dev] Build error', event.error)
+      }
+      if (event.code === 'BUNDLE_END') {
+        console.log(`[@ossy/app][dev] Built in ${event.duration}ms`)
+      }
+      if (event.code === 'END') {
+        await triggerReload()
+        restartServer()
+      }
+    })
 };

package/cli/server.js

@@ -17,10 +17,62 @@ const app = express();
 const currentDir = path.dirname(url.fileURLToPath(import.meta.url))
 const ROOT_PATH = path.resolve(currentDir, 'public')
 
+const isDevReloadEnabled = process.env.OSSY_DEV_RELOAD === '1'
+const reloadClients = new Set()
+
+function parsePortFromArgv(argv) {
+  // Supports: --port 4000, --port=4000, -p 4000
+  const idx = argv.findIndex(a => a === '--port' || a === '-p')
+  if (idx !== -1 && argv[idx + 1]) return argv[idx + 1]
+
+  const eq = argv.find(a => a.startsWith('--port='))
+  if (eq) return eq.split('=')[1]
+
+  return undefined
+}
+
+function normalizePort(value, fallback) {
+  if (value === undefined || value === null || value === '') return fallback
+  const n = Number.parseInt(String(value), 10)
+  if (!Number.isFinite(n) || n <= 0) return fallback
+  return n
+}
+
+const DEFAULT_PORT = 3000
+const port = normalizePort(parsePortFromArgv(process.argv) ?? process.env.PORT, DEFAULT_PORT)
+
 if (Middleware !== undefined) {
   console.log(`[@ossy/app][server] ${Middleware?.length || 0} custom middleware loaded`)
 }
 
+if (isDevReloadEnabled) {
+  app.get('/__ossy_reload', (req, res) => {
+    res.status(200)
+    res.setHeader('Content-Type', 'text/event-stream')
+    res.setHeader('Cache-Control', 'no-cache')
+    res.setHeader('Connection', 'keep-alive')
+    res.flushHeaders?.()
+
+    res.write('event: connected\ndata: ok\n\n')
+    reloadClients.add(res)
+
+    req.on('close', () => {
+      reloadClients.delete(res)
+    })
+  })
+
+  app.post('/__ossy_reload', (req, res) => {
+    for (const client of reloadClients) {
+      try {
+        client.write('event: reload\ndata: now\n\n')
+      } catch {
+        // ignore broken connections
+      }
+    }
+    res.status(204).end()
+  })
+}
+
 const middleware = [
   morgan('tiny'),
   express.json({ strict: false }),
@@ -72,14 +124,18 @@ app.all('*all', (req, res) => {
 
 });
 
-app.listen(3000, () => {
-  console.log('[@ossy/app][server] Running on http://localhost:3000');
+app.listen(port, () => {
+  console.log(`[@ossy/app][server] Running on http://localhost:${port}`);
 });
 
 async function renderToString(App, config) {
 
+  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), {
-    bootstrapScriptContent: `window.__INITIAL_APP_CONFIG__ = ${JSON.stringify(config)};`,
+    bootstrapScriptContent: `window.__INITIAL_APP_CONFIG__ = ${JSON.stringify(config)};${devReloadScript}`,
     bootstrapModules: ['/static/main.js']
   });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ossy/app",
-  "version": "0.7.15",
+  "version": "0.8.0",
   "description": "",
   "source": "./src/index.js",
   "main": "./src/index.js",
@@ -58,5 +58,5 @@
     "/cli",
     "README.md"
   ],
-  "gitHead": "21c4dab2e75921f8fc6a8bed03b85f73833ec817"
+  "gitHead": "4aa6bd438e39babbb136f388aa7b5df9ba701144"
 }