Release 0.2.8

Author: caseywebdev

docs/dist.js

@@ -1,7 +1,7 @@
 {
   "name": "endr",
   "type": "module",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "author": "Casey Foster <c@sey.me>",
   "license": "MIT",
   "repository": {

package.json

@@ -318,7 +318,7 @@
  *   inserts: Vnode[];
  *   nodeUpdates: Parameters<typeof updateNode>[];
  *   removes: (Element | Text)[];
- *   updates: Vnode[];
+ *   updates: Set<Vnode>;
  * }} Queues
  */
 
@@ -366,7 +366,7 @@
 
 /**
  * @template T
- * @typedef {[T, SetState<T>]} State
+ * @typedef {[T, SetState<T>, SetState<T>]} State
  */
 
 const { console, Element, queueMicrotask } = globalThis;
@@ -430,6 +430,30 @@ export const Try = props => {
   return props.children;
 };
 
+/**
+ * @param {Props} prev
+ * @param {Props} next
+ */
+const defaultMemo = (prev, next) => {
+  if (prev === next) return true;
+
+  for (const key in prev) if (prev[key] !== next[key]) return false;
+
+  for (const key in next) if (!(key in prev)) return false;
+
+  return true;
+};
+
+/**
+ * @template {Component} T
+ * @param {T} Component
+ * @param {typeof defaultMemo} [memo]
+ */
+export const memo = (Component, memo = defaultMemo) => {
+  Component.memo = memo;
+  return Component;
+};
+
 /**
  * @template T
  * @param {T} value
@@ -492,64 +516,6 @@ const createNode = (type, props, parentNode) => {
   );
 };
 
-/**
- * @template {Element} Node
- * @param {Node} node
- * @param {keyof Node} key
- */
-const isSimpleProperty = (node, key) =>
-  key in node && (node[key] == null || !isObject(node[key]));
-
-/**
- * @template {Element | Text} T
- * @param {T} node
- * @param {Props<T>} prev
- * @param {Props<T>} next
- */
-const updateNode = (node, prev, next) => {
-  if (prev === next) return;
-
-  // Element.prototype.TEXT_NODE
-  if (node.nodeType === 3) {
-    node.nodeValue = /** @type {string} */ (next.nodeValue);
-    return;
-  }
-
-  for (const key in prev) {
-    if (key === 'children' || key in next) continue;
-
-    if (key === 'ref') {
-      if (prev.ref) prev.ref.current = null;
-      // @ts-expect-error assignment of a readonly property would fail
-    } else if (isSimpleProperty(node, key)) node[key] = '';
-    else /** @type {Element} */ (node).removeAttribute(key);
-  }
-
-  for (const key in next) {
-    if (key === 'children' || prev[key] === next[key]) continue;
-
-    if (key === 'ref') {
-      if (prev.ref) prev.ref.current = null;
-      if (next.ref) next.ref.current = node;
-    } else if (key === 'style' && isObject(next[key])) {
-      const { style } = /** @type {HTMLElement | SVGElement} */ (node);
-      const prevStyle = /** @type {Partial<CSSStyleDeclaration>} */ (
-        isObject(prev[key]) ? prev[key] : emptyObject
-      );
-      const nextStyle = /** @type {Partial<CSSStyleDeclaration>} */ (next[key]);
-      for (const key in prevStyle) if (!(key in nextStyle)) style[key] = '';
-      for (const key in nextStyle) style[key] = nextStyle[key] ?? '';
-      // @ts-expect-error assignment of a readonly property would fail
-    } else if (isSimpleProperty(node, key)) node[key] = next[key] ?? '';
-    else if (next[key] != null) {
-      /** @type {Element} */ (node).setAttribute(
-        key,
-        /** @type {string} */ (next[key])
-      );
-    } else /** @type {Element} */ (node).removeAttribute(key);
-  }
-};
-
 /** @type {Vnode | null} */
 let currentVnode = null;
 
@@ -572,6 +538,21 @@ export const useRef = initial => {
   return ref;
 };
 
