@potch/munifw 1.0.0

package/README.md

@@ -0,0 +1,170 @@
+# munifw
+
+A signal-driven framework for small applications
+
+[current file sizes](./sizes.md)
+
+# API
+
+## `event(watchers?) => [emitEvent, onEvent]`
+
+Create an event bus. The bus consists of two methods, an `emit` and an `on` method that notify and register a set of `watchers`. Calls to `on` return a `teardown` function used to remove the listener.
+
+### Arguments
+
+- `watchers` - optional `Set` containing `callback` functions that will be called by `emitEvent`
+
+### Returns
+
+`Array` containing two methods:
+
+- `emitEvent(data?)` - calls all `callback` functions with the provided optional `data`.
+- `onEvent(callback) => teardown` - adds `callback` to the `watchers` set. Returns a `teardown` function to remove `callback` from `watchers` set
+
+### Example
+
+```js
+function clock() {
+  const start = Date.now();
+  const [onUpdate, emitUpdate] = event();
+  setInterval(() => {
+    emitUpdate(start - Date.now());
+  }, 1000);
+  return emitUpdate;
+}
+
+const onClock = clock();
+const stopClockLogs = onClock((time) => {
+  console.log(`time elapsed: ${time}ms`);
+  if (time > 30 * 1000) {
+    stopClockLogs();
+  }
+});
+```
+
+## `signal(initialValue, equality?) => <signal>`
+
+Reactive state primitive built on top of `event`. Setting `.value` updates all `computed` values and runs any `effects` that depend on `<signal>.value`
+
+### Arguments
+
+- `initialValue` - initial value of the signal's `value` property.
+- `equality: (a, b) => boolean` - optional function used to compare subsequent values of `<signal>`.value. Signals only update if `equality` returns false (indicating a change). Default equality check is `===`.
+
+### Returns
+
+A `<signal>` interface with the following properties:
+
+- `.watch(fn) => teardown` - add `fn` as a watcher to be notified when the state of the signal changes. Returns a `teardown` function that removes the watcher when called.
+- `.value`- state of the signal. backed by a pair of getters and setters such that setting `.value` triggers an update and accessing `.value` inside an `effect` automatically registers a watcher.
+- `.touch()` manually trigger all watchers
+- `.peek()` returns current `.value` without registering a watcher within `computed` or `effect`
+
+### Example
+
+```js
+const s = signal(1);
+
+s.watch(() => console.log("value is", s.value));
+
+s.value = 1; // watcher will not run, value is the same
+s.value = 2; // watcher function will log
+
+const person = signal({ name: "bob", age: 29 }, (a, b) => a.name === b.name);
+
+person.watch(() => console.log("new person!", person.value.name));
+
+person.value = { name: "bob", age: 30 }; // no log
+person.value = { name: "alice", age: 30 }; // log new person!
+
+person.value.name = "pat"; // no log bc value wasn't changed
+person.touch(); // triggers log
+```
+
+## `effect(fn, ...explicitDependencies) => teardown`
+
+A reactive effect that runs whenever any of its dependencies change.
+
+### Arguments
+
+- `fn` - the body of the effect, using any number of `signal` or `computed` values to perform other work. The callback is called once immediately on the creation of the effect and any time any depnendencies (signal or computed) are changed. References to `<signal>.value` or `<computed>.value` encountered during this initial run of the callback will automatically be detected as dependencies of the effect and will re-run the effect whenever they change. `fn` is called with a special `innerEffect` argument that, if used instead of global `effect`, will ensure that effects created inside of `fn` will be destroyed when the outer effect `teardown` is called.
+- `explicitDependencies` - Dependencies that are not encountered on the initial callback run can be passed positionally as `explicitDependencies` to ensure they are registered.
+
+### Returns
+
+A `teardown` function that can be called to "destroy" the effect and stop watching all its dependencies.
+
+## `computed(fn, ...explicitDependencies) => <computed>`
+
+A derived reactive value, internally the composition of a `signal` and an `effect`. `.value` updates when any signal/computed referenced in `fn` by `.value` changes. Takes the same arguments as `effect`.
+
+### Returns
+
+A `<computed>` interface, which is the same as `<signal>` but with an additional `.teardown()` method which is a reference to the teardown provided by the internal `effect`.
+
+### Example
+
+```js
+const a = signal(1);
+const b = signal(2);
+
+const c = computed(() => a.value + b.value);
+
+console.log(c.value); // 3
+
+a.value = 3;
+
+console.log(c.value); // 5
+```
+
+## `dom(tag, props?, ...children) => HTMLElement`
+
+Create HTML elements, hyperscript compatible. Effects created during prop setting are captured and reported to `onEvent`.
+
+### Arguments
+
+- `tag` - can be a string tag name or a function that returns an HTMLElement
+- `props` - optional object of properties/attributes. Attached to the element using `assign` and `setProp`. If `props` is not an object it's treated as the first chid.
+- `children` - positional arguments, appended to created element.
+
+### Returns
+
+Created `HTMLElement`.
+
+## `on(el, type, handler) => teardown`
+
+Create DOM event listeners using `addEventListener`, returns a teardown that calls `removeEventListener`
+
+## `mount(fn, ...explicitDependencies) => HTMLElement?`
+
+## `assign(a, b) => a`
+
+Deep-recursing version of `Object.assign`. If `a` is an `HTMLElement`, uses `setProp`.
+
+## `setProp(el, key, value) => void`
+
+Set a single prop on an element. Props values can be signals/computeds, which will be bound to the element and automatically updated. If the special prop `ref` is a signal, that signal's value will be set to the element. Functions, objects, and existing props of the element are set directly on the element. Other values are treated as attributes and set using `setAttribute` or `removeAttribute`
+
+## `onEffect(fn) => teardown`
+
+A global event bus that is called whenever any framework method creates an effect. Listeners are called with the teardown associated with that effect. Used for ensuring internal effects can be tracked and cleaned up.
+
+## `using(cb, fn)`
+
+Runs `fn` and automatically calls `cb` after `fn` returns.
+
+## `collect(onEvent, fn, collection?)`
+
+Uses the provided event bus and `using` to "collect" any arguments passed to events emitted when `fn` is run.
+
+### Example
+
+```js
+const [emit, on] = event();
+const teardowns = collect(on, () => {
+  for (let i = 1; i <= 4; i++) {
+    emit(i);
+  }
+});
+console.log(teardowns); // [1, 2, 3, 4]
+```

