ajo 0.0.7 → 0.0.10

package/index.cjs

@@ -32,10 +32,10 @@ __export(ajo_exports, {
   stx: () => stx
 });
 module.exports = __toCommonJS(ajo_exports);
-const Fragment = ({ children }) => children, h = (tagName, props, ...children) => {
+const Fragment = ({ children }) => children, h = (nodeName, props, ...children) => {
   children = children.length == 0 ? null : children.length == 1 ? children[0] : children;
-  return { children, ...props, tagName };
-}, component = (setup) => ({ is, key, ref, host, ...props }) => h(is ?? setup.is ?? "div", {
+  return { children, ...props, nodeName };
+}, component = (setup) => ({ is, key, host, ref, ...props }) => h(is ?? setup.is ?? "div", {
   key,
   ...setup.host,
   ...host,
@@ -44,26 +44,27 @@ const Fragment = ({ children }) => children, h = (tagName, props, ...children) =
 }), render = (h2, host) => {
   let child = host.firstChild, node, byKey = keyed.get(host);
   for (h2 of normalize(h2, host)) {
-    if (typeof h2 == str) {
+    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 (hasOwn(h2, "tagName")) {
-      const { tagName, key, skip, ref, children, block, ...props } = 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 == tagName)
+          if (node.localName == nodeName)
             break;
-      node ||= document.createElement(tagName);
-      key != null && (byKey ||= keyed.set(host, createMap(Map))).set(key, node);
+      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);
-    } else
-      node = h2;
+    }
     node === child ? child = child.nextSibling : before(host, child, node);
   }
   while (child) {
@@ -80,7 +81,7 @@ const Fragment = ({ children }) => children, h = (tagName, props, ...children) =
   } catch (error) {
     propagate(host, error);
   }
-}, provide = (host, key, value) => (provisions.get(host) ?? provisions.set(host, createMap(Map))).set(key, value), consume = (host, key, fallback) => {
+}, 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))
@@ -102,21 +103,24 @@ const Fragment = ({ children }) => children, h = (tagName, props, ...children) =
     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 createMap = (constructor, ...args) => {
-  const instance = new constructor(...args);
-  const { set } = instance;
+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, search = /([a-z0-9])([A-Z])/g, replace = "$1-$2", str = "string", fn = "function", { keys, entries, hasOwn } = Object, { isArray, from } = Array, wm = WeakMap, deps = createMap(wm), memo = createMap(wm), keyed = createMap(wm), cache = createMap(wm), renders = createMap(wm), cleaners = createMap(wm), provisions = createMap(wm), interceptors = createMap(wm), normalize = function* (h2, host) {
+}, 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 (h2 instanceof Node || hasOwn(h2, "tagName")) {
-      if (isFn(h2.tagName)) {
-        yield* normalize(h2.tagName(h2, host), host);
+    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) {
@@ -126,7 +130,7 @@ const createMap = (constructor, ...args) => {
       yield h2;
       continue;
     }
-    type == str || !isFn(h2[Symbol.iterator]) ? buffer += h2 : yield* normalize(h2, host);
+    isFn(h2[Symbol.iterator]) ? yield* normalize(h2, host) : buffer += h2;
   }
   if (buffer)
     yield buffer;

package/index.min.js

@@ -0,0 +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);})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajo",
-  "version": "0.0.7",
+  "version": "0.0.10",
   "description": "ajo is a JavaScript view library for building user interfaces",
   "type": "module",
   "module": "index.js",
@@ -8,13 +8,19 @@
   "exports": {
     ".": {
       "import": "./index.js",
-      "require": "./index.cjs"
+      "require": "./index.cjs",
+      "browser": "./index.min.js"
     }
   },
+  "files": [
+    "index.min.js"
+  ],
   "scripts": {
-    "build": "esbuild --format=cjs --out-extension:.js=.cjs --outdir=. index.js",
-    "test": "uvu",
-    "release": "npm run build && npm t && git commit -am \"$npm_package_version\" && git tag $npm_package_version && git push && git push --tags && npm publish"
+    "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 test && git commit -am \"$npm_package_version\" && git tag $npm_package_version && git push && git push --tags && npm publish",
+    "test": "npm run build && uvu"
   },
   "repository": "cristianfalcone/ajo",
   "author": "Cristian Falcone",

package/readme.md

@@ -1,15 +1,13 @@
 # ajo
 ajo is a JavaScript view library for building user interfaces
 
+## 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 h */
@@ -17,13 +15,10 @@ import { h, render } from 'ajo'
 
 document.body.innerHTML = '<div>Hello World</div>'
 
