noxt-server 0.1.14 → 0.1.16

package/units/noxt-plugin.js

@@ -1,125 +1,125 @@
 export const info = {
   name: 'noxt-plugin',
   description: 'Noxt Plugin',
-  requires: ['express','#noxt-router'],
+  requires: ['express'],
 }
 
-const pageContextHooks = {};
-const serverContextHooks = {};
-const componentExportsHooks = {};
-const registerPageHooks = {};
-const registerComponentHooks = {};
 
 export default mlm => {
+  const requestApi = {};
+  const componentErrorHooks = {};
+  const requestContextHooks = {};
+  const serverContextHooks = {};
+  const componentExportsHooks = [];
+  const registerPageHooks = {};
+  const registerComponentHooks = {};
+  const componentChangedHooks = {}
 
-  const collector = (coll, desc) => (conf, unit) => {
-    for (const key in conf) {
-      const fn = conf[key];
-      mlm.assert.is.function(fn, desc);
-      mlm.assert.not(key in coll, 'Duplicate ' + desc + ' ' + key);
-      coll[key] = ({ fn, unit: unit.name });
-    }
-  }
-
-  const runner = (
-    coll, each = (_, fn, ...args) => fn(...args)
-  ) => async (...args) => {
-    for (const key in coll) {
-      const { fn } = coll[key];
-      await each(key, fn, ...args);
-    }
-  }
-
-  const arrayCollector = (coll, desc) => (conf, unit) => {
-    for (const key in conf) {
-      const fn = conf[key];
-      mlm.assert.is.function(fn, desc);
-      coll[key] ??= [];
-      coll[key].push({ fn, unit: unit.name });
-    }
-  }
-
-  const arrayRunner = (
-    coll, each = (_, fn, ...args) => fn(...args)
-  ) => async (...args) => {
-    for (const key in coll) {
-      const handlers = coll[key];
-      for (const handler of handlers) {
-        await each(key, handler.fn, ...args);
-      }
-    }
-  }
   const globalServerContext = {};
   return ({
-    'register.pageContext': arrayCollector(pageContextHooks, 'page context handler'),
-    'register.serverContext': arrayCollector(serverContextHooks, 'server context handler'),
-    'register.componentExports': arrayCollector(componentExportsHooks, 'page export handler'),
-    'register.registerPage': collector(registerPageHooks, 'register page handler'),
-    'register.registerComponent': collector(registerComponentHooks, 'register component handler'),
-    'define.noxt_context': {
-      get: () => globalServerContext,
-      enumerable: true
+    'collect.requestContext': {
+      target: requestContextHooks,
+      is: 'function',
+      mode: 'object'
+    },
+    'collect.api': {
+      target: requestApi,
+      is: 'function',
+      mode: 'object',
+    },
+    'requestContext.api': ({ ctx }) => new Proxy({}, {
+      ownKeys: () => Object.keys(requestApi),
+      get: (target, key) => (target[key] ??= requestApi[key]?.({ctx}))
+    }),
+    'collect.componentExports': {
+      target: componentExportsHooks,
+      is: 'object',
+      mode: 'array'
+    },
+    'collect.serverContext': {
+      target: serverContextHooks,
+      is: 'function',
+      mode: 'object'
+    },
+    'collect.registerPage': {
+      target: registerPageHooks,
+      is: 'function',
+      mode: 'object',
     },
+    'collect.registerComponent': {
+      target: registerComponentHooks,
+      is: 'function',
+      mode: 'object',
+    },
+    'collect.componentChanged': {
+      target: componentChangedHooks,
+      is: 'function',
+      mode: 'object',
+    },
+    'collect.componentError': {
+      target: componentErrorHooks,
+      is: 'function',
+      mode: 'object',
+    },
+    'serverContext.services': () => mlm.services,
     'serverContext.utils': () => mlm.utils,
     'serverContext.DEV': () => mlm.DEV,
     'serverContext.PROD': () => mlm.PROD,
     onStart: async () => {
-      mlm.services.noxt.noxt_context({ ctx: globalServerContext });
-      //mlm.log('ctx', mlm.serverContext);
+      const ctx = globalServerContext;
+      for (const key in serverContextHooks) {
+        ctx[key] = await serverContextHooks[key]({ ctx });
+      }
     },
-    'services.noxt': () => new class PluginService {
-      noxt_context = arrayRunner(serverContextHooks,
-        async (key, fn, { ctx }) => ctx[key] = await fn({ ctx })
-      );
-
-      noxt_hooks = {
-        beforeRequest: [
-          ({ ctx }) => {
-            Object.assign(ctx, mlm.noxt_context);
+    'services.noxt': () => new class NoxtPluginService {
+      get context() {
+        return globalServerContext;
+      }
+      get hooks() {
+        return {
+          beforeRequest: async ({ ctx }) => {
+            Object.assign(ctx, this.context);
+            for (const key in requestContextHooks) {
+              ctx[key] = await requestContextHooks[key]({ ctx });
+            }
           },
-          arrayRunner(pageContextHooks,
-            async (key, fn, args) => {
-              args.ctx[key] = await fn(args)
+          beforeRender: async ({ ...args }) => {
+            for (const item of componentExportsHooks) {
+              for (const key in item) {
+                if (!(key in args.module)) continue;
+                await item[key]({ exported: args.module[key], ...args });
+              }
+            }
+          },
+          registerPage: async ({ module, component }) => {
+            for (const fn of Object.values(registerPageHooks)) {
+              await fn({ module, component });
+            }
+          },
+          registerComponent: async (...args) => {
+            for (const fn of Object.values(registerComponentHooks)) {
+              await fn(...args);
+            }
+          },
+          componentChanged: async ({ module, component }) => {
+            for (const fn of Object.values(componentChangedHooks)) {
+              await fn({ module, component });
+            }
+          },
+          componentError: async ({ name, error }) => {
+            for (const fn of Object.values(componentErrorHooks)) {
+              await fn({ name, error });
             }
-          ),
-        ],
-        beforeRender: arrayRunner(componentExportsHooks,
-          async (key, fn, { module, props, ctx }) => {
-            //mlm.log('beforeRender', unit, key, Object.keys(props));
-            if (!(key in module)) return;
-            const exported = module[key];
-            await fn({ exported, props, ctx, module })
-            //mlm.log('beforeRender', key, Object.keys(props));
-          }
-        ),
-        registerPage: runner(registerPageHooks,
-          async (key, fn, { module, component }) => {
-            await fn({ module, component })
-          }
-        ),
-        registerComponent: runner(registerComponentHooks,
-          async (key, fn, { module, component }) => {
-            await fn({ module, component })
           }
-        )
-      }
-
-      report() {
-        return {
-          pageContext: pageContextHooks,
-          serverContext: serverContextHooks,
-          componentExports: componentExportsHooks,
-          registerPage: registerPageHooks,
-          registerComponent: registerComponentHooks
         }
       }
     },
     'registerPage.Link'({ component, module }) {
       const As = module.Link ?? 'a';
-      component.Link = ({ text, children, attrs, ...props }, ctx) => {
-        const href = component.getRoutePath(props, ctx);
-        return { type: As, props: { ...attrs, href, children: text ?? children }  };
+      component.Link = ({ text, children, params={}, ...attrs }, ctx) => {
+        const href = component.getRoutePath(params, ctx);
+        return { type: As, props: { ...attrs, href, children: text ?? children } };
       }
-    }
+    },
   })
 }

package/units/noxt-router.js

@@ -1,11 +1,11 @@
 export const info = {
   name: 'noxt-router',
   description: 'Sets up a Noxt Router',
-  requires: ['plugin'],
+  requires: ['noxt-plugin'],
   provides: ['#noxt-router'],
-  npm: {
-    'noxt-js-middleware': '^1.0.4'
-  },
+  packages: {
+    noxt: 'noxt-js-middleware'
+  }
 }
 
 export default mlm => ({
@@ -14,13 +14,30 @@ export default mlm => ({
     is: ['string'],
     default: ['views']
   },
-  'middleware.noxt': async (app) => {
-    const { default: noxt } = await mlm.import('noxt-js-middleware');
+  'prod.middleware.noxt': async (app) => {
+    const { default: noxt } = mlm.packages.noxt;
+    const noxtRouter = await noxt({
+      context: mlm.services.noxt.context,
+      views: mlm.config.views,
+      hooks: mlm.services.noxt.hooks,
+    })
+    return noxtRouter
+  },
+  'dev.middleware.noxt': async (app) => {
+    const { default: noxt } = mlm.packages.noxt;
     const noxtRouter = await noxt({
-      context: mlm.noxt_context,
+      context: mlm.services.noxt.context,
       views: mlm.config.views,
-      hooks: mlm.services.noxt.noxt_hooks
+      hooks: mlm.services.noxt.hooks,
+      watch: true
     })
     return noxtRouter
   },
+  'dev.componentChanged.reload': ({ name, component }) => {
+    mlm.services.reload.refresh();
+  },
+  'dev.componentError.reload': async ({ name, error }) => {
+    mlm.services.reload.error(error);
+  },
+  'dev.requestContext.reload': ({ ctx }) => ctx.slot('script', 'noxt-reload', '/_reload.js'),
 })

package/units/noxt.js

@@ -5,9 +5,11 @@ export const info = {
   requires: [
     'express', 
     'logger',
+    'compression',
     'static', 
+    'bundler',
     'noxt-router',
     'fetch-cache-fs', 
     'fetch',
   ],
-}
+}

package/units/plugin.js

@@ -1,6 +1,6 @@
 export const info = {
   name: 'plugin',
   version: '1.0.0',
-  description: 'Base',
+  description: 'Plugin base',
   requires: ['env','utils','services','hooks','config']
 }

package/units/reload.js

@@ -1,24 +1,28 @@
 export const info = {
   name: 'reload',
   description: 'Hot reload middleware',
-  requires: ['noxt-plugin'],
-  npm: {
-    'express': '^5.0.0',
-  },
+  requires: ['express'],
+  provides: ['#reload'],
 }
 
 const clients = new Set();
 export default mlm => ({
-  'pageContext.reload': ({ ctx }) => ctx.slot('script', 'noxt-reload', '/_reload.js'),
+  'services.reload': () => ({
+    refresh: forceReload,
+    error: sendError
+  }),
+  'define.refresh': () => forceReload,
+  'define.error': () => sendError,
   'middleware.reload': async () => {
-    const { default: express } = await mlm.import('express');
-    const router = express.Router();
+    const router = mlm.services.express.Router();
     router.get('/_reload.js', (req, res) => {
+      res.logGroup = 'reload';
       res.set('Content-Type', 'text/javascript');
       res.send(reloadJs);
     });
 
     router.get('/_events', (req, res) => {
+      res.logGroup = 'reload';
       res.writeHead(200, {
         'Content-Type': 'text/event-stream',
         'Cache-Control': 'no-cache',
@@ -34,10 +38,9 @@ export default mlm => ({
       req.on('error', () => clients.delete(res));
       res.on('error', () => clients.delete(res));
     });
-
     return router
   },
-  onStart() {
+   onStart() {
     process.on('SIGUSR2', handleSignal)
   },
   onStop() {
@@ -45,6 +48,27 @@ export default mlm => ({
   }
 })
 
+async function forceReload() {
+  const promises = Array.from(clients).map(async client => {
+    client.write('event: refresh\ndata:\n\n');
+    return new Promise(resolve => client.end(resolve));
+  });
+  await Promise.all(promises);
+}
+
+async function sendError(error) {
+  const errorData = {
+    message: error.message,
+    stack: error.stack,
+    name: error.name
+  };
+  const data = JSON.stringify(errorData).replace(/\n/g, '\\n');
+
+  clients.forEach(client => {
+    client.write(`event: error\ndata: ${data}\n\n`);
+  });
+}
+
 async function handleSignal() {
   const promises = Array.from(clients).map(async client => {
     client.write('event: reload\ndata:\n\n');
@@ -52,11 +76,13 @@ async function handleSignal() {
   });
   await Promise.all(promises);
   process.exit(0);
-};
+}
 
 const reloadJs = `
-  const eventSource = new EventSource('/_events');
+const eventSource = new EventSource('/_events');
 let reload = false;
+let errorOverlay = null;
+
 eventSource.addEventListener('connected', () => {
   if (reload) {
     console.log('%c NOXT ','color: #ffd; background-color: #080', 'Reloading...' );
@@ -64,13 +90,76 @@ eventSource.addEventListener('connected', () => {
   } else {
     console.log('%c NOXT ', 'color: #ffd; background-color: #080', 'Connected.' );
   }
-
+  hideError();
 });
+
 eventSource.addEventListener('reload', () => {
   console.log('%c NOXT ','color: #ffd; background-color: #080', 'Restarting...' );
   reload = true;
 });
+
+eventSource.addEventListener('refresh', () => {
+  console.log('%c NOXT ','color: #ffd; background-color: #080', 'Refresh...' );
+  window.location.reload();
+});
+
+eventSource.addEventListener('error', (e) => {
+  const error = JSON.parse(e.data);
+  console.error('%c NOXT ','color: #ffd; background-color: #f00', 'Error:', error.message);
+  showError(error);
+});
+
 window.addEventListener('beforeunload', () => {
   eventSource.close();
 });
+
+function showError(error) {
+  hideError();
+  
+  errorOverlay = document.createElement('dialog');
+  errorOverlay.style.cssText = \`
+    position: fixed;
+    top: 0;
+    max-width: 100vw;
+    max-height: 100vh;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 20px;
+    background: rgba(0, 0, 0, 0.95);
+    color: #fff;
+    border: none;
+    font-family: monospace;
+    overflow: auto;
+  \`;
+  
+  errorOverlay.innerHTML = \`
+    <h1 style="color: #f00; margin: 0 0 1em 0;">\${error.name || 'Error'}</h1>
+    <p style="font-size: 16px; margin-bottom: 1em;">\${error.message}</p>
+    <pre style="font-size: 14px; white-space: pre-wrap; overflow-x: auto;">\${error.stack || ''}</pre>
+  \`;
+  
+  document.body.appendChild(errorOverlay);
+  errorOverlay.showModal();
+  
+  errorOverlay.addEventListener('click', (e) => {
+    if (e.target === errorOverlay) hideError();
+  });
+  
+  const closeHandler = (e) => {
+    if (e.key === 'Escape') {
+      hideError();
+      document.removeEventListener('keydown', closeHandler);
+    }
+  };
+  document.addEventListener('keydown', closeHandler);
+}
+
+function hideError() {
+  if (errorOverlay) {
+    errorOverlay.close();
+    errorOverlay.remove();
+    errorOverlay = null;
+  }
+}
 `

package/units/services.js

@@ -5,17 +5,21 @@ export const info = {
   requires: ['utils']
 }
 
-const services = {}
 
-export default mlm => ({
-  'define.services': () => mlm.utils.readOnly(services, 'services'),
-  'register.services': mlm.utils.collector(services, {
-    is: 'function',
-    mode: 'object',
-    map: (fn, key) => {
-      const service = fn(mlm)
-      mlm.assert.is.object(service, 'service');
-      return service
+export default mlm => {
+  const services = {}
+
+  return {
+    'define.services': () => mlm.utils.readOnly(services, 'services'),
+    'collect.services': {
+      target: services,
+      is: 'function',
+      mode: 'object',
+      map: (fn, key) => {
+        const service = fn(mlm)
+        mlm.assert.is.object(service, 'service');
+        return service
+      }
     }
-  }),
-})
+  }
+}

package/units/static.js

@@ -2,20 +2,48 @@ export const info = {
   name: 'static',
   description: 'Static middleware',
   requires: ['express'],
-  npm: {
-    'serve-static': '^1.15.0'
-  },
+  packages: ['express']
 }
 
-export default mlm => ({
-  'config.static': {
-    is: 'string',
-    default: 'public'
-  },
-  'middleware.static': async (app) => {
-     const { default: serve_static } = await mlm.import('serve-static');
-     const { resolve } = await mlm.import('path');
-     const dir = mlm.config.static;
-     return serve_static(resolve(dir));
-  },
-})
+import { resolve } from 'path';
+import fs from 'fs';
+
+export default mlm => {
+  let watcher;
+  return {
+    'config.static': {
+      is: 'string',
+      default: 'public',
+    },
+
+    'prod.middleware.static': async () => {
+      const dir = mlm.config.static;
+      if (!dir) return null;
+      return mlm.packages.express.static(resolve(dir), {
+        setHeaders: res => res.logGroup = 'static',
+      });
+    },
+    'dev.middleware.static': async () => {
+      const dir = mlm.config.static;
+      if (!dir) return null;
+      return mlm.packages.express.static(resolve(dir), {
+        etag: false,
+        cacheControl: false,
+        setHeaders: res => res.logGroup = 'static',
+      });
+    },
+    'dev.onStart'() {
+      const dir = mlm.config.static;
+      if (!dir) return;
+      watcher = fs.watch(dir, { recursive: true }, mlm.utils.debounce(() => {
+        mlm.services.reload.refresh()
+      }, 50))
+    },
+    'dev.onStop'() {
+      if (watcher) {
+        watcher.close();
+        watcher = null;
+      }
+    }
+  }
+}

package/units/utils.js

@@ -7,6 +7,13 @@ export const info = {
 export default mlm => {
 
   const utils = {};
+  utils.debounce = (fn, delay) => {
+    let timeout;
+    return (...args) => {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => fn(...args), delay);
+    }
+  }
   utils.eval = (fn, ...args) => typeof fn === 'function' ? fn(...args) : fn;
   utils.readOnly = (obj, { label = 'object' } = {}) => new Proxy(obj, {
     get: (t, k) => t[k],
@@ -20,7 +27,7 @@ export default mlm => {
   } = {}) => {
     const modes = {
       array: () => source => {
-        for (let value of source) {
+        for (let value of [].concat(source)) {
           if (filter && !filter(value)) continue;
           if (is) mlm.assert.is(is, value, label);
           if (map) value = map(value);
@@ -71,8 +78,18 @@ export default mlm => {
     mlm.assert(mode in modes, 'Unknown mode ' + mode);
     return modes[mode]();
   }
+  
   return ({
     'define.utils': () => utils.readOnly(utils, 'utils'),
     'register.utils': utils.collector(utils, { is: 'function', mode: 'object', map: (fn, key) => { mlm.log('utils', key); return fn; } }),
+    'inject.collect': async (confs,unit) => {
+      const ret = {}
+      for (const key in confs) {
+        const { target, ...conf } = confs[key];
+        conf.label = key;
+        ret[key] = utils.collector(target, conf);
+      }
+      return {register:ret}
+    },
   })
 }