fix: 调整jsx的代码结构

packages/jsx/jsx-runtime.ts

@@ -1,29 +1,4 @@
-import { batch2hd, isArray } from './src/util';
+import jsx from './src/jsx';
 import Fragment from './src/fragment';
 
-// 实现jsx-runtime 入口，需要使用es5语法
-var jsx = function(type: string | Function, props: any, key?: string) {
-  // f2组件，需要再外部实例化
-  // @ts-ignore
-  if (type.prototype && type.prototype.isComponent) {
-    return {
-      type,
-      props,
-    };
-  }
-  if (typeof type === 'function') {
-    return type(props);
-  }
-  const { style, attrs, children } = props;
-
-  return {
-    type,
-    props,
-    style: batch2hd(style) || {},
-    attrs: batch2hd(attrs),
-    children: children && !isArray(children) ? [ children ] : children,
-    key,
-  };
-};
-
 export { Fragment, jsx, jsx as jsxs };

packages/jsx/src/jsx.ts

@@ -0,0 +1,28 @@
+import { batch2hd, isArray, isFunction } from './util';
+
+// 实现jsx-runtime 入口
+export default function(type: string | Function, props: any, key?: string) {
+  if (isFunction(type)) {
+    // f2组件，需要在外部实例化
+    // @ts-ignore
+    if (type.prototype && type.prototype.isComponent) {
+      return {
+        type,
+        props,
+        key,
+      };
+    }
+    // @ts-ignore
+    return type(props);
+  }
+  const { style, attrs, children } = props;
+
+  return {
+    type,
+    props,
+    style: batch2hd(style) || {},
+    attrs: batch2hd(attrs),
+    children: children && !isArray(children) ? [ children ] : children,
+    key,
+  };
+};

packages/jsx/src/util.ts

@@ -30,6 +30,7 @@ const isNumber = is('Number');
 const isString = is('String');
 const isArray = is('Array');
 const isObject = is('Object');
+const isFunction = is('Function')
 
 function parsePadding(padding: any) {
   if (isNumber(padding) || isString(padding)) {
@@ -77,4 +78,4 @@ function batch2hd(value: any) {
 }
 
 
-export { isString, isArray, isObject, batch2hd };
+export { isString, isArray, isObject, isFunction, batch2hd };

packages/react/src/model.ts

@@ -1,4 +1,4 @@
-import { useEffect, Children, createElement } from 'react';
+import { useEffect, Children } from 'react';
 import F2 from '@antv/f2';
 import { render } from '../../jsx/src/index';
 
@@ -59,6 +59,7 @@ export default ({ canvasRef, pixelRatio, data, children }: any) => {
         components.push(component);
         return;
       }
+      // function component
       let subChildren = type(props);
       subChildren = subChildren && !Array.isArray(subChildren) ? [ subChildren ] : subChildren;
 

packages/react/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "jsx": "react-jsx",
+    "jsxImportSource": "react",
     "esModuleInterop": true
   },
   "extends": "../../tsconfig.json"