refactor: typescript implement

TODO.md

@@ -0,0 +1,5 @@
+## TODO
+
+- [ ] site：增加 alias 至当前源码，并删除 react-diff-view 的依赖。
+
+- [ ] 更新 docs，可能有部分开发的文档需要更新

docs/hoc.md

@@ -172,7 +172,7 @@ The most important thing is that you must assign the `id` property to the value
 This is a very simple worker implement:
 
 ```javascript
-import {tokenize, markEdits, markWord} from 'react-diff-view/tokenize';
+import {tokenize, markEdits, markWord} from 'react-diff-view';
 import {compact} from 'lodash';
 import refractor from 'refractor';
 

jest.config.js

@@ -1,18 +1,19 @@
 module.exports = {
     verbose: true,
     testURL: 'http://localhost/',
-    setupFilesAfterEnv: ['<rootDir>src/__test__/setup.js'],
+    setupFilesAfterEnv: ['<rootDir>src/__tests__/setup.ts'],
     moduleNameMapper: {
-        '\\.(css|less)$': 'identity-obj-proxy'
+        '\\.(css|less)$': 'identity-obj-proxy',
     },
     collectCoverage: true,
     coverageDirectory: 'coverage',
     coverageThreshold: {
         global: {
             branches: 67,
             functions: 85,
-            lines: 85,
+            lines: 84,
             statements: 85,
         },
     },
+    testMatch: ['<rootDir>src/**/__tests__/**/*.test.{js,jsx,ts,tsx}'],
 };

package.json

@@ -11,90 +11,46 @@
     "*.css"
   ],
   "scripts": {
-    "test": "jest --config ./jest.config.js",
-    "start": "webpack-dev-server --config=site/webpack.config.js",
-    "clean": "rm -rf cjs es style",
+    "test": "skr test",
     "build": "sh scripts/build.sh",
-    "build-pages": "rm -rf dist && webpack --config=site/webpack.config.js",
-    "prepublishOnly": "npm run build",
-    "lint": "eslint src site"
+    "prepublishOnly": "yarn build",
+    "lint": "skr lint"
   },
   "author": "otakustay",
   "license": "MIT",
+  "dependencies": {
+    "classnames": "^2.3.1",
+    "diff-match-patch": "^1.0.5",
+    "gitdiff-parser": "^0.2.2",
+    "lodash": "^4.17.20",
+    "recompose": "^0.30.0",
+    "shallow-equal": "^1.2.1"
+  },
   "devDependencies": {
-    "@babel/core": "^7.11.5",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-proposal-decorators": "^7.10.5",
-    "@babel/plugin-proposal-export-default-from": "^7.10.4",
-    "@babel/plugin-proposal-export-namespace-from": "^7.10.4",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-react": "^7.10.4",
-    "@ecomfe/eslint-config": "^4.0.1",
-    "@types/react-test-renderer": "^16.9.3",
-    "antd": "^3.24.2",
+    "@reskript/cli": "^2.2.2",
+    "@reskript/cli-lint": "^2.2.2",
+    "@reskript/cli-test": "^2.2.2",
+    "@types/jest": "^27.0.2",
+    "@types/lodash": "^4.14.176",
+    "@types/react": "^17.0.33",
+    "@types/react-dom": "^17.0.10",
+    "@types/react-test-renderer": "^17.0.1",
+    "@types/recompose": "^0.30.9",
     "autoprefixer": "^9.8.6",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.3.0",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-add-react-displayname": "0.0.5",
-    "babel-plugin-import": "^1.13.0",
-    "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-react-require": "^3.1.3",
-    "classnames": "^2.2.6",
-    "core-js": "^3.6.5",
-    "css-loader": "^4.2.2",
+    "core-js": "^3.19.0",
     "cssnano": "^4.1.10",
-    "diff-match-patch": "^1.0.5",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.4",
-    "eslint": "^7.8.1",
-    "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-jest": "^23.20.0",
-    "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-react-hooks": "^4.1.0",
-    "gitdiff-parser": "^0.2.2",
-    "html-webpack-plugin": "^4.4.1",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.4.2",
-    "less": "^3.12.2",
-    "less-loader": "^7.0.0",
-    "lodash": "^4.17.20",
-    "nanoid": "^3.1.25",
     "postcss": "^7.0.32",
     "postcss-cli": "^7.1.2",
     "postcss-custom-properties": "^9.1.1",
-    "prism-color-variables": "^1.0.0",
-    "raw-loader": "^4.0.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-infinite-scroller": "^1.2.4",
-    "react-markdown": "^4.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-test-renderer": "^16.13.1",
-    "react-timeago": "^4.1.9",
-    "recompose": "^0.30.0",
-    "refractor": "^2.10.1",
-    "rollup": "^1.25.2",
-    "rollup-plugin-auto-external": "^2.0.0",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-eslint": "^7.0.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-sourcemaps": "^0.4.2",
-    "rollup-plugin-terser": "^5.1.2",
-    "sha1": "^1.1.1",
-    "shallow-equal": "^1.2.1",
-    "style-loader": "^1.2.1",
-    "styled-components": "^5.3.1",
-    "unidiff": "^1.0.2",
-    "warning": "^4.0.2",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
-    "worker-loader": "^3.0.2"
+    "refractor": "^3.5.0",
+    "typescript": "^4.4.4"
   },
   "peerDependencies": {
-    "prop-types": ">=15.6",
     "react": ">=16.8"
   },
   "repository": {

postcss.config.js

@@ -1,4 +1,4 @@
-/* eslint-disable import/unambiguous, import/no-commonjs, global-require */
+/* eslint-disable global-require */
 module.exports = {
     plugins: [
         require('autoprefixer'),

scripts/build.sh

@@ -1,6 +1,8 @@
 yarn
-yarn clean
 export NODE_ENV=production
-node rollup.js
-node node_modules/.bin/postcss -o style/index.css src/styles/index.css
-node scripts/fix-css.js style/index.css
+rm -rf cjs/ && tsc
+rm -rf es/ && tsc --project tsconfig.es.json
+postcss -o cjs/style/index.css src/styles/index.css
+node scripts/fix-css.js cjs/style/index.css
+postcss -o es/style/index.css src/styles/index.css
+node scripts/fix-css.js es/style/index.css

site/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "site",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "skr build --clean",
+    "start": "skr dev"
+  },
+  "dependencies": {
+    "antd": "^4.16.13",
+    "diff-match-patch": "^1.0.5",
+    "gitdiff-parser": "^0.2.2",
+    "prism-color-variables": "^1.0.0",
+    "react": "^17.0.2",
+    "react-diff-view": "^2.4.8",
+    "react-dom": "^17.0.2",
+    "refractor": "^3.5.0",
+    "sha1": "^1.1.1",
+    "styled-components": "^5.3.3",
+    "unidiff": "^1.0.2"
+  },
+  "devDependencies": {
+    "@reskript/cli": "^2.2.2",
+    "@reskript/cli-build": "^2.2.2",
+    "@reskript/cli-dev": "^2.2.2",
+    "core-js": "^3.19.0"
+  },
+  "author": "",
+  "license": "ISC"
+}

site/reskript.config.js

@@ -0,0 +1,14 @@
+// const path = require('path');
+
+exports.build = {
+    appTitle: 'Online Diff',
+    // 无法编译 alias 下的 ts 代码，先用 npm 版本跑通
+    // finalize: webpackConfig => {
+    //     webpackConfig.resolve.alias['react-diff-view'] = path.resolve(__dirname, '..', 'cjs');
+    //     return webpackConfig;
+    // },
+};
+
+exports.devServer = {
+    port: 9031,
+};

site/components/DiffView/Tokenize.worker.js → site/src/components/DiffView/Tokenize.worker.js

@@ -1,4 +1,4 @@
-import {tokenize, markEdits, markWord} from 'react-diff-view/tokenize';
+import {tokenize, markEdits, markWord} from 'react-diff-view';
 import {compact} from 'lodash';
 import refractor from 'refractor';
 

site/components/DiffView/index.js → site/src/components/DiffView/index.js

@@ -8,7 +8,7 @@ import {
     useChangeSelect,
     useTokenizeWorker,
 } from 'react-diff-view';
-import 'react-diff-view/styles/index.css';
+import 'react-diff-view/style/index.css';
 import {useConfiguration} from '../../context/configuration';
 import HunkInfo from './HunkInfo';
 import UnfoldCollapsed from './UnfoldCollapsed';

site/index.js → site/src/entries/index.js

@@ -1,6 +1,6 @@
 import 'core-js/stable';
 import {render} from 'react-dom';
-import App from './components/App';
+import App from '../components/App';
 
 render(
     <App />,

site/src/styles/index.var.less

@@ -0,0 +1,39 @@
+//@component-background: var(--antd-component-background);
+//@background-color-base: var(--antd-background-color-base);
+//@heading-color: var(--antd-heading-color);
+//@text-color: var(--antd-text-color);
+//@text-color-secondary: var(--antd-text-color-secondary);
+//@text-color-inverse: var(--antd-text-color-inverse);
+//@icon-color-hover: var(--antd-icon-color-hover);
+//@heading-color-dark: var(--antd-heading-color-dark);
+//@text-color-dark: var(--antd-text-color-dark);
+//@text-color-secondary-dark: var(--antd-text-color-secondary-dark);
+//@item-active-bg: var(--antd-item-active-bg);
+//@item-hover-bg: var(--antd-item-hover-bg);
+//@border-color-base: var(--antd-border-color-base);
+//@border-color-split: var(--antd-border-color-split);
+//@background-color-light: var(--antd-background-color-light);
+//@disabled-color: var(--antd-disabled-color);
+//@disabled-bg: var(--antd-disabled-bg);
+//@disabled-color-dark: var(--antd-disabled-color-dark);
+//@btn-default-bg: var(--antd-btn-default-bg);
+//@checkbox-check-color: var(--antd-checkbox-check-color);
+//@input-bg: var(--antd-input-bg);
+//@input-number-handler-active-bg: var(--antd-input-number-handler-active-bg);
+//@table-selected-row-bg: var(--antd-table-selected-row-bg);
+//@table-expanded-row-bg: var(--antd-table-expanded-row-bg);
+//@tree-directory-selected-color: var(--antd-tree-directory-selected-color);
+//@table-row-hover-bg: var(--antd-table-row-hover-bg);
+//@popover-bg: var(--antd-popover-bg);
+//@shadow-color: var(--antd-shadow-color);
+//@btn-shadow: var(--antd-btn-shadow);
+//@btn-primary-shadow: var(--antd-btn-primary-shadow);
+//@btn-text-shadow: var(--antd-btn-text-shadow);
+//@alert-success-border-color: var(--antd-alert-success-border-color);
+//@alert-success-bg-color: var(--antd-alert-success-bg-color);
+//@alert-info-border-color: var(--antd-alert-info-border-color);
+//@alert-info-bg-color: var(--antd-alert-info-bg-color);
+//@alert-warning-border-color: var(--antd-alert-warning-border-color);
+//@alert-warning-bg-color: var(--antd-alert-warning-bg-color);
+//@alert-error-border-color: var(--antd-alert-error-border-color);
+//@alert-error-bg-color: var(--antd-alert-error-bg-color);