Add support for the automatic dev runtime

[remcohaszing]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)
• If applicable, I’ve added docs and tests

Description of changes

This was discussed in mdx-js/mdx#2035. The only difference that wasn’t discussed is that the automatic runtime import is also changed from /jsx-runtime to /jsx-dev-runtime.

The source parameter is still missing, as its meaning is not clear to me. It’s not required anyway, so this should be fine.

[wooorm]

source is a reference to this right? Not sure what it’s used for either but presumably it’s something, so if it’s easy to add?

Otherwise: can be a bit more spacious with blank lines between statements but everything looks good!

[wooorm]

Oh before we forget: this also needs some docs!

[remcohaszing]

source is a reference to this right? Not sure what it’s used for either but presumably it’s something, so if it’s easy to add?

Babel does add it conditionally, but it’s added most of the time. If it’s defined, it’s always this. I don’t think it hurts to just always add it. It mostly bothers me that I don’t know what it’s for. Should I just add it anyway?

[wooorm]

Suggested change

	If the automatic runtime is used, this compiles JSX into automatic runtime
	development mode (`boolean`, default: `false`).
	Add location info on where a component originated from (`boolean`, default:
	`false`).
	This helps debugging but adds a lot of code that you don’t want in production.
	Only used when `filePath` is and in the automatic runtime.

Btw: does React still show somewhat useful info without a filePath? Maybe we could still do something with line/column without and lift the restriction? Maybe more confusing but potentially we could default to '<source.js>' or so even?

[remcohaszing]

This is what React Devtools shows if filePath is missing.

So let’s not add it in this case.

If positional information is missing, it’s rendered as undefined, which I think is ok.

[wooorm]

So it doesn’t show anything?
And what if we use '<source.js>'

[remcohaszing]

My screenshot was a bit unclear. This error view replaces what would normally be the part that display component details.

Anyway, showing <source.js> looks fine. 👍

[wooorm]

Now I’m interested whether you have a screenshot that shows this, because I haven’t seen it yet!
Glad a fake name is somewhat useful!

[remcohaszing]

Sure!

I created the following Next.js page in recma-nextjs-static-props, then tweaked the source parameters:

import { jsxDEV } from 'react/jsx-dev-runtime'

export default function Foo() {
  return jsxDEV(
    'p',
    { children: 'Hello world!' },
    'key',
    false,
    {
      fileName: '/home/remco/Projects/recma-nextjs-static-props/pages/foo.jsx',
      lineNumber: 35,
      columnNumber: 42,
    },
    this,
  )
}

Using the React devtools chrome extension, it looks like this:

The source copy button copies /home/remco/Projects/recma-nextjs-static-props/pages/foo.jsx:35 to the clipboard. This format can be copied directly into the VSCode file search for example

The Log this component data to the console button logs the following positional data to the console:

With removed positional information, it looks like this:

With a removed filename, it looks like this:

With source set to undefined, it looks like this:

And just for you, a screenshot with fileName set to <source.js>. 😄

[wooorm]

[on source] I don’t think it hurts to just always add it

Same, if its not too hard, I’m 👍

[wooorm]

Released in https://github.com/syntax-tree/estree-util-build-jsx/releases/tag/2.1.0!