tachyon-dom 0.1.0

package/dist/compiler/index.d.ts

@@ -0,0 +1,8 @@
+import { type Result } from "../result.js";
+import type { CompiledTemplate, CompilerError } from "./types.js";
+import type { CompileTemplateOptions } from "./types.js";
+export declare const compileTemplate: (source: string, options?: CompileTemplateOptions) => Result<CompiledTemplate, CompilerError>;
+export * from "./types.js";
+export { generateClientModule } from "./targets/client.js";
+export { compileServerTemplate, generateServerModule, renderServerTemplate } from "./targets/server.js";
+export { generateServerStreamModule } from "./targets/stream.js";

package/dist/compiler/index.js

@@ -0,0 +1,50 @@
+import { err, ok } from "../result.js";
+import { createTemplateIr } from "./ir.js";
+import { parseTemplate } from "./parser.js";
+import { lowerClientTemplate } from "./targets/client.js";
+import { applyTemplateWhitespace } from "./whitespace.js";
+const compileCacheLimit = 128;
+const compileCache = new Map();
+const rememberCompiledTemplate = (cacheKey, result) => {
+    if (compileCache.has(cacheKey)) {
+        compileCache.delete(cacheKey);
+    }
+    compileCache.set(cacheKey, result);
+    while (compileCache.size > compileCacheLimit) {
+        const oldest = compileCache.keys().next().value;
+        if (oldest === undefined) {
+            break;
+        }
+        compileCache.delete(oldest);
+    }
+    return result;
+};
+export const compileTemplate = (source, options = {}) => {
+    const whitespace = options.whitespace ?? "preserve";
+    const cacheKey = `${whitespace}\0${source}`;
+    const cached = compileCache.get(cacheKey);
+    if (cached) {
+        compileCache.delete(cacheKey);
+        compileCache.set(cacheKey, cached);
+        return cached;
+    }
+    const rootResult = parseTemplate(source);
+    if (!rootResult.ok) {
+        return rememberCompiledTemplate(cacheKey, err(rootResult.error));
+    }
+    const root = applyTemplateWhitespace(rootResult.value, whitespace);
+    const irResult = createTemplateIr(root);
+    if (!irResult.ok) {
+        return rememberCompiledTemplate(cacheKey, err(irResult.error));
+    }
+    return rememberCompiledTemplate(cacheKey, ok({
+        source,
+        ir: irResult.value,
+        root: irResult.value.root,
+        client: lowerClientTemplate(irResult.value.root),
+    }));
+};
+export * from "./types.js";
+export { generateClientModule } from "./targets/client.js";
+export { compileServerTemplate, generateServerModule, renderServerTemplate } from "./targets/server.js";
+export { generateServerStreamModule } from "./targets/stream.js";

package/dist/compiler/ir.d.ts

@@ -0,0 +1,4 @@
+import { type Result } from "../result.js";
+import type { CompilerError, ElementNode, StoreDefinition, TemplateIr } from "./types.js";
+export declare const storeDefinitionsFor: (node: ElementNode) => StoreDefinition[];
+export declare const createTemplateIr: (root: ElementNode) => Result<TemplateIr, CompilerError>;

package/dist/compiler/ir.js

