workstar-compiler 0.1.1 → 0.2.0

package/dist/src/react-entry-compat.js

@@ -0,0 +1,105 @@
+import ts from 'typescript';
+import { reject } from './compat-rules.js';
+function importedNames(statement) {
+    if (statement.importClause?.isTypeOnly || statement.importClause?.name)
+        return [];
+    const bindings = statement.importClause?.namedBindings;
+    if (!bindings || !ts.isNamedImports(bindings))
+        return [];
+    if (bindings.elements.some((element) => element.isTypeOnly || element.propertyName))
+        return [];
+    return bindings.elements.map((element) => element.name.text);
+}
+function containsUnsupportedEntrySyntax(node) {
+    if (ts.isJsxElement(node) ||
+        ts.isJsxSelfClosingElement(node) ||
+        ts.isJsxFragment(node) ||
+        (ts.isIdentifier(node) &&
+            (node.text === 'createRoot' || node.text === 'StrictMode')))
+        return true;
+    return ts.forEachChild(node, containsUnsupportedEntrySyntax) === true;
+}
+function singleComponent(node, strictMode, filename) {
+    let element = node;
+    if (ts.isJsxElement(element)) {
+        if (!strictMode ||
+            element.openingElement.tagName.getText() !== 'StrictMode' ||
+            element.closingElement.tagName.getText() !== 'StrictMode')
+            reject(filename, 'React root entry');
+        const children = element.children.filter((child) => !ts.isJsxText(child) || child.getText().trim() !== '');
+        if (children.length !== 1)
+            reject(filename, 'React root entry');
+        element = children[0];
+    }
+    if (!ts.isJsxSelfClosingElement(element) ||
+        element.attributes.properties.length !== 0 ||
+        !ts.isIdentifier(element.tagName))
+        reject(filename, 'React root entry');
+    return element.tagName.text;
+}
+/** Replace the conventional createRoot entry with a Workstar mount. */
+export function convertReactRootEntry(source, filename) {
+    const file = ts.createSourceFile(filename, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+    const imports = file.statements.filter(ts.isImportDeclaration);
+    const rootImport = imports.find((statement) => ts.isStringLiteral(statement.moduleSpecifier) &&
+        statement.moduleSpecifier.text === 'react-dom/client');
+    if (!rootImport)
+        return undefined;
+    const reactImport = imports.find((statement) => ts.isStringLiteral(statement.moduleSpecifier) &&
+        statement.moduleSpecifier.text === 'react');
+    const strictMode = reactImport !== undefined;
+    if (imports.filter((entry) => ts.isStringLiteral(entry.moduleSpecifier) &&
+        entry.moduleSpecifier.text === 'react-dom/client').length !== 1 ||
+        imports.filter((entry) => ts.isStringLiteral(entry.moduleSpecifier) &&
+            entry.moduleSpecifier.text === 'react').length > 1 ||
+        importedNames(rootImport).join(',') !== 'createRoot' ||
+        (reactImport && importedNames(reactImport).join(',') !== 'StrictMode'))
+        reject(filename, 'React root imports');
+    const statement = file.statements.at(-1);
+    if (!statement || !ts.isExpressionStatement(statement))
+        reject(filename, 'React root entry');
+    const renderCall = statement.expression;
+    if (!ts.isCallExpression(renderCall) ||
+        !ts.isPropertyAccessExpression(renderCall.expression) ||
+        renderCall.expression.name.text !== 'render' ||
+        renderCall.arguments.length !== 1)
+        reject(filename, 'React root entry');
+    const createCall = renderCall.expression.expression;
+    if (!ts.isCallExpression(createCall) ||
+        !ts.isIdentifier(createCall.expression) ||
+        createCall.expression.text !== 'createRoot' ||
+        createCall.arguments.length !== 1 ||
+        !ts.isIdentifier(createCall.arguments[0]))
+        reject(filename, 'React root entry');
+    const component = singleComponent(renderCall.arguments[0], strictMode, filename);
+    if (!imports.some((entry) => ts.isStringLiteral(entry.moduleSpecifier) &&
+        entry.moduleSpecifier.text.startsWith('.') &&
+        importedNames(entry).includes(component)))
+        reject(filename, 'local root component import');
+    if (file.statements.some((entry) => entry !== statement &&
+        !ts.isImportDeclaration(entry) &&
+        containsUnsupportedEntrySyntax(entry)))
+        reject(filename, 'extra React entry syntax');
+    const edits = [
+        { start: rootImport.getStart(file), end: rootImport.getEnd(), text: '' },
+        ...(reactImport
+            ? [
+                {
+                    start: reactImport.getStart(file),
+                    end: reactImport.getEnd(),
+                    text: '',
+                },
+            ]
+            : []),
+        {
+            start: statement.getStart(file),
+            end: statement.getEnd(),
+            text: `mount(${createCall.arguments[0].getText(file)}, ${component}({}));`,
+        },
+    ];
+    let output = source;
+    for (const edit of edits.sort((left, right) => right.start - left.start)) {
+        output = output.slice(0, edit.start) + edit.text + output.slice(edit.end);
+    }
+    return `import { mount } from 'workstar';\n${output}`;
+}

package/dist/src/react-import-resolution.d.ts

@@ -0,0 +1,2 @@
+/** Resolve a local TSX component to an explicit opt-in compatibility import. */
+export declare function resolveReactComponentImport(filename: string, specifier: string): string | undefined;

package/dist/src/react-import-resolution.js

@@ -0,0 +1,15 @@
+import { existsSync } from 'node:fs';
+import { dirname, extname, resolve } from 'node:path';
+/** Resolve a local TSX component to an explicit opt-in compatibility import. */
+export function resolveReactComponentImport(filename, specifier) {
+    if (!specifier.startsWith('.'))
+        return undefined;
+    const candidate = specifier.endsWith('.tsx')
+        ? specifier
+        : extname(specifier) === ''
+            ? `${specifier}.tsx`
+            : undefined;
+    if (!candidate || !existsSync(resolve(dirname(filename), candidate)))
+        return undefined;
+    return `${candidate}?workstar`;
+}

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,12 +1,20 @@
 import { readFile } from 'node:fs/promises';
-import { extname, isAbsolute, relative, resolve, sep } from 'node:path';
+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);
@@ -15,6 +23,13 @@ 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();
@@ -31,20 +46,79 @@ export function workstar(options = {}) {
         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);
@@ -55,6 +129,14 @@ 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, {
@@ -70,6 +152,31 @@ export function workstar(options = {}) {
             };
         },
         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);

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;