ajo 0.0.16 → 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,162 +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) => ({ nodeName, is, key, block, ref: ref2, host, ...props }) => h(is ?? setup.is ?? "div", {
-  key,
+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: (node) => {
-    node.$params = { ...setup.props, ...props };
-    node.$render ??= setup(node.$params, node);
-    if (!(block != null && every(node.$deps, node.$deps = block))) {
-      update({ ...setup.host, ...host }, node);
-      refresh(node);
-    }
-    isFn(ref2) && ref2(node);
-  }
-}), render = (h2, host) => {
-  const nodes = [];
+  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;
-  for (h2 of normalize(h2, host)) {
-    if (typeof h2 == "string") {
-      for (node = child; node; node = node.nextSibling)
+  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 { nodeName, key, skip, block, ref: ref2, children, ...props } = h2;
-      if (key != null) {
-        (host.$keyed ??= /* @__PURE__ */ new Map()).set(key, node = host.$keyed.get(key) ?? document.createElement(nodeName));
-      } else {
-        for (node = child; node; node = node.nextSibling)
-          if (node.localName == nodeName)
-            break;
-        node ??= document.createElement(nodeName);
-      }
-      if (!(skip || block != null && every(node.$deps, node.$deps = block))) {
+      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);
-        render(children, node);
+        skip || render(children, node, null, root);
+        isFunction(ref2) && ref2(node, root);
       }
-      isFn(ref2) && ref2(node);
     }
-    nodes.push(node) && node === child && (child = child.nextSibling);
+    node == child ? child = child.nextSibling : before(host, node, child);
+  }
+  while (child != to) {
+    const next = child.nextSibling;
+    host.removeChild(child);
+    child = next;
   }
