@kuratchi/js 0.0.14 → 0.0.16

package/dist/compiler/template.js

@@ -37,13 +37,244 @@ const JS_CONTROL_PATTERNS = [
 function isJsControlLine(line) {
     return JS_CONTROL_PATTERNS.some(p => p.test(line));
 }
+const FRAGMENT_OPEN_MARKER = '<!--__KURATCHI_FRAGMENT_OPEN:';
+const FRAGMENT_CLOSE_MARKER = '<!--__KURATCHI_FRAGMENT_CLOSE-->';
+export function splitTemplateRenderSections(template) {
+    const bodyLines = [];
+    const headLines = [];
+    const lines = template.split('\n');
+    let inHead = false;
+    let inStyle = false;
+    let inScript = false;
+    for (const line of lines) {
+        const trimmed = line.trim();
+        const opensStyle = /<style[\s>]/i.test(trimmed);
+        const closesStyle = /<\/style>/i.test(trimmed);
+        const opensScript = /<script[\s>]/i.test(trimmed);
+        const closesScript = /<\/script>/i.test(trimmed);
+        const inRawBlock = inStyle || inScript || opensStyle || opensScript;
+        if (inRawBlock) {
+            let remaining = line;
+            let bodyLine = '';
+            let headLine = '';
+            while (remaining.length > 0) {
+                if (!inHead) {
+                    const openMatch = remaining.match(/<head(?:\s[^>]*)?>/i);
+                    if (!openMatch || openMatch.index === undefined) {
+                        bodyLine += remaining;
+                        break;
+                    }
+                    bodyLine += remaining.slice(0, openMatch.index);
+                    remaining = remaining.slice(openMatch.index + openMatch[0].length);
+                    const closeMatch = remaining.match(/<\/head>/i);
+                    if (!closeMatch || closeMatch.index === undefined) {
+                        headLine += remaining;
+                        remaining = '';
+                        inHead = true;
+                        break;
+                    }
+                    headLine += remaining.slice(0, closeMatch.index);
+                    remaining = remaining.slice(closeMatch.index + closeMatch[0].length);
+                }
+                else {
+                    const closeMatch = remaining.match(/<\/head>/i);
+                    if (!closeMatch || closeMatch.index === undefined) {
+                        headLine += remaining;
+                        remaining = '';
+                        break;
+                    }
+                    headLine += remaining.slice(0, closeMatch.index);
+                    remaining = remaining.slice(closeMatch.index + closeMatch[0].length);
+                    inHead = false;
+                }
+            }
+            bodyLines.push(bodyLine);
+            headLines.push(headLine);
+            if (opensStyle && !closesStyle)
+                inStyle = true;
+            if (closesStyle)
+                inStyle = false;
+            if (opensScript && !closesScript)
+                inScript = true;
+            if (closesScript)
+                inScript = false;
+            continue;
+        }
+        if (isJsControlLine(trimmed) && !/<\/?head(?:\s|>)/i.test(line)) {
+            bodyLines.push(line);
+            headLines.push(line);
+            continue;
+        }
+        let remaining = line;
+        let bodyLine = '';
+        let headLine = '';
+        while (remaining.length > 0) {
+            if (!inHead) {
+                const openMatch = remaining.match(/<head(?:\s[^>]*)?>/i);
+                if (!openMatch || openMatch.index === undefined) {
+                    bodyLine += remaining;
+                    break;
+                }
+                bodyLine += remaining.slice(0, openMatch.index);
+                remaining = remaining.slice(openMatch.index + openMatch[0].length);
+                const closeMatch = remaining.match(/<\/head>/i);
+                if (!closeMatch || closeMatch.index === undefined) {
+                    headLine += remaining;
+                    remaining = '';
+                    inHead = true;
+                    break;
+                }
+                headLine += remaining.slice(0, closeMatch.index);
+                remaining = remaining.slice(closeMatch.index + closeMatch[0].length);
+            }
+            else {
+                const closeMatch = remaining.match(/<\/head>/i);
+                if (!closeMatch || closeMatch.index === undefined) {
+                    headLine += remaining;
+                    remaining = '';
+                    break;
+                }
+                headLine += remaining.slice(0, closeMatch.index);
+                remaining = remaining.slice(closeMatch.index + closeMatch[0].length);
+                inHead = false;
+            }
+        }
+        bodyLines.push(bodyLine);
+        headLines.push(headLine);
+    }
+    return {
+        bodyTemplate: bodyLines.join('\n'),
+        headTemplate: headLines.join('\n'),
+    };
+}
+function buildAppendStatement(expression, emitCall) {
+    return emitCall ? `${emitCall}(${expression});` : `__html += ${expression};`;
+}
+function extractPollFragmentExpr(tagText, rpcNameMap) {
+    const pollMatch = tagText.match(/\bdata-poll=\{([\s\S]*?)\}/);
+    if (!pollMatch)
+        return null;
+    const inner = pollMatch[1].trim();
+    const callMatch = inner.match(/^([A-Za-z_$][\w$]*)\(([\s\S]*)\)$/);
+    if (!callMatch)
+        return null;
+    const fnName = callMatch[1];
+    const rpcName = rpcNameMap?.get(fnName) || fnName;
+    const argsExpr = (callMatch[2] || '').trim();
+    if (!argsExpr)
+        return JSON.stringify(`__poll_${rpcName}`);
+    return `'__poll_' + String(${argsExpr}).replace(/[^a-zA-Z0-9]/g, '_')`;
+}
+function findTagEnd(template, start) {
+    let quote = null;
+    let escaped = false;
+    let braceDepth = 0;
+    for (let i = start; i < template.length; i++) {
+        const ch = template[i];
+        if (quote) {
+            if (escaped) {
+                escaped = false;
+                continue;
+            }
+            if (ch === '\\') {
+                escaped = true;
+                continue;
+            }
+            if (ch === quote)
+                quote = null;
+            continue;
+        }
+        if (ch === '"' || ch === "'" || ch === '`') {
+            quote = ch;
+            continue;
+        }
+        if (ch === '{') {
+            braceDepth++;
+            continue;
+        }
+        if (ch === '}') {
+            braceDepth = Math.max(0, braceDepth - 1);
+            continue;
+        }
+        if (ch === '>' && braceDepth === 0) {
+            return i;
+        }
+    }
+    return -1;
+}
+function instrumentPollFragments(template, rpcNameMap) {
+    const out = [];
+    const stack = [];
+    let cursor = 0;
+    while (cursor < template.length) {
+        const lt = template.indexOf('<', cursor);
+        if (lt === -1) {
+            out.push(template.slice(cursor));
+            break;
+        }
+        out.push(template.slice(cursor, lt));
+        if (template.startsWith('<!--', lt)) {
+            const commentEnd = template.indexOf('-->', lt + 4);
+            if (commentEnd === -1) {
+                out.push(template.slice(lt));
+                break;
+            }
+            out.push(template.slice(lt, commentEnd + 3));
+            cursor = commentEnd + 3;
+            continue;
+        }
+        const tagEnd = findTagEnd(template, lt + 1);
+        if (tagEnd === -1) {
+            out.push(template.slice(lt));
+            break;
+        }
+        const tagText = template.slice(lt, tagEnd + 1);
+        const closingMatch = tagText.match(/^<\s*\/\s*([A-Za-z][\w:-]*)\s*>$/);
+        if (closingMatch) {
+            const closingTag = closingMatch[1].toLowerCase();
+            const last = stack[stack.length - 1];
+            if (last && last.tagName === closingTag) {
+                if (last.fragmentExpr)
+                    out.push(FRAGMENT_CLOSE_MARKER);
+                stack.pop();
+            }
+            out.push(tagText);
+            cursor = tagEnd + 1;
+            continue;
+        }
+        const openMatch = tagText.match(/^<\s*([A-Za-z][\w:-]*)\b/);
+        out.push(tagText);
+        if (!openMatch) {
+            cursor = tagEnd + 1;
+            continue;
+        }
+        const tagName = openMatch[1].toLowerCase();
+        const isVoidLike = /\/\s*>$/.test(tagText) || /^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/i.test(tagName);
+        const fragmentExpr = extractPollFragmentExpr(tagText, rpcNameMap);
+        if (fragmentExpr) {
+            out.push(`${FRAGMENT_OPEN_MARKER}${encodeURIComponent(fragmentExpr)}-->`);
+            if (isVoidLike) {
+                out.push(FRAGMENT_CLOSE_MARKER);
+            }
+        }
+        if (!isVoidLike) {
+            stack.push({ tagName, fragmentExpr });
+        }
+        cursor = tagEnd + 1;
+    }
+    return out.join('');
+}
 /**
  * Compile a template string into a JS render function body.
  *
  * The generated code expects `data` in scope (destructured load return)
  * and an `__esc` helper for HTML-escaping.
  */
-export function compileTemplate(template, componentNames, actionNames, rpcNameMap) {
+export function compileTemplate(template, componentNames, actionNames, rpcNameMap, options = {}) {
+    const emitCall = options.emitCall;
+    if (options.enableFragmentManifest) {
+        template = instrumentPollFragments(template, rpcNameMap);
+    }
     const out = ['let __html = "";'];
     const lines = template.split('\n');
     let inStyle = false;
@@ -58,7 +289,7 @@ export function compileTemplate(template, componentNames, actionNames, rpcNameMa
         if (trimmed.match(/<style[\s>]/i))
             inStyle = true;
         if (inStyle) {
-            out.push(`__html += \`${escapeLiteral(line)}\\n\`;`);
+            out.push(buildAppendStatement(`\`${escapeLiteral(line)}\\n\``, emitCall));
             if (trimmed.match(/<\/style>/i))
                 inStyle = false;
             continue;
@@ -70,7 +301,7 @@ export function compileTemplate(template, componentNames, actionNames, rpcNameMa
             if (trimmed.match(/<\/script>/i)) {
                 const transformed = transformClientScriptBlock(scriptBuffer.join('\n'));
                 for (const scriptLine of transformed.split('\n')) {
-                    out.push(`__html += \`${escapeLiteral(scriptLine)}\\n\`;`);
+                    out.push(buildAppendStatement(`\`${escapeLiteral(scriptLine)}\\n\``, emitCall));
                 }
                 scriptBuffer = [];
                 inScript = false;
@@ -82,7 +313,7 @@ export function compileTemplate(template, componentNames, actionNames, rpcNameMa
             if (trimmed.match(/<\/script>/i)) {
                 const transformed = transformClientScriptBlock(scriptBuffer.join('\n'));
                 for (const scriptLine of transformed.split('\n')) {
-                    out.push(`__html += \`${escapeLiteral(scriptLine)}\\n\`;`);
+                    out.push(buildAppendStatement(`\`${escapeLiteral(scriptLine)}\\n\``, emitCall));
                 }
                 scriptBuffer = [];
                 inScript = false;
@@ -92,7 +323,7 @@ export function compileTemplate(template, componentNames, actionNames, rpcNameMa
         const startedInsideQuotedAttr = !!htmlAttrQuote;
         const nextHtmlState = advanceHtmlTagState(line, inHtmlTag, htmlAttrQuote);
         if (startedInsideQuotedAttr) {
-            out.push(`__html += \`${escapeLiteral(line)}\n\`;`);
+            out.push(buildAppendStatement(`\`${escapeLiteral(line)}\n\``, emitCall));
             inHtmlTag = nextHtmlState.inTag;
             htmlAttrQuote = nextHtmlState.quote;
             continue;
@@ -101,13 +332,13 @@ export function compileTemplate(template, componentNames, actionNames, rpcNameMa
         htmlAttrQuote = nextHtmlState.quote;
         // Skip empty lines
         if (!trimmed) {
-            out.push('__html += "\\n";');
+            out.push(buildAppendStatement(`"\\n"`, emitCall));
             continue;
         }
         // One-line inline if/else with branch content:
         // if (cond) { text/html } else { text/html }
         // Compile branch content as template output instead of raw JS.
-        const inlineIfElse = tryCompileInlineIfElseLine(trimmed, actionNames, rpcNameMap);
+        const inlineIfElse = tryCompileInlineIfElseLine(trimmed, actionNames, rpcNameMap, options);
         if (inlineIfElse) {
             out.push(...inlineIfElse);
             continue;
@@ -137,7 +368,7 @@ export function compileTemplate(template, componentNames, actionNames, rpcNameMa
                 }
             }
             // Self-closing: <Card attr="x" />
-            const componentLine = tryCompileComponentTag(joinedTrimmed, componentNames, actionNames, rpcNameMap);
+            const componentLine = tryCompileComponentTag(joinedTrimmed, componentNames, actionNames, rpcNameMap, options);
             if (componentLine) {
                 i += joinedExtra;
                 out.push(componentLine);
@@ -167,10 +398,12 @@ export function compileTemplate(template, componentNames, actionNames, rpcNameMa
                 }
                 // Compile children into a sub-render block
                 const childTemplate = childLines.join('\n');
-                const childBody = compileTemplate(childTemplate, componentNames, actionNames, rpcNameMap);
+                const childBody = compileTemplate(childTemplate, componentNames, actionNames, rpcNameMap, {
+                    clientRouteRegistry: options.clientRouteRegistry,
+                });
                 // Wrap in an IIFE that returns the children HTML
                 const childrenExpr = `(function() { ${childBody}; return __html; })()`;
-                out.push(`__html += ${openResult.funcName}({ ${openResult.propsStr}${openResult.propsStr ? ', ' : ''}children: ${childrenExpr} }, __esc);`);
+                out.push(buildAppendStatement(`${openResult.funcName}({ ${openResult.propsStr}${openResult.propsStr ? ', ' : ''}children: ${childrenExpr} }, __esc)`, emitCall));
                 continue;
             }
         }
@@ -187,7 +420,7 @@ export function compileTemplate(template, componentNames, actionNames, rpcNameMa
             }
             i += extraLines;
         }
-        out.push(compileHtmlLine(htmlLine, actionNames, rpcNameMap));
+        out.push(...compileHtmlLineStatements(htmlLine, actionNames, rpcNameMap, options));
     }
     return out.join('\n');
 }
@@ -441,14 +674,13 @@ function findMatching(src, openPos, openChar, closeChar) {
     }
     return -1;
 }
-function compileInlineBranchContent(content, actionNames, rpcNameMap) {
+function compileInlineBranchContent(content, actionNames, rpcNameMap, options = {}) {
     const c = content.trim();
     if (!c)
         return [];
-    const compiled = compileHtmlLine(c, actionNames, rpcNameMap);
-    return [compiled.replace(/\\n`;/, '`;')];
+    return compileHtmlLineStatements(c, actionNames, rpcNameMap, { ...options, appendNewline: false });
 }
-function tryCompileInlineIfElseLine(line, actionNames, rpcNameMap) {
+function tryCompileInlineIfElseLine(line, actionNames, rpcNameMap, options = {}) {
     if (!line.startsWith('if'))
         return null;
     const ifMatch = line.match(/^if\s*\(/);
@@ -489,9 +721,9 @@ function tryCompileInlineIfElseLine(line, actionNames, rpcNameMap) {
     const elseContent = line.slice(elseOpen + 1, elseClose);
     const out = [];
     out.push(`if (${condition}) {`);
-    out.push(...compileInlineBranchContent(thenContent, actionNames, rpcNameMap));
+    out.push(...compileInlineBranchContent(thenContent, actionNames, rpcNameMap, options));
     out.push(`} else {`);
-    out.push(...compileInlineBranchContent(elseContent, actionNames, rpcNameMap));
+    out.push(...compileInlineBranchContent(elseContent, actionNames, rpcNameMap, options));
     out.push(`}`);
     return out;
 }
@@ -575,7 +807,7 @@ function parseComponentAttrs(attrsStr, actionNames) {
  * Matches: <StatCard attr="literal" attr={expr} />
  * Generates: __html += __c_stat_card({ attr: "literal", attr: (expr) }, __esc);
  */
-function tryCompileComponentTag(line, componentNames, actionNames, rpcNameMap) {
+function tryCompileComponentTag(line, componentNames, actionNames, rpcNameMap, options = {}) {
     // Match self-closing tags: <TagName ...attrs... />
     const selfCloseMatch = line.match(/^<([A-Z]\w*)\s*(.*?)\s*\/>\s*$/);
     // Match open+close on same line with no content: <TagName ...attrs...></TagName>
@@ -590,7 +822,7 @@ function tryCompileComponentTag(line, componentNames, actionNames, rpcNameMap) {
             return null;
         const funcName = componentFuncName(fileName);
         const propsStr = parseComponentAttrs(match[2].trim(), actionNames);
-        return `__html += ${funcName}({ ${propsStr} }, __esc);`;
+        return buildAppendStatement(`${funcName}({ ${propsStr} }, __esc)`, options.emitCall);
     }
     if (inlinePairMatch) {
         const tagName = inlinePairMatch[1];
@@ -601,9 +833,11 @@ function tryCompileComponentTag(line, componentNames, actionNames, rpcNameMap) {
         const propsStr = parseComponentAttrs(inlinePairMatch[2].trim(), actionNames);
         const innerContent = inlinePairMatch[3];
         // Compile the inline content as a mini-template to handle {expr} interpolation
-        const childBody = compileTemplate(innerContent, componentNames, actionNames, rpcNameMap);
+        const childBody = compileTemplate(innerContent, componentNames, actionNames, rpcNameMap, {
+            clientRouteRegistry: options.clientRouteRegistry,
+        });
         const childrenExpr = `(function() { ${childBody}; return __html; })()`;
-        return `__html += ${funcName}({ ${propsStr}${propsStr ? ', ' : ''}children: ${childrenExpr} }, __esc);`;
+        return buildAppendStatement(`${funcName}({ ${propsStr}${propsStr ? ', ' : ''}children: ${childrenExpr} }, __esc)`, options.emitCall);
     }
     return null;
 }
@@ -642,17 +876,47 @@ function expandShorthands(line) {
     });
     return line;
 }
+function compileHtmlLineStatements(line, actionNames, rpcNameMap, options = {}) {
+    const markerRegex = /<!--__KURATCHI_FRAGMENT_(OPEN:([\s\S]*?)|CLOSE)-->/g;
+    const statements = [];
+    let cursor = 0;
+    let sawLiteral = false;
+    let match;
+    while ((match = markerRegex.exec(line)) !== null) {
+        const literal = line.slice(cursor, match.index);
+        if (literal) {
+            statements.push(compileHtmlSegment(literal, actionNames, rpcNameMap, { ...options, appendNewline: false }));
+            sawLiteral = true;
+        }
+        if (match[1].startsWith('OPEN:')) {
+            const encodedExpr = match[2] || '';
+            statements.push(`__pushFragment(${decodeURIComponent(encodedExpr)});`);
+        }
+        else {
+            statements.push(`__popFragment();`);
+        }
+        cursor = match.index + match[0].length;
+    }
+    const tail = line.slice(cursor);
+    if (tail || sawLiteral || options.appendNewline !== false) {
+        const appendNewline = options.appendNewline !== false;
+        if (tail || appendNewline) {
+            statements.push(compileHtmlSegment(tail, actionNames, rpcNameMap, { ...options, appendNewline }));
+        }
+    }
+    return statements.filter(Boolean);
+}
 /**
- * Compile a single HTML line, replacing {expr} with escaped output,
+ * Compile a single HTML segment, replacing {expr} with escaped output,
  * {@html expr} with sanitized HTML, and {@raw expr} with raw output.
  * Handles attribute values like value={x}.
  */
-function compileHtmlLine(line, actionNames, rpcNameMap) {
+function compileHtmlSegment(line, actionNames, rpcNameMap, options = {}) {
     // Expand shorthand syntax before main compilation
     line = expandShorthands(line);
     let result = '';
     let pos = 0;
-    let hasExpr = false;
+    let pendingActionHiddenInput = null;
     while (pos < line.length) {
         const braceIdx = findNextTemplateBrace(line, pos);
         if (braceIdx === -1) {
@@ -671,19 +935,16 @@ function compileHtmlLine(line, actionNames, rpcNameMap) {
         if (inner.startsWith('@html ')) {
             const expr = inner.slice(6).trim();
             result += `\${__sanitizeHtml(${expr})}`;
-            hasExpr = true;
         }
         else if (inner.startsWith('@raw ')) {
             // Unsafe raw HTML: {@raw expr}
             const expr = inner.slice(5).trim();
             result += `\${__rawHtml(${expr})}`;
-            hasExpr = true;
         }
         else if (inner.startsWith('=html ')) {
             // Legacy alias for raw HTML: {=html expr}
             const expr = inner.slice(6).trim();
             result += `\${__rawHtml(${expr})}`;
-            hasExpr = true;
         }
         else {
             // Check if this is an attribute value: attr={expr}
@@ -697,7 +958,6 @@ function compileHtmlLine(line, actionNames, rpcNameMap) {
                 if (attrName === 'data-dialog-data') {
                     // data-dialog-data={expr} → data-dialog-data="JSON.stringify(expr)" (HTML-escaped)
                     result += `"\${__esc(JSON.stringify(${inner}))}"`;
-                    hasExpr = true;
                     pos = closeIdx + 1;
                     continue;
                 }
@@ -719,7 +979,6 @@ function compileHtmlLine(line, actionNames, rpcNameMap) {
                     else {
                         result += ` data-refresh="\${__esc(${inner})}"`;
                     }
-                    hasExpr = true;
                     pos = closeIdx + 1;
                     continue;
                 }
@@ -737,7 +996,6 @@ function compileHtmlLine(line, actionNames, rpcNameMap) {
                     else {
                         result += ` ${attrName}="${escapeLiteral(inner)}"`;
                     }
-                    hasExpr = true;
                     pos = closeIdx + 1;
                     continue;
                 }
@@ -759,12 +1017,11 @@ function compileHtmlLine(line, actionNames, rpcNameMap) {
                         // Non-call expression mode (e.g., data-get={someUrl})
                         result += ` ${attrName}="\${__esc(${inner})}"`;
                     }
-                    hasExpr = true;
                     pos = closeIdx + 1;
                     continue;
                 }
                 else if (attrName === 'data-poll') {
-                    // data-poll={fn(args)} → data-poll="fnName" data-poll-args="[serialized]"
+                    // data-poll={fn(args)} → data-poll="fnName" data-poll-args="[serialized]" data-poll-id="stable-id"
                     const pollCallMatch = inner.match(/^(\w+)\((.*)\)$/);
                     if (pollCallMatch) {
                         const fnName = pollCallMatch[1];
@@ -772,13 +1029,18 @@ function compileHtmlLine(line, actionNames, rpcNameMap) {
                         const argsExpr = pollCallMatch[2].trim();
                         // Remove the trailing "data-poll=" we already appended
                         result = result.replace(/\s*data-poll=$/, '');
-                        // Emit data-poll and data-poll-args attributes
+                        // Emit data-poll, data-poll-args, and stable data-poll-id (based on fn + args expression)
                         result += ` data-poll="${rpcName}"`;
                         if (argsExpr) {
                             result += ` data-poll-args="\${__esc(JSON.stringify([${argsExpr}]))}"`;
+                            // Stable ID based on args so same data produces same ID across renders
+                            result += ` data-poll-id="\${__esc('__poll_' + String(${argsExpr}).replace(/[^a-zA-Z0-9]/g, '_'))}"`;
+                        }
+                        else {
+                            // No args - use function name as ID
+                            result += ` data-poll-id="__poll_${rpcName}"`;
                         }
                     }
-                    hasExpr = true;
                     pos = closeIdx + 1;
                     continue;
                 }
@@ -794,23 +1056,14 @@ function compileHtmlLine(line, actionNames, rpcNameMap) {
                     }
                     // Remove trailing `action=` from output and inject _action hidden field.
                     result = result.replace(/\s*action=$/, '');
+                    const actionValue = actionNames === undefined
+                        ? `\${__esc(${inner})}`
+                        : inner;
+                    pendingActionHiddenInput = `\\n<input type="hidden" name="_action" value="${actionValue}">`;
                     pos = closeIdx + 1;
-                    const tagEnd = line.indexOf('>', pos);
-                    if (tagEnd !== -1) {
-                        result += escapeLiteral(line.slice(pos, tagEnd + 1));
-                        // In a route context, inner is the literal action function name (a string key).
-                        // In a component context (actionNames === undefined), inner is a prop name whose
-                        // value at runtime is the action name string — emit it as a dynamic expression.
-                        const actionValue = actionNames === undefined
-                            ? `\${__esc(${inner})}`
-                            : inner;
-                        result += `\\n<input type="hidden" name="_action" value="${actionValue}">`;
-                        pos = tagEnd + 1;
-                    }
-                    hasExpr = true;
                     continue;
                 }
-                else if (/^on[A-Za-z]+$/.test(attrName)) {
+                else if (/^on[A-Za-z]+$/i.test(attrName)) {
                     // onClick/onChange/...={expr} — check if it's a server action or plain client JS
                     const eventName = attrName.slice(2).toLowerCase();
                     const actionCallMatch = inner.match(/^(\w+)\((.*)\)$/);
@@ -825,12 +1078,25 @@ function compileHtmlLine(line, actionNames, rpcNameMap) {
                         result += ` data-action="${fnName}" data-args="\${__esc(JSON.stringify([${argsExpr}]))}" data-action-event="${eventName}"`;
                     }
                     else {
-                        // Plain client-side event handler: onClick={myFn()}
-                        // Emit as native inline handler (lowercased event attribute).
-                        result = result.replace(new RegExp(`\\s*${attrName}=$`), ` on${eventName}=`);
-                        result += `"${escapeLiteral(inner)}"`;
+                        const clientRegistration = options.clientRouteRegistry?.registerEventHandler(eventName, inner) ?? null;
+                        if (clientRegistration) {
+                            result = result.replace(new RegExp(`\\s*${attrName}=$`), '');
+                            result += ` data-client-route="${clientRegistration.routeId}" data-client-handler="${clientRegistration.handlerId}" data-client-event="${eventName}"`;
+                            if (clientRegistration.argsExpr) {
+                                result += ` data-client-args="\${__esc(JSON.stringify([${clientRegistration.argsExpr}]))}"`;
+                            }
+                        }
+                        else if (options.clientRouteRegistry?.hasBindingReference(inner)) {
+                            throw new Error(`Unsupported client handler expression: "${inner}". ` +
+                                `Top-level $client/$shared event handlers must be a direct function reference or call, like onClick={openDialog()} or onClick={helpers.openDialog()}.`);
+                        }
+                        else {
+                            // Plain client-side event handler: onClick={myFn()}
+                            // Emit as native inline handler (lowercased event attribute).
+                            result = result.replace(new RegExp(`\\s*${attrName}=$`), ` on${eventName}=`);
+                            result += `"${escapeLiteral(inner)}"`;
+                        }
                     }
-                    hasExpr = true;
                     pos = closeIdx + 1;
                     continue;
                 }
@@ -846,17 +1112,14 @@ function compileHtmlLine(line, actionNames, rpcNameMap) {
             else {
                 result += `\${__esc(${inner})}`;
             }
-            hasExpr = true;
         }
         pos = closeIdx + 1;
     }
-    // If the line had expressions, use template literal; otherwise plain string
-    if (hasExpr) {
-        return `__html += \`${result}\\n\`;`;
-    }
-    else {
-        return `__html += \`${result}\\n\`;`;
+    if (pendingActionHiddenInput && result.includes('>')) {
+        const gtIndex = result.indexOf('>');
+        result = result.slice(0, gtIndex + 1) + pendingActionHiddenInput + result.slice(gtIndex + 1);
     }
+    return buildAppendStatement(`\`${result}${options.appendNewline === false ? '' : '\\n'}\``, options.emitCall);
 }
 /** Escape characters that would break a JS template literal. */
 function escapeLiteral(text) {

package/dist/compiler/worker-output-pipeline.d.ts

@@ -0,0 +1,13 @@
+export interface WorkerClassExportEntry {
+    className: string;
+    exportKind: 'named' | 'default';
+    file: string;
+}
+export declare function resolveRuntimeImportPath(projectDir: string): string | null;
+export declare function toWorkerImportPath(projectDir: string, outDir: string, filePath: string): string;
+export declare function buildWorkerEntrypointSource(opts: {
+    projectDir: string;
+    outDir: string;
+    doClassNames: string[];
+    workerClassEntries: WorkerClassExportEntry[];
+}): string;

package/dist/compiler/worker-output-pipeline.js

@@ -0,0 +1,37 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+export function resolveRuntimeImportPath(projectDir) {
+    const candidates = [
+        { file: 'src/server/runtime.hook.ts', importPath: '../src/server/runtime.hook' },
+    ];
+    for (const candidate of candidates) {
+        if (fs.existsSync(path.join(projectDir, candidate.file))) {
+            return candidate.importPath;
+        }
+    }
+    return null;
+}
+export function toWorkerImportPath(projectDir, outDir, filePath) {
+    const absPath = path.isAbsolute(filePath) ? filePath : path.join(projectDir, filePath);
+    let rel = path.relative(outDir, absPath).replace(/\\/g, '/');
+    if (!rel.startsWith('.'))
+        rel = `./${rel}`;
+    return rel.replace(/\.(ts|js|mjs|cjs)$/, '');
+}
+export function buildWorkerEntrypointSource(opts) {
+    const workerClassExports = opts.workerClassEntries
+        .map((entry) => {
+        const importPath = toWorkerImportPath(opts.projectDir, opts.outDir, entry.file);
+        if (entry.exportKind === 'default') {
+            return `export { default as ${entry.className} } from '${importPath}';`;
+        }
+        return `export { ${entry.className} } from '${importPath}';`;
+    });
+    return [
+        '// Auto-generated by kuratchi — do not edit.',
+        "export { default } from './routes.js';",
+        ...opts.doClassNames.map((className) => `export { ${className} } from './routes.js';`),
+        ...workerClassExports,
+        '',
+    ].join('\n');
+}

package/dist/compiler/wrangler-sync.d.ts

@@ -0,0 +1,14 @@
+export interface WranglerSyncEntry {
+    binding: string;
+    className: string;
+}
+export interface WranglerSyncConfig {
+    workflows: WranglerSyncEntry[];
+    containers: WranglerSyncEntry[];
+    durableObjects: WranglerSyncEntry[];
+}
+export declare function syncWranglerConfig(opts: {
+    projectDir: string;
+    config: WranglerSyncConfig;
+    writeFile: (filePath: string, content: string) => void;
+}): void;