What is the best way to publish a generalized preact/react component?

I have a simple react link component

At the top it has:

var React = require('react');

But it does not bundle react, instead it defines it as a peerDependency.

Installing that module with core preact (without compat) causes a ‘react not found’ error, because browserify, aliasify and friends don’t act on node_modules.

What is the best way to publish a component that is compatible with core preact and react?

[developit]

There are a couple of options, depending on what formats you need to support. If you’re just doing commonjs, you can try this:

var React;
try {
  React = require('react');
} catch(e) {}
if (!react) {
  try {
    React = require('preact');
    React.createElement = React.h;
  } catch(e) {}
}

export default class Link extends React.Component {
  render() {
    return <foo>bar</foo>
  }
}

Another option, possibly the preferable one, would be to export a factory that produces your component. Eric Elliot promotes this approach as a form of Dependency Injection.

/** @jsx h */
export default vdom => {
  let h = vdom.h || vdom.createElement;
  return class Link extends vdom.Component {
    render() {
      return <foo>bar</foo>
    }
  }
};

The usage would then be:

import createLink from 'link';
import preact from 'preact';
const Link = createLink(preact);

Lastly, most people are pretty used to aliasing react out for preact in their bundler of choice (browserify, webpack, etc). If they have aliased React:preact, all you’d have to do is make sure to normalize h() vs createElement():

/**  @jsx h */
var React = require('react');
var h = React.createElement || React.h;

---

One thing to note: preact (without preact-compat, which most people alias) doesn’t support createClass(), only Component. Currently your Link component doesn’t work with Preact core because it relies on createClass. There’s hope though: the React team is looking to split createClass into its own independent library soon 😃

[slmgc]

@sebinsua eventually, I’ve switched to this solution in my tooltip library: https://github.com/slmgc/react-hint/blob/master/src/index.js#L1

There is a factory which returns a component. The factory doesn’t assume which rendering library is being used and expects a compatible interface implementation of createElement and Component, e.g.:

// for react
import React from 'react'
const component = componentFactory(React) // passes createElement & Component

// for preact
import {h as createElement, Component} from 'preact'
const component = componentFactory({createElement, Component})

// for preact-compat
import preact from 'preact-compat'
const component = componentFactory(preact) // passes createElement & Component

// for inferno-compat
import inferno from 'inferno-compat'
const component = componentFactory(inferno) // passes createElement & Component