npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

preact-compat

v3.19.0

Published

A React compatibility layer for Preact

Downloads

182,820

Readme

preact-compat

NPM travis-ci CDNJS

🚨 Note: This module is for Preact 8.x and prior - Preact X includes compat by default. For Preact X, please uninstall preact-compat and replace your aliases with preact/compat.

This module is a compatibility layer that makes React-based modules work with Preact, without any code changes.

It provides the same exports as react and react-dom, meaning you can use your build tool of choice to drop it in where React is being depended on.

Interested? Here's an example project that uses preact-compat to work with an existing React library unmodified, achieving more than 95% reduction in size:

preact-compat-example


Why?

... or really, "why preact"?

React is a great library and a great concept, and has a large community of module authors creating high-quality components. However, these components are tightly coupled to React through the use of generic package imports (example).

Preact is a tiny (3kb) implementation of the core value of React, and maintains a nearly identical API. With a shim like this in place, it is possible to use other React-like libraries like Preact, without forking modules just to change their imports.

There are better long-term ways to solve the coupling issue, like using factory functions that accept named generic methods (not just React DI), as suggested by Eric Elliot. However, since the React community has already authored so many modules in a more explicitly coupled manner, it's worth having a simple short-term solution for those who would like to liberate themselves from library lock-in.


Installation

You need to install preact-compat first through npm:

npm i --save preact-compat

NOTE: You need to have preact already installed, if you don't, install it like so:

npm i --save preact

Usage with Webpack

Using preact-compat with Webpack is easy.

All you have to do is add an alias for react and react-dom:

{
    // ...
    resolve: {
        alias: {
            'react': 'preact-compat',
            'react-dom': 'preact-compat',
            // Not necessary unless you consume a module using `createClass`
            'create-react-class': 'preact-compat/lib/create-react-class',
            // Not necessary unless you consume a module requiring `react-dom-factories`
            'react-dom-factories': 'preact-compat/lib/react-dom-factories'
        }
    }
    // ...
}

Usage with Browserify

Using preact-compat with Browserify is as simple as installing and configuring aliasify.

First, install it: npm install --save-dev aliasify

... then in your package.json, configure aliasify to alias react and react-dom:

{
    // ...
    "aliasify": {
        "aliases": {
            "react": "preact-compat",
            "react-dom": "preact-compat",
            // Not necessary unless you consume a module using `createClass`
            "create-react-class": "preact-compat/lib/create-react-class",
            // Not necessary unless you consume a module requiring `react-dom-factories`
            "react-dom-factories": "preact-compat/lib/react-dom-factories"
        }
    }
    // ...
}

If you want to use a package that has a peer dependency of React and want it to point to preact-compat you’ll need to set Aliasify to be a global transform. This is not achievable by editing package.json, you’ll need to use the Browserify api and include the global option there:

b.transform(aliasify, {
  global: true,
  aliases: {
    'react': 'preact-compat',
    'react-dom': 'preact-compat'
  }
});

Usage with Babel

Using preact-compat with Babel is easy.

Install the babel plugin for aliasing: npm install --save-dev babel-plugin-module-resolver

All you have to do is tell babel to process jsx with 'h' and add an alias for react and react-dom in your .babelrc:

{
    // ...
    "plugins": [
        ["module-resolver", {
        "root": ["."],
        "alias": {
            "react": "preact-compat",
            "react-dom": "preact-compat",
            // Not necessary unless you consume a module using `createClass`
            "create-react-class": "preact-compat/lib/create-react-class",
            // Not necessary unless you consume a module requiring `react-dom-factories`
            "react-dom-factories": "preact-compat/lib/react-dom-factories"
        }
        }]
    ],
    "presets": [
        "react"
    ]
    // ...
}

Usage with Brunch

Using preact-compat with Brunch requires no extra plugins.

In your brunch-config.js you can export an npm object to configure aliases:

// ...
exports.npm = {
  enabled: true,
  aliases: {
    'react': 'preact-compat',
    'react-dom': 'preact-compat'
  }
}
// ...

Once Aliased

With the above Webpack or Browserify aliases in place, existing React modules should work nicely:

import React, { Component } from 'react';
import { render } from 'react-dom';

class Foo extends Component {
    propTypes = {
        a: React.PropTypes.string.isRequired
    };
    render() {
        let { a, b, children } = this.props;
        return <div {...{a,b}}>{ children }</div>;
    }
}

render((
    <Foo a="a">test</Foo>
), document.body);

Use Without Webpack/Browserify

preact-compat and its single dependency prop-types are both published as UMD modules as of preact-compat version 0.6. This means you can use them via a <script> tag without issue:

<script src="//unpkg.com/preact"></script>
<script src="//unpkg.com/prop-types/prop-types.min.js"></script>
<script src="//unpkg.com/preact-compat"></script>
<script>
    var React = preactCompat,
        ReactDOM = preactCompat;
    ReactDOM.render(<h1>Hello!</h1>, document.body);
</script>

You can see the above in action with this JSFiddle Example.


PropTypes

preact-compat adds support for validating PropTypes out of the box. This can be disabled the same way it is when using React, by defining a global process.env.NODE_ENV='production'. PropType errors should work the same as in React - the prop-types module used here is published by the React team to replace PropTypes in React.

License

MIT