workstar-compiler 0.1.0 → 0.1.1

package/README.md

@@ -12,6 +12,13 @@ workstar-compile --all src .workstar/generated --css .workstar/styles.css
 
 For Vite, import `workstar` from `workstar-compiler/vite` and add `workstar()` to `plugins`. Vite compiles imported components in memory; the CLI is for explicit output and type checking.
 
+During Vite development, the compiler adds state identities for direct local
+`signal()` declarations. Pass a stable `HotContext` from `workstar/dev` to a
+root component when accepting Vite updates, as shown in the static starter.
+Production output does not include this instrumentation. The compiler maps
+script statements and the markup entry point back to authored source in Vite;
+individual markup expressions are not mapped yet.
+
 Inside `<script lang="ts">`, imports and an optional exported `Props` type define the component contract. Top-level `const`, `let`, and function declarations create state and behavior for each component instance; import `signal` from `workstar` for reactive local state. Keep module-wide shared state in an imported TypeScript module when sharing is intentional.
 
 `<noscript>` accepts static text only. Put links and localized expressions elsewhere in the page; nested markup would be parsed as raw text and dynamic markers cannot hydrate reliably.

package/dist/src/component-script.d.ts

@@ -1,6 +1,14 @@
 import type { DefaultTreeAdapterTypes as Html } from 'parse5';
