style: eslint settings

packages/react-renderer/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  extends: 'eslint-config-ali/typescript/react',
+  rules: {
+    "react/no-multi-comp": 1,
+    "no-shadow": 1,
+    "no-nested-ternary": 1
+  },
+};

packages/react-renderer/src/context/appContext.ts

@@ -1,4 +1,5 @@
 import { createContext } from 'react';
 
-const context = (window.__appContext = createContext({}));
+const context = createContext({});
+window.__appContext = context;
 export default context;

packages/react-renderer/src/engine/index.tsx

@@ -31,16 +31,19 @@ class FaultComponent extends PureComponent {
     // FIXME: errorlog
     console.error('render error', this.props);
     const { _componentName: componentName } = this.props;
-    return (<Div
+    return (
-      style={{
+      <Div
-        backgroundColor: '#DE2710',
+        style={{
-        padding: '15px',
+          backgroundColor: '#DE2710',
-        fontSize: '18px',
+          padding: '15px',
-        textAlign: 'center',
+          fontSize: '18px',
-        color: 'white',
+          textAlign: 'center',
-      }}
+          color: 'white',
-    >组件 {componentName} 渲染错误，请打开控制台排查
+        }}
-            </Div>);
+      >
+        组件 {componentName} 渲染错误，请打开控制台排查
+      </Div>
+    );
   }
 }
 
@@ -48,17 +51,20 @@ class NotFoundComponent extends PureComponent {
   render() {
     console.error('component not found:', this.props);
     const { _componentName: componentName } = this.props;
-    return (<Div
+    return (
-      {...this.props}
+      <Div
-      style={{
+        {...this.props}
-        backgroundColor: '#3E91C9',
+        style={{
-        padding: '15px',
+          backgroundColor: '#3E91C9',
-        fontSize: '18px',
+          padding: '15px',
-        textAlign: 'center',
+          fontSize: '18px',
-        color: 'white',
+          textAlign: 'center',
-      }}
+          color: 'white',
-    >组件 {componentName} 无视图，请打开控制台排查
+        }}
-            </Div>);
+      >
+        组件 {componentName} 无视图，请打开控制台排查
+      </Div>
+    );
   }
 }
 
@@ -66,6 +72,7 @@ function isReactClass(obj) {
   return obj && obj.prototype && (obj.prototype.isReactComponent || obj.prototype instanceof Component);
 }
 
+// eslint-disable-next-line react/no-redundant-should-component-update
 export default class Engine extends PureComponent {
   static dislayName = 'engine';
 
@@ -131,18 +138,18 @@ export default class Engine extends PureComponent {
     }
   };
 