-  arrange(host, [...host.childNodes], nodes);
-}, refresh = (host) => {
+}, 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 {
-    render(host.$render(host.$params, host), host);
+    render((host.$render ??= host.$setup(host))(host.$params), host, null, host.$root);
   } catch (error) {
     propagate(host, error);
   }
 }, provide = (host, key, value) => (host.$provisions ??= /* @__PURE__ */ new Map()).set(key, value), consume = (host, key, fallback) => {
-  let map;
-  while (host) {
-    if ((map = host.$provisions) && map.has(key))
-      return map.get(key);
-    host = host.parentNode;
-  }
+  for (let map2; host; host = host.parentNode)
+    if ((map2 = host.$provisions) && map2.has(key))
+      return map2.get(key);
   return fallback;
-}, intercept = (host, fn) => host.$interceptor = fn, propagate = (host, error) => {
+}, intercept = (host, fn) => isFunction(fn) && (host.$interceptor = fn), propagate = (host, error) => {
   for (let fn; host; host = host.parentNode)
-    if (fn = host.$interceptor)
-      return render(fn(error), host);
+    if (isFunction(fn = host.$interceptor))
+      return render(fn(error));
   throw error;
-}, cleanup = (host, 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 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, {}), ref = (v) => (...args) => args.length ? v = args[0] : v, isFn = (v) => typeof v == "function", { keys, entries } = Object, { isArray, from } = Array, search = /([a-z0-9])([A-Z])/g, replace = "$1-$2", it = Symbol.iterator, normalize = function* (h2, host, buffer = ref(""), root = true) {
-  let type, text;
-  for (h2 of isFn(h2?.[it]) ? h2 : [h2]) {
-    if (h2 == null || (type = typeof h2) == "boolean")
-      continue;
-    if (type == "string" || type == "number") {
-      buffer(buffer() + 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;
-    }
-    if ("nodeName" in Object(h2)) {
-      if (isFn(h2.nodeName)) {
-        yield* normalize(h2.nodeName(h2), host, buffer, false);
-        continue;
-      }
-      if (text = buffer()) {
-        yield text;
-        buffer("");
-      }
-      yield h2;
-      continue;
-    }
-    isFn(h2[it]) ? yield* normalize(h2, host, buffer, false) : buffer(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 (root && (text = buffer()))
-    yield text;
+  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]) {
-      continue;
-    }
-    if (name.startsWith("set:")) {
-      host[name.slice(4)] = value;
-      continue;
-    }
-    if (value == null || value === false) {
-      host.removeAttribute(name);
-      continue;
-    }
-    host.setAttribute(name, value === true ? "" : 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);
   }
   host.$props = props;
-}, arrange = (host, a, b) => {
-  const aLength = a.length, bLength = b.length;
-  let aIndex = 0, bIndex = 0, aValue, bValue, aMap, bMap, i;
-  while (aIndex !== aLength || bIndex !== bLength) {
-    aValue = a[aIndex], bValue = b[bIndex];
-    if (aValue === null) {
-      aIndex++;
-      continue;
-    }
-    if (bLength <= bIndex) {
-      host.removeChild(aValue).nodeType == 1 && dispose(aValue);
-      aIndex++;
-      continue;
+}, before = (host, node, child) => {
+  if (node.contains?.(document.activeElement)) {
+    const ref2 = node.nextSibling;
+    while (child && child !== node) {
+      const next = child.nextSibling;
+      host.insertBefore(child, ref2);
+      child = next;
     }
-    if (aLength <= aIndex) {
-      host.insertBefore(bValue, aValue);
-      bIndex++;
-      continue;
-    }
-    if (aValue === bValue) {
-      aIndex++;
-      bIndex++;
-      continue;
-    }
-    if (!aMap) {
-      aMap = /* @__PURE__ */ new Map();
-      bMap = /* @__PURE__ */ new Map();
-      for (i = 0; i < aLength; i++)
-        aMap.set(a[i], i);
-      for (i = 0; i < bLength; i++)
-        bMap.set(b[i], i);
-    }
-    if (bMap.get(aValue) == null) {
-      host.removeChild(aValue).nodeType == 1 && dispose(aValue);
+  } 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++;
-      continue;
-    }
-    host.insertBefore(bValue, aValue);
-    bIndex++;
-    if ((i = aMap.get(bValue)) != null) {
-      if (i > aIndex + 1)
-        aIndex++;
-      a[i] = null;
+    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 fn of host.$cleanups ?? [])
-    fn(host);
+  const { $cleanups } = host;
+  if ($cleanups) {
+    for (let fn of $cleanups)
+      fn(host);
+    $cleanups.clear();
+  }
 };

package/index.js

@@ -1,230 +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 => ({ nodeName, is, key, block, ref, host, ...props }) =>
-    h(is ?? setup.is ?? 'div', {
-      key, skip: true, ref: node => {
+	For = ({ is, each, by, children, ref, ...props }) => h(is ?? 'div', {
+		...props, skip: true, ref: (host, root) => iterate(host, root, each, by, children, ref)
+	}),
 
-        node.$params = { ...setup.props, ...props }
-        node.$render ??= setup(node.$params, node)
+	h = (nodeName, props, ...children) => ({ children: children.length == 0 ? null : children.length == 1 ? children[0] : children, ...props, nodeName }),
 
-        if (!(block != null && every(node.$deps, node.$deps = block))) {
-          update({ ...setup.host, ...host }, node)
-          refresh(node)
-        }
+	render = (h, host, to, root = host) => {
 
-        isFn(ref) && ref(node)
-      }
-    }),
+		let child = host.firstChild, node
 
-  render = (h, host) => {
+		root == host && (root.$mo ??= notify((host, connected) => connected || root.contains(host) || dispose(host), root))
 
-    const nodes = []
-    let child = host.firstChild, node
+		for (h of normalize(h)) {
 
-    for (h of normalize(h, host)) {
+			if (h instanceof Node) node = h
 
-      if (typeof h == 'string') {
+			else if (typeof h == 'string') {
 
-        for (node = child; node; node = node.nextSibling) if (node.nodeType == 3) break
-        node ? node.data !== h && (node.data = h) : node = document.createTextNode(h)
+				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)
 
-      } else if (h instanceof Node) {
+			} else {
 
-        node = h
+				const { nodeName, block, skip, children, ref, ...props } = h
 
-      } else {
+				for (node = child; node != to; node = node.nextSibling) if (node.localName == nodeName) break
+				node == to && (node = document.createElement(nodeName))
 
-        const { nodeName, key, skip, block, ref, children, ...props } = h
+				if (block == null || some(node.$deps, node.$deps = block)) {
+					update(props, node)
+					skip || render(children, node, null, root)
+					isFunction(ref) && ref(node, root)
+				}
+			}
 
-        if (key != null) {
-          (host.$keyed ??= new Map).set(key, node = host.$keyed.get(key) ?? document.createElement(nodeName))
-        } else {
-          for (node = child; node; node = node.nextSibling) if (node.localName == nodeName) break
-          node ??= document.createElement(nodeName)
-        }
+			node == child ? child = child.nextSibling : before(host, node, child)
+		}
 
-        if (!(skip || block != null && every(node.$deps, node.$deps = block))) {
-          update(props, node)
-          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)
+	}),
 
-      nodes.push(node) && node === child && (child = child.nextSibling)
-    }
+	refresh = host => {
+		try {
+			render((host.$render ??= host.$setup(host))(host.$params), host, null, host.$root)
+		} catch (error) {
+			propagate(host, error)
+		}
+	},
 
-    arrange(host, [...host.childNodes], nodes)
-  },
+	provide = (host, key, value) => (host.$provisions ??= new Map).set(key, value),
 
-  refresh = host => {
-    try {
-      render(host.$render(host.$params, 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) => (host.$provisions ??= new Map).set(key, value),
+	intercept = (host, fn) => isFunction(fn) && (host.$interceptor = fn),
 
-  consume = (host, key, fallback) => {
-    let map
-    while (host) {
-      if ((map = host.$provisions) && 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, fn) => host.$interceptor = fn,
+	cleanup = (host, fn) => isFunction(fn) && (host.$cleanups ??= new Set).add(fn),
 
-  propagate = (host, error) => {
-    for (let fn; host; host = host.parentNode) if (fn = host.$interceptor) return render(fn(error), host)
-    throw error
-  },
+	clx = o => keys(o).filter(k => o[k]).join(' ') || null,
 
-  cleanup = (host, fn) => (host.$cleanups ??= new Set).add(fn),
+	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
-  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, {}),
-  ref = v => (...args) => args.length ? v = args[0] : v,
-  isFn = v => typeof v == 'function',
+	{ 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) => {
 
-  { keys, entries } = Object, { isArray, from } = Array,
+		const prev = host.$props ?? (host.hasAttributes() ? reduce(host.attributes) : {})
 
-  search = /([a-z0-9])([A-Z])/g, replace = '$1-$2', it = Symbol.iterator,
+		for (const name in { ...prev, ...props }) {
 
-  normalize = function* (h, host, buffer = ref(''), root = true) {
+			let value = props[name]
 
-    let type, text
+			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)
+		}
 
-    for (h of isFn(h?.[it]) ? h : [h]) {
+		host.$props = props
+	},
 
-      if (h == null || (type = typeof h) == 'boolean') continue
+	before = (host, node, child) => {
+		if (node.contains?.(document.activeElement)) {
 
-      if (type == 'string' || type == 'number') {
-        buffer(buffer() + h)
-        continue
-      }
+			const ref = node.nextSibling
 
-      if ('nodeName' in Object(h)) {
+			while (child && child !== node) {
+				const next = child.nextSibling
+				host.insertBefore(child, ref)
+				child = next
+			}
 
-        if (isFn(h.nodeName)) {
-          yield* normalize(h.nodeName(h), host, buffer, false)
-          continue
-        }
+		} else host.insertBefore(node, child)
+	},
 
-        if (text = buffer()) {
-          yield text
-          buffer('')
-        }
+	iterate = (host, root, each, by, fn, ref) => {
 
-        yield h
-        continue
-      }
+		each = isArray(each) ? each : []
+		by = isFunction(by) ? by : v => v
+		fn = isFunction(fn) ? fn : noop
 
-      isFn(h[it]) ? yield* normalize(h, host, buffer, false) : buffer(buffer() + h)
-    }
+		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)
 
-    if (root && (text = buffer())) yield text
-  },
+		clr && map.clear()
 
-  update = (props, host) => {
+		for (let last, index = 0; index < len; index++) {
 
-    const prev = host.$props ?? (host.hasAttributes() ? reduce(host.attributes) : {})
+			const item = each[index], key = by(item, index)
 
-    for (const name in { ...prev, ...props }) {
+			proxy.firstChild = (clr ? a[index] : map.get(key)) ?? last?.cloneNode(true)
+			render(fn(item), proxy, proxy.firstChild?.nextSibling, root)
 
-      let value = props[name]
+			last = proxy.firstChild
+			proxy.firstChild = null
 
-      if (value === prev[name]) {
-        continue
-      }
+			map.set(last.$key = key, b[index] = last)
+		}
 
-      if (name.startsWith('set:')) {
-        host[name.slice(4)] = value
-        continue
-      }
+		arrange(host, a, b, del)
+		isFunction(ref) && ref(host, root)
+	},
 
-      if (value == null || value === false) {
-        host.removeAttribute(name)
-        continue
-      }
+	arrange = (host, a, b, dispose = noop) => {
 
-      host.setAttribute(name, value === true ? '' : value)
-    }
+		const aLen = a.length, bLen = b.length
 
-    host.$props = props
-  },
+		let aIndex = 0, bIndex = 0, aValue, bValue, aMap, bMap, i
 
-  arrange = (host, a, b) => {
+		while (aIndex !== aLen || bIndex !== bLen) {
 
-    const aLength = a.length, bLength = b.length
-    let aIndex = 0, bIndex = 0, aValue, bValue, aMap, bMap, i
+			aValue = a[aIndex]
+			bValue = b[bIndex]
 
-    while (aIndex !== aLength || bIndex !== bLength) {
+			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 {
 
-      aValue = a[aIndex], bValue = b[bIndex]
+				aMap ??= map(a)
+				bMap ??= map(b)
 
-      if (aValue === null) {
-        aIndex++
-        continue
-      }
+				if (bMap.get(aValue) == null) aIndex++, dispose(host.removeChild(aValue))
+				else {
 
-      if (bLength <= bIndex) {
-        host.removeChild(aValue).nodeType == 1 && dispose(aValue)
-        aIndex++
-        continue
-      }
+					host.insertBefore(bValue, aValue), bIndex++
 
-      if (aLength <= aIndex) {
-        host.insertBefore(bValue, aValue)
-        bIndex++
-        continue
-      }
+					if ((i = aMap.get(bValue)) != null) {
+						if (i > aIndex + 1) aIndex++
+						a[i] = null
+					}
+				}
+			}
+		}
+	},
 
-      if (aValue === bValue) {
-        aIndex++
-        bIndex++
-        continue
-      }
+	run = (host, root, setup, params, ref) => {
 
-      if (!aMap) {
-        aMap = new Map()
-        bMap = new Map()
-        for (i = 0; i < aLength; i++) aMap.set(a[i], i)
-        for (i = 0; i < bLength; i++) bMap.set(b[i], i)
-      }
+		host.$root = root
+		host.$setup ??= isFunction(setup) ? setup : noop
+		host.$params = { ...setup.params, ...params }
 
-      if (bMap.get(aValue) == null) {
-        host.removeChild(aValue).nodeType == 1 && dispose(aValue)
-        aIndex++
-        continue
-      }
+		refresh(host)
+		isFunction(ref) && ref(host, root)
+	},
 
-      host.insertBefore(bValue, aValue)
-      bIndex++
+	dispose = host => {
 
-      if ((i = aMap.get(bValue)) != null) {
-        if (i > aIndex + 1) aIndex++
-        a[i] = null
-      }
-    }
-  },
+		const { $cleanups } = host
 
-  dispose = host => {
-    for (const child of host.children) dispose(child)
-    for (const fn of host.$cleanups ?? []) fn(host)
-  }
+		if ($cleanups) {
+			for (let fn of $cleanups) fn(host)
+			$cleanups.clear()
+		}
+	}

package/index.min.js

@@ -1 +1 @@
-var ajo=(()=>{var m=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var S=Object.prototype.hasOwnProperty;var C=(e,n)=>{for(var t in n)m(e,t,{get:n[t],enumerable:!0})},T=(e,n,t,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of j(n))!S.call(e,i)&&i!==t&&m(e,i,{get:()=>n[i],enumerable:!(r=M(n,i))||r.enumerable});return e};var L=e=>T(m({},"__esModule",{value:!0}),e);var R={};C(R,{Fragment:()=>z,cleanup:()=>O,clx:()=>V,component:()=>B,consume:()=>F,h:()=>v,intercept:()=>I,keb:()=>Z,propagate:()=>w,provide:()=>E,refresh:()=>x,render:()=>s,stx:()=>W});const z=({children:e})=>e,v=(e,n,...t)=>(t=t.length==0?null:t.length==1?t[0]:t,{children:t,...n,nodeName:e}),B=e=>({nodeName:n,is:t,key:r,block:i,ref:l,host:p,...c})=>v(t??e.is??"div",{key:r,skip:!0,ref:a=>{a.$params={...e.props,...c},a.$render??=e(a.$params,a),i!=null&&k(a.$deps,a.$deps=i)||(A({...e.host,...p},a),x(a)),d(l)&&l(a)}}),s=(e,n)=>{const t=[];let r=n.firstChild,i;for(e of y(e,n)){if(typeof e=="string"){for(i=r;i&&i.nodeType!=3;i=i.nextSibling);i?i.data!==e&&(i.data=e):i=document.createTextNode(e)}else if(e instanceof Node)i=e;else{const{nodeName:l,key:p,skip:c,block:a,ref:f,children:u,...o}=e;if(p!=null)(n.$keyed??=new Map).set(p,i=n.$keyed.get(p)??document.createElement(l));else{for(i=r;i&&i.localName!=l;i=i.nextSibling);i??=document.createElement(l)}c||a!=null&&k(i.$deps,i.$deps=a)||(A(o,i),s(u,i)),d(f)&&f(i)}t.push(i)&&i===r&&(r=r.nextSibling)}Q(n,[...n.childNodes],t)},x=e=>{try{s(e.$render(e.$params,e),e)}catch(n){w(e,n)}},E=(e,n,t)=>(e.$provisions??=new Map).set(n,t),F=(e,n,t)=>{let r;for(;e;){if((r=e.$provisions)&&r.has(n))return r.get(n);e=e.parentNode}return t},I=(e,n)=>e.$interceptor=n,w=(e,n)=>{for(let t;e;e=e.parentNode)if(t=e.$interceptor)return s(t(n),e);throw n},O=(e,n)=>(e.$cleanups??=new Set).add(n),V=e=>b(e).filter(n=>e[n]).join(" ")||null,W=e=>H(e).map(n=>n.join(":")).join(";")||null,Z=e=>b(e).reduce((n,t)=>(n[t.replace(K,P).toLowerCase()]=e[t],n),{}),k=(e,n)=>e===n||$(e)&&$(n)&&e.length==n.length&&e.every((t,r)=>t===n[r]),q=(e,{name:n,value:t})=>(e[n]=t,e),D=e=>J(e).reduce(q,{}),G=e=>(...n)=>n.length?e=n[0]:e,d=e=>typeof e=="function",{keys:b,entries:H}=Object,{isArray:$,from:J}=Array,K=/([a-z0-9])([A-Z])/g,P="$1-$2",N=Symbol.iterator,y=function*(e,n,t=G(""),r=!0){let i,l;for(e of d(e?.[N])?e:[e])if(!(e==null||(i=typeof e)=="boolean")){if(i=="string"||i=="number"){t(t()+e);continue}if("nodeName"in Object(e)){if(d(e.nodeName)){yield*y(e.nodeName(e),n,t,!1);continue}(l=t())&&(yield l,t("")),yield e;continue}d(e[N])?yield*y(e,n,t,!1):t(t()+e)}r&&(l=t())&&(yield l)},A=(e,n)=>{const t=n.$props??(n.hasAttributes()?D(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==null||i===!1){n.removeAttribute(r);continue}n.setAttribute(r,i===!0?"":i)}}n.$props=e},Q=(e,n,t)=>{const r=n.length,i=t.length;let l=0,p=0,c,a,f,u,o;for(;l!==r||p!==i;){if(c=n[l],a=t[p],c===null){l++;continue}if(i<=p){e.removeChild(c).nodeType==1&&g(c),l++;continue}if(r<=l){e.insertBefore(a,c),p++;continue}if(c===a){l++,p++;continue}if(!f){for(f=new Map,u=new Map,o=0;o<r;o++)f.set(n[o],o);for(o=0;o<i;o++)u.set(t[o],o)}if(u.get(c)==null){e.removeChild(c).nodeType==1&&g(c),l++;continue}e.insertBefore(a,c),p++,(o=f.get(a))!=null&&(o>l+1&&l++,n[o]=null)}},g=e=>{for(const n of e.children)g(n);for(const n of e.$cleanups??[])n(e)};return L(R);})();
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajo",
-  "version": "0.0.16",
+  "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.5",
-    "esbuild": "^0.15.2",
+    "backdom": "^0.0.6",
+    "esbuild": "^0.15.6",
     "uvu": "^0.5.6"
+  },
+  "dependencies": {
+    "element-notifier": "^1.1.2"
   }
 }

package/readme.md

@@ -35,22 +35,46 @@ render(<Greet name="World" />, document.body)
 /** @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