fix: document code preview

043017c3 · 邓晓峰 · 84678965 · 043017c3 · 043017c3 · 043017c3
Commit 043017c3 authored Mar 23, 2021 by 邓晓峰
17 changed files
--- a/.dumi/theme/builtins/Previewer.js
+++ b/.dumi/theme/builtins/Previewer.js
@@ -2,13 +2,36 @@ import React from 'react';

 import PreView from 'dumi-theme-default/src/builtins/Previewer';
 import LazyLoad from 'react-lazyload';
-
 import ProSkeleton from '@ant-design/pro-skeleton';
+import { Spin } from 'antd';

 export default ({ children, ...rest }) => {
  return (
-    <LazyLoad height={500} offset={300} placeholder={<ProSkeleton type="descriptions" />} once>
-      <PreView {...rest}>{children}</PreView>
+    <LazyLoad
+      height={`calc(${rest.length} + 128px)` || 500}
+      offset={500}
+      placeholder={
+        parseInt(rest.length) > 300 ? (
+          <div
+            className="__dumi-default-previewer"
+            style={{
+              padding: 24,
+              background: 'rgb(245, 245, 245)',
+            }}
+          >
+            <ProSkeleton type="descriptions"></ProSkeleton>
+          </div>
+        ) : (
+          <div style={{ paddingTop: 100, textAlign: 'center' }}>
+            <Spin size="large"></Spin>
+          </div>
+        )
+      }
+      once
+    >
+      <PreView {...rest}>
+        <div style={{ minHeight: rest.height }}>{children}</div>
+      </PreView>
    </LazyLoad>
  );
 };
--- a/.dumi/theme/layout.js
+++ b/.dumi/theme/layout.js
-import './global.less';
-import 'moment/locale/zh-cn';
-
-import React, { useEffect } from 'react';
-
+import React, { useEffect, useState } from 'react';
+import Layout from 'dumi-theme-default/src/layout';
 import { ConfigProvider } from 'antd';
 import zhCN from 'antd/es/locale/zh_CN';
-import Layout from 'dumi-theme-default/src/layout';
 import moment from 'moment';
-
+import Darkreader from 'react-darkreader';
+import 'moment/locale/zh-cn';
+import './layout.less';
 moment.locale('zh-cn');

 export default ({ children, ...props }) => {
+  const colorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches && 'dark';
+  const defaultDarken = localStorage.getItem('procomponents_dark_theme') || colorScheme;
+
  useEffect(() => {
    (function (h, o, t, j, a, r) {
+      // @ts-ignore
      h.hj =
+        // @ts-ignore
        h.hj ||
        function () {
+          // @ts-ignore
          (h.hj.q = h.hj.q || []).push(arguments);
        };
+      // @ts-ignore
      h._hjSettings = { hjid: 2036108, hjsv: 6 };
      a = o.getElementsByTagName('head')[0];
      r = o.createElement('script');
      r.async = 1;
+      // @ts-ignore
      r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
      a.appendChild(r);
    })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
  }, []);
  return (
+    <>
+      <div
+        style={{
+          position: 'fixed',
+          right: 8,
+          top: 20,
+          zIndex: 999,
+        }}
+      >
+        <Darkreader
+          defaultDarken={defaultDarken === 'dark'}
+          onChange={(check) => {
+            if (!check) {
+              localStorage.setItem('procomponents_dark_theme', 'light');
+              return;
+            }
+            localStorage.setItem('procomponents_dark_theme', 'dark');
+          }}
+        />
+      </div>
      <ConfigProvider locale={zhCN}>
        <Layout {...props}>{children}</Layout>
      </ConfigProvider>
+    </>
  );
 };
