Support automatic JSX runtime and configuration via tsconfig.json

packages/core/integration-tests/test/integration/decorators/index.ts

@@ -0,0 +1,19 @@
+function first() {
+  output("first(): factory evaluated");
+  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
+    output("first(): called");
+  };
+}
+
+function second() {
+  output("second(): factory evaluated");
+  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
+    output("second(): called");
+  };
+}
+
+class ExampleClass {
+  @first()
+  @second()
+  method() {}
+}

packages/core/integration-tests/test/integration/decorators/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true
+  }
+}

packages/core/integration-tests/test/integration/jsx-automatic-preact/index.js

@@ -0,0 +1 @@
+module.exports = <div />;

packages/core/integration-tests/test/integration/jsx-automatic-preact/package.json

@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "dependencies": {
+    "preact": "^10.5"
+  }
+}

packages/core/integration-tests/test/integration/jsx-automatic-tsconfig/index.js

@@ -0,0 +1 @@
+module.exports = <div />;

packages/core/integration-tests/test/integration/jsx-automatic-tsconfig/package.json

@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "dependencies": {
+    "preact": "^17"
+  }
+}

packages/core/integration-tests/test/integration/jsx-automatic-tsconfig/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "jsxImportSource": "preact"
+  }
+}

packages/core/integration-tests/test/integration/jsx-automatic/index.js

@@ -0,0 +1 @@
+module.exports = <div />;

packages/core/integration-tests/test/integration/jsx-automatic/package.json

@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "dependencies": {
+    "react": "^17"
+  }
+}

packages/core/integration-tests/test/integration/jsx-pragma-tsconfig/index.js

@@ -0,0 +1 @@
+module.exports = <><div /></>;

packages/core/integration-tests/test/integration/jsx-pragma-tsconfig/package.json

@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "dependencies": {
+    "preact": "*"
+  }
+}

packages/core/integration-tests/test/integration/jsx-pragma-tsconfig/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "jsxFactory": "JSX",
+    "jsxFragmentFactory": "JSXFragment"
+  }
+}

packages/core/integration-tests/test/integration/jsx-preact/package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
   "dependencies": {
-    "preact": "*"
+    "preact": "^10.4"
   }
 }

packages/core/integration-tests/test/integration/jsx-tsconfig/index.js

@@ -0,0 +1 @@
+module.exports = <div />;

packages/core/integration-tests/test/integration/jsx-tsconfig/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}

packages/core/integration-tests/test/transpilation.js

@@ -155,6 +155,75 @@ describe('transpilation', function() {
     assert(!file.includes('@swc/helpers'));
   });
 
+  it('should support the automatic JSX runtime with React >= 17', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/jsx-automatic/index.js'),
+    );
+
+    let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf8');
+    assert(file.includes('react/jsx-runtime'));
+    assert(file.includes('_jsxRuntime.jsx("div"'));
+  });
+
+  it('should support the automatic JSX runtime with preact >= 10.5', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/jsx-automatic-preact/index.js'),
+    );
+
+    let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf8');
+    assert(file.includes('preact/jsx-runtime'));
+    assert(file.includes('_jsxRuntime.jsx("div"'));
+  });
+
+  it('should support the automatic JSX runtime with explicit tsconfig.json', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/jsx-automatic-tsconfig/index.js'),
+    );
+
+    let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf8');
+    assert(file.includes('preact/jsx-runtime'));
+    assert(file.includes('_jsxRuntime.jsx("div"'));
+  });
+
+  it('should support explicit JSX pragma in tsconfig.json', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/jsx-pragma-tsconfig/index.js'),
+    );
+
+    let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf8');
+    assert(file.includes('JSX(JSXFragment'));
+    assert(file.includes('JSX("div"'));
+  });
+
+  it('should support explicitly enabling JSX in tsconfig.json', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/jsx-tsconfig/index.js'),
+    );
+
+    let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf8');
+    assert(file.includes('React.createElement("div"'));
+  });
+
+  it('should support enabling decorators in tsconfig.json', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/decorators/index.ts'),
+    );
+
+    let output = [];
+    await run(b, {
+      output(o) {
+        output.push(o);
+      },
+    });
+
+    assert.deepEqual(output, [
+      'first(): factory evaluated',
+      'second(): factory evaluated',
+      'second(): called',
+      'first(): called',
+    ]);
+  });
+
   it('should support transpiling optional chaining', async function() {
     let b = await bundle(
       path.join(__dirname, '/integration/babel-optional-chaining/index.js'),

packages/transformers/js/core/src/lib.rs

@@ -35,7 +35,7 @@ use swc_ecmascript::transforms::resolver::resolver_with_mark;
 use swc_ecmascript::transforms::{
   compat::reserved_words::reserved_words, fixer, helpers, hygiene,
   optimization::simplify::dead_branch_remover, optimization::simplify::expr_simplifier,
-  pass::Optional, react, typescript,
+  pass::Optional, proposals::decorators, react, typescript,
 };
 use swc_ecmascript::visit::FoldWith;
 
@@ -64,6 +64,9 @@ pub struct Config {
   is_jsx: bool,
   jsx_pragma: Option<String>,
   jsx_pragma_frag: Option<String>,
+  automatic_jsx_runtime: bool,
+  jsx_import_source: Option<String>,
+  decorators: bool,
   is_development: bool,
   react_refresh: bool,
   targets: Option<HashMap<String, String>>,
@@ -219,6 +222,15 @@ pub fn transform(config: Config) -> Result<TransformResult, std::io::Error> {
               } else {
                 None
               };
+
+              react_options.runtime = if config.automatic_jsx_runtime {
+                if let Some(import_source) = config.jsx_import_source {
+                  react_options.import_source = import_source;
+                }
+                Some(react::Runtime::Automatic)
+              } else {
+                Some(react::Runtime::Classic)
+              };
             }
 
             module = {
@@ -227,6 +239,15 @@ pub fn transform(config: Config) -> Result<TransformResult, std::io::Error> {
                   react::react(source_map.clone(), Some(&comments), react_options),
                   config.is_jsx
                 ),
+                // Decorators can use type information, so must run before the TypeScript pass.
+                Optional::new(
+                  decorators::decorators(decorators::Config {
+                    legacy: true,
+                    // Always disabled for now, SWC's implementation doesn't match TSC.
+                    emit_metadata: false
+                  }),
+                  config.decorators
+                ),
                 Optional::new(typescript::strip(), config.is_type_script)
               );
 
@@ -376,6 +397,7 @@ fn parse(
     let mut tsconfig = TsConfig::default();
     tsconfig.tsx = config.is_jsx;
     tsconfig.dynamic_import = true;
+    tsconfig.decorators = config.decorators;
     Syntax::Typescript(tsconfig)
   } else {
     let mut esconfig = EsConfig::default();
@@ -384,6 +406,7 @@ fn parse(
     esconfig.export_default_from = true;
     esconfig.export_namespace_from = true;
     esconfig.import_meta = true;
+    esconfig.decorators = config.decorators;
     Syntax::Es(esconfig)
   };