ajo 0.0.20 → 0.0.22

package/index.cjs

@@ -17,27 +17,22 @@ 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,
   component: () => component,
-  consume: () => consume,
   h: () => h,
-  intercept: () => intercept,
-  keb: () => keb,
-  propagate: () => propagate,
-  provide: () => provide,
-  refresh: () => refresh,
   render: () => render,
-  stx: () => stx
+  useCallback: () => useCallback,
+  useCatch: () => useCatch,
+  useEffect: () => useEffect,
+  useHost: () => useHost,
+  useLayout: () => useLayout,
+  useMemo: () => useMemo,
+  useReducer: () => useReducer,
+  useRef: () => useRef,
+  useState: () => useState
 });
 module.exports = __toCommonJS(ajo_exports);
-const Fragment = ({ children }) => children, For = ({ is, each, by, children, ref, ...props }) => h(is ?? "div", {
-  ...props,
-  skip: true,
-  ref: (host) => iterate(host, each, by, children, ref)
-}), h = (nodeName, props, ...children) => {
+const Fragment = ({ children }) => children, h = (nodeName, props, ...children) => {
   const { length } = children;
   children = length == 0 ? null : length == 1 ? children[0] : children;
   return { children, ...props, nodeName };
@@ -52,70 +47,81 @@ const Fragment = ({ children }) => children, For = ({ is, each, by, children, re
         node = node.nextSibling;
       node ? node.data != h2 && (node.data = h2) : node = document.createTextNode(h2);
     } else {
-      const { xmlns = ns, nodeName, key, block, skip, children, ref, ...props } = h2;
+      const { xmlns = ns, nodeName, key, ref, memo, children, [FN]: fn, ...props } = h2;
       while (node && !(node.localName == nodeName && (node.$key ??= key) == key))
         node = node.nextSibling;
       node ??= create(xmlns, nodeName, key);
-      if (block == null || some(node.$deps, node.$deps = block)) {
+      if (isObject(ref)) {
+        ref.current = node;
+        node.$ref = ref;
+      }
+      if (memo == null || some(node.$memo, node.$memo = memo)) {
         update(props, node);
-        skip || render(children, node, xmlns);
-        isFunction(ref) && ref(node);
+        isFunction(fn) ? fn(node) : render(children, node, xmlns);
       }
     }
     node == child ? child = child.nextSibling : before(host, node, child);
   }
   while (child) {
     const next = child.nextSibling;
-    host.removeChild(child);
+    dispose(host.removeChild(child));
     child = next;
   }
-}, component = (setup) => ({ is, props, ref, ...params }) => h(is ?? setup.is ?? "div", {
-  ...setup.props,
+}, component = (fn) => ({ nodeName, as, props, key, ref, memo, ...args }) => h(as ?? fn?.as ?? "c-host", {
+  ...fn?.props,
   ...props,
-  skip: true,
-  ref: (host) => run(host, setup, params, ref)
-}), refresh = (host) => {
-  try {
-    render((host.$render ??= host.$setup(host))(host.$params), host);
-  } catch (error) {
-    propagate(host, error);
+  key,
+  ref,
+  memo,
+  [FN]: (host) => {
+    host.$fn = isFunction(fn) ? fn : noop;
+    host.$args = { ...fn?.args, ...args };
+    schedule(host);
   }
-}, 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, 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), host);
-  throw error;
-}, 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 = () => {
-}, 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), create = (ns, name, key) => {
+}), useReducer = (fn, init) => {
+  const host = useHost(), hooks = useHooks(), [i, stack] = hooks;
+  if (i == stack.length)
+    stack[i] = [
+      isFunction(init) ? init() : init,
+      (value) => {
+        const prev = stack[i][0], next = isFunction(value) ? value(prev) : value;
+        if (is(prev, stack[i][0] = isFunction(fn) ? fn(prev, next) : next))
+          return;
+        runMutations(host);
+      }
+    ];
+  return stack[hooks[0]++];
+}, useMemo = (fn, deps) => {
+  const hooks = useHooks(), [i, stack] = hooks;
+  if (i == stack.length || deps == null || some(deps, stack[i][1]))
+    stack[i] = [fn(), deps];
+  return stack[hooks[0]++][0];
+}, useCatch = (fn) => {
+  const host = useHost(), [value, setValue] = useReducer(), hooks = useHooks(), [i, stack] = hooks;
+  stack[hooks[0]++] = fn;
+  host.$catch ??= (value2) => {
+    isFunction(stack[i]) && stack[i](value2);
+    setValue(value2);
+  };
+  return [value, () => setValue()];
+}, useHost = () => current, useState = (init) => useReducer(null, init), useRef = (current2) => useMemo(() => ({ current: current2 }), []), useCallback = (fn, deps) => useMemo(() => fn, deps), useLayout = (fn, deps) => useFx(fn, deps, "$layout"), useEffect = (fn, deps) => useFx(fn, deps, "$effect");
+const microtask = globalThis.queueMicrotask ?? ((fn) => fn()), task = globalThis.requestAnimationFrame ?? microtask, { isArray, from } = Array, { is } = Object, noop = () => {
+}, FN = Symbol(), isObject = (v) => v && typeof v == "object", isFunction = (v) => typeof v == "function", some = (a, b) => isArray(a) && isArray(b) ? a.some((v, i) => !is(v, b[i])) : !is(a, b), reduce = (v) => from(v).reduce(assign, {}), assign = (v, { name, value }) => (v[name] = value, v), create = (ns, name, key) => {
   const node = ns ? document.createElementNS(ns, name) : document.createElement(name);
   return node.$key = key, node;
-}, proxy = { firstChild: null, insertBefore: (node) => proxy.firstChild ??= node }, handler = {
-  get(target, key) {
-    const value = key == "nextSibling" ? null : Reflect.get(target, key);
-    return isFunction(value) ? value.bind(target) : value;
-  },
-  set(target, key, value) {
-    return Reflect.set(target, key, value);
-  }
-}, search = /([a-z0-9])([A-Z])/g, replace = "$1-$2", normalize = function* (h2, buffer = { t: "" }, root = true) {
-  let t;
+}, normalize = function* (h2, buffer = { data: "" }, root = true) {
+  let data;
   for (h2 of isArray(h2) ? h2 : [h2]) {
     if (h2 == null || typeof h2 == "boolean")
       continue;
     if (typeof h2.nodeName == "string")
-      (t = buffer.t) && (buffer.t = "", yield t), yield h2;
+      (data = buffer.data) && (buffer.data = "", yield data), yield h2;
     else if (isFunction(h2.nodeName))
       yield* normalize(h2.nodeName(h2), buffer, false);
     else
-      isArray(h2) ? yield* normalize(h2, buffer, false) : buffer.t += h2;
+      isArray(h2) ? yield* normalize(h2, buffer, false) : buffer.data += h2;
   }
-  root && (t = buffer.t) && (yield t);
+  root && (data = buffer.data) && (yield data);
 }, update = (props, host) => {
   const prev = host.$props ??= host.hasAttributes() ? reduce(host.attributes) : {};
   for (const name in { ...prev, ...host.$props = props }) {
@@ -138,66 +144,111 @@ const { isArray, from } = Array, { keys, entries } = Object, isFunction = (v) =>
     }
   } else
     host.insertBefore(node, child);
