@potch/munifw 2.0.0 → 2.1.1

package/dist/munifw.min.js

@@ -1 +1 @@
-const t="value",e=t=>"object"==typeof t,n=(t,e)=>[...t].map(e);export const using=(t,e)=>(e(),t());export const collect=(t,e,n=[])=>(using(t(t=>n.push(t)),e),n);export const event=(t=new Set)=>[(...e)=>n(t,t=>t(...e)),e=>(t.add(e),()=>t.delete(e))];const o=[];export const signal=(e,n=(t,e)=>t===e)=>{const[c,s]=event();return{set[t](t){n(e,t)||(e=t,c())},touch(){c()},get[t](){return o.at(-1)&&o.at(-1).add(this),e},peek:()=>e,watch:s}};export const[emitEffect,onEffect]=event();export const effect=(t,...e)=>{let c=0;o.push(new Set(e));const s=()=>{c||(c=1,t((...t)=>emitEffect(effect(...t))),c=0)};s();const r=n(o.at(-1),t=>t.watch(s));return o.pop(),()=>n(r,t=>t())};export const computed=(e,...n)=>{const o=signal();return o.teardown=effect(()=>o[t]=e(o[t]),...n),o};export const setProp=(n,o,c)=>{"ref"==o&&t in c?c[t]=n:e(c)&&t in c?emitEffect(effect(()=>setProp(n,o,c[t]))):"function"==typeof c||e(c)||o in n?n[o]&&e(n[o])?assign(n[o],c):n[o]=null===c?"":c:null!==c&&(0!=c||o.startsWith("data-")||o.startsWith("aria-"))?n.setAttribute(o,c):n.removeAttribute(o)};export const assign=(t,n)=>(n&&Object.entries(n).forEach(([n,o])=>{t.nodeType?setProp(t,n,o):e(t[n])&&e(o)?assign(t[n],o):t[n]=o}),t);export const dom=(t,n,...o)=>{let c;return"function"==typeof t?c=mount(()=>t(n,o)):(c=document.createElement(t),n&&e(n)&&!n.nodeType?assign(c,n):n&&o.unshift(n),c.append(...o.flat(1))),c};export const mount=(t,...e)=>{const n=[];let o;return emitEffect(effect(()=>{for(;n.length;)try{n.pop()()}catch(t){}collect(onEffect,()=>{const e=t();o&&e&&o.replaceWith(e),o=e},n)},...e)),o};export const on=(t,...e)=>(t.addEventListener(...e),()=>t.removeEventListener(...e));
+const t="value",e=t=>null!==t&&"object"==typeof t,n=(t,e)=>[...t].map(e);export const using=(t,e)=>{try{e()}finally{t()}};export const collect=(t,e,n=[])=>(using(t(t=>n.push(t)),e),n);export const event=(t=new Set)=>[(...e)=>n(t,t=>t(...e)),e=>(t.add(e),()=>t.delete(e))];const o=[];export const signal=(e,n=(t,e)=>t===e)=>{const[c,r]=event();return{set[t](t){n(e,t)||(e=t,c())},touch(){c()},get[t](){return o.at(-1)&&o.at(-1).add(this),e},peek:()=>e,watch:r}};export const[emitEffect,onEffect]=event();export const effect=(t,...e)=>{let c=0;o.push(new Set(e));const r=()=>{if(!c){c=1;try{t((...t)=>emitEffect(effect(...t)))}finally{c=0}}};let s;try{r(),s=n(o.at(-1),t=>t.watch(r))}finally{o.pop()}return()=>n(s,t=>t())};export const computed=(e,...n)=>{const o=signal();return o.teardown=effect(()=>o[t]=e(o[t]),...n),o};export const setProp=(n,o,c)=>{"ref"==o&&t in c?c[t]=n:e(c)&&t in c?emitEffect(effect(()=>setProp(n,o,c[t]))):"function"==typeof c||e(c)||o in n?n[o]&&e(n[o])?assign(n[o],c):n[o]=null===c?"":c:null!==c&&(0!=c||o.startsWith("data-")||o.startsWith("aria-"))?n.setAttribute(o,c):n.removeAttribute(o)};export const assign=(t,n)=>(n&&Object.entries(n).forEach(([n,o])=>{t.nodeType?setProp(t,n,o):e(t[n])&&e(o)?assign(t[n],o):t[n]=o}),t);export const dom=(t,n,...o)=>{let c;return"function"==typeof t?c=mount(()=>t(n,o)):(c=document.createElement(t),n&&e(n)&&!n.nodeType?assign(c,n):n&&o.unshift(n),c.append(...o.flat(1))),c};export const mount=(t,...e)=>{const n=[];let o;return emitEffect(effect(()=>{for(;n.length;)try{n.pop()()}catch(t){}collect(onEffect,()=>{const e=t()??document.createComment("");o&&o.replaceWith(e),o=e},n)},...e)),o};export const on=(t,...e)=>(t.addEventListener(...e),()=>t.removeEventListener(...e));