@@ -0,0 +1,255 @@
+import { err, ok } from "../result.js";
+import { isAssignableExpression, parseExpression } from "./expression.js";
+import { attrExpression, attrString, hydrationBoundaryFor, identifierNamePattern, identifierPattern, isKnownHydrationAttribute, itemNameFromKey, readExpressionAttribute, renderableChildren, textExpressionSegments, } from "./utils.js";
+const semanticError = (message, span) => err({
+    message,
+    offset: span?.start ?? 0,
+    ...(span?.end === undefined ? {} : { endOffset: span.end }),
+});
+const openingTagSpan = (node) => ({ start: node.start, end: node.openEnd });
+const attributeSpan = (attribute) => ({ start: attribute.start, end: attribute.end });
+export const storeDefinitionsFor = (node) => {
+    const stores = [];
+    for (const attr of node.attrs) {
+        if (!identifierPattern.test(attr.name)) {
+            continue;
+        }
+        const initial = readExpressionAttribute(attr.value);
+        if (initial) {
+            stores.push({ name: attr.name, initial });
+        }
+    }
+    return stores;
+};
+const componentName = (node) => attrString(node, "name");
+const componentProps = (node) => node.attrs
+    .filter((attr) => attr.name !== "name")
+    .flatMap((attr) => {
+    const expression = readExpressionAttribute(attr.value);
+    return expression ? [{ name: attr.name, expression }] : [];
+});
+const componentStores = (node) => {
+    const stores = [];
+    const visit = (child) => {
+        if (child.type !== "element" || child.tagName === "component") {
+            return;
+        }
+        if (child.tagName === "store") {
+            stores.push(...storeDefinitionsFor(child));
+            return;
+        }
+        child.children.forEach(visit);
+    };
+    node.children.forEach(visit);
+    return stores;
+};
+const validateExpression = (expression, context, span) => {
+    const parsed = parseExpression(expression);
+    if (!parsed.ok) {
+        return semanticError(`Invalid ${context} expression: ${expression}.`, span);
+    }
+    return ok(undefined);
+};
+const validateTextExpressions = (node) => {
+    if (node.type === "text") {
+        for (const segment of textExpressionSegments(node.value)) {
+            if (segment.kind === "expression") {
+                const result = validateExpression(segment.value, "text", {
+                    start: (node.start ?? 0) + segment.start,
+                    end: (node.start ?? 0) + segment.end,
+                });
+                if (!result.ok) {
+                    return result;
+                }
+            }
+        }
+        return ok(undefined);
+    }
+    for (const attr of node.attrs) {
+        if (attr.name === "class" || attr.name === "name") {
+            continue;
+        }
+        const expression = readExpressionAttribute(attr.value);
+        if (expression) {
+            const result = validateExpression(expression, `${attr.name} attribute`, attributeSpan(attr));
+            if (!result.ok) {
+                return result;
+            }
+        }
+    }
+    for (const child of node.children) {
+        const result = validateTextExpressions(child);
+        if (!result.ok) {
+            return result;
+        }
+    }
+    return ok(undefined);
+};
+const validateSpecialNode = (node) => {
+    if (node.tagName === "for") {
+        const each = attrExpression(node, "each");
+        const key = attrExpression(node, "key");
+        if (!each) {
+            return semanticError("<for> requires each={items}.", openingTagSpan(node));
+        }
+        if (!key) {
+            return semanticError("<for> requires key={item.id}.", openingTagSpan(node));
+        }
+    }
+    if (node.tagName === "if" && !attrExpression(node, "test")) {
+        return semanticError("<if> requires test={condition}.", openingTagSpan(node));
+    }
+    if (node.tagName === "component") {
+        if (!componentName(node)) {
+            return semanticError("<component> requires a string name attribute.", openingTagSpan(node));
+        }
+        for (const attr of node.attrs) {
+            if (attr.name !== "name" && readExpressionAttribute(attr.value) && !identifierNamePattern.test(attr.name)) {
+                return semanticError(`Invalid component prop binding name: ${attr.name}.`, attributeSpan(attr));
+            }
+        }
+        if (renderableChildren(node).length !== 1) {
+            return semanticError("<component> requires exactly one renderable root child.", openingTagSpan(node));
+        }
+    }
+    if (node.tagName === "store") {
+        for (const attr of node.attrs) {
+            if (readExpressionAttribute(attr.value) && !identifierNamePattern.test(attr.name)) {
+                return semanticError(`Invalid store binding name: ${attr.name}.`, attributeSpan(attr));
+            }
+        }
+    }
+    if (node.tagName === "await") {
+        if (!attrExpression(node, "value")) {
+            return semanticError("<await> requires value={promise}.", openingTagSpan(node));
+        }
+        const thenName = attrString(node, "then");
+        if (!thenName) {
+            return semanticError(`<await> requires then="name".`, openingTagSpan(node));
+        }
+        if (!identifierNamePattern.test(thenName)) {
+            return semanticError(`Invalid await then binding: ${thenName}.`, attributeSpan(node.attrs.find((attr) => attr.name === "then")));
+        }
+        const reorder = attrString(node, "reorder");
+        if (reorder && reorder !== "preserve" && reorder !== "resolve") {
+            return semanticError(`<await> reorder must be "preserve" or "resolve".`, attributeSpan(node.attrs.find((attr) => attr.name === "reorder")));
+        }
+    }
+    for (const attr of node.attrs) {
+        if (attr.name.startsWith("hydrate:") && !isKnownHydrationAttribute(attr.name)) {
+            return semanticError(`Unknown hydration attribute: ${attr.name}.`, attributeSpan(attr));
+        }
+        if (attr.name.startsWith("bind:")) {
+            const expression = readExpressionAttribute(attr.value);
+            if (!expression || !isAssignableExpression(expression)) {
+                return semanticError(`${attr.name} requires an assignable expression.`, attributeSpan(attr));
+            }
+        }
+    }
+    return ok(undefined);
+};
+const validateTree = (node, hydrateIds) => {
+    const expressionResult = validateTextExpressions(node);
+    if (!expressionResult.ok) {
+        return expressionResult;
+    }
+    if (node.type === "text") {
+        return ok(undefined);
+    }
+    const specialResult = validateSpecialNode(node);
+    if (!specialResult.ok) {
+        return specialResult;
+    }
+    const hydrateBoundary = hydrationBoundaryFor(node, []);
+    if (hydrateBoundary && hydrateBoundary.idKind !== "static") {
+        if (hydrateIds.has(hydrateBoundary.id)) {
+            return semanticError(`Duplicate hydrate boundary id expression: ${hydrateBoundary.id}.`, openingTagSpan(node));
+        }
+        hydrateIds.add(hydrateBoundary.id);
+    }
+    for (const child of node.children) {
+        const result = validateTree(child, hydrateIds);
+        if (!result.ok) {
+            return result;
+        }
+    }
+    return ok(undefined);
+};
+const collectDirectives = (node, path, directives) => {
+    if (node.type === "text") {
+        return;
+    }
+    if (node.tagName === "store") {
+        directives.push({ kind: "store", path: [...path], stores: storeDefinitionsFor(node) });
+        return;
+    }
+    const isComponent = node.tagName === "component";
+    if (isComponent) {
+        directives.push({
+            kind: "component",
+            path: [...path],
+            name: componentName(node) ?? "Anonymous",
+            props: componentProps(node),
+            stores: componentStores(node),
+        });
+    }
+    const hydrateBoundary = hydrationBoundaryFor(node, path);
+    if (hydrateBoundary) {
+        directives.push({ kind: "hydrate", ...hydrateBoundary });
+    }
+    if (node.tagName === "if") {
+        directives.push({ kind: "if", path: [...path], test: attrExpression(node, "test") ?? "false" });
+    }
+    if (node.tagName === "for") {
+        const key = attrExpression(node, "key") ?? "item";
+        directives.push({
+            kind: "for",
+            path: [...path],
+            each: attrExpression(node, "each") ?? "[]",
+            key,
+            itemName: itemNameFromKey(key),
+        });
+    }
+    if (node.tagName === "await") {
+        const fallback = attrString(node, "fallback");
+        const errorText = attrString(node, "error");
+        const reorder = attrString(node, "reorder");
+        directives.push({
+            kind: "await",
+            path: [...path],
+            value: attrExpression(node, "value") ?? "undefined",
+            thenName: attrString(node, "then") ?? "value",
+            ...(fallback ? { fallback } : {}),
+            ...(errorText ? { error: errorText } : {}),
+            ...(reorder === "preserve" || reorder === "resolve" ? { reorder } : {}),
+        });
+    }
+    for (const attr of node.attrs) {
+        if (!attr.name.startsWith("on:")) {
+            continue;
+        }
+        const handler = readExpressionAttribute(attr.value);
+        if (handler) {
+            directives.push({ kind: "event", path: [...path], eventName: attr.name.slice(3), handler });
+        }
+    }
+    const children = isComponent ? renderableChildren(node) : node.children;
+    children.forEach((child, index) => {
+        const childPath = isComponent && children.length === 1 ? path : [...path, index];
+        collectDirectives(child, childPath, directives);
+    });
+};
+export const createTemplateIr = (root) => {
+    const validationResult = validateTree(root, new Set());
+    if (!validationResult.ok) {
+        return err(validationResult.error);
+    }
+    const directives = [];
+    if (root.tagName === "component" || root.tagName === "for" || root.tagName === "if" || root.tagName === "await") {
+        collectDirectives(root, [], directives);
+    }
+    else {
+        root.children.forEach((child, index) => collectDirectives(child, [index], directives));
+    }
+    return ok({ kind: "template", root, directives });
+};

