@kuratchi/js 0.0.1

package/dist/compiler/parser.d.ts

@@ -0,0 +1,40 @@
+/**
+ * HTML file parser.
+ *
+ * Extracts the top-level <script> block (before the HTML document).
+ * Everything else is the template — full HTML with native JS flow control.
+ * <style> inside the HTML is NOT extracted; it's part of the template.
+ */
+export interface ParsedFile {
+    /** Script content (the server-side code, minus imports) */
+    script: string | null;
+    /** Template — the full HTML document with inline JS flow control */
+    template: string;
+    /** All imports from the script block */
+    serverImports: string[];
+    /** Whether the script has server-side code (beyond imports) */
+    hasLoad: boolean;
+    /** Action functions referenced via action={fn} in the template */
+    actionFunctions: string[];
+    /** Top-level variable names declared in the script (const/let/var) */
+    dataVars: string[];
+    /** Component imports: import Name from '$lib/file.html' → { Name: 'file' } */
+    componentImports: Record<string, string>;
+    /** Poll functions referenced via data-poll={fn(args)} in the template */
+    pollFunctions: string[];
+    /** Query blocks referenced via data-get={fn(args)} data-as="name" */
+    dataGetQueries: Array<{
+        fnName: string;
+        argsExpr: string;
+        asName: string;
+        key?: string;
+        rpcId?: string;
+    }>;
+}
+/**
+ * Parse a .html route file.
+ *
+ * The <script> block at the top is extracted for the compiler.
+ * Everything else (the HTML document) becomes the template.
+ */
+export declare function parseFile(source: string): ParsedFile;

package/dist/compiler/parser.js

