ajo 0.0.2 → 0.0.5

package/index.js

@@ -1,52 +1,59 @@
+const { isArray } = Array
+const { hasOwn, keys } = Object
+
 export const Skip = Symbol()
 export const Fragment = ({ children }) => children
 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
-  children = length == 0 ? null : length == 1 ? children[0] : children
-  return { children, ...props, [Element]: name }
+  props = { ...props }
+  children = props.children ?? children
+  if (children.length > 0) props.children = children.length === 1 ? children[0] : children
+  props[Element] = name
+  return props
 }
 
 function* g(vnode, host) {
-  const vnodes = Array.isArray(vnode) ? vnode : [vnode]
-  let textContent = ''
+  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') textContent += vnode
-    else if (Object.hasOwn(vnode, Element)) {
+    if (vnode == null || typeof vnode === 'boolean') continue
+    if (typeof vnode === 'string') data += vnode
+    else if (hasOwn(vnode, Element)) {
       const { [Element]: name } = vnode
 
-      if (typeof name == 'function') {
+      if (typeof name === 'function') {
         vnodes.unshift(name(vnode, host))
         continue
       }
 
-      if (textContent) {
-        yield { [Element]: '#text', textContent }
-        textContent = ''
+      if (data) {
+        yield createTextNode(data)
+        data = ''
       }
 
       yield vnode
-    } else typeof vnode[Symbol.iterator] == 'function'
+    } else typeof vnode[Symbol.iterator] === 'function'
       ? vnodes.unshift(...vnode)
-      : textContent += vnode
+      : data += vnode
   }
 
-  if (textContent) yield { [Element]: '#text', textContent }
+  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) {
+    if (name === Skip) {
       child = props.end ? null : child?.nextSibling ?? null
       continue
     }
@@ -54,26 +61,27 @@ export const render = (vnode, host) => {
     let node = child
 
     while (node != null) {
-      if (String(node.nodeName).toLowerCase() === name && node.getAttribute?.('key') == props.key) break
+      if (node.nodeName.toLowerCase() === name && node.getAttribute?.('key') == props.key) break
       node = node.nextSibling
     }
 
-    if (node == null) node = name == '#text'
+    if (node == null) node = name === '#text'
       ? document.createTextNode('')
       : document.createElement(name)
 
     patch(props, node)
 
-    if (typeof ref == 'function') ref(node)
-
-    if (children != null) render(children, 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
+    if (node === child) child = child.nextSibling
     else if (node.contains?.(document.activeElement)) {
       const { nextSibling } = node
       let ref = child
 
-      while (ref != null && ref != node) {
+      while (ref != null && ref !== node) {
         const next = ref.nextSibling
         host.insertBefore(ref, nextSibling)
         ref = next
@@ -82,18 +90,23 @@ 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) => {
-  for (const name of new Set([...(node.getAttributeNames?.() ?? []), ...Object.keys(props)])) {
+  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]
 
-    if (name in node && !(typeof value == 'string' && typeof node[name] == 'boolean')) {
+    if (name in node && !(typeof value === 'string' && typeof node[name] === 'boolean')) {
       try {
         if (node[name] !== value) node[name] = value
         continue
@@ -110,16 +123,15 @@ const patch = (props, node) => {
   }
 }
 
-const components = new WeakMap()
+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()
-      if (typeof ref == 'function') ref(host)
     }
   })
 
@@ -139,7 +151,7 @@ class Component {
     try {
       if (this.it == null) {
         const init = this.fn.call(this, this.props, this.host)
-        this.it = typeof init?.next == 'function' ? init : generate(init, this)
+        this.it = typeof init?.next === 'function' ? init : generate.call(this, init)
       }
 
       const { value, done } = this.it[method](arg)
@@ -153,19 +165,19 @@ class Component {
   }
 
   *[Symbol.iterator]() {
-    while (true) yield this.props
+    while (this.host) yield this.props
   }
 }
 
-function* generate(init, ctx) {
+function* generate(init) {
   yield init
-  for (const props of ctx) yield ctx.fn.call(ctx, props, ctx.host)
+  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'
+  typeof cmp?.it?.throw === 'function'
     ? cmp.update({ method: 'throw', arg: err })
     : propagate(el.parentNode, err)
 }

package/index.test.js

@@ -0,0 +1,55 @@
+import 'backdom/register.js'
+import { suite } from 'uvu'
+import * as assert from 'uvu/assert'
+import { createComponent, createElement, render, } from './index.js'
+
+let it
+
+// ----------------------------------------------------------------------------
+
+it = suite('createElement')
+
+it('should create empty vnode', () => {
+  assert.equal(createElement('div'), {})
+})
+
+it('should create vnode with props', () => {
+  assert.equal(createElement('div', { id: 'app' }), { id: 'app' })
+})
+
+it('should create vnode with one string child', () => {
+  assert.equal(createElement('div', null, 'foo'), { children: 'foo' })
+})
+
+it('should create vnode with one vnode child', () => {
+  assert.equal(createElement('div', null, createElement('span')), { children: {} })
+})
+
+it.run()
+
+// ----------------------------------------------------------------------------
+
+it = suite('render')
+
+it('should render a vnode', () => {
+  const host = document.createElement('div')
+  render(createElement('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)
+  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,9 @@
 {
   "name": "ajo",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "description": "ajo is a JavaScript view library for building user interfaces",
-  "main": "index.js",
   "type": "module",
+  "main": "index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cristianfalcone/ajo.git"
@@ -14,8 +14,12 @@
     "url": "https://github.com/cristianfalcone/ajo/issues"
   },
   "homepage": "https://github.com/cristianfalcone/ajo#readme",
+  "devDependencies": {
+    "backdom": "^0.0.2",
+    "uvu": "^0.5.3"
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "uvu"
   },
   "readme": "# ajo\najo is a JavaScript view library for building user interfaces"
 }