Add jsx-runtime support
bpinto opened this issue · comments
React 17 has introduced support for a new JSX transform.
The old JSX transform would do the following:
import React from 'react';
function App() {
return <h1>Hello World</h1>;
}
code is transformed into:
import React from 'react';
function App() {
return React.createElement('h1', null, 'Hello world');
}
The new JSX transform would do the following:
function App() {
return <h1>Hello World</h1>;
}
code is transformed into:
// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
return _jsx('h1', { children: 'Hello world' });
}
The following is my initial approach:
import { Fragment, createElement } from 'karet'
export function createElementWithJSX (type, props, key, ...args) {
return createElement(type, { ...props, key }, props.children)
}
export {
createElementWithJSX as jsx,
createElementWithJSX as jsxs,
createElementWithJSX as jsxDEV,
Fragment
}
while the components are rendered and I can remove the import * as React from 'karet'
calls, key
handling is not correct since I am seeing a lot of: Warning: Each child in a list should have a unique "key" prop.
warnings.
These warnings are being thrown by any children: Array
that didn't need a key
in the classic runtime, whether they are wrapped or not with a React.Fragment
.