mnfst-run 1.0.2 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mnfst-run",
-  "version": "1.0.2",
+  "version": "1.0.6",
   "description": "Zero-dependency dev server for Manifest projects",
   "type": "module",
   "bin": {
@@ -9,7 +9,6 @@
   "files": [
     "bin",
     "serve.mjs",
-    "idiomorph.min.js",
     "README.md"
   ],
   "publishConfig": {

package/serve.mjs

@@ -3,27 +3,32 @@
  * mnfst-run — zero-dependency dev server for Manifest projects.
  *
  * Usage:
- *   npx mnfst-run [dir] [--port 5001]
+ *   npx mnfst-run [dir] [--port 5001] [--idle-shutdown 30] [--no-idle-shutdown]
  *
- *   dir    Directory to serve (default: current directory). Any depth of
- *          nesting is valid, e.g. npx mnfst-run docs/articles/publishing
- *   --port Preferred port (default: PORT env var, then 5001). Auto-increments
- *          if the port is already in use.
+ *   dir                 Directory to serve (default: current directory). Any
+ *                       depth of nesting is valid, e.g.
+ *                       npx mnfst-run docs/articles/publishing
+ *   --port              Preferred port (default: PORT env var, then 5001).
+ *                       Auto-increments if the port is already in use.
+ *   --idle-shutdown N   Exit after N seconds with no open browser tabs
+ *                       (default 30). Only arms once a tab has connected, so
+ *                       the auto-launched browser has time to load.
+ *   --no-idle-shutdown  Disable auto-shutdown (useful in CI / headless cases
+ *                       where no browser will connect).
  *
  * SPA vs MPA is auto-detected: if the root index.html contains
  * <meta name="manifest:prerendered"> the server disables SPA fallback.
  *
  * Live reload:
- *   .css   → hot-swaps the matching stylesheet href (no reload, no flash)
- *   .html  → morphs changed nodes into the live DOM via idiomorph (no reload,
- *            Alpine state on unchanged nodes is preserved)
- *   other  → full page reload
+ *   .css            → hot-swaps the matching stylesheet href (no reload, no flash)
+ *   .csv/.json/etc. → dispatches manifest:dev-reload; data plugin re-fetches local
+ *                     sources and updates Alpine store reactively (no reload)
+ *   other           → full page reload
  */
 import { createServer }                  from 'http';
 import { readFileSync, statSync, watch } from 'fs';
 import { join, extname, resolve, basename } from 'path';
 import { exec }                          from 'child_process';
-import { fileURLToPath }                 from 'url';
 
 const MIME = {
   '.html': 'text/html; charset=utf-8',
@@ -48,16 +53,11 @@ const MIME = {
   '.map':  'application/json',
 };
 
-// Read idiomorph from its own file to avoid backtick/template-literal escaping issues.
-// idiomorph.min.js ships alongside serve.mjs in the mnfst-run package.
-const __dir = fileURLToPath(new URL('.', import.meta.url));
-const IDIOMORPH_SRC = readFileSync(join(__dir, 'idiomorph.min.js'), 'utf8');
-
 // Built once at startup. Injected only into full HTML documents (not fragments).
-// - CSS changes   → hot-swaps the matching <link> href (no reload, no flash)
-// - HTML changes  → morphs only changed nodes via idiomorph; Alpine state survives
-// - other changes → full page reload
-const LIVE_RELOAD_SCRIPT = '<script>\n' + IDIOMORPH_SRC + `
+// - CSS changes       → hot-swaps the matching <link> href (no reload, no flash)
+// - data file changes → dispatches manifest:dev-reload (data plugin re-fetches)
+// - other changes     → full page reload
+const LIVE_RELOAD_SCRIPT = `<script>
 (function () {
   var es = new EventSource('/__mnfst_sse__');
   es.onmessage = function (e) {
@@ -67,19 +67,6 @@ const LIVE_RELOAD_SCRIPT = '<script>\n' + IDIOMORPH_SRC + `
         var base = l.href.split('?')[0];
         if (base.endsWith(d.file)) l.href = base + '?t=' + Date.now();
       });
-    } else if (d.type === 'html') {
-      fetch(location.href, { cache: 'no-store' })
-        .then(function (r) { return r.text(); })
-        .then(function (html) {
-          var newDoc = new DOMParser().parseFromString(html, 'text/html');
-          Idiomorph.morph(document.documentElement, newDoc.documentElement, {
-            callbacks: {
-              afterNodeAdded: function (node) {
-                if (node.nodeType === 1 && window.Alpine) Alpine.initTree(node);
-              }
-            }
-          });
-        });
     } else if (d.type === 'data') {
       window.dispatchEvent(new CustomEvent('manifest:dev-reload'));
     } else {
@@ -94,9 +81,17 @@ const LIVE_RELOAD_SCRIPT = '<script>\n' + IDIOMORPH_SRC + `
 const args = process.argv.slice(2);
 let dir  = '.';
 let port = process.env.PORT ? parseInt(process.env.PORT, 10) : 5001;
+// Auto-shutdown: when the last open browser tab disconnects (SSE drops to 0
+// clients) and stays gone for `idleShutdownSec`, the server exits. Cancelled
+// by `--no-idle-shutdown` (e.g. CI, headless smoke tests, or any case where
+// no browser will ever connect).
+let idleShutdownSec = 30;
+let idleShutdownEnabled = true;
 
 for (let i = 0; i < args.length; i++) {
   if ((args[i] === '--port' || args[i] === '-p') && args[i + 1]) { port = parseInt(args[++i], 10); continue; }
+  if (args[i] === '--no-idle-shutdown') { idleShutdownEnabled = false; continue; }
+  if (args[i] === '--idle-shutdown' && args[i + 1]) { idleShutdownSec = parseInt(args[++i], 10); continue; }
   if (!args[i].startsWith('-')) dir = args[i];
 }
 
@@ -108,8 +103,7 @@ function detectMPA(rootDir) {
     return /name=["']manifest:prerendered["']/i.test(readFileSync(join(rootDir, 'index.html'), 'utf8'));
   } catch { return false; }
 }
-const spa  = !detectMPA(root);
-const mode = spa ? 'SPA' : 'MPA';
+const spa = !detectMPA(root);
 
 // --- SSE clients ---
 let clients = [];
@@ -120,6 +114,51 @@ function broadcast(data) {
   clients.forEach(res => { try { res.write(msg); } catch { /* client gone */ } });
 }
 
+// --- Idle auto-shutdown ---
+// `everConnected` keeps the timer dormant until at least one tab has opened —
+// otherwise the server would exit before the auto-launched browser tab finishes
+// loading. `idleTimer` runs only while clients.length === 0; any new SSE
+// connection cancels it. The grace window also covers hard-reload churn (Cmd+R
+// drops the SSE briefly, then reconnects in well under a second).
+let everConnected = false;
+let idleTimer = null;
+
+function armIdleShutdown() {
+  if (!idleShutdownEnabled || !everConnected || idleTimer) return;
+  if (clients.length > 0) return;
+  idleTimer = setTimeout(() => {
+    console.log(`\nmnfst-run: no open tabs for ${idleShutdownSec}s — shutting down.\n`);
+    process.exit(0);
+  }, idleShutdownSec * 1000);
+}
+
+function cancelIdleShutdown() {
+  if (idleTimer) { clearTimeout(idleTimer); idleTimer = null; }
+}
+
+// --- .env support ---
+// Minimal dotenv parser. Skips comments/blank lines, splits on first `=`,
+// trims whitespace, strips wrapping single/double quotes. No multiline values,
+// no `${VAR}` substitution within .env itself — we just want plain KEY=VALUE.
+function parseDotenv(text) {
+  const out = {};
+  for (const rawLine of text.split(/\r?\n/)) {
+    const line = rawLine.trim();
+    if (!line || line.startsWith('#')) continue;
+    const eq = line.indexOf('=');
+    if (eq === -1) continue;
+    const key = line.slice(0, eq).trim();
+    if (!key) continue;
+    let value = line.slice(eq + 1).trim();
+    if ((value.startsWith('"') && value.endsWith('"')) ||
+        (value.startsWith("'") && value.endsWith("'"))) {
+      value = value.slice(1, -1);
+    }
+    out[key] = value;
+  }
+  return out;
+}
+
 // --- File watcher ---
 const IGNORE = /node_modules|\.git/;
 try {
@@ -128,10 +167,11 @@ try {
     clearTimeout(debounce);
     debounce = setTimeout(() => {
       const ext = extname(filename).toLowerCase();
-      if (ext === '.css') {
+      const base = basename(filename);
+      if (base === '.env') {
+        broadcast({ type: 'reload' });
+      } else if (ext === '.css') {
         broadcast({ type: 'css', file: '/' + filename.replace(/\\/g, '/') });
-      } else if (ext === '.html') {
-        broadcast({ type: 'html' });
       } else if (['.csv', '.json', '.yaml', '.yml', '.md'].includes(ext)) {
         broadcast({ type: 'data' });
       } else {
@@ -171,6 +211,27 @@ function serveFile(res, filePath) {
 const server = createServer((req, res) => {
   const urlPath = decodeURIComponent(req.url.split('?')[0]);
 
+  // Virtual /env.js — generated from .env at the project root.
+  // Loaded by HTML before manifest.data.js so window.env is populated for
+  // ${VAR} interpolation in manifest.json. Returns an empty no-op if no
+  // .env exists, so the <script src="/env.js"> tag is always safe to include.
+  if (urlPath === '/env.js') {
+    const envPath = join(root, '.env');
+    let body = 'window.env = window.env || {};';
+    try {
+      if (isFile(envPath)) {
+        const env = parseDotenv(readFileSync(envPath, 'utf8'));
+        body = `window.env = Object.assign(window.env || {}, ${JSON.stringify(env)});`;
+      }
+    } catch { /* fall through to no-op */ }
+    res.writeHead(200, {
+      'Content-Type': 'application/javascript; charset=utf-8',
+      'Cache-Control': 'no-store',
+    });
+    res.end(body);
+    return;
+  }
+
   // SSE endpoint for live reload
   if (urlPath === '/__mnfst_sse__') {
     res.writeHead(200, {
@@ -180,7 +241,12 @@ const server = createServer((req, res) => {
     });
     res.write(':\n\n'); // initial keep-alive comment
     clients.push(res);
-    req.on('close', () => { clients = clients.filter(c => c !== res); });
+    everConnected = true;
+    cancelIdleShutdown();
+    req.on('close', () => {
+      clients = clients.filter(c => c !== res);
+      if (clients.length === 0) armIdleShutdown();
+    });
     return;
   }
 
@@ -215,15 +281,25 @@ function tryListen(p, attempt = 0) {
     console.error('mnfst-run: could not find a free port after 20 attempts.');
     process.exit(1);
   }
-  server.once('error', err => {
-    if (err.code === 'EADDRINUSE') tryListen(p + 1, attempt + 1);
-    else throw err;
-  });
-  server.listen(p, () => {
+  // Use explicit listeners so we can remove the pending 'listening' handler
+  // when retrying — otherwise each failed attempt leaves a once('listening')
+  // handler registered, and the eventual successful listen fires ALL of them,
+  // opening a browser tab for every port that was tried (including ports
+  // already taken by other projects).
+  const onListening = () => {
+    server.removeListener('error', onError);
     const url = `http://localhost:${p}`;
     console.log(`\n${label} running at ${url}\n`);
     openBrowser(url);
-  });
+  };
+  const onError = err => {
+    server.removeListener('listening', onListening);
+    if (err.code === 'EADDRINUSE') tryListen(p + 1, attempt + 1);
+    else throw err;
+  };
+  server.once('listening', onListening);
+  server.once('error', onError);
+  server.listen(p);
 }
 
 tryListen(port);

package/idiomorph.min.js

@@ -1 +0,0 @@
-var Idiomorph=function(){"use strict";const e=()=>{};const n={morphStyle:"outerHTML",callbacks:{beforeNodeAdded:e,afterNodeAdded:e,beforeNodeMorphed:e,afterNodeMorphed:e,beforeNodeRemoved:e,afterNodeRemoved:e,beforeAttributeUpdated:e},head:{style:"merge",shouldPreserve:e=>e.getAttribute("im-preserve")==="true",shouldReAppend:e=>e.getAttribute("im-re-append")==="true",shouldRemove:e,afterHeadMorphed:e},restoreFocus:true};function t(t,e,n={}){t=d(t);const r=f(e);const i=u(t,r,n);const o=a(i,()=>{return c(i,t,r,e=>{if(e.morphStyle==="innerHTML"){s(e,t,r);return Array.from(t.childNodes)}else{return l(e,t,r)}})});i.pantry.remove();return o}function l(e,t,n){const r=f(t);s(e,r,n,t,t.nextSibling);return Array.from(r.childNodes)}function a(e,t){if(!e.config.restoreFocus)return t();let n=document.activeElement;if(!(n instanceof HTMLInputElement||n instanceof HTMLTextAreaElement)){return t()}const{id:r,selectionStart:i,selectionEnd:o}=n;const l=t();if(r&&r!==document.activeElement?.getAttribute("id")){n=e.target.querySelector(`[id="${r}"]`);n?.focus()}if(n&&!n.selectionEnd&&o){n.setSelectionRange(i,o)}return l}const s=function(){function e(e,t,n,r=null,i=null){if(t instanceof HTMLTemplateElement&&n instanceof HTMLTemplateElement){t=t.content;n=n.content}r||=t.firstChild;for(const o of n.childNodes){if(r&&r!=i){const a=f(e,o,r,i);if(a){if(a!==r){h(e,r,a)}b(a,o,e);r=a.nextSibling;continue}}if(o instanceof Element){const s=o.getAttribute("id");if(e.persistentIds.has(s)){const c=p(t,s,r,e);b(c,o,e);r=c.nextSibling;continue}}const l=d(t,o,r,e);if(l){r=l.nextSibling}}while(r&&r!=i){const u=r;r=r.nextSibling;m(e,u)}}function d(e,t,n,r){if(r.callbacks.beforeNodeAdded(t)===false)return null;if(r.idMap.has(t)){const i=document.createElement(t.tagName);e.insertBefore(i,n);b(i,t,r);r.callbacks.afterNodeAdded(i);return i}else{const o=document.importNode(t,true);e.insertBefore(o,n);r.callbacks.afterNodeAdded(o);return o}}const f=function(){function e(e,t,n,r){let i=null;let o=t.nextSibling;let l=0;let a=n;while(a&&a!=r){if(c(a,t)){if(s(e,a,t)){return a}if(i===null){if(!e.idMap.has(a)){i=a}}}if(i===null&&o&&c(a,o)){l++;o=o.nextSibling;if(l>=2){i=undefined}}if(e.activeElementAndParents.includes(a))break;a=a.nextSibling}return i||null}function s(e,t,n){let r=e.idMap.get(t);let i=e.idMap.get(n);if(!i||!r)return false;for(const o of r){if(i.has(o)){return true}}return false}function c(e,t){const n=e;const r=t;return n.nodeType===r.nodeType&&n.tagName===r.tagName&&(!n.getAttribute?.("id")||n.getAttribute?.("id")===r.getAttribute?.("id"))}return e}();function m(e,t){if(e.idMap.has(t)){l(e.pantry,t,null)}else{if(e.callbacks.beforeNodeRemoved(t)===false)return;t.parentNode?.removeChild(t);e.callbacks.afterNodeRemoved(t)}}function h(t,e,n){let r=e;while(r&&r!==n){let e=r;r=r.nextSibling;m(t,e)}return r}function p(e,t,n,r){const i=r.target.getAttribute?.("id")===t&&r.target||r.target.querySelector(`[id="${t}"]`)||r.pantry.querySelector(`[id="${t}"]`);o(i,r);l(e,i,n);return i}function o(t,n){const r=t.getAttribute("id");while(t=t.parentNode){let e=n.idMap.get(t);if(e){e.delete(r);if(!e.size){n.idMap.delete(t)}}}}function l(t,n,r){if(t.moveBefore){try{t.moveBefore(n,r)}catch(e){t.insertBefore(n,r)}}else{t.insertBefore(n,r)}}return e}();const b=function(){function e(e,t,n){if(n.ignoreActive&&e===document.activeElement){return null}if(n.callbacks.beforeNodeMorphed(e,t)===false){return e}if(e instanceof HTMLHeadElement&&n.head.ignore){}else if(e instanceof HTMLHeadElement&&n.head.style!=="morph"){m(e,t,n)}else{r(e,t,n);if(!f(e,n)){s(n,e,t)}}n.callbacks.afterNodeMorphed(e,t);return e}function r(e,t,n){let r=t.nodeType;if(r===1){const i=e;const o=t;const l=i.attributes;const a=o.attributes;for(const s of a){if(d(s.name,i,"update",n)){continue}if(i.getAttribute(s.name)!==s.value){i.setAttribute(s.name,s.value)}}for(let e=l.length-1;0<=e;e--){const c=l[e];if(!c)continue;if(!o.hasAttribute(c.name)){if(d(c.name,i,"remove",n)){continue}i.removeAttribute(c.name)}}if(!f(i,n)){u(i,o,n)}}if(r===8||r===3){if(e.nodeValue!==t.nodeValue){e.nodeValue=t.nodeValue}}}function u(n,r,i){if(n instanceof HTMLInputElement&&r instanceof HTMLInputElement&&r.type!=="file"){let e=r.value;let t=n.value;o(n,r,"checked",i);o(n,r,"disabled",i);if(!r.hasAttribute("value")){if(!d("value",n,"remove",i)){n.value="";n.removeAttribute("value")}}else if(t!==e){if(!d("value",n,"update",i)){n.setAttribute("value",e);n.value=e}}}else if(n instanceof HTMLOptionElement&&r instanceof HTMLOptionElement){o(n,r,"selected",i)}else if(n instanceof HTMLTextAreaElement&&r instanceof HTMLTextAreaElement){let e=r.value;let t=n.value;if(d("value",n,"update",i)){return}if(e!==t){n.value=e}if(n.firstChild&&n.firstChild.nodeValue!==e){n.firstChild.nodeValue=e}}}function o(e,t,n,r){const i=t[n],o=e[n];if(i!==o){const l=d(n,e,"update",r);if(!l){e[n]=t[n]}if(i){if(!l){e.setAttribute(n,"")}}else{if(!d(n,e,"remove",r)){e.removeAttribute(n)}}}}function d(e,t,n,r){if(e==="value"&&r.ignoreActiveValue&&t===document.activeElement){return true}return r.callbacks.beforeAttributeUpdated(e,t,n)===false}function f(e,t){return!!t.ignoreActiveValue&&e===document.activeElement&&e!==document.body}return e}();function c(t,e,n,r){if(t.head.block){const i=e.querySelector("head");const o=n.querySelector("head");if(i&&o){const l=m(i,o,t);return Promise.all(l).then(()=>{const e=Object.assign(t,{head:{block:false,ignore:true}});return r(e)})}}return r(t)}function m(e,t,r){let i=[];let o=[];let l=[];let a=[];let s=new Map;for(const n of t.children){s.set(n.outerHTML,n)}for(const u of e.children){let e=s.has(u.outerHTML);let t=r.head.shouldReAppend(u);let n=r.head.shouldPreserve(u);if(e||n){if(t){o.push(u)}else{s.delete(u.outerHTML);l.push(u)}}else{if(r.head.style==="append"){if(t){o.push(u);a.push(u)}}else{if(r.head.shouldRemove(u)!==false){o.push(u)}}}}a.push(...s.values());let c=[];for(const d of a){let n=document.createRange().createContextualFragment(d.outerHTML).firstChild;if(r.callbacks.beforeNodeAdded(n)!==false){if("href"in n&&n.href||"src"in n&&n.src){let t;let e=new Promise(function(e){t=e});n.addEventListener("load",function(){t()});c.push(e)}e.appendChild(n);r.callbacks.afterNodeAdded(n);i.push(n)}}for(const f of o){if(r.callbacks.beforeNodeRemoved(f)!==false){e.removeChild(f);r.callbacks.afterNodeRemoved(f)}}r.head.afterHeadMorphed(e,{added:i,kept:l,removed:o});return c}const u=function(){function e(e,t,n){const{persistentIds:r,idMap:i}=f(e,t);const o=a(n);const l=o.morphStyle||"outerHTML";if(!["innerHTML","outerHTML"].includes(l)){throw`Do not understand how to morph style ${l}`}return{target:e,newContent:t,config:o,morphStyle:l,ignoreActive:o.ignoreActive,ignoreActiveValue:o.ignoreActiveValue,restoreFocus:o.restoreFocus,idMap:i,persistentIds:r,pantry:s(),activeElementAndParents:c(e),callbacks:o.callbacks,head:o.head}}function a(e){let t=Object.assign({},n);Object.assign(t,e);t.callbacks=Object.assign({},n.callbacks,e.callbacks);t.head=Object.assign({},n.head,e.head);return t}function s(){const e=document.createElement("div");e.hidden=true;document.body.insertAdjacentElement("afterend",e);return e}function c(e){let t=[];let n=document.activeElement;if(n?.tagName!=="BODY"&&e.contains(n)){while(n){t.push(n);if(n===e)break;n=n.parentElement}}return t}function u(e){let t=Array.from(e.querySelectorAll("[id]"));if(e.getAttribute?.("id")){t.push(e)}return t}function d(n,e,r,t){for(const i of t){const o=i.getAttribute("id");if(e.has(o)){let t=i;while(t){let e=n.get(t);if(e==null){e=new Set;n.set(t,e)}e.add(o);if(t===r)break;t=t.parentElement}}}}function f(e,t){const n=u(e);const r=u(t);const i=m(n,r);let o=new Map;d(o,i,e,n);const l=t.__idiomorphRoot||t;d(o,i,l,r);return{persistentIds:i,idMap:o}}function m(e,t){let n=new Set;let r=new Map;for(const{id:o,tagName:l}of e){if(r.has(o)){n.add(o)}else{r.set(o,l)}}let i=new Set;for(const{id:o,tagName:l}of t){if(i.has(o)){n.add(o)}else if(r.get(o)===l){i.add(o)}}for(const o of n){i.delete(o)}return i}return e}();const{normalizeElement:d,normalizeParent:f}=function(){const i=new WeakSet;function e(e){if(e instanceof Document){return e.documentElement}else{return e}}function r(e){if(e==null){return document.createElement("div")}else if(typeof e==="string"){return r(l(e))}else if(i.has(e)){return e}else if(e instanceof Node){if(e.parentNode){return new o(e)}else{const t=document.createElement("div");t.append(e);return t}}else{const t=document.createElement("div");for(const n of[...e]){t.append(n)}return t}}class o{constructor(e){this.originalNode=e;this.realParentNode=e.parentNode;this.previousSibling=e.previousSibling;this.nextSibling=e.nextSibling}get childNodes(){const e=[];let t=this.previousSibling?this.previousSibling.nextSibling:this.realParentNode.firstChild;while(t&&t!=this.nextSibling){e.push(t);t=t.nextSibling}return e}querySelectorAll(r){return this.childNodes.reduce((t,e)=>{if(e instanceof Element){if(e.matches(r))t.push(e);const n=e.querySelectorAll(r);for(let e=0;e<n.length;e++){t.push(n[e])}}return t},[])}insertBefore(e,t){return this.realParentNode.insertBefore(e,t)}moveBefore(e,t){return this.realParentNode.moveBefore(e,t)}get __idiomorphRoot(){return this.originalNode}}function l(n){let r=new DOMParser;let e=n.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim,"");if(e.match(/<\/html>/)||e.match(/<\/head>/)||e.match(/<\/body>/)){let t=r.parseFromString(n,"text/html");if(e.match(/<\/html>/)){i.add(t);return t}else{let e=t.firstChild;if(e){i.add(e)}return e}}else{let e=r.parseFromString("<body><template>"+n+"</template></body>","text/html");let t=e.body.querySelector("template").content;i.add(t);return t}}return{normalizeElement:e,normalizeParent:r}}();return{morph:t,defaults:n}}();