ajo 0.0.3 → 0.0.6

package/cjs/index.js

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

package/index.js

@@ -7,12 +7,17 @@ export const Portal = ({ host, children }) => render(host, children)
 
 const Element = Symbol()
 
+export const createTextNode = data => ({ [Element]: '#text', data, skip: true })
+
 export const createElement = (name, props, ...children) => {
-  const { length } = children
-  if (length > 0) (props ?? (props = {})).children = length === 1 ? children[0] : children
-  return { ...props, [Element]: name }
+  props = { ...props, [Element]: name }
+  children = props.children ?? children
+  if (children.length > 0) props.children = children.length === 1 ? children[0] : children
+  return props
 }
 
+export const isElement = el => hasOwn(el ?? {}, Element)
+
 function* g(vnode, host) {
   const vnodes = isArray(vnode) ? vnode : [vnode]
   let data = ''
@@ -22,7 +27,7 @@ function* g(vnode, host) {
 
     if (vnode == null || typeof vnode === 'boolean') continue
     if (typeof vnode === 'string') data += vnode
-    else if (hasOwn(vnode, Element)) {
+    else if (isElement(vnode)) {
       const { [Element]: name } = vnode
 
       if (typeof name === 'function') {
@@ -31,7 +36,7 @@ function* g(vnode, host) {
       }
 
       if (data) {
-        yield { [Element]: '#text', data }
+        yield createTextNode(data)
         data = ''
       }
 
@@ -41,13 +46,13 @@ function* g(vnode, host) {
       : data += vnode
   }
 
-  if (data) yield { [Element]: '#text', data }
+  if (data) yield createTextNode(data)
 }
 
 export const render = (vnode, host) => {
   let child = host.firstChild
 
-  for (const { [Element]: name, ref, children, ...props } of g(vnode, host)) {
+  for (const { [Element]: name, ref, skip, children, ...props } of g(vnode, host)) {
 
     if (name === Skip) {
       child = props.end ? null : child?.nextSibling ?? null
@@ -65,13 +70,12 @@ export const render = (vnode, host) => {
       ? document.createTextNode('')
       : document.createElement(name)
 
-    if (name === '#text') {
-      if (node.data !== props.data) node.data = props.data
-    } else {
-      patch(props, node)
-      setRef(ref, node)
-      render(children, node)
-    }
+    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)) {
@@ -87,14 +91,19 @@ export const render = (vnode, host) => {
   }
 
   while (child != null) {
-    const { nodeType, nextSibling } = child
-    if (nodeType === 1) dispose(child)
+    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 new Set([...node.getAttributeNames(), ...keys(props)])) {
     let value = props[name]
 
@@ -115,21 +124,15 @@ const patch = (props, node) => {
   }
 }
 
-const setRef = (ref, node) => {
-  if (typeof ref === 'function') ref(node)
-  else if (typeof ref === 'object' && ref !== null) ref.current = node
-}
-
 const components = new WeakMap
 
-export const createComponent = fn => ({ is, host, key, ref, ...props }) =>
+export const createComponent = fn => ({ is, host, key, ...props }) =>
   createElement(is ?? fn.is ?? 'div', {
-    ...fn.host, ...host, key, ['ref']: host => {
+    ...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()
-      setRef(ref, host)
     }
   })
 
@@ -163,7 +166,7 @@ class Component {
   }
 
   *[Symbol.iterator]() {
-    while (true) yield this.props
+    while (this.host) yield this.props
   }
 }
 

package/index.test.js

@@ -1,7 +1,7 @@
-import 'backdom/register.js'
+import 'backdom/register'
 import { suite } from 'uvu'
 import * as assert from 'uvu/assert'
-import { createElement, render, } from './index.js'
+import { createComponent, createElement, isElement, render, } from './index.js'
 
 let it
 
@@ -10,7 +10,9 @@ let it
 it = suite('createElement')
 
 it('should create empty vnode', () => {
-  assert.equal(createElement('div'), {})
+  const vnode = createElement('div')
+  assert.ok(isElement(vnode))
+  assert.equal(vnode, {})
 })
 
 it('should create vnode with props', () => {
@@ -22,7 +24,15 @@ it('should create vnode with one string child', () => {
 })
 
 it('should create vnode with one vnode child', () => {
-  assert.equal(createElement('div', null, createElement('span')), { children: {} })
+  const child = createElement('span')
+  const vnode = createElement('div', null, child)
+  assert.ok(isElement(vnode.children))
+})
+
+it('should allow children as prop', () => {
+  const child = createElement('span')
+  const vnode = createElement('div', { children: child })
+  assert.ok(isElement(vnode.children))
 })
 
 it.run()
@@ -37,4 +47,19 @@ it('should render a vnode', () => {
   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)
+  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)
+  assert.snapshot(host.innerHTML, '<foo-component><div foo="bar"><span>foobar</span></div></foo-component>')
+})
+
 it.run()

package/package.json

@@ -1,9 +1,15 @@
 {
   "name": "ajo",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "description": "ajo is a JavaScript view library for building user interfaces",
   "type": "module",
-  "main": "index.js",
+  "main": "cjs/index.js",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./cjs/index.js"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cristianfalcone/ajo.git"
@@ -15,11 +21,13 @@
   },
   "homepage": "https://github.com/cristianfalcone/ajo#readme",
   "devDependencies": {
-    "backdom": "^0.0.2",
+    "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"
+  "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"
 }

package/readme.md

@@ -1,2 +1,63 @@
 # ajo
-ajo is a JavaScript view library for building user interfaces
+ajo is a JavaScript view library for building user interfaces
+
+```bash
+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.
+
+```jsx
+/** @jsx createElement */
+import { render, createElement } 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. 
+
+```jsx
+/** @jsx createElement */
+import { render, createElement } 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.
+
+```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>
+	)
+})
+
+render(<Counter />, document.body)
+```