ajo 0.0.12 → 0.0.16

package/index.cjs

@@ -35,14 +35,21 @@ 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", {
+}, component = (setup) => ({ nodeName, is, key, block, ref: ref2, host, ...props }) => h(is ?? setup.is ?? "div", {
   key,
-  ...setup.host,
-  ...host,
   skip: true,
-  ref: (host2) => (refresh(host2, props, setup), isFn(ref) && ref(host2))
+  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) => {
-  let child = host.firstChild, node, byKey = keyed.get(host);
+  const nodes = [];
+  let child = host.firstChild, node;
   for (h2 of normalize(h2, host)) {
     if (typeof h2 == "string") {
       for (node = child; node; node = node.nextSibling)
@@ -52,120 +59,135 @@ const Fragment = ({ children }) => children, h = (nodeName, props, ...children)
     } else if (h2 instanceof Node) {
       node = h2;
     } else {
-      const { key, nodeName, skip, block, children, ref, ...props } = h2;
-      if (key != null && (node = byKey?.get(key)))
-        ;
-      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);
-      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);
+        node ??= document.createElement(nodeName);
+      }
+      if (!(skip || block != null && every(node.$deps, node.$deps = block))) {
+        update(props, node);
+        render(children, node);
+      }
+      isFn(ref2) && ref2(node);
     }
-    node === child ? child = child.nextSibling : before(host, child, node);
-  }
-  while (child) {
-    const next = child.nextSibling;
-    host.removeChild(child).nodeType == 1 && dispose(child);
-    child = next;
+    nodes.push(node) && node === child && (child = child.nextSibling);
   }
-}, refresh = (host, props, setup) => {
+  arrange(host, [...host.childNodes], nodes);
+}, 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.$params, host), host);
   } 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) => {
+}, provide = (host, key, value) => (host.$provisions ??= /* @__PURE__ */ new Map()).set(key, value), consume = (host, key, fallback) => {
   let map;
   while (host) {
-    if ((map = provisions.get(host)) && map.has(key))
+    if ((map = host.$provisions) && map.has(key))
       return map.get(key);
     host = host.parentNode;
   }
   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(host, interceptor(error));
+}, intercept = (host, fn) => host.$interceptor = fn, propagate = (host, error) => {
+  for (let fn; host; host = host.parentNode)
+    if (fn = host.$interceptor)
+      return render(fn(error), host);
   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]) {
+}, 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 += h2;
+      buffer(buffer() + h2);
       continue;
     }
     if ("nodeName" in Object(h2)) {
       if (isFn(h2.nodeName)) {
-        yield* normalize(h2.nodeName(h2, host), host);
+        yield* normalize(h2.nodeName(h2), host, buffer, false);
         continue;
       }
-      if (buffer) {
-        yield buffer;
-        buffer = "";
+      if (text = buffer()) {
+        yield text;
+        buffer("");
       }
       yield h2;
       continue;
     }
-    isFn(h2[Symbol.iterator]) ? yield* normalize(h2, host) : buffer += h2;
+    isFn(h2[it]) ? yield* normalize(h2, host, buffer, false) : buffer(buffer() + h2);
   }
-  if (buffer)
-    yield buffer;
+  if (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])
+    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) {
+    if (value == null || value === false) {
       host.removeAttribute(name);
       continue;
     }
-    host.setAttribute(name, value);
+    host.setAttribute(name, value === true ? "" : value);
   }
-  cache.set(host, props);
-}, before = (host, child, node) => {
-  if (node.contains?.(document.activeElement)) {
-    const ref = node.nextSibling;
-    while (child && child !== node) {
-      const next = child.nextSibling;
-      host.insertBefore(child, ref);
-      child = next;
+  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;
     }
-  } else
-    host.insertBefore(node, child);
+    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);
+      aIndex++;
+      continue;
+    }
+    host.insertBefore(bValue, aValue);
+    bIndex++;
+    if ((i = aMap.get(bValue)) != null) {
+      if (i > aIndex + 1)
+        aIndex++;
+      a[i] = null;
+    }
+  }
 }, dispose = (host) => {
   for (const child of host.children)
     dispose(child);
-  for (const cleaner of cleaners.get(host) ?? [])
-    cleaner(host);
+  for (const fn of host.$cleanups ?? [])
+    fn(host);
 };

