workstar-compiler 0.1.1 → 0.2.0-beta.0

package/README.md

@@ -10,7 +10,7 @@ The `workstar-compile` command compiles one component or a directory:
 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.
+For Vite, import `workstar` from `workstar-compiler/vite` and add `workstar()` to `plugins`. Vite compiles explicit `?workstar` component imports in memory. Use `workstar({ foreign: 'automatic' })` to compile ordinary TSX/Vue imports under `src`, including a supported `createRoot(...).render(...)` entry. Use `workstar({ foreign: 'runtime' })` for unchanged React TSX applications that need Workstar-backed state and routing. The runtime mode is experimental and does not yet reproduce every React behavior. 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
@@ -21,6 +21,10 @@ 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.
 
+Use `bind:attrs={record}` on a native element to spread a plain record of checked HTML attributes. The record can be reactive. Event handlers, styles, refs, and unsafe URLs are rejected; bind events explicitly with `on:event`.
+
 `<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.
 
 See the [Workstar repository](https://github.com/wslab-ai/workstar) for starters and current limitations.
+
+For experimental React-style TSX and Vue SFC source conversion without their runtimes, see the [compatibility guide](https://github.com/wslab-ai/workstar/blob/main/docs/foreign-components.md). Use `?workstar` imports with the Vite plugin or `workstar-compile --compat` with any other build system.

package/bin/workstar-compile.mjs

@@ -2,8 +2,10 @@
 import { resolve } from 'node:path';
 import {
   compileViewFile,
+  compileForeignFile,
   compileViewDirectory,
   watchViewDirectory,
+  auditForeignDirectory,
 } from '../dist/src/project.js';
 
 const args = process.argv.slice(2);
@@ -13,7 +15,10 @@ try {
     (args.length === 4 && args[2] === '--css')
       ? { cssOutputPath: resolve(args.at(-1)) }
       : {};
-  if (
+  if (args.length === 2 && args[0] === '--compat-audit') {
+    const report = await auditForeignDirectory(resolve(args[1]));
+    process.stdout.write(`${JSON.stringify(report, null, 2)}\n`);
+  } else if (
     (args.length === 3 || (args.length === 5 && args[3] === '--css')) &&
     args[0] === '--all'
   ) {
@@ -35,6 +40,13 @@ try {
     process.stdout.write(
       `Watching ${resolve(args[1])} for .workstar changes.\n`,
     );
+  } else if (
+    (args.length === 3 || (args.length === 5 && args[3] === '--css')) &&
+    args[0] === '--compat' &&
+    /\.(tsx|vue)$/.test(args[1] ?? '') &&
+    args[2]?.endsWith('.ts')
+  ) {
+    await compileForeignFile(resolve(args[1]), resolve(args[2]), cssOption);
   } else if (
     (args.length === 2 || (args.length === 4 && args[2] === '--css')) &&
     args[0]?.endsWith('.workstar') &&
@@ -45,7 +57,9 @@ try {
   } else {
     process.stderr.write(
       'Usage: workstar-compile input.workstar output.ts [--css public/components.css]\n' +
+        '       workstar-compile --compat input.tsx|input.vue output.ts [--css public/components.css]\n' +
         '       workstar-compile --all source-directory output-directory [--css public/components.css]\n' +
+        '       workstar-compile --compat-audit source-directory\n' +
         '       workstar-compile --watch source-directory output-directory [--css public/components.css]\n',
     );
     process.exitCode = 2;

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

@@ -0,0 +1,2 @@
+export declare const pathExpression: RegExp;
+export declare function reject(filename: string, reason: string): never;

package/dist/src/compat-rules.js

@@ -0,0 +1,4 @@
+export const pathExpression = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*$/;
+export function reject(filename, reason) {
+    throw new Error(filename + ': unsupported compatibility syntax: ' + reason);
+}

package/dist/src/compat.d.ts

@@ -0,0 +1,5 @@
+export { convertReactComponent } from './react-compat.js';
+export { convertVueComponent } from './vue-compat.js';
+export declare function convertForeignComponent(source: string, filename: string, options?: {
+    resolveReactImport?: (specifier: string) => string | undefined;
+}): string;

package/dist/src/compat.js

@@ -0,0 +1,12 @@
+import { convertReactComponent } from './react-compat.js';
+import { convertVueComponent } from './vue-compat.js';
+import { reject } from './compat-rules.js';
+export { convertReactComponent } from './react-compat.js';
+export { convertVueComponent } from './vue-compat.js';
+export function convertForeignComponent(source, filename, options = {}) {
+    if (filename.endsWith('.tsx'))
+        return convertReactComponent(source, filename, options);
+    if (filename.endsWith('.vue'))
+        return convertVueComponent(source, filename);
+    return reject(filename, 'file extension');
+}

package/dist/src/index.js

@@ -302,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 + ')}';
@@ -456,8 +461,8 @@ export function compileComponentParts(source, filename = 'Component.workstar', o
         fail(filename, 'The component has no markup.');
     const destructure = props.length > 0 ? `  const { ${props.join(', ')} } = props;\n` : '';
     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");
+    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");
     }

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;

package/dist/src/react-compat.js

@@ -0,0 +1,369 @@
+import ts from 'typescript';
+import { pathExpression, reject } from './compat-rules.js';
+const voidTags = new Set([
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'link',
+    'meta',
+    'param',
+    'source',
+    'track',
+    'wbr',
+]);
+const nativeEvents = new Map([
+    ['onBlur', 'blur'],
+    ['onClick', 'click'],
+    ['onDoubleClick', 'dblclick'],
+    ['onFocus', 'focus'],
+    ['onInput', 'input'],
+    ['onKeyDown', 'keydown'],
+    ['onKeyUp', 'keyup'],
+    ['onMouseEnter', 'mouseenter'],
+    ['onMouseLeave', 'mouseleave'],
+    ['onPointerDown', 'pointerdown'],
+    ['onPointerMove', 'pointermove'],
+    ['onPointerUp', 'pointerup'],
+    ['onSubmit', 'submit'],
+    ['onTouchEnd', 'touchend'],
+    ['onTouchMove', 'touchmove'],
+    ['onTouchStart', 'touchstart'],
+]);
+function expression(node, file, filename, setup, defaults) {
+    const value = node.getText(file);
+    if (pathExpression.test(value) && defaults.length === 0)
+        return '{' + value + '}';
+    if (!isStatelessExpression(node))
+        reject(filename, 'expression ' + value);
+    const name = `__workstarExpression${setup.length}`;
+    const bindings = defaults.map((element) => element.getText(file)).join(', ');
+    const argumentsList = defaults
+        .map((element) => element.name.getText(file))
+        .join(', ');
+    const computed = defaults.length
+        ? `((${bindings}) => (${value}))(${argumentsList})`
+        : value;
+    setup.push(`const ${name} = ${computed};`);
+    return '{' + name + '}';
+}
+function isStatelessExpression(node) {
+    if (ts.isIdentifier(node) ||
+        ts.isStringLiteral(node) ||
+        ts.isNumericLiteral(node) ||
+        node.kind === ts.SyntaxKind.TrueKeyword ||
+        node.kind === ts.SyntaxKind.FalseKeyword)
+        return true;
+    if (ts.isParenthesizedExpression(node))
+        return isStatelessExpression(node.expression);
+    if (ts.isPropertyAccessExpression(node))
+        return isStatelessExpression(node.expression);
+    if (ts.isTemplateExpression(node))
+        return node.templateSpans.every((span) => isStatelessExpression(span.expression));
+    if (ts.isNoSubstitutionTemplateLiteral(node))
+        return true;
+    if (ts.isBinaryExpression(node) &&
+        node.operatorToken.kind === ts.SyntaxKind.PlusToken)
+        return (isStatelessExpression(node.left) && isStatelessExpression(node.right));
+    return (ts.isCallExpression(node) &&
+        ts.isPropertyAccessExpression(node.expression) &&
+        node.expression.name.text === 'trim' &&
+        node.arguments.length === 0 &&
+        isStatelessExpression(node.expression.expression));
+}
+function attributeName(original, filename) {
+    if (original === 'className')
+        return 'class';
+    if (original === 'htmlFor')
+        return 'for';
+    if (/^on[A-Z]/.test(original)) {
+        const event = nativeEvents.get(original);
+        if (!event)
+            reject(filename, 'event ' + original);
+        return 'on:' + event;
+    }
+    return original;
+}
+function attributes(input, file, filename, setup, defaults, component = false, restName) {
+    let output = '';
+    for (const attribute of input.properties) {
+        if (ts.isJsxSpreadAttribute(attribute)) {
+            if (component ||
+                !restName ||
+                !ts.isIdentifier(attribute.expression) ||
+                attribute.expression.text !== restName)
+                reject(filename, 'spread attribute');
+            output += ' bind:attrs={__workstarRest}';
+            continue;
+        }
+        if (!ts.isIdentifier(attribute.name))
+            reject(filename, 'namespaced JSX attribute');
+        const original = attribute.name.text;
+        if (['style', 'ref', 'key', 'dangerouslySetInnerHTML'].includes(original) ||
+            (!component && original === 'onChange')) {
+            reject(filename, 'attribute ' + original);
+        }
+        const name = component ? original : attributeName(original, filename);
+        if (!/^[a-z][a-z0-9:._-]*$/i.test(name))
+            reject(filename, 'attribute ' + original);
+        if (component && !/^[A-Za-z_$][\w$]*$/.test(name))
+            reject(filename, 'component prop ' + original);
+        if (!attribute.initializer) {
+            output += ' ' + name + (component ? '' : '=""');
+        }
+        else if (ts.isStringLiteral(attribute.initializer)) {
+            output +=
+                ' ' +
+                    name +
+                    '="' +
+                    attribute.initializer.text
+                        .replace(/&/g, '&')
+                        .replace(/"/g, '"') +
+                    '"';
+        }
+        else if (ts.isJsxExpression(attribute.initializer) &&
+            attribute.initializer.expression) {
+            output +=
+                ' ' +
+                    name +
+                    '=' +
+                    expression(attribute.initializer.expression, file, filename, setup, defaults);
+        }
+        else {
+            reject(filename, 'attribute ' + original);
+        }
+    }
+    return output;
+}
+function jsx(node, file, filename, setup, defaults, components, restName) {
+    if (ts.isJsxText(node)) {
+        const value = node.getText(file);
+        if (/[{}]/.test(value))
+            reject(filename, 'literal JSX braces');
+        return value;
+    }
+    if (ts.isJsxExpression(node)) {
+        if (!node.expression)
+            reject(filename, 'empty JSX expression');
+        return expression(node.expression, file, filename, setup, defaults);
+    }
+    if (ts.isJsxFragment(node))
+        return node.children
+            .map((child) => jsx(child, file, filename, setup, defaults, components, restName))
+            .join('');
+    const opening = ts.isJsxElement(node) ? node.openingElement : node;
+    const tag = opening.tagName.getText(file);
+    const component = components.has(tag);
+    if (!component && !/^[a-z][a-z0-9-]*$/.test(tag))
+        reject(filename, 'component or tag ' + tag);
+    const start = (component ? `<Use component={${tag}}` : `<${tag}`) +
+        attributes(opening.attributes, file, filename, setup, defaults, component, restName) +
+        '>';
+    if (voidTags.has(tag)) {
+        if (ts.isJsxElement(node))
+            reject(filename, 'children of ' + tag);
+        return start;
+    }
+    const children = ts.isJsxElement(node)
+        ? node.children
+            .map((child) => jsx(child, file, filename, setup, defaults, components, restName))
+            .join('')
+        : '';
+    return start + children + (component ? '</Use>' : `</${tag}>`);
+}
+function exportedComponent(file, filename) {
+    const components = file.statements.filter((statement) => ts.isFunctionDeclaration(statement) &&
+        statement.modifiers?.some((modifier) => modifier.kind === ts.SyntaxKind.ExportKeyword) === true);
+    if (components.length !== 1 || !components[0]?.body)
+        reject(filename, 'one exported function component');
+    return components[0];
+}
+/** The source export used by a named TSX import; undefined means default export. */
+export function reactComponentExportName(source, filename = 'Component.tsx') {
+    const file = ts.createSourceFile(filename, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+    const component = exportedComponent(file, filename);
+    return component.modifiers?.some((modifier) => modifier.kind === ts.SyntaxKind.DefaultKeyword)
+        ? undefined
+        : component.name?.text;
+}
+/** Converts one typed, stateless exported function component; unsupported behavior fails closed. */
+export function convertReactComponent(source, filename = 'Component.tsx', options = {}) {
+    const diagnostics = ts.transpileModule(source, {
+        fileName: filename,
+        reportDiagnostics: true,
+        compilerOptions: { jsx: ts.JsxEmit.Preserve },
+    }).diagnostics ?? [];
+    if (diagnostics.some((diagnostic) => diagnostic.category === ts.DiagnosticCategory.Error)) {
+        reject(filename, 'invalid TSX syntax');
+    }
+    const file = ts.createSourceFile(filename, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+    const component = exportedComponent(file, filename);
+    if (!component.body)
+        reject(filename, 'component body');
+    if (component.asteriskToken ||
+        component.modifiers?.some((modifier) => ![ts.SyntaxKind.ExportKeyword, ts.SyntaxKind.DefaultKeyword].includes(modifier.kind)))
+        reject(filename, 'async or generator component');
+    const declarations = file.statements.filter((statement) => statement !== component);
+    const imports = [];
+    const components = new Set();
+    const reactTypes = new Set();
+    for (const statement of declarations) {
+        if (!ts.isImportDeclaration(statement))
+            continue;
+        const original = ts.isStringLiteral(statement.moduleSpecifier)
+            ? statement.moduleSpecifier.text
+            : '';
+        const clause = statement.importClause;
+        if (original === 'react' && clause?.isTypeOnly) {
+            if (!clause.namedBindings || !ts.isNamedImports(clause.namedBindings))
+                reject(filename, 'React type import');
+            for (const binding of clause.namedBindings.elements) {
+                reactTypes.add(binding.name.text);
+            }
+            imports.push(statement.getText(file));
+            continue;
+        }
+        const rewritten = options.resolveReactImport?.(original) ??
+            (original.endsWith('.tsx?workstar') ? original : undefined);
+        if (!rewritten || !clause || clause.isTypeOnly)
+            reject(filename, 'imports or module statements');
+        if (clause.name)
+            components.add(clause.name.text);
+        if (clause.namedBindings) {
+            if (!ts.isNamedImports(clause.namedBindings))
+                reject(filename, 'namespace component import');
+            for (const binding of clause.namedBindings.elements) {
+                if (!binding.isTypeOnly)
+                    components.add(binding.name.text);
+            }
+        }
+        const text = statement.getText(file);
+        const start = statement.moduleSpecifier.getStart(file) - statement.getStart(file);
+        const end = statement.moduleSpecifier.getEnd() - statement.getStart(file);
+        imports.push(text.slice(0, start) + JSON.stringify(rewritten) + text.slice(end));
+    }
+    const typeDeclarations = declarations.filter((statement) => !ts.isImportDeclaration(statement));
+    if (typeDeclarations.some((statement) => !ts.isInterfaceDeclaration(statement) &&
+        !ts.isTypeAliasDeclaration(statement))) {
+        reject(filename, 'imports or module statements');
+    }
+    if (component.parameters.length > 1)
+        reject(filename, 'multiple component parameters');
+    const parameter = component.parameters[0];
+    let props = '';
+    const declaredProps = new Set();
+    if (parameter) {
+        if (!ts.isObjectBindingPattern(parameter.name) || !parameter.type)
+            reject(filename, 'typed destructured props');
+        const binding = parameter.name;
+        if (binding.elements.some((element) => !ts.isIdentifier(element.name) ||
+            Boolean(element.propertyName) ||
+            (Boolean(element.dotDotDotToken) &&
+                element !== binding.elements.at(-1)) ||
+            (element.initializer !== undefined &&
+                !isLiteralDefault(element.initializer))))
+            reject(filename, 'renamed, defaulted, or rest props');
+        if (ts.isTypeLiteralNode(parameter.type)) {
+            props = 'export type Props = ' + parameter.type.getText(file) + ';';
+            for (const member of parameter.type.members) {
+                if (ts.isPropertySignature(member) && ts.isIdentifier(member.name))
+                    declaredProps.add(member.name.text);
+            }
+        }
+        else if (ts.isTypeReferenceNode(parameter.type) &&
+            ts.isIdentifier(parameter.type.typeName)) {
+            const typeName = parameter.type.typeName.text;
+            const declaration = typeDeclarations.find((statement) => (ts.isInterfaceDeclaration(statement) ||
+                ts.isTypeAliasDeclaration(statement)) &&
+                statement.name.text === typeName);
+            if (!declaration ||
+                (!ts.isInterfaceDeclaration(declaration) &&
+                    !ts.isTypeAliasDeclaration(declaration)))
+                reject(filename, 'Props declaration');
+            if ((ts.isInterfaceDeclaration(declaration) &&
+                declaration.heritageClauses?.some((clause) => clause.types.some((type) => !ts.isIdentifier(type.expression) ||
+                    !reactTypes.has(type.expression.text) ||
+                    type.expression.text !== 'HTMLAttributes'))) ||
+                (ts.isTypeAliasDeclaration(declaration) &&
+                    !ts.isTypeLiteralNode(declaration.type))) {
+                reject(filename, 'inherited or non-literal Props');
+            }
+            const members = ts.isInterfaceDeclaration(declaration)
+                ? declaration.members
+                : ts.isTypeAliasDeclaration(declaration) &&
+                    ts.isTypeLiteralNode(declaration.type)
+                    ? declaration.type.members
+                    : [];
+            for (const member of members) {
+                if (ts.isPropertySignature(member) && ts.isIdentifier(member.name))
+                    declaredProps.add(member.name.text);
+            }
+            const declarationText = declaration.getText(file);
+            const nameStart = declaration.name.getStart(file) - declaration.getStart(file);
+            const nameEnd = declaration.name.getEnd() - declaration.getStart(file);
+            props =
+                (declaration.modifiers?.some((modifier) => modifier.kind === ts.SyntaxKind.ExportKeyword)
+                    ? ''
+                    : 'export ') +
+                    declarationText.slice(0, nameStart) +
+                    'Props' +
+                    declarationText.slice(nameEnd);
+        }
+        else {
+            reject(filename, 'Props type');
+        }
+    }
+    else if (typeDeclarations.length) {
+        reject(filename, 'unused module declarations');
+    }
+    const onlyStatement = component.body.statements[0];
+    if (component.body.statements.length !== 1 ||
+        !onlyStatement ||
+        !ts.isReturnStatement(onlyStatement) ||
+        !onlyStatement.expression)
+        reject(filename, 'component logic');
+    let view = onlyStatement.expression;
+    while (ts.isParenthesizedExpression(view))
+        view = view.expression;
+    if (!ts.isJsxElement(view) &&
+        !ts.isJsxSelfClosingElement(view) &&
+        !ts.isJsxFragment(view)) {
+        reject(filename, 'non-JSX return');
+    }
+    const setup = [];
+    const defaults = parameter && ts.isObjectBindingPattern(parameter.name)
+        ? parameter.name.elements.filter((element) => element.initializer !== undefined)
+        : [];
+    const elements = parameter && ts.isObjectBindingPattern(parameter.name)
+        ? parameter.name.elements
+        : [];
+    const rest = elements.find((element) => element.dotDotDotToken);
+    const restName = rest && ts.isIdentifier(rest.name) ? rest.name.text : undefined;
+    const additionalBindings = elements
+        .filter((element) => !element.dotDotDotToken &&
+        ts.isIdentifier(element.name) &&
+        !declaredProps.has(element.name.text))
+        .map((element) => element.name.getText(file));
+    if (additionalBindings.length)
+        setup.push(`const { ${additionalBindings.join(', ')} } = props;`);
+    if (restName) {
+        if (restName === '__workstarRest')
+            reject(filename, 'reserved rest prop name');
+        setup.push(`const __workstarRest = ((${parameter.name.getText(file)}: Props) => ${restName})(props);`);
+    }
+    const markup = jsx(view, file, filename, setup, defaults, components, restName);
+    const script = [...imports, props, ...setup].filter(Boolean).join('\n');
+    return ((script ? '<script lang="ts">\n' + script + '\n</script>\n' : '') +
+        markup +
+        '\n');
+}
+function isLiteralDefault(node) {
+    return (ts.isStringLiteral(node) ||
+        ts.isNumericLiteral(node) ||
+        node.kind === ts.SyntaxKind.TrueKeyword ||
+        node.kind === ts.SyntaxKind.FalseKeyword);
+}

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

@@ -0,0 +1,2 @@
+/** Replace the conventional createRoot entry with a Workstar mount. */
+export declare function convertReactRootEntry(source: string, filename: string): string | undefined;