package/dist/compiler/parser.d.ts

@@ -0,0 +1,3 @@
+import { type Result } from "../result.js";
+import type { CompilerError, ElementNode } from "./types.js";
+export declare const parseTemplate: (source: string) => Result<ElementNode, CompilerError>;

package/dist/compiler/parser.js

@@ -0,0 +1,236 @@
+import { err, ok } from "../result.js";
+import { voidElementNames } from "./utils.js";
+const isWhitespace = (char) => char === " " || char === "\n" || char === "\t" || char === "\r";
+const parserError = (parser, message) => err({ message, offset: parser.offset });
+const peek = (parser) => parser.source[parser.offset];
+const startsWith = (parser, value) => parser.source.startsWith(value, parser.offset);
+const consumeWhitespace = (parser) => {
+    while (isWhitespace(peek(parser))) {
+        parser.offset++;
+    }
+};
+const readWhile = (parser, predicate) => {
+    const start = parser.offset;
+    while (parser.offset < parser.source.length) {
+        const char = parser.source[parser.offset];
+        if (!predicate(char)) {
+            break;
+        }
+        parser.offset++;
+    }
+    return parser.source.slice(start, parser.offset);
+};
+const readName = (parser) => {
+    const name = readWhile(parser, (char) => /[A-Za-z0-9:_$.-]/.test(char));
+    if (!name) {
+        return parserError(parser, "Expected a name.");
+    }
+    return ok(name);
+};
+const readQuotedValue = (parser) => {
+    const quote = peek(parser);
+    if (quote !== `"` && quote !== `'`) {
+        return parserError(parser, "Expected a quoted attribute value.");
+    }
+    parser.offset++;
+    const start = parser.offset;
+    while (parser.offset < parser.source.length && peek(parser) !== quote) {
+        parser.offset++;
+    }
+    if (peek(parser) !== quote) {
+        return parserError(parser, "Unclosed attribute value.");
+    }
+    const value = parser.source.slice(start, parser.offset);
+    parser.offset++;
+    return ok(value);
+};
+const readBracedValue = (parser) => {
+    let depth = 0;
+    let quote;
+    const start = parser.offset;
+    while (parser.offset < parser.source.length) {
+        const char = parser.source[parser.offset];
+        const previous = parser.source[parser.offset - 1];
+        if (quote) {
+            if (char === quote && previous !== "\\") {
+                quote = undefined;
+            }
+            parser.offset++;
+            continue;
+        }
+        if (char === `"` || char === `'`) {
+            quote = char;
+            parser.offset++;
+            continue;
+        }
+        if (char === "{") {
+            depth++;
+        }
+        else if (char === "}") {
+            depth--;
+            parser.offset++;
+            if (depth === 0) {
+                return ok(parser.source.slice(start, parser.offset));
+            }
+            continue;
+        }
+        parser.offset++;
+    }
+    return parserError(parser, "Unclosed braced attribute value.");
+};
+const readAttributeValue = (parser) => {
+    if (peek(parser) === `"` || peek(parser) === `'`) {
+        return readQuotedValue(parser);
+    }
+    if (peek(parser) === "{") {
+        return readBracedValue(parser);
+    }
+    return ok(readWhile(parser, (char) => !isWhitespace(char) && char !== ">" && char !== "/"));
+};
+const parseAttributes = (parser) => {
+    const attrs = [];
+    while (parser.offset < parser.source.length) {
+        consumeWhitespace(parser);
+        const char = peek(parser);
+        if (char === ">" || startsWith(parser, "/>")) {
+            return ok(attrs);
+        }
+        const start = parser.offset;
+        const nameStart = parser.offset;
+        const nameResult = readName(parser);
+        if (!nameResult.ok) {
+            return err(nameResult.error);
+        }
+        const nameEnd = parser.offset;
+        consumeWhitespace(parser);
+        if (peek(parser) !== "=") {
+            attrs.push({ name: nameResult.value, value: true, start, end: nameEnd, nameStart, nameEnd });
+            continue;
+        }
+        parser.offset++;
+        consumeWhitespace(parser);
+        const valueStart = parser.offset;
+        const valueResult = readAttributeValue(parser);
+        if (!valueResult.ok) {
+            return err(valueResult.error);
+        }
+        const valueEnd = parser.offset;
+        attrs.push({
+            name: nameResult.value,
+            value: valueResult.value,
+            start,
+            end: valueEnd,
+            nameStart,
+            nameEnd,
+            valueStart,
+            valueEnd,
+        });
+    }
+    return parserError(parser, "Unclosed attribute list.");
+};
+const parseText = (parser) => {
+    const start = parser.offset;
+    while (parser.offset < parser.source.length && peek(parser) !== "<") {
+        parser.offset++;
+    }
+    return { type: "text", value: parser.source.slice(start, parser.offset), start, end: parser.offset };
+};
+const consumeComment = (parser) => {
+    if (!startsWith(parser, "<!--")) {
+        return parserError(parser, "Expected an HTML comment.");
+    }
+    const end = parser.source.indexOf("-->", parser.offset + 4);
+    if (end === -1) {
+        return parserError(parser, "Unclosed HTML comment.");
+    }
+    parser.offset = end + 3;
+    return ok(undefined);
+};
+const consumeClosingTag = (parser, tagName) => {
+    if (!startsWith(parser, `</${tagName}`)) {
+        return parserError(parser, `Missing closing tag for <${tagName}>.`);
+    }
+    parser.offset += tagName.length + 2;
+    consumeWhitespace(parser);
+    if (peek(parser) !== ">") {
+        return parserError(parser, "Expected end of closing tag.");
+    }
+    parser.offset++;
+    return ok(undefined);
+};
+const parseElement = (parser) => {
+    const start = parser.offset;
+    if (peek(parser) !== "<") {
+        return parserError(parser, "Expected an opening tag.");
+    }
+    if (startsWith(parser, "<!--")) {
+        return parserError(parser, "Unexpected HTML comment.");
+    }
+    parser.offset++;
+    if (peek(parser) === "/") {
+        return parserError(parser, "Unexpected closing tag.");
+    }
+    const tagNameResult = readName(parser);
+    if (!tagNameResult.ok) {
+        return err(tagNameResult.error);
+    }
+    const attrsResult = parseAttributes(parser);
+    if (!attrsResult.ok) {
+        return err(attrsResult.error);
+    }
+    if (startsWith(parser, "/>")) {
+        parser.offset += 2;
+        return ok({ type: "element", start, end: parser.offset, openEnd: parser.offset, tagName: tagNameResult.value, attrs: attrsResult.value, children: [] });
+    }
+    if (peek(parser) !== ">") {
+        return parserError(parser, "Expected end of opening tag.");
+    }
+    parser.offset++;
+    const openEnd = parser.offset;
+    if (voidElementNames.has(tagNameResult.value)) {
+        if (startsWith(parser, `</${tagNameResult.value}`)) {
+            const closing = consumeClosingTag(parser, tagNameResult.value);
+            if (!closing.ok) {
+                return err(closing.error);
+            }
+        }
+        return ok({ type: "element", start, end: parser.offset, openEnd, tagName: tagNameResult.value, attrs: attrsResult.value, children: [] });
+    }
+    const children = [];
+    while (parser.offset < parser.source.length && !startsWith(parser, `</${tagNameResult.value}`)) {
+        if (startsWith(parser, "<!--")) {
+            const comment = consumeComment(parser);
+            if (!comment.ok) {
+                return err(comment.error);
+            }
+        }
+        else if (peek(parser) === "<") {
+            const childResult = parseElement(parser);
+            if (!childResult.ok) {
+                return err(childResult.error);
+            }
+            children.push(childResult.value);
+        }
+        else {
+            children.push(parseText(parser));
+        }
+    }
+    const closing = consumeClosingTag(parser, tagNameResult.value);
+    if (!closing.ok) {
+        return err(closing.error);
+    }
+    return ok({ type: "element", start, end: parser.offset, openEnd, tagName: tagNameResult.value, attrs: attrsResult.value, children });
+};
+export const parseTemplate = (source) => {
+    const parser = { source, offset: 0 };
+    consumeWhitespace(parser);
+    const rootResult = parseElement(parser);
+    if (!rootResult.ok) {
+        return err(rootResult.error);
+    }
+    consumeWhitespace(parser);
+    if (parser.offset !== source.length) {
+        return err({ message: "Only one root element is currently supported.", offset: parser.offset });
+    }
+    return rootResult;
+};