package/index.js

@@ -6,13 +6,26 @@ export const
     return { children, ...props, nodeName }
   },
 
-  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))
-  }),
+  component = setup => ({ nodeName, is, key, block, ref, host, ...props }) =>
+    h(is ?? setup.is ?? 'div', {
+      key, 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(ref) && ref(node)
+      }
+    }),
 
   render = (h, host) => {
 
-    let child = host.firstChild, node, byKey = keyed.get(host)
+    const nodes = []
+    let child = host.firstChild, node
 
     for (h of normalize(h, host)) {
 
@@ -27,172 +40,191 @@ export const
 
       } else {
 
-        const { key, nodeName, skip, block, children, ref, ...props } = h
+        const { nodeName, key, skip, block, ref, children, ...props } = h
 
-        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, new Map)).set(key, node)
-
-        update(props, node)
+        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)
+        }
 
-        !(skip || block != null && every(deps.get(node), deps.set(node, block))) && render(children, node)
+        if (!(skip || block != null && every(node.$deps, node.$deps = block))) {
+          update(props, node)
+          render(children, node)
+        }
 
         isFn(ref) && ref(node)
       }
 
-      node === child ? child = child.nextSibling : before(host, child, node)
+      nodes.push(node) && node === child && (child = child.nextSibling)
     }
 
-    while (child) {
-      const next = child.nextSibling
-      host.removeChild(child).nodeType == 1 && dispose(child)
-      child = next
-    }
+    arrange(host, [...host.childNodes], nodes)
   },
 
-  refresh = (host, props, setup) => {
+  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.$params, host), host)
     } catch (error) {
       propagate(host, error)
     }
   },
 
-  provide = (host, key, value) => (provisions.get(host) ?? provisions.set(host, new Map)).set(key, value),
+  provide = (host, key, value) => (host.$provisions ??= 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)
+      if ((map = host.$provisions) && map.has(key)) return map.get(key)
       host = host.parentNode
     }
     return fallback
   },
 
-  intercept = (host, interceptor) => {
-    if (!isFn(interceptor)) throwTypeError('Interceptor', interceptor, fn)
-    interceptors.set(host, interceptor)
-  },
+  intercept = (host, fn) => host.$interceptor = fn,
 
   propagate = (host, error) => {
-    for (let interceptor; host; host = host.parentNode)
-      if (interceptor = interceptors.get(host)) return render(host, interceptor(error))
+    for (let fn; host; host = host.parentNode) if (fn = host.$interceptor) return render(fn(error), host)
     throw error
   },
 
