tachyon-dom 0.1.0

package/dist/compiler/sfc.js

@@ -0,0 +1,439 @@
+import * as ts from "typescript";
+import { err, ok } from "../result.js";
+import { compileTemplate } from "./index.js";
+export const sfcDefaultScopeName = "__tachyonSfcDefaultScope";
+export const sfcNamedScopeName = "__tachyonSfcScope";
+export const sfcSetupScopeName = "__tachyonSfcSetupScope";
+const scriptOpenPattern = /<script\b([^>]*)>/gi;
+const autoImports = {
+    batch: "tachyon-dom",
+    compileTachyonSfc: "tachyon-dom",
+    createClientRouter: "tachyon-dom",
+    createMemo: "tachyon-dom",
+    createSignal: "tachyon-dom",
+    createStore: "tachyon-dom",
+    effect: "tachyon-dom",
+    enhanceForm: "tachyon-dom",
+    err: "tachyon-dom",
+    generateClientModule: "tachyon-dom",
+    generateServerStreamModule: "tachyon-dom",
+    ok: "tachyon-dom",
+    readTextStreamChunks: "tachyon-dom",
+    renderServerTemplate: "tachyon-dom",
+    renderToReadableStream: "tachyon-dom",
+    validateFormData: "tachyon-dom",
+};
+const autoImportPattern = new RegExp(`\\b(?:${Object.keys(autoImports)
+    .map((name) => name.replaceAll("$", "\\$"))
+    .join("|")})\\b`);
+const mapGeneratedOffset = (ranges, sourceLength, offset) => {
+    for (const range of ranges) {
+        const rangeEnd = range.generatedStart + range.length;
+        if (offset >= range.generatedStart && offset <= rangeEnd) {
+            return range.originalStart + (offset - range.generatedStart);
+        }
+    }
+    return sourceLength;
+};
+const emptyTemplate = (source) => ({
+    source,
+    ir: {
+        kind: "template",
+        root: { type: "element", tagName: "template", attrs: [], children: [] },
+        directives: [],
+    },
+    root: { type: "element", tagName: "template", attrs: [], children: [] },
+    client: {
+        bindings: [],
+        components: [],
+        hydrationBoundaries: [],
+        stores: [],
+        templateHtml: "",
+    },
+});
+const attrValue = (attrs, name) => {
+    const pattern = new RegExp(`(?:^|\\s)${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)'|([^\\s"'>]+))`, "i");
+    const match = pattern.exec(attrs);
+    return match?.[1] ?? match?.[2] ?? match?.[3];
+};
+const hasBooleanAttr = (attrs, name) => new RegExp(`(?:^|\\s)${name}(?:\\s|=|$)`, "i").test(attrs);
+export const sfcScriptLanguage = (script) => {
+    const lang = attrValue(script?.attrs ?? "", "lang")?.toLowerCase();
+    return lang === "ts" || lang === "typescript" ? "ts" : "js";
+};
+export const isSfcSetupScript = (script) => hasBooleanAttr(script?.attrs ?? "", "setup");
+const unwrapStaticExpression = (node) => {
+    if (ts.isParenthesizedExpression(node) || ts.isAsExpression(node) || ts.isSatisfiesExpression(node)) {
+        return unwrapStaticExpression(node.expression);
+    }
+    return node;
+};
+const staticPropertyName = (name) => {
+    if (ts.isIdentifier(name) || ts.isStringLiteral(name) || ts.isNumericLiteral(name)) {
+        return name.text;
+    }
+    return undefined;
+};
+const staticExpressionValue = (input) => {
+    const node = unwrapStaticExpression(input);
+    if (ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node))
+        return ok(node.text);
+    if (ts.isNumericLiteral(node))
+        return ok(Number(node.text));
+    if (node.kind === ts.SyntaxKind.TrueKeyword)
+        return ok(true);
+    if (node.kind === ts.SyntaxKind.FalseKeyword)
+        return ok(false);
+    if (node.kind === ts.SyntaxKind.NullKeyword)
+        return ok(null);
+    if (ts.isPrefixUnaryExpression(node) && node.operator === ts.SyntaxKind.MinusToken) {
+        const value = staticExpressionValue(node.operand);
+        return value.ok && typeof value.value === "number" ? ok(-value.value) : err("Static scope has an invalid number.");
+    }
+    if (ts.isArrayLiteralExpression(node)) {
+        const values = [];
+        for (const element of node.elements) {
+            if (ts.isSpreadElement(element))
+                return err("Static scope does not support spread elements.");
+            const value = staticExpressionValue(element);
+            if (!value.ok)
+                return value;
+            values.push(value.value);
+        }
+        return ok(values);
+    }
+    if (ts.isObjectLiteralExpression(node)) {
+        const value = {};
+        for (const property of node.properties) {
+            if (!ts.isPropertyAssignment(property))
+                return err("Static scope supports property assignments only.");
+            const name = staticPropertyName(property.name);
+            if (name === undefined)
+                return err("Static scope has an unsupported property name.");
+            const propertyValue = staticExpressionValue(property.initializer);
+            if (!propertyValue.ok)
+                return propertyValue;
+            value[name] = propertyValue.value;
+        }
+        return ok(value);
+    }
+    return err("Static scope values must be literals, arrays, or object literals.");
+};
+export const extractStaticSfcScope = (source) => {
+    const descriptor = parseTachyonSfc(source);
+    if (!descriptor.ok)
+        return err(descriptor.error.message);
+    const script = descriptor.value.script;
+    if (!script)
+        return ok(undefined);
+    const sourceFile = sourceFileFor(script.content, script);
+    for (const statement of sourceFile.statements) {
+        if (!ts.isVariableStatement(statement) || !statement.modifiers?.some((modifier) => modifier.kind === ts.SyntaxKind.ExportKeyword)) {
+            continue;
+        }
+        for (const declaration of statement.declarationList.declarations) {
+            if (!ts.isIdentifier(declaration.name) || declaration.name.text !== "scope" || !declaration.initializer)
+                continue;
+            const initializer = unwrapStaticExpression(declaration.initializer);
+            if (!ts.isArrowFunction(initializer) && !ts.isFunctionExpression(initializer)) {
+                return err("SFC scope must be a function returning a static object or be supplied explicitly by defineApp().");
+            }
+            let returned;
+            if (ts.isBlock(initializer.body)) {
+                const returnStatement = initializer.body.statements.find(ts.isReturnStatement);
+                returned = returnStatement?.expression;
+            }
+            else {
+                returned = initializer.body;
+            }
+            if (!returned)
+                return err("SFC scope must return a static object.");
+            const value = staticExpressionValue(returned);
+            if (!value.ok)
+                return err(`${value.error} Supply page.scope explicitly for dynamic values.`);
+            if (!value.value || typeof value.value !== "object" || Array.isArray(value.value)) {
+                return err("SFC scope must return an object.");
+            }
+            return ok(value.value);
+        }
+    }
+    return ok(undefined);
+};
+const sourceFileFor = (source, script) => ts.createSourceFile(sfcScriptLanguage(script) === "ts" ? "component.td.ts" : "component.td.js", source, ts.ScriptTarget.ES2022, true, sfcScriptLanguage(script) === "ts" ? ts.ScriptKind.TS : ts.ScriptKind.JS);
+const compilerErrorFromDiagnostic = (diagnostic, script) => {
+    const message = ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n");
+    return {
+        message,
+        offset: script.offset + (typeof diagnostic.start === "number" ? diagnostic.start : 0),
+    };
+};
+const transpileScriptContent = (script) => {
+    const language = sfcScriptLanguage(script);
+    if (language === "js") {
+        return ok(script.content.trim());
+    }
+    const result = ts.transpileModule(script.content, {
+        compilerOptions: {
+            module: ts.ModuleKind.ESNext,
+            target: ts.ScriptTarget.ES2022,
+            useDefineForClassFields: true,
+            verbatimModuleSyntax: true,
+        },
+        fileName: "component.td.ts",
+        reportDiagnostics: true,
+    });
+    const diagnostic = result.diagnostics?.find((item) => item.category === ts.DiagnosticCategory.Error);
+    if (diagnostic) {
+        return err(compilerErrorFromDiagnostic(diagnostic, script));
+    }
+    return ok(result.outputText.trim());
+};
+const addBindingNames = (name, names) => {
+    if (ts.isIdentifier(name)) {
+        names.add(name.text);
+        return;
+    }
+    for (const element of name.elements) {
+        if (ts.isBindingElement(element)) {
+            addBindingNames(element.name, names);
+        }
+    }
+};
+const topLevelBindings = (script) => {
+    if (!script) {
+        return [];
+    }
+    const names = new Set();
+    const sourceFile = sourceFileFor(script.content, script);
+    for (const statement of sourceFile.statements) {
+        if (ts.isVariableStatement(statement)) {
+            for (const declaration of statement.declarationList.declarations) {
+                addBindingNames(declaration.name, names);
+            }
+        }
+        else if (ts.isFunctionDeclaration(statement) || ts.isClassDeclaration(statement)) {
+            if (statement.name) {
+                names.add(statement.name.text);
+            }
+        }
+    }
+    return Array.from(names).sort();
+};
+const isDeclarationName = (node) => {
+    const parent = node.parent;
+    return ((ts.isVariableDeclaration(parent) && parent.name === node) ||
+        (ts.isFunctionDeclaration(parent) && parent.name === node) ||
+        (ts.isClassDeclaration(parent) && parent.name === node) ||
+        (ts.isParameter(parent) && parent.name === node) ||
+        (ts.isImportSpecifier(parent) && parent.name === node) ||
+        (ts.isImportClause(parent) && parent.name === node) ||
+        (ts.isNamespaceImport(parent) && parent.name === node) ||
+        (ts.isPropertyAccessExpression(parent) && parent.name === node) ||
+        (ts.isPropertyAssignment(parent) && parent.name === node && !parent.name.getText().startsWith("{")) ||
+        (ts.isShorthandPropertyAssignment(parent) && parent.name === node));
+};
+const collectScriptIdentifiers = (source, script) => {
+    const declared = new Set();
+    const referenced = new Set();
+    const sourceFile = sourceFileFor(source, script);
+    const visit = (node) => {
+        if (ts.isImportDeclaration(node)) {
+            const clause = node.importClause;
+            if (clause?.name) {
+                declared.add(clause.name.text);
+            }
+            if (clause?.namedBindings) {
+                if (ts.isNamespaceImport(clause.namedBindings)) {
+                    declared.add(clause.namedBindings.name.text);
+                }
+                else {
+                    for (const specifier of clause.namedBindings.elements) {
+                        declared.add(specifier.name.text);
+                    }
+                }
+            }
+            return;
+        }
+        if (ts.isVariableDeclaration(node)) {
+            addBindingNames(node.name, declared);
+        }
+        else if (ts.isParameter(node)) {
+            addBindingNames(node.name, declared);
+        }
+        else if ((ts.isFunctionDeclaration(node) || ts.isClassDeclaration(node)) && node.name) {
+            declared.add(node.name.text);
+        }
+        else if (ts.isIdentifier(node) && !isDeclarationName(node)) {
+            referenced.add(node.text);
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return { declared, referenced };
+};
+const autoImportScriptHelpers = (code, script) => {
+    if (!autoImportPattern.test(code)) {
+        return code;
+    }
+    const identifiers = collectScriptIdentifiers(code, script);
+    const importsByModule = new Map();
+    for (const [name, module] of Object.entries(autoImports)) {
+        if (!identifiers.referenced.has(name) || identifiers.declared.has(name)) {
+            continue;
+        }
+        importsByModule.set(module, [...(importsByModule.get(module) ?? []), name]);
+    }
+    if (importsByModule.size === 0) {
+        return code;
+    }
+    const imports = Array.from(importsByModule)
+        .map(([module, names]) => `import { ${names.sort().join(", ")} } from ${JSON.stringify(module)};`)
+        .join("\n");
+    return `${imports}\n${code}`;
+};
+export const parseTachyonSfc = (source) => {
+    const matches = Array.from(source.matchAll(scriptOpenPattern));
+    if (matches.length === 0) {
+        return ok({
+            template: source,
+            mapTemplateOffset: (offset) => offset,
+        });
+    }
+    if (matches.length > 1) {
+        return err({ message: "Only one <script> block is currently supported.", offset: matches[1]?.index ?? 0 });
+    }
+    const match = matches[0];
+    const openStart = match?.index ?? 0;
+    const openEnd = openStart + (match?.[0].length ?? 0);
+    const closeStart = source.indexOf("</script>", openEnd);
+    if (closeStart < 0) {
+        return err({ message: "Missing closing </script> tag.", offset: openStart });
+    }
+    const closeEnd = closeStart + "</script>".length;
+    const before = source.slice(0, openStart);
+    const after = source.slice(closeEnd);
+    const ranges = [
+        { generatedStart: 0, originalStart: 0, length: before.length },
+        { generatedStart: before.length, originalStart: closeEnd, length: after.length },
+    ];
+    return ok({
+        script: {
+            attrs: match?.[1]?.trim() ?? "",
+            content: source.slice(openEnd, closeStart),
+            offset: openEnd,
+        },
+        template: `${before}${after}`,
+        mapTemplateOffset: (offset) => mapGeneratedOffset(ranges, source.length, offset),
+    });
+};
+export const compileTachyonSfc = (source, options = {}) => {
+    const descriptor = parseTachyonSfc(source);
+    if (!descriptor.ok) {
+        return err(descriptor.error);
+    }
+    const scriptOnly = Boolean(descriptor.value.script) && descriptor.value.template.trim().length === 0;
+    if (scriptOnly) {
+        return ok({
+            descriptor: descriptor.value,
+            scriptOnly: true,
+            template: emptyTemplate(descriptor.value.template),
+        });
+    }
+    const template = compileTemplate(descriptor.value.template, options);
+    if (!template.ok) {
+        return err({
+            message: template.error.message,
+            offset: descriptor.value.mapTemplateOffset(template.error.offset),
+            ...(template.error.endOffset === undefined
+                ? {}
+                : { endOffset: descriptor.value.mapTemplateOffset(template.error.endOffset) }),
+        });
+    }
+    return ok({
+        descriptor: descriptor.value,
+        scriptOnly: false,
+        template: template.value,
+    });
+};
+export const generateScriptOnlyModule = (target) => {
+    if (target === "server") {
+        return [
+            `const escapeScriptJson = (value) => value.replaceAll("<", "\\\\u003c").replaceAll(">", "\\\\u003e");`,
+            `const escapeAttribute = (value) => String(value).replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;");`,
+            `export const hydrationBoundaries = [];`,
+            `export const renderHydrationState = (id, state) => '<script type="application/json" data-tachyon-state="' + escapeAttribute(id) + '">' + escapeScriptJson(JSON.stringify(state) ?? "null") + '</script>';`,
+            `export const render = () => "";`,
+        ].join("\n");
+    }
+    if (target === "stream") {
+        return `export const stream = async function* () {};\n`;
+    }
+    return [
+        `export const templateHtml = "";`,
+        `export const hydrationBoundaries = [];`,
+        `export const componentBoundaries = [];`,
+        `export const bind = () => undefined;`,
+    ].join("\n");
+};
+export const transformSfcScript = (script) => {
+    if (!script || script.content.trim().length === 0) {
+        return ok({ code: "", setupBindings: [] });
+    }
+    const transpiled = transpileScriptContent(script);
+    if (!transpiled.ok) {
+        return err(transpiled.error);
+    }
+    const setupBindings = isSfcSetupScript(script) ? topLevelBindings(script) : [];
+    const content = autoImportScriptHelpers(transpiled.value, script);
+    if (isSfcSetupScript(script)) {
+        const scopeEntries = setupBindings.map((name) => `${name}: ${name}`).join(", ");
+        return ok({
+            code: `${content}\nconst ${sfcSetupScopeName} = { ${scopeEntries} };\n`,
+            defaultScopeName: sfcSetupScopeName,
+            setupBindings,
+        });
+    }
+    const namedScopeExport = /\bexport\s+const\s+scope\s*=/;
+    const defaultExport = /\bexport\s+default\b/;
+    if (namedScopeExport.test(content) && defaultExport.test(content)) {
+        return err({ message: "Use either export const scope or export default, not both.", offset: script.offset });
+    }
+    if (namedScopeExport.test(content)) {
+        const code = content.replace(namedScopeExport, `const ${sfcNamedScopeName} =`).trim();
+        return ok({
+            code: `${code}\nexport { ${sfcNamedScopeName} as scope };\n`,
+            defaultScopeName: sfcNamedScopeName,
+            setupBindings,
+        });
+    }
+    if (!defaultExport.test(content)) {
+        return ok({ code: `${content.trim()}\n`, setupBindings });
+    }
+    const code = content.replace(defaultExport, `const ${sfcDefaultScopeName} =`).trim();
+    return ok({
+        code: `${code}\nexport { ${sfcDefaultScopeName} as default };\n`,
+        defaultScopeName: sfcDefaultScopeName,
+        setupBindings,
+    });
+};
+export const generateSfcScriptDeclarations = (script) => {
+    if (!script || script.content.trim().length === 0) {
+        return ok("");
+    }
+    const result = ts.transpileDeclaration(script.content, {
+        compilerOptions: {
+            allowJs: true,
+            declaration: true,
+            module: ts.ModuleKind.ESNext,
+            target: ts.ScriptTarget.ES2022,
+        },
+        fileName: sfcScriptLanguage(script) === "ts" ? "component.td.ts" : "component.td.js",
+    });
+    if (result.outputText.trim().length === 0) {
+        const diagnostic = result.diagnostics?.find((item) => item.category === ts.DiagnosticCategory.Error);
+        return err(diagnostic
+            ? ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n")
+            : "Unable to emit script declarations.");
+    }
+    return ok(result.outputText.trim());
+};

package/dist/compiler/targets/client.d.ts

@@ -0,0 +1,3 @@
+import type { CompiledTemplate, ElementNode, GenerateClientModuleOptions } from "../types.js";
+export declare const lowerClientTemplate: (root: ElementNode) => CompiledTemplate["client"];
+export declare const generateClientModule: (template: CompiledTemplate, options?: GenerateClientModuleOptions) => string;