feat: 调整jsx库

.fatherrc.js

@@ -4,10 +4,10 @@ export default {
     'component'
   ],
   cjs: {
-    type: 'babel'
+    // type: 'babel'
   },
   esm: {
-    type: 'babel'
+    // type: 'babel'
   },
   extraBabelPlugins: [
     ['@babel/plugin-transform-react-jsx', {

.gitignore

@@ -8,4 +8,5 @@ coverage/
 *.log
 .vscode/
 .docz/
-.DS_Store
+.DS_Store
+package-lock.json

packages/jsx/package.json

@@ -1,8 +1,9 @@
 {
   "name": "f2-jsx",
   "version": "0.0.1",
-  "main": "lib/index.js",
-  "module": "es/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
   "dependencies": {
     "@antv/f2": "~3.8.1",
     "css-layout": "1.1.1"

packages/jsx/src/index.ts

@@ -1,4 +1,4 @@
 import render from './render';
 export {
   render
-};
+}; 

packages/jsx/src/interface.ts

@@ -12,8 +12,10 @@ declare global {
       render(): any;
     }
     interface IntrinsicElements {
-      // group: any;
-      // rect: any;
+      group: any;
+      rect: any;
+      circle: any;
+      text: any;
     }
   }
 }

packages/jsx/src/render.ts

@@ -23,11 +23,10 @@ function extendArray(arr: any[]) {
 }
 
 function createElement(node, container, parentLayout) {
-  const { type, props, style, layout, children } = node;
+  const { type, props, layout, children } = node;
+  const { attrs } = props;
   if (type === 'group') {
-    const element = container.addGroup({
-      attrs: style,
-    });
+    const element = container.addGroup();
     // 只有group才需要处理children
     if (children && children.length) {
       for (let i = 0, len = children.length; i < len; i++) {
@@ -38,14 +37,14 @@ function createElement(node, container, parentLayout) {
   }
   const { width, height, left, top } = layout;
   return container.addShape(type, {
+    ...props,
     attrs: {
-      ...style,
+      ...attrs,
       x: left,
       y: top,
       width,
       height,
     },
-    ...props,
   });
 }
 

packages/jsx/src/util.ts

@@ -31,7 +31,6 @@ const isArray = is('Array');
 const isObject = is('Object');
 
 
-
 function batch2hd(value: any) {
   // 处理带px的数据
   if (isString(value) && /^-?\d+px$/.test(value)) {

packages/jsx/test/index.test.tsx

@@ -1,5 +1,4 @@
 /** @jsxImportSource .. */
-// @ts-nocheck
 import { canvas } from './global';
 import render from '../src/render';
 
@@ -8,43 +7,36 @@ describe('index', () => {
     canvas.clear();
     const profile = (
       <group style={{
-        // width: 200,
+        width: 200,
+        height: 100,
         flexDirection: 'row',
-        // padding: 20,
-        flex: 1,
       }}>
         <rect style={{
-          // width: 20,
-          // height: 20,
-          fill: 'red'
-        }} />
+            width: 100,
+            flex: 1,
+          }}
+          attrs={{
+            fill: 'red',
+          }}
+        />
         <rect style={{
-          // marginLeft: 10,
-          // width: 20,
-          // height: 20,
-          fill: 'green'
+            flex: 1,
+          }}
+          attrs={{
+            fill: 'green'
         }} />
         <text style={{
-          // width: 20,
-          // margin: 20,
-          text: '111',
-          fill: '#000'
+            flex: 1,
+          }}
+          attrs={{
+            textBaseline: 'top',
+            text: '111',
+            fill: '#000'
         }} />
       </group>
     );
-    // console.log(profile);
     render(profile, canvas);
-
+    console.log(canvas);
     canvas.draw();
-
-    // const group = render(
-    //   <view>
-    //     <text style={{ color: '#000' }}>ss</text>
-    //     <text style={{ color: 'red' }}>aaa</text>
-    //   </view>, canvas);
-    // canvas.draw();
-    // expect(group.get('children').length).toBe(2);
-    // expect(group.get('children')[1].get('attrs').x).toBe(0);
-    // expect(group.get('children')[1].get('attrs').y).toBe(18);
   });
 });

packages/jsx/tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "../../tsconfig.json"
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "typeRoots": [ "/node_modules" ]
+  }
 }

packages/legend/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "f2x-legend",
+  "version": "0.0.1",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "dependencies": {
+    "@antv/f2": "^3.8.1"
+  },
+  "devDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "author": "yezengyue@gmail.com"
+}

packages/legend/src/index.tsx

@@ -0,0 +1,33 @@
+// @ts-nocheck
+/** @jsxImportSource ../../jsx */
+
+function model(View) {
+  return class LegendModel {
+    render() {
+      return <View />
+    }
+  }
+}
+
+
+export default model((props) => {
+  return (
+    <group style={{
+      flexDirection: 'row',
+      padding: 20
+    }}>
+      <text style={{
+        x: 10,
+        y: 10,
+        text: `aa `,
+        fill: '#000'
+      }} />
+      <text style={{
+        x: 60,
+        y: 10,
+        text: 'sold',
+        fill: '#000'
+      }} />
+    </group>
+  );
+})

packages/legend/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

packages/legend/typings.d.ts

@@ -0,0 +1 @@
+import '../../typings';

packages/react/src/chart/model.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState, Children } from 'react';
 import F2 from '@antv/f2';
+import render from '../../../jsx/src/render';
 
 export default ({ canvasRef, pixelRatio, data, children }) => {
   // const [chart, setChart] = useState();
@@ -14,15 +15,24 @@ export default ({ canvasRef, pixelRatio, data, children }) => {
 
     chart.source(data);
 
-    Children.map(children, child => {
+    const components = Children.map(children, child => {
       const { type, props } = child;
-      return type({
+      return new type({
         ...props,
         chart,
       });
     });
 
-    // const frontPlot = chart.get('frontPlot');
+    const frontPlot = chart.get('frontPlot');
+    // @ts-ignore
+    chart.on('aftergeomdraw', () => {
+      // component render
+      for (let i = 0, len = components.length; i < len; i++) {
+        const component = components[i];
+        console.log(component);
+        // render(component.render(), frontPlot);
+      }
+    });
 
     chart.render();
     return;

packages/react/src/interval/index.tsx

@@ -1,15 +1,23 @@
+// @ts-nocheck
 
-export default (props) => {
-  const { chart, position } = props;
-  const geom = chart.interval();
-  geom.position(position);
-  console.log('interval props:', props);
-  return null;
+function model(View) {
+  return class I {
+    init() {
+      const { chart, position } = this.props;
+      const geom = chart.interval();
+      geom.position(position);
+    }
+    render() {
+      return <View />
+    };
+  }
 }
 
-// export default class Interval {
-//   render() {
-//     return null;
-//   }
-// }
+export default model((props) => {
+  // const { chart, position } = props;
+  // const geom = chart.interval();
+  // geom.position(position);
+  // console.log('interval props:', props);
+  return null;
+});
 

packages/react/test/chart.test.tsx

@@ -1,8 +1,10 @@
 /** @jsxImportSource react */
+// @ts-nocheck
 
 import ReactDOM from 'react-dom';
 import Chart from '../src/chart';
 import Interval from '../src/interval';
+import Legned from '../../legend/src/index';
 
 const style = document.createElement('style');
 style.setAttribute('rel', 'text/css');
@@ -34,6 +36,7 @@ const App = () => {
       data={ data }
     >
       <Interval position="genre*sold" />
+      <Legned />
     </Chart>
   );
 }