-render(document.body, <div>Goodbye 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 h */
@@ -31,20 +26,17 @@ import { h, render } from 'ajo'
 
 const Greet = ({ name }) => <div>Hello {name}</div>
 
-render(document.body, <Greet name="World" />)
+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 h */
-import { h, component, render, refresh } from 'ajo'
+import { h, component, refresh, render } from 'ajo'
 
 const Counter = component(({ start = 0 }, host) => {
+  
   let count = start
   
   const increment = () => {
@@ -58,5 +50,5 @@ const Counter = component(({ start = 0 }, host) => {
     </button>
 })
 
-render(document.body, <Counter start={1} />)
+render(<Counter start={1} />, document.body)
 ```

package/index.js

@@ -1,203 +0,0 @@
-export const
-  Fragment = ({ children }) => children,
-
-  h = (tagName, props, ...children) => {
-    children = children.length == 0 ? null : children.length == 1 ? children[0] : children
-    return { children, ...props, tagName }
-  },
-
-  component = setup => ({ is, key, ref, host, ...props }) => h(is ?? setup.is ?? 'div', {
-    key, ...setup.host, ...host, skip: true, ref: host => (refresh(host, props, setup), isFn(ref) && ref(host))
-  }),
-
-  render = (h, host) => {
-
-    let child = host.firstChild, node, byKey = keyed.get(host)
-
-    for (h of normalize(h, host)) {
-
-      if (typeof h == str) {
-
-        for (node = child; node; node = node.nextSibling) if (node.nodeType == 3) break
-        node ? node.data !== h && (node.data = h) : node = document.createTextNode(h)
-
-      } else if (hasOwn(h, 'tagName')) {
-
-        const { tagName, key, skip, ref, children, block, ...props } = h
-
-        if (key != null && (node = byKey?.get(key)));
-        else for (node = child; node; node = node.nextSibling) if (node.localName == tagName) break
-
-        node ||= document.createElement(tagName)
-
-        key != null && (byKey ||= keyed.set(host, createMap(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)
-
-      } else node = h
-
-      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, createMap(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, 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
-  createMap = (constructor, ...args) => {
-    const instance = new constructor(...args)
-    const { 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,
-
-  search = /([a-z0-9])([A-Z])/g,
-  replace = '$1-$2',
-  str = 'string',
-  fn = 'function',
-
-  { keys, entries, hasOwn } = Object,
-  { isArray, from } = Array,
-  wm = WeakMap,
-
-  deps = createMap(wm),
-  memo = createMap(wm),
-  keyed = createMap(wm),
-  cache = createMap(wm),
-  renders = createMap(wm),
-  cleaners = createMap(wm),
-  provisions = createMap(wm),
-  interceptors = createMap(wm),
-
-  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 (h instanceof Node || hasOwn(h, 'tagName')) {
-
-        if (isFn(h.tagName)) {
-          yield* normalize(h.tagName(h, host), host)
-          continue
-        }
-
-        if (buffer) {
-          yield buffer
-          buffer = ''
-        }
-
-        yield h
-        continue
-      }
-
-      (type == str || !isFn(h[Symbol.iterator])) ? buffer += h : yield* normalize(h, host)
-    }
-
-    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.test.js

@@ -1,63 +0,0 @@
-import 'backdom/register'
-import { suite } from 'uvu'
-import * as assert from 'uvu/assert'
-import { component, h, render } from './index.js'
-
-let it
-
-// ----------------------------------------------------------------------------
-
-it = suite('h')
-
-it('should create empty vnode', () => {
-  const vnode = h('div')
-  assert.equal(vnode, { tagName: 'div', children: null })
-})
-
-it('should create vnode with props', () => {
-  assert.equal(h('div', { id: 'app' }), { tagName: 'div', children: null, id: 'app' })
-})
-
-it('should create vnode with one string child', () => {
-  assert.equal(h('div', null, 'foo'), { tagName: 'div', children: 'foo' })
-})
-
-it('should create vnode with one vnode child', () => {
-  const child = h('span')
-  const vnode = h('div', null, child)
-  assert.equal(vnode.children, { tagName: 'span', children: null })
-})
-
-it('should allow children as prop', () => {
-  const child = h('span')
-  const vnode = h('div', { children: child })
-  assert.equal(vnode.children, { tagName: 'span', children: null })
-})
-
-it.run()
-
-// ----------------------------------------------------------------------------
-
-it = suite('render')
-
-it('should render a vnode', () => {
-  const host = document.createElement('div')
-  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 }) => 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 = 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>')
-})
-
-it.run()