mikuru 1.0.23 → 1.0.24

package/dist/compiler/generateHydration.js

@@ -1,4 +1,5 @@
 import { createCompileError } from "./errors.js";
+import { createScopeAttr, generateChildren as generateDomChildren, generateNode as generateDomNode, withoutForAttrs as withoutDomForAttrs } from "./generate.js";
 import { compileTemplateExpression, parseForExpression, validateAssignableExpression } from "./parseExpression.js";
 export function generateHydration(descriptor, root, options = {}) {
     const context = {
@@ -8,12 +9,13 @@ export function generateHydration(descriptor, root, options = {}) {
         source: descriptor.source,
         filename: descriptor.filename
     };
+    context.scopeAttr = descriptor.styleScoped ? createScopeAttr(descriptor) : undefined;
     const script = splitScript(descriptor.script ?? "");
     if (options.includeImports !== false) {
         for (const importLine of script.imports) {
             emit(context, 0, importLine);
         }
-        emit(context, 0, "import { effect, setAttribute, unwrap } from \"mikuru/runtime\";");
+        emit(context, 0, "import { effect, ref, setAttribute, unwrap } from \"mikuru/runtime\";");
         emit(context, 0, "");
     }
     emit(context, 0, "export function hydrate(target, props = {}) {");
@@ -22,7 +24,15 @@ export function generateHydration(descriptor, root, options = {}) {
     emit(context, 1, "const __mikuru_afterUnmount = [];");
     emit(context, 1, "const __mikuru_mounted = [];");
     emit(context, 1, "const __mikuru_context = { parent: props.__mikuru_context, provides: new Map(), errorHandler: props.__mikuru_context?.errorHandler, ...__mikuru_componentInfo };");
-    emit(context, 1, "const __mikuru_try = (fn) => { try { return fn(); } catch (error) { setTimeout(() => { throw error; }); } };");
+    emit(context, 1, "const __mikuru_errorInfo = (phase) => ({ ...__mikuru_componentInfo, phase });");
+    emit(context, 1, "const __mikuru_reportError = (error, errorHandler = __mikuru_context.errorHandler, phase = \"runtime\") => { if (typeof errorHandler === \"function\") { Promise.resolve().then(() => errorHandler(error, __mikuru_errorInfo(phase))); return; } setTimeout(() => { throw error; }); };");
+    emit(context, 1, "const __mikuru_try = (fn, errorHandler, phase) => { try { return fn(); } catch (error) { __mikuru_reportError(error, errorHandler, phase); } };");
+    emit(context, 1, "const __mikuru_memoEqual = (previous, next) => Array.isArray(previous) && Array.isArray(next) && previous.length === next.length && previous.every((value, index) => Object.is(value, next[index]));");
+    emit(context, 1, "const __mikuru_guardEventHandler = (fn, errorHandler = __mikuru_context.errorHandler) => (...args) => __mikuru_try(() => fn(...args), errorHandler, \"event\");");
+    emit(context, 1, "const __mikuru_runCleanup = (cleanups) => { for (const cleanup of cleanups.splice(0).reverse()) __mikuru_try(cleanup, undefined, \"cleanup\"); };");
+    emit(context, 1, "const __mikuru_removeNode = (node) => { if (node?.parentNode) node.remove(); };");
+    emit(context, 1, "const __mikuru_applyTransitionEnter = () => {};");
+    emit(context, 1, "const __mikuru_applyTransitionMove = () => {};");
     emit(context, 1, "const __mikuru_previousRegistrar = globalThis.__mikuru_currentRegistrar;");
     emit(context, 1, "globalThis.__mikuru_currentRegistrar = {");
     emit(context, 2, "registerMounted: (fn) => __mikuru_mounted.push(fn),");
@@ -40,8 +50,8 @@ export function generateHydration(descriptor, root, options = {}) {
     emit(context, 1, "const __mikuru_emitDebug = (type, payload) => { const hook = globalThis.__MIKURU_DEVTOOLS__; if (!hook) return; const event = { type, timestamp: Date.now(), payload }; hook.events ??= []; hook.events.push(event); if (typeof hook.emit === \"function\") hook.emit(event); for (const listener of hook.listeners ?? []) { try { listener(event); } catch (error) { setTimeout(() => { throw error; }); } } };");
     emit(context, 1, "const __mikuru_domPath = (node) => { if (!node) return \"missing\"; const parts = []; for (let cursor = node.nodeType === 1 ? node : node.parentElement; cursor && cursor.nodeType === 1; cursor = cursor.parentElement) { const tag = cursor.tagName.toLowerCase(); const siblings = cursor.parentElement ? Array.from(cursor.parentElement.children).filter((child) => child.tagName === cursor.tagName) : []; const index = siblings.length > 1 ? `:nth-of-type(${siblings.indexOf(cursor) + 1})` : \"\"; parts.unshift(`${tag}${index}`); } return parts.join(\" > \") || __mikuru_describeNode(node); };");
     emit(context, 1, "const __mikuru_inferDiagnostic = (message) => { const action = message.includes(\"falling back to mount\") ? \"mount-fallback\" : message.includes(\"remounting\") ? \"remount\" : message.includes(\"Recovery was disabled\") || message.endsWith(\".\") ? \"warn-only\" : \"sync-dom\"; const kind = message.startsWith(\"Root mismatch\") ? \"root\" : message.startsWith(\"Element mismatch\") ? \"element\" : message.startsWith(\"Text mismatch\") || message.startsWith(\"Text content mismatch\") ? \"text\" : message.startsWith(\"Attribute mismatch\") ? \"attribute\" : message.startsWith(\"v-model\") ? \"model\" : message.startsWith(\"Extra DOM nodes\") ? \"extra-node\" : message.startsWith(\"Teleport\") ? \"teleport\" : message.startsWith(\"Component\") || message.startsWith(\"Dynamic component\") ? \"component\" : message.startsWith(\"Branch\") ? \"branch\" : message.startsWith(\"List\") ? \"list\" : \"hydration\"; const match = message.match(/expected\\s+(.+?),\\s+got\\s+(.+?)(?:[.;]|$)/); return { action, kind, expected: match?.[1], actual: match?.[2] }; };");
-    emit(context, 1, "const __mikuru_hydrationDiagnostic = (message, details = {}) => { const inferred = __mikuru_inferDiagnostic(message); const node = details.node; const diagnostic = { ...__mikuru_componentInfo, phase: \"hydration\", message, ...inferred, ...details }; delete diagnostic.node; if (!diagnostic.domPath && node) diagnostic.domPath = __mikuru_domPath(node); return diagnostic; };");
-    emit(context, 1, "const __mikuru_warn = (message, details = {}) => { const diagnostic = __mikuru_hydrationDiagnostic(message, details); __mikuru_emitDebug(\"hydration:warning\", diagnostic); if (typeof console !== \"undefined\" && console.warn) console.warn(`[Mikuru hydration] ${message} (phase: ${diagnostic.phase}, component: ${diagnostic.component}, file: ${diagnostic.filename})`); };");
+    emit(context, 1, "const __mikuru_hydrationDiagnostic = (message, details = {}) => { const inferred = __mikuru_inferDiagnostic(message); const node = details.node; const diagnostic = { ...__mikuru_componentInfo, source: \"hydration\", level: \"warning\", phase: \"hydration\", message, ...inferred, ...details }; delete diagnostic.node; if (!diagnostic.domPath && node) diagnostic.domPath = __mikuru_domPath(node); return diagnostic; };");
+    emit(context, 1, "const __mikuru_warn = (message, details = {}) => { const diagnostic = __mikuru_hydrationDiagnostic(message, details); __mikuru_emitDebug(\"hydration:warning\", { ...diagnostic, diagnostic }); if (typeof console !== \"undefined\" && console.warn) console.warn(`[Mikuru hydration] ${message} (phase: ${diagnostic.phase}, component: ${diagnostic.component}, file: ${diagnostic.filename})`); };");
     emit(context, 1, "const __mikuru_describeNode = (node) => { if (!node) return \"missing\"; if (node.nodeType === 1) return `<${node.tagName?.toLowerCase?.() ?? \"element\"}>`; if (node.nodeType === 3) return `text(${JSON.stringify(node.nodeValue ?? \"\")})`; if (node.nodeType === 8) return `comment(${JSON.stringify(node.nodeValue ?? \"\")})`; return `nodeType(${node.nodeType})`; };");
     emit(context, 1, "const __mikuru_restoreRegistrar = () => { if (__mikuru_previousRegistrar === undefined) { delete globalThis.__mikuru_currentRegistrar; } else { globalThis.__mikuru_currentRegistrar = __mikuru_previousRegistrar; } };");
     emit(context, 1, "const __mikuru_recovery = {};");
@@ -158,43 +168,52 @@ function hydrateChildren(context, rawChildren, parentVar, indent) {
     const children = rawChildren.filter(isHydratableNode);
     const domIndexVar = nextName(context, "domIndex");
     emit(context, indent, `let ${domIndexVar} = 0;`);
-    children.forEach((child) => {
+    for (let index = 0; index < children.length; index += 1) {
+        const child = children[index];
         if (child.type === "element" && child.tag === "Teleport") {
             hydrateTeleportAtIndex(context, child, parentVar, domIndexVar, indent);
-            return;
+            continue;
         }
         if (child.type === "element" && child.tag === "component") {
             hydrateDynamicComponentAtIndex(context, child, parentVar, domIndexVar, indent);
-            return;
+            continue;
         }
         if (child.type === "element" && child.tag === "KeepAlive") {
             hydrateKeepAliveAtIndex(context, child, parentVar, domIndexVar, indent);
-            return;
+            continue;
         }
         if (child.type === "element" && child.tag === "AsyncBoundary") {
             hydrateAsyncBoundaryAtIndex(context, child, parentVar, domIndexVar, indent);
-            return;
+            continue;
         }
         if (child.type === "element" && child.tag === "ErrorBoundary") {
             hydrateErrorBoundaryAtIndex(context, child, parentVar, domIndexVar, indent);
-            return;
+            continue;
         }
         if (child.type === "element" && child.tag === "TransitionGroup") {
             hydrateTransitionGroupAtIndex(context, child, parentVar, domIndexVar, indent);
-            return;
+            continue;
         }
         if (child.type === "element" && child.tag === "Transition") {
             hydrateTransitionAtIndex(context, child, parentVar, domIndexVar, indent);
-            return;
+            continue;
         }
         if (child.type === "element" && getAttr(child, "v-if") && !getAttr(child, "v-pre")) {
-            hydrateIf(context, child, parentVar, domIndexVar, indent);
-            emit(context, indent, `${domIndexVar} += 1;`);
-            return;
+            const { branches, nextIndex } = collectIfBranches(children, index);
+            hydrateIfChain(context, branches, parentVar, domIndexVar, indent);
+            index = nextIndex - 1;
+            continue;
+        }
+        if (child.type === "element" && (getAttr(child, "v-else-if") || getAttr(child, "v-else"))) {
+            continue;
         }
         if (child.type === "element" && getAttr(child, "v-for") && !getAttr(child, "v-pre")) {
             hydrateFor(context, child, parentVar, domIndexVar, indent, domIndexVar);
-            return;
+            continue;
+        }
+        if (child.type === "element" && child.tag === "template") {
+            hydrateFragmentChildrenAtIndex(context, child.children, parentVar, domIndexVar, indent);
+            continue;
         }
         const childVar = nextName(context, "node");
         emit(context, indent, `const ${childVar} = ${parentVar}.childNodes[${domIndexVar}];`);
@@ -212,7 +231,7 @@ function hydrateChildren(context, rawChildren, parentVar, indent) {
             emit(context, indent, "}");
         }
         emit(context, indent, `${domIndexVar} += 1;`);
-    });
+    }
     emit(context, indent, `if (${parentVar}.childNodes.length > ${domIndexVar}) { __mikuru_warn("Extra DOM nodes after hydration: " + Array.from(${parentVar}.childNodes).slice(${domIndexVar}).map(__mikuru_describeNode).join(", ") + "."); }`);
 }
 function hydrateTeleportAtIndex(context, node, parentVar, domIndex, indent) {
@@ -271,6 +290,52 @@ function hydrateIf(context, node, parentVar, domIndex, indent) {
     emit(context, indent + 1, "__mikuru_recover(\"Branch mismatch: expected no v-if DOM for initial state\");");
     emit(context, indent, "}");
 }
+function hydrateIfChain(context, branches, parentVar, domIndex, indent) {
+    branches.forEach((branch, index) => {
+        if (index === 0) {
+            emit(context, indent, `if (unwrap(${compileHydrationExpression(context, branch.condition ?? "", "v-if")})) {`);
+        }
+        else if (branch.directive === "v-else-if") {
+            emit(context, indent, `else if (unwrap(${compileHydrationExpression(context, branch.condition ?? "", "v-else-if")})) {`);
+        }
+        else {
+            emit(context, indent, "else {");
+        }
+        hydrateFragmentChildrenAtIndex(context, ifBranchChildren(branch.node), parentVar, domIndex, indent + 1);
+        emit(context, indent, "}");
+    });
+}
+function ifBranchChildren(node) {
+    if (node.tag === "template") {
+        return node.children;
+    }
+    return [withoutAttrs(node, ["v-if", "v-else-if", "v-else"])];
+}
+function collectIfBranches(children, startIndex) {
+    const first = children[startIndex];
+    if (first?.type !== "element") {
+        return { branches: [], nextIndex: startIndex + 1 };
+    }
+    const branches = [{ node: first, condition: getAttrValue(first, "v-if"), directive: "v-if" }];
+    let cursor = startIndex + 1;
+    while (cursor < children.length) {
+        const candidate = children[cursor];
+        if (candidate?.type !== "element") {
+            break;
+        }
+        if (getAttr(candidate, "v-else-if")) {
+            branches.push({ node: candidate, condition: getAttrValue(candidate, "v-else-if"), directive: "v-else-if" });
+            cursor += 1;
+            continue;
+        }
+        if (getAttr(candidate, "v-else")) {
+            branches.push({ node: candidate, directive: "v-else" });
+            cursor += 1;
+        }
+        break;
+    }
+    return { branches, nextIndex: cursor };
+}
 function hydrateFor(context, node, parentVar, domIndex, indent, advanceVar) {
     const attr = getAttr(node, "v-for");
     if (!attr || attr.value === true) {
@@ -279,6 +344,22 @@ function hydrateFor(context, node, parentVar, domIndex, indent, advanceVar) {
     const forExpression = parseForExpression(String(attr.value));
     const listVar = nextName(context, "list");
     const itemVar = nextName(context, "item");
+    const startIndexVar = nextName(context, "forStartIndex");
+    emit(context, indent, `const ${startIndexVar} = ${domIndex};`);
+    if (node.tag === "template") {
+        emit(context, indent, `const ${listVar} = Array.from(unwrap(${compileHydrationExpression(context, forExpression.source, "v-for source")}) ?? []);`);
+        emit(context, indent, `for (const [__mikuru_index, ${itemVar}] of ${listVar}.entries()) {`);
+        emit(context, indent + 1, `const ${forExpression.item} = ${itemVar};`);
+        if (forExpression.index) {
+            emit(context, indent + 1, `const ${forExpression.index} = __mikuru_index;`);
+        }
+        withTemplateRefMode(context, "array", () => {
+            hydrateFragmentChildrenAtIndex(context, node.children, parentVar, domIndex, indent + 1);
+        });
+        emit(context, indent, "}");
+        emitHydratedForUpdate(context, node, parentVar, startIndexVar, domIndex, indent, forExpression);
+        return;
+    }
     const childVar = nextName(context, "row");
     const elementCheck = isComponentTag(node.tag)
         ? `!${childVar} || ${childVar}.nodeType !== 1`
@@ -299,6 +380,61 @@ function hydrateFor(context, node, parentVar, domIndex, indent, advanceVar) {
     if (advanceVar) {
         emit(context, indent, `${advanceVar} += ${listVar}.length;`);
     }
+    emitHydratedForUpdate(context, node, parentVar, startIndexVar, domIndex, indent, forExpression);
+}
+function emitHydratedForUpdate(context, node, parentVar, startIndexVar, endIndexVar, indent, forExpression) {
+    const hydratedFirstVar = nextName(context, "forHydratedFirst");
+    const hydratedAfterVar = nextName(context, "forHydratedAfter");
+    const startAnchorVar = nextName(context, "forUpdateStart");
+    const endAnchorVar = nextName(context, "forUpdateEnd");
+    const initializedVar = nextName(context, "forInitialized");
+    const branchCleanupVar = nextName(context, "forCleanup");
+    const stopVar = nextName(context, "stop");
+    const sourceVar = nextName(context, "forSource");
+    const indexVar = nextName(context, "forIndex");
+    const rawItemVar = nextName(context, "forItem");
+    emit(context, indent, `const ${hydratedFirstVar} = ${parentVar}.childNodes[${startIndexVar}] ?? null;`);
+    emit(context, indent, `const ${hydratedAfterVar} = ${parentVar}.childNodes[${endIndexVar}] ?? null;`);
+    emit(context, indent, `let ${startAnchorVar};`);
+    emit(context, indent, `let ${endAnchorVar};`);
+    emit(context, indent, `let ${initializedVar} = false;`);
+    emit(context, indent, `const ${branchCleanupVar} = [];`);
+    emit(context, indent, `const ${stopVar} = effect(() => {`);
+    emit(context, indent + 1, `const ${sourceVar} = Array.from(unwrap(${compileHydrationExpression(context, forExpression.source, "v-for source")}) ?? []);`);
+    emit(context, indent + 1, `if (!${initializedVar}) { ${initializedVar} = true; return; }`);
+    emit(context, indent + 1, `if (!${startAnchorVar}) {`);
+    emit(context, indent + 2, `${startAnchorVar} = document.createComment("for");`);
+    emit(context, indent + 2, `${endAnchorVar} = document.createComment("/for");`);
+    emit(context, indent + 2, `${parentVar}.insertBefore(${startAnchorVar}, ${hydratedFirstVar}?.parentNode === ${parentVar} ? ${hydratedFirstVar} : ${hydratedAfterVar});`);
+    emit(context, indent + 2, `${parentVar}.insertBefore(${endAnchorVar}, ${hydratedAfterVar});`);
+    emit(context, indent + 1, `}`);
+    emit(context, indent + 1, `__mikuru_runCleanup(${branchCleanupVar});`);
+    emitHydrationRemoveBetween(context, indent + 1, startAnchorVar, endAnchorVar);
+    emit(context, indent + 1, `for (let ${indexVar} = 0; ${indexVar} < ${sourceVar}.length; ${indexVar} += 1) {`);
+    emit(context, indent + 2, `const ${rawItemVar} = ${sourceVar}[${indexVar}];`);
+    emit(context, indent + 2, `const ${forExpression.item} = ${rawItemVar};`);
+    if (forExpression.index) {
+        emit(context, indent + 2, `const ${forExpression.index} = ${indexVar};`);
+    }
+    const previousTemplateRefMode = context.templateRefMode;
+    context.templateRefMode = "array";
+    try {
+        if (node.tag === "template") {
+            generateDomChildren(context, node.children, parentVar, branchCleanupVar, indent + 2, endAnchorVar);
+        }
+        else {
+            generateDomNode(context, withoutDomForAttrs(node), parentVar, branchCleanupVar, indent + 2, endAnchorVar);
+        }
+    }
+    finally {
+        context.templateRefMode = previousTemplateRefMode;
+    }
+    emit(context, indent + 1, `}`);
+    emit(context, indent, `});`);
+    emit(context, indent, `__mikuru_cleanup.push(() => {`);
+    emit(context, indent + 1, `${stopVar}();`);
+    emit(context, indent + 1, `__mikuru_runCleanup(${branchCleanupVar});`);
+    emit(context, indent, `});`);
 }
 function hydrateAttrs(context, node, elementVar, indent) {
     const staticClass = getStaticAttrValue(node, "class");
@@ -848,43 +984,52 @@ function hydrateTransitionGroupElement(context, node, elementVar, indent) {
 }
 function hydrateFragmentChildrenAtIndex(context, rawChildren, parentVar, domIndex, indent) {
     const children = rawChildren.filter(isHydratableNode);
-    children.forEach((child) => {
+    for (let index = 0; index < children.length; index += 1) {
+        const child = children[index];
         if (child.type === "element" && child.tag === "Teleport") {
             hydrateTeleportAtIndex(context, child, parentVar, domIndex, indent);
-            return;
+            continue;
         }
         if (child.type === "element" && child.tag === "component") {
             hydrateDynamicComponentAtIndex(context, child, parentVar, domIndex, indent);
-            return;
+            continue;
         }
         if (child.type === "element" && child.tag === "KeepAlive") {
             hydrateKeepAliveAtIndex(context, child, parentVar, domIndex, indent);
-            return;
+            continue;
         }
         if (child.type === "element" && child.tag === "AsyncBoundary") {
             hydrateAsyncBoundaryAtIndex(context, child, parentVar, domIndex, indent);
-            return;
+            continue;
         }
         if (child.type === "element" && child.tag === "ErrorBoundary") {
             hydrateErrorBoundaryAtIndex(context, child, parentVar, domIndex, indent);
-            return;
+            continue;
         }
         if (child.type === "element" && child.tag === "TransitionGroup") {
             hydrateTransitionGroupAtIndex(context, child, parentVar, domIndex, indent);
-            return;
+            continue;
         }
         if (child.type === "element" && child.tag === "Transition") {
             hydrateTransitionAtIndex(context, child, parentVar, domIndex, indent);
-            return;
+            continue;
         }
         if (child.type === "element" && getAttr(child, "v-if") && !getAttr(child, "v-pre")) {
-            hydrateIf(context, child, parentVar, domIndex, indent);
-            emit(context, indent, `${domIndex} += 1;`);
-            return;
+            const { branches, nextIndex } = collectIfBranches(children, index);
+            hydrateIfChain(context, branches, parentVar, domIndex, indent);
+            index = nextIndex - 1;
+            continue;
+        }
+        if (child.type === "element" && (getAttr(child, "v-else-if") || getAttr(child, "v-else"))) {
+            continue;
         }
         if (child.type === "element" && getAttr(child, "v-for") && !getAttr(child, "v-pre")) {
             hydrateFor(context, child, parentVar, domIndex, indent, domIndex);
-            return;
+            continue;
+        }
+        if (child.type === "element" && child.tag === "template") {
+            hydrateFragmentChildrenAtIndex(context, child.children, parentVar, domIndex, indent);
+            continue;
         }
         const childVar = nextName(context, "node");
         emit(context, indent, `const ${childVar} = ${parentVar}.childNodes[${domIndex}];`);
@@ -902,7 +1047,7 @@ function hydrateFragmentChildrenAtIndex(context, rawChildren, parentVar, domInde
             emit(context, indent, "}");
         }
         emit(context, indent, `${domIndex} += 1;`);
-    });
+    }
 }
 function hydrateComponentProps(context, node, propsVar, indent) {
     for (const attr of node.attrs) {
@@ -972,6 +1117,16 @@ function hydrateComponentProps(context, node, propsVar, indent) {
         emit(context, indent, `${propsVar}[${quote(attr.name)}] = ${attr.value === true ? "true" : quote(attr.value)};`);
     }
 }
+function emitHydrationRemoveBetween(context, indent, startVar, endVar) {
+    const currentVar = nextName(context, "current");
+    const nextVarName = nextName(context, "next");
+    emit(context, indent, `let ${currentVar} = ${startVar}.nextSibling;`);
+    emit(context, indent, `while (${currentVar} && ${currentVar} !== ${endVar}) {`);
+    emit(context, indent + 1, `const ${nextVarName} = ${currentVar}.nextSibling;`);
+    emit(context, indent + 1, `__mikuru_removeNode(${currentVar});`);
+    emit(context, indent + 1, `${currentVar} = ${nextVarName};`);
+    emit(context, indent, `}`);
+}
 function hydrateEvents(context, node, elementVar, indent) {
     for (const attr of node.attrs) {
         const objectEvent = parseObjectOnDirective(attr.name);