@meekojs/meeko 0.0.0-stage → 0.0.1

package/dist/compiler.js

@@ -0,0 +1,404 @@
+import { createHash } from "node:crypto";
+import { basename } from "node:path";
+import ts from "@typescript/typescript6";
+import postcss from "postcss";
+import selectorParser from "postcss-selector-parser";
+import { extractSourceMappings, markSource } from "./compiler/mapping.js";
+import { compileError, locate, parseSfc } from "./compiler/sfc.js";
+import { parseTemplate } from "./compiler/template.js";
+function emptyBindings() {
+    return { texts: [], events: [], attributes: [], components: [], regions: [] };
+}
+function quote(value) {
+    return JSON.stringify(value);
+}
+function validateExpression(expression, source, filename, offset) {
+    const prefix = "const __check = (";
+    const parsed = ts.createSourceFile(filename, `${prefix}${expression});`, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+    const error = parsed.parseDiagnostics[0];
+    if (error) {
+        const position = Math.max(0, Math.min(expression.length, (error.start ?? prefix.length) - prefix.length));
+        throw compileError(source, filename, "MEEK020", ts.flattenDiagnosticMessageText(error.messageText, "\n"), offset + position);
+    }
+}
+function attributeValueOffset(node, name, context) {
+    const position = node.sourceCodeLocation?.attrs?.[name];
+    if (!position)
+        return context.templateOffset + (node.sourceCodeLocation?.startOffset ?? 0);
+    const raw = context.source.slice(context.templateOffset + position.startOffset, context.templateOffset + position.endOffset);
+    const equals = raw.indexOf("=");
+    if (equals < 0)
+        return context.templateOffset + position.startOffset;
+    const after = raw.slice(equals + 1);
+    const whitespace = after.length - after.trimStart().length;
+    const quoteStart = equals + 1 + whitespace;
+    const quoted = raw[quoteStart] === '"' || raw[quoteStart] === "'";
+    return context.templateOffset + position.startOffset + quoteStart + (quoted ? 1 : 0);
+}
+function rewriteLocals(expression, locals) {
+    if (locals.size === 0)
+        return expression;
+    const prefix = "const __value = (";
+    const file = ts.createSourceFile("template-expression.ts", `${prefix}${expression});`, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+    const changes = [];
+    function isShadowed(node) {
+        for (let parent = node.parent; parent; parent = parent.parent) {
+            if ((ts.isArrowFunction(parent) || ts.isFunctionExpression(parent)) && parent.parameters.some((parameter) => ts.isIdentifier(parameter.name) && parameter.name.text === node.text))
+                return true;
+            if (ts.isSourceFile(parent))
+                break;
+        }
+        return false;
+    }
+    function visit(node) {
+        if (ts.isIdentifier(node)) {
+            const replacement = locals.get(node.text);
+            const parent = node.parent;
+            if (replacement && parent && !isShadowed(node)
+                && !(ts.isPropertyAccessExpression(parent) && parent.name === node)
+                && !(ts.isPropertyAssignment(parent) && parent.name === node)
+                && !(ts.isParameter(parent) && parent.name === node)
+                && !(ts.isVariableDeclaration(parent) && parent.name === node)) {
+                const shorthand = ts.isShorthandPropertyAssignment(parent) && parent.name === node;
+                changes.push({ start: node.getStart(file) - prefix.length, end: node.getEnd() - prefix.length, text: shorthand ? `${node.text}: (${replacement})` : `(${replacement})` });
+            }
+        }
+        ts.forEachChild(node, visit);
+    }
+    visit(file);
+    let result = expression;
+    for (const change of changes.reverse()) {
+        if (change.start >= 0 && change.end <= expression.length)
+            result = result.slice(0, change.start) + change.text + result.slice(change.end);
+    }
+    return result;
+}
+function textParts(value, bindings, context, offset) {
+    const parts = [];
+    const pattern = /\{([^{}]+)\}/g;
+    let cursor = 0;
+    for (const match of value.matchAll(pattern)) {
+        const index = match.index;
+        const staticPart = value.slice(cursor, index);
+        if (staticPart)
+            parts.push(`__meeko.escapeHtml(${quote(staticPart)})`);
+        const rawExpression = match[1] ?? "";
+        const expression = rawExpression.trim();
+        if (!expression)
+            throw compileError(context.source, context.filename, "MEEK009", "Empty template expression", offset + index);
+        validateExpression(expression, context.source, context.filename, offset + index + 1 + rawExpression.indexOf(expression));
+        const id = context.nextText++;
+        const expressionOffset = offset + index + 1 + rawExpression.indexOf(expression);
+        bindings.texts.push({ id, expression, offset: expressionOffset });
+        parts.push(`${quote(`<!--meeko:text:${id}-->`)} + __meeko.escapeHtml(${markSource(expression, expressionOffset)}) + ${quote(`<!--/meeko:text:${id}-->`)}`);
+        cursor = index + match[0].length;
+    }
+    const tail = value.slice(cursor);
+    if (tail.includes("{"))
+        throw compileError(context.source, context.filename, "MEEK010", "Unclosed template expression", offset + cursor + tail.indexOf("{"));
+    if (tail)
+        parts.push(`__meeko.escapeHtml(${quote(tail)})`);
+    return parts;
+}
+function renderNode(node, bindings, context) {
+    if (node.nodeName === "#text") {
+        return textParts(node.value ?? "", bindings, context, context.templateOffset + (node.sourceCodeLocation?.startOffset ?? 0)).join(" + ") || quote("");
+    }
+    if (node.nodeName === "#comment")
+        return quote(`<!--${node.value ?? ""}-->`);
+    if (!node.tagName)
+        return (node.childNodes ?? []).map((child) => renderNode(child, bindings, context)).join(" + ") || quote("");
+    const attrsList = node.attrs ?? [];
+    const position = context.templateOffset + (node.sourceCodeLocation?.startOffset ?? 0);
+    const condition = attrsList.find((attribute) => attribute.name === "if:when");
+    const list = attrsList.find((attribute) => attribute.name === "each:of");
+    if (condition && list)
+        throw compileError(context.source, context.filename, "MEEK021", "A node cannot have both if:when and each:of", position);
+    if (condition || list) {
+        const inner = emptyBindings();
+        const excluded = new Set(condition ? ["if:when"] : ["each:of", "each:as", "each:key", "each:index"]);
+        const clone = { ...node, attrs: attrsList.filter((attribute) => !excluded.has(attribute.name)) };
+        const html = renderNodeContent(clone, inner, context);
+        const id = context.nextRegion++;
+        if (condition) {
+            const offset = attributeValueOffset(node, "if:when", context);
+            validateExpression(condition.value, context.source, context.filename, offset);
+            bindings.regions.push({ kind: "condition", id, expression: condition.value, offset, render: html, bindings: inner });
+            return `__meeko.renderIf(${id}, ${markSource(condition.value, offset)}, () => ${html})`;
+        }
+        const itemName = attrsList.find((attribute) => attribute.name === "each:as")?.value;
+        const key = attrsList.find((attribute) => attribute.name === "each:key")?.value;
+        const indexName = attrsList.find((attribute) => attribute.name === "each:index")?.value ?? "index";
+        if (!itemName || !/^[a-zA-Z_$][\w$]*$/.test(itemName) || itemName.startsWith("__") || !/^[a-zA-Z_$][\w$]*$/.test(indexName) || indexName.startsWith("__") || itemName === indexName) {
+            throw compileError(context.source, context.filename, "MEEK022", "A list needs valid, distinct each:as and each:index identifiers", position);
+        }
+        if (!key)
+            throw compileError(context.source, context.filename, "MEEK023", "A list requires each:key", position);
+        const offset = attributeValueOffset(node, "each:of", context);
+        const keyOffset = attributeValueOffset(node, "each:key", context);
+        validateExpression(list.value, context.source, context.filename, offset);
+        validateExpression(key, context.source, context.filename, keyOffset);
+        bindings.regions.push({ kind: "list", id, expression: list.value, offset, key, keyOffset, itemName, indexName, render: html, bindings: inner });
+        return `__meeko.renderFor(${id}, ${markSource(list.value, offset)}, (${itemName}, ${indexName}) => ${markSource(key, keyOffset)}, (${itemName}, ${indexName}) => ${html})`;
+    }
+    if (attrsList.some((attribute) => attribute.name.startsWith("each:") || attribute.name.startsWith("if:"))) {
+        throw compileError(context.source, context.filename, "MEEK024", "Incomplete template directive", position);
+    }
+    return renderNodeContent(node, bindings, context);
+}
+function renderNodeContent(node, bindings, context) {
+    if (node.tagName === "template") {
+        return (node.content?.childNodes ?? []).map((child) => renderNode(child, bindings, context)).join(" + ") || quote("");
+    }
+    if (node.tagName === "component") {
+        const position = node.start;
+        const referenceAttribute = node.attrs?.find((attribute) => attribute.name === "is");
+        const reference = referenceAttribute?.value ?? "";
+        if (!/^[a-zA-Z_$][\w$]*$/.test(reference) || reference.startsWith("__")) {
+            throw compileError(context.source, context.filename, "MEEK030", "A component requires is=\"ImportedComponent\"", position);
+        }
+        if ((node.childNodes ?? []).some((child) => child.nodeName !== "#text" || Boolean(child.value?.trim()))) {
+            throw compileError(context.source, context.filename, "MEEK031", "Component children are not supported; close the tag without content", position);
+        }
+        const props = [];
+        for (const attribute of node.attrs ?? []) {
+            if (attribute.name === "is")
+                continue;
+            const rawName = /^[^\s=]+/.exec(context.source.slice(attribute.start, attribute.end))?.[0] ?? attribute.name;
+            if (!rawName.startsWith("bind:") || !/^[a-zA-Z_$][\w$]*$/.test(rawName.slice(5))) {
+                throw compileError(context.source, context.filename, "MEEK032", "Component props must use bind:prop=\"expression\"", attribute.start);
+            }
+            const name = rawName.slice(5);
+            const offset = attributeValueOffset(node, attribute.name, context);
+            validateExpression(attribute.value, context.source, context.filename, offset);
+            props.push({ name, nameOffset: attribute.start + 5, expression: attribute.value, offset });
+        }
+        const id = context.nextRegion++;
+        const referenceOffset = attributeValueOffset(node, "is", context);
+        bindings.components.push({ id, reference, referenceOffset, props, offset: position });
+        const mappedProps = props.map((prop) => `${markSource(quote(prop.name), prop.nameOffset, prop.name.length)}: ${markSource(prop.expression, prop.offset)}`);
+        const object = markSource(`{ ${mappedProps.join(", ")} }`, position, node.end - position);
+        return `__meeko.renderComponent(${id}, ${markSource(reference, referenceOffset)}, ${object}, __meeko_transfer)`;
+    }
+    const tag = node.tagName;
+    const attrs = [];
+    for (const attr of node.attrs ?? []) {
+        if (attr.name.startsWith("on:")) {
+            const name = attr.name.slice(3);
+            if (!/^[a-z]+$/.test(name))
+                throw compileError(context.source, context.filename, "MEEK011", `Invalid event name: ${name}`, context.templateOffset + (node.sourceCodeLocation?.startOffset ?? 0));
+            const id = context.nextEvent++;
+            const offset = attributeValueOffset(node, attr.name, context);
+            validateExpression(attr.value, context.source, context.filename, offset);
+            bindings.events.push({ id, name, expression: attr.value, offset });
+            attrs.push({ kind: "static", value: ` data-meeko-e-${id}=""` });
+        }
+        else if (attr.name.startsWith("bind:")) {
+            const name = attr.name.slice(5);
+            if (!/^[a-z][a-z0-9:.-]*$/.test(name) || name.startsWith("on")) {
+                throw compileError(context.source, context.filename, "MEEK012", `Invalid dynamic attribute: ${name}`, context.templateOffset + (node.sourceCodeLocation?.startOffset ?? 0));
+            }
+            const offset = attributeValueOffset(node, attr.name, context);
+            validateExpression(attr.value, context.source, context.filename, offset);
+            const id = context.nextAttribute++;
+            bindings.attributes.push({ id, name, expression: attr.value, offset });
+            attrs.push({ kind: "static", value: ` data-meeko-a-${id}=""` });
+            attrs.push({ kind: "dynamic", expression: `__meeko.renderAttribute(${quote(name)}, ${markSource(attr.value, offset)})` });
+        }
+        else if (attr.name.startsWith(":")) {
+            throw compileError(context.source, context.filename, "MEEK012", `Unsupported template directive: ${attr.name}`, context.templateOffset + (node.sourceCodeLocation?.startOffset ?? 0));
+        }
+        else {
+            attrs.push({ kind: "static", value: ` ${attr.name}="${escapeAttribute(attr.value)}"` });
+        }
+    }
+    if (context.scopeAttribute)
+        attrs.push({ kind: "static", value: ` ${context.scopeAttribute}=""` });
+    const openingParts = [quote(`<${tag}`)];
+    for (const attr of attrs) {
+        if (attr.kind === "dynamic")
+            openingParts.push(attr.expression);
+        else
+            openingParts.push(quote(attr.value));
+    }
+    openingParts.push(quote(">"));
+    const opening = openingParts.join(" + ");
+    const voidElements = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
+    if (voidElements.has(tag))
+        return opening;
+    const children = (node.childNodes ?? []).map((child) => renderNode(child, bindings, context));
+    return [opening, ...children, quote(`</${tag}>`)].join(" + ");
+}
+function escapeAttribute(value) {
+    return value.replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;");
+}
+function scopeCss(css, scopeAttribute) {
+    const root = postcss.parse(css);
+    root.walkRules((rule) => {
+        let parent = rule.parent;
+        while (parent) {
+            if (parent.type === "atrule" && /keyframes$/i.test(parent.name))
+                return;
+            parent = parent.parent;
+        }
+        if (rule.selector.includes(":global"))
+            throw rule.error(":global is not supported in scoped styles yet", { index: rule.selector.indexOf(":global") });
+        rule.selector = selectorParser((selectors) => {
+            selectors.each((selector) => {
+                const pseudoElement = selector.nodes.find((node) => node.type === "pseudo" && node.value.startsWith("::"));
+                const attribute = selectorParser.attribute({ attribute: scopeAttribute, value: undefined, raws: {} });
+                if (pseudoElement)
+                    selector.insertBefore(pseudoElement, attribute);
+                else
+                    selector.append(attribute);
+            });
+        }).processSync(rule.selector);
+    });
+    return root.toString();
+}
+function compileScript(section, source, filename) {
+    const file = ts.createSourceFile(filename, section.content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+    const syntaxError = file.parseDiagnostics[0];
+    if (syntaxError) {
+        const message = ts.flattenDiagnosticMessageText(syntaxError.messageText, "\n");
+        throw compileError(source, filename, "MEEK013", message, section.contentStart + (syntaxError.start ?? 0));
+    }
+    const imports = [];
+    const types = [];
+    const setup = [];
+    const names = [];
+    let propsType;
+    let propsTypeOffset;
+    for (const statement of file.statements) {
+        if (ts.isImportDeclaration(statement)) {
+            imports.push(markSource(statement.getText(file), section.contentStart + statement.getStart(file)));
+            continue;
+        }
+        if (ts.isInterfaceDeclaration(statement) || ts.isTypeAliasDeclaration(statement)) {
+            types.push(markSource(statement.getText(file), section.contentStart + statement.getStart(file)));
+            continue;
+        }
+        if (ts.isVariableStatement(statement)) {
+            if (statement.declarationList.declarations.length !== 1)
+                throw compileError(source, filename, "MEEK014", "Declare one variable per statement in .meeko scripts", section.contentStart + statement.getStart(file));
+            for (const declaration of statement.declarationList.declarations) {
+                if (!ts.isIdentifier(declaration.name))
+                    throw compileError(source, filename, "MEEK015", "Only simple variable declarations are supported in .meeko scripts", section.contentStart + declaration.getStart(file));
+                const name = declaration.name.text;
+                names.push(name);
+                if (declaration.initializer && ts.isCallExpression(declaration.initializer) && declaration.initializer.expression.getText(file) === "defineProps") {
+                    if (propsType)
+                        throw compileError(source, filename, "MEEK016", "defineProps must appear once in its own declaration", section.contentStart + declaration.getStart(file));
+                    const typeArgument = declaration.initializer.typeArguments?.[0];
+                    propsType = typeArgument?.getText(file);
+                    if (!propsType)
+                        throw compileError(source, filename, "MEEK017", "defineProps requires a type argument", section.contentStart + declaration.getStart(file));
+                    propsTypeOffset = section.contentStart + typeArgument.getStart(file);
+                    setup.push(`const ${name}: ${markSource(propsType, propsTypeOffset)} = __props;`);
+                }
+                else {
+                    setup.push(markSource(statement.getText(file), section.contentStart + statement.getStart(file)));
+                }
+            }
+            continue;
+        }
+        if (ts.isFunctionDeclaration(statement) && statement.name) {
+            names.push(statement.name.text);
+            setup.push(markSource(statement.getText(file), section.contentStart + statement.getStart(file)));
+            continue;
+        }
+        throw compileError(source, filename, "MEEK018", `Unsupported top-level script statement: ${ts.SyntaxKind[statement.kind]}`, section.contentStart + statement.getStart(file));
+    }
+    return { imports, types, setup, names, propsType: propsType ?? "Record<string, never>", propsTypeOffset };
+}
+function hydrationBody(bindings, context, locals = new Map()) {
+    const statements = [];
+    const mappedExpression = (expression, offset, expressionLocals = locals) => markSource(rewriteLocals(expression, expressionLocals), offset, expression.length);
+    for (const { id, expression, offset } of bindings.texts) {
+        const point = locate(context.source, offset);
+        const location = `${basename(context.filename)}:${point.line}:${point.column} (text ${id})`;
+        statements.push(`cleanups.push(__meeko.bindText(__scope, ${id}, () => ${mappedExpression(expression, offset)}, ${quote(location)}));`);
+    }
+    for (const { id, name, expression, offset } of bindings.attributes) {
+        const point = locate(context.source, offset);
+        const location = `${basename(context.filename)}:${point.line}:${point.column} (attribute ${name})`;
+        statements.push(`cleanups.push(__meeko.bindAttribute(__scope, ${id}, ${quote(name)}, () => ${mappedExpression(expression, offset)}, ${quote(location)}));`);
+    }
+    for (const { id, name, expression, offset } of bindings.events) {
+        const eventType = ["click", "input", "change", "submit", "keydown", "keyup", "focus", "blur"].includes(name)
+            ? `GlobalEventHandlersEventMap[${quote(name)}]` : "Event";
+        const handler = markSource(`((__meeko_handler: (event: ${eventType}) => void) => __meeko_handler(event as ${eventType}))(${mappedExpression(expression, offset)});`, offset, expression.length);
+        statements.push(`{
+      cleanups.push(__meeko.bindEvent(__scope, ${id}, ${quote(name)}, (event: Event) => {
+        ${handler}
+      }));
+    }`);
+    }
+    const componentStatements = [];
+    for (const entry of bindings.components) {
+        const point = locate(context.source, entry.offset);
+        const location = `${basename(context.filename)}:${point.line}:${point.column} (component ${entry.reference})`;
+        const props = entry.props.map((prop) => `${markSource(quote(prop.name), prop.nameOffset, prop.name.length)}: ${mappedExpression(prop.expression, prop.offset)}`);
+        const object = markSource(`{ ${props.join(", ")} }`, entry.offset, 1);
+        componentStatements.push(`cleanups.push(__meeko.bindComponent(__scope, ${entry.id}, ${mappedExpression(entry.reference, entry.referenceOffset)}, () => (${object}), ${quote(location)}));`);
+    }
+    statements.unshift(...componentStatements);
+    for (const entry of bindings.regions) {
+        if (entry.kind === "condition") {
+            statements.push(`cleanups.push(__meeko.bindIf(__scope, ${entry.id}, () => ${mappedExpression(entry.expression, entry.offset)}, () => ${rewriteLocals(entry.render, locals)}, (__scope) => { ${hydrationBody(entry.bindings, context, locals)} }));`);
+        }
+        else {
+            const outerLocals = new Map(locals);
+            outerLocals.delete(entry.itemName);
+            outerLocals.delete(entry.indexName);
+            const innerLocals = new Map(locals);
+            innerLocals.set(entry.itemName, "__meeko_item.value");
+            innerLocals.set(entry.indexName, "__meeko_index.value");
+            statements.push(`cleanups.push(__meeko.bindFor(__scope, ${entry.id}, () => ${mappedExpression(entry.expression, entry.offset)}, (${entry.itemName}, ${entry.indexName}) => ${mappedExpression(entry.key, entry.keyOffset, outerLocals)}, (${entry.itemName}, ${entry.indexName}) => ${rewriteLocals(entry.render, outerLocals)}, (__meeko_item, __meeko_index, __scope) => { ${hydrationBody(entry.bindings, context, innerLocals)} }));`);
+        }
+    }
+    return `const cleanups: Array<() => void> = [];
+  try {
+    ${statements.join("\n")}
+    return () => { for (const cleanup of cleanups.reverse()) cleanup(); };
+  } catch (error) { for (const cleanup of cleanups.reverse()) cleanup(); throw error; }`;
+}
+/** Compila una parte tipada de .meeko para SSR e hidratación del HTML existente. */
+export function compile(source, filename = "anonymous.meeko", options = {}) {
+    const { script, template, style } = parseSfc(source, filename);
+    const componentId = createHash("sha256").update(filename).digest("hex").slice(0, 12);
+    const scopeAttribute = style?.attributes.some((attribute) => attribute.name === "scoped")
+        ? `data-meeko-s-${createHash("sha256").update(filename).digest("hex").slice(0, 8)}`
+        : undefined;
+    let css;
+    try {
+        css = scopeAttribute ? scopeCss(style?.content ?? "", scopeAttribute) : style?.content ?? "";
+    }
+    catch (error) {
+        if (error instanceof postcss.CssSyntaxError && style && error.line !== undefined && error.column !== undefined) {
+            const lines = style.content.split(/\r\n|\r|\n/);
+            const prior = lines.slice(0, error.line - 1).reduce((total, line) => total + line.length + 1, 0);
+            throw compileError(source, filename, "MEEK019", error.reason, style.contentStart + prior + error.column - 1);
+        }
+        throw error;
+    }
+    const parsed = parseTemplate(source, template, filename);
+    const bindingsForTemplate = emptyBindings();
+    const context = { source, filename, templateOffset: template.contentStart, scopeAttribute, nextText: 0, nextEvent: 0, nextAttribute: 0, nextRegion: 0 };
+    const html = renderNode(parsed, bindingsForTemplate, context);
+    const scriptParts = compileScript(script, source, filename);
+    const bindings = scriptParts.names.join(", ");
+    const hot = options.hot === true;
+    const setupCode = `const __bindings = __setup(__inputProps);\n__meeko.restoreSignals(__bindings, __state);\nconst { ${bindings} } = __bindings;`;
+    const releaseCode = hot
+        ? `const __cleanup = () => { __release(); dispose(); };\nconst __component = { renderToString, hydrate, hydrateScope, css };\nconst __snapshot = () => __meeko.snapshotSignals(__bindings);\nconst __stop = __hotRoot ? __meeko.registerHotInstance(__hotId, __hotRoot, __inputProps, __component, __snapshot, __cleanup) : __scope.start ? __meeko.registerHotScope(__hotId, __scope, __inputProps, __component, __snapshot, __cleanup) : __cleanup;\nreturn __meeko.withStateSnapshot(__stop, __snapshot);`
+        : `return __meeko.withStateSnapshot(() => { __release(); dispose(); }, () => __meeko.snapshotSignals(__bindings));`;
+    const hotIdExport = hot ? `export const __hotId = ${quote(componentId)};\n` : "";
+    const stateParam = ", __state?: __meeko.HotState";
+    const scopeHotRootParam = hot ? ", __hotRoot?: Element" : "";
+    const scopeForward = hot ? "__scope, __inputProps, __state, root" : "__scope, __inputProps, __state";
+    const propsType = scriptParts.propsTypeOffset === undefined ? scriptParts.propsType : markSource(scriptParts.propsType, scriptParts.propsTypeOffset);
+    const markedCode = `// Generated by Meeko. Edit the .meeko source instead.\nimport * as __meeko from "@meekojs/meeko";\n${scriptParts.imports.join("\n")}\n${scriptParts.types.join("\n")}\nfunction __setup(__props: ${propsType}) {\n${scriptParts.setup.join("\n")}\nreturn { ${bindings} };\n}\nexport type ComponentProps = ${propsType};\nexport const css = ${quote(css)};\n${hotIdExport}export function renderWithState(__inputProps: ComponentProps): { html: string; state: __meeko.HotState } {\nreturn __meeko.createRoot((dispose) => {\nconst __meeko_transfer = true;\nconst __bindings = __setup(__inputProps);\nconst { ${bindings} } = __bindings;\ntry {\nconst html = ${html};\nconst state = __meeko.snapshotSignals(__bindings);\n__meeko.serializeJson(state);\nreturn { html, state };\n} finally { dispose(); }\n});\n}\nexport function renderToString(__inputProps: ComponentProps${stateParam}): string {\nreturn __meeko.createRoot((dispose) => {\nconst __meeko_transfer = false;\n${setupCode}\ntry { return ${html}; } finally { dispose(); }\n});\n}\nexport function hydrate(root: Element, __inputProps: ComponentProps${stateParam}): () => void {\nconst __scope: __meeko.DomScope = { root };\nreturn hydrateScope(${scopeForward});\n}\nexport function hydrateScope(__scope: __meeko.DomScope, __inputProps: ComponentProps${stateParam}${scopeHotRootParam}): () => void {\nreturn __meeko.createRoot((dispose) => {\nconst __meeko_transfer = false;\n${setupCode}\nconst __release = (() => { ${hydrationBody(bindingsForTemplate, context)} })();\n${releaseCode}\n});\n}\n`;
+    const { code, mappings } = extractSourceMappings(markedCode);
+    return { code, css, mappings };
+}

package/dist/dom.d.ts

@@ -0,0 +1,43 @@
+import type { Signal } from "./reactivity.js";
+/** Fragmento de DOM que pertenece a una instancia o a una región dinámica. */
+export interface DomScope {
+    root: Element;
+    start?: Comment;
+    end?: Comment;
+}
+/** Contrato de un módulo de componente compilado para composición sin wrapper. */
+export interface ComponentModule<Props extends object> {
+    renderToString(props: Props, state?: Record<string, unknown>): string;
+    renderWithState?(props: Props): {
+        html: string;
+        state: Record<string, unknown>;
+    };
+    hydrateScope(scope: DomScope, props: Props, state?: Record<string, unknown>): ComponentRelease;
+}
+/** Función de limpieza que puede exponer el estado editable de su instancia. */
+export interface ComponentRelease {
+    (): void;
+    snapshot?: () => Record<string, unknown>;
+}
+/** Añade una lectura de estado a la limpieza de un componente compilado. */
+export declare function withStateSnapshot(release: () => void, snapshot: () => Record<string, unknown>): ComponentRelease;
+/** Renderiza un hijo entre comentarios de ámbito sin añadir un elemento visual. */
+export declare function renderComponent<Props extends object>(id: number, component: ComponentModule<Props>, props: Props, transferState?: boolean): string;
+/** Hidrata un hijo dentro de su rango y actualiza props reactivas con limpieza previa. */
+export declare function bindComponent<Props extends object>(scope: DomScope, id: number, component: ComponentModule<Props>, read: () => Props, location: string): () => void;
+/** Conecta un texto reactivo al marcador SSR y comprueba su valor inicial. */
+export declare function bindText(scope: DomScope, id: number, read: () => unknown, location: string): () => void;
+/** Conecta un atributo dinámico al elemento SSR y comprueba su valor inicial. */
+export declare function bindAttribute(scope: DomScope, id: number, name: string, read: () => unknown, location: string): () => void;
+/** Conecta un evento al elemento SSR y entrega su función de limpieza. */
+export declare function bindEvent(scope: DomScope, id: number, name: string, handler: (event: Event) => void): () => void;
+/** Genera los límites estables de una condición en SSR. */
+export declare function renderIf(id: number, condition: unknown, render: () => string): string;
+/** Hidrata una condición y conserva los nodos mientras sigue siendo verdadera. */
+export declare function bindIf(scope: DomScope, id: number, read: () => unknown, render: () => string, hydrate: (inner: DomScope) => () => void): () => void;
+/** Convierte una clave de lista en un token seguro para comentarios HTML. */
+export declare function keyToken(key: unknown): string;
+/** Renderiza una lista con límites identificados por claves únicas. */
+export declare function renderFor<T>(id: number, items: Iterable<T>, keyOf: (item: T, index: number) => string | number, render: (item: T, index: number) => string): string;
+/** Hidrata una lista y reordena regiones por clave sin reemplazar nodos conservados. */
+export declare function bindFor<T>(scope: DomScope, id: number, read: () => Iterable<T>, keyOf: (item: T, index: number) => string | number, render: (item: T, index: number) => string, hydrate: (item: Signal<T>, index: Signal<number>, inner: DomScope) => () => void): () => void;