feat: update ts

Author: vnues

.babelrc

@@ -1,6 +1,9 @@
 {
   "presets": ["@babel/env", "@babel/typescript", "@babel/react"],
-  "plugins": ["@babel/plugin-transform-runtime"],
+  "plugins": [
+    "@babel/plugin-transform-runtime",
+    "@babel/plugin-proposal-class-properties"
+  ],
   "env": {
     "esm": {
       "presets": [
@@ -31,7 +34,6 @@
           }
         ]
       ]
-      // "plugins": ["./build/babel/plugin/no-require-css"]
     }
   }
 }

.eslintrc.json

@@ -125,19 +125,28 @@
     "no-irregular-whitespace": "off",
     "no-multiple-empty-lines": "off",
     "no-new-wrappers": "error",
+    "no-lonely-if": "off",
     "no-shadow": [
       "off",
       {
         "hoist": "all"
       }
     ],
+    "no-return-await": "off",
     "no-throw-literal": "error",
     "no-trailing-spaces": "off",
     "no-undef-init": "error",
+    "class-methods-use-this": "off",
     "no-underscore-dangle": [
       "error",
       {
-        "allow": ["__INITIAL_DATA__", "__STORE__", "_insertCss"],
+        "allow": [
+          "__INITIAL_DATA__",
+          "__STORE__",
+          "_insertCss",
+          "__SERVER__",
+          "__IS_PROD__"
+        ],
         "allowAfterThis": true,
         "allowAfterThisConstructor": true
       }
@@ -169,6 +178,7 @@
         "enforceDynamicLinks": "always"
       }
     ],
+    "react/button-has-type": "off",
     "no-restricted-syntax": "off",
     "import/extensions": "off",
     "import/no-unresolved": "off",

build/start.js

@@ -1,20 +1,21 @@
-// 整个编译服务的启动入口
-// 包括以下功能----
-// 服务端代码的首次编译
-// 文件的监听
-// 前端代码的打包和 watch
-// node服务的启动
-
-// 服务度代码编译完成后 启动node 服务
-// 服务代码每次编译后，重启node 服务
-
 const { spawn } = require('child_process') // 用于创建子进程
 const constantCode = require('../config/constant')
 const chalk = require('chalk') // 为控制台输出的信息增加点色彩
 const log = console.log
-const proConfig = require('../src/common/pro-config')
-const getIp = require('../src/server/utils/get-ip')
+const proConfig = require('../config/pro-config')
+const os = require('os')
 
+function getIp() {
+  const interfaces = os.networkInterfaces()
+  for (const name of Object.keys(interfaces)) {
+    for (const interface of interfaces[name]) {
+      const { address, family, internal } = interface
+      if (family === 'IPv4' && !internal) {
+        return address
+      }
+    }
+  }
+}
 // node server port
 const nodeServerPort = proConfig.nodeServerPort
 
@@ -32,6 +33,7 @@ const feCodeWatchProcess = spawn('npm', ['run', 'client:dev', localHostIp], {
 const svrCodeWatchProcess = spawn('npm', ['run', 'server-dev:build'], {
   shell: process.platform === 'win32'
 })
+
 // node 服务进程
 let nodeServerProcess = null
 // 启动 node 服务

src/common/pro-config.ts config/pro-config.js

@@ -1,4 +1,4 @@
-export default {
+module.exports = {
   __IS_SSR__: true, // 是否为 ssr 模式
   wdsPort: 9002, // wds 服务的运行端口
   nodeServerPort: 9001, // node server 的监听端口

package.json

@@ -46,6 +46,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.13.16",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-decorators": "^7.13.15",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-react-jsx": "^7.13.12",
@@ -57,6 +58,8 @@
     "@commitlint/config-conventional": "^12.1.1",
     "@hot-loader/react-dom": "^17.0.1",
     "@types/classnames": "^2.3.1",
+    "@types/koa": "^2.13.1",
+    "@types/koa-static": "^4.0.1",
     "@types/node": "^15.0.1",
     "@types/react-dom": "^17.0.3",
     "@types/react-router-dom": "^5.1.7",

src/client/components/asyncBundle/index.tsx

@@ -1,51 +1,43 @@
-
-import React from 'react';
+import React from 'react'
 import LoadingCompoent from '../loading'
 
-
 /**
  * 动态加载组件一个组的容器
  *
  * @class Bundle
  * @extends {Component}
  */
-export default class AsyncBundle extends React.Component<any, any> {
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      mod: null
-    };
+
+interface IPops {
+  children: any
+}
+export default class AsyncBundle extends React.PureComponent<IPops, any> {
+  state = {
+    mod: null
   }
 
   componentDidMount() {
-    if (!this.state.mod) {
-      this.load(this.props);
+    const { mod } = this.state
+    if (mod) {
+      this.load(this.props)
     }
   }
 
-  // UNSAFE_componentWillReceiveProps(nextProps) {
-
-  //     //路由改变才会按需
-  //     if (nextProps.match && this.props.match && (nextProps.match.url !== this.props.match.url)) {
-  //         this.load(nextProps);
-  //     }
-  // }
-
-
   load(props: any) {
     this.setState({
       mod: null
-    });
-    //注意这里，使用Promise对象; mod.default导出默认
+    })
+    // 注意这里，使用Promise对象; mod.default导出默认
     props.load().then((mod: any) => {
       this.setState({
         mod: mod.default ? mod.default : mod
-      });
-    });
+      })
+    })
   }
 
   render() {
-    // @ts-ignore
-    return this.state.mod ? this.props.children(this.state.mod) : <LoadingCompoent />;
+    const { mod } = this.state
+    const { children } = this.props
+    return mod ? children(mod) : <LoadingCompoent />
   }
 }

