workstar-compiler 0.1.0 → 0.2.0-beta.0

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.d.ts

@@ -1,6 +1,10 @@
 import type { Plugin } from 'vite';
 export interface WorkstarPluginOptions {
     source?: string;
+    /** Compile ordinary TSX/Vue imports within source, without ?workstar. */
+    foreign?: 'explicit' | 'automatic' | 'runtime';
+    /** Optional absolute runtime directory for isolated migration builds. */
+    runtimeImportSource?: string;
 }
 /** Compile authored components as Vite modules without writing into src. */
 export declare function workstar(options?: WorkstarPluginOptions): Plugin;

package/dist/src/vite.js

@@ -1,11 +1,21 @@
 import { readFile } from 'node:fs/promises';
-import { extname, isAbsolute, relative, resolve, sep } from 'node:path';
-import ts from 'typescript';
+import { dirname, extname, isAbsolute, relative, resolve, sep, } from 'node:path';
 import { compileComponentParts } from './index.js';
+import { convertForeignComponent } from './compat.js';
+import { convertReactRootEntry } from './react-entry-compat.js';
+import { reactComponentExportName } from './react-compat.js';
+import { resolveReactComponentImport } from './react-import-resolution.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 foreignPrefix = '\0workstar-foreign:';
+    const foreignStylePrefix = '\0workstar-foreign-style:';
+    const foreignStylePublic = 'virtual:workstar-foreign-style:';
+    const foreignStyles = new Map();
+    const compiled = new Map();
     function isAuthoredComponent(filename) {
         const localPath = relative(sourceDirectory, filename);
         return (extname(localPath) === '.workstar' &&
@@ -13,19 +23,102 @@ export function workstar(options = {}) {
             !localPath.startsWith(`..${sep}`) &&
             !isAbsolute(localPath));
     }
+    function isForeignSource(filename) {
+        const localPath = relative(sourceDirectory, filename);
+        return ((filename.endsWith('.tsx') || filename.endsWith('.vue')) &&
+            localPath !== '..' &&
+            !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];
+    }
+    function compileForeignSource(source, filename) {
+        const converted = convertForeignComponent(source, filename, {
+            resolveReactImport: (specifier) => resolveReactComponentImport(filename, specifier),
+        });
+        const namedExport = filename.endsWith('.tsx')
+            ? reactComponentExportName(source, filename)
+            : undefined;
+        const generated = compileComponentParts(converted, `${filename}.workstar`, {
+            cssImport: foreignStylePublic + encodeURIComponent(filename) + '.css',
+        });
+        foreignStyles.set(filename, generated.css);
+        const output = transpileComponent(`${generated.code}\nexport { render as ${namedExport ?? 'default'} };\n`, converted, filename, generated.origins);
+        return { code: output.code, map: null };
+    }
     return {
         name: 'workstar',
         enforce: 'pre',
+        config() {
+            if (options.foreign !== 'runtime')
+                return;
+            const runtime = options.runtimeImportSource ?? 'workstar/compat/react';
+            const react = isAbsolute(runtime) ? `${runtime}/index.js` : runtime;
+            const client = isAbsolute(runtime)
+                ? `${runtime}/client.js`
+                : `${runtime}/client`;
+            const router = isAbsolute(runtime)
+                ? resolve(runtime, '../react-router/index.js')
+                : 'workstar/compat/react-router';
+            return {
+                esbuild: {
+                    jsx: 'automatic',
+                    jsxImportSource: runtime,
+                },
+                resolve: {
+                    alias: [
+                        { find: 'react-router', replacement: router },
+                        { find: 'react-dom/client', replacement: client },
+                        { find: 'react', replacement: react },
+                    ],
+                },
+            };
+        },
         configResolved(config) {
             sourceDirectory = resolve(config.root, options.source ?? 'src');
+            development = config.command === 'serve';
         },
-        resolveId(id) {
+        resolveId(id, importer) {
+            if (id.startsWith(foreignStylePublic)) {
+                const encoded = id.slice(foreignStylePublic.length, -'.css'.length);
+                return foreignStylePrefix + decodeURIComponent(encoded) + '.css';
+            }
+            if (id.endsWith('?workstar') && importer && id.startsWith('.')) {
+                const importerPath = importer.startsWith(foreignPrefix)
+                    ? importer.slice(foreignPrefix.length)
+                    : importer.split('?', 1)[0];
+                const filename = resolve(dirname(importerPath), id.slice(0, -'?workstar'.length));
+                return isForeignSource(filename) ? foreignPrefix + filename : null;
+            }
             if (!id.endsWith(styleSuffix))
                 return null;
             const filename = id.slice(0, -styleSuffix.length);
             return isAuthoredComponent(filename) ? id : null;
         },
         async load(id) {
+            if (id.startsWith(foreignStylePrefix)) {
+                return (foreignStyles.get(id.slice(foreignStylePrefix.length, -'.css'.length)) ?? null);
+            }
+            if (id.startsWith(foreignPrefix)) {
+                const filename = id.slice(foreignPrefix.length);
+                this.addWatchFile(filename);
+                const source = await readFile(filename, 'utf8');
+                return compileForeignSource(source, filename);
+            }
             if (!id.endsWith(styleSuffix))
                 return null;
             const filename = id.slice(0, -styleSuffix.length);
@@ -36,31 +129,75 @@ export function workstar(options = {}) {
         },
         transform(source, id) {
             const filename = id.split('?', 1)[0];
+            if (options.foreign === 'automatic' && isForeignSource(filename)) {
+                const entry = filename.endsWith('.tsx')
+                    ? convertReactRootEntry(source, filename)
+                    : undefined;
+                if (entry)
+                    return { code: entry, map: null };
+                return compileForeignSource(source, filename);
+            }
             if (!isAuthoredComponent(filename))
                 return null;
             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 (options.foreign !== 'runtime' && isForeignSource(context.file)) {
+                const filename = context.file;
+                const source = await context.read();
+                const entry = options.foreign === 'automatic' && filename.endsWith('.tsx')
+                    ? convertReactRootEntry(source, filename)
+                    : undefined;
+                if (!entry) {
+                    const converted = convertForeignComponent(source, filename, {
+                        resolveReactImport: (specifier) => resolveReactComponentImport(filename, specifier),
+                    });
+                    const next = compileComponentParts(converted, `${filename}.workstar`);
+                    foreignStyles.set(filename, next.css);
+                }
+                const components = [
+                    context.server.moduleGraph.getModuleById(foreignPrefix + filename),
+                    options.foreign === 'automatic'
+                        ? context.server.moduleGraph.getModuleById(filename)
+                        : undefined,
+                ].filter((module) => module !== undefined);
+                const stylesheet = context.server.moduleGraph.getModuleById(foreignStylePrefix + filename + '.css');
+                components.forEach((module) => context.server.moduleGraph.invalidateModule(module));
+                if (stylesheet)
+                    context.server.moduleGraph.invalidateModule(stylesheet);
+                return [...components, stylesheet].filter((module) => module !== undefined);
+            }
             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/dist/src/vue-compat.d.ts

@@ -0,0 +1,2 @@
+/** Converts Vue SFC markup with typed defineProps and optional CSS. */
+export declare function convertVueComponent(source: string, filename?: string): string;

package/dist/src/vue-compat.js

@@ -0,0 +1,168 @@
+import { parseFragment } from 'parse5';
+import { pathExpression, reject } from './compat-rules.js';
+import { convertVueScript } from './vue-script-compat.js';
+function content(source, node, filename) {
+    const location = node.sourceCodeLocation;
+    if (!location?.startTag || !location.endTag)
+        reject(filename, 'unclosed ' + node.tagName);
+    return source.slice(location.startTag.endOffset, location.endTag.startOffset);
+}
+function templatePath(path, refs, stores, filename) {
+    if (!pathExpression.test(path))
+        reject(filename, 'expression ' + path);
+    const root = path.split('.', 1)[0];
+    const fields = stores.get(root);
+    if (fields) {
+        const field = path.slice(root.length + 1).split('.', 1)[0];
+        if (!fields.has(field))
+            reject(filename, 'store field ' + path);
+        return path;
+    }
+    if (!refs.has(root))
+        return path;
+    const suffix = path.slice(root.length);
+    if (suffix.startsWith('.value'))
+        reject(filename, 'explicit .value in a Vue template');
+    return root + '.value' + suffix;
+}
+/** Converts Vue SFC markup with typed defineProps and optional CSS. */
+export function convertVueComponent(source, filename = 'Component.vue') {
+    const blockErrors = [];
+    const fragment = parseFragment(source, {
+        sourceCodeLocationInfo: true,
+        onParseError: (error) => blockErrors.push(error.code),
+    });
+    if (blockErrors.length)
+        reject(filename, 'invalid SFC markup: ' + blockErrors[0]);
+    const meaningful = fragment.childNodes.filter((node) => !('value' in node) || node.value.trim());
+    if (meaningful.some((node) => !('tagName' in node)))
+        reject(filename, 'content outside SFC blocks');
+    const blocks = meaningful;
+    if (blocks.some((node) => !['template', 'script', 'style'].includes(node.tagName)))
+        reject(filename, 'unknown SFC block');
+    const templates = blocks.filter((node) => node.tagName === 'template');
+    const scripts = blocks.filter((node) => node.tagName === 'script');
+    const styles = blocks.filter((node) => node.tagName === 'style');
+    if (templates.length !== 1 || scripts.length > 1 || styles.length > 1)
+        reject(filename, 'SFC block count');
+    if (templates[0].attrs.length)
+        reject(filename, 'template attributes');
+    let scriptContent = '';
+    let refs = new Set();
+    let stores = new Map();
+    if (scripts[0]) {
+        const attrs = new Map(scripts[0].attrs.map((attribute) => [attribute.name, attribute.value]));
+        if (attrs.size !== 2 || !attrs.has('setup') || attrs.get('lang') !== 'ts')
+            reject(filename, 'script setup attributes');
+        const converted = convertVueScript(content(source, scripts[0], filename), filename);
+        scriptContent = [converted.props, converted.setup]
+            .filter(Boolean)
+            .join('\n');
+        refs = converted.refs;
+        stores = converted.stores;
+    }
+    let markup = content(source, templates[0], filename);
+    const templateErrors = [];
+    const templateTree = parseFragment(markup, {
+        sourceCodeLocationInfo: true,
+        onParseError: (error) => templateErrors.push(error.code),
+    });
+    if (templateErrors.length)
+        reject(filename, 'invalid template markup: ' + templateErrors[0]);
+    const replacements = [];
+    const visit = (nodes) => {
+        for (const node of nodes) {
+            if (!('tagName' in node)) {
+                if ('value' in node && node.sourceCodeLocation) {
+                    const offset = node.sourceCodeLocation.startOffset;
+                    const raw = markup.slice(offset, node.sourceCodeLocation.endOffset);
+                    for (const match of raw.matchAll(/\{\{([^{}]+)\}\}/g)) {
+                        const value = templatePath(match[1].trim(), refs, stores, filename);
+                        replacements.push({
+                            start: offset + match.index,
+                            end: offset + match.index + match[0].length,
+                            value: '{' + value + '}',
+                        });
+                    }
+                }
+                continue;
+            }
+            const start = node.sourceCodeLocation?.startTag?.startOffset;
+            const originalTag = start === undefined
+                ? ''
+                : /^<\s*([A-Za-z][\w-]*)/.exec(markup.slice(start))?.[1];
+            if (!originalTag ||
+                /^[A-Z]/.test(originalTag) ||
+                originalTag === 'slot' ||
+                originalTag === 'component')
+                reject(filename, 'Vue component tag');
+            for (const attribute of node.attrs) {
+                const name = attribute.name;
+                if (!name.startsWith(':') && !name.startsWith('@')) {
+                    if (name.startsWith('v-') ||
+                        name.startsWith('#') ||
+                        name === 'ref' ||
+                        name === 'key')
+                        reject(filename, 'Vue directive');
+                    continue;
+                }
+                const target = name.slice(1);
+                if (!/^[a-z][a-z0-9-]*$/.test(target) ||
+                    target === 'style' ||
+                    target === 'class' ||
+                    target === 'key' ||
+                    target === 'ref' ||
+                    !pathExpression.test(attribute.value)) {
+                    reject(filename, 'Vue directive ' + name);
+                }
+                const root = attribute.value.split('.', 1)[0];
+                if (name.startsWith('@') && (refs.has(root) || stores.has(root)))
+                    reject(filename, 'state used as event handler');
+                const location = node.sourceCodeLocation?.attrs?.[name];
+                if (!location)
+                    reject(filename, 'Vue directive ' + name);
+                replacements.push({
+                    start: location.startOffset,
+                    end: location.endOffset,
+                    value: (name.startsWith('@') ? 'on:' : '') +
+                        target +
+                        '={' +
+                        (name.startsWith('@')
+                            ? attribute.value
+                            : templatePath(attribute.value, refs, stores, filename)) +
+                        '}',
+                });
+            }
+            visit(node.tagName === 'template'
+                ? node.content.childNodes
+                : node.childNodes);
+        }
+    };
+    visit(templateTree.childNodes);
+    for (const replacement of replacements.sort((left, right) => right.start - left.start)) {
+        markup =
+            markup.slice(0, replacement.start) +
+                replacement.value +
+                markup.slice(replacement.end);
+    }
+    if (markup.includes('{{') || markup.includes('}}'))
+        reject(filename, 'unparsed interpolation');
+    let style = '';
+    if (styles[0]) {
+        const attrs = styles[0].attrs;
+        if (attrs.length > 1 || (attrs.length === 1 && attrs[0]?.name !== 'scoped'))
+            reject(filename, 'style attributes');
+        style =
+            '<style' +
+                (attrs.length ? '' : ' global') +
+                '>\n' +
+                content(source, styles[0], filename) +
+                '\n</style>\n';
+    }
+    return ((scriptContent
+        ? '<script lang="ts">\n' + scriptContent + '\n</script>\n'
+        : '') +
+        markup +
+        '\n' +
+        style);
+}

package/dist/src/vue-script-compat.d.ts

@@ -0,0 +1,8 @@
+export interface VueScriptCompat {
+    readonly props: string;
+    readonly setup: string;
+    readonly refs: ReadonlySet<string>;
+    readonly stores: ReadonlyMap<string, ReadonlySet<string>>;
+}
+/** Translate primitive Vue refs, flat reactive records, props, and their handlers. */
+export declare function convertVueScript(script: string, filename: string): VueScriptCompat;