calmm-js / karet

Karet is a library that allows you to embed Kefir observables into React VDOM
MIT License
83 stars 8 forks source link

Add jsx-runtime support #36

Open bpinto opened 3 years ago

bpinto commented 3 years ago

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' });
}
bpinto commented 3 years ago

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.