Use JSX automatic import transform

[andygout]

When switching to Rollup.js in PR #252, this DEV Community article mentioned that it is possible to:

[eliminate] the need for a global React import in each file that uses JSX

This is achieved in the rollup.config.js file by modifying the value of the presets property in the object passed as an argument to the function provided by @rollup/plugin-babel (and some equivalent changes for the server bundle).

References:

• DEV Community: Setup rollup for React Library project - 2024 by Vivek Kumar

  • What is runtime: "automatic ?
    The "automatic" runtime in Babel refers to the new JSX transform introduced in Babel 17. This transform changes how JSX is compiled, and it eliminates the need for a global React import in each file that uses JSX.
    With the introduction of the automatic runtime in Babel 17, the need for the explicit React import is eliminated.

• React Blog: Introducing the New JSX Transform
• npm: rollup-plugin-esbuild
  • Demonstrates the jsx property
• GitHub: evanw / esbuild — Issue: Support jsx automatic runtime — comment from evanw
• esbuild: Content Types — Auto-import for JSX
  • Demonstrates that 'automatic' is a valid argument for the jsx property
• Preact Guide: Getting Started — Aliasing React to Preact: Aliasing in Node
  • Aliasing in Rollup did not work, which I assume is because it is only in the output transpiled code that react/jsx-runtime is present, i.e. it is not in the pre-transpiled code and therefore cannot be handled as part of Rollup's transpilation