ajo 0.0.6 → 0.0.9

package/index.cjs

@@ -0,0 +1,171 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from2, except, desc) => {
+  if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+    for (let key of __getOwnPropNames(from2))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc(from2, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ajo_exports = {};
+__export(ajo_exports, {
+  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
+});
+module.exports = __toCommonJS(ajo_exports);
+const Fragment = ({ children }) => children, h = (nodeName, props, ...children) => {
+  children = children.length == 0 ? null : children.length == 1 ? children[0] : children;
+  return { children, ...props, nodeName };
+}, component = (setup) => ({ is, key, host, ref, ...props }) => h(is ?? setup.is ?? "div", {
+  key,
+  ...setup.host,
+  ...host,
+  skip: true,
+  ref: (host2) => (refresh(host2, props, setup), isFn(ref) && ref(host2))
+}), render = (h2, host) => {
+  let child = host.firstChild, node, byKey = keyed.get(host);
+  for (h2 of normalize(h2, host)) {
+    if (typeof h2 == "string") {
+      for (node = child; node; node = node.nextSibling)
+        if (node.nodeType == 3)
+          break;
+      node ? node.data !== h2 && (node.data = h2) : node = document.createTextNode(h2);
+    } 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
+        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 === child ? child = child.nextSibling : before(host, child, node);
+  }
+  while (child) {
+    const next = child.nextSibling;
+    host.removeChild(child).nodeType == 1 && dispose(child);
+    child = next;
+  }
+}, refresh = (host, props, setup) => {
+  try {
+    if (setup && !isFn(setup))
+      throwTypeError("Setup", setup, fn);
+    props = props ? memo.set(host, { ...setup?.props, ...props }) : memo.get(host) ?? {};
+    render((renders.get(host) ?? renders.set(host, setup(props, host)))(props, host), host);
+  } catch (error) {
+    propagate(host, error);
+  }
+}, provide = (host, key, value) => (provisions.get(host) ?? provisions.set(host, /* @__PURE__ */ new Map())).set(key, value), consume = (host, key, fallback) => {
+  let map;
+  while (host) {
+    if ((map = provisions.get(host)) && map.has(key))
+      return map.get(key);
+    host = host.parentNode;
+  }
+  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));
+  throw error;
+}, cleanup = (host, cleaner) => {
+  if (!isFn(cleaner))
+    throwTypeError("Cleaner", cleaner, fn);
+  (cleaners.get(host) ?? cleaners.set(host, /* @__PURE__ */ new Set())).add(cleaner);
+}, clx = (o) => keys(o).filter((k) => o[k]).join(" ") || null, stx = (o) => entries(o).map((t) => t.join(":")).join(";") || null, keb = (o) => keys(o).reduce((r, k) => (r[k.replace(search, replace).toLowerCase()] = o[k], r), {});
+const wm = () => {
+  const instance = /* @__PURE__ */ new WeakMap(), { set } = instance;
+  instance.set = (key, value) => (set.call(instance, key, value), value);
+  return instance;
+}, throwTypeError = (name, value, expected) => {
+  throw new TypeError(`Expected ${name} to be of type ${expected}, got ${typeof value} instead`);
+}, every = (a, b) => a === b || isArray(a) && isArray(b) && a.length == b.length && a.every((v, i) => v === b[i]), apply = (o, { name, value }) => (o[name] = value, o), reduce = (list) => from(list).reduce(apply, {}), isFn = (v) => typeof v == fn, { keys, entries } = Object, { isArray, from } = Array, fn = "function", search = /([a-z0-9])([A-Z])/g, replace = "$1-$2", keyed = wm(), deps = wm(), memo = wm(), renders = wm(), provisions = wm(), interceptors = wm(), cleaners = wm(), cache = wm(), normalize = function* (h2, host) {
+  let type, buffer = "";
+  for (h2 of isFn(h2?.[Symbol.iterator]) ? h2 : [h2]) {
+    if (h2 == null || (type = typeof h2) == "boolean")
+      continue;
+    if (type == "string" || type == "number") {
+      buffer += h2;
+      continue;
+    }
+    if ("nodeName" in Object(h2)) {
+      if (isFn(h2.nodeName)) {
+        yield* normalize(h2.nodeName(h2, host), host);
+        continue;
+      }
+      if (buffer) {
+        yield buffer;
+        buffer = "";
+      }
+      yield h2;
+      continue;
+    }
+    isFn(h2[Symbol.iterator]) ? yield* normalize(h2, host) : buffer += h2;
+  }
+  if (buffer)
+    yield buffer;
+}, update = (props, host) => {
+  const prev = cache.get(host) ?? (host.hasAttributes() ? reduce(host.attributes) : {});
+  for (const name in { ...prev, ...props }) {
+    let value = props[name];
+    if (value === prev[name])
+      continue;
+    if (name.startsWith("set:")) {
+      host[name.slice(4)] = value;
+      continue;
+    }
+    if (value === true)
+      value = "";
+    else if (value == null || value === false) {
+      host.removeAttribute(name);
+      continue;
+    }
+    host.setAttribute(name, value);
+  }
+  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;
+    }
+  } else
+    host.insertBefore(node, child);
+}, dispose = (host) => {
+  for (const child of host.children)
+    dispose(child);
+  for (const cleaner of cleaners.get(host) ?? [])
+    cleaner(host);
+};

