@fictjs/compiler 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -14150,6 +14150,9 @@ var RUNTIME_HELPERS = {
   conditional: "createConditional",
   keyedList: "createKeyedList",
   insert: "insert",
+  insertBetween: "insertBetween",
+  resolvePath: "resolvePath",
+  getSlotEnd: "getSlotEnd",
   onDestroy: "onDestroy",
   bindText: "bindText",
   bindAttribute: "bindAttribute",
@@ -14161,7 +14164,18 @@ var RUNTIME_HELPERS = {
   bindRef: "bindRef",
   toNodeArray: "toNodeArray",
   template: "template",
-  delegateEvents: "delegateEvents"
+  delegateEvents: "delegateEvents",
+  useLexicalScope: "__fictUseLexicalScope",
+  getScopeProps: "__fictGetScopeProps",
+  qrl: "__fictQrl",
+  getSSRScope: "__fictGetSSRScope",
+  ensureScope: "__fictEnsureScope",
+  prepareContext: "__fictPrepareContext",
+  enterHydration: "__fictEnterHydration",
+  exitHydration: "__fictExitHydration",
+  domRender: "render",
+  hydrateComponent: "hydrateComponent",
+  registerResume: "__fictRegisterResume"
 };
 var RUNTIME_ALIASES = {
   signal: "createSignal",
@@ -14186,6 +14200,9 @@ var RUNTIME_ALIASES = {
   conditional: "createConditional",
   keyedList: "createKeyedList",
   insert: "insert",
+  insertBetween: "insertBetween",
+  resolvePath: "resolvePath",
+  getSlotEnd: "getSlotEnd",
   onDestroy: "onDestroy",
   bindText: "bindText",
   bindAttribute: "bindAttribute",
@@ -14197,7 +14214,18 @@ var RUNTIME_ALIASES = {
   bindRef: "bindRef",
   toNodeArray: "toNodeArray",
   template: "template",
-  delegateEvents: "delegateEvents"
+  delegateEvents: "delegateEvents",
+  useLexicalScope: "__fictUseLexicalScope",
+  getScopeProps: "__fictGetScopeProps",
+  qrl: "__fictQrl",
+  getSSRScope: "__fictGetSSRScope",
+  ensureScope: "__fictEnsureScope",
+  prepareContext: "__fictPrepareContext",
+  enterHydration: "__fictEnterHydration",
+  exitHydration: "__fictExitHydration",
+  domRender: "render",
+  hydrateComponent: "hydrateComponent",
+  registerResume: "__fictRegisterResume"
 };
 var DelegatedEvents = /* @__PURE__ */ new Set([...DelegatedEventNames]);
 var SAFE_FUNCTIONS = /* @__PURE__ */ new Set([
@@ -14548,6 +14576,9 @@ function parseFictReturnAnnotation(node) {
       if (content === "'memo'" || content === '"memo"') {
         return { directAccessor: "memo" };
       }
+      if (/^\{\s*\}$/.test(content)) {
+        return { objectProps: /* @__PURE__ */ new Map() };
+      }
       const objectMatch = content.match(/^\{([^}]+)\}$/);
       if (objectMatch) {
         const objectProps = /* @__PURE__ */ new Map();
@@ -16377,6 +16408,9 @@ function convertJSXMemberExpr(node) {
   };
 }
 
+// src/ir/codegen.ts
+var import_node_url2 = require("url");
+
 // src/fine-grained-dom.ts
 function normalizeDependencyKey(name) {
   return name.split(".").map((part) => part.replace(/_\d+$/, "")).join(".");
@@ -21176,9 +21210,14 @@ function instructionToStatement(instr, t4, declaredVars, ctx, _buildMemoCall) {
       declaredVars.add(baseName2);
       if (treatAsTracked && !isDestructuringTemp) {
         if (isStateCall2) {
-          return t4.variableDeclaration(normalizedDecl, [
-            t4.variableDeclarator(t4.identifier(baseName2), lowerAssignedValue(true))
-          ]);
+          ctx.currentAssignmentName = baseName2;
+          try {
+            return t4.variableDeclaration(normalizedDecl, [
+              t4.variableDeclarator(t4.identifier(baseName2), lowerAssignedValue(true))
+            ]);
+          } finally {
+            ctx.currentAssignmentName = void 0;
+          }
         }
         if (dependsOnTracked) {
           if (instr.value.kind === "Identifier" && ctx.trackedVars.has(deSSAVarName(instr.value.name)) && !isDestructuringTemp) {
@@ -22101,7 +22140,17 @@ function createCodegenContext(t4) {
     hookReturnInfo: /* @__PURE__ */ new Map(),
     hoistedTemplates: /* @__PURE__ */ new Map(),
     hoistedTemplateStatements: [],
-    delegatedEventsUsed: /* @__PURE__ */ new Set()
+    hoistedResumableStatements: [],
+    resumableHandlerCounter: 0,
+    resumableComponentCounter: 0,
+    resumableComponents: /* @__PURE__ */ new Map(),
+    resumableEnabled: false,
+    autoExtractEnabled: false,
+    autoExtractThreshold: 3,
+    delegatedEventsUsed: /* @__PURE__ */ new Set(),
+    componentFunctionDefs: /* @__PURE__ */ new Map(),
+    hoistedFunctionDepCounter: 0,
+    hoistedFunctionDepNames: /* @__PURE__ */ new Map()
   };
 }
 function withGetterCache(ctx, fn) {
@@ -23007,6 +23056,51 @@ function computeReactiveAccessors(fn, ctx) {
 function genTemp(ctx, prefix = "tmp") {
   return ctx.t.identifier(`__${prefix}_${ctx.tempCounter++}`);
 }
+function renameIdentifiersInExpr(expr, renames, _t) {
+  const cloned = JSON.parse(JSON.stringify(expr));
+  function visit(node) {
+    if (!node || typeof node !== "object") return;
+    const n = node;
+    if (n.type === "Identifier" && typeof n.name === "string") {
+      const newName = renames.get(n.name);
+      if (newName) {
+        n.name = newName;
+      }
+    }
+    for (const key of Object.keys(n)) {
+      if (key === "loc" || key === "start" || key === "end" || key === "extra" || key === "comments" || key === "leadingComments" || key === "trailingComments") {
+        continue;
+      }
+      const value = n[key];
+      if (Array.isArray(value)) {
+        for (const item of value) {
+          visit(item);
+        }
+      } else if (value && typeof value === "object") {
+        visit(value);
+      }
+    }
+  }
+  visit(cloned);
+  return cloned;
+}
+function genModuleUrlExpr(ctx) {
+  const { t: t4 } = ctx;
+  const filename = ctx.options?.filename;
+  if (filename) {
+    let fileUrl;
+    if (filename.startsWith("file://")) {
+      fileUrl = filename;
+    } else {
+      fileUrl = (0, import_node_url2.pathToFileURL)(filename).href;
+    }
+    return t4.stringLiteral(fileUrl);
+  }
+  return t4.memberExpression(
+    t4.metaProperty(t4.identifier("import"), t4.identifier("meta")),
+    t4.identifier("url")
+  );
+}
 function extractKeyFromAttributes(attributes) {
   for (const attr of attributes) {
     if (attr.name === "key" && attr.value) {
@@ -23130,6 +23224,26 @@ function lowerInstruction(instr, ctx) {
         ctx.memoVars?.add(baseName2);
       }
     }
+    if (declKind) {
+      const initKind = getReactiveCallKind(instr.value, ctx);
+      if (initKind === "signal") {
+        ctx.signalVars?.add(baseName2);
+        ctx.trackedVars.add(baseName2);
+        ctx.currentAssignmentName = baseName2;
+        const loweredValue = (() => {
+          try {
+            return lowerTrackedExpression(instr.value, ctx);
+          } finally {
+            ctx.currentAssignmentName = void 0;
+          }
+        })();
+        return applyLoc(
+          t4.variableDeclaration(declKind, [
+            t4.variableDeclarator(t4.identifier(baseName2), loweredValue)
+          ])
+        );
+      }
+    }
     if (ctx.signalVars?.has(baseName2)) {
       ctx.currentAssignmentName = baseName2;
       const loweredValue = (() => {
@@ -23855,23 +23969,23 @@ function lowerExpressionImpl(expr, ctx, _isAssigned = false) {
     case "MetaProperty":
       return t4.metaProperty(t4.identifier(expr.meta.name), t4.identifier(expr.property.name));
     case "CallExpression": {
-      if (expr.callee.kind === "Identifier" && expr.callee.name === "$state") {
+      const stateCalleeNameRaw = expr.callee.kind === "Identifier" ? expr.callee.name : null;
+      const stateCalleeName = stateCalleeNameRaw ? deSSAVarName(stateCalleeNameRaw) : null;
+      if (stateCalleeName && ctx.stateMacroNames?.has(stateCalleeName)) {
         const args = lowerCallArguments(expr.arguments);
         const includeDevtools = ctx.options?.dev !== false;
-        if (includeDevtools) {
-          const options = [];
-          if (ctx.currentAssignmentName) {
-            options.push(
-              t4.objectProperty(t4.identifier("name"), t4.stringLiteral(ctx.currentAssignmentName))
-            );
-          }
-          if (expr.loc) {
-            const source = `${ctx.options?.filename ?? ""}:${expr.loc.start.line}:${expr.loc.start.column}`;
-            options.push(t4.objectProperty(t4.identifier("devToolsSource"), t4.stringLiteral(source)));
-          }
-          if (options.length > 0) {
-            args.push(t4.objectExpression(options));
-          }
+        const options = [];
+        if (ctx.currentAssignmentName) {
+          options.push(
+            t4.objectProperty(t4.identifier("name"), t4.stringLiteral(ctx.currentAssignmentName))
+          );
+        }
+        if (includeDevtools && expr.loc) {
+          const source = `${ctx.options?.filename ?? ""}:${expr.loc.start.line}:${expr.loc.start.column}`;
+          options.push(t4.objectProperty(t4.identifier("devToolsSource"), t4.stringLiteral(source)));
+        }
+        if (options.length > 0) {
+          args.push(t4.objectExpression(options));
         }
         if (ctx.inModule) {
           ctx.helpersUsed.add("signal");
@@ -25025,17 +25139,280 @@ function resolveNamespaceContext(tagName, parentNamespace) {
   if (tagName === "foreignObject" && parentNamespace === "svg") return null;
   return parentNamespace;
 }
+function countExpressionNodes(expr) {
+  if (!expr) return 0;
+  let count = 1;
+  switch (expr.kind) {
+    case "Literal":
+      return 1;
+    case "Identifier":
+      return 1;
+    case "BinaryExpression":
+    case "LogicalExpression":
+      count += countExpressionNodes(expr.left);
+      count += countExpressionNodes(expr.right);
+      return count;
+    case "UnaryExpression":
+      count += countExpressionNodes(expr.argument);
+      return count;
+    case "ConditionalExpression":
+      count += countExpressionNodes(expr.test);
+      count += countExpressionNodes(expr.consequent);
+      count += countExpressionNodes(expr.alternate);
+      return count;
+    case "CallExpression":
+      count += countExpressionNodes(expr.callee);
+      for (const arg of expr.arguments) {
+        count += countExpressionNodes(arg);
+      }
+      return count;
+    case "MemberExpression":
+      count += countExpressionNodes(expr.object);
+      if (expr.computed && expr.property) {
+        count += countExpressionNodes(expr.property);
+      }
+      return count;
+    case "ArrayExpression":
+      for (const elem of expr.elements) {
+        if (elem) count += countExpressionNodes(elem);
+      }
+      return count;
+    case "ObjectExpression":
+      for (const prop of expr.properties) {
+        if (prop.kind === "Property") {
+          count += countExpressionNodes(prop.value);
+        } else if (prop.kind === "SpreadElement") {
+          count += countExpressionNodes(prop.argument);
+        }
+      }
+      return count;
+    case "ArrowFunction":
+      if (expr.isExpression && expr.body && !Array.isArray(expr.body)) {
+        count += countExpressionNodes(expr.body);
+      } else if (Array.isArray(expr.body)) {
+        for (const block of expr.body) {
+          count += countBlockNodes(block);
+        }
+      }
+      return count;
+    case "FunctionExpression":
+      if (expr.body) {
+        for (const block of expr.body) {
+          count += countBlockNodes(block);
+        }
+      }
+      return count;
+    case "AssignmentExpression":
+      count += countExpressionNodes(expr.left);
+      count += countExpressionNodes(expr.right);
+      return count;
+    case "UpdateExpression":
+      count += countExpressionNodes(expr.argument);
+      return count;
+    case "SequenceExpression":
+      for (const e of expr.expressions) {
+        count += countExpressionNodes(e);
+      }
+      return count;
+    case "AwaitExpression":
+      count += countExpressionNodes(expr.argument);
+      return count + 2;
+    // Async adds complexity
+    case "NewExpression":
+      count += countExpressionNodes(expr.callee);
+      for (const arg of expr.arguments) {
+        count += countExpressionNodes(arg);
+      }
+      return count;
+    case "TemplateLiteral":
+      for (const e of expr.expressions) {
+        count += countExpressionNodes(e);
+      }
+      return count;
+    default:
+      return count;
+  }
+}
+function countBlockNodes(block) {
+  let count = 1;
+  for (const instr of block.instructions) {
+    count += countInstructionNodes(instr);
+  }
+  return count;
+}
+function countInstructionNodes(instr) {
+  switch (instr.kind) {
+    case "Expression":
+      return 1 + countExpressionNodes(instr.value);
+    case "Assign":
+      return 1 + countExpressionNodes(instr.value);
+    case "Phi":
+      return 1;
+    default:
+      return 1;
+  }
+}
+function hasExternalCalls(expr) {
+  if (!expr) return false;
+  switch (expr.kind) {
+    case "CallExpression": {
+      if (expr.callee.kind === "Identifier") {
+        const name = expr.callee.name;
+        if (!["console", "Math", "JSON", "Object", "Array"].includes(name)) {
+          return true;
+        }
+      }
+      if (expr.callee.kind === "MemberExpression") {
+        return true;
+      }
+      for (const arg of expr.arguments) {
+        if (hasExternalCalls(arg)) return true;
+      }
+      return false;
+    }
+    case "ArrowFunction":
+      if (expr.isExpression && expr.body && !Array.isArray(expr.body)) {
+        return hasExternalCalls(expr.body);
+      } else if (Array.isArray(expr.body)) {
+        for (const block of expr.body) {
+          if (blockHasExternalCalls(block)) return true;
+        }
+      }
+      return false;
+    case "FunctionExpression":
+      if (expr.body) {
+        for (const block of expr.body) {
+          if (blockHasExternalCalls(block)) return true;
+        }
+      }
+      return false;
+    case "BinaryExpression":
+    case "LogicalExpression":
+      return hasExternalCalls(expr.left) || hasExternalCalls(expr.right);
+    case "UnaryExpression":
+      return hasExternalCalls(expr.argument);
+    case "ConditionalExpression":
+      return hasExternalCalls(expr.test) || hasExternalCalls(expr.consequent) || hasExternalCalls(expr.alternate);
+    case "MemberExpression":
+      return hasExternalCalls(expr.object);
+    case "AssignmentExpression":
+      return hasExternalCalls(expr.right);
+    case "SequenceExpression":
+      return expr.expressions.some((e) => hasExternalCalls(e));
+    case "AwaitExpression":
+      return true;
+    // Await implies async external operation
+    case "NewExpression":
+      return true;
+    // Constructor calls are external
+    default:
+      return false;
+  }
+}
+function blockHasExternalCalls(block) {
+  for (const instr of block.instructions) {
+    if (instructionHasExternalCalls(instr)) return true;
+  }
+  return false;
+}
+function instructionHasExternalCalls(instr) {
+  switch (instr.kind) {
+    case "Expression":
+      return hasExternalCalls(instr.value);
+    case "Assign":
+      return hasExternalCalls(instr.value);
+    default:
+      return false;
+  }
+}
+function hasAsyncAwait(expr) {
+  if (!expr) return false;
+  switch (expr.kind) {
+    case "AwaitExpression":
+      return true;
+    case "ArrowFunction":
+      if (expr.isAsync) return true;
+      if (expr.isExpression && expr.body && !Array.isArray(expr.body)) {
+        return hasAsyncAwait(expr.body);
+      } else if (Array.isArray(expr.body)) {
+        for (const block of expr.body) {
+          if (blockHasAsyncAwait(block)) return true;
+        }
+      }
+      return false;
+    case "FunctionExpression":
+      if (expr.isAsync) return true;
+      if (expr.body) {
+        for (const block of expr.body) {
+          if (blockHasAsyncAwait(block)) return true;
+        }
+      }
+      return false;
+    case "CallExpression":
+      if (hasAsyncAwait(expr.callee)) return true;
+      return expr.arguments.some((arg) => hasAsyncAwait(arg));
+    case "BinaryExpression":
+    case "LogicalExpression":
+      return hasAsyncAwait(expr.left) || hasAsyncAwait(expr.right);
+    case "ConditionalExpression":
+      return hasAsyncAwait(expr.test) || hasAsyncAwait(expr.consequent) || hasAsyncAwait(expr.alternate);
+    case "SequenceExpression":
+      return expr.expressions.some((e) => hasAsyncAwait(e));
+    default:
+      return false;
+  }
+}
+function blockHasAsyncAwait(block) {
+  for (const instr of block.instructions) {
+    if (instructionHasAsyncAwait(instr)) return true;
+  }
+  return false;
+}
+function instructionHasAsyncAwait(instr) {
+  switch (instr.kind) {
+    case "Expression":
+      return hasAsyncAwait(instr.value);
+    case "Assign":
+      return hasAsyncAwait(instr.value);
+    default:
+      return false;
+  }
+}
+function shouldAutoExtract(expr, ctx) {
+  if (!expr) return false;
+  if (!ctx.autoExtractEnabled) return false;
+  const threshold = ctx.autoExtractThreshold ?? 3;
+  if (expr.kind === "Identifier") {
+    return true;
+  }
+  if (expr.kind === "ArrowFunction" || expr.kind === "FunctionExpression") {
+    if (expr.kind === "ArrowFunction" && expr.isAsync || expr.kind === "FunctionExpression" && expr.isAsync || hasAsyncAwait(expr)) {
+      return true;
+    }
+    if (hasExternalCalls(expr)) {
+      return true;
+    }
+    const nodeCount2 = countExpressionNodes(expr);
+    if (nodeCount2 >= threshold) {
+      return true;
+    }
+    return false;
+  }
+  const nodeCount = countExpressionNodes(expr);
+  return nodeCount >= threshold;
+}
 function extractHIRStaticHtml(jsx, ctx, parentPath = [], namespace = null) {
   if (jsx.isComponent || typeof jsx.tagName !== "string") {
     return {
-      html: "<!---->",
+      html: "<!--fict:slot:start--><!--fict:slot:end-->",
       bindings: [
         {
           type: "child",
           path: [...parentPath],
           expr: jsx
         }
-      ]
+      ],
+      nodeCount: 1
     };
   }
   const tagName = jsx.tagName;
@@ -25046,7 +25423,11 @@ function extractHIRStaticHtml(jsx, ctx, parentPath = [], namespace = null) {
     if (attr.isSpread) {
       continue;
     }
-    const name = normalizeHIRAttrName(attr.name);
+    let name = normalizeHIRAttrName(attr.name);
+    const isResumableEvent = name.endsWith("$");
+    if (isResumableEvent) {
+      name = name.slice(0, -1);
+    }
     if (name === "key") {
       if (attr.value && !isStaticValue(attr.value)) {
         bindings.push({
@@ -25081,12 +25462,14 @@ function extractHIRStaticHtml(jsx, ctx, parentPath = [], namespace = null) {
           changed = true;
         }
       }
+      const shouldBeResumable = isResumableEvent && ctx.resumableEnabled || !isResumableEvent && ctx.resumableEnabled && shouldAutoExtract(attr.value ?? void 0, ctx);
       bindings.push({
         type: "event",
         path: [...parentPath],
         name: eventName.toLowerCase(),
         expr: attr.value ?? void 0,
-        eventOptions: { capture, passive, once }
+        eventOptions: { capture, passive, once },
+        resumable: shouldBeResumable
       });
       continue;
     }
@@ -25142,7 +25525,7 @@ function extractHIRStaticHtml(jsx, ctx, parentPath = [], namespace = null) {
       const childResult = extractHIRStaticHtml(child.value, ctx, childPath, resolvedNamespace);
       html += childResult.html;
       bindings.push(...childResult.bindings);
-      childIndex++;
+      childIndex += childResult.nodeCount;
     } else if (child.kind === "expression") {
       const inline = hasAdjacentInline(i);
       if (!inline && isLikelyTextExpression(child.value, ctx)) {
@@ -25155,7 +25538,7 @@ function extractHIRStaticHtml(jsx, ctx, parentPath = [], namespace = null) {
           namespace: resolvedNamespace
         });
       } else {
-        html += "<!---->";
+        html += "<!--fict:slot:start--><!--fict:slot:end-->";
         bindings.push({
           type: "child",
           path: [...parentPath, childIndex],
@@ -25163,6 +25546,8 @@ function extractHIRStaticHtml(jsx, ctx, parentPath = [], namespace = null) {
           // Track namespace for dynamic child bindings
           namespace: resolvedNamespace
         });
+        childIndex++;
+        continue;
       }
       childIndex++;
     }
@@ -25173,6 +25558,7 @@ function extractHIRStaticHtml(jsx, ctx, parentPath = [], namespace = null) {
   return {
     html,
     bindings,
+    nodeCount: 1,
     isSVG: needsSVG || void 0,
     isMathML: needsMathML || void 0
   };
@@ -25264,6 +25650,17 @@ function lowerIntrinsicElement(jsx, ctx) {
       const eventName = binding.name;
       const hasEventOptions = binding.eventOptions && (binding.eventOptions.capture || binding.eventOptions.passive || binding.eventOptions.once);
       const isDelegated = DelegatedEvents.has(eventName) && !hasEventOptions;
+      if (binding.resumable && !hasEventOptions) {
+        emitResumableEventBinding(
+          targetId,
+          eventName,
+          binding.expr,
+          statements,
+          ctx,
+          containingRegion
+        );
+        continue;
+      }
       const hirDataBinding = isDelegated && binding.expr ? extractDelegatedEventDataFromHIR(binding.expr, ctx) : null;
       if (hirDataBinding) {
         ctx.delegatedEventsUsed?.add(eventName);
@@ -25560,13 +25957,16 @@ function resolveHIRBindingPath(path2, cache, statements, ctx) {
     ancestorId = cache.get("");
     relativePath = path2;
   }
-  let currentExpr = ancestorId;
-  for (const index of relativePath) {
-    currentExpr = t4.memberExpression(currentExpr, t4.identifier("firstChild"));
-    for (let i = 0; i < index; i++) {
-      currentExpr = t4.memberExpression(currentExpr, t4.identifier("nextSibling"));
-    }
+  if (relativePath.length === 0) {
+    cache.set(key, ancestorId);
+    return ancestorId;
   }
+  ctx.helpersUsed.add("resolvePath");
+  const pathExpr = t4.arrayExpression(relativePath.map((index) => t4.numericLiteral(index)));
+  const currentExpr = t4.callExpression(t4.identifier(RUNTIME_ALIASES.resolvePath), [
+    ancestorId,
+    pathExpr
+  ]);
   const varId = genTemp(ctx, "el");
   statements.push(t4.variableDeclaration("const", [t4.variableDeclarator(varId, currentExpr)]));
   cache.set(key, varId);
@@ -25574,7 +25974,16 @@ function resolveHIRBindingPath(path2, cache, statements, ctx) {
 }
 function emitHIRChildBinding(markerId, expr, statements, ctx, containingRegion, namespace) {
   const { t: t4 } = ctx;
-  const parentId = t4.memberExpression(markerId, t4.identifier("parentNode"));
+  ctx.helpersUsed.add("getSlotEnd");
+  const endMarkerId = genTemp(ctx, "end");
+  statements.push(
+    t4.variableDeclaration("const", [
+      t4.variableDeclarator(
+        endMarkerId,
+        t4.callExpression(t4.identifier(RUNTIME_ALIASES.getSlotEnd), [markerId])
+      )
+    ])
+  );
   if (namespace !== void 0) {
     ctx.namespaceContext = namespace;
   }
@@ -25593,26 +26002,26 @@ function emitHIRChildBinding(markerId, expr, statements, ctx, containingRegion,
     return;
   }
   if (expr.kind === "ConditionalExpression" || expr.kind === "LogicalExpression" && expr.operator === "&&") {
-    emitConditionalChild(parentId, markerId, expr, statements, ctx);
+    emitConditionalChild(markerId, endMarkerId, expr, statements, ctx);
     return;
   }
   if (expr.kind === "CallExpression" || expr.kind === "OptionalCallExpression") {
     const callee = expr.callee;
     if ((callee.kind === "MemberExpression" || callee.kind === "OptionalMemberExpression") && callee.property.kind === "Identifier" && callee.property.name === "map") {
-      emitListChild(parentId, markerId, expr, statements, ctx);
+      emitListChild(markerId, endMarkerId, expr, statements, ctx);
       return;
     }
   }
   if (expr.kind === "JSXElement") {
     const childExpr = lowerJSXElement(expr, ctx);
-    ctx.helpersUsed.add("insert");
+    ctx.helpersUsed.add("insertBetween");
     ctx.helpersUsed.add("createElement");
     statements.push(
       t4.expressionStatement(
-        t4.callExpression(t4.identifier(RUNTIME_ALIASES.insert), [
-          parentId,
-          t4.arrowFunctionExpression([], childExpr),
+        t4.callExpression(t4.identifier(RUNTIME_ALIASES.insertBetween), [
           markerId,
+          endMarkerId,
+          t4.arrowFunctionExpression([], childExpr),
           t4.identifier(RUNTIME_ALIASES.createElement)
         ])
       )
@@ -25620,20 +26029,280 @@ function emitHIRChildBinding(markerId, expr, statements, ctx, containingRegion,
     return;
   }
   const valueExpr = lowerDomExpression(expr, ctx, containingRegion);
-  ctx.helpersUsed.add("insert");
+  ctx.helpersUsed.add("insertBetween");
   ctx.helpersUsed.add("createElement");
   statements.push(
     t4.expressionStatement(
-      t4.callExpression(t4.identifier(RUNTIME_ALIASES.insert), [
-        parentId,
-        t4.arrowFunctionExpression([], valueExpr),
+      t4.callExpression(t4.identifier(RUNTIME_ALIASES.insertBetween), [
         markerId,
+        endMarkerId,
+        t4.arrowFunctionExpression([], valueExpr),
         t4.identifier(RUNTIME_ALIASES.createElement)
       ])
     )
   );
 }
-function emitConditionalChild(parentId, markerId, expr, statements, ctx) {
+function emitResumableEventBinding(targetId, eventName, expr, statements, ctx, containingRegion) {
+  const { t: t4 } = ctx;
+  if (!ctx.resumableEnabled) {
+    return;
+  }
+  const prevWrapTracked = ctx.wrapTrackedExpressions;
+  ctx.wrapTrackedExpressions = false;
+  const valueExpr = lowerDomExpression(expr, ctx, containingRegion, {
+    skipHookAccessors: true,
+    skipRegionRootOverride: true
+  });
+  ctx.wrapTrackedExpressions = prevWrapTracked;
+  const eventParam = t4.identifier("event");
+  const elParam = t4.identifier("el");
+  const scopeParam = t4.identifier("scopeId");
+  const ensureHandlerParam = (fn) => {
+    if (t4.isArrowFunctionExpression(fn)) {
+      if (fn.params.length > 0) return fn;
+      return t4.arrowFunctionExpression([eventParam], fn.body, fn.async);
+    }
+    if (t4.isFunctionExpression(fn)) {
+      if (fn.params.length > 0) return fn;
+      return t4.functionExpression(fn.id, [eventParam], fn.body, fn.generator, fn.async);
+    }
+    if (t4.isIdentifier(fn) || t4.isMemberExpression(fn)) {
+      return fn;
+    }
+    if (t4.isCallExpression(fn) && fn.arguments.length === 0 && (t4.isIdentifier(fn.callee) || t4.isMemberExpression(fn.callee))) {
+      return fn.callee;
+    }
+    return t4.functionExpression(
+      null,
+      [eventParam],
+      t4.blockStatement([
+        t4.returnStatement(
+          t4.callExpression(
+            t4.memberExpression(fn, t4.identifier("call")),
+            [t4.thisExpression(), eventParam]
+          )
+        )
+      ])
+    );
+  };
+  const handlerExpr = ensureHandlerParam(valueExpr);
+  const handlerId = t4.identifier(`__fict_e${ctx.resumableHandlerCounter ?? 0}`);
+  ctx.resumableHandlerCounter = (ctx.resumableHandlerCounter ?? 0) + 1;
+  const captured = /* @__PURE__ */ new Set();
+  collectExpressionIdentifiersDeep(expr, captured);
+  const lexicalNames = Array.from(captured).filter((name) => ctx.signalVars?.has(name));
+  const propsName = ctx.propsParamName && captured.has(ctx.propsParamName) ? ctx.propsParamName : null;
+  const functionDeps = [];
+  const functionDepRenames = /* @__PURE__ */ new Map();
+  for (const name of captured) {
+    if (ctx.functionVars?.has(name) && !ctx.signalVars?.has(name)) {
+      const hirDef = ctx.componentFunctionDefs?.get(name);
+      if (hirDef) {
+        functionDeps.push(name);
+        let hoistedName = ctx.hoistedFunctionDepNames?.get(name);
+        if (!hoistedName) {
+          hoistedName = `__fict_fn_${name}_${ctx.hoistedFunctionDepCounter ?? 0}`;
+          ctx.hoistedFunctionDepCounter = (ctx.hoistedFunctionDepCounter ?? 0) + 1;
+          ctx.hoistedFunctionDepNames?.set(name, hoistedName);
+          const loweredFn = lowerDomExpression(hirDef, ctx, null, {
+            skipHookAccessors: true,
+            skipRegionRootOverride: true
+          });
+          const hoistedDecl = t4.variableDeclaration("const", [
+            t4.variableDeclarator(t4.identifier(hoistedName), loweredFn)
+          ]);
+          const hoistedExport = t4.exportNamedDeclaration(hoistedDecl, []);
+          ctx.hoistedResumableStatements?.push(hoistedExport);
+        }
+        functionDepRenames.set(name, hoistedName);
+      }
+    }
+  }
+  let finalHandlerExpr = handlerExpr;
+  if (functionDepRenames.size > 0) {
+    finalHandlerExpr = renameIdentifiersInExpr(handlerExpr, functionDepRenames, t4);
+  }
+  const bodyStatements = [];
+  if (lexicalNames.length > 0) {
+    ctx.helpersUsed.add("useLexicalScope");
+    bodyStatements.push(
+      t4.variableDeclaration("const", [
+        t4.variableDeclarator(
+          t4.arrayPattern(lexicalNames.map((name) => t4.identifier(name))),
+          t4.callExpression(t4.identifier(RUNTIME_ALIASES.useLexicalScope), [
+            scopeParam,
+            t4.arrayExpression(lexicalNames.map((name) => t4.stringLiteral(name)))
+          ])
+        )
+      ])
+    );
+  }
+  if (propsName) {
+    ctx.helpersUsed.add("getScopeProps");
+    bodyStatements.push(
+      t4.variableDeclaration("const", [
+        t4.variableDeclarator(
+          t4.identifier(propsName),
+          t4.logicalExpression(
+            "||",
+            t4.callExpression(t4.identifier(RUNTIME_ALIASES.getScopeProps), [scopeParam]),
+            t4.objectExpression([])
+          )
+        )
+      ])
+    );
+  }
+  const handlerVar = t4.identifier("__handler");
+  bodyStatements.push(
+    t4.variableDeclaration("const", [t4.variableDeclarator(handlerVar, finalHandlerExpr)])
+  );
+  bodyStatements.push(
+    t4.returnStatement(
+      t4.callExpression(t4.memberExpression(handlerVar, t4.identifier("call")), [elParam, eventParam])
+    )
+  );
+  const exportedHandler = t4.exportNamedDeclaration(
+    t4.variableDeclaration("const", [
+      t4.variableDeclarator(
+        handlerId,
+        t4.arrowFunctionExpression(
+          [scopeParam, eventParam, elParam],
+          t4.blockStatement(bodyStatements)
+        )
+      )
+    ]),
+    []
+  );
+  ctx.hoistedResumableStatements?.push(exportedHandler);
+  ctx.helpersUsed.add("qrl");
+  const qrlExpr = t4.callExpression(t4.identifier(RUNTIME_ALIASES.qrl), [
+    genModuleUrlExpr(ctx),
+    t4.stringLiteral(handlerId.name)
+  ]);
+  statements.push(
+    t4.expressionStatement(
+      t4.callExpression(t4.memberExpression(targetId, t4.identifier("setAttribute")), [
+        t4.stringLiteral(`on:${eventName}`),
+        qrlExpr
+      ])
+    )
+  );
+}
+function registerResumableComponent(componentName, ctx) {
+  if (!ctx.resumableEnabled) return;
+  if (!ctx.hoistedResumableStatements || !ctx.resumableComponents) return;
+  if (ctx.resumableComponents.has(componentName)) return;
+  const { t: t4 } = ctx;
+  const resumeExport = `__fict_r${ctx.resumableComponentCounter ?? 0}`;
+  ctx.resumableComponentCounter = (ctx.resumableComponentCounter ?? 0) + 1;
+  const scopeParam = t4.identifier("scopeId");
+  const hostParam = t4.identifier("host");
+  const snapshotId = t4.identifier("snapshot");
+  const ctxId = t4.identifier("ctx");
+  ctx.helpersUsed.add("getSSRScope");
+  ctx.helpersUsed.add("ensureScope");
+  ctx.helpersUsed.add("prepareContext");
+  ctx.helpersUsed.add("pushContext");
+  ctx.helpersUsed.add("popContext");
+  ctx.helpersUsed.add("hydrateComponent");
+  ctx.helpersUsed.add("qrl");
+  const snapshotDecl = t4.variableDeclaration("const", [
+    t4.variableDeclarator(
+      snapshotId,
+      t4.callExpression(t4.identifier(RUNTIME_ALIASES.getSSRScope), [scopeParam])
+    )
+  ]);
+  const earlyReturn = t4.ifStatement(t4.unaryExpression("!", snapshotId), t4.returnStatement());
+  const ensureCtxDecl = t4.variableDeclaration("const", [
+    t4.variableDeclarator(
+      ctxId,
+      t4.callExpression(t4.identifier(RUNTIME_ALIASES.ensureScope), [
+        scopeParam,
+        hostParam,
+        snapshotId
+      ])
+    )
+  ]);
+  const prepareCtx = t4.expressionStatement(
+    t4.callExpression(t4.identifier(RUNTIME_ALIASES.prepareContext), [ctxId])
+  );
+  const pushCtx = t4.expressionStatement(
+    t4.callExpression(t4.identifier(RUNTIME_ALIASES.pushContext), [])
+  );
+  const hydrateCall = t4.expressionStatement(
+    t4.callExpression(t4.identifier(RUNTIME_ALIASES.hydrateComponent), [
+      t4.arrowFunctionExpression(
+        [],
+        t4.callExpression(t4.identifier(componentName), [
+          t4.logicalExpression(
+            "||",
+            t4.memberExpression(snapshotId, t4.identifier("props")),
+            t4.objectExpression([])
+          )
+        ])
+      ),
+      hostParam
+    ])
+  );
+  const popCtx = t4.expressionStatement(
+    t4.callExpression(t4.identifier(RUNTIME_ALIASES.popContext), [])
+  );
+  const resumeFnId = t4.identifier(resumeExport);
+  const resumeFn = t4.exportNamedDeclaration(
+    t4.variableDeclaration("const", [
+      t4.variableDeclarator(
+        resumeFnId,
+        t4.arrowFunctionExpression(
+          [scopeParam, hostParam],
+          t4.blockStatement([
+            snapshotDecl,
+            earlyReturn,
+            ensureCtxDecl,
+            t4.tryStatement(
+              t4.blockStatement([prepareCtx, pushCtx, hydrateCall]),
+              null,
+              t4.blockStatement([popCtx])
+            )
+          ])
+        )
+      )
+    ]),
+    []
+  );
+  ctx.helpersUsed.add("registerResume");
+  const registerCall = t4.expressionStatement(
+    t4.callExpression(t4.identifier(RUNTIME_ALIASES.registerResume), [
+      t4.stringLiteral(resumeExport),
+      resumeFnId
+    ])
+  );
+  const metaId = t4.identifier(`__fict_meta_${componentName}`);
+  const moduleUrlExpr = genModuleUrlExpr(ctx);
+  const typeKeyExpr = t4.binaryExpression("+", t4.stringLiteral(`${componentName}@`), moduleUrlExpr);
+  const resumeQrlExpr = t4.callExpression(t4.identifier(RUNTIME_ALIASES.qrl), [
+    genModuleUrlExpr(ctx),
+    t4.stringLiteral(resumeExport)
+  ]);
+  const metaDecl = t4.variableDeclaration("const", [
+    t4.variableDeclarator(
+      metaId,
+      t4.objectExpression([
+        t4.objectProperty(t4.identifier("id"), typeKeyExpr),
+        t4.objectProperty(t4.identifier("resume"), resumeQrlExpr)
+      ])
+    )
+  ]);
+  const assignMeta = t4.expressionStatement(
+    t4.assignmentExpression(
+      "=",
+      t4.memberExpression(t4.identifier(componentName), t4.identifier("__fictMeta")),
+      metaId
+    )
+  );
+  ctx.hoistedResumableStatements.push(resumeFn, registerCall, metaDecl, assignMeta);
+  ctx.resumableComponents.set(componentName, { resumeExport, typeKey: componentName });
+}
+function emitConditionalChild(startMarkerId, endMarkerId, expr, statements, ctx) {
   const { t: t4 } = ctx;
   ctx.helpersUsed.add("conditional");
   ctx.helpersUsed.add("createElement");
@@ -25674,7 +26343,10 @@ function emitConditionalChild(parentId, markerId, expr, statements, ctx) {
   ];
   if (alternate) {
     args.push(t4.arrowFunctionExpression([], alternate));
+  } else {
+    args.push(t4.identifier("undefined"));
   }
+  args.push(startMarkerId, endMarkerId);
   statements.push(
     t4.variableDeclaration("const", [
       t4.variableDeclarator(
@@ -25683,14 +26355,6 @@ function emitConditionalChild(parentId, markerId, expr, statements, ctx) {
       )
     ])
   );
-  statements.push(
-    t4.expressionStatement(
-      t4.callExpression(t4.memberExpression(parentId, t4.identifier("insertBefore")), [
-        t4.memberExpression(bindingId, t4.identifier("marker")),
-        markerId
-      ])
-    )
-  );
   statements.push(
     t4.expressionStatement(
       t4.optionalCallExpression(
@@ -26297,40 +26961,16 @@ function buildListCallExpression(expr, statements, ctx) {
   }
   return listCall;
 }
-function emitListChild(parentId, markerId, expr, statements, ctx) {
+function emitListChild(startMarkerId, endMarkerId, expr, statements, ctx) {
   const { t: t4 } = ctx;
   const listCall = buildListCallExpression(expr, statements, ctx);
   if (!listCall) return;
+  if (t4.isCallExpression(listCall)) {
+    listCall.arguments.push(startMarkerId, endMarkerId);
+  }
   ctx.helpersUsed.add("onDestroy");
-  ctx.helpersUsed.add("toNodeArray");
   const listId = genTemp(ctx, "list");
   statements.push(t4.variableDeclaration("const", [t4.variableDeclarator(listId, listCall)]));
-  const markersId = genTemp(ctx, "markers");
-  statements.push(
-    t4.variableDeclaration("const", [
-      t4.variableDeclarator(
-        markersId,
-        t4.callExpression(t4.identifier(RUNTIME_ALIASES.toNodeArray), [
-          t4.memberExpression(listId, t4.identifier("marker"))
-        ])
-      )
-    ])
-  );
-  const mId = genTemp(ctx, "m");
-  statements.push(
-    t4.forOfStatement(
-      t4.variableDeclaration("const", [t4.variableDeclarator(mId)]),
-      markersId,
-      t4.blockStatement([
-        t4.expressionStatement(
-          t4.callExpression(t4.memberExpression(parentId, t4.identifier("insertBefore")), [
-            mId,
-            markerId
-          ])
-        )
-      ])
-    )
-  );
   statements.push(
     t4.expressionStatement(
       t4.optionalCallExpression(
@@ -26367,6 +27007,9 @@ function lowerHIRWithRegions(program, t4, options, macroAliases) {
     program.functions.filter((fn) => !!fn.name).map((fn) => [fn.name, fn])
   );
   ctx.options = options;
+  ctx.resumableEnabled = options?.resumable === true;
+  ctx.autoExtractEnabled = options?.autoExtractHandlers ?? options?.resumable === true;
+  ctx.autoExtractThreshold = options?.autoExtractThreshold ?? 3;
   const body = [];
   const topLevelAliases = /* @__PURE__ */ new Set();
   let topLevelCtxInjected = false;
@@ -26613,6 +27256,9 @@ function lowerHIRWithRegions(program, t4, options, macroAliases) {
     lowerableBuffer.push(stmt);
   }
   flushLowerableBuffer();
+  if (ctx.resumableEnabled && ctx.hoistedResumableStatements && ctx.hoistedResumableStatements.length > 0) {
+    body.push(...ctx.hoistedResumableStatements);
+  }
   for (const func of generatedFunctions.values()) {
     body.push(func.stmt);
     if (func.stmt.id?.name) emittedFunctionNames.add(func.stmt.id.name);
@@ -26653,12 +27299,15 @@ function lowerTopLevelStatementBlock(statements, ctx, t4, name = "__module_segme
   ctx.storeVars = storeVars;
   ctx.memoVars = memoVars;
   ctx.mutatedVars = mutatedVars;
+  const componentFunctionDefs = ctx.componentFunctionDefs ?? /* @__PURE__ */ new Map();
+  ctx.componentFunctionDefs = componentFunctionDefs;
   for (const block of fn.blocks) {
     for (const instr of block.instructions) {
       if (instr.kind === "Assign") {
         const target = deSSAVarName(instr.target.name);
         if (instr.value.kind === "ArrowFunction" || instr.value.kind === "FunctionExpression") {
           functionVars.add(target);
+          componentFunctionDefs.set(target, instr.value);
         }
         if (instr.value.kind === "CallExpression" || instr.value.kind === "OptionalCallExpression") {
           const callKind = getReactiveCallKind(instr.value, ctx);
@@ -26826,6 +27475,8 @@ function lowerFunctionWithRegions(fn, ctx, options) {
   ctx.mutatedVars = /* @__PURE__ */ new Set();
   ctx.noMemo = !!(prevNoMemo || fn.meta?.noMemo);
   ctx.hookResultVarMap = /* @__PURE__ */ new Map();
+  const prevComponentFunctionDefs = ctx.componentFunctionDefs;
+  ctx.componentFunctionDefs = /* @__PURE__ */ new Map();
   const hookResultVars = /* @__PURE__ */ new Set();
   const hookAccessorAliases = /* @__PURE__ */ new Set();
   const prevPropsParam = ctx.propsParamName;
@@ -26842,6 +27493,7 @@ function lowerFunctionWithRegions(fn, ctx, options) {
         const target = deSSAVarName(instr.target.name);
         if (instr.value.kind === "ArrowFunction" || instr.value.kind === "FunctionExpression") {
           ctx.functionVars?.add(target);
+          ctx.componentFunctionDefs?.set(target, instr.value);
         }
         if (instr.value.kind === "CallExpression" || instr.value.kind === "OptionalCallExpression") {
           const callKind = getReactiveCallKind(instr.value, ctx);
@@ -27137,6 +27789,7 @@ function lowerFunctionWithRegions(fn, ctx, options) {
       ctx.externalTracked = prevExternalTracked;
       ctx.signalVars = prevSignalVars;
       ctx.functionVars = prevFunctionVars;
+      ctx.componentFunctionDefs = prevComponentFunctionDefs;
       ctx.memoVars = prevMemoVars;
       ctx.storeVars = prevStoreVars;
       ctx.mutatedVars = prevMutatedVars;
@@ -27154,6 +27807,7 @@ function lowerFunctionWithRegions(fn, ctx, options) {
     ctx.externalTracked = prevExternalTracked;
     ctx.signalVars = prevSignalVars;
     ctx.functionVars = prevFunctionVars;
+    ctx.componentFunctionDefs = prevComponentFunctionDefs;
     ctx.memoVars = prevMemoVars;
     ctx.storeVars = prevStoreVars;
     ctx.mutatedVars = prevMutatedVars;
@@ -27250,6 +27904,9 @@ function lowerFunctionWithRegions(fn, ctx, options) {
     fn.loc
   );
   funcDecl.async = isAsync;
+  if (isComponent && fn.name) {
+    registerResumableComponent(fn.name, ctx);
+  }
   ctx.needsCtx = prevNeedsCtx;
   ctx.shadowedNames = prevShadowed;
   ctx.localDeclaredNames = prevLocalDeclared;
@@ -27257,6 +27914,7 @@ function lowerFunctionWithRegions(fn, ctx, options) {
   ctx.externalTracked = prevExternalTracked;
   ctx.signalVars = prevSignalVars;
   ctx.functionVars = prevFunctionVars;
+  ctx.componentFunctionDefs = prevComponentFunctionDefs;
   ctx.memoVars = prevMemoVars;
   ctx.storeVars = prevStoreVars;
   ctx.mutatedVars = prevMutatedVars;