Closed edygarOliveira closed 4 years ago
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 };
@developit where would this go in the build process?
resolve: {
alias: {
preact: './path/to/react-compat.js'
}
}
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.
(note that the project uses React 16.5)
Is there any layer to consume preact-specific components in React? I mean, some module which would polyfill the
h
tocreateElement
,render
and so on?