workstar-compiler 0.1.0 → 0.2.0-beta.0

package/dist/src/index.js

@@ -1,8 +1,9 @@
 import { parseFragment } from 'parse5';
 import { componentScript } from './component-script.js';
-import { controlAttribute, normalizeControls } from './control-elements.js';
-import { fail } from './errors.js';
-import { compileStyle } from './styles.js';
+import { ControlSyntaxError, controlAttribute, normalizeControls, } from './control-elements.js';
+import { ComponentCompileError, fail } from './errors.js';
+import { ComponentCode } from './source-origin.js';
+import { compileStyle, StyleCompileError } from './styles.js';
 export { ComponentCompileError } from './errors.js';
 const pathExpression = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\[\d+\])*$/;
 const identifier = /^[A-Za-z_$][\w$]*$/;
@@ -47,6 +48,30 @@ function escapeTemplate(value) {
         .replace(/`/g, '\\`')
         .replace(/\$\{/g, '\\${');
 }
+function sourcePosition(source, offset) {
+    let line = 1;
+    let column = 1;
+    for (let index = 0; index < offset; index++) {
+        if (source[index] === '\n') {
+            line++;
+            column = 1;
+        }
+        else {
+            column++;
+        }
+    }
+    return { line, column };
+}
+function offsetAtPosition(source, line, column) {
+    let offset = 0;
+    for (let currentLine = 1; currentLine < line; currentLine++) {
+        const newline = source.indexOf('\n', offset);
+        if (newline < 0)
+            return source.length;
+        offset = newline + 1;
+    }
+    return Math.min(offset + column - 1, source.length);
+}
 function controlName(node) {
     return node.attrs.find((attribute) => attribute.name === controlAttribute)
         ?.value;
@@ -125,7 +150,7 @@ function scopeMarkupElements(nodes, attribute, filename) {
         scopeMarkupElements(elementChildren(node), attribute, filename);
     }
 }
-function eachMarkup(node, filename, locals, sourceText) {
+function eachMarkup(node, filename, locals, source) {
     const attributes = new Map(node.attrs
         .filter((attribute) => attribute.name !== controlAttribute)
         .map((attribute) => [attribute.name, attribute.value]));
@@ -135,19 +160,24 @@ function eachMarkup(node, filename, locals, sourceText) {
         !attributes.has('key')) {
         fail(filename, '<Each> needs each={path}, as="name", and key="field|self".');
     }
-    const source = dynamicAttribute(attributes.get('each'), filename, locals);
+    const collection = dynamicAttribute(attributes.get('each'), filename, locals);
     const name = attributes.get('as');
     const key = attributes.get('key');
-    if (!source || !identifier.test(name))
+    if (!collection || !identifier.test(name))
         fail(filename, 'Invalid <Each> binding.');
     if (key !== 'self' && !identifier.test(key))
         fail(filename, '<Each> key must be a field name or "self".');
     const nested = new Map(locals);
     nested.set(name, `${name}.value`);
-    const body = childMarkup(elementChildren(node), filename, nested, sourceText);
+    if (source.hotState) {
+        const parent = locals.get('__workstarContext') ?? '__context';
+        const itemKey = key === 'self' ? `${name}.value` : `${name}.value.${key}`;
+        nested.set('__workstarContext', `${parent}?.child('each:${node.sourceCodeLocation?.startOffset}')?.child(${itemKey})`);
+    }
+    const body = childMarkup(elementChildren(node), filename, nested, source);
     const keyExpression = key === 'self' ? name : `${name}.${key}`;
     return ('${__repeat(() => ' +
-        source +
+        collection +
         ', (' +
         name +
         ') => ' +
@@ -208,14 +238,14 @@ function componentMarkup(node, filename, locals, source) {
     const props = node.attrs
         .filter((attribute) => attribute !== binding && attribute.name !== controlAttribute)
         .map((attribute) => {
-        const name = originalAttributeName(node, attribute.name, source);
+        const name = originalAttributeName(node, attribute.name, source.text);
         if (!identifier.test(name)) {
             fail(filename, `<Use> prop ${name} must be a TypeScript identifier.`);
         }
         const value = dynamicAttribute(attribute.value, filename, locals);
         const authored = node.sourceCodeLocation?.attrs?.[attribute.name];
         const raw = authored
-            ? source.slice(authored.startOffset, authored.endOffset)
+            ? source.text.slice(authored.startOffset, authored.endOffset)
             : '';
         const output = value ?? (raw.includes('=') ? JSON.stringify(attribute.value) : 'true');
         return `${name}: ${output}`;
@@ -228,7 +258,11 @@ function componentMarkup(node, filename, locals, source) {
             childMarkup(children, filename, locals, source) +
             '`');
     }
-    return '${() => ' + renderer + '({' + props.join(', ') + '})}';
+    const context = locals.get('__workstarContext') ?? '__context';
+    const hotArgument = source.hotState
+        ? `, ${context}?.child('use:${node.sourceCodeLocation?.startOffset}')`
+        : '';
+    return ('${() => ' + renderer + '({' + props.join(', ') + '}' + hotArgument + ')}');
 }
 function elementMarkup(node, filename, locals, source) {
     if (!node.sourceCodeLocation)
@@ -268,7 +302,12 @@ function elementMarkup(node, filename, locals, source) {
             fail(filename, `Use on:event instead of ${name}.`);
         }
         const value = dynamicAttribute(attribute.value, filename, locals);
-        if (name.startsWith('on:')) {
+        if (name === 'bind:attrs') {
+            if (!value)
+                fail(filename, 'bind:attrs needs a record expression.');
+            result += '${__attrs(() => ' + value + ')}';
+        }
+        else if (name.startsWith('on:')) {
             if (!value)
                 fail(filename, `${name} needs a handler expression.`);
             result += '${__on(' + JSON.stringify(name.slice(3)) + ', ' + value + ')}';
@@ -318,13 +357,23 @@ function elementMarkup(node, filename, locals, source) {
         `</${tag}>`);
 }
 function nodeMarkup(node, filename, locals, source) {
-    if ('tagName' in node)
-        return elementMarkup(node, filename, locals, source);
-    if ('value' in node)
-        return textMarkup(node.value, filename, locals);
-    if ('data' in node)
-        return `<!--${escapeTemplate(node.data)}-->`;
-    return fail(filename, 'Doctype belongs in the document shell.');
+    try {
+        if ('tagName' in node)
+            return elementMarkup(node, filename, locals, source);
+        if ('value' in node)
+            return textMarkup(node.value, filename, locals);
+        if ('data' in node)
+            return `<!--${escapeTemplate(node.data)}-->`;
+        return fail(filename, 'Doctype belongs in the document shell.');
+    }
+    catch (error) {
+        if (error instanceof ComponentCompileError &&
+            !error.position &&
+            node.sourceCodeLocation) {
+            throw new ComponentCompileError(error.description, filename, source.position(node.sourceCodeLocation.startOffset));
+        }
+        throw error;
+    }
 }
 /** Compile a typed component and its optional co-located stylesheet. */
 export function compileComponentParts(source, filename = 'Component.workstar', options = {}) {
@@ -333,16 +382,26 @@ export function compileComponentParts(source, filename = 'Component.workstar', o
         normalized = normalizeControls(source);
     }
     catch (error) {
+        if (error instanceof ControlSyntaxError) {
+            throw new ComponentCompileError(error.message, filename, sourcePosition(source, error.offset));
+        }
         fail(filename, error instanceof Error ? error.message : String(error));
     }
     const normalizedSource = normalized.source;
+    const markupSource = {
+        text: normalizedSource,
+        hotState: options.hotState ?? false,
+        position: (offset) => sourcePosition(source, normalized.originalOffset(offset)),
+    };
     const errors = [];
     const fragment = parseFragment(normalizedSource, {
         sourceCodeLocationInfo: true,
-        onParseError: (error) => errors.push(`${error.code} at ${error.startLine}:${error.startCol}`),
+        onParseError: (error) => errors.push({ code: error.code, startOffset: error.startOffset }),
     });
-    if (errors.length > 0)
-        fail(filename, errors[0]);
+    if (errors.length > 0) {
+        const error = errors[0];
+        throw new ComponentCompileError(error.code, filename, markupSource.position(error.startOffset));
+    }
     const content = fragment.childNodes.filter((node) => !('value' in node) || node.value.trim().length > 0);
     const first = content[0];
     const hasScript = first && 'tagName' in first && first.tagName === 'script';
@@ -350,11 +409,13 @@ export function compileComponentParts(source, filename = 'Component.workstar', o
         content.some((node) => 'tagName' in node && node.tagName === 'script')) {
         fail(filename, 'A <script lang="ts"> block must come first.');
     }
-    const { moduleScript, setupScript, props } = hasScript
-        ? componentScript(first, filename, options.componentImports ?? 'generated', options.rewriteRelativeImport)
+    const { moduleStatements, setupStatements, props } = hasScript
+        ? componentScript(first, filename, options.componentImports ?? 'generated', markupSource.position, options.rewriteRelativeImport, options.hotState)
         : {
-            moduleScript: 'export type Props = Record<string, never>;',
-            setupScript: '',
+            moduleStatements: [
+                { code: 'export type Props = Record<string, never>;' },
+            ],
+            setupStatements: [],
             props: [],
         };
     const componentBody = hasScript ? content.slice(1) : content;
@@ -387,27 +448,40 @@ export function compileComponentParts(source, filename = 'Component.workstar', o
             }
         }
         catch (error) {
+            const cssStart = last.sourceCodeLocation?.startTag?.endOffset;
+            if (error instanceof StyleCompileError && cssStart !== undefined) {
+                throw new ComponentCompileError(error.message, filename, markupSource.position(cssStart + offsetAtPosition(authoredCss, error.line, error.column)));
+            }
             fail(filename, error instanceof Error ? error.message : String(error));
         }
     }
     assertControlElementsPreserved(normalized.count, markup, filename);
-    const body = childMarkup(markup, filename, new Map(), normalizedSource);
+    const body = childMarkup(markup, filename, new Map(), markupSource);
     if (body.trim().length === 0)
         fail(filename, 'The component has no markup.');
     const destructure = props.length > 0 ? `  const { ${props.join(', ')} } = props;\n` : '';
-    const code = [
-        '// Generated by workstar-compiler. Edit the .workstar source instead.',
-        "import { html as __html, attr as __attr, on as __on, repeat as __repeat, textareaValue as __textareaValue } from 'workstar';",
-        ...(css && options.cssImport
-            ? [`import ${JSON.stringify(options.cssImport)};`]
-            : []),
-        moduleScript,
-        'export function render(props: Props) {',
-        destructure + setupScript + '\n  return __html`' + body + '`;',
-        '}',
-        '',
-    ].join('\n');
-    return { code, css };
+    const code = new ComponentCode();
+    code.append('// Generated by workstar-compiler. Edit the source component instead.\n');
+    code.append("import { html as __html, attr as __attr, attrs as __attrs, on as __on, repeat as __repeat, textareaValue as __textareaValue } from 'workstar';\n");
+    if (options.hotState) {
+        code.append("import type { HotContext as __WorkstarHotContext } from 'workstar/dev';\n");
+    }
+    if (css && options.cssImport) {
+        code.append(`import ${JSON.stringify(options.cssImport)};\n`);
+    }
+    code.appendStatements(moduleStatements, normalized.originalOffset);
+    code.append(options.hotState
+        ? '\nexport function render(props: Props, __context?: __WorkstarHotContext) {\n'
+        : '\nexport function render(props: Props) {\n');
+    code.append(destructure);
+    code.appendStatements(setupStatements, normalized.originalOffset);
+    code.append('\n  ');
+    code.append('return __html`', markup[0]?.sourceCodeLocation
+        ? normalized.originalOffset(markup[0].sourceCodeLocation.startOffset)
+        : undefined);
+    code.append(body);
+    code.append('`;\n}\n');
+    return { code: code.toString(), css, origins: code.origins };
 }
 /** Compile a component to a TypeScript module; use parts to emit its CSS. */
 export function compileComponent(source, filename = 'Component.workstar', options = {}) {

package/dist/src/project.d.ts

@@ -1,8 +1,22 @@
 export interface ProjectStyles {
     cssOutputPath?: string;
 }
-/** Compile one authored view without rewriting unrelated generated modules. */
+export interface ForeignAuditEntry {
+    filename: string;
+    supported: boolean;
+    reason?: string;
+}
+export interface ForeignAudit {
+    total: number;
+    supported: number;
+    entries: ForeignAuditEntry[];
+}
+/** Compile one authored Workstar view without rewriting unrelated generated modules. */
 export declare function compileViewFile(sourcePath: string, outputPath: string, options?: ProjectStyles): Promise<void>;
+/** Compile a supported TSX or Vue SFC through the Workstar runtime. */
+export declare function compileForeignFile(sourcePath: string, outputPath: string, options?: ProjectStyles): Promise<void>;
+/** Report source compatibility without writing generated files or changing the app. */
+export declare function auditForeignDirectory(sourceDirectory: string): Promise<ForeignAudit>;
 /** Compile every view before writing any generated modules. */
 export declare function compileViewDirectory(sourceDirectory: string, outputDirectory: string, options?: ProjectStyles): Promise<string[]>;
 /** Watch a view directory and recompile changed views for local development. */

package/dist/src/project.js

@@ -2,6 +2,9 @@ import { watch } from 'node:fs';
 import { mkdir, readFile, readdir, rm, writeFile } from 'node:fs/promises';
 import { dirname, join, relative, resolve, sep } from 'node:path';
 import { compileComponentParts } from './index.js';
+import { convertForeignComponent } from './compat.js';
+import { reactComponentExportName } from './react-compat.js';
+import { resolveReactComponentImport } from './react-import-resolution.js';
 async function filesInDirectory(directory, include, prefix = '') {
     const entries = await readdir(join(directory, prefix), {
         withFileTypes: true,
@@ -18,13 +21,19 @@ function generatedPath(viewPath) {
     return `${viewPath.slice(0, -'.workstar'.length)}.ts`;
 }
 function relocatedImport(sourcePath, outputPath, specifier) {
+    if (specifier.endsWith('.tsx?workstar')) {
+        const sourceTarget = resolve(dirname(sourcePath), specifier.slice(0, -'?workstar'.length));
+        const generatedTarget = resolve(dirname(outputPath), relative(dirname(sourcePath), sourceTarget).slice(0, -'.tsx'.length));
+        const path = relative(dirname(outputPath), generatedTarget)
+            .split(sep)
+            .join('/');
+        return path.startsWith('.') ? path : `./${path}`;
+    }
     const target = resolve(dirname(sourcePath), specifier);
     const path = relative(dirname(outputPath), target).split(sep).join('/');
     return path.startsWith('.') ? path : `./${path}`;
 }
-/** Compile one authored view without rewriting unrelated generated modules. */
-export async function compileViewFile(sourcePath, outputPath, options = {}) {
-    const source = await readFile(sourcePath, 'utf8');
+async function compileSourceFile(sourcePath, outputPath, source, options, namedExport) {
     const { code, css } = compileComponentParts(source, sourcePath, {
         rewriteRelativeImport: (specifier) => relocatedImport(sourcePath, outputPath, specifier),
     });
@@ -32,12 +41,55 @@ export async function compileViewFile(sourcePath, outputPath, options = {}) {
         throw new Error(`${sourcePath}: pass cssOutputPath to emit component styles.`);
     }
     await mkdir(dirname(outputPath), { recursive: true });
-    await writeFile(outputPath, code, 'utf8');
+    await writeFile(outputPath, code + (namedExport ? `\nexport { render as ${namedExport} };\n` : ''), 'utf8');
     if (options.cssOutputPath) {
         await mkdir(dirname(options.cssOutputPath), { recursive: true });
         await writeFile(options.cssOutputPath, css, 'utf8');
     }
 }
+/** Compile one authored Workstar view without rewriting unrelated generated modules. */
+export async function compileViewFile(sourcePath, outputPath, options = {}) {
+    await compileSourceFile(sourcePath, outputPath, await readFile(sourcePath, 'utf8'), options);
+}
+/** Compile a supported TSX or Vue SFC through the Workstar runtime. */
+export async function compileForeignFile(sourcePath, outputPath, options = {}) {
+    const original = await readFile(sourcePath, 'utf8');
+    const source = convertForeignComponent(original, sourcePath, {
+        resolveReactImport: (specifier) => resolveReactComponentImport(sourcePath, specifier),
+    });
+    const namedExport = sourcePath.endsWith('.tsx')
+        ? reactComponentExportName(original, sourcePath)
+        : undefined;
+    await compileSourceFile(sourcePath, outputPath, source, options, namedExport);
+}
+/** Report source compatibility without writing generated files or changing the app. */
+export async function auditForeignDirectory(sourceDirectory) {
+    const paths = await filesInDirectory(sourceDirectory, (name) => /\.(tsx|vue)$/.test(name) &&
+        !/\.(test|spec|stories)\.(tsx|vue)$/.test(name));
+    const entries = await Promise.all(paths.map(async (filename) => {
+        const sourcePath = join(sourceDirectory, filename);
+        try {
+            const converted = convertForeignComponent(await readFile(sourcePath, 'utf8'), sourcePath, {
+                resolveReactImport: (specifier) => resolveReactComponentImport(sourcePath, specifier),
+            });
+            compileComponentParts(converted, `${sourcePath}.workstar`);
+            return { filename, supported: true };
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            return {
+                filename,
+                supported: false,
+                reason: message.replace(sourcePath, filename),
+            };
+        }
+    }));
+    return {
+        total: entries.length,
+        supported: entries.filter((entry) => entry.supported).length,
+        entries,
+    };
+}
 /** Compile every view before writing any generated modules. */
 export async function compileViewDirectory(sourceDirectory, outputDirectory, options = {}) {
     const viewPaths = await filesInDirectory(sourceDirectory, (name) => name.endsWith('.workstar'));

package/dist/src/react-compat.d.ts

@@ -0,0 +1,6 @@
+/** The source export used by a named TSX import; undefined means default export. */
+export declare function reactComponentExportName(source: string, filename?: string): string | undefined;
+/** Converts one typed, stateless exported function component; unsupported behavior fails closed. */
+export declare function convertReactComponent(source: string, filename?: string, options?: {
+    resolveReactImport?: (specifier: string) => string | undefined;
+}): string;