@knighted/jsx 1.9.0 → 1.9.2

package/README.md

@@ -94,6 +94,21 @@ transpileJsxSource(input, {
 })
 ```
 
+By default, TypeScript syntax is preserved in the output. If your source needs to run directly
+as JavaScript (for example, code entered in an editor), enable type stripping:
+
+```ts
+transpileJsxSource(input, {
+  typescript: 'strip',
+})
+```
+
+Supported `typescript` modes:
+
+- `'preserve'` (default): keep TypeScript syntax in output.
+- `'strip'`: remove type-only declarations and erase inline type syntax (`: T`, `as T`,
+  `satisfies T`, non-null assertions, and type assertions) while still transpiling JSX.
+
 ### React runtime (`reactJsx`)
 
 Need to compose React elements instead of DOM nodes? Import the dedicated helper from the `@knighted/jsx/react` subpath (React 18+ and `react-dom` are still required to mount the tree):

package/dist/cjs/transpile.cjs

@@ -35,15 +35,24 @@ const isSourceRange = (value) => Array.isArray(value) &&
     typeof value[0] === 'number' &&
     typeof value[1] === 'number';
 const hasSourceRange = (value) => isObjectRecord(value) && isSourceRange(value.range);
+const tsWrapperExpressionNodeTypes = new Set([
+    'TSAsExpression',
+    'TSSatisfiesExpression',
+    'TSInstantiationExpression',
+    'TSNonNullExpression',
+    'TSTypeAssertion',
+]);
 const compareByRangeStartDesc = (first, second) => second.range[0] - first.range[0];
 class SourceJsxReactBuilder {
     source;
     createElementRef;
     fragmentRef;
-    constructor(source, createElementRef, fragmentRef) {
+    stripTypes;
+    constructor(source, createElementRef, fragmentRef, stripTypes) {
         this.source = source;
         this.createElementRef = createElementRef;
         this.fragmentRef = fragmentRef;
+        this.stripTypes = stripTypes;
     }
     compile(node) {
         return this.compileNode(node);
@@ -179,6 +188,17 @@ class SourceJsxReactBuilder {
         if (node.type === 'JSXElement' || node.type === 'JSXFragment') {
             return this.compileNode(node);
         }
+        if (this.stripTypes && isObjectRecord(node)) {
+            if ('expression' in node && node.type === 'ParenthesizedExpression') {
+                return `(${this.compileExpression(node.expression)})`;
+            }
+            if ('expression' in node &&
+                typeof node.type === 'string' &&
+                tsWrapperExpressionNodeTypes.has(node.type)) {
+                return this.compileExpression(node.expression);
+            }
+        }
+        /* c8 ignore next 3 -- defensive guard for malformed external AST nodes */
         if (!hasSourceRange(node)) {
             throw new Error('[jsx] Unable to read source range for expression node.');
         }
@@ -230,26 +250,182 @@ const collectRootJsxNodes = (root) => {
     walk(root, false);
     return nodes;
 };
+const MAX_TYPESCRIPT_STRIP_PASSES = 5;
+const hasStringProperty = (value, key) => isObjectRecord(value) && typeof value[key] === 'string';
+const hasSourceAndExpressionRanges = (value) => isObjectRecord(value) &&
+    typeof value.type === 'string' &&
+    hasSourceRange(value) &&
+    'expression' in value &&
+    hasSourceRange(value.expression);
+const isTypeOnlyImportExport = (value) => hasStringProperty(value, 'importKind')
+    ? value.importKind === 'type'
+    : hasStringProperty(value, 'exportKind') && value.exportKind === 'type';
+const isTypeOnlyNode = (value) => {
+    if (!isObjectRecord(value) || typeof value.type !== 'string') {
+        return false;
+    }
+    return [
+        'TSTypeAnnotation',
+        'TSTypeParameterDeclaration',
+        'TSTypeAliasDeclaration',
+        'TSInterfaceDeclaration',
+        'TSDeclareFunction',
+        'TSImportEqualsDeclaration',
+        'TSNamespaceExportDeclaration',
+        'TSModuleDeclaration',
+    ].includes(value.type);
+};
+const createStripEditForTsWrapper = (value, source) => {
+    if (!hasSourceAndExpressionRanges(value)) {
+        return null;
+    }
+    if (value.type !== 'TSAsExpression' &&
+        value.type !== 'TSSatisfiesExpression' &&
+        value.type !== 'TSInstantiationExpression' &&
+        value.type !== 'TSNonNullExpression' &&
+        value.type !== 'TSTypeAssertion') {
+        return null;
+    }
+    const [exprStart, exprEnd] = value.expression.range;
+    return {
+        range: value.range,
+        replacement: source.slice(exprStart, exprEnd),
+    };
+};
+const collectTypeScriptStripEdits = (source, root) => {
+    const edits = [];
+    const walk = (value) => {
+        if (!isObjectRecord(value)) {
+            return;
+        }
+        if (Array.isArray(value)) {
+            value.forEach(walk);
+            return;
+        }
+        if (hasSourceRange(value)) {
+            if (isTypeOnlyNode(value) || isTypeOnlyImportExport(value)) {
+                edits.push({ range: value.range });
+                return;
+            }
+            else {
+                const wrapperEdit = createStripEditForTsWrapper(value, source);
+                if (wrapperEdit) {
+                    edits.push(wrapperEdit);
+                    return;
+                }
+            }
+        }
+        for (const entry of Object.values(value)) {
+            walk(entry);
+        }
+    };
+    walk(root);
+    return edits;
+};
+const rangeOverlaps = (first, second) => first[0] < second[1] && second[0] < first[1];
+const compareStripEditPriority = (first, second) => {
+    const firstLength = first.range[1] - first.range[0];
+    const secondLength = second.range[1] - second.range[0];
+    if (firstLength !== secondLength) {
+        return secondLength - firstLength;
+    }
+    return compareByRangeStartDesc(first, second);
+};
+const applyStripEdits = (magic, edits) => {
+    if (!edits.length) {
+        return false;
+    }
+    const appliedRanges = [];
+    let changed = false;
+    edits
+        .slice()
+        .sort(compareStripEditPriority)
+        .forEach(edit => {
+        /* c8 ignore next -- overlap handling is defensive after de-duplicated collection */
+        if (appliedRanges.some(range => rangeOverlaps(range, edit.range))) {
+            return;
+        }
+        const [start, end] = edit.range;
+        if (edit.replacement === undefined) {
+            magic.remove(start, end);
+        }
+        else {
+            magic.overwrite(start, end, edit.replacement);
+        }
+        appliedRanges.push(edit.range);
+        changed = true;
+    });
+    return changed;
+};
+const stripTypeScriptSyntax = (source, sourceType) => {
+    let currentCode = source;
+    let changed = false;
+    let reachedStripPassLimit = true;
+    for (let pass = 0; pass < MAX_TYPESCRIPT_STRIP_PASSES; pass += 1) {
+        const parsed = (0, oxc_parser_1.parseSync)('transpile-jsx-source.tsx', currentCode, createModuleParserOptions(sourceType));
+        const error = parsed.errors[0];
+        if (error) {
+            throw new Error(formatParserError(error));
+        }
+        const edits = collectTypeScriptStripEdits(currentCode, parsed.program);
+        if (!edits.length) {
+            reachedStripPassLimit = false;
+            break;
+        }
+        const magic = new magic_string_1.default(currentCode);
+        const passChanged = applyStripEdits(magic, edits);
+        if (!passChanged) {
+            reachedStripPassLimit = false;
+            break;
+        }
+        currentCode = magic.toString();
+        changed = true;
+    }
+    if (reachedStripPassLimit) {
+        const parsed = (0, oxc_parser_1.parseSync)('transpile-jsx-source.tsx', currentCode, createModuleParserOptions(sourceType));
+        const error = parsed.errors[0];
+        if (error) {
+            throw new Error(formatParserError(error));
+        }
+        const remainingEdits = collectTypeScriptStripEdits(currentCode, parsed.program);
+        if (remainingEdits.length) {
+            throw new Error(`[jsx] TypeScript strip did not converge after ${MAX_TYPESCRIPT_STRIP_PASSES} passes (${remainingEdits.length} removable TypeScript nodes remain).`);
+        }
+    }
+    return {
+        code: currentCode,
+        changed,
+    };
+};
 function transpileJsxSource(source, options = {}) {
     const sourceType = options.sourceType ?? 'module';
     const createElementRef = options.createElement ?? 'React.createElement';
     const fragmentRef = options.fragment ?? 'React.Fragment';
+    const typescriptMode = options.typescript ?? 'preserve';
     const parsed = (0, oxc_parser_1.parseSync)('transpile-jsx-source.tsx', source, createModuleParserOptions(sourceType));
     const firstError = parsed.errors[0];
     if (firstError) {
         throw new Error(formatParserError(firstError));
     }
     const jsxRoots = collectRootJsxNodes(parsed.program);
-    if (!jsxRoots.length) {
-        return { code: source, changed: false };
+    const jsxMagic = new magic_string_1.default(source);
+    if (jsxRoots.length) {
+        const builder = new SourceJsxReactBuilder(source, createElementRef, fragmentRef, typescriptMode === 'strip');
+        jsxRoots.sort(compareByRangeStartDesc).forEach(node => {
+            jsxMagic.overwrite(node.range[0], node.range[1], builder.compile(node));
+        });
     }
-    const builder = new SourceJsxReactBuilder(source, createElementRef, fragmentRef);
-    const magic = new magic_string_1.default(source);
-    jsxRoots.sort(compareByRangeStartDesc).forEach(node => {
-        magic.overwrite(node.range[0], node.range[1], builder.compile(node));
-    });
+    const jsxCode = jsxRoots.length ? jsxMagic.toString() : source;
+    const jsxChanged = jsxRoots.length > 0;
+    if (typescriptMode !== 'strip') {
+        return {
+            code: jsxCode,
+            changed: jsxChanged,
+        };
+    }
+    const stripResult = stripTypeScriptSyntax(jsxCode, sourceType);
     return {
-        code: magic.toString(),
-        changed: true,
+        code: stripResult.code,
+        changed: jsxChanged || stripResult.changed,
     };
 }

package/dist/cjs/transpile.d.cts

@@ -1,8 +1,10 @@
 type TranspileSourceType = 'module' | 'script';
+type TranspileTypeScriptMode = 'preserve' | 'strip';
 export type TranspileJsxSourceOptions = {
     sourceType?: TranspileSourceType;
     createElement?: string;
     fragment?: string;
+    typescript?: TranspileTypeScriptMode;
 };
 export type TranspileJsxSourceResult = {
     code: string;

package/dist/transpile.d.ts

@@ -1,8 +1,10 @@
 type TranspileSourceType = 'module' | 'script';
+type TranspileTypeScriptMode = 'preserve' | 'strip';
 export type TranspileJsxSourceOptions = {
     sourceType?: TranspileSourceType;
     createElement?: string;
     fragment?: string;
+    typescript?: TranspileTypeScriptMode;
 };
 export type TranspileJsxSourceResult = {
     code: string;

package/dist/transpile.js

@@ -29,15 +29,24 @@ const isSourceRange = (value) => Array.isArray(value) &&
     typeof value[0] === 'number' &&
     typeof value[1] === 'number';
 const hasSourceRange = (value) => isObjectRecord(value) && isSourceRange(value.range);
+const tsWrapperExpressionNodeTypes = new Set([
+    'TSAsExpression',
+    'TSSatisfiesExpression',
+    'TSInstantiationExpression',
+    'TSNonNullExpression',
+    'TSTypeAssertion',
+]);
 const compareByRangeStartDesc = (first, second) => second.range[0] - first.range[0];
 class SourceJsxReactBuilder {
     source;
     createElementRef;
     fragmentRef;
-    constructor(source, createElementRef, fragmentRef) {
+    stripTypes;
+    constructor(source, createElementRef, fragmentRef, stripTypes) {
         this.source = source;
         this.createElementRef = createElementRef;
         this.fragmentRef = fragmentRef;
+        this.stripTypes = stripTypes;
     }
     compile(node) {
         return this.compileNode(node);
@@ -173,6 +182,17 @@ class SourceJsxReactBuilder {
         if (node.type === 'JSXElement' || node.type === 'JSXFragment') {
             return this.compileNode(node);
         }
+        if (this.stripTypes && isObjectRecord(node)) {
+            if ('expression' in node && node.type === 'ParenthesizedExpression') {
+                return `(${this.compileExpression(node.expression)})`;
+            }
+            if ('expression' in node &&
+                typeof node.type === 'string' &&
+                tsWrapperExpressionNodeTypes.has(node.type)) {
+                return this.compileExpression(node.expression);
+            }
+        }
+        /* c8 ignore next 3 -- defensive guard for malformed external AST nodes */
         if (!hasSourceRange(node)) {
             throw new Error('[jsx] Unable to read source range for expression node.');
         }
@@ -224,26 +244,182 @@ const collectRootJsxNodes = (root) => {
     walk(root, false);
     return nodes;
 };
+const MAX_TYPESCRIPT_STRIP_PASSES = 5;
+const hasStringProperty = (value, key) => isObjectRecord(value) && typeof value[key] === 'string';
+const hasSourceAndExpressionRanges = (value) => isObjectRecord(value) &&
+    typeof value.type === 'string' &&
+    hasSourceRange(value) &&
+    'expression' in value &&
+    hasSourceRange(value.expression);
+const isTypeOnlyImportExport = (value) => hasStringProperty(value, 'importKind')
+    ? value.importKind === 'type'
+    : hasStringProperty(value, 'exportKind') && value.exportKind === 'type';
+const isTypeOnlyNode = (value) => {
+    if (!isObjectRecord(value) || typeof value.type !== 'string') {
+        return false;
+    }
+    return [
+        'TSTypeAnnotation',
+        'TSTypeParameterDeclaration',
+        'TSTypeAliasDeclaration',
+        'TSInterfaceDeclaration',
+        'TSDeclareFunction',
+        'TSImportEqualsDeclaration',
+        'TSNamespaceExportDeclaration',
+        'TSModuleDeclaration',
+    ].includes(value.type);
+};
+const createStripEditForTsWrapper = (value, source) => {
+    if (!hasSourceAndExpressionRanges(value)) {
+        return null;
+    }
+    if (value.type !== 'TSAsExpression' &&
+        value.type !== 'TSSatisfiesExpression' &&
+        value.type !== 'TSInstantiationExpression' &&
+        value.type !== 'TSNonNullExpression' &&
+        value.type !== 'TSTypeAssertion') {
+        return null;
+    }
+    const [exprStart, exprEnd] = value.expression.range;
+    return {
+        range: value.range,
+        replacement: source.slice(exprStart, exprEnd),
+    };
+};
+const collectTypeScriptStripEdits = (source, root) => {
+    const edits = [];
+    const walk = (value) => {
+        if (!isObjectRecord(value)) {
+            return;
+        }
+        if (Array.isArray(value)) {
+            value.forEach(walk);
+            return;
+        }
+        if (hasSourceRange(value)) {
+            if (isTypeOnlyNode(value) || isTypeOnlyImportExport(value)) {
+                edits.push({ range: value.range });
+                return;
+            }
+            else {
+                const wrapperEdit = createStripEditForTsWrapper(value, source);
+                if (wrapperEdit) {
+                    edits.push(wrapperEdit);
+                    return;
+                }
+            }
+        }
+        for (const entry of Object.values(value)) {
+            walk(entry);
+        }
+    };
+    walk(root);
+    return edits;
+};
+const rangeOverlaps = (first, second) => first[0] < second[1] && second[0] < first[1];
+const compareStripEditPriority = (first, second) => {
+    const firstLength = first.range[1] - first.range[0];
+    const secondLength = second.range[1] - second.range[0];
+    if (firstLength !== secondLength) {
+        return secondLength - firstLength;
+    }
+    return compareByRangeStartDesc(first, second);
+};
+const applyStripEdits = (magic, edits) => {
+    if (!edits.length) {
+        return false;
+    }
+    const appliedRanges = [];
+    let changed = false;
+    edits
+        .slice()
+        .sort(compareStripEditPriority)
+        .forEach(edit => {
+        /* c8 ignore next -- overlap handling is defensive after de-duplicated collection */
+        if (appliedRanges.some(range => rangeOverlaps(range, edit.range))) {
+            return;
+        }
+        const [start, end] = edit.range;
+        if (edit.replacement === undefined) {
+            magic.remove(start, end);
+        }
+        else {
+            magic.overwrite(start, end, edit.replacement);
+        }
+        appliedRanges.push(edit.range);
+        changed = true;
+    });
+    return changed;
+};
+const stripTypeScriptSyntax = (source, sourceType) => {
+    let currentCode = source;
+    let changed = false;
+    let reachedStripPassLimit = true;
+    for (let pass = 0; pass < MAX_TYPESCRIPT_STRIP_PASSES; pass += 1) {
+        const parsed = parseSync('transpile-jsx-source.tsx', currentCode, createModuleParserOptions(sourceType));
+        const error = parsed.errors[0];
+        if (error) {
+            throw new Error(formatParserError(error));
+        }
+        const edits = collectTypeScriptStripEdits(currentCode, parsed.program);
+        if (!edits.length) {
+            reachedStripPassLimit = false;
+            break;
+        }
+        const magic = new MagicString(currentCode);
+        const passChanged = applyStripEdits(magic, edits);
+        if (!passChanged) {
+            reachedStripPassLimit = false;
+            break;
+        }
+        currentCode = magic.toString();
+        changed = true;
+    }
+    if (reachedStripPassLimit) {
+        const parsed = parseSync('transpile-jsx-source.tsx', currentCode, createModuleParserOptions(sourceType));
+        const error = parsed.errors[0];
+        if (error) {
+            throw new Error(formatParserError(error));
+        }
+        const remainingEdits = collectTypeScriptStripEdits(currentCode, parsed.program);
+        if (remainingEdits.length) {
+            throw new Error(`[jsx] TypeScript strip did not converge after ${MAX_TYPESCRIPT_STRIP_PASSES} passes (${remainingEdits.length} removable TypeScript nodes remain).`);
+        }
+    }
+    return {
+        code: currentCode,
+        changed,
+    };
+};
 export function transpileJsxSource(source, options = {}) {
     const sourceType = options.sourceType ?? 'module';
     const createElementRef = options.createElement ?? 'React.createElement';
     const fragmentRef = options.fragment ?? 'React.Fragment';
+    const typescriptMode = options.typescript ?? 'preserve';
     const parsed = parseSync('transpile-jsx-source.tsx', source, createModuleParserOptions(sourceType));
     const firstError = parsed.errors[0];
     if (firstError) {
         throw new Error(formatParserError(firstError));
     }
     const jsxRoots = collectRootJsxNodes(parsed.program);
-    if (!jsxRoots.length) {
-        return { code: source, changed: false };
+    const jsxMagic = new MagicString(source);
+    if (jsxRoots.length) {
+        const builder = new SourceJsxReactBuilder(source, createElementRef, fragmentRef, typescriptMode === 'strip');
+        jsxRoots.sort(compareByRangeStartDesc).forEach(node => {
+            jsxMagic.overwrite(node.range[0], node.range[1], builder.compile(node));
+        });
     }
-    const builder = new SourceJsxReactBuilder(source, createElementRef, fragmentRef);
-    const magic = new MagicString(source);
-    jsxRoots.sort(compareByRangeStartDesc).forEach(node => {
-        magic.overwrite(node.range[0], node.range[1], builder.compile(node));
-    });
+    const jsxCode = jsxRoots.length ? jsxMagic.toString() : source;
+    const jsxChanged = jsxRoots.length > 0;
+    if (typescriptMode !== 'strip') {
+        return {
+            code: jsxCode,
+            changed: jsxChanged,
+        };
+    }
+    const stripResult = stripTypeScriptSyntax(jsxCode, sourceType);
     return {
-        code: magic.toString(),
-        changed: true,
+        code: stripResult.code,
+        changed: jsxChanged || stripResult.changed,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knighted/jsx",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "description": "Runtime JSX tagged template that renders DOM or React trees anywhere with or without a build step.",
   "keywords": [
     "jsx runtime",