feat(compiler): strip TypeScript syntax from JIT output using oxc_transformer

Add a `strip_typescript()` post-pass after JIT text-edits that uses
oxc_transformer + oxc_codegen to convert TypeScript → JavaScript. This
handles abstract members, type annotations, parameter properties, and
other TS-only syntax that previously leaked into JIT output.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: ashley-hunter

Cargo.lock

@@ -96,6 +96,8 @@ oxc_parser = "0.122"
 oxc_semantic = "0.122"
 oxc_span = "0.122"
 oxc_sourcemap = "6.0.1"
+oxc_transformer = "0.122"
+oxc_codegen = "0.122"
 
 # Internal
 oxc_angular_compiler = { path = "crates/oxc_angular_compiler" }

Cargo.toml

@@ -23,6 +23,8 @@ oxc_parser = { workspace = true }
 oxc_semantic = { workspace = true }
 oxc_span = { workspace = true }
 oxc_sourcemap = { workspace = true }
+oxc_transformer = { workspace = true }
+oxc_codegen = { workspace = true }
 miette = { workspace = true }
 rustc-hash = { workspace = true }
 indexmap = { workspace = true }

crates/oxc_angular_compiler/Cargo.toml

@@ -5,6 +5,8 @@
 
 use std::collections::HashMap;
 
