feat: cli支持装饰器;增加mdf底层控件分类,公共功能抽取

.gitignore

@@ -27,3 +27,5 @@ yarn-error.log*
 /jslib
 package-lock.json
 /demo/build
+
+/.vscode

package.json

@@ -28,6 +28,7 @@
   "dependencies": {
     "@babel/core": "^7.7.7",
     "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/plugin-proposal-decorators": "^7.10.5",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
     "@babel/plugin-proposal-optional-chaining": "^7.9.0",
     "@babel/plugin-transform-modules-commonjs": "^7.8.3",
@@ -45,7 +46,7 @@
     "change-case": "^4.1.1",
     "clean-webpack-plugin": "^3.0.0",
     "commander": "^4.0.1",
-    "compressing": "^1.5.0",
+    "compressing": "^1.5.1",
     "css-loader": "^3.4.0",
     "express": "^4.17.1",
     "file-loader": "^6.0.0",

src/gulp/gulpfile.js

@@ -36,6 +36,7 @@ task('javascript', () => {
       ],
       plugins: [
         ...plugins,
+        [resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
         [resolve('@babel/plugin-transform-modules-commonjs')],
         [resolve('@babel/plugin-proposal-class-properties'), { legacy: true }]
       ]
@@ -55,6 +56,7 @@ task('es', () => {
       ],
       plugins: [
         ...plugins,
+        [resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
         [resolve('@babel/plugin-proposal-class-properties'), { legacy: true }]
       ]
     }))

src/webpack/webpack.base.config.js

@@ -56,6 +56,7 @@ module.exports = () => {
                 ],
                 plugins: [
                   ...plugins, // babel-plugin-import 插件的顺序会影响功能，只能放在前面
+                  [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
                   [require.resolve('@babel/plugin-proposal-optional-chaining')],
                   [require.resolve('@babel/plugin-proposal-nullish-coalescing-operator')],
                   [require.resolve('@babel/plugin-transform-modules-commonjs')],

templates/Project/components/_mdfComponent/buttonComp.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import compUtils from './common';
+export default (WrapComponent) => {
+  return class ButtonComp extends React.Component {
+    componentDidMount () {
+      console.log('%c container didMount', 'color:red');
+      compUtils.bind(this);
+    }
+
+    componentWillUnmount () {
+      console.log('%c container Unmount', 'color:red');
+      compUtils.unbind(this);
+    }
+
+    afterClick () {
+      const currentModel = this.props.model;
+      currentModel?.fireEvent('click');
+    }
+
+    render () {
+      const allProps = {
+        ...this.props,
+        ...this.state
+      }
+      return <WrapComponent {...allProps} />
+    }
+  }
+}

templates/Project/components/_mdfComponent/common.js

@@ -0,0 +1,12 @@
+const compUtils = {
+  bind: function (oThis) {
+    const currentModel = oThis.props.model;
+    if (currentModel) currentModel.addListener(oThis);
+  },
+  unbind: function (oThis) {
+    const currentModel = oThis.props.model;
+    if (currentModel) currentModel.removeListener(oThis);
+  }
+}
+
+export default compUtils

templates/Project/components/_mdfComponent/containerComp.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import compUtils from './common';
+export default (WrapComponent) => {
+  return class ControlComp extends React.Component {
+    constructor (props) {
+      super();
+    }
+
+    componentDidMount () {
+      console.log('%c container didMount', 'color:red');
+      compUtils.bind(this);
+      const { viewModel, meta } = this.props;
+      viewModel.on('updateViewMeta', args => {
+        const { code, visible } = args;
+        if (code == meta.cGroupCode) {
+          this.setState({ visible });
+        }
+      }, undefined, true);
+    }
+
+    componentWillUnmount () {
+      console.log('%c container Unmount', 'color:red');
+      compUtils.unbind(this);
+    }
+
+    render () {
+      const allProps = {
+        ...this.props,
+        ...this.state
+      }
+      return <WrapComponent {...allProps} />
+    }
+  }
+}

templates/Project/components/_mdfComponent/controlComp.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import compUtils from './common';
+export default (WrapComponent) => {
+  return class ControlComp extends React.Component {
+    constructor (props) {
+      super();
+    }
+
+    componentDidMount () {
+      console.log('%c container didMount', 'color:red');
+      compUtils.bind(this);
+    }
+
+    componentWillUnmount () {
+      console.log('%c container Unmount', 'color:red');
+      compUtils.unbind(this);
+    }
+
+    /**
+     * 输入值改变之后出发事件
+     * @param {*} value 当前输入框值
+     */
+    afterValueChange = (value) => {
+      this.props.model.setValue(value);
+    }
+
+    /**
+     * 模型校验后的回调事件
+     * @param {*} val 当前校验信息
+     */
+    validate (val) {
+      this.setState({
+        err: 'has-feedback has-' + val.type,
+        msg: val.message
+      });
+    }
+
+    render () {
+      const allProps = {
+        ...this.props,
+        ...this.state,
+        afterValueChange: this.afterValueChange
+      }
+      return <WrapComponent {...allProps} />
+    }
+  }
+}

templates/Project/components/_mdfComponent/demo.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Input } from 'yonui-ys';
+
+import MDFComponent from './index';
+import metaConfig from './metaConfig';
+
+@MDFComponent({type: 'control'}) // @mdf 标识，参数改成对象模式，type，绑定模型是什么
+class Demo extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {}
+  }
+
+  open = () => {
+    this.setState({
+      open:true
+    })
+    this.props.onOpen()
+  }
+
+  handleChange = (e) => {
+    const value = e && e.target ? e.target.value : e;
+    const { afterValueChange } = this.props
+    if (typeof afterValueChange == 'function')
+      afterValueChange(value);
+  }
+
+  render () {
+    const { value } = this.props;
+    return <div className='panel'> Demo hello!!! <Input value={value} onChange={this.handleChange} /> </div>
+  }
+}
+
+export default Demo

templates/Project/components/_mdfComponent/index.jsx

@@ -0,0 +1,28 @@
+
+import ControlComp from './controlComp'
+import ButtonComp from './buttonComp'
+import ContainerComp from './containerComp'
+
+function createComp (compInfo = {}) {
+  const { type } = compInfo
+  console.log('type', type);
+  return function (targetCompent, name, descriptor) {
+    console.log(targetCompent, name, descriptor)
+    return getAbstractCompFactory(type, targetCompent)
+  }
+}
+
+function getAbstractCompFactory (type = 'control', targetCompent) {
+  switch (type) {
+    case 'control':
+      return ControlComp(targetCompent);
+    case 'container':
+      return ContainerComp(targetCompent);
+    case 'button':
+      return ButtonComp(targetCompent);
+    default:
+      console.log('%c 依赖基类不存在', 'color:red');
+  }
+}
+
+export default createComp

templates/Project/components/_mdfComponent/metaConfig.js

@@ -0,0 +1,9 @@
+// const metaConfig = {
+//   setConfig: function (data) {
+//     console.log('metaConfig-------', data);
+//   }
+// }
+function metaConfig (data) {
+  console.log('metaConfig-------', data);
+}
+export default metaConfig

templates/Project/tsconfig.json

@@ -18,6 +18,7 @@
       "allowSyntheticDefaultImports": true,
       "resolveJsonModule": true,
       "isolatedModules": true,
+      "experimentalDecorators":true,
       "noEmit": true
     },
     "include": [