fix: should re-export createElement for backwards compatibility

[HomyeeKing]

背景

https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#manual-babel-setup

根据 React 文档说明，自定义的 jsx runtime 需要兼容一个异常 case，这个 case 需要使用 createElement 来进行 jsx 的转换，如果指定了 importSource，则会使用 importSource 导出的 createElement

Case

详细阅读 facebook/react#20031 (comment)

<div {...obj} key="foo" />： 即在 key 前有 spread object 的行为，会编译成使用 importSource(默认 react) 的 createElement

export default function Mod(props) {
  return (
    <>
      <div {...{ key: 123 }} style={props.style} key='sss'>
        hello mod
      </div>
    </>
  );
}

编译结果：

import { createElement as _createElement } from "@ice/jsx-runtime";
import { Fragment as _Fragment, jsx as _jsx } from "@ice/jsx-runtime/jsx-runtime";
export default function Mod(props) {
    return _jsx(_Fragment, {
        children: _createElement("div", {
            key: 123,
            style: props.style,
            key: "sss"
        }, "hello mod")
    });
}

其他

• 保持了 rpx 单位的转化

workaround

开发者可以通过把 key 移到 spread object 之前即可，即

export default function Mod(props) {
  return (
    <>
      <div 
+      key='sss' 
      {...{ key: 123 }} style={props.style}
-      key='sss' 
>
        hello mod
      </div>
    </>
  );
}

编译结果：

import { jsx as _jsx, Fragment as _Fragment } from "@ice/jsx-runtime/jsx-runtime";
export default function Mod(props) {
    return _jsx(_Fragment, {
        children: _jsx("div", {
            key: 123,
            style: props.style,
            children: "hello mod"
        }, 'sss')
    });
}