@potch/munifw 1.0.0 → 2.1.0

package/README.md

@@ -26,7 +26,7 @@ Create an event bus. The bus consists of two methods, an `emit` and an `on` meth
 ```js
 function clock() {
   const start = Date.now();
-  const [onUpdate, emitUpdate] = event();
+  const [emitUpdate, onUpdate] = event();
   setInterval(() => {
     emitUpdate(start - Date.now());
   }, 1000);

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[0]&&o[0].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=>"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()??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": "1.0.0",
+  "version": "2.1.0",
   "description": "A signal-driven framework for small applications",
   "main": "src/munifw.js",
   "scripts": {
@@ -14,6 +14,6 @@
   "devDependencies": {
     "onchange": "^7.1.0",
     "terser": "^5.29.1",
-    "vitest": "^2.1.6"
+    "vitest": "^2.1.9"
   }
 }

package/sizes.md

@@ -2,5 +2,5 @@
 
 file                 |  original |  minified |   gzip
 :---                 |      ---: |      ---: |   ---: 
-src/munifw.js        |      5425 |      1662 |    823
-src/ssr.js           |      2260 |      1027 |    611
+src/munifw.js        |      5380 |      1695 |    831
+src/ssr.js           |      2397 |      1088 |    649

package/src/munifw.js

@@ -44,8 +44,8 @@ export const signal = (value, eq = (a, b) => a === b) => {
     },
     get [val]() {
       // if we're in an effect callback, register as a dep
-      if (context[0]) {
-        context[0].add(this);
+      if (context.at(-1)) {
+        context.at(-1).add(this);
       }
       return value;
     },
@@ -182,12 +182,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/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("<!---->");
+  });
+});