ajo 0.1.31 → 0.1.33

package/index.js

@@ -1,8 +1,11 @@
-import { Context, current } from 'ajo/context'
+import { Context, current } from './context.js'
+import { isVNode, mark } from './jsx.js'
+
+const { isArray } = Array, { assign, hasOwn, keys } = Object
 
 const Key = Symbol.for('ajo.key')
+const Keyed = Symbol.for('ajo.keyed')
 const Memo = Symbol.for('ajo.memo')
-const Ref = Symbol.for('ajo.ref')
 const Cache = Symbol.for('ajo.cache')
 const Generator = Symbol.for('ajo.generator')
 const Iterator = Symbol.for('ajo.iterator')
@@ -10,22 +13,15 @@ const Render = Symbol.for('ajo.render')
 const Args = Symbol.for('ajo.args')
 const Controller = Symbol.for('ajo.controller')
 
-export const Fragment = props => props.children
-
-export const h = (type, props, ...children) => {
-
-	(props ??= {}).nodeName = type
-
-	if (!('children' in props) && children.length) props.children = children.length == 1 ? children[0] : children
+export const defaults = { tag: 'div' }
 
-	return props
-}
+export const stateful = (fn, is) => (is && (fn.is = is), fn)
 
 export const render = (h, el, child = el.firstChild, ref = null) => {
 
-	for (h of walk(h)) {
+	walk(h, h => {
 
-		const node = reconcile(h, el, child)
+		const node = typeof h == 'string' ? text(h, child, ref) : element(h, el, child, ref)
 
 		if (child == null) {
 
@@ -45,21 +41,33 @@ export const render = (h, el, child = el.firstChild, ref = null) => {
 
 			before(el, node, child)
 		}
-	}
+	})
+
+	if (child && !ref && child == el.firstChild) {
+
+		const gone = []
 
-	while (child != ref) {
+		el[Keyed]?.clear()
+
+		while (child) gone.push(child), child = child.nextSibling
+
+		el.textContent = ''
+
+		for (child of gone) if (child.nodeType == 1) unref(child)
+
+	} else while (child && child != ref) {
 
 		const node = child.nextSibling
 
-		if (child.nodeType == 1) unref(child)
+		const gone = el.removeChild(child)
 
-		el.removeChild(child)
+		if (gone.nodeType == 1) unref(gone, el)
 
 		child = node
 	}
 }
 
-const walk = function* (h) {
+const walk = (h, fn) => {
 
 	if (h == null) return
 
@@ -67,29 +75,29 @@ const walk = function* (h) {
 
 	if (type == 'boolean') return
 
-	if (type == 'string') yield h
+	if (type == 'string') fn(h)
 
-	else if (type == 'number' || type == 'bigint') yield String(h)
+	else if (type == 'number' || type == 'bigint') fn(String(h))
 
-	else if (Symbol.iterator in h) for (h of h) yield* walk(h)
+	else if (isVNode(h)) typeof h.nodeName == 'function' ? run(h, fn) : fn(h)
 
-	else if ('nodeName' in h) typeof h.nodeName == 'function' ? yield* run(h) : yield h
+	else if (Symbol.iterator in Object(h)) for (h of h) walk(h, fn)
 
-	else yield String(h)
+	else fn(String(h))
 }
 
-const run = function* ({ nodeName, ...h }) {
+const run = ({ nodeName, ...h }, fn) => {
 
-	if (nodeName.constructor.name == 'GeneratorFunction') yield runGenerator(nodeName, h)
+	if (nodeName.constructor.name == 'GeneratorFunction') fn(runGenerator(nodeName, h))
 
-	else yield* walk(nodeName(h))
+	else walk(nodeName(h), fn)
 }
 
 const runGenerator = (fn, h) => {
 
 	const attrs = { ...fn.attrs }, args = { ...fn.args }
 
-	for (const key in h) {
+	for (const key of keys(h)) {
 
 		if (key.startsWith('attr:')) attrs[key.slice(5)] = h[key]
 
@@ -98,23 +106,25 @@ const runGenerator = (fn, h) => {
 		else args[key] = h[key]
 	}
 
-	return { ...attrs, nodeName: fn.is ?? 'div', [Generator]: fn, [Args]: args }
+	return mark({ ...attrs, nodeName: fn.is ?? defaults.tag, [Generator]: fn, [Args]: args })
 }
 
-const reconcile = (h, el, node) => typeof h == 'string' ? text(h, node) : element(h, el, node)
+const text = (h, node, ref) => {
 
-const text = (h, node) => {
+	while (node && node != ref && node.nodeType != 3) node = node.nextSibling
 
-	while (node && node.nodeType != 3) node = node.nextSibling
-
-	node ? node.data != h && (node.data = h) : node = document.createTextNode(h)
+	node && node != ref ? node.data != h && (node.data = h) : node = document.createTextNode(h)
 
 	return node
 }
 
-const element = ({ nodeName, children, key, skip, memo, ref, [Generator]: gen, [Args]: args, ...h }, el, node) => {
+const element = (h, el, node, ref) => {
+
+	const nodeName = h.nodeName, key = h.key, gen = h[Generator]
 
-	while (node && (
+	if (node && key != null && ref == null) node = (el[Keyed] ??= new Map()).get(key) ?? node
+
+	while (node && node != ref && (
 
 		(node.localName != nodeName) ||
 
@@ -122,19 +132,23 @@ const element = ({ nodeName, children, key, skip, memo, ref, [Generator]: gen, [
 
 		(node[Generator] && node[Generator] != gen)
 
-	)) node = node.nextSibling
+	)) node = node[Key] != null ? null : node.nextElementSibling
+
+	if (node == ref) node = null
 
 	node ??= document.createElementNS(h.xmlns ?? el.namespaceURI, nodeName)
 
-	if (key != null) node[Key] = key
+	if (key != null) (el[Keyed] ??= new Map()).set(node[Key] = key, node)
 
-	if (memo == null || some(node[Memo], node[Memo] = memo)) {
+	if (!node[Cache] || h.memo == null || some(node[Memo], h.memo)) {
 
-		attrs(node[Cache] ?? extract(node), node[Cache] = h, node)
+		attrs(node[Cache], h, node)
 
-		if (!skip) gen ? next(gen, args, node) : render(children, node)
+		if (!h.skip) gen ? next(gen, h[Args], node) : !node[Cache] && (typeof h.children == 'string' || typeof h.children == 'number') ? node.textContent = h.children + '' : render(h.children, node)
 
-		if (typeof ref == 'function') (node[Ref] = ref)(node)
+		node[Memo] = h.memo
+
+		node[Cache] = h
 	}
 
 	return node
@@ -142,25 +156,68 @@ const element = ({ nodeName, children, key, skip, memo, ref, [Generator]: gen, [
 
 const attrs = (cache, h, node) => {
 
-	for (const key in { ...cache, ...h }) {
+	if (!cache) for (let i = node.attributes.length; i--;) hasOwn(h, node.attributes[i].name) || node.removeAttribute(node.attributes[i].name)
+
+	for (const key in h) if (hasOwn(h, key)) {
+
+		const value = h[key]
+
+		if (cache && cache[key] === value || key == 'nodeName' || key == 'children' || key == 'key' || key == 'skip' || key == 'memo') continue
 
-		if (cache[key] === h[key]) continue
+		if (key == 'ref' && typeof value == 'function') value(node)
 
-		if (key.startsWith('set:')) node[key.slice(4)] = h[key]
+		else if (key.startsWith('set:')) node[key.slice(4)] = value
 
-		else if (h[key] == null || h[key] === false) node.removeAttribute(key)
+		else if (value == null || value === false) node.removeAttribute(key)
 
-		else node.setAttribute(key, h[key] === true ? '' : h[key])
+		else if (key == 'class' && typeof node.className == 'string') node.className = value === true ? '' : value
+
+		else node.setAttribute(key, value === true ? '' : value)
+	}
+
+	if (cache) for (const key in cache) if (hasOwn(cache, key)) {
+
+		if (hasOwn(h, key) || key == 'nodeName' || key == 'children' || key == 'key' || key == 'skip' || key == 'memo') continue
+
+		if (key.startsWith('set:')) node[key.slice(4)] = undefined
+
+		else node.removeAttribute(key)
 	}
 }
 
-const some = (a, b) => Array.isArray(a) && Array.isArray(b) ? a.some((v, i) => v !== b[i]) : a !== b
+const some = (a, b) => {
+
+	if (isArray(a) && isArray(b)) {
+
+		if (a.length != b.length) return true
 
-const extract = el => Array.from(el.attributes).reduce((out, attr) => (out[attr.name] = attr.value, out), {})
+		for (let i = a.length; i--;) if (a[i] !== b[i]) return true
+
+		return false
+	}
+
+	return a !== b
+}
+
+const each = (fn, node) => {
+
+	let child = node.firstElementChild
+
+	while (child)
+
+		if (fn(child) && child.firstElementChild) child = child.firstElementChild
+
+		else {
+
+			while (child != node && !child.nextElementSibling) child = child.parentNode ?? node
+
+			child = child != node && child.nextElementSibling
+		}
+}
 
 const before = (el, node, child) => {
 
-	if (node.contains(document.activeElement)) {
+	if (node.isConnected && node.contains(document.activeElement)) {
 
 		const ref = node.nextSibling
 
@@ -176,33 +233,57 @@ const before = (el, node, child) => {
 	} else el.insertBefore(node, child)
 }
 
-const unref = node => {
+const unref = (root, parent) => {
+
+	if (root[Memo] == unref) return
+
+	root[Memo] = unref
+
+	let node = root
+
+	while (node.firstElementChild) node = node.firstElementChild
+
+	while (true) {
 
-	for (const child of node.children) unref(child)
+		const { nextElementSibling, parentNode } = node
 
-	if (typeof node.return == 'function') node.return()
+		if (node[Key] != null) (parentNode ?? parent)?.[Keyed]?.delete(node[Key])
 
-	node[Ref]?.(null)
+		if (typeof node.return == 'function') node.return(false)
+
+		if (typeof node[Cache]?.ref == 'function') node[Cache].ref(null)
+
+		if (node === root) break
+
+		node = nextElementSibling ?? parentNode ?? root
+
+		if (nextElementSibling) while (node.firstElementChild) node = node.firstElementChild
+	}
 }
 
 const next = (fn, args, el) => {
 
-	el[Generator] ??= (attach(el), fn)
+	el[Generator] ??= (watch(), assign(el, methods)[Context] = Object.create(current()?.[Context] ?? null), fn)
+
+	for (const key of keys(el[Args] ??= args)) hasOwn(args, key) || delete el[Args][key]
 
-	Object.assign(el[Args] ??= {}, args)
+	assign(el[Args], args)
 
 	el[Render]()
 }
 
-const attach = el => {
+let observer
 
-	Object.assign(el, methods)
+const watch = () => observer || (observer = new MutationObserver(records => {
 
-	el[Context] = Object.create(current()?.[Context] ?? null)
-}
+	for (const record of records) for (const node of record.removedNodes) if (node.nodeType == 1 && !node.isConnected) unref(node, record.target)
+
+})).observe(document, { childList: true, subtree: true })
 
 const methods = {
 
+	*[Symbol.iterator]() { while (true) yield this[Args] },
+
 	[Render]() {
 
 		const parent = current()
@@ -222,8 +303,6 @@ const methods = {
 
 			render(value, this)
 
-			this[Ref]?.(this)
-
 			if (done) this.return()
 
 		} catch (e) {
@@ -238,6 +317,8 @@ const methods = {
 
 	next(fn, result) {
 
+		if (this[Iterator] === false || !this.isConnected) return result
+
 		try {
 
 			if (typeof fn == 'function') result = fn.call(this, this[Args])
@@ -266,11 +347,19 @@ const methods = {
 		throw value
 	},
 
-	return() {
+	return(deep = true) {
+
+		if (this[Iterator] === false) return
+
+		const iterator = this[Iterator]
+
+		this[Iterator] = false
+
+		if (deep) each(el => typeof el.return == 'function' ? el.return() : true, this)
 
 		try {
 
-			this[Iterator]?.return()
+			iterator?.return()
 
 		} catch (e) {
 

package/jsx.js

@@ -0,0 +1,20 @@
+const VNode = Symbol.for('ajo.vnode')
+
+export const mark = v => (v[VNode] = v, v)
+
+export const isVNode = v => v?.[VNode] === v
+
+export const Fragment = props => props.children
+
+export function jsx(type, props, key) {
+
+	(props ??= {}).nodeName = type
+
+	if (key != null) props.key = key
+
+	return mark(props)
+}
+
+export const jsxs = jsx
+
+export const jsxDEV = jsx

package/package.json

@@ -1,26 +1,34 @@
 {
   "name": "ajo",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "description": "ajo is a JavaScript view library for building user interfaces",
   "type": "module",
   "types": "./types.ts",
   "module": "./dist/index.js",
-  "main": "./dist/index.cjs",
   "exports": {
     ".": {
+      "react-native": "./index.js",
       "types": "./types.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": "./dist/index.js"
     },
     "./context": {
+      "react-native": "./context.js",
       "types": "./types.ts",
-      "import": "./dist/context.js",
-      "require": "./dist/context.cjs"
+      "import": "./dist/context.js"
     },
     "./html": {
       "types": "./types.ts",
-      "import": "./dist/html.js",
-      "require": "./dist/html.cjs"
+      "import": "./dist/html.js"
+    },
+    "./jsx-runtime": {
+      "react-native": "./jsx.js",
+      "types": "./types.ts",
+      "import": "./dist/jsx.js"
+    },
+    "./jsx-dev-runtime": {
+      "react-native": "./jsx.js",
+      "types": "./types.ts",
+      "import": "./dist/jsx.js"
     }
   },
   "files": [
@@ -28,15 +36,17 @@
     "context.js",
     "html.js",
     "index.js",
+    "jsx.js",
     "LLMs.md",
     "types.ts"
   ],
   "devDependencies": {
-    "@types/node": "25.2.3",
-    "happy-dom": "20.6.1",
-    "vite": "7.3.1",
-    "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.0.18"
+    "@types/node": "26.0.0",
+    "happy-dom": "20.10.6",
+    "terser": "5.48.0",
+    "typescript": "6.0.3",
+    "vite": "8.0.16",
+    "vitest": "4.1.9"
   },
   "keywords": [
     "ui",
@@ -45,13 +55,19 @@
     "dom",
     "jsx"
   ],
-  "repository": "cristianfalcone/ajo",
+  "repository": {
+    "type": "git",
+    "url": "cristianfalcone/ajo"
+  },
   "author": "Cristian Falcone",
   "license": "ISC",
   "bugs": "https://github.com/cristianfalcone/ajo/issues",
   "homepage": "https://github.com/cristianfalcone/ajo#readme",
   "scripts": {
     "test": "vitest --run",
+    "bench": "pnpm --dir bench bench",
+    "bench:quick": "pnpm --dir bench bench:quick",
+    "bench:ajo": "pnpm --dir bench bench:ajo",
     "build": "vite build",
     "bump": "pnpm version patch && git push && git push --tags",
     "release": "pnpm test && pnpm build && pnpm bump && pnpm publish"