package/dist/ssr.min.js

@@ -1 +1 @@
-const e=/^(area|base|br|col|embed|hr|img|input|link|meta|source|track|wbr)$/,t="attributes",r="parentNode",i="childNodes",n=Object,s=(e,t)=>e[i].map(t),o={append(...e){e.map(e=>{e=e?.nodeType?e:a(3,{textContent:""+e}),this[i].push(e),e[r]=this})},replaceWith(e){const t=this[r];t&&(t[i]=s(t,t=>t==this?e:t),e[r]=t)},replaceChildren(...e){s(this,e=>e.remove()),this.append(...e)},setAttribute(e,r){this[t][e]=r},getAttribute(e){return this[t][e]},removeAttribute(e){delete this[t][e]},remove(){const e=this,t=e[r];t&&(t[i]=t[i].filter(t=>t!=e),e[r]=null)},get outerHTML(){const r=this,{tagName:i,nodeType:s}=r;return 1==s?"<"+i+n.entries(r[t]).map(e=>` ${e[0]}="${e[1]}"`).join("")+">"+r.innerHTML+(e.test(i)?"":`</${i}>`):3==s?r.textContent:""},get innerHTML(){return s(this,e=>e.outerHTML).join("")}},a=(e,t)=>n.assign(n.create(o),{nodeType:e},t);export default{createElement:e=>a(1,{tagName:e.toLowerCase(),[t]:{},[i]:[]}),find:(e,r)=>{let n,s=[e];do{if(n=s.pop(),n?.[t]?.id==r)return n;n&&s.push(...n[i])}while(s.length)}};
+const e=/^(area|base|br|col|embed|hr|img|input|link|meta|source|track|wbr)$/,t="attributes",r="parentNode",n="childNodes",i=Object,a=(e,t)=>e[n].map(t),s={append(...e){e.map(e=>{e=e?.nodeType?e:o(3,{textContent:""+e}),this[n].push(e),e[r]=this})},replaceWith(e){const t=this[r];t&&(t[n]=a(t,t=>t==this?e:t),e[r]=t)},replaceChildren(...e){a(this,e=>e.remove()),this.append(...e)},setAttribute(e,r){this[t][e]=r},getAttribute(e){return this[t][e]},removeAttribute(e){delete this[t][e]},remove(){const e=this,t=e[r];t&&(t[n]=t[n].filter(t=>t!=e),e[r]=null)},get outerHTML(){const r=this,{tagName:n,nodeType:a}=r;return 1==a?"<"+n+i.entries(r[t]).map(e=>` ${e[0]}="${e[1]}"`).join("")+">"+r.innerHTML+(e.test(n)?"":`</${n}>`):3==a?r.textContent:8==a?`\x3c!--${r.data}--\x3e`:""},get innerHTML(){return a(this,e=>e.outerHTML).join("")}},o=(e,t)=>i.assign(i.create(s),{nodeType:e},t);export default{createElement:e=>o(1,{tagName:e.toLowerCase(),[t]:{},[n]:[]}),createComment:e=>o(8,{data:e}),find:(e,r)=>{let i,a=[e];do{if(i=a.pop(),i?.[t]?.id==r)return i;i&&a.push(...i[n])}while(a.length)}};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@potch/munifw",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "A signal-driven framework for small applications",
   "main": "src/munifw.js",
   "scripts": {

package/sizes.md

@@ -2,5 +2,5 @@
 
 file                 |  original |  minified |   gzip
 :---                 |      ---: |      ---: |   ---: 
-src/munifw.js        |      5433 |      1670 |    822
-src/ssr.js           |      2260 |      1027 |    611
+src/munifw.js        |      5506 |      1745 |    857
+src/ssr.js           |      2397 |      1088 |    649

package/src/munifw.js

@@ -2,10 +2,16 @@
 
 // prop to monitor for changes
 const val = "value";
-const isObj = (o) => typeof o === "object";
+const isObj = (o) => o !== null && typeof o === "object";
 const map = (a, fn) => [...a].map(fn);
 // utility to run a function and ensure cleanup after
-export const using = (cb, fn) => (fn(), cb());
+export const using = (cb, fn) => {
+  try {
+    fn();
+  } finally {
+    cb();
+  }
+};
 // collect event teardowns within the scope of a function
 export const collect = (onEvent, fn, collection = []) => (
   using(
@@ -69,18 +75,21 @@ export const effect = (fn, ...explicitDependencies) => {
     // prevents effects effecting themselves
     if (!inUpdate) {
       inUpdate = true;
-      fn((...args) => emitEffect(effect(...args)));
-      inUpdate = false;
+      try {
+        fn((...args) => emitEffect(effect(...args)));
+      } finally {
+        inUpdate = false;
+      }
     }
   };
 
-  update();
-
-  const teardown = map(context.at(-1), (dependency) =>
-    dependency.watch(update)
-  );
-
-  context.pop();
+  let teardown;
+  try {
+    update();
+    teardown = map(context.at(-1), (dependency) => dependency.watch(update));
+  } finally {
+    context.pop();
+  }
 
   return () => map(teardown, (fn) => fn());
 };
@@ -182,12 +191,9 @@ export const mount = (fn, ...explicitDependencies) => {
       collect(
         onEffect,
         () => {
-          const newEl = fn();
+          const newEl = fn() ?? document.createComment("");
           if (currentEl) {
-            // swap or remove new element
-            if (newEl) {
-              currentEl.replaceWith(newEl);
-            }
+            currentEl.replaceWith(newEl);
           }
           currentEl = newEl;
         },

package/src/ssr.js

@@ -65,6 +65,9 @@ const nodeMock = {
     if (nodeType == 3) {
       return self.textContent;
     }
+    if (nodeType == 8) {
+      return `<!--${self.data}-->`;
+    }
     return "";
   },
   get innerHTML() {
@@ -82,8 +85,11 @@ const createElement = (tagName) =>
     [cn]: [],
   });
 
+const createComment = (data) => _node(8, { data });
+
 export default {
   createElement,
+  createComment,
   // used by ssr instead of getElementById
   find: (el, id) => {
     let current,

package/test/munifw.test.js

@@ -276,6 +276,16 @@ describe("fw", () => {
       });
       expect(fn).toHaveBeenCalled();
       expect(cb).toHaveBeenCalled();
+
+      const throwCb = vi.fn();
+
+      expect(() =>
+        using(throwCb, () => {
+          throw "oops";
+        })
+      ).toThrowError();
+
+      expect(throwCb).toHaveBeenCalled();
     });
     it("collect", () => {
       const [emit, on] = event();

package/test/ssr.test.js

@@ -1,6 +1,6 @@
 import ssr from "../src/ssr.js";
 vi.stubGlobal("document", ssr);
-import { dom } from "../src/munifw.js";
+import { dom, mount, signal } from "../src/munifw.js";
 
 describe("createElement", () => {
   it("makes tags", () => {
@@ -23,6 +23,15 @@ describe("createElement", () => {
   });
 });
 
+describe("createComment", () => {
+  it("creates", () => {
+    const c = ssr.createComment("foo");
+    expect(c.nodeType).toBe(8);
+    expect(c.data).toBe("foo");
+    expect(c.outerHTML).toBe("<!--foo-->");
+  });
+});
+
 describe("nodeMock", () => {
   it("attributes", () => {
     const el = ssr.createElement("div");
@@ -62,3 +71,24 @@ describe("nodeMock", () => {
     expect(a.innerHTML).toBe("bar");
   });
 });
+
+describe("mount", () => {
+  it("basic operation", () => {
+    const el = mount(() => dom("div"));
+    expect(el.outerHTML).toBe("<div></div>");
+  });
+  it("signal operation", () => {
+    const s = signal(1);
+    const el = dom(
+      "div",
+      mount(() => dom("span", s.value))
+    );
+    expect(el.outerHTML).toBe("<div><span>1</span></div>");
+    s.value = 2;
+    expect(el.outerHTML).toBe("<div><span>2</span></div>");
+  });
+  it("null operation", () => {
+    const el = mount(() => null);
+    expect(el.outerHTML).toBe("<!---->");
+  });
+});