Unable to set swc option for automatic react runtime

[ShravanSunder]

Search Terms

swc options, swc runtime, react automatic

Expected Behavior

There is no way to set swc to use automatic run time in react:
Its not part of the transpiler configs thats passed into swc

• https://github.com/TypeStrong/ts-node/blob/main/src/transpilers/swc.ts
• https://swc.rs/docs/configuration/compilation#jsctransformreactruntime

Actual Behavior

• react 18 with automatic runtime is not supported
• i'm currently using ts-node to run tests: https://github.com/scaffold-eth/eth-hooks

Steps to reproduce the problem

• download repo: https://github.com/scaffold-eth/eth-hooks
• change tsconifg.test.json to use swc: true

Minimal reproduction

• https://github.com/scaffold-eth/eth-hooks

Specifications

• ts-node version: latest
• node version: 16
• TypeScript version: 4.7
• tsconfig.json, if you're using one:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true
  },
  "files": ["hardhat.config.ts"],
  "ts-node": {
    "swc": true,

    "compilerOptions": {
      "module": "CommonJS"
    },
    "moduleTypes": {
      "**/*": "cjs"
    }
  }
}

• package.json:

{}

• Operating system and version: mac, latest
• If Windows, are you using WSL or WSL2?:

[cspotcode]

Is there an equivalence between this swc option and a tsconfig option? In other words, do people using tsc (not swc) use a certain config option to make TSC compile in this way?

[cspotcode]

It looks like we should implement a translation between tsconfig's jsx option and the equivalents for swc.

https://www.typescriptlang.org/tsconfig#jsx

Does that sound correct to you?

[ShravanSunder]

@cspotcode yes! the swc option directly relates tsconfig options and is a blocker to using ts-node to run any tests related to react.

In my example, hardhat uses ts-node to compile typescript tests. I would like to replace the transpiler to use swc for performance reasons but cannot since i am unable to transmit this tsconfig option to the swc transpiler.

[cspotcode]

What's the mapping between tsconfig options and swc options? Like, when we see certain tsconfig options, which swc options should we generate? If we have this mapping then we can implement the translation.

[ShravanSunder]

@cspotcode

jsx

In the jsx option in tsconfig: https://www.typescriptlang.org/tsconfig#jsx
the values:

• react-jsx
• react-jsxdev

should be mapped to: https://swc.rs/docs/configuration/compilation#jsctransformreactruntime

• transform.react.runtime : automatic

The default for transform.react.runtime isclassic. It is classic for all the other options of jsx in tsconfig

jsx import source

in the jsxImportSource in tsconfig: https://www.typescriptlang.org/tsconfig#jsxImportSource

• the value should be directly mapped to transform.react.importSource : https://swc.rs/docs/configuration/compilation#jsctransformreactimportsource

[cspotcode]

Thanks, if someone has in their tsconfig.json:

"jsx": "react-jsxdev"
// jsxImportSource is not specified

...should we be passing a certain value for swc's transform.react.importSource?

[ShravanSunder]

@cspotcode jsxImportSource default value is react. I don't think its required to be specified.

[cspotcode]

react-jsx and react-jsxdev cause different output from TSC, right? How do we get swc to do the same?

[ShravanSunder]

@cspotcode i read through the swc docs and issues.
It seems like when runtime is set to automatic it will automatically set the pragma to _jsx which is what the expected behaviour is.

if runtime is classic it uses the pragma that's passed in via the transpiler config.

I'm not familiar with rust, but seems like thats what the code does.

The test for this is that if runtime is set to automatic the swc transpiled code should automatically generate with _jsx or _jsxDEV instead of React.createElement: https://www.typescriptlang.org/docs/handbook/jsx.html

[cspotcode]

Ok, my concern is this:

If a user sets one of their projects to use "jsx": "react-jsx" and they set another project to use "jsx": "react-jsxdev", then presumably they want tsc's output to be different in those two projects, because "react-jsx" is different from "react-jsxdev". But based on what you have described, we are sending exactly the same options to SWC for both. Shouldn't we be sending different options to SWC for these two different tsconfigs?

What is the difference between tsc's react-jsx and react-jsxdev? And how do we send different options to swc to tell it to emit differently, too?

[ShravanSunder]

@cspotcode I understand. I looked it up more.

Looks like if it is react-jsxdev swc devleopment should be set to true.

• Fix: incorrect transform jsx-runtime in development swc-project/swc#2741
• https://swc.rs/docs/configuration/compilation#jsctransformreactdevelopment

looks like that is how it differentiates jsx from jsx dev

[ShravanSunder]

@cspotcode did you need me to do any other clarification or reserach?

[cspotcode]

No, I think we're all set. My time is limited so it might be in your best interest to attempt a pull request yourself. If you choose to do that, feel free to ping me for guidance.

…

On Tue, Jun 21, 2022, 5:13 PM Shravan Sunder ***@***.***> wrote: @cspotcode <https://github.com/cspotcode> did you need me to do any other clarification or reserach? — Reply to this email directly, view it on GitHub <#1800 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAC35OBOSPECP5NG7IPOCK3VQIV7VANCNFSM5ZCMOB4Q> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[ShravanSunder]

@cspotcode thank you 🙏🏽