Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add jsx-runtime support #36

Open
bpinto opened this issue Sep 30, 2021 · 1 comment
Open

Add jsx-runtime support #36

bpinto opened this issue Sep 30, 2021 · 1 comment

Comments

@bpinto
Copy link

bpinto commented Sep 30, 2021

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
Copy link
Author

bpinto commented Sep 30, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant