feat(ts): add new ts branch

config/jest/fileTransform.js

@@ -13,10 +13,10 @@ module.exports = {
     if (filename.match(/\.svg$/)) {
       // Based on how SVGR generates a component name:
       // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
-      const pascalCaseFileName = camelcase(path.parse(filename).name, {
+      const pascalCaseFilename = camelcase(path.parse(filename).name, {
         pascalCase: true,
       });
-      const componentName = `Svg${pascalCaseFileName}`;
+      const componentName = `Svg${pascalCaseFilename}`;
       return `const React = require('react');
       module.exports = {
         __esModule: true,

config/modules.js

@@ -7,7 +7,7 @@ const chalk = require('react-dev-utils/chalk');
 const resolve = require('resolve');
 
 /**
- * Get the baseUrl of a compilerOptions object.
+ * Get additional module paths based on the baseUrl of a compilerOptions object.
  *
  * @param {Object} options
  */
@@ -38,6 +38,15 @@ function getAdditionalModulePaths(options = {}) {
     return [paths.appSrc];
   }
 
+  // If the path is equal to the root directory we ignore it here.
+  // We don't want to allow importing from the root directly as source files are
+  // not transpiled outside of `src`. We do allow importing them with the
+  // absolute path (e.g. `src/Components/Button.js`) but we set that up with
+  // an alias.
+  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+    return null;
+  }
+
   // Otherwise, throw an error.
   throw new Error(
     chalk.red.bold(
@@ -47,6 +56,48 @@ function getAdditionalModulePaths(options = {}) {
   );
 }
 
+/**
+ * Get webpack aliases based on the baseUrl of a compilerOptions object.
+ *
+ * @param {*} options
+ */
+function getWebpackAliases(options = {}) {
+  const baseUrl = options.baseUrl;
+
+  if (!baseUrl) {
+    return {};
+  }
+
+  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+    return {
+      src: paths.appSrc,
+    };
+  }
+}
+
+/**
+ * Get jest aliases based on the baseUrl of a compilerOptions object.
+ *
+ * @param {*} options
+ */
+function getJestAliases(options = {}) {
+  const baseUrl = options.baseUrl;
+
+  if (!baseUrl) {
+    return {};
+  }
+
+  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+    return {
+      'src/(.*)$': '<rootDir>/src/$1',
+    };
+  }
+}
+
 function getModules() {
   // Check if TypeScript is setup
   const hasTsConfig = fs.existsSync(paths.appTsConfig);
@@ -81,6 +132,8 @@ function getModules() {
 
   return {
     additionalModulePaths: additionalModulePaths,
+    webpackAliases: getWebpackAliases(options),
+    jestAliases: getJestAliases(options),
     hasTsConfig,
   };
 }

config/webpack.config.js

@@ -58,6 +58,11 @@ module.exports = function(webpackEnv) {
   const isEnvDevelopment = webpackEnv === 'development';
   const isEnvProduction = webpackEnv === 'production';
 
+  // Variable used for enabling profiling in Production
+  // passed into alias object. Uses a flag if passed into the build command
+  const isEnvProductionProfile =
+    isEnvProduction && process.argv.includes('--profile');
+
   // Webpack uses `publicPath` to determine where the app is being served from.
   // It requires a trailing slash, or the file assets will get an incorrect path.
   // In development, we always serve from the root. This makes config easier.
@@ -194,6 +199,9 @@ module.exports = function(webpackEnv) {
       // Prevents conflicts when multiple Webpack runtimes (from different apps)
       // are used on the same page.
       jsonpFunction: `webpackJsonp${appPackageJson.name}`,
+      // this defaults to 'window', but by setting it to 'this' then
+      // module chunks which are built will work in web workers as well.
+      globalObject: 'this',
     },
     optimization: {
       minimize: isEnvProduction,
@@ -226,6 +234,9 @@ module.exports = function(webpackEnv) {
             mangle: {
               safari10: true,
             },
+            // Added for profiling in devtools
+            keep_classnames: isEnvProductionProfile,
+            keep_fnames: isEnvProductionProfile,
             output: {
               ecma: 5,
               comments: false,
@@ -295,8 +306,13 @@ module.exports = function(webpackEnv) {
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
         'react-native': 'react-native-web',
-        // ȫ�����·���������������·�������ͷ�������
-			  '@': paths.appSrc
+        // Allows for better profiling with ReactDevTools
+        ...(isEnvProductionProfile && {
+          'react-dom$': 'react-dom/profiling',
+          'scheduler/tracing': 'scheduler/tracing-profiling',
+        }),
+        ...(modules.webpackAliases || {}),
+        '@': paths.appSrc
       },
       plugins: [
         // Adds support for installing with Plug'n'Play, leading to faster installs and adding
@@ -569,7 +585,7 @@ module.exports = function(webpackEnv) {
         new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
       // Makes some environment variables available in index.html.
       // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-      // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
       // In production, it will be an empty string unless you specify "homepage"
       // in `package.json`, in which case it will be the pathname of that URL.
       // In development, this will be an empty string.
@@ -602,20 +618,27 @@ module.exports = function(webpackEnv) {
           filename: 'static/css/[name].[contenthash:8].css',
           chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
         }),
-      // Generate a manifest file which contains a mapping of all asset filenames
-      // to their corresponding output file so that tools can pick it up without
-      // having to parse `index.html`.
+      // Generate an asset manifest file with the following content:
+      // - "files" key: Mapping of all asset filenames to their corresponding
+      //   output file so that tools can pick it up without having to parse
+      //   `index.html`
+      // - "entrypoints" key: Array of files which are included in `index.html`,
+      //   can be used to reconstruct the HTML if necessary
       new ManifestPlugin({
         fileName: 'asset-manifest.json',
         publicPath: publicPath,
-        generate: (seed, files) => {
-          const manifestFiles = files.reduce(function(manifest, file) {
+        generate: (seed, files, entrypoints) => {
+          const manifestFiles = files.reduce((manifest, file) => {
             manifest[file.name] = file.path;
             return manifest;
           }, seed);
+          const entrypointFiles = entrypoints.main.filter(
+            fileName => !fileName.endsWith('.map')
+          );
 
           return {
             files: manifestFiles,
+            entrypoints: entrypointFiles,
           };
         },
       }),

config/webpackDevServer.config.js

@@ -43,7 +43,7 @@ module.exports = function(proxy, allowedHost) {
     // Instead, we establish a convention that only files in `public` directory
     // get served. Our build script will copy `public` into the `build` folder.
     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
     // Note that we only recommend to use `public` folder as an escape hatch
     // for files like `favicon.ico`, `manifest.json`, and libraries that are

package.json

@@ -6,9 +6,13 @@
     "dependencies": {
         "@babel/core": "7.6.0",
         "@svgr/webpack": "4.3.2",
+        "@types/jest": "24.0.18",
+        "@types/node": "12.7.11",
+        "@types/react": "16.9.5",
+        "@types/react-dom": "16.9.1",
         "@typescript-eslint/eslint-plugin": "^2.2.0",
         "@typescript-eslint/parser": "^2.2.0",
-        "antd": "^3.23.4",
+        "antd": "^3.23.5",
         "axios": "^0.19.0",
         "babel-eslint": "10.0.3",
         "babel-jest": "^24.9.0",
@@ -23,10 +27,10 @@
         "draftjs-to-html": "^0.8.4",
         "draftjs-to-markdown": "^0.5.1",
         "echarts": "^4.3.0",
-        "echarts-for-react": "^2.0.15-beta.0",
+        "echarts-for-react": "^2.0.15-beta.1",
         "eslint": "^6.1.0",
         "eslint-config-react-app": "^5.0.2",
-        "eslint-loader": "3.0.0",
+        "eslint-loader": "3.0.2",
         "eslint-plugin-flowtype": "3.13.0",
         "eslint-plugin-import": "2.18.2",
         "eslint-plugin-jsx-a11y": "6.2.3",
@@ -52,18 +56,18 @@
         "postcss-preset-env": "6.7.0",
         "postcss-safe-parser": "4.0.1",
         "rc-banner-anim": "^2.4.2",
-        "react": "^16.9.0",
-        "react-app-polyfill": "^1.0.3",
+        "react": "^16.10.2",
+        "react-app-polyfill": "^1.0.4",
         "react-beautiful-dnd": "^11.0.5",
         "react-color": "^2.17.3",
-        "react-dev-utils": "^9.0.4",
+        "react-dev-utils": "^9.1.0",
         "react-document-title": "^2.0.3",
-        "react-dom": "^16.9.0",
+        "react-dom": "^16.10.2",
         "react-draft-wysiwyg": "^1.13.2",
         "react-draggable": "^4.0.3",
         "react-loadable": "^5.5.0",
         "react-qmap": "^0.1.6",
-        "react-router-dom": "^5.1.0",
+        "react-router-dom": "^5.1.2",
         "recharts": "^1.7.1",
         "redux-alita": "^2.1.3",
         "resolve": "1.12.0",
@@ -74,24 +78,13 @@
         "style-loader": "1.0.0",
         "terser-webpack-plugin": "1.4.1",
         "ts-pnp": "1.1.4",
+        "typescript": "3.6.3",
         "url-loader": "2.1.0",
-        "webpack": "4.40.2",
+        "webpack": "4.41.0",
         "webpack-dev-server": "3.2.1",
-        "webpack-manifest-plugin": "2.0.4",
+        "webpack-manifest-plugin": "2.1.1",
         "workbox-webpack-plugin": "4.3.1"
     },
-    "devDependencies": {
-        "@commitlint/cli": "^8.2.0",
-        "@commitlint/config-conventional": "^8.2.0",
-        "antd-theme-generator": "^1.1.7",
-        "babel-plugin-import": "^1.12.2",
-        "commitizen": "^4.0.3",
-        "cz-conventional-changelog": "^3.0.2",
-        "husky": "^3.0.5",
-        "less": "2.x",
-        "less-loader": "^5.0.0",
-        "standard-version": "^7.0.0"
-    },
     "scripts": {
         "start": "node scripts/start.js",
         "build": "node scripts/build.js",
@@ -185,5 +178,17 @@
                 }
             ]
         ]
+    },
+    "devDependencies": {
+        "@commitlint/cli": "^8.2.0",
+        "@commitlint/config-conventional": "^8.2.0",
+        "antd-theme-generator": "^1.1.7",
+        "babel-plugin-import": "^1.12.2",
+        "commitizen": "^4.0.3",
+        "cz-conventional-changelog": "^3.0.2",
+        "husky": "^3.0.5",
+        "less": "2.x",
+        "less-loader": "^5.0.0",
+        "standard-version": "^7.0.0"
     }
 }

scripts/build.js

@@ -106,9 +106,17 @@ checkBrowsers(paths.appPath, isInteractive)
       );
     },
     err => {
-      console.log(chalk.red('Failed to compile.\n'));
-      printBuildError(err);
-      process.exit(1);
+      const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+      if (tscCompileOnError) {
+        console.log(chalk.yellow(
+          'Compiled with the following type errors (you may want to check these before deploying your app):\n'
+        ));
+        printBuildError(err);
+      } else {
+        console.log(chalk.red('Failed to compile.\n'));
+        printBuildError(err);
+        process.exit(1);
+      }
     }
   )
   .catch(err => {

scripts/start.js

@@ -79,6 +79,7 @@ checkBrowsers(paths.appPath, isInteractive)
     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
     const appName = require(paths.appPackageJson).name;
     const useTypeScript = fs.existsSync(paths.appTsConfig);
+    const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
     const urls = prepareUrls(protocol, HOST, port);
     const devSocket = {
       warnings: warnings =>
@@ -94,6 +95,7 @@ checkBrowsers(paths.appPath, isInteractive)
       urls,
       useYarn,
       useTypeScript,
+      tscCompileOnError,
       webpack,
     });
     // Load proxy config

src/App.test.js → src/App.test.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import App from './App';
 
 it('renders without crashing', () => {
-    const div = document.createElement('div');
-    ReactDOM.render(<App />, div);
-    ReactDOM.unmountComponentAtNode(div);
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
 });