ajo 0.0.14 → 0.0.17

package/index.cjs

@@ -17,6 +17,7 @@ var __copyProps = (to, from2, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var ajo_exports = {};
 __export(ajo_exports, {
+  For: () => For,
   Fragment: () => Fragment,
   cleanup: () => cleanup,
   clx: () => clx,
@@ -32,140 +33,156 @@ __export(ajo_exports, {
   stx: () => stx
 });
 module.exports = __toCommonJS(ajo_exports);
-const Fragment = ({ children }) => children, h = (nodeName, props, ...children) => {
-  children = children.length == 0 ? null : children.length == 1 ? children[0] : children;
-  return { children, ...props, nodeName };
-}, component = (setup) => ({ is, key, host, ref, ...props }) => h(is ?? setup.is ?? "div", {
-  key,
-  ...setup.host,
-  ...host,
+var import_element_notifier = require("element-notifier");
+const Fragment = ({ children }) => children, For = ({ is, each, by, children, ref: ref2, ...props }) => h(is ?? "div", {
+  ...props,
   skip: true,
-  ref: (host2) => (refresh(host2, props, setup), isFn(ref) && ref(host2))
-}), render = (h2, host) => {
-  let child = host.firstChild, node, byKey = keyed.get(host);
-  for (h2 of normalize(h2, host)) {
-    if (typeof h2 == "string") {
-      for (node = child; node; node = node.nextSibling)
+  ref: (host, root) => iterate(host, root, each, by, children, ref2)
+}), h = (nodeName, props, ...children) => ({ children: children.length == 0 ? null : children.length == 1 ? children[0] : children, ...props, nodeName }), render = (h2, host, to, root = host) => {
+  let child = host.firstChild, node;
+  root == host && (root.$mo ??= (0, import_element_notifier.notify)((host2, connected) => connected || root.contains(host2) || dispose(host2), root));
+  for (h2 of normalize(h2)) {
+    if (h2 instanceof Node)
+      node = h2;
+    else if (typeof h2 == "string") {
+      for (node = child; node != to; node = node.nextSibling)
         if (node.nodeType == 3)
           break;
-      node ? node.data !== h2 && (node.data = h2) : node = document.createTextNode(h2);
-    } else if (h2 instanceof Node) {
-      node = h2;
+      node == to ? node = document.createTextNode(h2) : node.data != h2 && (node.data = h2);
     } else {
-      const { key, nodeName, skip, block, children, ref, ...props } = h2;
-      if (key != null && (node = byKey?.get(key)))
-        ;
-      else
-        for (node = child; node; node = node.nextSibling)
-          if (node.localName == nodeName)
-            break;
-      node ||= document.createElement(nodeName);
-      key != null && (byKey ||= keyed.set(host, /* @__PURE__ */ new Map())).set(key, node);
-      update(props, node);
-      !(skip || block != null && every(deps.get(node), deps.set(node, block))) && render(children, node);
-      isFn(ref) && ref(node);
+      const { nodeName, block, skip, children, ref: ref2, ...props } = h2;
+      for (node = child; node != to; node = node.nextSibling)
+        if (node.localName == nodeName)
+          break;
+      node == to && (node = document.createElement(nodeName));
+      if (block == null || some(node.$deps, node.$deps = block)) {
+        update(props, node);
+        skip || render(children, node, null, root);
+        isFunction(ref2) && ref2(node, root);
+      }
     }
-    node === child ? child = child.nextSibling : before(host, child, node);
+    node == child ? child = child.nextSibling : before(host, node, child);
   }
-  while (child) {
+  while (child != to) {
     const next = child.nextSibling;
-    host.removeChild(child).nodeType == 1 && dispose(child);
+    host.removeChild(child);
     child = next;
   }
-}, refresh = (host, props, setup) => {
+}, component = (setup) => ({ is, props, ref: ref2, ...params }) => h(is ?? setup.is ?? "div", {
+  ...setup.props,
+  ...props,
+  skip: true,
+  ref: (host, root) => run(host, root, setup, params, ref2)
+}), refresh = (host) => {
   try {
-    if (setup && !isFn(setup))
-      throwTypeError("Setup", setup, fn);
-    props = props ? memo.set(host, { ...setup?.props, ...props }) : memo.get(host) ?? {};
-    render((renders.get(host) ?? renders.set(host, setup(props, host)))(props, host), host);
+    render((host.$render ??= host.$setup(host))(host.$params), host, null, host.$root);
   } catch (error) {
     propagate(host, error);
   }
-}, provide = (host, key, value) => (provisions.get(host) ?? provisions.set(host, /* @__PURE__ */ new Map())).set(key, value), consume = (host, key, fallback) => {
-  let map;
-  while (host) {
-    if ((map = provisions.get(host)) && map.has(key))
-      return map.get(key);
-    host = host.parentNode;
-  }
+}, provide = (host, key, value) => (host.$provisions ??= /* @__PURE__ */ new Map()).set(key, value), consume = (host, key, fallback) => {
+  for (let map2; host; host = host.parentNode)
+    if ((map2 = host.$provisions) && map2.has(key))
+      return map2.get(key);
   return fallback;
-}, intercept = (host, interceptor) => {
-  if (!isFn(interceptor))
-    throwTypeError("Interceptor", interceptor, fn);
-  interceptors.set(host, interceptor);
-}, propagate = (host, error) => {
-  for (let interceptor; host; host = host.parentNode)
-    if (interceptor = interceptors.get(host))
-      return render(interceptor(error), host);
+}, intercept = (host, fn) => isFunction(fn) && (host.$interceptor = fn), propagate = (host, error) => {
+  for (let fn; host; host = host.parentNode)
+    if (isFunction(fn = host.$interceptor))
+      return render(fn(error));
   throw error;
-}, cleanup = (host, cleaner) => {
-  if (!isFn(cleaner))
-    throwTypeError("Cleaner", cleaner, fn);
-  (cleaners.get(host) ?? cleaners.set(host, /* @__PURE__ */ new Set())).add(cleaner);
-}, clx = (o) => keys(o).filter((k) => o[k]).join(" ") || null, stx = (o) => entries(o).map((t) => t.join(":")).join(";") || null, keb = (o) => keys(o).reduce((r, k) => (r[k.replace(search, replace).toLowerCase()] = o[k], r), {});
-const wm = () => {
-  const instance = /* @__PURE__ */ new WeakMap(), { set } = instance;
-  instance.set = (key, value) => (set.call(instance, key, value), value);
-  return instance;
-}, throwTypeError = (name, value, expected) => {
-  throw new TypeError(`Expected ${name} to be of type ${expected}, got ${typeof value} instead`);
-}, every = (a, b) => a === b || isArray(a) && isArray(b) && a.length == b.length && a.every((v, i) => v === b[i]), apply = (o, { name, value }) => (o[name] = value, o), reduce = (list) => from(list).reduce(apply, {}), isFn = (v) => typeof v == fn, { keys, entries } = Object, { isArray, from } = Array, fn = "function", search = /([a-z0-9])([A-Z])/g, replace = "$1-$2", keyed = wm(), deps = wm(), memo = wm(), renders = wm(), provisions = wm(), interceptors = wm(), cleaners = wm(), cache = wm(), normalize = function* (h2, host) {
-  let type, buffer = "";
-  for (h2 of isFn(h2?.[Symbol.iterator]) ? h2 : [h2]) {
-    if (h2 == null || (type = typeof h2) == "boolean")
-      continue;
-    if (type == "string" || type == "number") {
-      buffer += h2;
-      continue;
-    }
-    if ("nodeName" in Object(h2)) {
-      if (isFn(h2.nodeName)) {
-        yield* normalize(h2.nodeName(h2, host), host);
-        continue;
-      }
-      if (buffer) {
-        yield buffer;
-        buffer = "";
-      }
-      yield h2;
+}, cleanup = (host, fn) => isFunction(fn) && (host.$cleanups ??= /* @__PURE__ */ new Set()).add(fn), clx = (o) => keys(o).filter((k) => o[k]).join(" ") || null, stx = (o) => entries(o).map((t) => t.join(":")).join(";") || null, keb = (o) => keys(o).reduce((r, k) => (r[k.replace(search, replace).toLowerCase()] = o[k], r), {});
+const { isArray, from } = Array, { keys, entries } = Object, isFunction = (v) => typeof v == "function", noop = () => {
+}, ref = (v) => (...args) => args.length ? v = args[0] : v, map = (list) => list.reduce(set, /* @__PURE__ */ new Map()), set = (m, v, i) => (m.set(v, i), m), some = (a, b) => isArray(a) && isArray(b) ? a.some((v, i) => v !== b[i]) : a !== b, reduce = (v) => from(v).reduce(assign, {}), assign = (v, { name, value }) => (v[name] = value, v), proxy = { firstChild: null, insertBefore: (node) => proxy.firstChild ??= node }, search = /([a-z0-9])([A-Z])/g, replace = "$1-$2", normalize = function* (h2, buffer = ref(""), root = true) {
+  let text;
+  for (h2 of isArray(h2) ? h2 : [h2]) {
+    if (h2 == null || typeof h2 == "boolean")
       continue;
-    }
-    isFn(h2[Symbol.iterator]) ? yield* normalize(h2, host) : buffer += h2;
+    if (typeof h2.nodeName == "string")
+      (text = buffer()) && (buffer(""), yield text), yield h2;
+    else if (isFunction(h2.nodeName))
+      yield* normalize(h2.nodeName(h2), buffer, false);
+    else
+      isArray(h2) ? yield* normalize(h2, buffer, false) : buffer(buffer() + h2);
   }
-  if (buffer)
-    yield buffer;
+  root && (text = buffer()) && (yield text);
 }, update = (props, host) => {
-  const prev = cache.get(host) ?? (host.hasAttributes() ? reduce(host.attributes) : {});
+  const prev = host.$props ?? (host.hasAttributes() ? reduce(host.attributes) : {});
   for (const name in { ...prev, ...props }) {
     let value = props[name];
-    if (value === prev[name])
-      continue;
-    if (name.startsWith("set:")) {
-      host[name.slice(4)] = value;
-      continue;
-    }
-    if (value === true)
-      value = "";
-    else if (value == null || value === false) {
-      host.removeAttribute(name);
-      continue;
-    }
-    host.setAttribute(name, value);
+    if (value !== prev[name])
+      if (name.startsWith("set:"))
+        host[name.slice(4)] = value;
+      else if (value == null || value === false)
+        host.removeAttribute(name);
+      else
+        host.setAttribute(name, value === true ? "" : value);
   }
-  cache.set(host, props);
-}, before = (host, child, node) => {
+  host.$props = props;
+}, before = (host, node, child) => {
   if (node.contains?.(document.activeElement)) {
-    const ref = node.nextSibling;
+    const ref2 = node.nextSibling;
     while (child && child !== node) {
       const next = child.nextSibling;
-      host.insertBefore(child, ref);
+      host.insertBefore(child, ref2);
       child = next;
     }
   } else
     host.insertBefore(node, child);
+}, iterate = (host, root, each, by, fn, ref2) => {
+  each = isArray(each) ? each : [];
+  by = isFunction(by) ? by : (v) => v;
+  fn = isFunction(fn) ? fn : noop;
+  const map2 = host.$for ??= /* @__PURE__ */ new Map(), del = (node) => map2.delete(node.$key), clr = each !== host.$each, len = (host.$each = each).length, a = from(host.childNodes), b = new Array(len);
+  clr && map2.clear();
+  for (let last, index = 0; index < len; index++) {
+    const item = each[index], key = by(item, index);
+    proxy.firstChild = (clr ? a[index] : map2.get(key)) ?? last?.cloneNode(true);
+    render(fn(item), proxy, proxy.firstChild?.nextSibling, root);
+    last = proxy.firstChild;
+    proxy.firstChild = null;
+    map2.set(last.$key = key, b[index] = last);
+  }
+  arrange(host, a, b, del);
+  isFunction(ref2) && ref2(host, root);
+}, arrange = (host, a, b, dispose2 = noop) => {
+  const aLen = a.length, bLen = b.length;
+  let aIndex = 0, bIndex = 0, aValue, bValue, aMap, bMap, i;
+  while (aIndex !== aLen || bIndex !== bLen) {
+    aValue = a[aIndex];
+    bValue = b[bIndex];
+    if (aValue === null)
+      aIndex++;
+    else if (bLen <= bIndex)
+      aIndex++, dispose2(host.removeChild(aValue));
+    else if (aLen <= aIndex)
+      bIndex++, host.appendChild(bValue);
+    else if (aValue === bValue)
+      aIndex++, bIndex++;
+    else {
+      aMap ??= map(a);
+      bMap ??= map(b);
+      if (bMap.get(aValue) == null)
+        aIndex++, dispose2(host.removeChild(aValue));
+      else {
+        host.insertBefore(bValue, aValue), bIndex++;
+        if ((i = aMap.get(bValue)) != null) {
+          if (i > aIndex + 1)
+            aIndex++;
+          a[i] = null;
+        }
+      }
+    }
+  }
+}, run = (host, root, setup, params, ref2) => {
+  host.$root = root;
+  host.$setup ??= isFunction(setup) ? setup : noop;
+  host.$params = { ...setup.params, ...params };
+  refresh(host);
+  isFunction(ref2) && ref2(host, root);
 }, dispose = (host) => {
-  for (const child of host.children)
-    dispose(child);
-  for (const cleaner of cleaners.get(host) ?? [])
-    cleaner(host);
+  const { $cleanups } = host;
+  if ($cleanups) {
+    for (let fn of $cleanups)
+      fn(host);
+    $cleanups.clear();
+  }
 };

package/index.js

@@ -1,198 +1,230 @@
-export const
-  Fragment = ({ children }) => children,
+import { notify } from 'element-notifier'
 
-  h = (nodeName, props, ...children) => {
-    children = children.length == 0 ? null : children.length == 1 ? children[0] : children
-    return { children, ...props, nodeName }
-  },
+export const
+	Fragment = ({ children }) => children,
 
-  component = setup => ({ is, key, host, ref, ...props }) => h(is ?? setup.is ?? 'div', {
-    key, ...setup.host, ...host, skip: true, ref: host => (refresh(host, props, setup), isFn(ref) && ref(host))
-  }),
+	For = ({ is, each, by, children, ref, ...props }) => h(is ?? 'div', {
+		...props, skip: true, ref: (host, root) => iterate(host, root, each, by, children, ref)
+	}),
 
-  render = (h, host) => {
+	h = (nodeName, props, ...children) => ({ children: children.length == 0 ? null : children.length == 1 ? children[0] : children, ...props, nodeName }),
 
-    let child = host.firstChild, node, byKey = keyed.get(host)
+	render = (h, host, to, root = host) => {
 
-    for (h of normalize(h, host)) {
+		let child = host.firstChild, node
 
-      if (typeof h == 'string') {
+		root == host && (root.$mo ??= notify((host, connected) => connected || root.contains(host) || dispose(host), root))
 
-        for (node = child; node; node = node.nextSibling) if (node.nodeType == 3) break
-        node ? node.data !== h && (node.data = h) : node = document.createTextNode(h)
+		for (h of normalize(h)) {
 
-      } else if (h instanceof Node) {
+			if (h instanceof Node) node = h
 
-        node = h
+			else if (typeof h == 'string') {
 
-      } else {
+				for (node = child; node != to; node = node.nextSibling) if (node.nodeType == 3) break
+				node == to ? node = document.createTextNode(h) : node.data != h && (node.data = h)
 
-        const { key, nodeName, skip, block, children, ref, ...props } = h
+			} else {
 
-        if (key != null && (node = byKey?.get(key)));
-        else for (node = child; node; node = node.nextSibling) if (node.localName == nodeName) break
+				const { nodeName, block, skip, children, ref, ...props } = h
 
-        node ||= document.createElement(nodeName)
+				for (node = child; node != to; node = node.nextSibling) if (node.localName == nodeName) break
+				node == to && (node = document.createElement(nodeName))
 
-        key != null && (byKey ||= keyed.set(host, new Map)).set(key, node)
+				if (block == null || some(node.$deps, node.$deps = block)) {
+					update(props, node)
+					skip || render(children, node, null, root)
+					isFunction(ref) && ref(node, root)
+				}
+			}
 
-        update(props, node)
+			node == child ? child = child.nextSibling : before(host, node, child)
+		}
 
-        !(skip || block != null && every(deps.get(node), deps.set(node, block))) && render(children, node)
+		while (child != to) {
+			const next = child.nextSibling
+			host.removeChild(child)
+			child = next
+		}
+	},
 
-        isFn(ref) && ref(node)
-      }
+	component = setup => ({ is, props, ref, ...params }) => h(is ?? setup.is ?? 'div', {
+		...setup.props, ...props, skip: true, ref: (host, root) => run(host, root, setup, params, ref)
+	}),
 
-      node === child ? child = child.nextSibling : before(host, child, node)
-    }
+	refresh = host => {
+		try {
+			render((host.$render ??= host.$setup(host))(host.$params), host, null, host.$root)
+		} catch (error) {
+			propagate(host, error)
+		}
+	},
 
-    while (child) {
-      const next = child.nextSibling
-      host.removeChild(child).nodeType == 1 && dispose(child)
-      child = next
-    }
-  },
+	provide = (host, key, value) => (host.$provisions ??= new Map).set(key, value),
 
-  refresh = (host, props, setup) => {
-    try {
-      if (setup && !isFn(setup)) throwTypeError('Setup', setup, fn)
-      props = props ? memo.set(host, { ...setup?.props, ...props }) : memo.get(host) ?? {}
-      render((renders.get(host) ?? renders.set(host, setup(props, host)))(props, host), host)
-    } catch (error) {
-      propagate(host, error)
-    }
-  },
+	consume = (host, key, fallback) => {
+		for (let map; host; host = host.parentNode) if ((map = host.$provisions) && map.has(key)) return map.get(key)
+		return fallback
+	},
 
-  provide = (host, key, value) => (provisions.get(host) ?? provisions.set(host, new Map)).set(key, value),
+	intercept = (host, fn) => isFunction(fn) && (host.$interceptor = fn),
 
-  consume = (host, key, fallback) => {
-    let map
-    while (host) {
-      if ((map = provisions.get(host)) && map.has(key)) return map.get(key)
-      host = host.parentNode
-    }
-    return fallback
-  },
+	propagate = (host, error) => {
+		for (let fn; host; host = host.parentNode) if (isFunction(fn = host.$interceptor)) return render(fn(error))
+		throw error
+	},
 
-  intercept = (host, interceptor) => {
-    if (!isFn(interceptor)) throwTypeError('Interceptor', interceptor, fn)
-    interceptors.set(host, interceptor)
-  },
+	cleanup = (host, fn) => isFunction(fn) && (host.$cleanups ??= new Set).add(fn),
 
-  propagate = (host, error) => {
-    for (let interceptor; host; host = host.parentNode)
-      if (interceptor = interceptors.get(host)) return render(interceptor(error), host)
-    throw error
-  },
+	clx = o => keys(o).filter(k => o[k]).join(' ') || null,
 
-  cleanup = (host, cleaner) => {
-    if (!isFn(cleaner)) throwTypeError('Cleaner', cleaner, fn);
-    (cleaners.get(host) ?? cleaners.set(host, new Set)).add(cleaner)
-  },
+	stx = o => entries(o).map(t => t.join(':')).join(';') || null,
 
-  clx = o => keys(o).filter(k => o[k]).join(' ') || null,
-  stx = o => entries(o).map(t => t.join(':')).join(';') || null,
-  keb = o => keys(o).reduce((r, k) => ((r[k.replace(search, replace).toLowerCase()] = o[k]), r), {})
+	keb = o => keys(o).reduce((r, k) => ((r[k.replace(search, replace).toLowerCase()] = o[k]), r), {})
 
 const
-  wm = () => {
-    const instance = new WeakMap, { set } = instance
-    instance.set = (key, value) => (set.call(instance, key, value), value)
-    return instance
-  },
+	{ isArray, from } = Array, { keys, entries } = Object, isFunction = v => typeof v == 'function',
+
+	noop = () => { }, ref = v => (...args) => args.length ? v = args[0] : v,
+
+	map = list => list.reduce(set, new Map), set = (m, v, i) => (m.set(v, i), m),
+
+	some = (a, b) => (isArray(a) && isArray(b)) ? a.some((v, i) => v !== b[i]) : a !== b,
+
+	reduce = v => from(v).reduce(assign, {}), assign = (v, { name, value }) => ((v[name] = value), v),
+
+	proxy = { firstChild: null, insertBefore: node => proxy.firstChild ??= node },
+
+	search = /([a-z0-9])([A-Z])/g, replace = '$1-$2',
+
+	normalize = function* (h, buffer = ref(''), root = true) {
+
+		let text
+
+		for (h of isArray(h) ? h : [h]) {
+			if (h == null || typeof h == 'boolean') continue
+			if (typeof h.nodeName == 'string') ((text = buffer()) && (buffer(''), yield text)), yield h
+			else if (isFunction(h.nodeName)) yield* normalize(h.nodeName(h), buffer, false)
+			else isArray(h) ? yield* normalize(h, buffer, false) : buffer(buffer() + h)
+		}
+
+		root && (text = buffer()) && (yield text)
+	},
+
+	update = (props, host) => {
+
+		const prev = host.$props ?? (host.hasAttributes() ? reduce(host.attributes) : {})
+
+		for (const name in { ...prev, ...props }) {
+
+			let value = props[name]
+
+			if (value !== prev[name])
+				if (name.startsWith('set:')) host[name.slice(4)] = value
+				else if (value == null || value === false) host.removeAttribute(name)
+				else host.setAttribute(name, value === true ? '' : value)
+		}
+
+		host.$props = props
+	},
 
-  throwTypeError = (name, value, expected) => {
-    throw new TypeError(`Expected ${name} to be of type ${expected}, got ${typeof value} instead`)
-  },
+	before = (host, node, child) => {
+		if (node.contains?.(document.activeElement)) {
 
-  every = (a, b) => a === b || isArray(a) && isArray(b) && a.length == b.length && a.every((v, i) => v === b[i]),
-  apply = (o, { name, value }) => ((o[name] = value), o),
-  reduce = list => from(list).reduce(apply, {}),
-  isFn = v => typeof v == fn,
+			const ref = node.nextSibling
 
-  { keys, entries } = Object, { isArray, from } = Array,
+			while (child && child !== node) {
+				const next = child.nextSibling
+				host.insertBefore(child, ref)
+				child = next
+			}
 
-  fn = 'function', search = /([a-z0-9])([A-Z])/g, replace = '$1-$2',
+		} else host.insertBefore(node, child)
+	},
 
-  keyed = wm(), deps = wm(), memo = wm(), renders = wm(), provisions = wm(), interceptors = wm(), cleaners = wm(), cache = wm(),
+	iterate = (host, root, each, by, fn, ref) => {
 
-  normalize = function* (h, host) {
+		each = isArray(each) ? each : []
+		by = isFunction(by) ? by : v => v
+		fn = isFunction(fn) ? fn : noop
 
-    let type, buffer = ''
+		const
+			map = host.$for ??= new Map,
+			del = node => map.delete(node.$key),
+			clr = each !== host.$each,
+			len = (host.$each = each).length,
+			a = from(host.childNodes),
+			b = new Array(len)
 
-    for (h of isFn(h?.[Symbol.iterator]) ? h : [h]) {
+		clr && map.clear()
 
-      if (h == null || (type = typeof h) == 'boolean') continue
+		for (let last, index = 0; index < len; index++) {
 
-      if (type == 'string' || type == 'number') {
-        buffer += h
-        continue
-      }
+			const item = each[index], key = by(item, index)
 
-      if ('nodeName' in Object(h)) {
+			proxy.firstChild = (clr ? a[index] : map.get(key)) ?? last?.cloneNode(true)
+			render(fn(item), proxy, proxy.firstChild?.nextSibling, root)
 
-        if (isFn(h.nodeName)) {
-          yield* normalize(h.nodeName(h, host), host)
-          continue
-        }
+			last = proxy.firstChild
+			proxy.firstChild = null
 
-        if (buffer) {
-          yield buffer
-          buffer = ''
-        }
+			map.set(last.$key = key, b[index] = last)
+		}
 
-        yield h
-        continue
-      }
+		arrange(host, a, b, del)
+		isFunction(ref) && ref(host, root)
+	},
 
-      isFn(h[Symbol.iterator]) ? yield* normalize(h, host) : buffer += h
-    }
+	arrange = (host, a, b, dispose = noop) => {
 
-    if (buffer) yield buffer
-  },
+		const aLen = a.length, bLen = b.length
 
-  update = (props, host) => {
+		let aIndex = 0, bIndex = 0, aValue, bValue, aMap, bMap, i
 
-    const prev = cache.get(host) ?? (host.hasAttributes() ? reduce(host.attributes) : {})
+		while (aIndex !== aLen || bIndex !== bLen) {
 
-    for (const name in { ...prev, ...props }) {
+			aValue = a[aIndex]
+			bValue = b[bIndex]
 
-      let value = props[name]
+			if (aValue === null) aIndex++
+			else if (bLen <= bIndex) aIndex++, dispose(host.removeChild(aValue))
+			else if (aLen <= aIndex) bIndex++, host.appendChild(bValue)
+			else if (aValue === bValue) aIndex++, bIndex++
+			else {
 
-      if (value === prev[name]) continue
+				aMap ??= map(a)
+				bMap ??= map(b)
 
-      if (name.startsWith('set:')) {
-        host[name.slice(4)] = value
-        continue
-      }
+				if (bMap.get(aValue) == null) aIndex++, dispose(host.removeChild(aValue))
+				else {
 
-      if (value === true) value = ''
-      else if (value == null || value === false) {
-        host.removeAttribute(name)
-        continue
-      }
+					host.insertBefore(bValue, aValue), bIndex++
 
-      host.setAttribute(name, value)
-    }
+					if ((i = aMap.get(bValue)) != null) {
+						if (i > aIndex + 1) aIndex++
+						a[i] = null
+					}
+				}
+			}
+		}
+	},
 
-    cache.set(host, props)
-  },
+	run = (host, root, setup, params, ref) => {
 
-  before = (host, child, node) => {
-    if (node.contains?.(document.activeElement)) {
+		host.$root = root
+		host.$setup ??= isFunction(setup) ? setup : noop
+		host.$params = { ...setup.params, ...params }
 
-      const ref = node.nextSibling
+		refresh(host)
+		isFunction(ref) && ref(host, root)
+	},
 
-      while (child && child !== node) {
-        const next = child.nextSibling
-        host.insertBefore(child, ref)
-        child = next
-      }
+	dispose = host => {
 
-    } else host.insertBefore(node, child)
-  },
+		const { $cleanups } = host
 
-  dispose = host => {
-    for (const child of host.children) dispose(child)
-    for (const cleaner of cleaners.get(host) ?? []) cleaner(host)
-  }
+		if ($cleanups) {
+			for (let fn of $cleanups) fn(host)
+			$cleanups.clear()
+		}
+	}

package/index.min.js

@@ -1 +1 @@
-var ajo=(()=>{var d=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var W=Object.prototype.hasOwnProperty;var I=(e,n)=>{for(var t in n)d(e,t,{get:n[t],enumerable:!0})},K=(e,n,t,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of O(n))!W.call(e,i)&&i!==t&&d(e,i,{get:()=>n[i],enumerable:!(r=F(n,i))||r.enumerable});return e};var L=e=>K(d({},"__esModule",{value:!0}),e);var re={};I(re,{Fragment:()=>Z,cleanup:()=>J,clx:()=>P,component:()=>q,consume:()=>G,h:()=>A,intercept:()=>H,keb:()=>R,propagate:()=>E,provide:()=>D,refresh:()=>j,render:()=>c,stx:()=>Q});const Z=({children:e})=>e,A=(e,n,...t)=>(t=t.length==0?null:t.length==1?t[0]:t,{children:t,...n,nodeName:e}),q=e=>({is:n,key:t,host:r,ref:i,...l})=>A(n??e.is??"div",{key:t,...e.host,...r,skip:!0,ref:o=>(j(o,l,e),f(i)&&i(o))}),c=(e,n)=>{let t=n.firstChild,r,i=x.get(n);for(e of m(e,n)){if(typeof e=="string"){for(r=t;r&&r.nodeType!=3;r=r.nextSibling);r?r.data!==e&&(r.data=e):r=document.createTextNode(e)}else if(e instanceof Node)r=e;else{const{key:l,nodeName:o,skip:M,block:p,children:z,ref:b,...B}=e;if(!(l!=null&&(r=i?.get(l))))for(r=t;r&&r.localName!=o;r=r.nextSibling);r||=document.createElement(o),l!=null&&(i||=x.set(n,new Map)).set(l,r),ne(B,r),!(M||p!=null&&U(S.get(r),S.set(r,p)))&&c(z,r),f(b)&&b(r)}r===t?t=t.nextSibling:te(n,t,r)}for(;t;){const l=t.nextSibling;n.removeChild(t).nodeType==1&&C(t),t=l}},j=(e,n,t)=>{try{t&&!f(t)&&s("Setup",t,u),n=n?v.set(e,{...t?.props,...n}):v.get(e)??{},c((N.get(e)??N.set(e,t(n,e)))(n,e),e)}catch(r){E(e,r)}},D=(e,n,t)=>(g.get(e)??g.set(e,new Map)).set(n,t),G=(e,n,t)=>{let r;for(;e;){if((r=g.get(e))&&r.has(n))return r.get(n);e=e.parentNode}return t},H=(e,n)=>{f(n)||s("Interceptor",n,u),$.set(e,n)},E=(e,n)=>{for(let t;e;e=e.parentNode)if(t=$.get(e))return c(t(n),e);throw n},J=(e,n)=>{f(n)||s("Cleaner",n,u),(y.get(e)??y.set(e,new Set)).add(n)},P=e=>T(e).filter(n=>e[n]).join(" ")||null,Q=e=>Y(e).map(n=>n.join(":")).join(";")||null,R=e=>T(e).reduce((n,t)=>(n[t.replace(h,ee).toLowerCase()]=e[t],n),{}),a=()=>{const e=new WeakMap,{set:n}=e;return e.set=(t,r)=>(n.call(e,t,r),r),e},s=(e,n,t)=>{throw new TypeError(`Expected ${e} to be of type ${t}, got ${typeof n} instead`)},U=(e,n)=>e===n||w(e)&&w(n)&&e.length==n.length&&e.every((t,r)=>t===n[r]),V=(e,{name:n,value:t})=>(e[n]=t,e),X=e=>_(e).reduce(V,{}),f=e=>typeof e==u,{keys:T,entries:Y}=Object,{isArray:w,from:_}=Array,u="function",h=/([a-z0-9])([A-Z])/g,ee="$1-$2",x=a(),S=a(),v=a(),N=a(),g=a(),$=a(),y=a(),k=a(),m=function*(e,n){let t,r="";for(e of f(e?.[Symbol.iterator])?e:[e])if(!(e==null||(t=typeof e)=="boolean")){if(t=="string"||t=="number"){r+=e;continue}if("nodeName"in Object(e)){if(f(e.nodeName)){yield*m(e.nodeName(e,n),n);continue}r&&(yield r,r=""),yield e;continue}f(e[Symbol.iterator])?yield*m(e,n):r+=e}r&&(yield r)},ne=(e,n)=>{const t=k.get(n)??(n.hasAttributes()?X(n.attributes):{});for(const r in{...t,...e}){let i=e[r];if(i!==t[r]){if(r.startsWith("set:")){n[r.slice(4)]=i;continue}if(i===!0)i="";else if(i==null||i===!1){n.removeAttribute(r);continue}n.setAttribute(r,i)}}k.set(n,e)},te=(e,n,t)=>{if(t.contains?.(document.activeElement)){const r=t.nextSibling;for(;n&&n!==t;){const i=n.nextSibling;e.insertBefore(n,r),n=i}}else e.insertBefore(t,n)},C=e=>{for(const n of e.children)C(n);for(const n of y.get(e)??[])n(e)};return L(re);})();
+var ajo=(()=>{var y=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var z=Object.prototype.hasOwnProperty;var E=(e,n)=>{for(var i in n)y(e,i,{get:n[i],enumerable:!0})},I=(e,n,i,l)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of L(n))!z.call(e,r)&&r!==i&&y(e,r,{get:()=>n[r],enumerable:!(l=F(n,r))||l.enumerable});return e};var T=e=>I(y({},"__esModule",{value:!0}),e);var ae={};E(ae,{For:()=>O,Fragment:()=>V,cleanup:()=>G,clx:()=>H,component:()=>W,consume:()=>q,h:()=>N,intercept:()=>D,keb:()=>K,propagate:()=>M,provide:()=>Z,refresh:()=>A,render:()=>x,stx:()=>J});var S=require("element-notifier");const V=({children:e})=>e,O=({is:e,each:n,by:i,children:l,ref:r,...t})=>N(e??"div",{...t,skip:!0,ref:(a,f)=>ie(a,f,n,i,l,r)}),N=(e,n,...i)=>({children:i.length==0?null:i.length==1?i[0]:i,...n,nodeName:e}),x=(e,n,i,l=n)=>{let r=n.firstChild,t;l==n&&(l.$mo??=(0,S.notify)((a,f)=>f||l.contains(a)||te(a),l));for(e of C(e)){if(e instanceof Node)t=e;else if(typeof e=="string"){for(t=r;t!=i&&t.nodeType!=3;t=t.nextSibling);t==i?t=document.createTextNode(e):t.data!=e&&(t.data=e)}else{const{nodeName:a,block:f,skip:p,children:d,ref:o,...u}=e;for(t=r;t!=i&&t.localName!=a;t=t.nextSibling);t==i&&(t=document.createElement(a)),(f==null||U(t.$deps,t.$deps=f))&&(ee(u,t),p||x(d,t,null,l),c(o)&&o(t,l))}t==r?r=r.nextSibling:ne(n,t,r)}for(;r!=i;){const a=r.nextSibling;n.removeChild(r),r=a}},W=e=>({is:n,props:i,ref:l,...r})=>N(n??e.is??"div",{...e.props,...i,skip:!0,ref:(t,a)=>re(t,a,e,r,l)}),A=e=>{try{x((e.$render??=e.$setup(e))(e.$params),e,null,e.$root)}catch(n){M(e,n)}},Z=(e,n,i)=>(e.$provisions??=new Map).set(n,i),q=(e,n,i)=>{for(let l;e;e=e.parentNode)if((l=e.$provisions)&&l.has(n))return l.get(n);return i},D=(e,n)=>c(n)&&(e.$interceptor=n),M=(e,n)=>{for(let i;e;e=e.parentNode)if(c(i=e.$interceptor))return x(i(n));throw n},G=(e,n)=>c(n)&&(e.$cleanups??=new Set).add(n),H=e=>B(e).filter(n=>e[n]).join(" ")||null,J=e=>P(e).map(n=>n.join(":")).join(";")||null,K=e=>B(e).reduce((n,i)=>(n[i.replace(_,h).toLowerCase()]=e[i],n),{}),{isArray:g,from:j}=Array,{keys:B,entries:P}=Object,c=e=>typeof e=="function",b=()=>{},Q=e=>(...n)=>n.length?e=n[0]:e,k=e=>e.reduce(R,new Map),R=(e,n,i)=>(e.set(n,i),e),U=(e,n)=>g(e)&&g(n)?e.some((i,l)=>i!==n[l]):e!==n,X=e=>j(e).reduce(Y,{}),Y=(e,{name:n,value:i})=>(e[n]=i,e),$={firstChild:null,insertBefore:e=>$.firstChild??=e},_=/([a-z0-9])([A-Z])/g,h="$1-$2",C=function*(e,n=Q(""),i=!0){let l;for(e of g(e)?e:[e])e==null||typeof e=="boolean"||(typeof e.nodeName=="string"?((l=n())&&(n(""),yield l),yield e):c(e.nodeName)?yield*C(e.nodeName(e),n,!1):g(e)?yield*C(e,n,!1):n(n()+e));i&&(l=n())&&(yield l)},ee=(e,n)=>{const i=n.$props??(n.hasAttributes()?X(n.attributes):{});for(const l in{...i,...e}){let r=e[l];r!==i[l]&&(l.startsWith("set:")?n[l.slice(4)]=r:r==null||r===!1?n.removeAttribute(l):n.setAttribute(l,r===!0?"":r))}n.$props=e},ne=(e,n,i)=>{if(n.contains?.(document.activeElement)){const l=n.nextSibling;for(;i&&i!==n;){const r=i.nextSibling;e.insertBefore(i,l),i=r}}else e.insertBefore(n,i)},ie=(e,n,i,l,r,t)=>{i=g(i)?i:[],l=c(l)?l:s=>s,r=c(r)?r:b;const a=e.$for??=new Map,f=s=>a.delete(s.$key),p=i!==e.$each,d=(e.$each=i).length,o=j(e.childNodes),u=new Array(d);p&&a.clear();for(let s,m=0;m<d;m++){const v=i[m],w=l(v,m);$.firstChild=(p?o[m]:a.get(w))??s?.cloneNode(!0),x(r(v),$,$.firstChild?.nextSibling,n),s=$.firstChild,$.firstChild=null,a.set(s.$key=w,u[m]=s)}le(e,o,u,f),c(t)&&t(e,n)},le=(e,n,i,l=b)=>{const r=n.length,t=i.length;let a=0,f=0,p,d,o,u,s;for(;a!==r||f!==t;)p=n[a],d=i[f],p===null?a++:t<=f?(a++,l(e.removeChild(p))):r<=a?(f++,e.appendChild(d)):p===d?(a++,f++):(o??=k(n),u??=k(i),u.get(p)==null?(a++,l(e.removeChild(p))):(e.insertBefore(d,p),f++,(s=o.get(d))!=null&&(s>a+1&&a++,n[s]=null)))},re=(e,n,i,l,r)=>{e.$root=n,e.$setup??=c(i)?i:b,e.$params={...i.params,...l},A(e),c(r)&&r(e,n)},te=e=>{const{$cleanups:n}=e;if(n){for(let i of n)i(e);n.clear()}};return T(ae);})();

package/license

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2022, Cristian Falcone, @cristianfalcone
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
+OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajo",
-  "version": "0.0.14",
+  "version": "0.0.17",
   "description": "ajo is a JavaScript view library for building user interfaces",
   "type": "module",
   "module": "index.js",
@@ -17,6 +17,13 @@
     "index.js",
     "index.min.js"
   ],
+  "keywords": [
+    "ui",
+    "frontend",
+    "web",
+    "dom",
+    "jsx"
+  ],
   "scripts": {
     "build": "npm run build:require && npm run build:browser",
     "build:require": "esbuild --format=cjs --out-extension:.js=.cjs --outdir=. index.js",
@@ -30,8 +37,11 @@
   "bugs": "https://github.com/cristianfalcone/ajo/issues",
   "homepage": "https://github.com/cristianfalcone/ajo#readme",
   "devDependencies": {
-    "backdom": "^0.0.4",
-    "esbuild": "^0.14.51",
+    "backdom": "^0.0.6",
+    "esbuild": "^0.15.6",
     "uvu": "^0.5.6"
+  },
+  "dependencies": {
+    "element-notifier": "^1.1.2"
   }
 }

package/readme.md

@@ -1,13 +1,13 @@
 # ajo
 ajo is a JavaScript view library for building user interfaces
 
-## Install
+## install
 
 ```sh
 npm install ajo
 ```
 
-## Render JSX to a DOM element
+## render JSX to a DOM element
 
 ```jsx
 /** @jsx h */
@@ -18,7 +18,7 @@ document.body.innerHTML = '<div>Hello World</div>'
 render(<div>Goodbye World</div>, document.body)
 ```
 
-## Stateless Component
+## stateless component
 
 ```jsx
 /** @jsx h */
@@ -29,26 +29,53 @@ const Greet = ({ name }) => <div>Hello {name}</div>
 render(<Greet name="World" />, document.body)
 ```
 
-## Stateful Component
+## stateful component
 
 ```jsx
 /** @jsx h */
 import { h, component, refresh, render } from 'ajo'
 
-const Counter = component(({ start = 0 }, host) => {
-  
-  let count = start
-  
+const Counter = component(host => {
+
+  let count = 0
+
   const increment = () => {
     count++
     refresh(host)
   }
-  
+
   return () =>
     <button set:onclick={increment}>
       Current: {count}
     </button>
 })
 
-render(<Counter start={1} />, document.body)
+render(<Counter />, document.body)
+```
+
+## rendering lists
+
+```jsx
+/** @jsx h */
+import { h, render, component, For } from 'ajo'
+
+const products = [
+  { title: 'Cabbage', isFruit: false, id: 1 },
+  { title: 'Garlic', isFruit: false, id: 2 },
+  { title: 'Apple', isFruit: true, id: 3 },
+];
+
+const ShoppingList = component(() => {
+  const listItem = product =>
+    <li style={stx({ color: product.isFruit ? 'magenta' : 'darkgreen' })}>
+      {product.title}
+    </li>
+
+  return ({ products }) => <For each={products} is="ul">{listItem}</For>
+})
+
+render(<ShoppingList producst={products} />, document.body)
 ```
+
+## acknowledgments
+ajo takes heavy inspiration from [Incremental DOM](https://github.com/google/incremental-dom) and [Crank.js](https://github.com/bikeshaving/crank)