-  patchDidCatch(Component) {
+  patchDidCatch(SetComponent) {
-    if (!isReactClass(Component)) {
+    if (!isReactClass(SetComponent)) {
       return;
     }
-    if (Component.patchedCatch) {
+    if (SetComponent.patchedCatch) {
       return;
     }
-    Component.patchedCatch = true;
+    SetComponent.patchedCatch = true;
-    Component.getDerivedStateFromError = (error) => ({ engineRenderError: true, error });
+    SetComponent.getDerivedStateFromError = (error) => ({ engineRenderError: true, error });
     const engine = this;
-    const originRender = Component.prototype.render;
+    const originRender = SetComponent.prototype.render;
-    Component.prototype.render = function () {
+    SetComponent.prototype.render = function () {
       if (this.state && this.state.engineRenderError) {
         this.state.engineRenderError = false;
         return engine.createElement(engine.getFaultComponent(), {
@@ -152,8 +159,8 @@ export default class Engine extends PureComponent {
       }
       return originRender.call(this);
     };
-    const originShouldComponentUpdate = Component.prototype.shouldComponentUpdate;
+    const originShouldComponentUpdate = SetComponent.prototype.shouldComponentUpdate;
-    Component.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+    SetComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
       if (nextState && nextState.engineRenderError) {
         return true;
       }
@@ -161,10 +168,10 @@ export default class Engine extends PureComponent {
     };
   }
 
-  createElement(Component, props, children) {
+  createElement(SetComponent, props, children) {
     // TODO: enable in runtime mode?
-    this.patchDidCatch(Component);
+    this.patchDidCatch(SetComponent);
-    return (this.props.customCreateElement || reactCreateElement)(Component, props, children);
+    return (this.props.customCreateElement || reactCreateElement)(SetComponent, props, children);
   }
 
   getNotFoundComponent() {
@@ -177,7 +184,7 @@ export default class Engine extends PureComponent {
 
   render() {
     const {
-      schema, designMode, appHelper, components, customCreateElement,
+      schema, designMode, appHelper, components,
     } = this.props;
     if (isEmpty(schema)) {
       return null;
@@ -191,7 +198,6 @@ export default class Engine extends PureComponent {
     const allComponents = { ...ENGINE_COMPS, ...components };
     let Comp = allComponents[componentName] || ENGINE_COMPS[`${componentName}Engine`];
     if (Comp && Comp.prototype) {
-      const proto = Comp.prototype;
       if (!(Comp.prototype instanceof BaseEngine)) {
         Comp = ENGINE_COMPS[`${componentName}Engine`];
       }

packages/react-renderer/src/index.tsx

@@ -30,17 +30,20 @@ class FaultComponent extends PureComponent {
   render() {
     // FIXME: errorlog
     console.error('render error', this.props);
-    return (<Div style={{
+    return (
-      width: '100%',
+      <Div style={{
-      height: '50px',
+        width: '100%',
-      lineHeight: '50px',
+        height: '50px',
-      textAlign: 'center',
+        lineHeight: '50px',
-      fontSize: '15px',
+        textAlign: 'center',
-      color: '#ff0000',
+        fontSize: '15px',
-      border: '2px solid #ff0000',
+        color: '#ff0000',
-    }}
+        border: '2px solid #ff0000',
-    >组件渲染异常，请查看控制台日志
+      }}
-            </Div>);
+      >
+        组件渲染异常，请查看控制台日志
+      </Div>
+    );
   }
 }
 
@@ -120,20 +123,20 @@ export default class Renderer extends Component {
     }
   };
 
-  patchDidCatch(Component) {
+  patchDidCatch(SetComponent) {
-    if (!isReactClass(Component)) {
+    if (!isReactClass(SetComponent)) {
       return;
     }
-    if (Component.patchedCatch) {
+    if (SetComponent.patchedCatch) {
       return;
     }
-    Component.patchedCatch = true;
+    SetComponent.patchedCatch = true;
-    Component.getDerivedStateFromError = (error) => {
+    SetComponent.getDerivedStateFromError = (error) => {
       return { engineRenderError: true, error };
     };
     const engine = this;
-    const originRender = Component.prototype.render;
+    const originRender = SetComponent.prototype.render;
-    Component.prototype.render = function () {
+    SetComponent.prototype.render = function () {
       if (this.state && this.state.engineRenderError) {
         this.state.engineRenderError = false;
         return engine.createElement(engine.getFaultComponent(), {
@@ -143,8 +146,8 @@ export default class Renderer extends Component {
       }
       return originRender.call(this);
     };
-    const originShouldComponentUpdate = Component.prototype.shouldComponentUpdate;
+    const originShouldComponentUpdate = SetComponent.prototype.shouldComponentUpdate;
-    Component.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+    SetComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
       if (nextState && nextState.engineRenderError) {
         return true;
       }
@@ -152,10 +155,10 @@ export default class Renderer extends Component {
     };
   }
 
-  createElement(Component, props, children) {
+  createElement(SetComponent, props, children) {
     // TODO: enable in runtime mode?
-    this.patchDidCatch(Component);
+    this.patchDidCatch(SetComponent);
-    return (this.props.customCreateElement || reactCreateElement)(Component, props, children);
+    return (this.props.customCreateElement || reactCreateElement)(SetComponent, props, children);
   }
 
   getNotFoundComponent() {
@@ -167,7 +170,7 @@ export default class Renderer extends Component {
   }
 
   render() {
-    const { schema, designMode, appHelper, components, customCreateElement } = this.props;
+    const { schema, designMode, appHelper, components } = this.props;
     if (isEmpty(schema)) {
       return null;
     }
@@ -180,7 +183,6 @@ export default class Renderer extends Component {
     const allComponents = { ...ENGINE_COMPS, ...components };
     let Comp = allComponents[componentName] || ENGINE_COMPS[`${componentName}Engine`];
     if (Comp && Comp.prototype) {
-      const proto = Comp.prototype;
       if (!(Comp.prototype instanceof BaseEngine)) {
         Comp = ENGINE_COMPS[`${componentName}Engine`];
       }

packages/react-renderer/src/renderer/addon.tsx

@@ -78,7 +78,7 @@ export default class AddonRenderer extends BaseRenderer {
     debug(`addon.componentWillUnmount - ${this.props.__schema.fileName}`);
   }
 
-  async componentDidCatch(e) {
+  async componentDidCatch() {
     super.componentDidCatch(...arguments);
     debug(`addon.componentDidCatch - ${this.props.__schema.fileName}`);
   }

packages/react-renderer/src/renderer/base.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-proto */
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Debug from 'debug';
@@ -245,7 +246,7 @@ export default class BaseRender extends PureComponent {
       }
       if (Array.isArray(schema)) {
         if (schema.length === 1) return this.__createVirtualDom(schema[0], self, parentInfo);
-        return schema.map((item, idx) => this.__createVirtualDom(item, self, parentInfo, item && item.__ctx && item.__ctx.lunaKey ? '' : idx));
+        return schema.map((item, idy) => this.__createVirtualDom(item, self, parentInfo, item && item.__ctx && item.__ctx.lunaKey ? '' : idy));
       }
       // FIXME
       const _children = this.getSchemaChildren(schema);
@@ -456,7 +457,7 @@ export default class BaseRender extends PureComponent {
       return checkProps(function () {
         const args = {};
         if (Array.isArray(params) && params.length) {
-          params.map((item, idx) => {
+          params.forEach((item, idx) => {
             if (typeof item === 'string') {
               args[item] = arguments[idx];
             } else if (item && typeof item === 'object') {

packages/react-renderer/src/renderer/component.tsx

@@ -62,7 +62,7 @@ export default class CompRenderer extends BaseRenderer {
     debug(`comp.componentWillUnmount - ${this.props.__schema.fileName}`);
   }
 
-  async componentDidCatch(e) {
+  async componentDidCatch() {
     super.componentDidCatch(...arguments);
     debug(`comp.componentDidCatch - ${this.props.__schema.fileName}`);
   }

packages/react-renderer/src/renderer/temp.tsx

@@ -39,7 +39,7 @@ export default class TempRenderer extends BaseRenderer {
     debug(`temp.componentDidMount - ${this.props.__schema.fileName}`);
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate() {
     debug(`temp.componentDidUpdate - ${this.props.__schema.fileName}`);
   }
 

packages/react-renderer/src/utils/dataHelper.ts

@@ -1,6 +1,5 @@
 import { transformArrayToMap, isJSFunction, transformStringToFunction, clone } from './index';
 import { jsonp, mtop, request, get, post, bzb } from './request';
-import Debug from 'debug';
 
 const DS_STATUS = {
   INIT: 'init',
@@ -8,7 +7,6 @@ const DS_STATUS = {
   LOADED: 'loaded',
   ERROR: 'error',
 };
-const debug = Debug('utils:dataHelper');
 export default class DataHelper {
   constructor(comp, config = {}, appHelper, parser) {
     this.host = comp;
@@ -158,7 +156,7 @@ export default class DataHelper {
       const afterRequest = this.appHelper && this.appHelper.utils && this.appHelper.utils.afterRequest;
       const csrfInput = document.getElementById('_csrf_token');
       const _tb_token_ = csrfInput && csrfInput.value;
-      asyncDataList.map((req) => {
+      asyncDataList.forEach((req) => {
         const { id, type, options } = req;
         if (!id || !type) return;
         if (type === 'doServer') {
@@ -271,6 +269,7 @@ export default class DataHelper {
   }
 
   fetchOne(type, options) {
+    // eslint-disable-next-line prefer-const
     let { uri, method = 'GET', headers, params, ...otherProps } = options;
     otherProps = otherProps || {};
     switch (type) {

packages/react-renderer/src/utils/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-new-func */
 import Debug from 'debug';
 import _keymaster from 'keymaster';
 import { forEach as _forEach, shallowEqual as _shallowEqual } from '@ali/b3-one/lib/obj';
@@ -159,6 +160,7 @@ export function fillObj(receiver = {}, ...suppliers) {
 
 // 中划线转驼峰
 export function toHump(name) {
+  // eslint-disable-next-line no-useless-escape
   return name.replace(/\-(\w)/g, (all, letter) => {
     return letter.toUpperCase();
   });
@@ -448,7 +450,7 @@ export function addCssTag(id, content) {
 
 // 注册快捷
 export function registShortCuts(config, appHelper) {
-  const keyboardFilter = (keymaster.filter = (event) => {
+  const keyboardFilter = (event) => {
     const eTarget = event.target || event.srcElement;
     const { tagName } = eTarget;
     const isInput = !!(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
@@ -459,7 +461,8 @@ export function registShortCuts(config, appHelper) {
     } else {
       return true;
     }
-  });
+  };
+  keymaster.filter = keyboardFilter;
 
   const ideMessage = appHelper.utils && appHelper.utils.ideMessage;
 

packages/react-renderer/src/utils/request.ts

@@ -2,10 +2,8 @@ import 'whatwg-fetch';
 import fetchMtop from '@ali/lib-mtop';
 import fetchJsonp from 'fetch-jsonp';
 import bzbRequest from '@ali/bzb-request';
-import Debug from 'debug';
 import { serialize, buildUrl, parseUrl } from '@ali/b3-one/lib/url';
 
-const debug = Debug('utils:request');
 export function get(dataAPI, params = {}, headers = {}, otherProps = {}) {
   headers = {
     Accept: 'application/json',