-  cleanup = (host, cleaner) => {
-    if (!isFn(cleaner)) throwTypeError('Cleaner', cleaner, fn);
-    (cleaners.get(host) ?? cleaners.set(host, new Set)).add(cleaner)
-  },
+  cleanup = (host, fn) => (host.$cleanups ??= 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
-  wm = () => {
-    const instance = 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,
+  ref = v => (...args) => args.length ? v = args[0] : v,
+  isFn = v => typeof v == 'function',
 
   { 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(),
+  search = /([a-z0-9])([A-Z])/g, replace = '$1-$2', it = Symbol.iterator,
 
-  normalize = function* (h, host) {
+  normalize = function* (h, host, buffer = ref(''), root = true) {
 
-    let type, buffer = ''
+    let type, text
 
-    for (h of isFn(h?.[Symbol.iterator]) ? h : [h]) {
+    for (h of isFn(h?.[it]) ? h : [h]) {
 
       if (h == null || (type = typeof h) == 'boolean') continue
 
       if (type == 'string' || type == 'number') {
-        buffer += h
+        buffer(buffer() + h)
         continue
       }
 
       if ('nodeName' in Object(h)) {
 
         if (isFn(h.nodeName)) {
-          yield* normalize(h.nodeName(h, host), host)
+          yield* normalize(h.nodeName(h), host, buffer, false)
           continue
         }
 
-        if (buffer) {
-          yield buffer
-          buffer = ''
+        if (text = buffer()) {
+          yield text
+          buffer('')
         }
 
         yield h
         continue
       }
 
-      isFn(h[Symbol.iterator]) ? yield* normalize(h, host) : buffer += h
+      isFn(h[it]) ? yield* normalize(h, host, buffer, false) : buffer(buffer() + h)
     }
 
-    if (buffer) yield buffer
+    if (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 (value === prev[name]) {
+        continue
+      }
 
       if (name.startsWith('set:')) {
         host[name.slice(4)] = value
         continue
       }
 
-      if (value === true) value = ''
-      else if (value == null || value === false) {
+      if (value == null || value === false) {
         host.removeAttribute(name)
         continue
       }
 
-      host.setAttribute(name, value)
+      host.setAttribute(name, value === true ? '' : value)
     }
 
-    cache.set(host, props)
+    host.$props = props
   },
 
-  before = (host, child, node) => {
-    if (node.contains?.(document.activeElement)) {
+  arrange = (host, a, b) => {
 
-      const ref = node.nextSibling
+    const aLength = a.length, bLength = b.length
+    let aIndex = 0, bIndex = 0, aValue, bValue, aMap, bMap, i
 
-      while (child && child !== node) {
-        const next = child.nextSibling
-        host.insertBefore(child, ref)
-        child = next
+    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
+      }
+
+      if (aLength <= aIndex) {
+        host.insertBefore(bValue, aValue)
+        bIndex++
+        continue
+      }
+
+      if (aValue === bValue) {
+        aIndex++
+        bIndex++
+        continue
+      }
+
+      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)
+      }
+
+      if (bMap.get(aValue) == null) {
+        host.removeChild(aValue).nodeType == 1 && dispose(aValue)
+        aIndex++
+        continue
       }
 
-    } else host.insertBefore(node, child)
+      host.insertBefore(bValue, aValue)
+      bIndex++
+
+      if ((i = aMap.get(bValue)) != null) {
+        if (i > aIndex + 1) aIndex++
+        a[i] = null
+      }
+    }
   },
 
   dispose = host => {
     for (const child of host.children) dispose(child)
-    for (const cleaner of cleaners.get(host) ?? []) cleaner(host)
+    for (const fn of host.$cleanups ?? []) fn(host)
   }

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(e,t(n));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 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);})();

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.12",
+  "version": "0.0.16",
   "description": "ajo is a JavaScript view library for building user interfaces",
   "type": "module",
   "module": "index.js",
@@ -30,8 +30,8 @@
   "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.5",
+    "esbuild": "^0.15.2",
     "uvu": "^0.5.6"
   }
 }

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,7 +29,7 @@ const Greet = ({ name }) => <div>Hello {name}</div>
 render(<Greet name="World" />, document.body)
 ```
 
-## Stateful Component
+## stateful component
 
 ```jsx
 /** @jsx h */
@@ -45,10 +45,13 @@ const Counter = component(({ start = 0 }, host) => {
   }
   
   return () =>
-    <button onclick={increment}>
+    <button set:onclick={increment}>
       Current: {count}
     </button>
 })
 
 render(<Counter start={1} />, document.body)
 ```
+
+## acknowledgments
+ajo takes heavy inspiration from [Incremental DOM](https://github.com/google/incremental-dom) and [Crank.js](https://github.com/bikeshaving/crank)