--- a/.dumi/theme/layout.less
+++ b/.dumi/theme/layout.less
+.__dumi-default-menu .__dumi-default-menu-list > li > a {
+  padding-left: 24px !important;
+
+  ~ ul {
+    margin-left: 24px !important;
+  }
+}
+html,
+.__dumi-default-layout-toc,
+.__dumi-default-menu-inner {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(50, 50, 50, 0.3);
+    border-radius: 1em;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: rgba(50, 50, 50, 0.1);
+    border-radius: 1em;
+  }
+}
+
+.__dumi-default-locale-select {
+  margin-right: 16px;
+  margin-left: 16px !important;
+}
+
+html {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 6px;
+  }
+}
+.__dumi-default-layout-hero {
+  background-image: url(https://gw.alipayobjects.com/zos/basement_prod/5edc7f4d-3302-4710-963b-7b6c77ea8d06.svg);
+  background-position-y: -10px;
+  background-size: cover;
+  transition: 0.3s all;
+
+  &:hover {
+    background-position-y: -20px;
+  }
+
+  h1 {
+    color: #fff !important;
+  }
+
+  div > p {
+    color: #fff;
+  }
+}
--- a/.fatherrc.js
+++ b/.fatherrc.js
@@ -2,7 +2,16 @@ import { readdirSync } from 'fs';
 import { join } from 'path';

 // utils must build before core
-const headPkgs = ['Empty'];
+const headPkgs = [
+  'DeviceTree',
+  'Empty',
+  'HistoryInfo',
+  'ImageSelect',
+  'MqttView',
+  'QuotaSelect',
+  'RealTimeInfo',
+  'TimeRangePicker',
+];
 const tailPkgs = readdirSync(join(__dirname, 'packages')).filter(
  (pkg) => pkg.charAt(0) !== '.' && !headPkgs.includes(pkg),
 );
@@ -16,5 +25,6 @@ export default {
  pkgs: [...headPkgs, ...tailPkgs],
  extraBabelPlugins: [
    ['babel-plugin-import', { libraryName: 'antd', libraryDirectory: 'es', style: true }, 'antd'],
+    [require('./scripts/replaceLib')],
  ],
 };
--- a/.umirc.js
+++ b/.umirc.js
@@ -3,8 +3,6 @@ import { readdirSync } from 'fs';
 import { join } from 'path';

 const headPkgList = [];
-// utils must build before core
-// runtime must build before renderer-react
 const pkgList = readdirSync(join(__dirname, 'packages')).filter(
  (pkg) => pkg.charAt(0) !== '.' && !headPkgList.includes(pkg),
 );
@@ -47,27 +45,10 @@ export default {
      path: 'https://g.civnet.cn:8443/test/winsdom-components',
    },
  ],
-  analytics: isProduction
-    ? {
-        ga: 'UA-173569162-1',
-      }
-    : false,
  hash: true,
  ssr: {
    devServerRender: false,
  },