package/dist/compiler/sfc.d.ts

@@ -0,0 +1,33 @@
+import { type Result } from "../result.js";
+import type { CompiledTemplate, CompilerError, CompileTemplateOptions } from "./types.js";
+export declare const sfcDefaultScopeName = "__tachyonSfcDefaultScope";
+export declare const sfcNamedScopeName = "__tachyonSfcScope";
+export declare const sfcSetupScopeName = "__tachyonSfcSetupScope";
+export type TachyonSfcScript = {
+    attrs: string;
+    content: string;
+    offset: number;
+};
+export type TachyonSfcDescriptor = {
+    template: string;
+    script?: TachyonSfcScript;
+    mapTemplateOffset: (offset: number) => number;
+};
+export type CompiledTachyonSfc = {
+    descriptor: TachyonSfcDescriptor;
+    scriptOnly: boolean;
+    template: CompiledTemplate;
+};
+export type TransformedSfcScript = {
+    code: string;
+    defaultScopeName?: string;
+    setupBindings: string[];
+};
+export declare const sfcScriptLanguage: (script: TachyonSfcScript | undefined) => "js" | "ts";
+export declare const isSfcSetupScript: (script: TachyonSfcScript | undefined) => boolean;
+export declare const extractStaticSfcScope: (source: string) => Result<Record<string, unknown> | undefined, string>;
+export declare const parseTachyonSfc: (source: string) => Result<TachyonSfcDescriptor, CompilerError>;
+export declare const compileTachyonSfc: (source: string, options?: CompileTemplateOptions) => Result<CompiledTachyonSfc, CompilerError>;
+export declare const generateScriptOnlyModule: (target: "client" | "server" | "stream") => string;
+export declare const transformSfcScript: (script: TachyonSfcScript | undefined) => Result<TransformedSfcScript, CompilerError>;
+export declare const generateSfcScriptDeclarations: (script: TachyonSfcScript | undefined) => Result<string, string>;