Reverse compatibility layer

[edygarOliveira]

Is there any layer to consume preact-specific components in React? I mean, some module which would polyfill the h to createElement, render and so on?

[developit]

Here's a basic implementation:

react-compat.js:

import { createElement, Children, cloneElement, Component as ReactComponent } from 'react';
import { render, findDOMNode } from 'react-dom';

const EMPTY_ARR = [];

function h() {
  const vnode = createElement.apply(this, arguments);
  vnode.attributes = vnode.props;
  vnode.nodeName = vnode.tag;
  vnode.children = Children.toArray(vnode.children || vnode.props.children || EMPTY_ARR);
  return vnode;
}

class Component extends ReactComponent {
  get base() {
    return findDOMNode(this);
  }
}

export default { render, h, createElement: h, cloneElement, Component };
export { render, h, h as createElement, cloneElement, Component };

[Ivy4]

@developit where would this go in the build process?

[developit]

resolve: {
  alias: {
    preact: './path/to/react-compat.js'
  }
}

[hadim]

Could you give a more complete example? I am having trouble to make it work.

My React project is setup with react-scripts, I have added your script react-compat.js and added the following:

"module": {
    "exports": {
      "settings": {
        "import/resolver": {
          "alias": {
            "preact:": "./src/react-compat.js"
          }
        }
      }
    }
  }

to the .eslintrc file and also added the lib eslint-import-resolver-alias.

I am not sure that setup is correct and I have an error trying to render the preact component:

Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

[hadim]

(note that the project uses React 16.5)