-export declare function componentScript(node: Html.Element, filename: string, componentImports: 'generated' | 'source', rewriteRelativeImport?: (specifier: string) => string): {
-    moduleScript: string;
-    setupScript: string;
+export interface ScriptStatement {
+    readonly code: string;
+    readonly sourceOffset?: number | undefined;
+    readonly exact?: boolean;
+}
+export declare function componentScript(node: Html.Element, filename: string, componentImports: 'generated' | 'source', sourcePosition: (offset: number) => {
+    line: number;
+    column: number;
+}, rewriteRelativeImport?: (specifier: string) => string, hotState?: boolean): {
+    moduleStatements: ScriptStatement[];
+    setupStatements: ScriptStatement[];
     props: string[];
 };

package/dist/src/component-script.js

@@ -1,15 +1,46 @@
 import ts from 'typescript';
-import { fail } from './errors.js';
-export function componentScript(node, filename, componentImports, rewriteRelativeImport) {
+import { ComponentCompileError } from './errors.js';
+function preserveLocalSignals(statement, file, signalBindings) {
+    const statementStart = statement.getStart(file);
+    let code = statement.getText(file);
+    const signals = statement.declarationList.declarations.flatMap((declaration) => {
+        const initializer = declaration.initializer;
+        if (!ts.isIdentifier(declaration.name) ||
+            !initializer ||
+            !ts.isCallExpression(initializer) ||
+            !ts.isIdentifier(initializer.expression) ||
+            !signalBindings.has(initializer.expression.text))
+            return [];
+        return [{ name: declaration.name.text, initializer }];
+    });
+    for (const { name, initializer } of signals.reverse()) {
+        const start = initializer.getStart(file) - statementStart;
+        const end = initializer.getEnd() - statementStart;
+        const original = code.slice(start, end);
+        const retained = `__context?.state(${JSON.stringify(`${name}:${original}`)}, () => ${original})`;
+        code =
+            code.slice(0, start) + `(${retained} ?? ${original})` + code.slice(end);
+    }
+    return signals.length > 0 ? code : undefined;
+}
+export function componentScript(node, filename, componentImports, sourcePosition, rewriteRelativeImport, hotState = false) {
     if (node.attrs.length !== 1 ||
         node.attrs[0]?.name !== 'lang' ||
         node.attrs[0].value !== 'ts') {
-        fail(filename, 'The component script must be <script lang="ts">.');
+        throw new ComponentCompileError('The component script must be <script lang="ts">.', filename, node.sourceCodeLocation
+            ? sourcePosition(node.sourceCodeLocation.startOffset)
+            : undefined);
     }
+    const scriptStart = node.sourceCodeLocation?.startTag?.endOffset;
+    const failAt = (message, offset = 0) => {
+        throw new ComponentCompileError(message, filename, scriptStart === undefined
+            ? undefined
+            : sourcePosition(scriptStart + offset));
+    };
     const script = node.childNodes
         .map((child) => {
         if (!('value' in child))
-            fail(filename, 'Invalid script content.');
+            return failAt('Invalid script content.');
         return child.value;
     })
         .join('');
@@ -18,90 +49,128 @@ export function componentScript(node, filename, componentImports, rewriteRelativ
         fileName: filename.replace(/\.workstar$/, '.ts'),
         reportDiagnostics: true,
     });
-    if (syntax.diagnostics?.some((diagnostic) => diagnostic.category === ts.DiagnosticCategory.Error)) {
-        fail(filename, 'Invalid TypeScript in component script.');
+    const syntaxError = syntax.diagnostics?.find((diagnostic) => diagnostic.category === ts.DiagnosticCategory.Error);
+    if (syntaxError) {
+        failAt(`Invalid TypeScript in component script: ${ts.flattenDiagnosticMessageText(syntaxError.messageText, ' ')}`, syntaxError.start ?? 0);
     }
     let props;
+    const signalBindings = new Set();
     const moduleStatements = [];
     const setupStatements = [];
     for (const statement of file.statements) {
         if (ts.isEmptyStatement(statement))
             continue;
+        const sourceOffset = scriptStart === undefined
+            ? undefined
+            : scriptStart + statement.getStart(file);
         if (ts.isImportDeclaration(statement)) {
             const specifier = ts.isStringLiteral(statement.moduleSpecifier)
                 ? statement.moduleSpecifier.text
                 : '';
+            const named = statement.importClause?.namedBindings;
+            if (specifier === 'workstar' && named && ts.isNamedImports(named)) {
+                for (const binding of named.elements) {
+                    if ((binding.propertyName ?? binding.name).text === 'signal') {
+                        signalBindings.add(binding.name.text);
+                    }
+                }
+            }
             if (specifier.endsWith('.workstar')) {
                 const binding = statement.importClause?.name?.text;
                 if (!/^(?:\.{1,2}\/)+(?:[A-Za-z0-9][\w-]*\/)*[A-Za-z0-9][\w-]*\.workstar$/.test(specifier) ||
                     !binding ||
                     statement.importClause?.isTypeOnly ||
                     statement.importClause?.namedBindings) {
-                    fail(filename, 'Import a relative .workstar view with a default import.');
+                    failAt('Import a relative .workstar view with a default import.', statement.getStart(file));
                 }
-                moduleStatements.push(`import { render as ${binding} } from '${componentImports === 'source' ? specifier : specifier.slice(0, -'.workstar'.length)}';`);
+                moduleStatements.push({
+                    code: `import { render as ${binding} } from '${componentImports === 'source' ? specifier : specifier.slice(0, -'.workstar'.length)}';`,
+                    sourceOffset,
+                });
             }
             else if (specifier.startsWith('.') && rewriteRelativeImport) {
                 const importText = statement.getText(file);
                 const start = statement.moduleSpecifier.getStart(file) - statement.getStart(file);
                 const end = statement.moduleSpecifier.getEnd() - statement.getStart(file);
-                moduleStatements.push(importText.slice(0, start) +
-                    JSON.stringify(rewriteRelativeImport(specifier)) +
-                    importText.slice(end));
+                moduleStatements.push({
+                    code: importText.slice(0, start) +
+                        JSON.stringify(rewriteRelativeImport(specifier)) +
+                        importText.slice(end),
+                    sourceOffset,
+                });
             }
             else {
-                moduleStatements.push(statement.getText(file));
+                moduleStatements.push({
+                    code: statement.getText(file),
+                    sourceOffset,
+                    exact: true,
+                });
             }
             continue;
         }
         if (ts.isInterfaceDeclaration(statement) &&
             statement.name.text === 'Props') {
             if (props)
-                fail(filename, 'The component can declare Props only once.');
+                failAt('The component can declare Props only once.', statement.getStart(file));
             props = statement.members.map((member) => {
                 if (!ts.isPropertySignature(member) ||
                     !member.name ||
                     !ts.isIdentifier(member.name)) {
-                    fail(filename, 'Props must use named properties.');
+                    return failAt('Props must use named properties.', member.getStart(file));
                 }
                 return member.name.text;
             });
-            moduleStatements.push(statement.getText(file));
+            moduleStatements.push({
+                code: statement.getText(file),
+                sourceOffset,
+                exact: true,
+            });
             continue;
         }
         if (ts.isTypeAliasDeclaration(statement) &&
             statement.name.text === 'Props' &&
             ts.isTypeLiteralNode(statement.type)) {
             if (props)
-                fail(filename, 'The component can declare Props only once.');
+                failAt('The component can declare Props only once.', statement.getStart(file));
             props = statement.type.members.map((member) => {
                 if (!ts.isPropertySignature(member) ||
                     !member.name ||
                     !ts.isIdentifier(member.name)) {
-                    fail(filename, 'Props must use named properties.');
+                    return failAt('Props must use named properties.', member.getStart(file));
                 }
                 return member.name.text;
             });
-            moduleStatements.push(statement.getText(file));
+            moduleStatements.push({
+                code: statement.getText(file),
+                sourceOffset,
+                exact: true,
+            });
             continue;
         }
         if (ts.isVariableStatement(statement) ||
             ts.isFunctionDeclaration(statement)) {
             if (statement.modifiers?.some((modifier) => modifier.kind === ts.SyntaxKind.ExportKeyword)) {
-                fail(filename, 'Component-local declarations cannot be exported.');
+                failAt('Component-local declarations cannot be exported.', statement.getStart(file));
             }
-            setupStatements.push(statement.getText(file));
+            const retained = hotState && ts.isVariableStatement(statement)
+                ? preserveLocalSignals(statement, file, signalBindings)
+                : undefined;
+            setupStatements.push({
+                code: retained ?? statement.getText(file),
+                sourceOffset,
+                exact: retained === undefined,
+            });
             continue;
         }
-        fail(filename, 'Only imports, Props, and component-local variables/functions are supported in the script.');
+        failAt('Only imports, Props, and component-local variables/functions are supported in the script.', statement.getStart(file));
     }
     if (!props) {
         props = [];
-        moduleStatements.push('type Props = Record<string, never>;');
+        moduleStatements.push({ code: 'type Props = Record<string, never>;' });
     }
     return {
-        moduleScript: moduleStatements.join('\n'),
-        setupScript: setupStatements.join('\n'),
+        moduleStatements,
+        setupStatements,
         props,
     };
 }

package/dist/src/control-elements.d.ts

@@ -2,6 +2,11 @@ export declare const controlAttribute = "data-workstar-compiler-control";
 export interface NormalizedControls {
     source: string;
     count: number;
+    originalOffset: (normalizedOffset: number) => number;
+}
+export declare class ControlSyntaxError extends Error {
+    readonly offset: number;
+    constructor(message: string, offset: number);
 }
 /** Adapt authoring controls to HTML parser insertion modes, including select and table. */
 export declare function normalizeControls(source: string): NormalizedControls;

package/dist/src/control-elements.js

@@ -1,5 +1,13 @@
 const controlNames = new Set(['Each', 'If', 'Else', 'Use']);
 export const controlAttribute = 'data-workstar-compiler-control';
+export class ControlSyntaxError extends Error {
+    offset;
+    constructor(message, offset) {
+        super(message);
+        this.offset = offset;
+        this.name = 'ControlSyntaxError';
+    }
+}
 function tagEnd(source, start) {
     let quote;
     for (let index = start + 1; index < source.length; index++) {
@@ -15,19 +23,28 @@ function tagEnd(source, start) {
             return index;
         }
     }
-    throw new Error('Unclosed HTML tag.');
+    throw new ControlSyntaxError('Unclosed HTML tag.', start);
 }
 /** Adapt authoring controls to HTML parser insertion modes, including select and table. */
 export function normalizeControls(source) {
     if (source.includes(controlAttribute)) {
-        throw new Error(`${controlAttribute} is reserved for the compiler.`);
+        throw new ControlSyntaxError(`${controlAttribute} is reserved for the compiler.`, source.indexOf(controlAttribute));
     }
-    const scriptEnd = /<\/script\s*>/i.exec(source);
-    const start = scriptEnd ? scriptEnd.index + scriptEnd[0].length : 0;
-    let result = source.slice(0, start);
-    let cursor = start;
+    let result = '';
+    let cursor = 0;
     let count = 0;
     const stack = [];
+    const replacements = [];
+    const appendReplacement = (authoredStart, authoredEnd, replacement) => {
+        const generatedStart = result.length;
+        result += replacement;
+        replacements.push({
+            generatedStart,
+            generatedEnd: result.length,
+            authoredStart,
+            authoredEnd,
+        });
+    };
     while (cursor < source.length) {
         const opening = source.indexOf('<', cursor);
         if (opening < 0)
@@ -36,7 +53,7 @@ export function normalizeControls(source) {
         if (source.startsWith('<!--', opening)) {
             const end = source.indexOf('-->', opening + 4);
             if (end < 0)
-                throw new Error('Unclosed HTML comment.');
+                throw new ControlSyntaxError('Unclosed HTML comment.', opening);
             result += source.slice(opening, end + 3);
             cursor = end + 3;
             continue;
@@ -48,8 +65,9 @@ export function normalizeControls(source) {
         if (!name || !controlNames.has(name)) {
             result += tag;
             cursor = end + 1;
-            if (/^<textarea(?=[\s>])/i.test(tag)) {
-                const closing = /<\/textarea\s*>/gi;
+            const rawTextTag = /^<(script|style|textarea)(?=[\s>])/i.exec(tag)?.[1];
+            if (rawTextTag) {
+                const closing = new RegExp(`</${rawTextTag}\\s*>`, 'gi');
                 closing.lastIndex = cursor;
                 const close = closing.exec(source);
                 if (close) {
@@ -62,31 +80,48 @@ export function normalizeControls(source) {
         const closing = match[1] === '/';
         const selfClosing = /\/\s*>$/.test(tag);
         if (closing) {
-            if (stack.pop() !== name) {
-                throw new Error(`Mismatched </${name}> control element.`);
+            if (stack.pop()?.name !== name) {
+                throw new ControlSyntaxError(`Mismatched </${name}> control element.`, opening);
             }
-            result += '</template>';
+            appendReplacement(opening, end + 1, '</template>');
         }
         else {
             if (selfClosing && name !== 'Use') {
-                throw new Error(`<${name}> cannot be self-closing.`);
+                throw new ControlSyntaxError(`<${name}> cannot be self-closing.`, opening);
             }
             const authoredAttributes = tag.slice(match[0].length, -1);
             const attributes = selfClosing
                 ? authoredAttributes.replace(/\/\s*$/, '')
                 : authoredAttributes;
-            result += `<template ${controlAttribute}="${name}"${attributes}>`;
-            if (selfClosing)
-                result += '</template>';
-            else
-                stack.push(name);
+            appendReplacement(opening, end + 1, `<template ${controlAttribute}="${name}"${attributes}>${selfClosing ? '</template>' : ''}`);
+            if (!selfClosing)
+                stack.push({ name, offset: opening });
             count++;
         }
         cursor = end + 1;
     }
     result += source.slice(cursor);
     if (stack.length > 0) {
-        throw new Error(`Unclosed <${stack.at(-1)}> control element.`);
+        const unclosed = stack.at(-1);
+        throw new ControlSyntaxError(`Unclosed <${unclosed.name}> control element.`, unclosed.offset);
     }
-    return { source: result, count };
+    return {
+        source: result,
+        count,
+        originalOffset(normalizedOffset) {
+            let difference = 0;
+            for (const replacement of replacements) {
+                if (normalizedOffset < replacement.generatedStart)
+                    break;
+                if (normalizedOffset < replacement.generatedEnd) {
+                    return replacement.authoredStart;
+                }
+                difference +=
+                    replacement.generatedEnd -
+                        replacement.generatedStart -
+                        (replacement.authoredEnd - replacement.authoredStart);
+            }
+            return normalizedOffset - difference;
+        },
+    };
 }

package/dist/src/errors.d.ts

@@ -1,5 +1,13 @@
 export declare class ComponentCompileError extends Error {
+    readonly description: string;
     readonly filename: string;
-    constructor(message: string, filename: string);
+    readonly position?: {
+        readonly line: number;
+        readonly column: number;
+    } | undefined;
+    constructor(description: string, filename: string, position?: {
+        readonly line: number;
+        readonly column: number;
+    } | undefined);
 }
 export declare function fail(filename: string, message: string): never;

package/dist/src/errors.js

@@ -1,8 +1,12 @@
 export class ComponentCompileError extends Error {
+    description;
     filename;
-    constructor(message, filename) {
-        super(`${filename}: ${message}`);
+    position;
+    constructor(description, filename, position) {
+        super(`${filename}${position ? `:${position.line}:${position.column}` : ''}: ${description}`);
+        this.description = description;
         this.filename = filename;
+        this.position = position;
         this.name = 'ComponentCompileError';
     }
 }

package/dist/src/index.d.ts

@@ -1,16 +1,20 @@
+import { type SourceOrigin } from './source-origin.js';
 export { ComponentCompileError } from './errors.js';
 /** Compile a typed component and its optional co-located stylesheet. */
 export declare function compileComponentParts(source: string, filename?: string, options?: {
     componentImports?: 'generated' | 'source';
     rewriteRelativeImport?: (specifier: string) => string;
     cssImport?: string;
+    hotState?: boolean;
 }): {
     code: string;
     css: string;
+    origins: SourceOrigin[];
 };
 /** Compile a component to a TypeScript module; use parts to emit its CSS. */
 export declare function compileComponent(source: string, filename?: string, options?: {
     componentImports?: 'generated' | 'source';
     rewriteRelativeImport?: (specifier: string) => string;
     cssImport?: string;
+    hotState?: boolean;
 }): string;

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)
@@ -318,13 +352,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 +377,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 +404,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 +443,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 .workstar source instead.\n');
+    code.append("import { html as __html, attr as __attr, 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/source-map.d.ts

@@ -0,0 +1,7 @@
+import { type RawSourceMap } from 'source-map-js';
+import type { SourceOrigin } from './source-origin.js';
+/** Keep authored script locations while lowering generated TypeScript to Vite JavaScript. */
+export declare function transpileComponent(generated: string, authored: string, filename: string, origins: readonly SourceOrigin[]): {
+    code: string;
+    map: RawSourceMap;
+};

package/dist/src/source-map.js

@@ -0,0 +1,50 @@
+import { basename } from 'node:path';
+import { SourceMapConsumer, SourceMapGenerator, } from 'source-map-js';
+import ts from 'typescript';
+function positionAt(source, offset) {
+    const before = source.slice(0, offset);
+    const newline = before.lastIndexOf('\n');
+    return {
+        line: before.split('\n').length,
+        column: offset - newline - 1,
+    };
+}
+function componentSourceMap(authored, generated, sourceName, intermediateName, origins) {
+    const map = new SourceMapGenerator({ file: intermediateName });
+    for (const origin of origins) {
+        map.addMapping({
+            generated: positionAt(generated, origin.generatedOffset),
+            original: positionAt(authored, origin.authoredOffset),
+            source: sourceName,
+        });
+    }
+    map.setSourceContent(sourceName, authored);
+    return map.toJSON();
+}
+/** Keep authored script locations while lowering generated TypeScript to Vite JavaScript. */
+export function transpileComponent(generated, authored, filename, origins) {
+    const intermediateName = `${basename(filename)}.generated.ts`;
+    const output = ts.transpileModule(generated, {
+        fileName: intermediateName,
+        compilerOptions: {
+            module: ts.ModuleKind.ESNext,
+            target: ts.ScriptTarget.ES2022,
+            sourceMap: true,
+            inlineSources: true,
+        },
+    });
+    if (!output.sourceMapText)
+        throw new Error('TypeScript did not emit a source map.');
+    const typescriptMap = JSON.parse(output.sourceMapText);
+    const intermediateSource = typescriptMap.sources[0];
+    if (!intermediateSource)
+        throw new Error('TypeScript emitted an empty source map.');
+    const authoredMap = componentSourceMap(authored, generated, filename, intermediateName, origins);
+    const composed = SourceMapGenerator.fromSourceMap(new SourceMapConsumer(typescriptMap));
+    composed.applySourceMap(new SourceMapConsumer(authoredMap), intermediateSource);
+    composed.setSourceContent(filename, authored);
+    return {
+        code: output.outputText.replace(/^\/\/# sourceMappingURL=.*\n?/m, ''),
+        map: composed.toJSON(),
+    };
+}

package/dist/src/source-origin.d.ts

@@ -0,0 +1,14 @@
+import type { ScriptStatement } from './component-script.js';
+export interface SourceOrigin {
+    readonly generatedOffset: number;
+    readonly authoredOffset: number;
+}
+/** Records provenance while assembling the generated TypeScript module. */
+export declare class ComponentCode {
+    private readonly parts;
+    private length;
+    readonly origins: SourceOrigin[];
+    append(code: string, authoredOffset?: number, exact?: boolean): void;
+    appendStatements(statements: readonly ScriptStatement[], sourceOffset: (offset: number) => number): void;
+    toString(): string;
+}

package/dist/src/source-origin.js

@@ -0,0 +1,41 @@
+/** Records provenance while assembling the generated TypeScript module. */
+export class ComponentCode {
+    parts = [];
+    length = 0;
+    origins = [];
+    append(code, authoredOffset, exact = false) {
+        if (authoredOffset !== undefined) {
+            this.origins.push({
+                generatedOffset: this.length,
+                authoredOffset,
+            });
+            if (exact) {
+                for (const match of code.matchAll(/\n([^\n]*)/g)) {
+                    const line = match[1] ?? '';
+                    const firstToken = /\S/.exec(line)?.index;
+                    if (firstToken === undefined)
+                        continue;
+                    const offset = match.index + 1 + firstToken;
+                    this.origins.push({
+                        generatedOffset: this.length + offset,
+                        authoredOffset: authoredOffset + offset,
+                    });
+                }
+            }
+        }
+        this.parts.push(code);
+        this.length += code.length;
+    }
+    appendStatements(statements, sourceOffset) {
+        statements.forEach((statement, index) => {
+            if (index > 0)
+                this.append('\n');
+            this.append(statement.code, statement.sourceOffset === undefined
+                ? undefined
+                : sourceOffset(statement.sourceOffset), statement.exact);
+        });
+    }
+    toString() {
+        return this.parts.join('');
+    }
+}

package/dist/src/styles.d.ts

@@ -2,5 +2,10 @@ export interface CompiledStyle {
     css: string;
     scopeAttribute?: string;
 }
+export declare class StyleCompileError extends Error {
+    readonly line: number;
+    readonly column: number;
+    constructor(message: string, line: number, column: number);
+}
 /** Compile CSS at build time; styles never depend on client hydration. */
 export declare function compileStyle(css: string, filename: string, global?: boolean): CompiledStyle;

package/dist/src/styles.js

@@ -1,6 +1,16 @@
 import { createHash } from 'node:crypto';
 import postcss from 'postcss';
 import selectorParser from 'postcss-selector-parser';
+export class StyleCompileError extends Error {
+    line;
+    column;
+    constructor(message, line, column) {
+        super(message);
+        this.line = line;
+        this.column = column;
+        this.name = 'StyleCompileError';
+    }
+}
 function scopeSelector(selector, attribute) {
     const scopeNode = selectorParser().astSync(`:where([${attribute}])`).first
         ?.first;
@@ -34,23 +44,36 @@ function scopeSelector(selector, attribute) {
 }
 /** Compile CSS at build time; styles never depend on client hydration. */
 export function compileStyle(css, filename, global = false) {
-    const root = postcss.parse(css, { from: filename });
-    root.walkAtRules((rule) => {
-        if (rule.name === 'import' || rule.name === 'charset') {
-            throw new Error(`${filename}: @${rule.name} belongs in a global stylesheet.`);
-        }
-        if (/keyframes$/i.test(rule.name) && !global) {
-            throw new Error(`${filename}: put @keyframes in <style global>.`);
+    try {
+        const root = postcss.parse(css, { from: filename });
+        root.walkAtRules((rule) => {
+            if (rule.name === 'import' || rule.name === 'charset') {
+                throw rule.error(`@${rule.name} belongs in a global stylesheet.`);
+            }
+            if (/keyframes$/i.test(rule.name) && !global) {
+                throw rule.error('Put @keyframes in <style global>.');
+            }
+        });
+        if (global)
+            return { css: root.toString().trim() };
+        const scopeAttribute = `data-workstar-${createHash('sha256')
+            .update(filename)
+            .digest('hex')
+            .slice(0, 10)}`;
+        root.walkRules((rule) => {
+            try {
+                rule.selector = scopeSelector(rule.selector, scopeAttribute);
+            }
+            catch (error) {
+                throw rule.error(error instanceof Error ? error.message : String(error));
+            }
+        });
+        return { css: root.toString().trim(), scopeAttribute };
+    }
+    catch (error) {
+        if (error instanceof postcss.CssSyntaxError) {
+            throw new StyleCompileError(error.reason, error.line ?? 1, error.column ?? 1);
         }
-    });
-    if (global)
-        return { css: root.toString().trim() };
-    const scopeAttribute = `data-workstar-${createHash('sha256')
-        .update(filename)
-        .digest('hex')
-        .slice(0, 10)}`;
-    root.walkRules((rule) => {
-        rule.selector = scopeSelector(rule.selector, scopeAttribute);
-    });
-    return { css: root.toString().trim(), scopeAttribute };
+        throw error;
+    }
 }

package/dist/src/vite.js

@@ -1,11 +1,13 @@
 import { readFile } from 'node:fs/promises';
 import { extname, isAbsolute, relative, resolve, sep } from 'node:path';
-import ts from 'typescript';
 import { compileComponentParts } from './index.js';
+import { transpileComponent } from './source-map.js';
 /** Compile authored components as Vite modules without writing into src. */
 export function workstar(options = {}) {
     let sourceDirectory;
+    let development = false;
     const styleSuffix = '.css?workstar-style';
+    const compiled = new Map();
     function isAuthoredComponent(filename) {
         const localPath = relative(sourceDirectory, filename);
         return (extname(localPath) === '.workstar' &&
@@ -13,11 +15,28 @@ export function workstar(options = {}) {
             !localPath.startsWith(`..${sep}`) &&
             !isAbsolute(localPath));
     }
+    function rootComponents(modules) {
+        const roots = new Set();
+        const visited = new Set();
+        function visit(module) {
+            if (visited.has(module))
+                return;
+            visited.add(module);
+            const parents = [...module.importers].filter((importer) => importer.id && isAuthoredComponent(importer.id.split('?', 1)[0]));
+            if (parents.length === 0)
+                roots.add(module);
+            else
+                parents.forEach(visit);
+        }
+        modules.forEach(visit);
+        return [...roots];
+    }
     return {
         name: 'workstar',
         enforce: 'pre',
         configResolved(config) {
             sourceDirectory = resolve(config.root, options.source ?? 'src');
+            development = config.command === 'serve';
         },
         resolveId(id) {
             if (!id.endsWith(styleSuffix))
@@ -41,26 +60,37 @@ export function workstar(options = {}) {
             const generated = compileComponentParts(source, filename, {
                 componentImports: 'source',
                 cssImport: `${filename}${styleSuffix}`,
+                hotState: development,
             });
+            compiled.set(filename, generated);
+            const output = transpileComponent(generated.code, source, filename, generated.origins);
             return {
-                code: ts.transpileModule(generated.code, {
-                    fileName: filename,
-                    compilerOptions: {
-                        module: ts.ModuleKind.ESNext,
-                        target: ts.ScriptTarget.ES2022,
-                    },
-                }).outputText,
-                map: null,
+                code: output.code,
+                map: JSON.stringify(output.map),
             };
         },
-        handleHotUpdate(context) {
+        async handleHotUpdate(context) {
             if (!isAuthoredComponent(context.file))
                 return;
+            const previous = compiled.get(context.file);
+            const next = compileComponentParts(await context.read(), context.file, {
+                componentImports: 'source',
+                cssImport: `${context.file}${styleSuffix}`,
+                hotState: development,
+            });
             const stylesheet = context.server.moduleGraph.getModuleById(`${context.file}${styleSuffix}`);
             if (!stylesheet)
                 return;
             context.server.moduleGraph.invalidateModule(stylesheet);
-            return [...context.modules, stylesheet];
+            if (previous &&
+                previous.code === next.code &&
+                previous.css !== next.css) {
+                compiled.set(context.file, next);
+                return [stylesheet];
+            }
+            const roots = rootComponents(context.modules);
+            roots.forEach((module) => context.server.moduleGraph.invalidateModule(module));
+            return [...roots, stylesheet];
         },
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "workstar-compiler",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Component compiler and Vite plugin for Workstar applications.",
   "type": "module",
   "license": "MIT",
@@ -38,6 +38,7 @@
     "parse5": "^8.0.0",
     "postcss": "^8.5.28",
     "postcss-selector-parser": "^7.1.6",
+    "source-map-js": "^1.2.1",
     "typescript": "^6.0.3"
   },
   "peerDependencies": {