package/index.js

@@ -1,206 +1,198 @@
-const { isArray } = Array
-const { hasOwn, keys } = Object
+export const
+  Fragment = ({ children }) => children,
 
-export const Skip = Symbol()
-export const Fragment = ({ children }) => children
-export const Portal = ({ host, children }) => render(host, children)
+  h = (nodeName, props, ...children) => {
+    children = children.length == 0 ? null : children.length == 1 ? children[0] : children
+    return { children, ...props, nodeName }
+  },
 
-const Element = Symbol()
+  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))
+  }),
 
-export const createTextNode = data => ({ [Element]: '#text', data, skip: true })
+  render = (h, host) => {
 
-export const createElement = (name, props, ...children) => {
-  props = { ...props, [Element]: name }
-  children = props.children ?? children
-  if (children.length > 0) props.children = children.length === 1 ? children[0] : children
-  return props
-}
+    let child = host.firstChild, node, byKey = keyed.get(host)
 
-export const isElement = el => hasOwn(el ?? {}, Element)
+    for (h of normalize(h, host)) {
 
-function* g(vnode, host) {
-  const vnodes = isArray(vnode) ? vnode : [vnode]
-  let data = ''
+      if (typeof h == 'string') {
 
-  while (vnodes.length > 0) {
-    vnode = vnodes.shift()
+        for (node = child; node; node = node.nextSibling) if (node.nodeType == 3) break
+        node ? node.data !== h && (node.data = h) : node = document.createTextNode(h)
 
-    if (vnode == null || typeof vnode === 'boolean') continue
-    if (typeof vnode === 'string') data += vnode
-    else if (isElement(vnode)) {
-      const { [Element]: name } = vnode
+      } else if (h instanceof Node) {
 
-      if (typeof name === 'function') {
-        vnodes.unshift(name(vnode, host))
-        continue
-      }
+        node = h
 
-      if (data) {
-        yield createTextNode(data)
-        data = ''
-      }
+      } else {
 
-      yield vnode
-    } else typeof vnode[Symbol.iterator] === 'function'
-      ? vnodes.unshift(...vnode)
-      : data += vnode
-  }
+        const { key, nodeName, skip, block, children, ref, ...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)
 
-  if (data) yield createTextNode(data)
-}
+        key != null && (byKey ||= keyed.set(host, new Map)).set(key, node)
 
-export const render = (vnode, host) => {
-  let child = host.firstChild
+        update(props, node)
 
-  for (const { [Element]: name, ref, skip, children, ...props } of g(vnode, host)) {
+        !(skip || block != null && every(deps.get(node), deps.set(node, block))) && render(children, node)
+
+        isFn(ref) && ref(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
+    }
+  },
 
-    if (name === Skip) {
-      child = props.end ? null : child?.nextSibling ?? null
-      continue
+  refresh = (host, props, setup) => {
+    try {
+      if (setup && !isFn(setup)) throwTypeError('Setup', setup, fn)
+      props = props ? memo.set(host, { ...setup?.props, ...props }) : memo.get(host) ?? {}
+      render((renders.get(host) ?? renders.set(host, setup(props, host)))(props, host), host)
+    } catch (error) {
+      propagate(host, error)
     }
+  },
 
-    let node = child
+  provide = (host, key, value) => (provisions.get(host) ?? provisions.set(host, new Map)).set(key, value),
 
-    while (node != null) {
-      if (node.nodeName.toLowerCase() === name && node.getAttribute?.('key') == props.key) break
-      node = node.nextSibling
+  consume = (host, key, fallback) => {
+    let map
+    while (host) {
+      if ((map = provisions.get(host)) && map.has(key)) return map.get(key)
+      host = host.parentNode
     }
+    return fallback
+  },
+
+  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))
+    throw error
+  },
+
+  cleanup = (host, cleaner) => {
+    if (!isFn(cleaner)) throwTypeError('Cleaner', cleaner, fn);
+    (cleaners.get(host) ?? cleaners.set(host, 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 = new WeakMap, { set } = instance
+    instance.set = (key, value) => (set.call(instance, key, value), value)
+    return instance
+  },
 
-    if (node == null) node = name === '#text'
-      ? document.createTextNode('')
-      : document.createElement(name)
+  throwTypeError = (name, value, expected) => {
+    throw new TypeError(`Expected ${name} to be of type ${expected}, got ${typeof value} instead`)
+  },
 
-    patch(props, node)
+  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,
 
-    if (typeof ref === 'function') ref(node)
-    else if (typeof ref === 'object' && ref !== null) ref.current = node
+  { keys, entries } = Object, { isArray, from } = Array,
 
-    skip || render(children, node)
+  fn = 'function', search = /([a-z0-9])([A-Z])/g, replace = '$1-$2',
 
-    if (node === child) child = child.nextSibling
-    else if (node.contains?.(document.activeElement)) {
-      const { nextSibling } = node
-      let ref = child
+  keyed = wm(), deps = wm(), memo = wm(), renders = wm(), provisions = wm(), interceptors = wm(), cleaners = wm(), cache = wm(),
 
-      while (ref != null && ref !== node) {
-        const next = ref.nextSibling
-        host.insertBefore(ref, nextSibling)
-        ref = next
+  normalize = function* (h, host) {
+
+    let type, buffer = ''
+
+    for (h of isFn(h?.[Symbol.iterator]) ? h : [h]) {
+
+      if (h == null || (type = typeof h) == 'boolean') continue
+
+      if (type == 'string' || type == 'number') {
+        buffer += h
+        continue
       }
-    } else host.insertBefore(node, child)
-  }
 
-  while (child != null) {
-    const { nextSibling } = child
-    if (child.nodeType === Node.ELEMENT_NODE) dispose(child)
-    host.removeChild(child)
-    child = nextSibling
-  }
-}
+      if ('nodeName' in Object(h)) {
 
-const patch = (props, node) => {
-  if (node.nodeType === Node.TEXT_NODE) {
-    if (node.data !== props.data) node.data = props.data
-    return
-  }
+        if (isFn(h.nodeName)) {
+          yield* normalize(h.nodeName(h, host), host)
+          continue
+        }
 
-  for (const name of new Set([...node.getAttributeNames(), ...keys(props)])) {
-    let value = props[name]
+        if (buffer) {
+          yield buffer
+          buffer = ''
+        }
 
-    if (name in node && !(typeof value === 'string' && typeof node[name] === 'boolean')) {
-      try {
-        if (node[name] !== value) node[name] = value
+        yield h
         continue
-      } catch (err) { }
-    }
+      }
 
-    if (value === true) value = ''
-    else if (value == null || value === false) {
-      node.removeAttribute(name)
-      continue
+      isFn(h[Symbol.iterator]) ? yield* normalize(h, host) : buffer += h
     }
 
-    if (node.getAttribute(name) !== value) node.setAttribute(name, value)
-  }
-}
+    if (buffer) yield buffer
+  },
 
-const components = new WeakMap
+  update = (props, host) => {
 
-export const createComponent = fn => ({ is, host, key, ...props }) =>
-  createElement(is ?? fn.is ?? 'div', {
-    ...fn.host, ...host, key, skip: true, ref: host => {
-      let cmp = components.get(host)
-      if (cmp == null) components.set(host, cmp = new Component(host, fn))
-      cmp.props = { ...fn.props, ...props }
-      cmp.update()
-    }
-  })
-
-class Component {
-  constructor(host, fn) {
-    this.host = host
-    this.fn = fn
-    this.props = null
-    this.it = null
-    this.err = false
-  }
+    const prev = cache.get(host) ?? (host.hasAttributes() ? reduce(host.attributes) : {})
 
-  update({ method = 'next', arg } = {}) {
-    if (this.host == null) return
-    if (this.err) try { this.it.return() } catch (e) { this.host = null } finally { return }
+    for (const name in { ...prev, ...props }) {
 
-    try {
-      if (this.it == null) {
-        const init = this.fn.call(this, this.props, this.host)
-        this.it = typeof init?.next === 'function' ? init : generate.call(this, init)
+      let value = props[name]
+
+      if (value === prev[name]) continue
+
+      if (name.startsWith('set:')) {
+        host[name.slice(4)] = value
+        continue
       }
 
-      const { value, done } = this.it[method](arg)
+      if (value === true) value = ''
+      else if (value == null || value === false) {
+        host.removeAttribute(name)
+        continue
+      }
 
-      render(value, this.host)
-      if (done) this.host = null
-    } catch (err) {
-      this.err = true
-      propagate(this.host.parentNode, err)
+      host.setAttribute(name, value)
     }
-  }
 
-  *[Symbol.iterator]() {
-    while (this.host) yield this.props
-  }
-}
-
-function* generate(init) {
-  yield init
-  for (const props of this) yield this.fn.call(this, props, this.host)
-}
-
-const propagate = (el, err) => {
-  if (el == null) throw err
-  const cmp = components.get(el)
-  typeof cmp?.it?.throw === 'function'
-    ? cmp.update({ method: 'throw', arg: err })
-    : propagate(el.parentNode, err)
-}
-
-const dispose = el => {
-  for (const child of el.children) dispose(child)
-  components.get(el)?.update({ method: 'return' })
-}
-
-const provisions = new WeakMap
-
-export const provide = (host, key, value) => {
-  let map = provisions.get(host)
-  if (map == null) provisions.set(host, map = new Map)
-  map.set(key, value)
-}
-
-export const consume = (host, key) => {
-  for (let node = host; node != null; node = node.parentNode) {
-    if (provisions.has(node)) {
-      const map = provisions.get(node)
-      if (map.has(key)) return map.get(key)
-    }
+    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
+      }
+
+    } else host.insertBefore(node, child)
+  },
+
+  dispose = host => {
+    for (const child of host.children) dispose(child)
+    for (const cleaner of cleaners.get(host) ?? []) cleaner(host)
   }
-}

package/index.test.js

@@ -1,38 +1,37 @@
 import 'backdom/register'
 import { suite } from 'uvu'
 import * as assert from 'uvu/assert'
-import { createComponent, createElement, isElement, render, } from './index.js'
+import { component, h, render } from './index.js'
 
 let it
 
 // ----------------------------------------------------------------------------
 
-it = suite('createElement')
+it = suite('h')
 
 it('should create empty vnode', () => {
-  const vnode = createElement('div')
-  assert.ok(isElement(vnode))
-  assert.equal(vnode, {})
+  const vnode = h('div')
+  assert.equal(vnode, { nodeName: 'div', children: null })
 })
 
 it('should create vnode with props', () => {
-  assert.equal(createElement('div', { id: 'app' }), { id: 'app' })
+  assert.equal(h('div', { id: 'app' }), { nodeName: 'div', children: null, id: 'app' })
 })
 
 it('should create vnode with one string child', () => {
-  assert.equal(createElement('div', null, 'foo'), { children: 'foo' })
+  assert.equal(h('div', null, 'foo'), { nodeName: 'div', children: 'foo' })
 })
 
 it('should create vnode with one vnode child', () => {
-  const child = createElement('span')
-  const vnode = createElement('div', null, child)
-  assert.ok(isElement(vnode.children))
+  const child = h('span')
+  const vnode = h('div', null, child)
+  assert.equal(vnode.children, { nodeName: 'span', children: null })
 })
 
 it('should allow children as prop', () => {
-  const child = createElement('span')
-  const vnode = createElement('div', { children: child })
-  assert.ok(isElement(vnode.children))
+  const child = h('span')
+  const vnode = h('div', { children: child })
+  assert.equal(vnode.children, { nodeName: 'span', children: null })
 })
 
 it.run()
@@ -43,22 +42,21 @@ it = suite('render')
 
 it('should render a vnode', () => {
   const host = document.createElement('div')
-  render(createElement('div', { foo: 'bar' }, 'foobar'), host)
+  render(h('div', { foo: 'bar' }, 'foobar'), host)
   assert.snapshot(host.innerHTML, '<div foo="bar">foobar</div>')
 })
 
 it('should render a stateless component', () => {
   const host = document.createElement('div')
-  const Foo = ({ foo, children }) => createElement('div', { foo }, children)
-  debugger
-  render(createElement(Foo, { foo: 'bar' }, createElement('span', null, 'foobar')), host)
+  const Foo = ({ foo, children }) => h('div', { foo }, children)
+  render(h(Foo, { foo: 'bar' }, h('span', null, 'foobar')), host)
   assert.snapshot(host.innerHTML, '<div foo="bar"><span>foobar</span></div>')
 })
 
 it('should render a stateful component', () => {
   const host = document.createElement('div')
-  const Foo = createComponent(({ foo, children }) => createElement('div', { foo }, children))
-  render(createElement(Foo, { is: 'foo-component', foo: 'bar' }, createElement('span', null, 'foobar')), host)
+  const Foo = component(() => ({ foo, children }) => h('div', { foo }, children))
+  render(h(Foo, { is: 'foo-component', foo: 'bar' }, h('span', null, 'foobar')), host)
   assert.snapshot(host.innerHTML, '<foo-component><div foo="bar"><span>foobar</span></div></foo-component>')
 })
 

package/package.json

@@ -1,33 +1,32 @@
 {
   "name": "ajo",
-  "version": "0.0.6",
+  "version": "0.0.9",
   "description": "ajo is a JavaScript view library for building user interfaces",
   "type": "module",
-  "main": "cjs/index.js",
+  "module": "index.js",
+  "main": "index.cjs",
   "exports": {
     ".": {
       "import": "./index.js",
-      "require": "./cjs/index.js"
+      "require": "./index.cjs",
+      "browser": "./index.min.js"
     }
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/cristianfalcone/ajo.git"
+  "scripts": {
+    "build": "npm run build:require && npm run build:browser",
+    "build:require": "esbuild --format=cjs --out-extension:.js=.cjs --outdir=. index.js",
+    "build:browser": "esbuild --format=iife --out-extension:.js=.min.js --outdir=. --global-name=ajo --minify index.js",
+    "release": "npm run build && npm t && git commit -am \"$npm_package_version\" && git tag $npm_package_version && git push && git push --tags && npm publish",
+    "test": "uvu"
   },
+  "repository": "cristianfalcone/ajo",
   "author": "Cristian Falcone",
   "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/cristianfalcone/ajo/issues"
-  },
+  "bugs": "https://github.com/cristianfalcone/ajo/issues",
   "homepage": "https://github.com/cristianfalcone/ajo#readme",
   "devDependencies": {
-    "backdom": "^0.0.3",
-    "esbuild": "^0.14.31",
-    "uvu": "^0.5.3"
-  },
-  "scripts": {
-    "build": "esbuild --outdir=cjs --format=cjs index.js",
-    "test": "uvu"
-  },
-  "readme": "# ajo\najo is a JavaScript view library for building user interfaces\n\n```bash\nnpm install ajo\n```\n\n## Incremental DOM\nTo keep the UI in sync, ajo uses a technique called incremental DOM.\nIt is a way to build UI components without the need to keep previous virtual DOM in memory.\nInstead, generated virtual DOM is diffed against the actual DOM, and changes are applied along the way.\nThis reduces memory usage and makes ajo code more simple and concise. As a result, ajo is easy to read and maintain, but lacks perfomance oportunities that diffing two virtual DOM trees can provide.\n\n```jsx\n/** @jsx createElement */\nimport { render, createElement } from 'ajo'\n\ndocument.body.innerHTML = '<div>Hello World</div>'\n\nrender(<div>Goodbye World</div>, document.body)\n```\n\n## Stateless components\nAs a way to reuse markup snipets, ajo uses simple synchroneous functions that return virtual DOM.\nThis type of components are ment to be \"consumers\" of data.\nNo state is preserved between invocations, so generated virtual DOM should rely exclusively on function's arguments. \n\n```jsx\n/** @jsx createElement */\nimport { render, createElement } from 'ajo'\n\nconst Greet = ({ name }) => <div>Hello {name}</div>\n\nrender(<Greet name=\"World\" />, document.body)\n```\n\n## Stateful components\nSince ajo does not store previous virtual DOM, stateful components rely on a DOM node to preserve its state between UI updates.\nThis DOM node is called a host node (similar to a Web Component host node).\nState is declared in a generator function local scope.\nThen ajo asociates the returned iterator with the host, and updates host children nodes each time, retrieving iterator's next value. Lifecycle of these components are closely related to its host nodes, and generator function provides a way to manage them.\n\n```jsx\n/** @jsx createElement */\nimport { render, createElement, createComponent } from 'ajo'\n\nconst Counter = createComponent(function* () {\n\tlet count = 1\n\t\n\tconst increment = () => {\n\t\tcount++\n\t\tthis.update()\n\t}\n\t\n\tfor ({} of this) yield (\n\t\t<button onclick={increment}>\n\t\t\tCurrent: {count}\n\t\t</button>\n\t)\n})\n\nrender(<Counter />, document.body)\n```\n"
-}
+    "backdom": "^0.0.4",
+    "esbuild": "^0.14.51",
+    "uvu": "^0.5.6"
+  }
+}

package/readme.md

@@ -1,63 +1,54 @@
 # ajo
 ajo is a JavaScript view library for building user interfaces
 
-```bash
+## Install
+
+```sh
 npm install ajo
 ```
 
-## Incremental DOM
-To keep the UI in sync, ajo uses a technique called incremental DOM.
-It is a way to build UI components without the need to keep previous virtual DOM in memory.
-Instead, generated virtual DOM is diffed against the actual DOM, and changes are applied along the way.
-This reduces memory usage and makes ajo code more simple and concise. As a result, ajo is easy to read and maintain, but lacks perfomance oportunities that diffing two virtual DOM trees can provide.
+## Render JSX to a DOM element
 
 ```jsx
-/** @jsx createElement */
-import { render, createElement } from 'ajo'
+/** @jsx h */
+import { h, render } from 'ajo'
 
 document.body.innerHTML = '<div>Hello World</div>'
 
 render(<div>Goodbye World</div>, document.body)
 ```
 
-## Stateless components
-As a way to reuse markup snipets, ajo uses simple synchroneous functions that return virtual DOM.
-This type of components are ment to be "consumers" of data.
-No state is preserved between invocations, so generated virtual DOM should rely exclusively on function's arguments. 
+## Stateless Component
 
 ```jsx
-/** @jsx createElement */
-import { render, createElement } from 'ajo'
+/** @jsx h */
+import { h, render } from 'ajo'
 
 const Greet = ({ name }) => <div>Hello {name}</div>
 
 render(<Greet name="World" />, document.body)
 ```
 
-## Stateful components
-Since ajo does not store previous virtual DOM, stateful components rely on a DOM node to preserve its state between UI updates.
-This DOM node is called a host node (similar to a Web Component host node).
-State is declared in a generator function local scope.
-Then ajo asociates the returned iterator with the host, and updates host children nodes each time, retrieving iterator's next value. Lifecycle of these components are closely related to its host nodes, and generator function provides a way to manage them.
+## Stateful Component
 
 ```jsx
-/** @jsx createElement */
-import { render, createElement, createComponent } from 'ajo'
-
-const Counter = createComponent(function* () {
-	let count = 1
-	
-	const increment = () => {
-		count++
-		this.update()
-	}
-	
-	for ({} of this) yield (
-		<button onclick={increment}>
-			Current: {count}
-		</button>
-	)
+/** @jsx h */
+import { h, component, refresh, render } from 'ajo'
+
+const Counter = component(({ start = 0 }, host) => {
+  
+  let count = start
+  
+  const increment = () => {
+    count++
+    refresh(host)
+  }
+  
+  return () =>
+    <button onclick={increment}>
+      Current: {count}
+    </button>
 })
 
-render(<Counter />, document.body)
+render(<Counter start={1} />, document.body)
 ```

package/cjs/index.js

@@ -1,224 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var ajo_exports = {};
-__export(ajo_exports, {
-  Fragment: () => Fragment,
-  Portal: () => Portal,
-  Skip: () => Skip,
-  consume: () => consume,
-  createComponent: () => createComponent,
-  createElement: () => createElement,
-  createTextNode: () => createTextNode,
-  isElement: () => isElement,
-  provide: () => provide,
-  render: () => render
-});
-module.exports = __toCommonJS(ajo_exports);
-const { isArray } = Array;
-const { hasOwn, keys } = Object;
-const Skip = Symbol();
-const Fragment = ({ children }) => children;
-const Portal = ({ host, children }) => render(host, children);
-const Element = Symbol();
-const createTextNode = (data) => ({ [Element]: "#text", data, skip: true });
-const createElement = (name, props, ...children) => {
-  props = { ...props, [Element]: name };
-  children = props.children ?? children;
-  if (children.length > 0)
-    props.children = children.length === 1 ? children[0] : children;
-  return props;
-};
-const isElement = (el) => hasOwn(el ?? {}, Element);
-function* g(vnode, host) {
-  const vnodes = isArray(vnode) ? vnode : [vnode];
-  let data = "";
-  while (vnodes.length > 0) {
-    vnode = vnodes.shift();
-    if (vnode == null || typeof vnode === "boolean")
-      continue;
-    if (typeof vnode === "string")
-      data += vnode;
-    else if (isElement(vnode)) {
-      const { [Element]: name } = vnode;
-      if (typeof name === "function") {
-        vnodes.unshift(name(vnode, host));
-        continue;
-      }
-      if (data) {
-        yield createTextNode(data);
-        data = "";
-      }
-      yield vnode;
-    } else
-      typeof vnode[Symbol.iterator] === "function" ? vnodes.unshift(...vnode) : data += vnode;
-  }
-  if (data)
-    yield createTextNode(data);
-}
-const render = (vnode, host) => {
-  let child = host.firstChild;
-  for (const { [Element]: name, ref, skip, children, ...props } of g(vnode, host)) {
-    if (name === Skip) {
-      child = props.end ? null : child?.nextSibling ?? null;
-      continue;
-    }
-    let node = child;
-    while (node != null) {
-      if (node.nodeName.toLowerCase() === name && node.getAttribute?.("key") == props.key)
-        break;
-      node = node.nextSibling;
-    }
-    if (node == null)
-      node = name === "#text" ? document.createTextNode("") : document.createElement(name);
-    patch(props, node);
-    if (typeof ref === "function")
-      ref(node);
-    else if (typeof ref === "object" && ref !== null)
-      ref.current = node;
-    skip || render(children, node);
-    if (node === child)
-      child = child.nextSibling;
-    else if (node.contains?.(document.activeElement)) {
-      const { nextSibling } = node;
-      let ref2 = child;
-      while (ref2 != null && ref2 !== node) {
-        const next = ref2.nextSibling;
-        host.insertBefore(ref2, nextSibling);
-        ref2 = next;
-      }
-    } else
-      host.insertBefore(node, child);
-  }
-  while (child != null) {
-    const { nextSibling } = child;
-    if (child.nodeType === Node.ELEMENT_NODE)
-      dispose(child);
-    host.removeChild(child);
-    child = nextSibling;
-  }
-};
-const patch = (props, node) => {
-  if (node.nodeType === Node.TEXT_NODE) {
-    if (node.data !== props.data)
-      node.data = props.data;
-    return;
-  }
-  for (const name of /* @__PURE__ */ new Set([...node.getAttributeNames(), ...keys(props)])) {
-    let value = props[name];
-    if (name in node && !(typeof value === "string" && typeof node[name] === "boolean")) {
-      try {
-        if (node[name] !== value)
-          node[name] = value;
-        continue;
-      } catch (err) {
-      }
-    }
-    if (value === true)
-      value = "";
-    else if (value == null || value === false) {
-      node.removeAttribute(name);
-      continue;
-    }
-    if (node.getAttribute(name) !== value)
-      node.setAttribute(name, value);
-  }
-};
-const components = /* @__PURE__ */ new WeakMap();
-const createComponent = (fn) => ({ is, host, key, ...props }) => createElement(is ?? fn.is ?? "div", {
-  ...fn.host,
-  ...host,
-  key,
-  skip: true,
-  ref: (host2) => {
-    let cmp = components.get(host2);
-    if (cmp == null)
-      components.set(host2, cmp = new Component(host2, fn));
-    cmp.props = { ...fn.props, ...props };
-    cmp.update();
-  }
-});
-class Component {
-  constructor(host, fn) {
-    this.host = host;
-    this.fn = fn;
-    this.props = null;
-    this.it = null;
-    this.err = false;
-  }
-  update({ method = "next", arg } = {}) {
-    if (this.host == null)
-      return;
-    if (this.err)
-      try {
-        this.it.return();
-      } catch (e) {
-        this.host = null;
-      } finally {
-        return;
-      }
-    try {
-      if (this.it == null) {
-        const init = this.fn.call(this, this.props, this.host);
-        this.it = typeof init?.next === "function" ? init : generate.call(this, init);
-      }
-      const { value, done } = this.it[method](arg);
-      render(value, this.host);
-      if (done)
-        this.host = null;
-    } catch (err) {
-      this.err = true;
-      propagate(this.host.parentNode, err);
-    }
-  }
-  *[Symbol.iterator]() {
-    while (this.host)
-      yield this.props;
-  }
-}
-function* generate(init) {
-  yield init;
-  for (const props of this)
-    yield this.fn.call(this, props, this.host);
-}
-const propagate = (el, err) => {
-  if (el == null)
-    throw err;
-  const cmp = components.get(el);
-  typeof cmp?.it?.throw === "function" ? cmp.update({ method: "throw", arg: err }) : propagate(el.parentNode, err);
-};
-const dispose = (el) => {
-  for (const child of el.children)
-    dispose(child);
-  components.get(el)?.update({ method: "return" });
-};
-const provisions = /* @__PURE__ */ new WeakMap();
-const provide = (host, key, value) => {
-  let map = provisions.get(host);
-  if (map == null)
-    provisions.set(host, map = /* @__PURE__ */ new Map());
-  map.set(key, value);
-};
-const consume = (host, key) => {
-  for (let node = host; node != null; node = node.parentNode) {
-    if (provisions.has(node)) {
-      const map = provisions.get(node);
-      if (map.has(key))
-        return map.get(key);
-    }
-  }
-};