Build the frontend by esbuild instead of webpack

ui-esbuild/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

ui-esbuild/.eslintrc.js

@@ -0,0 +1,45 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended', 'airbnb', 'prettier'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 12,
+    sourceType: 'module'
+  },
+  plugins: ['react', '@typescript-eslint'],
+  rules: {
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
+    'import/extensions': [
+      'error',
+      'always',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never'
+      }
+    ],
+    'no-console': 0,
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+    'no-use-before-define': 'off',
+    'no-unused-vars': 'warn',
+    'import/prefer-default-export': 1,
+    'no-shadow': 1,
+    'prefer-const': 1,
+    'prefer-spread': 1,
+    'no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }]
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx']
+      }
+    }
+  }
+}

ui-esbuild/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

ui-esbuild/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install lint-staged

ui-esbuild/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "semi": false,
+  "tabWidth": 2,
+  "printWidth": 120,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "trailingComma": "none",
+  "endOfLine": "auto"
+}

ui-esbuild/README.md

@@ -0,0 +1,17 @@
+# esbuild React Typescript Template
+
+> This is a Typecript template for [esbuild create react app](https://github.com/awran5/esbuild-create-react-app) project.
+
+## What is inside?
+
+- [TypeScript](https://www.typescriptlang.org/)
+- [esbuild](https://esbuild.github.io/)
+- [Eslint](https://eslint.org/)
+- [Prettier](https://prettier.io/)
+- [Husky](https://github.com/typicode/husky)
+- [lint-staged](https://github.com/okonet/lint-staged)
+- [live-server](https://github.com/tapio/live-server)
+
+### License
+
+MIT © [awran5](https://github.com/awran5/)

ui-esbuild/builder-prod.js

@@ -0,0 +1,24 @@
+const { build } = require('esbuild')
+const postCssPlugin = require('esbuild-plugin-postcss2').default
+
+const buildParams = {
+  color: true,
+  entryPoints: ['src/index.tsx'],
+  loader: { '.ts': 'tsx' },
+  outdir: 'dist',
+  minify: true,
+  format: 'cjs',
+  bundle: true,
+  sourcemap: true,
+  logLevel: 'error',
+  incremental: true,
+  plugins: [
+    postCssPlugin({
+      lessOptions: {
+        javascriptEnabled: true
+      }
+    })
+  ]
+}
+
+build(buildParams).finally(() => process.exit(0))

ui-esbuild/builder.js

@@ -0,0 +1,89 @@
+const { start } = require('live-server')
+const { watch } = require('chokidar')
+const { build } = require('esbuild')
+const fs = require('fs')
+const postCssPlugin = require('esbuild-plugin-postcss2').default
+
+/**
+ * Live Server Params
+ * @link https://www.npmjs.com/package/live-server#usage-from-node
+ */
+const serverParams = {
+  port: 8181, // Set the server port. Defaults to 8080.
+  root: 'dist', // Set root directory that's being served. Defaults to cwd.
+  open: true // When false, it won't load your browser by default.
+  // host: "0.0.0.0", // Set the address to bind to. Defaults to 0.0.0.0 or process.env.IP.
+  // ignore: 'scss,my/templates', // comma-separated string for paths to ignore
+  // file: "index.html", // When set, serve this file (server root relative) for every 404 (useful for single-page applications)
+  // wait: 1000, // Waits for all changes, before reloading. Defaults to 0 sec.
+  // mount: [['/components', './node_modules']], // Mount a directory to a route.
+  // logLevel: 2, // 0 = errors only, 1 = some, 2 = lots
+  // middleware: [function(req, res, next) { next(); }] // Takes an array of Connect-compatible middleware that are injected into the server middleware stack
+}
+
+const lessModifyVars = {
+  // '@primary-color': '#4394fc',
+  '@primary-color': '#1DA57A',
+  '@body-background': '#fff',
+  '@tooltip-bg': 'rgba(0, 0, 0, 0.9)',
+  '@tooltip-max-width': '500px'
+}
+const lessGlobalVars = {
+  '@padding-page': '48px',
+  '@gray-1': '#fff',
+  '@gray-2': '#fafafa',
+  '@gray-3': '#f5f5f5',
+  '@gray-4': '#f0f0f0',
+  '@gray-5': '#d9d9d9',
+  '@gray-6': '#bfbfbf',
+  '@gray-7': '#8c8c8c',
+  '@gray-8': '#595959',
+  '@gray-9': '#262626',
+  '@gray-10': '#000'
+}
+
+/**
+ * ESBuild Params
+ * @link https://esbuild.github.io/api/#build-api
+ */
+const buildParams = {
+  color: true,
+  entryPoints: ['src/index.tsx'],
+  loader: { '.ts': 'tsx' },
+  outdir: 'dist',
+  minify: true,
+  format: 'cjs',
+  bundle: true,
+  sourcemap: true,
+  logLevel: 'error',
+  incremental: true,
+  plugins: [
+    postCssPlugin({
+      lessOptions: {
+        // modifyVars: { '@primary-color': '#1DA57A' },
+        modifyVars: lessModifyVars,
+        globalVars: lessGlobalVars,
+        javascriptEnabled: true
+      }
+    })
+  ]
+}
+
+async function main() {
+  const builder = await build(buildParams)
+
+  // TODO - refine
+  fs.copyFileSync('./public/index.html', './dist/index.html')
+  fs.copyFileSync('./public/favicon.ico', './dist/favicon.ico')
+  fs.copyFileSync('./public/manifest.json', './dist/manifest.json')
+  fs.copyFileSync('./public/logo192.png', './dist/logo192.png')
+  fs.copyFileSync('./public/logo512.png', './dist/logo512.png')
+
+  watch('src/**/*').on('all', () => {
+    builder.rebuild()
+  })
+
+  start(serverParams)
+}
+
+main()

ui-esbuild/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "tidb-dashboard-ui",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "pre-commit": "lint-staged",
+    "lint": "eslint \"src/**/*.{ts,tsx}\" --max-warnings=0",
+    "start": "node builder.js",
+    "build": "esbuild src/index.tsx --minify --format=cjs --outdir=public --sourcemap --bundle",
+    "prod": "node builder-prod.js"
+  },
+  "dependencies": {
+    "antd": "^4.16.13",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/live-server": "^1.2.1",
+    "@types/node": "^16.9.1",
+    "@types/react": "^17.0.20",
+    "@types/react-dom": "^17.0.9",
+    "@typescript-eslint/eslint-plugin": "^4.31.0",
+    "@typescript-eslint/parser": "^4.31.0",
+    "chokidar": "^3.5.2",
+    "esbuild": "^0.12.26",
+    "esbuild-plugin-postcss2": "^0.1.0",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.25.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "husky": "^7.0.2",
+    "less": "^4.1.2",
+    "lint-staged": "^11.1.2",
+    "live-server": "^1.2.1",
+    "prettier": "^2.4.0",
+    "typescript": "^4.4.3"
+  },
+  "lint-staged": {
+    "*.+(js|jsx)": "eslint --fix",
+    "*.+(json|css|md)": "prettier --write"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }
+}

ui-esbuild/public/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="shortcut icon" type="image/jpg" href="favicon.ico" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using react-esbuild-app" />
+  <link rel="apple-touch-icon" href="logo192.png" />
+  <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+  <link rel="manifest" href="manifest.json" />
+  <title>React ESBuild</title>
+  <link rel="stylesheet" href="index.css">
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="index.js"></script>
+</body>
+
+</html>

ui-esbuild/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "React esbuild App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

ui-esbuild/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

ui-esbuild/src/App.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import './style.less'
+
+import HelloCSS from './lib/test-components/HelloCSS'
+import HelloLess from './lib/test-components/HelloLess'
+import HelloMLess from './lib/test-components/HelloModuleLess'
+import HelloSCSS from './lib/test-components/HelloSCSS'
+import HelloAntD from './lib/test-components/HelloAntD'
+
+export default function App() {
+  return (
+    <div>
+      <HelloCSS />
+      <HelloLess />
+      <HelloMLess />
+      <HelloSCSS />
+      <HelloAntD />
+    </div>
+  )
+}

ui-esbuild/src/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+ReactDOM.render(<App />, document.getElementById('root'))

ui-esbuild/src/lib/test-components/HelloAntD/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import styles from './style.module.less'
+
+import { Button, Switch, Space } from 'antd'
+
+export default function HelloAntD() {
+  return (
+    <div className={styles['hello-antd-container']}>
+      <Space>
+        <Button>Hello Antd</Button>
+        <Switch />
+      </Space>
+    </div>
+  )
+}

ui-esbuild/src/lib/test-components/HelloAntD/style.module.less

@@ -0,0 +1,4 @@
+.hello-antd-container {
+  text-align: center;
+  padding: 8px;
+}

ui-esbuild/src/lib/test-components/HelloCSS/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import './style.css'
+
+export default function HelloCSS() {
+  return (
+    <div className='hello-css-container'>
+      <h1>HelloCSS</h1>
+    </div>
+  )
+}

ui-esbuild/src/lib/test-components/HelloCSS/style.css

@@ -0,0 +1,7 @@
+.hello-css-container {
+  text-align: center;
+}
+
+.hello-css-container h1 {
+  color: skyblue;
+}

ui-esbuild/src/lib/test-components/HelloLess/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import './style.less'
+
+export default function HelloLess() {
+  return (
+    <div className='hello-less-container'>
+      <h1>HelloLess</h1>
+    </div>
+  )
+}