+/**
+ * @param {unknown[]} before
+ * @param {unknown[]} after
+ */
+const depsChanged = (before, after) => {
+  if (before === after) return false;
+
+  let { length } = before;
+  if (length !== after.length) return true;
+
+  while (length--) if (before[length] !== after[length]) return true;
+
+  return false;
+};
+
 /**
  * @param {AfterEffect} fn
  * @param {unknown[]} [deps]
@@ -601,6 +582,48 @@ export const useMemo = (fn, deps = emptyArray) => {
   return ref.current.value;
 };
 
+/**
+ * @param {Vnode} a
+ * @param {Vnode} b
+ */
+const batchComparator = (a, b) => {
+  while (a.depth > b.depth) {
+    a = /** @type {Vnode} */ (a.parent);
+    if (a === b) return 1;
+  }
+
+  while (b.depth > a.depth) {
+    b = /** @type {Vnode} */ (b.parent);
+    if (b === a) return -1;
+  }
+
+  while (a.parent !== b.parent) {
+    a = /** @type {Vnode} */ (a.parent);
+    b = /** @type {Vnode} */ (b.parent);
+  }
+
+  return a.index - b.index;
+};
+
+/** @param {Vnode} vnode */
+const queueUpdate = vnode => {
+  if (vnode.state === 3) return;
+
+  const { queues } = vnode;
+  const { updates } = queues;
+
+  if (updates.size === 0) {
+    queueMicrotask(() => {
+      const batch = [...updates].sort(batchComparator);
+      updates.clear();
+      for (const vnode of batch) if (vnode.state === 1) update(vnode);
+      flush(queues);
+    });
+  }
+  updates.add(vnode);
+  vnode.state = 1;
+};
+
 /**
  * @template T
  * @param {T | (() => T)} initial
@@ -617,26 +640,13 @@ export const useState = initial => {
         queueUpdate(vnode);
       }
       return value;
-    }
+    },
+    maybeValue =>
+      (state[0] = isFunction(maybeValue) ? maybeValue(state[0]) : maybeValue)
   ]);
   return state;
 };
 
-/**
- * @param {unknown[]} before
- * @param {unknown[]} after
- */
-const depsChanged = (before, after) => {
-  if (before === after) return false;
-
-  let { length } = before;
-  if (length !== after.length) return true;
-
-  while (length--) if (before[length] !== after[length]) return true;
-
-  return false;
-};
-
 /**
  * @template {AnyFunction} T
  * @param {T} fn
@@ -649,30 +659,6 @@ export const useCallback = fn => {
   );
 };
 
-/**
- * @param {Props} prev
- * @param {Props} next
- */
-const defaultMemo = (prev, next) => {
-  if (prev === next) return true;
-
-  for (const key in prev) if (prev[key] !== next[key]) return false;
-
-  for (const key in next) if (!(key in prev)) return false;
-
-  return true;
-};
-
-/**
- * @template {Component} T
- * @param {T} Component
- * @param {typeof defaultMemo} [memo]
- */
-export const memo = (Component, memo = defaultMemo) => {
-  Component.memo = memo;
-  return Component;
-};
-
 /**
  * @template {Context<any>} T
  * @param {T} Context
@@ -692,48 +678,6 @@ export const useContext = Context => {
   return /** @type {T['value']} */ ((context ?? Context).value);
 };
 
-/**
- * @param {Vnode} a
- * @param {Vnode} b
- */
-const batchComparator = (a, b) => {
-  while (a.depth > b.depth) {
-    a = /** @type {Vnode} */ (a.parent);
-    if (a === b) return 1;
-  }
-
-  while (b.depth > a.depth) {
-    b = /** @type {Vnode} */ (b.parent);
-    if (b === a) return -1;
-  }
-
-  while (a.parent !== b.parent) {
-    a = /** @type {Vnode} */ (a.parent);
-    b = /** @type {Vnode} */ (b.parent);
-  }
-
-  return a.index - b.index;
-};
-
-/** @param {Vnode} vnode */
-const queueUpdate = vnode => {
-  if (vnode.state === 1 || vnode.state === 3) return;
-
-  const { queues } = vnode;
-  const { updates } = queues;
-
-  if (updates.length === 0) {
-    queueMicrotask(() => {
-      const batch = updates.sort(batchComparator);
-      queues.updates = [];
-      for (const vnode of batch) if (vnode.state === 1) update(vnode);
-      flush(queues);
-    });
-  }
-  updates.push(vnode);
-  vnode.state = 1;
-};
-
 /** @param {Vnode} vnode */
 const getDefs = vnode => {
   const { props, type } = vnode;
@@ -778,6 +722,64 @@ const normalizeDef = def => {
   return jsx(textType, { nodeValue: def });
 };
 
+/**
+ * @template {Element} Node
+ * @param {Node} node
+ * @param {keyof Node} key
+ */
+const isSimpleProperty = (node, key) =>
+  key in node && (node[key] == null || !isObject(node[key]));
+
+/**
+ * @template {Element | Text} T
+ * @param {T} node
+ * @param {Props<T>} prev
+ * @param {Props<T>} next
+ */
+const updateNode = (node, prev, next) => {
+  if (prev === next) return;
+
+  // Element.prototype.TEXT_NODE
+  if (node.nodeType === 3) {
+    node.nodeValue = /** @type {string} */ (next.nodeValue);
+    return;
+  }
+
+  for (const key in prev) {
+    if (key === 'children' || key in next) continue;
+
+    if (key === 'ref') {
+      if (prev.ref) prev.ref.current = null;
+      // @ts-expect-error assignment of a readonly property would fail
+    } else if (isSimpleProperty(node, key)) node[key] = '';
+    else /** @type {Element} */ (node).removeAttribute(key);
+  }
+
+  for (const key in next) {
+    if (key === 'children' || prev[key] === next[key]) continue;
+
+    if (key === 'ref') {
+      if (prev.ref) prev.ref.current = null;
+      if (next.ref) next.ref.current = node;
+    } else if (key === 'style' && isObject(next[key])) {
+      const { style } = /** @type {HTMLElement | SVGElement} */ (node);
+      const prevStyle = /** @type {Partial<CSSStyleDeclaration>} */ (
+        isObject(prev[key]) ? prev[key] : emptyObject
+      );
+      const nextStyle = /** @type {Partial<CSSStyleDeclaration>} */ (next[key]);
+      for (const key in prevStyle) if (!(key in nextStyle)) style[key] = '';
+      for (const key in nextStyle) style[key] = nextStyle[key] ?? '';
+      // @ts-expect-error assignment of a readonly property would fail
+    } else if (isSimpleProperty(node, key)) node[key] = next[key] ?? '';
+    else if (next[key] != null) {
+      /** @type {Element} */ (node).setAttribute(
+        key,
+        /** @type {string} */ (next[key])
+      );
+    } else /** @type {Element} */ (node).removeAttribute(key);
+  }
+};
+
 /** @param {Vnode} vnode */
 const updateChild = vnode => {
   let { child, state } = vnode;
@@ -1015,7 +1017,7 @@ export const createRender = parentNode => {
       inserts: [],
       nodeUpdates: [],
       removes: [],
-      updates: []
+      updates: new Set()
     },
     refs: null,
     sibling: null,