@ossy/app 0.7.16 → 0.8.0

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,6 +17,9 @@ 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')
@@ -42,6 +45,34 @@ 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 }),
@@ -99,8 +130,12 @@ app.listen(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.16",
+  "version": "0.8.0",
   "description": "",
   "source": "./src/index.js",
   "main": "./src/index.js",
@@ -58,5 +58,5 @@
     "/cli",
     "README.md"
   ],
-  "gitHead": "2a788e4868aa7ed2b0bc9869533f926d4cf6828a"
+  "gitHead": "4aa6bd438e39babbb136f388aa7b5df9ba701144"
 }