Release 0.2.0

Author: caseywebdev

README.md

@@ -2,7 +2,7 @@
 An **En**gine for **D**OM **R**ecombobulation.
 
 ```jsx
-import { createRoot, useState } from 'endr';
+import { createRender, useState } from 'endr';
 
 const Root = () => {
   const [count, setCount] = useState(0);
@@ -15,7 +15,7 @@ const Root = () => {
   );
 };
 
-createRoot(document.body).render(<Root />);
+createRender(document.body)(<Root />);
 ```
 
 # Why?
@@ -88,3 +88,12 @@ being found.
     `<AllMyChildren />` or any descendents throws an exception.
   - React's `Suspense` can be recreated with `Try` by awaiting all thrown
     promises, if desired.
+- `createRender` replaces `createRoot`. `createRender` returns a render function
+  that can be called as often as desired to re-render at the root. To unmount
+  all rendered components, simply call render with no children.
+  ```js
+  import { createRender } from 'endr';
+  const render = createRender(document.body);
+  render(<MyDisappearingApp />);
+  setTimeout(() => render(), 5000);
+  ```

docs/dist.js

@@ -4,7 +4,7 @@ import {
   Portal,
   Try,
   createContext,
-  createRoot,
+  createRender,
   memo,
   useCallback,
   useContext,
@@ -246,7 +246,16 @@ const Root = () => {
         </div>
       </div>
       <button
-        onclick={root.unmount}
+        onclick={() =>
+          render(
+            <div style={{ padding: '1rem', textAlign: 'center' }}>
+              <div style={{ color: 'white', marginBottom: '1rem' }}>
+                Unmounted!
+              </div>
+              <button onclick={() => render(<Root />)}>Remount</button>
+            </div>
+          )
+        }
         style={{ position: 'fixed', bottom: '1rem', right: '1rem' }}
       >
         Unmount
@@ -255,9 +264,9 @@ const Root = () => {
   );
 };
 
-const root = createRoot(
+const render = createRender(
   /** @type {Element} */ (document.getElementById('root')).attachShadow({
     mode: 'open'
   })
 );
-root.render(<Root />);
+render(<Root />);

docs/index.js

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

package.json

@@ -310,8 +310,6 @@
  * }} Effect
  */
 
-/** @typedef {{ render: (children: Children) => void; unmount: () => void }} Root */
-
 /**
  * @typedef {{
  *   afterEffects: Vnode[];
@@ -412,12 +410,6 @@ const isEmpty = value => value == null || value === false || value === '';
  */
 const isFunction = value => typeof value === 'function';
 
-/**
- * @param {unknown} value
- * @returns {value is (unknown)[]}
- */
-const isArray = value => Array.isArray(value);
-
 /**
  * @param {unknown} value
  * @returns {value is {[key: string]: unknown}}
@@ -622,7 +614,7 @@ export const useState = initial => {
       return value;
     }
   ]);
-  return /** @type {State<T>} */ ([...state]);
+  return state;
 };
 
 /**
@@ -647,7 +639,9 @@ const depsChanged = (before, after) => {
 export const useCallback = fn => {
   const ref = useRef(() => fn);
   ref.current = fn;
-  return useMemo(() => /** @type {T} */ ((...args) => ref.current(...args)));
+  return useMemo(
+    () => /** @type {T} */ ((...args) => ref.current.apply(null, args))
+  );
 };
 
 /**
@@ -727,10 +721,7 @@ const queueUpdate = vnode => {
     queueMicrotask(() => {
       const batch = updates.sort(batchComparator);
       queues.updates = [];
-      for (let i = 0; i < batch.length; ++i) {
-        const vnode = batch[i];
-        if (vnode.state === 1) update(vnode);
-      }
+      for (const vnode of batch) if (vnode.state === 1) update(vnode);
       flush(queues);
     });
   }
@@ -755,7 +746,11 @@ const getDefs = vnode => {
       [currentVnode, effectIndex, refIndex] = prev;
     }
   }
-  return isEmpty(children) ? [] : isArray(children) ? children : [children];
+  return isEmpty(children)
+    ? []
+    : Array.isArray(children)
+      ? children
+      : [children];
 };
 
 /** @param {unknown} def */
@@ -793,7 +788,7 @@ const getNodes = ({ child, node }) => {
 
   /** @type {(Element | Text)[]} */
   const nodes = [];
-  for (; child; child = child.sibling) nodes.push(...getNodes(child));
+  for (; child; child = child.sibling) nodes.push.apply(nodes, getNodes(child));
   return nodes;
 };
 
