craco-preact

Craco Preact Plugin

This is a craco plugin that sets up Preact for create-react-app version >= 2.

This plugin add the preact-compat alias so that import React from 'react' will be translated to import React from 'preact-compat'. (preact-compat is a drop-in replacement for React with the same API.)

Use react-app-rewired for create-react-app version 1.

Supported Versions

craco-preact is tested with:

• preact: ^8.3.1
• preact-compat: ^3.18.4
• react-scripts: ^2.1.1
• @craco/craco: ^3.2.2

Installation

First, follow the craco Installation Instructions to install the craco package, create a craco.config.js file, and modify the scripts in your package.json.

Then install craco-preact:

$ yarn add craco-preact

# OR

$ npm i -S craco-preact

Usage

Here is a complete craco.config.js configuration file that adds preact-compat to the create-react-app webpack config:

module.exports = {
  plugins: [{ plugin: require("craco-preact") }]
};

This plugin does not have any options.

View the "Switching to Preact" Documentation.

Should I use the preact-compat alias?

If you are using a React component library such as Ant Design, these React components should work out of the box with the preact-compat alias. However, Preact does not currently support some of the very latest features in React 16+, such as Hooks and Suspense. Here is the Preact GitHub issue about adding the Hooks API. Here are some more Preact issues about supporting other features in React 16+:

• #468 - Beyond (P)react 16
• #432 - Will Preact stay API compatible with React 16?

(We have subscribed to these issues, and will update this README if anything changes.)

If you are building a new Preact app from scratch and you don't need any React libraries, then you don't need the craco-preact plugin. Instead, you should follow the Preact "Getting Started" documentation.

You should still be able to use the create-react-app webpack config with a native Preact application. Just be aware that npm install will always install an unused copy of React, because this is a dependency of react-scripts. This is not an issue. React will not be included in your webpack build unless you explicitly require it with an import statement. (If you use the craco-preact plugin, then all import 'react' statements are translated to import 'preact'.)

Further Configuration

If you need to configure anything else for the webpack build, take a look at the Configuration Overview section in the craco README. You can use CracoPreactPlugin while making other changes to babel and webpack, etc.

Contributing

Install dependencies:

$ yarn install

# OR

$ npm install

Run tests:

$ yarn test

Before submitting a pull request, please check the following:

• All tests are passing
  • Run yarn test
• 100% test coverage
  • Coverage will be printed after running tests.
  • Open the coverage results in your browser: open coverage/lcov-report/index.html
• All code is formatted with Prettier
  • Run prettier --write **/*.js
  • If you use VS Code, I recommend enabling the formatOnSave option.

License

MIT