Is it possible to add a separate configuration? For a very large monorepo, there may not be a tsconfig in the root directory

  "javascript": {
    "jsxRuntime": {
      "jsx": "react",
      "jsxFactory": "$",
      "jsxFragmentFactory": "$",
    },
  },

PRs are welcome if anyone wants to help

I'm new to biome.js but I'm very glad to help if you can bear with me taking a bit longer to fix this ❤️

@ematipico Hi! I was wondering if we can support:

{
  "javascript": {
    "jsxRuntime": "reactClassic",
    "jsxFactory": "$",
    "jsxFragmentFactory": "$"
  }
}

Note: jsxFactory or jsxFragmentFactory will only be used when jsxRuntime is set to "reactClassic".

If we were to support struct type of jsxRuntime, this would cause a breaking change to config file. Otherwise, we may need to support either type in deserialization for jsxRuntime, which could probably make JSON schema hard to maintain as well.
However, flattening these options do not cause any of the problems above.

Do you have any bias on this one?

Considering that different subprojects in monorepo may have different configurations, it would be nice to read the configurations from the tsconfig files of the subprojects, but there is extends field in tsconfig, and it is not clear if biome supports it.

@ahaoboy if a project doesn't use TypeScript, how does someone provide those values?

@ahaoboy if a project doesn't use TypeScript, how does someone provide those values?

Yes, this is why I want to add a configuration. Can we use the default configuration for projects without tsconfig?

import React from 'react'

@h-a-n-a Your proposal sounds reasonable. I suppose we could add an ad-hoc validation that emits an error/warning in case of incorrect configuration. Feel free to start the implementation as you see fit

@ahaoboy thank you for your answer

@ematipico Hi! I encountered some problem.

Background

I dug into the codebase. I found out the original implementation is a little bit simple:
https://github.com/arendjr/biome/blob/67d03778769c9b944b03575032f4bdbcabec27c9/crates/biome_js_analyze/src/lint/correctness/no_unused_imports.rs#L99-L103
It completely ignored the case if jsxRuntime is set to ReactClassic and if it's a global react import statement.

The following module does not complain any error even though the identifier binding React is not being used:

import React from "react"

The other issue I encountered is if jsxRuntime is set to ReactClassic, and with the following code:

function App() {
  return <><div>abc</div></>
}

export default <App />

Biome does not complain anything (note that React is not being imported in this case). However, as per the jsxRuntime section of the document:

Corresponds to the react value for the jsx option in TypeScript’s tsconfig.json

And at the same time, TypeScript compiler does complain as follows:

Cannot find name 'React'.

So I believe there does have something to improve and I want to focus on this issue first.

Possible solution

I would like to improve the binding.
For example, for jsxRuntime being set to ReactClassic and jsxFactory being set to h, both of the following examples should not complain:

// 1
const h = () => {}
const Element = <div></div>

// 2
import { h } from "preact"
const Element = <div></div>

Also, jsx runtime should be scope aware, with the same configuration above, the following example should complain:

function App() {
  const h = () => {}
  return <div /> // 1
}

export default <App /> // 2 👈 Cannot find binding `h`

Note 1 should not complain as h is being defined locally, however 2 does not have any identifier binding defined.

Question

I took a look at the SemanticEventExtractor and I was thinking of every time a SyntaxKind::JSX_ELEMENT is visited, a reference should be added to the scope so that I can get the reference in no_used_imports with binding.all_references without changing the plugin code. However, maybe I'm taking this wrong, because of every BindingName and Reference is from the raw node in roman, there's no place to add a synthetic binding.

I don't know if I'm heading towards the right direction. Would you please help me with a little guidance?
Thanks for reading and being patient with me!

It completely ignored the case if jsxRuntime is set to ReactClassic and if it's a global react import statement.

I believe it's intended, because in "classic" react, the old way, the global React was mandatory. This code should pass, because the old version of babel JSX transformer for react requires it:

import React from "react"

export function App() {
	return <p>hello</p>
}

However, a more modern version of the babel JSX transformer doesn't require it anymore. In lue to that, we decided to ignore the import in case we have a classic (old) transformer.

So I believe there does have something to improve and I want to focus on this issue first.

Please do. Consider that, at the moment, we can't read the tsconfig.json yet. It's coming soon.

Regarding your question, I believe the semantic model already does that 🤔

Regarding your question, I believe the semantic model already does that 🤔

@ematipico AFAIK, they only do bindings for cases like:

const App = () => {}
<App /> // App usage

But instead, I'd like to add references to jsxFactory and jsxFragmentFactory.

Ref: https://github.com/arendjr/biome/blob/01a80a47afae76d80f847971a979b3315d3eda67/crates/biome_js_semantic/src/events.rs#L747