Preact JSX Runtime

This module serves as an entrypoint for automatic JSX import using Preact. It enables you to use @babel/preset-react's runtime: 'automatic' option by assigning 'preact-jsx-runtime' as the importSource option. In the future, Preact may offer this out-of-the-box.

For more information, refer to the following resources:

• https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#auto-import
• https://github.com/babel/babel/pull/11154
• https://github.com/facebook/react/pull/18299
• https://github.com/preactjs/preact/pull/2389

Installation

Because preact is defined as a peer dependency, make sure that it's installed if it is not already:

npm install preact

Then, install preact-jsx-runtime.

npm install preact-jsx-runtime

It should be installed as a regular dependency (not a development dependency), since the transformed code will import using preact-jsx-runtime as a proxy to Preact.

Usage

You will most likely want to assign this as the importSource option of @babel/preset-react.

An example Babel configuration might look like:

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic",
        "importSource": "preact-jsx-runtime"
      }
    ]
  ]
}

You can also refer to the test/ directory for example Babel configuration and fixture inputs and outputs.

Or, try the live demo on Glitch.

License

Copyright 2020 Andrew Duthie

Released under the MIT License. See LICENSE.md.