-  dynamicImport: {
-    loading: '@ant-design/pro-skeleton',
-  },
-  externals:
-    process.env.NODE_ENV === 'development'
-      ? {
-          react: 'window.React',
-          'react-dom': 'window.ReactDOM',
-          moment: 'window.moment',
-          antd: 'window.antd',
-        }
-      : {},
  targets: {
    chrome: 80,
    firefox: false,
@@ -82,15 +63,6 @@ export default {
    process.env.NODE_ENV === 'development'
      ? ['https://gw.alipayobjects.com/os/lib/antd/4.6.6/dist/antd.css']
      : [],
-  scripts:
-    process.env.NODE_ENV === 'development'
-      ? [
-          'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.development.js',
-          'https://gw.alipayobjects.com/os/lib/react-dom/16.13.1/umd/react-dom.development.js',
-          'https://gw.alipayobjects.com/os/lib/moment/2.29.0/min/moment-with-locales.js',
-          'https://gw.alipayobjects.com/os/lib/antd/4.6.6/dist/antd-with-locales.js',
-        ]
-      : [],
  menus: {
    '/components': [
      {
@@ -111,4 +83,5 @@ export default {
      },
    ],
  },
+  webpack5: {},
 };
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
    "size:build": "cross-env PRO_COMPONENTS_CI='CI'  webpack",
    "start": "dumi dev",
    "site": "dumi build",
+    "size": "npm run build && size-limit",
    "tsc:duplicate": "tsc -p ./tests/tsconfig.duplicate.json",
    "sync:tnpm": "node -e 'require(\"./scripts/syncTNPM\")()'",
    "test": "umi-test",
@@ -32,30 +33,47 @@
    "ie >= 11"
  ],
  "devDependencies": {
-    "@ant-design/compatible": "^1.0.4",
    "@ant-design/pro-skeleton": "^1.0.0-beta.2",
    "@babel/core": "^7.8.3",
    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "@babel/preset-typescript": "^7.8.3",
+    "@octokit/core": "^3.2.5",
    "@size-limit/preset-big-lib": "^4.5.5",
    "@testing-library/react": "^10.0.2",
    "@testing-library/react-hooks": "^3.2.1",
+    "@types/classnames": "^2.2.7",
+    "@types/enzyme": "^3.10.3",
+    "@types/history": "^4.7.7",
+    "@types/jest": "^26.0.0",
+    "@types/memoize-one": "^5.1.2",
+    "@types/mockjs": "^1.0.3",
+    "@types/node": "^14.0.26",
+    "@types/react": "^16.9.17",
+    "@types/react-dom": "^16.9.1",
+    "@types/react-helmet": "^6.0.0",
+    "@types/react-intl": "^3.0.0",
+    "@types/react-responsive": "^8.0.1",
+    "@types/react-router-dom": "^5.1.0",
+    "@types/warning": "^3.0.0",
+    "@types/xhr-mock": "^2.0.0",
    "@umijs/babel-preset-umi": "^3.0.14",
    "@umijs/fabric": "^2.0.0",
    "@umijs/plugin-analytics": "^0.2.2",
+    "@umijs/plugin-antd": "^0.9.0",
    "@umijs/test": "^3.2.10",
    "@umijs/test-utils": "^3.2.10",
    "@umijs/utils": "^3.2.11",
-    "antd": "^4.7.0",
+    "antd": "^4.13.1",
    "babel-loader": "^8.1.0",
    "babel-plugin-import": "^1.12.2",
    "body-parser": "^1.18.2",
    "chalk": "^4.1.0",
-    "cross-env": "^7.0.0",
-    "css-loader": "^3.4.2",
-    "dumi": "next",
+    "cross-env": "^7.0.2",
+    "css-loader": "^5.0.2",
+    "css-minimizer-webpack-plugin": "^1.2.0",
+    "dumi": "^1.1.6",
    "enzyme": "^3.11.0",
    "enzyme-to-json": "^3.4.3",
    "eslint": "^7.2.0",
@@ -63,53 +81,51 @@
    "gh-pages": "^3.1.0",
    "github": "^9.2.0",
    "glob": "^7.1.6",
-    "html-webpack-plugin": "^4.5.0",
    "jest": "^26.2.2",
+    "jest-canvas-mock": "^2.3.1",
    "jest-fetch-mock": "^3.0.3",
    "jsdom": "^16.4.0",
    "jsdom-global": "^3.0.2",
    "lerna": "^3.20.2",
    "lerna-changelog": "^1.0.1",
-    "less-loader": "^6.0.0",
+    "less-loader": "^8.0.0",
    "lint-staged": "^10.0.2",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^1.3.8",
    "mockdate": "^3.0.2",
+    "mockjs": "^1.1.0",
    "moment": "^2.27.0",
    "moment-timezone": "^0.5.31",
    "np": "^6.1.0",
    "npm-run-all": "^4.1.5",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "pify": "^5.0.0",
-    "prettier": "^2.1.2",
-    "pretty-quick": "^2.0.1",
+    "prettier": "^2.2.1",
+    "prettier-plugin-jsdoc": "^0.2.13",
+    "prettier-plugin-style-order": "^0.2.2",
+    "pretty-quick": "^3.0.1",
    "pro-changelog": "^1.0.0",
    "progress-bar-webpack-plugin": "^2.1.0",
-    "query-string": "^6.11.1",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
+    "query-string": "^6.13.6",
+    "react": "^16.0.0",
+    "react-darkreader": "^1.3.3",
+    "react-dom": "^16.0.0",
    "react-lazyload": "^3.0.0",
    "react-markdown": "^4.3.0",
    "react-test-renderer": "^16.9.0",
-    "size-limit": "^4.5.5",
+    "size-limit": "^4.6.2",
    "slash2": "^2.0.0",
-    "style-loader": "^1.1.3",
+    "style-loader": "^2.0.0",
    "stylelint": "^13.0.0",
-    "terser-webpack-plugin": "^3.0.2",
-    "typescript": "^3.9.7",
-    "umi": "^3.2.10",
-    "umi-plugin-githubpages": "^2.0.0",
+    "typescript": "^4.1.2",
+    "umi": "^3.4.0",
    "umi-request": "^1.3.5",
    "umi-test": "^1.9.6",
    "umi-types": "^0.5.11",
-    "webpack-bundle-analyzer": "^3.6.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
+    "webpack": "^5.24.2",
+    "webpack-bundle-analyzer": "^4.4.0",
+    "webpack-cli": "^4.5.0",
    "write-pkg": "^4.0.0",
    "xhr-mock": "^2.5.1",
-    "yorkie": "^2.0.0",
-    "express": "^4.16.4",
-    "webpack-dev-middleware": "^3.5.0",
-    "webpack-hot-middleware": "^2.24.3"
+    "yorkie": "^2.0.0"
  },
  "gitHooks": {
    "pre-commit": "pretty-quick --staged",
@@ -118,14 +134,6 @@
  "publishConfig": {
    "registry": "https://g.civnet.cn:4873"
  },
-  "size-limit": [
-    {
-      "path": "packages/Empty/dist/**/*.js",
-      "limit": "100 s",
-      "webpack": false,
-      "running": false
-    }
-  ],
  "dependencies": {
    "@wisdom-components/Empty": "^1.0.1",
    "classnames": "^2.2.6",
@@ -133,5 +141,103 @@
    "highcharts": "^9.0.1",
    "highcharts-react-official": "^3.0.0",
    "mqtt-client": "^1.0.11"
+  },
+  "size-limit": [
+    {
+      "path": "packages/DeviceTree/lib/**/*.js",
+      "limit": "2 s",
+      "webpack": false,
+      "running": false
+    },
+    {
+      "path": "packages/DeviceTree/es/**/*.js",
+      "limit": "2 s",
+      "webpack": false,
+      "running": false
+    },
+    {
+      "path": "packages/Empty/lib/**/*.js",
+      "limit": "2 s",
+      "webpack": false,
+      "running": false
+    },
+    {
+      "path": "packages/Empty/es/**/*.js",
+      "limit": "2 s",
+      "webpack": false,
+      "running": false
+    },
+    {
+      "path": "packages/HistoryInfo/lib/**/*.js",
+      "limit": "2 s",
+      "webpack": false,
+      "running": false
+    },
+    {
+      "path": "packages/HistoryInfo/es/**/*.js",
+      "limit": "2 s",
+      "webpack": false,
+      "running": false
+    },
+    {
+      "path": "packages/ImageSelect/lib/**/*.js",
+      "limit": "2 s",
+      "webpack": false,
+      "running": false
+    },
+    {
+      "path": "packages/ImageSelect/es/**/*.js",
+      "limit": "2 s",
+      "webpack": false,
+      "running": false
+    },
+    {
+      "path": "packages/MqttView/lib/**/*.js",
+      "limit": "2 s",
+      "webpack": false,
+      "running": false
+    },
+    {
+      "path": "packages/MqttView/es/**/*.js",
+      "limit": "2 s",
+      "webpack": false,
+      "running": false
+    },
+    {
+      "path": "packages/QuotaSelect/lib/**/*.js",
+      "limit": "2 s",
+      "webpack": false,
+      "running": false
+    },
+    {
+      "path": "packages/QuotaSelect/es/**/*.js",
+      "limit": "2 s",
+      "webpack": false,
+      "running": false
+    },
+    {
+      "path": "packages/RealTimeInfo/lib/**/*.js",
+      "limit": "2 s",
+      "webpack": false,
+      "running": false
+    },
+    {
+      "path": "packages/RealTimeInfo/es/**/*.js",
+      "limit": "2 s",
+      "webpack": false,
+      "running": false
+    },
+    {
+      "path": "packages/TimeRangePicker/lib/**/*.js",
+      "limit": "2 s",
+      "webpack": false,
+      "running": false
+    },
+    {
+      "path": "packages/TimeRangePicker/es/**/*.js",
+      "limit": "2 s",
+      "webpack": false,
+      "running": false
    }
+  ]
 }
--- a/packages/DeviceTree/src/DeviceTree.md
+++ b/packages/DeviceTree/src/DeviceTree.md
@@ -21,7 +21,7 @@ group:

 ## 代码演示

-<code src="./demos/Basic.js">
+<code src="./demos/basic.js"></code>

 ## API


--- a/packages/DeviceTree/src/demos/Basic.js
+++ b/packages/DeviceTree/src/demos/Basic.js
@@ -10,7 +10,8 @@ const Demo = () => {
  const [autoExpandParent, setAutoExpandParent] = useState(true);

  const fetchData = (params = {}) => {
-    request(baseUrl + '/Publish/Monitor/Device/DeviceTree', {
+    // eslint-disable-next-line no-use-before-define
+    request(`${baseUrl}/Publish/Monitor/Device/DeviceTree`, {
      method: 'post',
      data: {
        PageIndex: 1,
@@ -24,19 +25,25 @@ const Demo = () => {
        isTop: true,
      },
    }).then(function (response) {
-      let data = response.data
+      // eslint-disable-next-line no-nested-ternary
+      const data = response.data
        ? response.data.list && response.data.list.length > 0
          ? response.data.list[0].DeviceList
          : []
        : [];
+      // eslint-disable-next-line no-use-before-define
      setTreeData(handleData(data));
    });
  };

  const handleData = (data) => {
+    // eslint-disable-next-line array-callback-return
    data.map((item) => {
+      // eslint-disable-next-line no-param-reassign
      item.title = item.DeviceName;
+      // eslint-disable-next-line no-param-reassign
      item.key = item.StationID;
+      // eslint-disable-next-line no-param-reassign
      item.children = handleData(item.children);
    });
    return data;

--- a/packages/Empty/package.json
+++ b/packages/Empty/package.json
 {
  "name": "@wisdom-components/empty",
  "version": "1.0.1",
-  "description": "> TODO: description",
+  "description": "@wisdom-components/empty",
  "author": "tuqian <webtuqian@163.com>",
  "homepage": "",
  "license": "ISC",
  "main": "lib/index.js",
+  "module": "es/index.js",
  "directories": {
    "lib": "lib",
    "test": "__tests__"

--- a/packages/Empty/src/Empty.md
+++ b/packages/Empty/src/Empty.md
@@ -18,7 +18,7 @@ group:

 ## 代码演示

-<code src="./demos/Basic.js">
+<code src="./demos/basic.tsx">

 ## API


--- a/packages/Empty/src/demos/Basic.js
+++ b/packages/Empty/src/demos/Basic.js
--- a/packages/HistoryInfo/src/HistoryInfo.md
+++ b/packages/HistoryInfo/src/HistoryInfo.md
@@ -22,7 +22,7 @@ group:

 ## 代码演示

-<code src="./demos/Basic.js">
+<code src="./demos/basic.js">

 ## API


--- a/packages/ImageSelect/src/ImageSelect.md
+++ b/packages/ImageSelect/src/ImageSelect.md
@@ -22,7 +22,7 @@ group:

 ## 代码演示

-<code src="./demos/Basic.js">
+<code src="./demos/basic.js">

 ## API


--- a/packages/QuotaSelect/src/QuotaSelect.md
+++ b/packages/QuotaSelect/src/QuotaSelect.md
@@ -21,7 +21,7 @@ group:

 ## 代码演示

-<code src="./demos/Basic.js">
+<code src="./demos/basic.js">

 ## API


--- a/packages/RealTimeInfo/src/RealTimeInfo.md
+++ b/packages/RealTimeInfo/src/RealTimeInfo.md
@@ -21,7 +21,7 @@ group:

 ## 代码演示

-<code src="./demos/Basic.js">
+<code src="./demos/basic.js">

 ## API


--- a/packages/TimeRangePicker/src/TimeRangePicker.md
+++ b/packages/TimeRangePicker/src/TimeRangePicker.md
@@ -21,7 +21,7 @@ group:

 ## 代码演示

-<code src="./demos/Basic.js">
+<code src="./demos/basic.js">

 ## API


--- a/scripts/replaceLib.js
+++ b/scripts/replaceLib.js
+const { join, dirname } = require('path');
+const fs = require('fs');
+
+const cwd = process.cwd();
+
+function replacePath(path) {
+  if (path.node.source && /\/lib\//.test(path.node.source.value)) {
+    const esModule = path.node.source.value.replace('/lib/', '/es/');
+    const esPath = dirname(join(cwd, `node_modules/${esModule}`));
+    if (fs.existsSync(esPath)) {
+      console.log(`[es build] replace ${path.node.source.value} with ${esModule}`);
+      path.node.source.value = esModule;
+    }
+  }
+}
+
+function replaceLib() {
+  return {
+    visitor: {
+      ImportDeclaration: replacePath,
+      ExportNamedDeclaration: replacePath,
+    },
+  };
+}
+module.exports = replaceLib;