Use Microtasks for activation

docs/content/20-await.mdx

@@ -83,7 +83,9 @@ function DashboardContent() {
   return (
     <div>
       {/* Retend sees both of these Async Cells and tells the boundary to wait for both! */}
-      {If(userData, { true: (u) => <h2>{u.name}'s Dashboard</h2> })}
+      {If(userData, (u) => (
+        <h2>{u.name}'s Dashboard</h2>
+      ))}
       {For(postsData, (p) => (
         <p>{p.title}</p>
       ))}

docs/source/routes/docs/DocsSidebarChrome.tsx

@@ -49,14 +49,12 @@ export function MobileOverlay(props: MobileOverlayProps) {
 
   return (
     <>
-      {If(isOpen, {
-        true: () => (
-          <div
-            class="fixed inset-0 z-40 bg-black/50 lg:hidden"
-            onClick={toggle}
-          />
-        ),
-      })}
+      {If(isOpen, () => (
+        <div
+          class="fixed inset-0 z-40 bg-black/50 lg:hidden"
+          onClick={toggle}
+        />
+      ))}
     </>
   );
 }

experiments/unique-test/source/App.tsx

@@ -56,7 +56,6 @@ const Box = createUnique(() => {
 
   return (
     <UniqueTransition
-      topLayer
       transitionDuration="2000ms"
       transitionTimingFunction="ease-in-out"
     >

packages/retend-oxlint-plugin/index.js

@@ -308,6 +308,48 @@ function unwrapExpression(node) {
   return current;
 }
 
+function getStaticPropertyName(property) {
+  if (property.type !== 'Property') {
+    return null;
+  }
+
+  if (property.key.type === 'Identifier') {
+    return property.key.name;
+  }
+
+  if (isStaticStringLiteral(property.key)) {
+    return property.key.value;
+  }
+
+  return null;
+}
+
+function isTrueOnlyConditionObject(node) {
+  if (node?.type !== 'ObjectExpression') {
+    return false;
+  }
+
+  let hasTrueBranch = false;
+  let hasFalseBranch = false;
+
+  for (const property of node.properties) {
+    const propertyName = getStaticPropertyName(property);
+    if (propertyName === null) {
+      return false;
+    }
+
+    if (propertyName === 'true') {
+      hasTrueBranch = true;
+    }
+
+    if (propertyName === 'false') {
+      hasFalseBranch = true;
+    }
+  }
+
+  return hasTrueBranch && !hasFalseBranch;
+}
+
 function isProviderElementName(node) {
   if (node.type === 'JSXIdentifier') {
     return node.name === 'Provider';
@@ -1115,6 +1157,42 @@ const noDerivedInJsx = {
   },
 };
 
+const noIfThreeArgs = {
+  meta: {
+    docs: {
+      description: 'disallow legacy or noisy If() branch syntax',
+    },
+    schema: [],
+    messages: {
+      threeArgs:
+        'Do not pass a third argument to `If()`. Use `If(value, trueFn)` for a true-only branch, `If(value, { false: falseFn })` for a false-only branch, or `If(value, { true: trueFn, false: falseFn })` when both branches are present.',
+      trueOnlyObject:
+        'Do not use an object bag for a true-only `If()` branch. Pass the render function directly as the second argument: `If(value, trueFn)`.',
+    },
+  },
+  createOnce(context) {
+    return {
+      CallExpression(node) {
+        if (!isNamedCall(node, 'If')) {
+          return;
+        }
+
+        if (node.arguments.length >= 3) {
+          context.report({ node: node.arguments[2], messageId: 'threeArgs' });
+          return;
+        }
+
+        const branchArgument = unwrapExpression(node.arguments[1]);
+        if (!isTrueOnlyConditionObject(branchArgument)) {
+          return;
+        }
+
+        context.report({ node: branchArgument, messageId: 'trueOnlyObject' });
+      },
+    };
+  },
+};
+
 const noJsxControlFlow = {
   meta: {
     docs: {
@@ -2219,6 +2297,7 @@ const plugin = {
     'no-get-in-derived-async': noGetInDerivedAsync,
     'no-get-in-jsx': noGetInJsx,
     'no-derived-in-jsx': noDerivedInJsx,
+    'no-if-three-args': noIfThreeArgs,
     'no-jsx-control-flow': noJsxControlFlow,
     'no-jsx-map': noJsxMap,
     'no-listen-in-onsetup': noListenInOnSetup,

packages/retend-oxlint-plugin/recommended.js

@@ -7,6 +7,7 @@ const rules = {
   'retend/no-derived-in-jsx': 'error',
   'retend/no-get-in-derived-async': 'error',
   'retend/no-get-in-jsx': 'error',
+  'retend/no-if-three-args': 'error',
   'retend/no-inline-object-type': 'error',
   'retend/no-jsx-control-flow': 'error',
   'retend/no-jsx-map': 'error',

packages/retend-oxlint-plugin/recommended.json

@@ -9,6 +9,7 @@
     "retend/no-derived-in-jsx": "error",
     "retend/no-get-in-derived-async": "error",
     "retend/no-get-in-jsx": "error",
+    "retend/no-if-three-args": "error",
     "retend/no-inline-object-type": "error",
     "retend/no-jsx-control-flow": "error",
     "retend/no-jsx-map": "error",

packages/retend-server/source/v-dom/index.js

@@ -100,12 +100,15 @@ export class VNode extends EventTarget {
       }
     }
 
+    for (const node of newNodes) {
+      if (node !== this) node.remove();
+    }
     const index = parentNode.childNodes.indexOf(this);
     parentNode.childNodes.splice(index, 1, ...newNodes);
     for (const node of newNodes) {
-      node.parentNode = this.parentNode;
+      node.parentNode = parentNode;
     }
-    this.parentNode = null;
+    if (!newNodes.includes(this)) this.parentNode = null;
   }
 
   /** @param {(string | VNode)[]} nodes */
@@ -120,6 +123,9 @@ export class VNode extends EventTarget {
           ? n
           : ownerDocument.createTextNode(n)
     );
+    for (const node of newNodes) {
+      node.remove();
+    }
     for (const node of this.childNodes) {
       node.parentNode = null;
     }

packages/retend/package.json

@@ -50,7 +50,7 @@
     "build": "node scripts/build.js"
   },
   "dependencies": {
-    "@adbl/cells": "https://pkg.pr.new/adebola-io/cells/@adbl/cells@9fb5142",
+    "@adbl/cells": "^0.0.24",
     "csstype": "^3.1.3"
   },
   "devDependencies": {

packages/retend/source/library/scope.js

@@ -138,7 +138,9 @@ class EffectNode {
 
   async activate() {
     if (!this.#enabled || this.#active) return;
-    await new Promise((resolve) => setTimeout(resolve));
+    await new Promise((resolve) => {
+      queueMicrotask(() => resolve(undefined));
+    });
     await this.#runActivateFns();
     this.renderer?.host.dispatchEvent(new Event('retend:activate'));
   }
@@ -538,7 +540,7 @@ export async function runPendingSetupEffects() {
   renderer?.observer?.flush();
   node.enable();
   await node.activate();
-  await new Promise((resolve) => setTimeout(resolve));
+  await new Promise((resolve) => queueMicrotask(() => resolve(undefined)));
 }
 
 /** @type {Scope<__HMR_UpdatableFn[]>} */

packages/retend/source/router/router.js

@@ -564,7 +564,7 @@ export class Router extends EventTarget {
     if (!this.#assertNotLocked(path)) return;
     this.#isNavigating = true;
     try {
-      await this.#load({ rawPath: path, replace: true });
+      await this.#load({ rawPath: path, navigate: true, replace: true });
     } finally {
       this.#isNavigating = false;
     }
@@ -650,9 +650,12 @@ export class Router extends EventTarget {
     if (this.#isNavigating) return;
     const window = /** @type {Window} */ (event.currentTarget);
     this.#isNavigating = true;
-    const path = getFullPath(window);
-    await this.#load({ rawPath: path, navigate: false });
-    this.#isNavigating = false;
+    try {
+      const path = getFullPath(window);
+      await this.#load({ rawPath: path, navigate: false });
+    } finally {
+      this.#isNavigating = false;
+    }
   };
 
   /** @param {Window} window */