@@ -815,8 +810,7 @@ const update = vnode => {
 
   if (vnode.effects) {
     try {
-      for (let i = 0; i < vnode.effects.length; ++i) {
-        const effect = vnode.effects[i];
+      for (const effect of vnode.effects) {
         if (effect.after && effect.before) {
           effect.before();
           effect.before = undefined;
@@ -900,9 +894,7 @@ const update = vnode => {
   }
   vnode.lastNode = vnode.node ?? prevNode ?? null;
 
-  if (prevChildren) {
-    for (const child of prevChildren.values()) remove(child);
-  }
+  if (prevChildren) for (const child of prevChildren.values()) remove(child);
 
   if (vnode.effects) afterEffects.push(vnode);
 };
@@ -918,8 +910,7 @@ const remove = (vnode, removeNode = true) => {
 
   if (effects) {
     try {
-      for (let i = 0; i < effects.length; ++i) {
-        const effect = effects[i];
+      for (const effect of effects) {
         if (effect.before) {
           effect.before();
           effect.before = undefined;
@@ -938,29 +929,24 @@ const remove = (vnode, removeNode = true) => {
 
   if (node) {
     if (props.ref) props.ref.current = null;
-    if (removeNode) vnode.queues.removes.unshift(node);
+    if (removeNode) vnode.queues.removes.push(node);
   }
 };
 
 /** @param {Queues} queues */
 const flush = queues => {
-  const { afterEffects, inserts, nodeUpdates, removes } = queues;
-
-  for (let i = removes.length - 1; i >= 0; --i) removes[i].remove();
+  for (const node of queues.removes) node.remove();
 
   queues.removes = [];
 
-  for (let i = 0; i < inserts.length; ++i) {
-    const vnode = inserts[i];
+  for (const vnode of queues.inserts) {
     const { node, parentNode, prevNode, props } = vnode;
     const before = prevNode ? prevNode.nextSibling : parentNode.firstChild;
     if (node && !node.parentNode) {
       updateNode(node, emptyProps, props);
       parentNode.insertBefore(node, before);
     } else {
-      const nodes = getNodes(vnode);
-      for (let i = 0; i < nodes.length; ++i) {
-        const node = nodes[i];
+      for (const node of getNodes(vnode)) {
         if (node === before || node.nextSibling === before) break;
 
         // @ts-expect-error moveBefore is available on modern browsers
@@ -971,18 +957,15 @@ const flush = queues => {
 
   queues.inserts = [];
 
-  for (let i = 0; i < nodeUpdates.length; ++i) updateNode(...nodeUpdates[i]);
+  for (const args of queues.nodeUpdates) updateNode.apply(null, args);
 
   queues.nodeUpdates = [];
 
-  for (let i = 0; i < afterEffects.length; ++i) {
-    const vnode = afterEffects[i];
-    const effects = /** @type {NonNullable<Vnode['effects']>} */ (
-      vnode.effects
-    );
+  for (const vnode of queues.afterEffects) {
     try {
-      for (let j = 0; j < effects.length; ++j) {
-        const effect = effects[j];
+      for (const effect of /** @type {NonNullable<Vnode['effects']>} */ (
+        vnode.effects
+      )) {
         if (effect.after) {
           effect.before = effect.after();
           effect.after = undefined;
@@ -997,16 +980,7 @@ const flush = queues => {
 };
 
 /** @param {ParentNode} parentNode */
-export const createRoot = parentNode => {
-  /** @type {Queues} */
-  const queues = {
-    afterEffects: [],
-    inserts: [],
-    nodeUpdates: [],
-    removes: [],
-    updates: []
-  };
-
+export const createRender = parentNode => {
   /** @type {Vnode} */
   const vnode = {
     catch: defaultCatch,
@@ -1021,27 +995,24 @@ export const createRoot = parentNode => {
     parent: null,
     parentNode,
     prevNode: /** @type {Element} */ (parentNode.lastChild),
-    props: {},
-    queues,
+    props: { children: undefined },
+    queues: {
+      afterEffects: [],
+      inserts: [],
+      nodeUpdates: [],
+      removes: [],
+      updates: []
+    },
     refs: null,
     sibling: null,
     state: 1,
     type: Fragment
   };
 
-  update(vnode);
-  flush(queues);
-
-  return /** @type {Root} */ ({
-    render: children => {
-      vnode.props = { children };
-      update(vnode);
-      flush(queues);
-    },
-
-    unmount: () => {
-      remove(vnode);
-      flush(queues);
-    }
-  });
+  /** @param {Children} [children] */
+  return children => {
+    vnode.props.children = children;
+    update(vnode);
+    flush(vnode.queues);
+  };
 };

src/index.js

@@ -37,7 +37,7 @@ export function useState<T>(initial: T | (() => T)): State<T>;
 export function useCallback<T extends AnyFunction>(fn: T): T;
 export function memo<T extends Component>(Component: T, memo?: typeof defaultMemo): T;
 export function useContext<T extends Context<any>>(Context: T): T["value"];
-export function createRoot(parentNode: ParentNode): Root;
+export function createRender(parentNode: ParentNode): (children?: Children) => void;
 export type Recursive<T> = T | RecursiveArray<T>;
 export type RecursiveArray<T> = Recursive<T>[];
 export type AnyFunction = (...args: any[]) => unknown;
@@ -272,10 +272,6 @@ export type Effect = {
     after: AfterEffect | undefined;
     deps: unknown[] | undefined;
 };
-export type Root = {
-    render: (children: Children) => void;
-    unmount: () => void;
-};
 export type Queues = {
     afterEffects: Vnode[];
     inserts: Vnode[];