src/client/components/asyncLoader/index.tsx

@@ -1,16 +1,12 @@
-//异步加载组件的高阶函数
-
-import AsyncBundle from '../asyncBundle'
-// @ts-ignore
-import proConfig from '../../../common/pro-config.js'
 import React from 'react'
+import AsyncBundle from '../asyncBundle'
+import proConfig from '../../../../config/pro-config'
+
 function AsyncLoader(loader: any) {
   function asyncFn(props: any) {
     return <AsyncBundle load={loader}>{(Comp: any) => <Comp {...props} />}</AsyncBundle>
   }
-
-  //标记为异步组件
-  // @ts-ignore
+  // 标记为异步组件
   asyncFn[proConfig.asyncComponentKey] = true
 
   return asyncFn

src/client/components/container/index.tsx

@@ -1,86 +1,82 @@
-//高阶组件 用于提取重复逻辑
 import React from 'react'
 
-let _this = null
+let self: any = null
 
 const popStateCallback = () => {
   // 使用popStateFn保存函数防止addEventListener重复注册
-  if (_this && _this.getInitialProps) {
+  if (self && self.getInitialProps) {
     console.log('popStateFn')
-    _this.getInitialProps()
+    self.getInitialProps()
   }
 }
 
-export default SourceComponent => {
-  return class HoComponent extends React.Component {
-    constructor(props, context) {
-      super(props)
-      console.log('props', props)
-      this.state = {
-        initialData: {},
-        canClientFetch: false //浏览器端是否需要请求数据
-      }
+export default (SourceComponent: any) =>
+  class HoComponent extends React.PureComponent<any, any> {
+    state = {
+      initialData: {},
+      canClientFetch: false // 浏览器端是否需要请求数据
     }
 
-    //转接子组件的预取方法，服务端会调用这个方法来做数据预取
-    static async getInitialProps(ctx) {
+    // 转接子组件的预取方法，服务端会调用这个方法来做数据预取
+    static async getInitialProps(ctx: any) {
       return SourceComponent.getInitialProps
         ? await SourceComponent.getInitialProps(ctx)
         : {}
     }
+
+    async componentDidMount() {
+      const { history } = this.props
+      self = this // 修正self指向，保证self指向当前渲染的页面组件
+      // 注册事件，用于在页面回退的时候触发
+      window.addEventListener('popstate', popStateCallback)
+
+      const canClientFetch = history && history.action === 'PUSH' // 路由跳转的时候可以异步请求数据
+      if (canClientFetch) {
+        // 如果是 history PUSH 操作 则更新数据
+        await this.getInitialProps()
+      }
+    }
+
     // ! csr/ssr切换路由时才调用组件的getInitialProps方法
-    //用于封装处理数据的更新逻辑
+    // 用于封装处理数据的更新逻辑
     async getInitialProps() {
       // ssr首次进入页面以及csr/ssr切换路由时才调用组件的getInitialProps方法
-      const props = this.props
-      const store = window.__STORE__ //从全局得到 store
-
+      const store = window.__STORE__ // 从全局得到 store
       // 兼容不使用 redux 的页面
       // 通过props.getInitialData判断
       // ! 那就说明约定getInitialData
       const res = SourceComponent.getInitialProps
         ? await SourceComponent.getInitialProps({ store })
         : {}
-      //处理页面 title 显示
-      let { tdk } = res.page || {}
+      // 处理页面 title 显示
+      const { tdk } = res.page || {}
       if (tdk) {
         document.title = tdk.title
       }
     }
 
-    async componentDidMount() {
-      _this = this // 修正_this指向，保证_this指向当前渲染的页面组件
-      //注册事件，用于在页面回退的时候触发
-      window.addEventListener('popstate', popStateCallback)
-
-      const canClientFetch = this.props.history && this.props.history.action === 'PUSH' //路由跳转的时候可以异步请求数据
-      if (canClientFetch) {
-        //如果是 history PUSH 操作 则更新数据
-        await this.getInitialProps()
-      }
-    }
-
     render() {
       const props = {
         initialData: {},
         ...this.props
       }
+      const { staticContext } = this.props
+      const { canClientFetch, initialData } = this.state
 
-      if (__SERVER__) {
-        //服务端渲染
-        props.initialData = this.props.staticContext.initialData || {}
+      if (window.__SERVER__) {
+        // 服务端渲染
+        props.initialData = staticContext.initialData || {}
       } else {
-        //客户端渲染
-        if (this.state.canClientFetch) {
-          //需要异步请求数据
-          props.initialData = this.state.initialData || {}
+        // 客户端渲染
+        if (canClientFetch) {
+          // 需要异步请求数据
+          props.initialData = initialData || {}
         } else {
           props.initialData = window.__INITIAL_DATA__
-          window.__INITIAL_DATA__ = null //使用过后清除数据,否则其他页面会使用
+          window.__INITIAL_DATA__ = null // 使用过后清除数据,否则其他页面会使用
         }
       }
 
-      return <SourceComponent {...props}></SourceComponent>
+      return <SourceComponent {...props} />
     }
   }
-}

src/client/components/loading/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React from 'react'
 
 export default function LoadingComponent(props: any) {
   return <div>loading......</div>
-}
+}

src/client/main/index.tsx

@@ -7,7 +7,7 @@ import getStore from '@/store/reducers'
 import App from './router'
 import routeList from './route-config'
 import matchRoute from '../../common/match-route'
-import proConfig from '../../common/pro-config'
+import proConfig from '../../../config/pro-config'
 import { Store } from 'redux'
 
 function renderDom(routeList: any[], initStoreState?: Store) {