+use std::path::Path;
+
 use oxc_allocator::{Allocator, Vec as OxcVec};
 use oxc_ast::ast::{
     Argument, ArrayExpressionElement, Declaration, ExportDefaultDeclarationKind, Expression,
@@ -1140,6 +1142,37 @@ fn build_jit_decorator_text(
 
 /// Transform an Angular TypeScript file in JIT (Just-In-Time) compilation mode.
 ///
+/// Strip TypeScript syntax from JIT output using oxc_transformer.
+///
+/// This runs as a post-pass after JIT text-edits, converting TypeScript → JavaScript.
+/// It handles abstract members, type annotations, parameter properties, etc.
+fn strip_typescript(allocator: &Allocator, path: &str, code: &str) -> String {
+    let source_type = SourceType::from_path(path).unwrap_or_default();
+    let parser_ret = Parser::new(allocator, code, source_type).parse();
+    if parser_ret.panicked {
+        return code.to_string();
+    }
+
+    let mut program = parser_ret.program;
+
+    let semantic_ret =
+        oxc_semantic::SemanticBuilder::new().with_excess_capacity(2.0).build(&program);
+
+    let ts_options =
+        oxc_transformer::TypeScriptOptions { only_remove_type_imports: true, ..Default::default() };
+
+    let transform_options =
+        oxc_transformer::TransformOptions { typescript: ts_options, ..Default::default() };
+
+    let transformer =
+        oxc_transformer::Transformer::new(allocator, Path::new(path), &transform_options);
+    transformer.build_with_scoping(semantic_ret.semantic.into_scoping(), &mut program);
+
+    let codegen_ret = oxc_codegen::Codegen::new().with_source_text(code).build(&program);
+
+    codegen_ret.code
+}
+
 /// JIT mode produces output compatible with Angular's JIT runtime compiler:
 /// - Decorators are downleveled using `__decorate` from tslib
 /// - `templateUrl` is replaced with `angular:jit:template:file;` imports
@@ -1408,6 +1441,9 @@ fn transform_angular_file_jit(
         result.code = apply_edits(source, edits);
     }
 
+    // 5. Strip TypeScript syntax from JIT output
+    result.code = strip_typescript(allocator, path, &result.code);
+
     result
 }
 

crates/oxc_angular_compiler/src/component/transform.rs

@@ -3,19 +3,12 @@ source: crates/oxc_angular_compiler/tests/integration_test.rs
 assertion_line: 6452
 expression: result.code
 ---
-
-import { Injectable } from '@angular/core';
+import { Injectable } from "@angular/core";
 import { __decorate } from "tslib";
-
 let BaseProvider = class BaseProvider {
-    protected abstract get name(): string;
-    protected abstract initialize(): void;
-
-    public greet(): string {
-        return `Hello from ${this.name}`;
-    }
+	greet() {
+		return `Hello from ${this.name}`;
+	}
 };
-BaseProvider = __decorate([
-    Injectable()
-], BaseProvider);
+BaseProvider = __decorate([Injectable()], BaseProvider);
 export { BaseProvider };

crates/oxc_angular_compiler/tests/snapshots/integration_test__jit_abstract_class.snap

@@ -1,17 +1,15 @@
 ---
 source: crates/oxc_angular_compiler/tests/integration_test.rs
+assertion_line: 6201
 expression: result.code
 ---
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 import { __decorate } from "tslib";
-
 let AppComponent = class AppComponent {
-    title = 'app';
+	title = "app";
 };
-AppComponent = __decorate([
-    Component({
-    selector: 'app-root',
-    template: '<h1>Hello</h1>',
-})
-], AppComponent);
+AppComponent = __decorate([Component({
+	selector: "app-root",
+	template: "<h1>Hello</h1>"
+})], AppComponent);
 export { AppComponent };

crates/oxc_angular_compiler/tests/snapshots/integration_test__jit_class_restructuring.snap

@@ -1,22 +1,19 @@
 ---
 source: crates/oxc_angular_compiler/tests/integration_test.rs
+assertion_line: 6164
 expression: result.code
 ---
-import { Component } from '@angular/core';
-import { TitleService } from './title.service';
+import { Component } from "@angular/core";
+import { TitleService } from "./title.service";
 import { __decorate } from "tslib";
-
 let AppComponent = class AppComponent {
-    constructor(private titleService: TitleService) {}
-
-static ctorParameters = () => [
-    { type: TitleService }
-];
+	constructor(titleService) {
+		this.titleService = titleService;
+	}
+	static ctorParameters = () => [{ type: TitleService }];
 };
-AppComponent = __decorate([
-    Component({
-    selector: 'app-root',
-    template: '<h1>Hello</h1>',
-})
-], AppComponent);
+AppComponent = __decorate([Component({
+	selector: "app-root",
+	template: "<h1>Hello</h1>"
+})], AppComponent);
 export { AppComponent };

crates/oxc_angular_compiler/tests/snapshots/integration_test__jit_constructor_deps.snap

@@ -1,21 +1,16 @@
 ---
 source: crates/oxc_angular_compiler/tests/integration_test.rs
+assertion_line: 6239
 expression: result.code
 ---
-import { Directive, Input } from '@angular/core';
+import { Directive, Input } from "@angular/core";
 import { __decorate } from "tslib";
-
 let HighlightDirective = class HighlightDirective {
-    color: string = 'yellow';
-
-static propDecorators = {
-    color: [{ type: Input }]
+	color = "yellow";
+	static propDecorators = { color: [{ type: Input }] };
 };
-};
-HighlightDirective = __decorate([
-    Directive({
-    selector: '[appHighlight]',
-    standalone: true,
-})
-], HighlightDirective);
+HighlightDirective = __decorate([Directive({
+	selector: "[appHighlight]",
+	standalone: true
+})], HighlightDirective);
 export { HighlightDirective };

crates/oxc_angular_compiler/tests/snapshots/integration_test__jit_directive.snap

@@ -1,33 +1,28 @@
 ---
 source: crates/oxc_angular_compiler/tests/integration_test.rs
+assertion_line: 6295
 expression: result.code
 ---
-import { Component, signal } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-import { Lib1 } from 'lib1';
-import { TitleService } from './title.service';
+import { Component, signal } from "@angular/core";
+import { RouterOutlet } from "@angular/router";
+import { Lib1 } from "lib1";
+import { TitleService } from "./title.service";
 import { __decorate } from "tslib";
 import __NG_CLI_RESOURCE__0 from "angular:jit:template:file;./app.html";
 import __NG_CLI_RESOURCE__1 from "angular:jit:style:file;./app.css";
-
 let App = class App {
-    titleService;
-    title = signal('app');
-    constructor(titleService: TitleService) {
-        this.titleService = titleService;
-        this.title.set(this.titleService.getTitle());
-    }
-
-static ctorParameters = () => [
-    { type: TitleService }
-];
+	titleService;
+	title = signal("app");
+	constructor(titleService) {
+		this.titleService = titleService;
+		this.title.set(this.titleService.getTitle());
+	}
+	static ctorParameters = () => [{ type: TitleService }];
 };
-App = __decorate([
-    Component({
-    selector: 'app-root',
-    imports: [RouterOutlet, Lib1],
-    template: __NG_CLI_RESOURCE__0,
-    styles: [__NG_CLI_RESOURCE__1],
-})
-], App);
+App = __decorate([Component({
+	selector: "app-root",
+	imports: [RouterOutlet, Lib1],
+	template: __NG_CLI_RESOURCE__0,
+	styles: [__NG_CLI_RESOURCE__1]
+})], App);
 export { App };

crates/oxc_angular_compiler/tests/snapshots/integration_test__jit_full_component.snap

@@ -1,16 +1,14 @@
 ---
 source: crates/oxc_angular_compiler/tests/integration_test.rs
+assertion_line: 6059
 expression: result.code
 ---
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 import { __decorate } from "tslib";
-
 let AppComponent = class AppComponent {};
-AppComponent = __decorate([
-    Component({
-    selector: 'app-root',
-    template: '<h1>Hello</h1>',
-    standalone: true,
-})
-], AppComponent);
+AppComponent = __decorate([Component({
+	selector: "app-root",
+	template: "<h1>Hello</h1>",
+	standalone: true
+})], AppComponent);
 export { AppComponent };