-}, iterate = (host, each, by, fn, ref) => {
-  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.$by), clr = each !== host.$each, len = (host.$each = each).length, a = from(host.childNodes), b = new Array(len);
-  clr && map2.clear();
-  for (let child, index = 0; index < len; index++) {
-    const item = each[index], key = by(item, index);
-    child = clr ? a[index] : map2.get(key);
-    proxy.firstChild = child ? new Proxy(child, handler) : null;
-    render(fn(item, index), proxy);
-    child ??= proxy.firstChild;
-    proxy.firstChild = null;
-    map2.set(child.$by = key, b[index] = child);
+}, useHooks = () => current.$hooks ??= [0, []], useFx = (fn, deps, key) => {
+  const host = useHost(), hooks = useHooks(), [i, stack] = hooks, init = i == stack.length;
+  if (init)
+    (host[key] ??= /* @__PURE__ */ new Set()).add(stack[i] = [null, fn, deps]);
+  else if (deps == null || some(deps, stack[i][2])) {
+    stack[i][1] = fn;
+    stack[i][2] = deps;
   }
-  arrange(host, a, b, del);
-  isFunction(ref) && ref(host);
-}, 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;
-        }
-      }
+  hooks[0]++;
+}, schedule = (host) => {
+  if (host.$idle)
+    return;
+  if (globalThis.navigator?.scheduling?.isInputPending()) {
+    host.$idle = requestIdleCallback(() => {
+      host.$idle = null;
+      schedule(host);
+    });
+    return;
+  }
+  runComponent(host);
+}, runMutations = (host) => {
+  if (host.$queued)
+    return;
+  host.$queued = true;
+  microtask(() => {
+    host.$queued = false;
+    runComponent(host);
+  });
+}, runComponent = (host) => {
+  if (host.$idle) {
+    cancelIdleCallback(host.$idle);
+    host.$idle = null;
+  }
+  current = host;
+  if (current.$hooks)
+    current.$hooks[0] = 0;
+  try {
+    host.$h = host.$fn(host.$args);
+  } catch (value) {
+    propagate(value, host.parentNode);
+  } finally {
+    current = null;
+    layoutsQueue.add(host);
+    layoutsId ??= task(runLayouts);
+  }
+}, runLayouts = () => {
+  layoutsId = null;
+  for (const host of layoutsQueue) {
+    layoutsQueue.delete(host);
+    try {
+      render(host.$h, host);
+      host.$h = null;
+    } catch (value) {
+      propagate(value, host);
+    } finally {
+      runFx(host, "$layout");
+      effectsQueue.add(host);
+      effectsId ??= task(runEffects);
     }
   }
-}, run = (host, setup, params, ref) => {
-  host.$setup ??= (host.addEventListener("DOMNodeRemovedFromDocument", dispose), isFunction(setup) ? setup : noop);
-  host.$params = { ...setup.params, ...params };
-  refresh(host);
-  isFunction(ref) && ref(host);
-}, dispose = ({ target }) => {
-  (globalThis.queueMicrotask ?? ((v) => v()))(() => {
-    if (document.contains(target))
-      return;
-    if ("$cleanups" in target) {
-      try {
-        for (const fn of target.$cleanups)
-          fn(target);
-      } finally {
-        target.$cleanups.clear();
+}, runEffects = () => {
+  effectsId = null;
+  for (const host of effectsQueue) {
+    effectsQueue.delete(host);
+    runFx(host, "$effect");
+  }
+}, runFx = (host, key) => {
+  if (host[key])
+    for (const fx of host[key]) {
+      const [cleanup, setup] = fx;
+      if (isFunction(setup)) {
+        try {
+          if (isFunction(cleanup))
+            cleanup();
+          fx[0] = setup();
+        } catch (value) {
+          fx[0] = null;
+          propagate(value, host.parentNode);
+        } finally {
+          fx[1] = null;
+        }
       }
     }
-  });
+}, dispose = (host) => {
+  if (host.nodeType != 1)
+    return;
+  for (const child of host.children)
+    dispose(child);
+  if (host.$ref)
+    host.$ref.current = null;
+  layoutsQueue.delete(host);
+  effectsQueue.delete(host);
+  for (const key of ["$layout", "$effect"])
+    if (host[key]) {
+      for (const fx of host[key])
+        try {
+          isFunction(fx[0]) && fx[0]();
+        } catch {
+        }
+      host[key].clear();
+    }
+}, propagate = (value, host) => {
+  for (let fn; host; host = host.parentNode)
+    if (isFunction(fn = host.$catch))
+      return void fn(value);
+  throw value;
 };
+let current = null, layoutsQueue = /* @__PURE__ */ new Set(), layoutsId = null, effectsQueue = /* @__PURE__ */ new Set(), effectsId = null;

package/index.js

@@ -1,9 +1,6 @@
 export const
-	Fragment = ({ children }) => children,
 
-	For = ({ is, each, by, children, ref, ...props }) => h(is ?? 'div', {
-		...props, skip: true, ref: host => iterate(host, each, by, children, ref)
-	}),
+	Fragment = ({ children }) => children,
 
 	h = (nodeName, props, ...children) => {
 		const { length } = children
@@ -28,15 +25,19 @@ export const
 
 			} else {
 
-				const { xmlns = ns, nodeName, key, block, skip, children, ref, ...props } = h
+				const { xmlns = ns, nodeName, key, ref, memo, children, [FN]: fn, ...props } = h
 
 				while (node && !(node.localName == nodeName && (node.$key ??= key) == key)) node = node.nextSibling
 				node ??= create(xmlns, nodeName, key)
 
-				if (block == null || some(node.$deps, node.$deps = block)) {
+				if (isObject(ref)) {
+					ref.current = node
+					node.$ref = ref
+				}
+
+				if (memo == null || some(node.$memo, node.$memo = memo)) {
 					update(props, node)
-					skip || render(children, node, xmlns)
-					isFunction(ref) && ref(node)
+					isFunction(fn) ? fn(node) : render(children, node, xmlns)
 				}
 			}
 
@@ -45,53 +46,88 @@ export const
 
 		while (child) {
 			const next = child.nextSibling
-			host.removeChild(child)
+			dispose(host.removeChild(child))
 			child = next
 		}
 	},
 
-	component = setup => ({ is, props, ref, ...params }) => h(is ?? setup.is ?? 'div', {
-		...setup.props, ...props, skip: true, ref: host => run(host, setup, params, ref)
-	}),
+	component = fn => ({ nodeName, as, props, key, ref, memo, ...args }) =>
 
-	refresh = host => {
-		try {
-			render((host.$render ??= host.$setup(host))(host.$params), host)
-		} catch (error) {
-			propagate(host, error)
-		}
-	},
+		h(as ?? fn?.as ?? 'c-host', {
+
+			...fn?.props, ...props, key, ref, memo, [FN]: host => {
+
+				host.$fn = isFunction(fn) ? fn : noop
+				host.$args = { ...fn?.args, ...args }
+
+				schedule(host)
+			}
+		}),
+
+	useReducer = (fn, init) => {
+
+		const host = useHost(), hooks = useHooks(), [i, stack] = hooks
+
+		if (i == stack.length) stack[i] = [
+
+			isFunction(init) ? init() : init,
+
+			value => {
+
+				const prev = stack[i][0], next = isFunction(value) ? value(prev) : value
 
-	provide = (host, key, value) => (host.$provisions ??= new Map).set(key, value),
+				if (is(prev, stack[i][0] = isFunction(fn) ? fn(prev, next) : next)) return
 
-	consume = (host, key, fallback) => {
-		for (let map; host; host = host.parentNode) if ((map = host.$provisions) && map.has(key)) return map.get(key)
-		return fallback
+				runMutations(host)
+			}
+		]
+
+		return stack[hooks[0]++]
 	},
 
-	intercept = (host, fn) => isFunction(fn) && (host.$interceptor = fn),
+	useMemo = (fn, deps) => {
+
+		const hooks = useHooks(), [i, stack] = hooks
+
+		if (i == stack.length || deps == null || some(deps, stack[i][1])) stack[i] = [fn(), deps]
 
-	propagate = (host, error) => {
-		for (let fn; host; host = host.parentNode) if (isFunction(fn = host.$interceptor)) return render(fn(error), host)
-		throw error
+		return stack[hooks[0]++][0]
 	},
 
-	cleanup = (host, fn) => isFunction(fn) && (host.$cleanups ??= new Set).add(fn),
+	useCatch = fn => {
+
+		const host = useHost(), [value, setValue] = useReducer(), hooks = useHooks(), [i, stack] = hooks
+
+		stack[hooks[0]++] = fn
+
+		host.$catch ??= value => {
+			isFunction(stack[i]) && stack[i](value)
+			setValue(value)
+		}
+
+		return [value, () => setValue()]
+	},
 
-	clx = o => keys(o).filter(k => o[k]).join(' ') || null,
+	useHost = () => current,
+	useState = init => useReducer(null, init),
 
-	stx = o => entries(o).map(t => t.join(':')).join(';') || null,
+	useRef = current => useMemo(() => ({ current }), []),
+	useCallback = (fn, deps) => useMemo(() => fn, deps),
 
-	keb = o => keys(o).reduce((r, k) => ((r[k.replace(search, replace).toLowerCase()] = o[k]), r), {})
+	useLayout = (fn, deps) => useFx(fn, deps, '$layout'),
+	useEffect = (fn, deps) => useFx(fn, deps, '$effect')
 
 const
-	{ isArray, from } = Array, { keys, entries } = Object,
 
-	isFunction = v => typeof v == 'function', noop = () => { },
+	microtask = globalThis.queueMicrotask ?? (fn => fn()),
+
+	task = globalThis.requestAnimationFrame ?? microtask,
+
+	{ isArray, from } = Array, { is } = Object,  noop = () => { }, FN = Symbol(),
 
-	map = list => list.reduce(set, new Map), set = (m, v, i) => (m.set(v, i), m),
+	isObject = v => v && typeof v == 'object', isFunction = v => typeof v == 'function',
 
-	some = (a, b) => (isArray(a) && isArray(b)) ? a.some((v, i) => v !== b[i]) : a !== b,
+	some = (a, b) => (isArray(a) && isArray(b)) ? a.some((v, i) => !is(v, b[i])) : !is(a, b),
 
 	reduce = v => from(v).reduce(assign, {}), assign = (v, { name, value }) => ((v[name] = value), v),
 
@@ -100,30 +136,18 @@ const
 		return node.$key = key, node
 	},
 
-	proxy = { firstChild: null, insertBefore: node => proxy.firstChild ??= node }, handler = {
-		get(target, key) {
-			const value = key == 'nextSibling' ? null : Reflect.get(target, key)
-			return isFunction(value) ? value.bind(target) : value
-		},
-		set(target, key, value) {
-			return Reflect.set(target, key, value)
-		}
-	},
-
-	search = /([a-z0-9])([A-Z])/g, replace = '$1-$2',
-
-	normalize = function* (h, buffer = { t: '' }, root = true) {
+	normalize = function* (h, buffer = { data: '' }, root = true) {
 
-		let t
+		let data
 
 		for (h of isArray(h) ? h : [h]) {
 			if (h == null || typeof h == 'boolean') continue
-			if (typeof h.nodeName == 'string') ((t = buffer.t) && (buffer.t = '', yield t)), yield h
+			if (typeof h.nodeName == 'string') ((data = buffer.data) && (buffer.data = '', yield data)), yield h
 			else if (isFunction(h.nodeName)) yield* normalize(h.nodeName(h), buffer, false)
-			else isArray(h) ? yield* normalize(h, buffer, false) : buffer.t += h
+			else isArray(h) ? yield* normalize(h, buffer, false) : buffer.data += h
 		}
 
-		root && (t = buffer.t) && (yield t)
+		root && (data = buffer.data) && (yield data)
 	},
 
 	update = (props, host) => {
@@ -142,6 +166,7 @@ const
 	},
 
 	before = (host, node, child) => {
+
 		if (node.contains?.(document.activeElement)) {
 
 			const ref = node.nextSibling
@@ -155,92 +180,145 @@ const
 		} else host.insertBefore(node, child)
 	},
 
-	iterate = (host, each, by, fn, ref) => {
+	useHooks = () => current.$hooks ??= [0, []],
+
+	useFx = (fn, deps, key) => {
 
-		each = isArray(each) ? each : []
-		by = isFunction(by) ? by : v => v
-		fn = isFunction(fn) ? fn : noop
+		const host = useHost(), hooks = useHooks(), [i, stack] = hooks, init = i == stack.length
 
-		const
-			map = host.$for ??= new Map,
-			del = node => map.delete(node.$by),
-			clr = each !== host.$each,
-			len = (host.$each = each).length,
-			a = from(host.childNodes),
-			b = new Array(len)
+		if (init) (host[key] ??= new Set).add(stack[i] = [null, fn, deps])
 
-		clr && map.clear()
+		else if (deps == null || some(deps, stack[i][2])) {
+			stack[i][1] = fn
+			stack[i][2] = deps
+		}
 
-		for (let child, index = 0; index < len; index++) {
+		hooks[0]++
+	},
 
-			const item = each[index], key = by(item, index)
+	schedule = host => {
 
-			child = (clr ? a[index] : map.get(key))
+		if (host.$idle) return
 
-			proxy.firstChild = child ? new Proxy(child, handler) : null
-			render(fn(item, index), proxy)
+		if (globalThis.navigator?.scheduling?.isInputPending()) {
 
-			child ??= proxy.firstChild
-			proxy.firstChild = null
+			host.$idle = requestIdleCallback(() => {
+				host.$idle = null
+				schedule(host)
+			})
 
-			map.set(child.$by = key, b[index] = child)
+			return
 		}
 
-		arrange(host, a, b, del)
-		isFunction(ref) && ref(host)
+		runComponent(host)
+	},
+
+	runMutations = host => {
+
+		if (host.$queued) return
+
+		host.$queued = true
+		microtask(() => {
+			host.$queued = false
+			runComponent(host)
+		})
 	},
 
-	arrange = (host, a, b, dispose = noop) => {
+	runComponent = host => {
 
-		const aLen = a.length, bLen = b.length
+		if (host.$idle) {
+			cancelIdleCallback(host.$idle)
+			host.$idle = null
+		}
 
-		let aIndex = 0, bIndex = 0, aValue, bValue, aMap, bMap, i
+		current = host
 
-		while (aIndex !== aLen || bIndex !== bLen) {
+		if (current.$hooks) current.$hooks[0] = 0
 
-			aValue = a[aIndex], bValue = b[bIndex]
+		try {
+			host.$h = host.$fn(host.$args)
+		} catch (value) {
+			propagate(value, host.parentNode)
+		} finally {
+			current = null
+			layoutsQueue.add(host)
+			layoutsId ??= task(runLayouts)
+		}
+	},
 
-			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 {
+	runLayouts = () => {
 
-				aMap ??= map(a), bMap ??= map(b)
+		layoutsId = null
 
-				if (bMap.get(aValue) == null) aIndex++, dispose(host.removeChild(aValue))
-				else {
+		for (const host of layoutsQueue) {
 
-					host.insertBefore(bValue, aValue), bIndex++
+			layoutsQueue.delete(host)
 
-					if ((i = aMap.get(bValue)) != null) {
-						if (i > aIndex + 1) aIndex++
-						a[i] = null
-					}
-				}
+			try {
+				render(host.$h, host)
+				host.$h = null
+			} catch (value) {
+				propagate(value, host)
+			} finally {
+				runFx(host, '$layout')
+				effectsQueue.add(host)
+				effectsId ??= task(runEffects)
 			}
 		}
 	},
 
-	run = (host, setup, params, ref) => {
+	runEffects = () => {
 
-		host.$setup ??= (host.addEventListener('DOMNodeRemovedFromDocument', dispose), isFunction(setup) ? setup : noop)
-		host.$params = { ...setup.params, ...params }
+		effectsId = null
 
-		refresh(host)
-		isFunction(ref) && ref(host)
+		for (const host of effectsQueue) {
+			effectsQueue.delete(host)
+			runFx(host, '$effect')
+		}
 	},
 
-	dispose = ({ target }) => {
-		(globalThis.queueMicrotask ?? (v => v()))(() => {
-			if (document.contains(target)) return
+	runFx = (host, key) => {
+
+		if (host[key]) for (const fx of host[key]) {
 
-			if ('$cleanups' in target) {
+			const [cleanup, setup] = fx
+
+			if (isFunction(setup)) {
 				try {
-					for (const fn of target.$cleanups) fn(target)
+					if (isFunction(cleanup)) cleanup()
+					fx[0] = setup()
+				} catch (value) {
+					fx[0] = null
+					propagate(value, host.parentNode)
 				} finally {
-					target.$cleanups.clear()
+					fx[1] = null
 				}
 			}
-		})
+		}
+	},
+
+	dispose = host => {
+
+		if (host.nodeType != 1) return
+
+		for (const child of host.children) dispose(child)
+
+		if (host.$ref) host.$ref.current = null
+
+		layoutsQueue.delete(host)
+		effectsQueue.delete(host)
+
+		for (const key of ['$layout', '$effect']) if (host[key]) {
+
+			for (const fx of host[key]) try { isFunction(fx[0]) && fx[0]() } catch { }
+
+			host[key].clear()
+		}
+	},
+
+	propagate = (value, host) => {
+		for (let fn; host; host = host.parentNode) if (isFunction(fn = host.$catch)) return void fn(value)
+		throw value
 	}
+
+let current = null, layoutsQueue = new Set, layoutsId = null, effectsQueue = new Set, effectsId = null

package/index.min.js

@@ -1 +1 @@
-var ajo=(()=>{var y=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var F=(e,n)=>{for(var l in n)y(e,l,{get:n[l],enumerable:!0})},L=(e,n,l,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of B(n))!E.call(e,t)&&t!==l&&y(e,t,{get:()=>n[t],enumerable:!(i=j(n,t))||i.enumerable});return e};var R=e=>L(y({},"__esModule",{value:!0}),e);var re={};F(re,{For:()=>z,Fragment:()=>T,cleanup:()=>q,clx:()=>P,component:()=>D,consume:()=>O,h:()=>v,intercept:()=>V,keb:()=>Z,propagate:()=>k,provide:()=>I,refresh:()=>S,render:()=>g,stx:()=>W});const T=({children:e})=>e,z=({is:e,each:n,by:l,children:i,ref:t,...o})=>v(e??"div",{...o,skip:!0,ref:r=>ne(r,n,l,i,t)}),v=(e,n,...l)=>{const{length:i}=l;return l=i==0?null:i==1?l[0]:l,{children:l,...n,nodeName:e}},g=(e,n,l)=>{let i=n.firstChild;for(e of x(e)){let t=i;if(e instanceof Node)t=e;else if(typeof e=="string"){for(;t&&t.nodeType!=3;)t=t.nextSibling;t?t.data!=e&&(t.data=e):t=document.createTextNode(e)}else{const{xmlns:o=l,nodeName:r,key:s,block:c,skip:u,children:f,ref:a,...d}=e;for(;t&&!(t.localName==r&&(t.$key??=s)==s);)t=t.nextSibling;t??=U(o,r,s),(c==null||J(t.$deps,t.$deps=c))&&(h(d,t),u||g(f,t,o),p(a)&&a(t))}t==i?i=i.nextSibling:ee(n,t,i)}for(;i;){const t=i.nextSibling;n.removeChild(i),i=t}},D=e=>({is:n,props:l,ref:i,...t})=>v(n??e.is??"div",{...e.props,...l,skip:!0,ref:o=>ie(o,e,t,i)}),S=e=>{try{g((e.$render??=e.$setup(e))(e.$params),e)}catch(n){k(e,n)}},I=(e,n,l)=>(e.$provisions??=new Map).set(n,l),O=(e,n,l)=>{for(let i;e;e=e.parentNode)if((i=e.$provisions)&&i.has(n))return i.get(n);return l},V=(e,n)=>p(n)&&(e.$interceptor=n),k=(e,n)=>{for(let l;e;e=e.parentNode)if(p(l=e.$interceptor))return g(l(n),e);throw n},q=(e,n)=>p(n)&&(e.$cleanups??=new Set).add(n),P=e=>M(e).filter(n=>e[n]).join(" ")||null,W=e=>G(e).map(n=>n.join(":")).join(";")||null,Z=e=>M(e).reduce((n,l)=>(n[l.replace(Y,_).toLowerCase()]=e[l],n),{}),{isArray:$,from:A}=Array,{keys:M,entries:G}=Object,p=e=>typeof e=="function",b=()=>{},C=e=>e.reduce(H,new Map),H=(e,n,l)=>(e.set(n,l),e),J=(e,n)=>$(e)&&$(n)?e.some((l,i)=>l!==n[i]):e!==n,K=e=>A(e).reduce(Q,{}),Q=(e,{name:n,value:l})=>(e[n]=l,e),U=(e,n,l)=>{const i=e?document.createElementNS(e,n):document.createElement(n);return i.$key=l,i},m={firstChild:null,insertBefore:e=>m.firstChild??=e},X={get(e,n){const l=n=="nextSibling"?null:Reflect.get(e,n);return p(l)?l.bind(e):l},set(e,n,l){return Reflect.set(e,n,l)}},Y=/([a-z0-9])([A-Z])/g,_="$1-$2",x=function*(e,n={t:""},l=!0){let i;for(e of $(e)?e:[e])e==null||typeof e=="boolean"||(typeof e.nodeName=="string"?((i=n.t)&&(n.t="",yield i),yield e):p(e.nodeName)?yield*x(e.nodeName(e),n,!1):$(e)?yield*x(e,n,!1):n.t+=e);l&&(i=n.t)&&(yield i)},h=(e,n)=>{const l=n.$props??=n.hasAttributes()?K(n.attributes):{};for(const i in{...l,...n.$props=e}){let t=e[i];t!==l[i]&&(i.startsWith("set:")?n[i.slice(4)]=t:t==null||t===!1?n.removeAttribute(i):n.setAttribute(i,t===!0?"":t))}},ee=(e,n,l)=>{if(n.contains?.(document.activeElement)){const i=n.nextSibling;for(;l&&l!=n;){const t=l.nextSibling;e.insertBefore(l,i),l=t}}else e.insertBefore(n,l)},ne=(e,n,l,i,t)=>{n=$(n)?n:[],l=p(l)?l:a=>a,i=p(i)?i:b;const o=e.$for??=new Map,r=a=>o.delete(a.$by),s=n!==e.$each,c=(e.$each=n).length,u=A(e.childNodes),f=new Array(c);s&&o.clear();for(let a,d=0;d<c;d++){const w=n[d],N=l(w,d);a=s?u[d]:o.get(N),m.firstChild=a?new Proxy(a,X):null,g(i(w,d),m),a??=m.firstChild,m.firstChild=null,o.set(a.$by=N,f[d]=a)}le(e,u,f,r),p(t)&&t(e)},le=(e,n,l,i=b)=>{const t=n.length,o=l.length;let r=0,s=0,c,u,f,a,d;for(;r!==t||s!==o;)c=n[r],u=l[s],c===null?r++:o<=s?(r++,i(e.removeChild(c))):t<=r?(s++,e.appendChild(u)):c===u?(r++,s++):(f??=C(n),a??=C(l),a.get(c)==null?(r++,i(e.removeChild(c))):(e.insertBefore(u,c),s++,(d=f.get(u))!=null&&(d>r+1&&r++,n[d]=null)))},ie=(e,n,l,i)=>{e.$setup??=(e.addEventListener("DOMNodeRemovedFromDocument",te),p(n)?n:b),e.$params={...n.params,...l},S(e),p(i)&&i(e)},te=({target:e})=>{(globalThis.queueMicrotask??(n=>n()))(()=>{if(!document.contains(e)&&"$cleanups"in e)try{for(const n of e.$cleanups)n(e)}finally{e.$cleanups.clear()}})};return R(re);})();
+var ajo=(()=>{var g=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var V=(e,t)=>{for(var l in t)g(e,l,{get:t[l],enumerable:!0})},W=(e,t,l,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of z(t))!P.call(e,n)&&n!==l&&g(e,n,{get:()=>t[n],enumerable:!(r=R(t,n))||r.enumerable});return e};var D=e=>W(g({},"__esModule",{value:!0}),e);var fe={};V(fe,{Fragment:()=>G,component:()=>J,h:()=>v,render:()=>x,useCallback:()=>Y,useCatch:()=>K,useEffect:()=>_,useHost:()=>m,useLayout:()=>Z,useMemo:()=>N,useReducer:()=>b,useRef:()=>X,useState:()=>U});const G=({children:e})=>e,v=(e,t,...l)=>{const{length:r}=l;return l=r==0?null:r==1?l[0]:l,{children:l,...t,nodeName:e}},x=(e,t,l)=>{let r=t.firstChild;for(e of k(e)){let n=r;if(e instanceof Node)n=e;else if(typeof e=="string"){for(;n&&n.nodeType!=3;)n=n.nextSibling;n?n.data!=e&&(n.data=e):n=document.createTextNode(e)}else{const{xmlns:a=l,nodeName:i,key:o,ref:c,memo:C,children:O,[T]:q,...Q}=e;for(;n&&!(n.localName==i&&(n.$key??=o)==o);)n=n.nextSibling;n??=re(a,i,o),te(c)&&(c.current=n,n.$ref=c),(C==null||S(n.$memo,n.$memo=C))&&(ae(Q,n),u(q)?q(n):x(O,n,a))}n==r?r=r.nextSibling:ie(t,n,r)}for(;r;){const n=r.nextSibling;B(t.removeChild(r)),r=n}},J=e=>({nodeName:t,as:l,props:r,key:n,ref:a,memo:i,...o})=>v(l??e?.as??"c-host",{...e?.props,...r,key:n,ref:a,memo:i,[T]:c=>{c.$fn=u(e)?e:ee,c.$args={...e?.args,...o},I(c)}}),b=(e,t)=>{const l=m(),r=y(),[n,a]=r;return n==a.length&&(a[n]=[u(t)?t():t,i=>{const o=a[n][0],c=u(i)?i(o):i;p(o,a[n][0]=u(e)?e(o,c):c)||oe(l)}]),a[r[0]++]},N=(e,t)=>{const l=y(),[r,n]=l;return(r==n.length||t==null||S(t,n[r][1]))&&(n[r]=[e(),t]),n[l[0]++][0]},K=e=>{const t=m(),[l,r]=b(),n=y(),[a,i]=n;return i[n[0]++]=e,t.$catch??=o=>{u(i[a])&&i[a](o),r(o)},[l,()=>r()]},m=()=>f,U=e=>b(null,e),X=e=>N(()=>({current:e}),[]),Y=(e,t)=>N(()=>e,t),Z=(e,t)=>E(e,t,"$layout"),_=(e,t)=>E(e,t,"$effect"),A=globalThis.queueMicrotask??(e=>e()),F=globalThis.requestAnimationFrame??A,{isArray:s,from:h}=Array,{is:p}=Object,ee=()=>{},T=Symbol(),te=e=>e&&typeof e=="object",u=e=>typeof e=="function",S=(e,t)=>s(e)&&s(t)?e.some((l,r)=>!p(l,t[r])):!p(e,t),ne=e=>h(e).reduce(le,{}),le=(e,{name:t,value:l})=>(e[t]=l,e),re=(e,t,l)=>{const r=e?document.createElementNS(e,t):document.createElement(t);return r.$key=l,r},k=function*(e,t={data:""},l=!0){let r;for(e of s(e)?e:[e])e==null||typeof e=="boolean"||(typeof e.nodeName=="string"?((r=t.data)&&(t.data="",yield r),yield e):u(e.nodeName)?yield*k(e.nodeName(e),t,!1):s(e)?yield*k(e,t,!1):t.data+=e);l&&(r=t.data)&&(yield r)},ae=(e,t)=>{const l=t.$props??=t.hasAttributes()?ne(t.attributes):{};for(const r in{...l,...t.$props=e}){let n=e[r];n!==l[r]&&(r.startsWith("set:")?t[r.slice(4)]=n:n==null||n===!1?t.removeAttribute(r):t.setAttribute(r,n===!0?"":n))}},ie=(e,t,l)=>{if(t.contains?.(document.activeElement)){const r=t.nextSibling;for(;l&&l!=t;){const n=l.nextSibling;e.insertBefore(l,r),l=n}}else e.insertBefore(t,l)},y=()=>f.$hooks??=[0,[]],E=(e,t,l)=>{const r=m(),n=y(),[a,i]=n;a==i.length?(r[l]??=new Set).add(i[a]=[null,e,t]):(t==null||S(t,i[a][2]))&&(i[a][1]=e,i[a][2]=t),n[0]++},I=e=>{if(!e.$idle){if(globalThis.navigator?.scheduling?.isInputPending()){e.$idle=requestIdleCallback(()=>{e.$idle=null,I(e)});return}j(e)}},oe=e=>{e.$queued||(e.$queued=!0,A(()=>{e.$queued=!1,j(e)}))},j=e=>{e.$idle&&(cancelIdleCallback(e.$idle),e.$idle=null),f=e,f.$hooks&&(f.$hooks[0]=0);try{e.$h=e.$fn(e.$args)}catch(t){w(t,e.parentNode)}finally{f=null,d.add(e),H??=F(ue)}},ue=()=>{H=null;for(const e of d){d.delete(e);try{x(e.$h,e),e.$h=null}catch(t){w(t,e)}finally{M(e,"$layout"),$.add(e),L??=F(ce)}}},ce=()=>{L=null;for(const e of $)$.delete(e),M(e,"$effect")},M=(e,t)=>{if(e[t])for(const l of e[t]){const[r,n]=l;if(u(n))try{u(r)&&r(),l[0]=n()}catch(a){l[0]=null,w(a,e.parentNode)}finally{l[1]=null}}},B=e=>{if(e.nodeType==1){for(const t of e.children)B(t);e.$ref&&(e.$ref.current=null),d.delete(e),$.delete(e);for(const t of["$layout","$effect"])if(e[t]){for(const l of e[t])try{u(l[0])&&l[0]()}catch{}e[t].clear()}}},w=(e,t)=>{for(let l;t;t=t.parentNode)if(u(l=t.$catch))return void l(e);throw e};let f=null,d=new Set,H=null,$=new Set,L=null;return D(fe);})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajo",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "ajo is a JavaScript view library for building user interfaces",
   "type": "module",
   "module": "index.js",
@@ -38,7 +38,7 @@
   "homepage": "https://github.com/cristianfalcone/ajo#readme",
   "devDependencies": {
     "backdom": "^0.0.8",
-    "esbuild": "^0.15.9",
+    "esbuild": "^0.15.10",
     "uvu": "^0.5.6"
   }
 }

package/readme.md

@@ -33,49 +33,21 @@ render(<Greet name="World" />, document.body)
 
 ```jsx
 /** @jsx h */
-import { h, component, refresh, render } from 'ajo'
+import { h, component, useState, render } from 'ajo'
 
-const Counter = component(host => {
+const Counter = component(() => {
 
-  let count = 0
+  const [count, setCount] = useState(0)
 
-  const increment = () => {
-    count++
-    refresh(host)
-  }
-
-  return () =>
-    <button set:onclick={increment}>
+  return (
+    <button set:onclick={() => setCount(count + 1)}>
       Current: {count}
     </button>
+	)
 })
 
 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)
+ajo takes heavy inspiration from [Incremental DOM](https://github.com/google/incremental-dom) and [React](https://github.com/facebook/react)