preact-jsx-runtime

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.

Changelog

1.2.0 (2020-09-12)

Features

• Add ES modules entrypoints.