[docs] Update on-demand docs to avoid DEV JSX runtime

[joostdecock]

The example code above will (since version 2.2) throw an error because _jsxDEV is not a function.

To avoid that, we need to pass the development: false option, so I've updated these docs to do so.

See: #2203

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
mdx	✅ Ready (Inspect)	Visit Preview	Dec 25, 2022 at 9:54AM (UTC)

[codecov-commenter]

Codecov Report

Base: 100.00% // Head: 100.00% // No change to project coverage 👍

Coverage data is based on head (0d35dc6) compared to base (5f68330).
Patch has no changes to coverable lines.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #2204   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           22        22           
  Lines         2064      2064           
=========================================
  Hits          2064      2064           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[remcohaszing]

I’m thinking maybe something like this? It’s a bit annoying, because it’s all very situational.

Suggested change

	development: false, // Avoid use of the jsxDEV runtime
	// development: false, // Use this to avoid use of jsx-dev-runtime during development

Maybe for the client we can use:

import {run} from '@mdx-js/mdx'
import * as runtime from 'react/jsx-runtime'
import * as devRuntime from 'react/jsx-dev-runtime'

const code = '' // To do: get `code` from server somehow.
const deveopment = process.env.NODE_ENV // To do: determine development mode for your setup.

const {default: Content} = await run(code, development ? devRuntime : runtime)

[wooorm]

There are many more places where run is shown. Perhaps good to extend what you want to change here, to those places too, as it applies to them too?

[wooorm]

Suggested change

	development: false, // Avoid use of the jsxDEV runtime
	development: false, // Generate code for production.

I’d suggest this: better to document what this does, instead of double negatives.

Alternatively, you can show both dev and prod versions

Suggested change

	development: false, // Avoid use of the jsxDEV runtime
	development: false, // Generate code for production.
	// developmment: true, // Pass this to generate development code.

And then use the following below:

import * as runtime from 'react/jsx-runtime' // Production.
// import * as runtime from 'react/jsx-dev-runtime' // Development.

[wooorm]

Same as above