@kuratchi/js 0.0.15 → 0.0.17

package/dist/compiler/template.js

@@ -37,14 +37,249 @@ 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) {
+    // When emitCall is provided, use it (e.g., __emit(expr))
+    // Otherwise, use array push for O(n) performance
+    return emitCall ? `${emitCall}(${expression});` : `__parts.push(${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) {
-    const out = ['let __html = "";'];
+export function compileTemplate(template, componentNames, actionNames, rpcNameMap, options = {}) {
+    const emitCall = options.emitCall;
+    if (options.enableFragmentManifest) {
+        template = instrumentPollFragments(template, rpcNameMap);
+    }
+    // Use array accumulation for O(n) performance instead of O(n²) string concatenation
+    const useArrayAccum = !emitCall;
+    const out = useArrayAccum ? ['const __parts = [];'] : ['let __html = "";'];
     const lines = template.split('\n');
     let inStyle = false;
     let inScript = false;
@@ -58,7 +293,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 +305,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 +317,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 +327,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 +336,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 +372,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 +402,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 +424,11 @@ export function compileTemplate(template, componentNames, actionNames, rpcNameMa
             }
             i += extraLines;
         }
-        out.push(compileHtmlLine(htmlLine, actionNames, rpcNameMap));
+        out.push(...compileHtmlLineStatements(htmlLine, actionNames, rpcNameMap, options));
+    }
+    // For non-emit mode, add final join to produce __html
+    if (!emitCall) {
+        out.push('let __html = __parts.join(\'\');');
     }
     return out.join('\n');
 }
@@ -262,9 +503,9 @@ function transformClientScriptBlock(block) {
     const openTag = match[1];
     const body = match[2];
     const closeTag = match[3];
+    // TypeScript is preserved — wrangler's esbuild handles transpilation
     if (!/\$\s*:/.test(body)) {
-        const transpiled = transpileTypeScript(body, 'client-script.ts');
-        return `${openTag}${transpiled}${closeTag}`;
+        return `${openTag}${body}${closeTag}`;
     }
     const out = [];
     const lines = body.split('\n');
@@ -360,8 +601,8 @@ function transformClientScriptBlock(block) {
         break;
     }
     out.splice(insertAt, 0, 'const __k$ = window.__kuratchiReactive;');
-    const transpiled = transpileTypeScript(out.join('\n'), 'client-script.ts');
-    return `${openTag}${transpiled}${closeTag}`;
+    // TypeScript is preserved — wrangler's esbuild handles transpilation
+    return `${openTag}${out.join('\n')}${closeTag}`;
 }
 function braceDelta(line) {
     let delta = 0;
@@ -441,14 +682,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 +729,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 +815,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 +830,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 +841,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 +884,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 +943,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 +966,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 +987,6 @@ function compileHtmlLine(line, actionNames, rpcNameMap) {
                     else {
                         result += ` data-refresh="\${__esc(${inner})}"`;
                     }
-                    hasExpr = true;
                     pos = closeIdx + 1;
                     continue;
                 }
@@ -737,7 +1004,6 @@ function compileHtmlLine(line, actionNames, rpcNameMap) {
                     else {
                         result += ` ${attrName}="${escapeLiteral(inner)}"`;
                     }
-                    hasExpr = true;
                     pos = closeIdx + 1;
                     continue;
                 }
@@ -759,12 +1025,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-id="stable-id"
+                    // data-poll={fn(args)} → data-poll="fnName" data-poll-args="[serialized]" data-poll-id="signed-id"
                     const pollCallMatch = inner.match(/^(\w+)\((.*)\)$/);
                     if (pollCallMatch) {
                         const fnName = pollCallMatch[1];
@@ -772,19 +1037,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, data-poll-args, and stable data-poll-id (based on fn + args expression)
+                        // Emit data-poll, data-poll-args, and signed data-poll-id (signed at runtime for security)
                         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, '_'))}"`;
+                            // Sign the fragment ID at runtime with __signFragment(fragmentId, routePath)
+                            result += ` data-poll-id="\${__signFragment('__poll_' + String(${argsExpr}).replace(/[^a-zA-Z0-9]/g, '_'))}"`;
                         }
                         else {
-                            // No args - use function name as ID
-                            result += ` data-poll-id="__poll_${rpcName}"`;
+                            // No args - sign with function name as base ID
+                            result += ` data-poll-id="\${__signFragment('__poll_${rpcName}')}"`;
                         }
                     }
-                    hasExpr = true;
                     pos = closeIdx + 1;
                     continue;
                 }
@@ -798,25 +1062,17 @@ function compileHtmlLine(line, actionNames, rpcNameMap) {
                     if (!isServerAction) {
                         throw new Error(`Invalid action expression: "${inner}". Use action={myActionFn} for server actions.`);
                     }
-                    // Remove trailing `action=` from output and inject _action hidden field.
+                    // Remove trailing `action=` from output and inject _action hidden field + CSRF token.
                     result = result.replace(/\s*action=$/, '');
+                    const actionValue = actionNames === undefined
+                        ? `\${__esc(${inner})}`
+                        : inner;
+                    // Inject both _action and _csrf hidden fields for server action forms
+                    pendingActionHiddenInput = `\\n<input type="hidden" name="_action" value="${actionValue}">\\n<input type="hidden" name="_csrf" value="\${__getCsrfToken()}">`;
                     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+)\((.*)\)$/);
@@ -831,12 +1087,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;
                 }
@@ -852,17 +1121,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) {
@@ -942,4 +1208,4 @@ export function generateRenderFunction(template) {
   ${body}
 }`;
 }
-import { transpileTypeScript } from './transpile.js';
+// TypeScript transpilation removed — wrangler's esbuild handles it

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;