package/build.sh

@@ -0,0 +1,70 @@
+#!/bin/zsh
+
+OUTPUT="./dist"
+COLSIZE=7
+TABLETEMP=$(mktemp)
+TERMTEMP=$(mktemp)
+
+function len() {
+  # strip escape chars
+  TEXT_ESC=$(echo $1 | sed $'s,\x1b\\[[0-9;]*[a-zA-Z],,g')
+  echo $TEXT_ESC | wc -c | grep -Eo "\d+"
+}
+
+function pad() {
+  TEXT=$1
+  LEN=$2
+  RALIGN=$3
+  TEXT_LEN=$(len $TEXT)
+  REMAIN=$(printf ' %.0s' {0..$(($LEN - $TEXT_LEN))})
+  if [[ -n $RALIGN ]] then;
+    echo "$REMAIN$TEXT"
+  else
+    echo "$TEXT$REMAIN"
+  fi
+}
+
+function max() {
+  echo $(( $1 > $2 ? $1 : $2))
+}
+
+function leftright() {
+  TEXT_LEN=$(len "$2")
+  echo "$(pad $1 $(($COLUMNS - $TEXT_LEN)))$2"
+}
+
+function sizeof() {
+  echo "$(cat $1 | wc -c | grep -Eo "\d+")"
+}
+
+function build() {
+  MINFILE=`basename $1 | sed 's/\(.*\.\)js/\1min.js/'`
+  cat $1 | terser -c "booleans_as_integers=true,passes=2" \
+                  -m "reserved=['_','$','\$$','on','dom']" \
+                  --module \
+                  --ecma 2020 > "$OUTPUT/$MINFILE"
+  cat "$OUTPUT/$MINFILE" | gzip > "$OUTPUT/$MINFILE.gz"
+  MINSIZE=$(sizeof $OUTPUT/$MINFILE)
+  ZIPSIZE=$(sizeof $OUTPUT/$MINFILE.gz)
+  leftright "\e[37;1m$1\e[0m" "$(pad $(sizeof $1) $COLSIZE 1)$(pad "\e[33m$MINSIZE\e[0m" $COLSIZE 1)$(pad "\e[33m$ZIPSIZE\e[0m" $COLSIZE 1)" >> "$TERMTEMP"
+  echo "$(pad $1 20) | $(pad $(sizeof $1) 9 1) | $(pad $MINSIZE 9 1) | $(pad $ZIPSIZE 6 1)" >> "$TABLETEMP"
+}
+
+echo "\nbuilding...\n"
+
+leftright "file" "$(pad "orig" $COLSIZE 1)$(pad "min" $COLSIZE 1)$(pad "gz" $COLSIZE 1)"
+echo $(printf '-%.0s' {0..$(($COLUMNS - 1))})
+for file in $(ls src/*.js)
+do
+  build "$file" &
+done
+wait
+cat "$TERMTEMP" | sort
+
+echo "# file sizes\n" > sizes.md
+echo "$(pad "file" 20) | $(pad "original" 9 1) | $(pad "minified" 9 1) | $(pad "gzip" 6 1)" >> sizes.md
+echo "$(pad ":---" 20) | $(pad "---:" 9 1) | $(pad "---:" 9 1) | $(pad "---:" 6 1) " >> sizes.md
+cat "$TABLETEMP" | sort >> sizes.md
+
+echo "\ndone!"
+exit 0

package/dist/munifw.min.js

@@ -0,0 +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));

package/dist/ssr.min.js

@@ -0,0 +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)}};

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@potch/munifw",
+  "version": "1.0.0",
+  "description": "A signal-driven framework for small applications",
+  "main": "src/munifw.js",
+  "scripts": {
+    "test": "vitest run",
+    "start": "npx onchange -ik 'src/*.js' 'test/*.test.js' build.sh -- npm run dev",
+    "build": "./build.sh",
+    "dev": "vitest run && ./build.sh"
+  },
+  "author": "Potch",
+  "license": "ISC",
+  "devDependencies": {
+    "onchange": "^7.1.0",
+    "terser": "^5.29.1",
+    "vitest": "^2.1.6"
+  }
+}

package/sizes.md

@@ -0,0 +1,6 @@
+# file sizes
+
+file                 |  original |  minified |   gzip
+:---                 |      ---: |      ---: |   ---: 
+src/munifw.js        |      5425 |      1662 |    823
+src/ssr.js           |      2260 |      1027 |    611

package/src/munifw.js

@@ -0,0 +1,205 @@
+// @potch/minifw/fw.js without so much code golfing
+
+// prop to monitor for changes
+const val = "value";
+const isObj = (o) => 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());
+// collect event teardowns within the scope of a function
+export const collect = (onEvent, fn, collection = []) => (
+  using(
+    onEvent((o) => collection.push(o)),
+    fn
+  ),
+  collection
+);
+
+// event primitive, returns [emit, watch] fns
+export const event = (watchers = new Set()) => [
+  (...args) => map(watchers, (fn) => fn(...args)),
+  (fn) => {
+    watchers.add(fn);
+    return () => watchers.delete(fn);
+  },
+];
+
+// used for computed/effect bookkeeping
+const context = [];
+
+// reactive value primitive, notifies when .value changes
+export const signal = (value, eq = (a, b) => a === b) => {
+  // create event bus
+  const [emit, watch] = event();
+  return {
+    set [val](v) {
+      if (!eq(value, v)) {
+        value = v;
+        emit();
+      }
+    },
+    // manually trigger a value update
+    touch() {
+      emit();
+    },
+    get [val]() {
+      // if we're in an effect callback, register as a dep
+      if (context[0]) {
+        context[0].add(this);
+      }
+      return value;
+    },
+    peek: () => value,
+    watch,
+  };
+};
+
+// global event bus for effects
+export const [emitEffect, onEffect] = event();
+
+// pure side effect
+// runs when any signal referenced in `fn` by `.value` changes
+// use signal.peek in effects to avoid dependency tracking
+export const effect = (fn, ...explicitDependencies) => {
+  let inUpdate = false;
+
+  context.push(new Set(explicitDependencies));
+
+  const update = () => {
+    // prevents effects effecting themselves
+    if (!inUpdate) {
+      inUpdate = true;
+      fn((...args) => emitEffect(effect(...args)));
+      inUpdate = false;
+    }
+  };
+
+  update();
+
+  const teardown = map(context.at(-1), (dependency) =>
+    dependency.watch(update)
+  );
+
+  context.pop();
+
+  return () => map(teardown, (fn) => fn());
+};
+
+// derived reactive value, composition of a signal and an effect
+// auto updates when any signal referenced in `fn` by `.value` changes
+export const computed = (fn, ...explicitDependencies) => {
+  const out = signal();
+  out.teardown = effect(
+    () => (out[val] = fn(out[val])),
+    ...explicitDependencies
+  );
+  return out;
+};
+
+// credit to @developit/preact for logic here
+export const setProp = (el, key, value) => {
+  if (key == "ref" && val in value) {
+    // if key is "ref" and value is signal-like, treat value as signal and set el as value
+    value[val] = el;
+  } else if (isObj(value) && val in value) {
+    // if value is signal-like, mount an effect to update prop
+    emitEffect(effect(() => setProp(el, key, value[val])));
+  } else if (typeof value === "function" || isObj(value) || key in el) {
+    // is value a function, object, or is the key an extant prop?
+    // situations where we always set prop
+    // if el[key] is object, deep merge it, else set it.
+    if (el[key] && isObj(el[key])) {
+      assign(el[key], value);
+    } else {
+      el[key] = value === null ? "" : value;
+    }
+  } else {
+    // treat as attribute
+    // set if value not null and either not false or prop is `data-` or `aria-`
+    if (
+      value !== null &&
+      (value !== false || key.startsWith("data-") || key.startsWith("aria-"))
+    ) {
+      el.setAttribute(key, value);
+    } else {
+      el.removeAttribute(key);
+    }
+  }
+};
+
+// deep merge assignment
+export const assign = (a, b) => {
+  if (b) {
+    Object.entries(b).forEach(([key, value]) => {
+      if (a.nodeType) {
+        // check if a is an HTMLElement (duck type for SSR)
+        setProp(a, key, value);
+      } else if (isObj(a[key]) && isObj(value)) {
+        // if both current and new value are objects, recursively deep merge
+        assign(a[key], value);
+      } else {
+        a[key] = value;
+      }
+    });
+  }
+  return a;
+};
+
+// create DOM, hyperscript compatible
+export const dom = (tag, props, ...children) => {
+  let el;
+  if (typeof tag === "function") {
+    el = mount(() => tag(props, children));
+  } else {
+    el = document.createElement(tag);
+    // allow optional props syntax
+    if (props && isObj(props) && !props.nodeType) {
+      assign(el, props);
+    } else {
+      if (props) {
+        children.unshift(props);
+      }
+    }
+    el.append(...children.flat(1));
+  }
+  return el;
+};
+
+// a "computed" value that can mount and update in DOM
+export const mount = (fn, ...explicitDependencies) => {
+  // track effects for disconnect
+  const teardowns = [];
+  let currentEl;
+  emitEffect(
+    effect(() => {
+      // disconnect existing effects
+      while (teardowns.length) {
+        try {
+          teardowns.pop()();
+        } catch (e) {}
+      }
+      // track any effects created when generating mounted DOM
+      collect(
+        onEffect,
+        () => {
+          const newEl = fn();
+          if (currentEl) {
+            // swap or remove new element
+            if (newEl) {
+              currentEl.replaceWith(newEl);
+            }
+          }
+          currentEl = newEl;
+        },
+        teardowns
+      );
+    }, ...explicitDependencies)
+  );
+  return currentEl;
+};
+
+// dom event listeners, returns a callback to un-listen
+export const on = (target, ...args) => {
+  target.addEventListener(...args);
+  return () => target.removeEventListener(...args);
+};

package/src/ssr.js

@@ -0,0 +1,99 @@
+// fake enough DOM for the `dom()` function to work
+// not even a little bit standards compliant
+
+const voids =
+  /^(area|base|br|col|embed|hr|img|input|link|meta|source|track|wbr)$/;
+
+const attributes = "attributes";
+const pn = "parentNode";
+const cn = "childNodes";
+const obj = Object;
+const mapCn = (el, fn) => el[cn].map(fn);
+
+const nodeMock = {
+  append(...nodes) {
+    nodes.map((n) => {
+      n = n?.nodeType ? n : _node(3, { textContent: "" + n });
+      this[cn].push(n);
+      n[pn] = this;
+    });
+  },
+  replaceWith(node) {
+    const parentNode = this[pn];
+    if (parentNode) {
+      parentNode[cn] = mapCn(parentNode, (n) => (n == this ? node : n));
+      node[pn] = parentNode;
+    }
+  },
+  replaceChildren(...nodes) {
+    mapCn(this, (n) => n.remove());
+    this.append(...nodes);
+  },
+  setAttribute(a, v) {
+    this[attributes][a] = v;
+  },
+  getAttribute(a) {
+    return this[attributes][a];
+  },
+  removeAttribute(a) {
+    delete this[attributes][a];
+  },
+  remove() {
+    const self = this;
+    const parentNode = self[pn];
+    if (parentNode) {
+      parentNode[cn] = parentNode[cn].filter((n) => n != self);
+      self[pn] = null;
+    }
+  },
+  get outerHTML() {
+    const self = this;
+    const { tagName, nodeType } = self;
+    if (nodeType == 1) {
+      return (
+        "<" +
+        tagName +
+        obj
+          .entries(self[attributes])
+          .map((a) => ` ${a[0]}="${a[1]}"`)
+          .join("") +
+        ">" +
+        self.innerHTML +
+        (voids.test(tagName) ? "" : `</${tagName}>`)
+      );
+    }
+    if (nodeType == 3) {
+      return self.textContent;
+    }
+    return "";
+  },
+  get innerHTML() {
+    return mapCn(this, (n) => n.outerHTML).join("");
+  },
+};
+
+const _node = (nodeType, props) =>
+  obj.assign(obj.create(nodeMock), { nodeType }, props);
+
+const createElement = (tagName) =>
+  _node(1, {
+    tagName: tagName.toLowerCase(),
+    [attributes]: {},
+    [cn]: [],
+  });
+
+export default {
+  createElement,
+  // used by ssr instead of getElementById
+  find: (el, id) => {
+    let current,
+      stack = [el];
+    do {
+      current = stack.pop();
+      if (current?.[attributes]?.id == id) return current;
+      if (current) {
+        stack.push(...current[cn]);
+      }
+    } while (stack.length);
+  },
+};

package/test/munifw.test.js

@@ -0,0 +1,292 @@
+import { describe, expect } from "vitest";
+import {
+  assign,
+  event,
+  signal,
+  computed,
+  effect,
+  dom,
+  onEffect,
+  using,
+  collect,
+} from "../src/munifw.js";
+
+describe("fw", () => {
+  describe("assign", () => {
+    it("shallow", () => {
+      const o = assign({ a: 1 }, { b: 2 });
+      expect(o).toStrictEqual({ a: 1, b: 2 });
+      expect(assign({ a: 1 }, null)).toStrictEqual({ a: 1 });
+    });
+    it("deep", () => {
+      const o = assign({ a: { deep: 1 } }, { b: 2, a: { deeper: 2 } });
+      expect(o).toStrictEqual({ a: { deep: 1, deeper: 2 }, b: 2 });
+    });
+  });
+
+  describe("event", () => {
+    let watch, emit;
+
+    beforeEach(() => {
+      [emit, watch] = event();
+    });
+
+    it("emits", () => {
+      const fn = vi.fn();
+      watch(fn);
+      emit(1);
+      expect(fn).toHaveBeenCalledWith(1);
+    });
+
+    it("maps emit", () => {
+      const fn = vi.fn();
+      watch((a) => a + 1);
+      watch((a) => a + 2);
+      const result = emit(1);
+      expect(result).toStrictEqual([2, 3]);
+    });
+
+    it("unwatches", () => {
+      const fn = vi.fn();
+      const unwatch = watch(fn);
+      emit(1);
+      expect(fn).toHaveBeenCalled();
+      unwatch();
+      expect(fn).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("signal", () => {
+    let s;
+
+    beforeEach(() => {
+      s = signal(1);
+    });
+
+    it("can get value", () => {
+      expect(s.value).toBe(1);
+    });
+    it("can update value", () => {
+      expect(s.value).toBe(1);
+      s.value = 2;
+      expect(s.value).toBe(2);
+    });
+    it("watches", () => {
+      const fn = vi.fn();
+      s.watch(fn);
+      s.value = 2;
+      expect(fn).toHaveBeenCalled();
+    });
+    it("peeks", () => {
+      expect(s.peek()).toBe(1);
+    });
+    it("un-watches", () => {
+      const fn = vi.fn();
+      const unwatch = s.watch(fn);
+      unwatch();
+      s.value = 2;
+      expect(fn).not.toHaveBeenCalled();
+    });
+    it("compares", () => {
+      const fn = vi.fn();
+      const s = signal({ a: 1 }, (a, b) => a.a === b.a);
+      s.watch(fn);
+      s.value = { a: 2 };
+      expect(fn).toHaveBeenCalled();
+      s.value = { a: 2, b: 1 };
+      expect(fn).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("effect", () => {
+    let s1, s2;
+    beforeEach(() => {
+      s1 = signal(1);
+      s2 = signal(2);
+    });
+    it("runs once", () => {
+      const fn = vi.fn();
+      effect(() => fn(s1.value + s2.value));
+      expect(fn).toHaveBeenCalledWith(3);
+    });
+    it("runs on change", () => {
+      const fn = vi.fn();
+      effect(() => fn(s1.value + s2.value));
+      expect(fn).toHaveBeenCalledWith(3);
+      s1.value = 3;
+      expect(fn).toHaveBeenCalledWith(5);
+    });
+    it("peeks", () => {
+      const fn = vi.fn();
+      effect(() => fn(s1.peek() + s2.value));
+      expect(fn).toHaveBeenCalledWith(3);
+      s1.value = 3;
+      expect(fn).toHaveBeenCalledTimes(1);
+      s2.value = 3;
+      expect(fn).toHaveBeenCalledTimes(2);
+    });
+    it("un-watches", () => {
+      const fn = vi.fn();
+      const unwatch = effect(() => fn(s1.value + s2.value));
+      expect(fn).toHaveBeenCalledWith(3);
+      s1.value = 3;
+      expect(fn).toHaveBeenCalledWith(5);
+      unwatch();
+      s1.value = 6;
+      expect(fn).toHaveBeenCalledTimes(2);
+    });
+    it("cycle protects", () => {
+      const fn = vi.fn();
+      effect(() => {
+        s1.value++;
+        fn(s1.value + s2.value);
+      });
+      s2.value++;
+      expect(fn).toHaveBeenCalledTimes(2);
+    });
+    it("independent nested effects", () => {
+      const s1 = signal(1);
+      const s2 = signal(2);
+      const fn1 = vi.fn();
+      const fn2 = vi.fn();
+
+      effect(() => {
+        fn1();
+        effect(() => {
+          fn2();
+        }, s2);
+      }, s1);
+
+      s2.value = 3;
+      expect(fn1).toHaveBeenCalledTimes(1);
+      expect(fn2).toHaveBeenCalledTimes(2);
+    });
+    it("inner effects", () => {
+      const fn = vi.fn();
+      const s2 = signal(1);
+      const innerEffects = collect(onEffect, () =>
+        effect((effect) => {
+          effect(fn, s2);
+        })
+      );
+      s2.value = 2;
+      while (innerEffects.length) innerEffects.pop()();
+      s2.value = 3;
+      expect(fn).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe("computed", () => {
+    let s1, s2, c;
+    beforeEach(() => {
+      s1 = signal(1);
+      s2 = signal(2);
+      c = computed(() => s1.value + s2.value);
+    });
+    it("has value", () => {
+      expect(c.value).toBe(3);
+    });
+    it("updates value", () => {
+      s1.value = 3;
+      expect(c.value).toBe(5);
+    });
+    it("works with effects", () => {
+      const fn = vi.fn();
+      const s3 = signal(4);
+      effect(() => {
+        fn(c.value + s3.value);
+      });
+      expect(fn).toHaveBeenCalledWith(7);
+    });
+    it("watches", () => {
+      const fn = vi.fn();
+      c.watch(fn);
+      s1.value = 2;
+      expect(fn).toHaveBeenCalled();
+    });
+    it("peeks", () => {
+      expect(c.peek()).toBe(3);
+    });
+    it("un-watches", () => {
+      const fn = vi.fn();
+      const unwatch = c.watch(fn);
+      unwatch();
+      s1.value = 2;
+      expect(fn).not.toHaveBeenCalled();
+    });
+  });
+
+  const child = dom("foo");
+
+  describe("dom", () => {
+    it("creates", () => {
+      const el = dom("div", {}, 2, 3, 4);
+      expect(document.createElement).toHaveBeenCalledWith("div");
+      expect(el.append).toHaveBeenCalledWith(2, 3, 4);
+    });
+    it("creates with optional props", () => {
+      const el = dom("div");
+      expect(document.createElement).toHaveBeenCalledWith("div");
+    });
+    it("creates with optional props and children", () => {
+      const el = dom("div", "hello", child);
+      expect(document.createElement).toHaveBeenCalledWith("div");
+      expect(el.append).toHaveBeenCalledWith("hello", child);
+    });
+    it("sets attributes", () => {
+      const fn = vi.fn();
+      const s = signal();
+      const el = dom("test", { "data-test": 1, a: fn, ref: s, o: { a: 1 } });
+      expect(document.createElement).toHaveBeenCalledWith("test");
+      expect(el.setAttribute).toHaveBeenCalledTimes(1);
+      expect(el.setAttribute).toHaveBeenCalledWith("data-test", 1);
+      expect(el.a).toBe(fn);
+      expect(s.value).toBe(el);
+      expect(el.o).toStrictEqual({ a: 1 });
+    });
+    it("binds signals", () => {
+      const s = signal("foo");
+      const el = dom("test", { id: s });
+      expect(document.createElement).toHaveBeenCalledWith("test");
+      expect(el.setAttribute).toHaveBeenCalledTimes(1);
+      expect(el.setAttribute).toHaveBeenCalledWith("id", "foo");
+      s.value = "bar";
+      expect(el.setAttribute).toHaveBeenCalledTimes(2);
+      expect(el.setAttribute).toHaveBeenCalledWith("id", "bar");
+      s.value = false;
+      expect(el.removeAttribute).toHaveBeenCalledTimes(1);
+      expect(el.removeAttribute).toHaveBeenCalledWith("id");
+    });
+    it("captures effects", () => {
+      const fn = vi.fn();
+      const s = signal("foo");
+      const s2 = signal("bar");
+      onEffect(fn);
+      const el = dom("test", { id: s, name: s2 });
+      expect(fn).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe("utils", () => {
+    it("using", () => {
+      const fn = vi.fn();
+      const cb = vi.fn();
+      using(cb, () => {
+        fn();
+      });
+      expect(fn).toHaveBeenCalled();
+      expect(cb).toHaveBeenCalled();
+    });
+    it("collect", () => {
+      const [emit, on] = event();
+      const collected = collect(on, () => {
+        for (let i = 1; i <= 3; i++) {
+          emit(i);
+        }
+      });
+      expect(collected).toStrictEqual([1, 2, 3]);
+      emit(4);
+      expect(collected).toStrictEqual([1, 2, 3]);
+    });
+  });
+});

package/test/setup.js

@@ -0,0 +1,13 @@
+import { vi } from "vitest";
+
+const mockDoc = {
+  createElement: vi.fn((tagName) => ({
+    append: vi.fn(),
+    setAttribute: vi.fn(),
+    removeAttribute: vi.fn(),
+    nodeType: 1,
+    tagName,
+  })),
+};
+
+vi.stubGlobal("document", mockDoc);

package/test/ssr.test.js

@@ -0,0 +1,64 @@
+import ssr from "../src/ssr.js";
+vi.stubGlobal("document", ssr);
+import { dom } from "../src/munifw.js";
+
+describe("createElement", () => {
+  it("makes tags", () => {
+    const el = ssr.createElement("div");
+    expect(el.tagName).toBe("div");
+  });
+  it("makes text", () => {
+    const el = ssr.createElement("div");
+    el.append("foo");
+    const text = el.childNodes[0];
+    expect(text.nodeType).toBe(3);
+    expect(text.textContent).toBe("foo");
+  });
+  it("works with muni", () => {
+    const spy = vi.spyOn(ssr, "createElement");
+    const el = dom("div");
+    expect(spy).toHaveBeenCalled();
+    expect(el.tagName).toBe("div");
+    expect(el.nodeType).toBe(1);
+  });
+});
+
+describe("nodeMock", () => {
+  it("attributes", () => {
+    const el = ssr.createElement("div");
+    el.setAttribute("foo", "bar");
+    expect(el.getAttribute("foo")).toBe("bar");
+    el.removeAttribute("foo");
+    expect(el.getAttribute("foo")).toBeUndefined();
+  });
+  it("children", () => {
+    const el = ssr.createElement("div");
+    const h1 = ssr.createElement("h1");
+    el.append(h1);
+    expect(el.childNodes[0]).toBe(h1);
+    expect(h1.parentNode).toBe(el);
+    const h2 = ssr.createElement("h2");
+    el.replaceChildren(h2);
+    expect(el.childNodes.length).toBe(1);
+    expect(el.childNodes[0]).toBe(h2);
+    expect(h1.parentNode).toBeNull();
+    el.append(h1);
+    expect(el.childNodes.length).toBe(2);
+    h2.remove();
+    expect(el.childNodes[0]).toBe(h1);
+    h1.replaceWith(h2);
+    expect(el.childNodes[0]).toBe(h2);
+  });
+  it("serializes", () => {
+    const el = ssr.createElement("div");
+    const a = ssr.createElement("a");
+    a.setAttribute("href", "foo");
+    a.append("bar");
+    el.append(a);
+    el.append(ssr.createElement("img"));
+    el.append(ssr.createElement("b"));
+    expect(el.outerHTML).toBe('<div><a href="foo">bar</a><img><b></b></div>');
+    expect(el.innerHTML).toBe('<a href="foo">bar</a><img><b></b>');
+    expect(a.innerHTML).toBe("bar");
+  });
+});

package/vitest.config.js

@@ -0,0 +1,8 @@
+import { defineConfig, mergeConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    globals: true,
+    setupFiles: ["test/setup.js"],
+  },
+});