@@ -0,0 +1,534 @@
+/**
+ * HTML file parser.
+ *
+ * Extracts the top-level <script> block (before the HTML document).
+ * Everything else is the template — full HTML with native JS flow control.
+ * <style> inside the HTML is NOT extracted; it's part of the template.
+ */
+function splitTopLevel(input, delimiter) {
+    const parts = [];
+    let start = 0;
+    let depthParen = 0;
+    let depthBracket = 0;
+    let depthBrace = 0;
+    let quote = null;
+    let escaped = false;
+    for (let i = 0; i < input.length; i++) {
+        const ch = input[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 === '(')
+            depthParen++;
+        else if (ch === ')')
+            depthParen = Math.max(0, depthParen - 1);
+        else if (ch === '[')
+            depthBracket++;
+        else if (ch === ']')
+            depthBracket = Math.max(0, depthBracket - 1);
+        else if (ch === '{')
+            depthBrace++;
+        else if (ch === '}')
+            depthBrace = Math.max(0, depthBrace - 1);
+        else if (ch === delimiter && depthParen === 0 && depthBracket === 0 && depthBrace === 0) {
+            parts.push(input.slice(start, i));
+            start = i + 1;
+        }
+    }
+    parts.push(input.slice(start));
+    return parts;
+}
+function findTopLevelChar(input, target) {
+    let depthParen = 0;
+    let depthBracket = 0;
+    let depthBrace = 0;
+    let quote = null;
+    let escaped = false;
+    for (let i = 0; i < input.length; i++) {
+        const ch = input[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 === '(')
+            depthParen++;
+        else if (ch === ')')
+            depthParen = Math.max(0, depthParen - 1);
+        else if (ch === '[')
+            depthBracket++;
+        else if (ch === ']')
+            depthBracket = Math.max(0, depthBracket - 1);
+        else if (ch === '{')
+            depthBrace++;
+        else if (ch === '}')
+            depthBrace = Math.max(0, depthBrace - 1);
+        else if (ch === target && depthParen === 0 && depthBracket === 0 && depthBrace === 0) {
+            return i;
+        }
+    }
+    return -1;
+}
+function pushIdentifier(name, out) {
+    if (!name)
+        return;
+    if (!/^[A-Za-z_$][\w$]*$/.test(name))
+        return;
+    if (!out.includes(name))
+        out.push(name);
+}
+function collectPatternNames(pattern, out) {
+    const p = pattern.trim();
+    if (!p)
+        return;
+    if (p.startsWith('{') && p.endsWith('}')) {
+        const body = p.slice(1, -1);
+        for (const partRaw of splitTopLevel(body, ',')) {
+            let part = partRaw.trim();
+            if (!part)
+                continue;
+            if (part.startsWith('...'))
+                part = part.slice(3).trim();
+            const eqIdx = part.indexOf('=');
+            if (eqIdx !== -1)
+                part = part.slice(0, eqIdx).trim();
+            const colonIdx = part.indexOf(':');
+            if (colonIdx !== -1) {
+                const rhs = part.slice(colonIdx + 1).trim();
+                collectPatternNames(rhs, out);
+            }
+            else {
+                pushIdentifier(part, out);
+            }
+        }
+        return;
+    }
+    if (p.startsWith('[') && p.endsWith(']')) {
+        const body = p.slice(1, -1);
+        for (const partRaw of splitTopLevel(body, ',')) {
+            let part = partRaw.trim();
+            if (!part)
+                continue;
+            if (part.startsWith('...'))
+                part = part.slice(3).trim();
+            const eqIdx = part.indexOf('=');
+            if (eqIdx !== -1)
+                part = part.slice(0, eqIdx).trim();
+            collectPatternNames(part, out);
+        }
+        return;
+    }
+    const eqIdx = p.indexOf('=');
+    const ident = (eqIdx === -1 ? p : p.slice(0, eqIdx)).trim();
+    pushIdentifier(ident, out);
+}
+function isBoundaryChar(ch) {
+    if (!ch)
+        return true;
+    return !/[A-Za-z0-9_$]/.test(ch);
+}
+function extractTopLevelDataVars(scriptBody) {
+    const vars = [];
+    let i = 0;
+    let depthParen = 0;
+    let depthBracket = 0;
+    let depthBrace = 0;
+    let quote = null;
+    let escaped = false;
+    let inLineComment = false;
+    let inBlockComment = false;
+    while (i < scriptBody.length) {
+        const ch = scriptBody[i];
+        const next = scriptBody[i + 1];
+        if (inLineComment) {
+            if (ch === '\n')
+                inLineComment = false;
+            i++;
+            continue;
+        }
+        if (inBlockComment) {
+            if (ch === '*' && next === '/') {
+                inBlockComment = false;
+                i += 2;
+                continue;
+            }
+            i++;
+            continue;
+        }
+        if (quote) {
+            if (escaped) {
+                escaped = false;
+                i++;
+                continue;
+            }
+            if (ch === '\\') {
+                escaped = true;
+                i++;
+                continue;
+            }
+            if (ch === quote)
+                quote = null;
+            i++;
+            continue;
+        }
+        if (ch === '/' && next === '/') {
+            inLineComment = true;
+            i += 2;
+            continue;
+        }
+        if (ch === '/' && next === '*') {
+            inBlockComment = true;
+            i += 2;
+            continue;
+        }
+        if (ch === '"' || ch === "'" || ch === '`') {
+            quote = ch;
+            i++;
+            continue;
+        }
+        if (ch === '(')
+            depthParen++;
+        else if (ch === ')')
+            depthParen = Math.max(0, depthParen - 1);
+        else if (ch === '[')
+            depthBracket++;
+        else if (ch === ']')
+            depthBracket = Math.max(0, depthBracket - 1);
+        else if (ch === '{')
+            depthBrace++;
+        else if (ch === '}')
+            depthBrace = Math.max(0, depthBrace - 1);
+        const atTopLevel = depthParen === 0 && depthBracket === 0 && depthBrace === 0;
+        if (!atTopLevel) {
+            i++;
+            continue;
+        }
+        const remaining = scriptBody.slice(i);
+        const match = /^(const|let|var)\b/.exec(remaining);
+        if (!match) {
+            i++;
+            continue;
+        }
+        const keyword = match[1];
+        const before = scriptBody[i - 1];
+        const after = scriptBody[i + keyword.length];
+        if (!isBoundaryChar(before) || !isBoundaryChar(after)) {
+            i++;
+            continue;
+        }
+        i += keyword.length;
+        let declStart = i;
+        let localParen = 0;
+        let localBracket = 0;
+        let localBrace = 0;
+        let localQuote = null;
+        let localEscaped = false;
+        while (i < scriptBody.length) {
+            const c = scriptBody[i];
+            if (localQuote) {
+                if (localEscaped) {
+                    localEscaped = false;
+                    i++;
+                    continue;
+                }
+                if (c === '\\') {
+                    localEscaped = true;
+                    i++;
+                    continue;
+                }
+                if (c === localQuote)
+                    localQuote = null;
+                i++;
+                continue;
+            }
+            if (c === '"' || c === "'" || c === '`') {
+                localQuote = c;
+                i++;
+                continue;
+            }
+            if (c === '(')
+                localParen++;
+            else if (c === ')')
+                localParen = Math.max(0, localParen - 1);
+            else if (c === '[')
+                localBracket++;
+            else if (c === ']')
+                localBracket = Math.max(0, localBracket - 1);
+            else if (c === '{')
+                localBrace++;
+            else if (c === '}')
+                localBrace = Math.max(0, localBrace - 1);
+            if (c === ';' && localParen === 0 && localBracket === 0 && localBrace === 0) {
+                const decl = scriptBody.slice(declStart, i).trim();
+                for (const item of splitTopLevel(decl, ',')) {
+                    const trimmed = item.trim();
+                    if (!trimmed)
+                        continue;
+                    const eqIdx = findTopLevelChar(trimmed, '=');
+                    const pattern = eqIdx === -1 ? trimmed : trimmed.slice(0, eqIdx).trim();
+                    collectPatternNames(pattern, vars);
+                }
+                i++;
+                break;
+            }
+            i++;
+        }
+        // Semicolon-less declaration at EOF
+        if (i >= scriptBody.length) {
+            const decl = scriptBody.slice(declStart).trim();
+            for (const item of splitTopLevel(decl, ',')) {
+                const trimmed = item.trim();
+                if (!trimmed)
+                    continue;
+                const eqIdx = findTopLevelChar(trimmed, '=');
+                const pattern = eqIdx === -1 ? trimmed : trimmed.slice(0, eqIdx).trim();
+                collectPatternNames(pattern, vars);
+            }
+        }
+    }
+    return vars;
+}
+function extractTopLevelFunctionNames(scriptBody) {
+    const names = [];
+    let i = 0;
+    let depthParen = 0;
+    let depthBracket = 0;
+    let depthBrace = 0;
+    let quote = null;
+    let escaped = false;
+    let inLineComment = false;
+    let inBlockComment = false;
+    while (i < scriptBody.length) {
+        const ch = scriptBody[i];
+        const next = scriptBody[i + 1];
+        if (inLineComment) {
+            if (ch === '\n')
+                inLineComment = false;
+            i++;
+            continue;
+        }
+        if (inBlockComment) {
+            if (ch === '*' && next === '/') {
+                inBlockComment = false;
+                i += 2;
+                continue;
+            }
+            i++;
+            continue;
+        }
+        if (quote) {
+            if (escaped) {
+                escaped = false;
+                i++;
+                continue;
+            }
+            if (ch === '\\') {
+                escaped = true;
+                i++;
+                continue;
+            }
+            if (ch === quote)
+                quote = null;
+            i++;
+            continue;
+        }
+        if (ch === '/' && next === '/') {
+            inLineComment = true;
+            i += 2;
+            continue;
+        }
+        if (ch === '/' && next === '*') {
+            inBlockComment = true;
+            i += 2;
+            continue;
+        }
+        if (ch === '"' || ch === "'" || ch === '`') {
+            quote = ch;
+            i++;
+            continue;
+        }
+        if (ch === '(')
+            depthParen++;
+        else if (ch === ')')
+            depthParen = Math.max(0, depthParen - 1);
+        else if (ch === '[')
+            depthBracket++;
+        else if (ch === ']')
+            depthBracket = Math.max(0, depthBracket - 1);
+        else if (ch === '{')
+            depthBrace++;
+        else if (ch === '}')
+            depthBrace = Math.max(0, depthBrace - 1);
+        if (depthParen === 0 && depthBracket === 0 && depthBrace === 0) {
+            const rest = scriptBody.slice(i);
+            const fnMatch = /^(?:async\s+)?function\s+([A-Za-z_$][\w$]*)\s*\(/.exec(rest);
+            if (fnMatch) {
+                pushIdentifier(fnMatch[1], names);
+                i += fnMatch[0].length;
+                continue;
+            }
+        }
+        i++;
+    }
+    return names;
+}
+/**
+ * Parse a .html route file.
+ *
+ * The <script> block at the top is extracted for the compiler.
+ * Everything else (the HTML document) becomes the template.
+ */
+export function parseFile(source) {
+    let script = null;
+    let template = source;
+    // Extract the first <script>...</script> block (the server-side framework script)
+    // Only match if it appears before any HTML document content
+    const scriptMatch = template.match(/^(\s*)<script(\s[^>]*)?\s*>([\s\S]*?)<\/script>/);
+    if (scriptMatch) {
+        script = scriptMatch[3].trim();
+        template = template.slice(scriptMatch[0].length).trim();
+    }
+    // Extract all imports from script
+    const serverImports = [];
+    const componentImports = {};
+    if (script) {
+        // Support both single-line and multiline static imports.
+        const importRegex = /^\s*import[\s\S]*?from\s+['"][^'"]+['"]\s*;?/gm;
+        let m;
+        while ((m = importRegex.exec(script)) !== null) {
+            const line = m[0].trim();
+            // Check for component imports: import Name from '$lib/file.html' or '@kuratchi/ui/file.html'
+            const libMatch = line.match(/import\s+([A-Za-z_$][\w$]*)\s+from\s+['"]\$lib\/([^'"]+\.html)['"]/s);
+            const pkgMatch = !libMatch ? line.match(/import\s+([A-Za-z_$][\w$]*)\s+from\s+['"](@[^/'"]+\/[^/'"]+)\/([^'"]+\.html)['"]/s) : null;
+            if (libMatch) {
+                const componentName = libMatch[1]; // e.g. "StatCard"
+                const fileName = libMatch[2].replace('.html', ''); // e.g. "stat-card"
+                componentImports[componentName] = fileName;
+            }
+            else if (pkgMatch) {
+                const componentName = pkgMatch[1]; // e.g. "Badge"
+                const pkg = pkgMatch[2]; // e.g. "@kuratchi/ui"
+                const fileName = pkgMatch[3].replace('.html', ''); // e.g. "badge"
+                componentImports[componentName] = `${pkg}:${fileName}`; // e.g. "@kuratchi/ui:badge"
+            }
+            else {
+                serverImports.push(line);
+            }
+        }
+    }
+    // Extract top-level variable declarations from script body (after removing imports)
+    const dataVars = [];
+    let scriptBody = '';
+    if (script) {
+        // Remove import lines to get the script body
+        scriptBody = script.replace(/^\s*import[\s\S]*?from\s+['"][^'"]+['"]\s*;?/gm, '').trim();
+        const topLevelVars = extractTopLevelDataVars(scriptBody);
+        for (const v of topLevelVars)
+            dataVars.push(v);
+        const topLevelFns = extractTopLevelFunctionNames(scriptBody);
+        for (const fn of topLevelFns) {
+            if (!dataVars.includes(fn))
+                dataVars.push(fn);
+        }
+    }
+    const hasLoad = scriptBody.length > 0;
+    // Strip HTML comments from the template before scanning for action references.
+    // This prevents commented-out code (<!-- ... -->) from being parsed as live
+    // action expressions, which would cause false "Invalid action expression" errors.
+    const templateWithoutComments = template.replace(/<!--[\s\S]*?-->/g, '');
+    // Extract action functions referenced in template: action={fnName}
+    const actionFunctions = [];
+    const actionRegex = /action=\{(\w+)\}/g;
+    let am;
+    while ((am = actionRegex.exec(templateWithoutComments)) !== null) {
+        if (!actionFunctions.includes(am[1])) {
+            actionFunctions.push(am[1]);
+        }
+    }
+    // Also collect onX={fnName(...)} candidates (e.g. onclick, onClick, onChange)
+    // — the compiler will filter these against actual imports to determine server actions.
+    const eventActionRegex = /on[A-Za-z]+\s*=\{(\w+)\s*\(/g;
+    let em;
+    while ((em = eventActionRegex.exec(templateWithoutComments)) !== null) {
+        if (!actionFunctions.includes(em[1])) {
+            actionFunctions.push(em[1]);
+        }
+    }
+    // Collect method-style action attributes: data-post/data-put/data-patch/data-delete
+    const methodActionRegex = /data-(?:post|put|patch|delete)\s*=\{(\w+)\s*\(/g;
+    let mm;
+    while ((mm = methodActionRegex.exec(templateWithoutComments)) !== null) {
+        if (!actionFunctions.includes(mm[1])) {
+            actionFunctions.push(mm[1]);
+        }
+    }
+    // Extract poll functions referenced in template: data-poll={fnName(args)}
+    const pollFunctions = [];
+    const pollRegex = /data-poll=\{(\w+)\s*\(/g;
+    let pm;
+    while ((pm = pollRegex.exec(templateWithoutComments)) !== null) {
+        if (!pollFunctions.includes(pm[1])) {
+            pollFunctions.push(pm[1]);
+        }
+    }
+    // Extract query blocks: tags that include both data-get={fn(args)} and data-as=...
+    const dataGetQueries = [];
+    const tagRegex = /<[^>]+>/g;
+    let tm;
+    while ((tm = tagRegex.exec(templateWithoutComments)) !== null) {
+        const tag = tm[0];
+        const getMatch = tag.match(/\bdata-get=\{([\s\S]*?)\}/);
+        if (!getMatch)
+            continue;
+        const call = getMatch[1].trim();
+        const callMatch = call.match(/^([A-Za-z_$][\w$]*)\(([\s\S]*)\)$/);
+        if (!callMatch)
+            continue;
+        const fnName = callMatch[1];
+        const argsExpr = (callMatch[2] || '').trim();
+        const asMatch = tag.match(/\bdata-as="([A-Za-z_$][\w$]*)"/) ||
+            tag.match(/\bdata-as='([A-Za-z_$][\w$]*)'/) ||
+            tag.match(/\bdata-as=\{([A-Za-z_$][\w$]*)\}/);
+        if (!asMatch)
+            continue;
+        const asName = asMatch[1];
+        const keyMatch = tag.match(/\bdata-key="([^"]+)"/) ||
+            tag.match(/\bdata-key='([^']+)'/) ||
+            tag.match(/\bdata-key=\{([^}]+)\}/);
+        const key = keyMatch?.[1]?.trim() || asName;
+        if (!pollFunctions.includes(fnName))
+            pollFunctions.push(fnName);
+        if (!dataVars.includes(asName))
+            dataVars.push(asName);
+        const exists = dataGetQueries.some((q) => q.asName === asName);
+        if (!exists)
+            dataGetQueries.push({ fnName, argsExpr, asName, key });
+    }
+    return { script, template, serverImports, hasLoad, actionFunctions, dataVars, componentImports, pollFunctions, dataGetQueries };
+}

package/dist/compiler/template.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Template compiler — native JS flow control in HTML.
+ *
+ * Syntax:
+ *   {expression}                → escaped output
+ *   {=html expression}          → raw HTML output (unescaped)
+ *   for (const x of arr) {     → JS for loop (inline in HTML)
+ *     <li>{x.name}</li>
+ *   }
+ *   if (condition) {            → JS if block
+ *     <p>yes</p>
+ *   } else {
+ *     <p>no</p>
+ *   }
+ *
+ * The compiler scans line-by-line:
+ *   - Lines that are pure JS control flow (for/if/else/}) → emitted as JS
+ *   - Everything else → emitted as HTML string with {expr} interpolation
+ */
+/**
+ * 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 declare function compileTemplate(template: string, componentNames?: Map<string, string>, actionNames?: Set<string>, rpcNameMap?: Map<string, string>): string;
+/**
+ * Generate the full render function source code.
+ */
+export declare function generateRenderFunction(template: string): string;