build: improve app bundle size and speed up client builds

.github/workflows/main.yml

@@ -14,6 +14,7 @@ jobs:
   ci:
     name: Unit Tests
     runs-on: ubuntu-latest
+    timeout-minutes: 20
 
     steps:
       - name: Checkout
@@ -30,7 +31,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn-
       - name: yarn install
-        run: yarn install
+        run: yarn
         working-directory: Composer
       - name: yarn build:dev
         run: yarn build:dev
@@ -57,6 +58,7 @@ jobs:
   e2e:
     name: E2E Tests
     runs-on: ubuntu-latest
+    timeout-minutes: 20
 
     steps:
       - name: Checkout
@@ -73,7 +75,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn-
       - name: yarn install
-        run: yarn install
+        run: yarn
         working-directory: Composer
       - name: yarn build:prod
         run: yarn build:prod
@@ -95,13 +97,15 @@ jobs:
   botproject:
     name: BotProject
     runs-on: windows-latest
+    timeout-minutes: 20
+
     steps:
       - name: Checkout
         uses: actions/checkout@v1
       - name: Set Dotnet Version
         uses: actions/setup-dotnet@v1
         with:
-          dotnet-version: "2.1.802" # SDK Version to use.
+          dotnet-version: "3.0.100" # SDK Version to use.
       - name: dotnet build
         run: dotnet build
         working-directory: BotProject/CSharp

.vscode/launch.json

@@ -30,7 +30,7 @@
       "type": "node",
       "request": "attach",
       "name": "Server: Attach",
-      "port": 9229,
+      "port": 9228,
       "sourceMaps": true
     }
   ]

Composer/.eslintrc.js

@@ -6,8 +6,9 @@ module.exports = {
     'plugin:@typescript-eslint/recommended-requiring-type-checking',
     'plugin:@typescript-eslint/eslint-recommended',
     'prettier/@typescript-eslint',
+    'plugin:@bfc/bfcomposer/recommended',
   ],
-  plugins: ['import', 'notice', 'security'],
+  plugins: ['import', 'notice', 'security', 'lodash'],
   env: {
     browser: true,
     es6: true,
@@ -21,6 +22,8 @@ module.exports = {
         templateFile: require.resolve('./license.js'),
       },
     ],
+
+    // typescript
     '@typescript-eslint/ban-ts-ignore': 'warn',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/interface-name-prefix': 'off',
@@ -54,6 +57,27 @@ module.exports = {
     'security/detect-possible-timing-attacks': 'error',
     'security/detect-pseudoRandomBytes': 'error',
     'security/detect-unsafe-regex': 'error',
+
+    // lodash
+    'lodash/callback-binding': 'error',
+    'lodash/collection-method-value': 'error',
+    'lodash/collection-return': 'error',
+    'lodash/no-double-unwrap': 'error',
+    'lodash/no-extra-args': 'error',
+    'lodash/no-unbound-this': 'error',
+    'lodash/unwrap': 'error',
+    'lodash/identity-shorthand': 'error',
+    'lodash/import-scope': ['error', 'method'],
+    'lodash/matches-prop-shorthand': 'error',
+    'lodash/matches-shorthand': 'error',
+    'lodash/path-style': 'error',
+    'lodash/prefer-compact': 'error',
+    'lodash/prefer-flat-map': 'error',
+    'lodash/prefer-immutable-method': 'error',
+    'lodash/prefer-map': 'error',
+    'lodash/prefer-reject': 'error',
+    'lodash/preferred-alias': 'error',
+    'lodash/prop-shorthand': 'error',
   },
   overrides: [
     {

Composer/.eslintrc.react.js

@@ -1,6 +1,6 @@
 module.exports = {
   extends: ['./.eslintrc.js', 'plugin:react/recommended'],
-  plugins: ['react-hooks', 'format-message'],
+  plugins: ['react-hooks', 'format-message', 'emotion'],
   settings: {
     react: {
       version: '16.9.0',
@@ -14,17 +14,23 @@ module.exports = {
     },
   },
   rules: {
+    // format message
     'format-message/literal-pattern': 'error',
     'format-message/no-invalid-pattern': 'error',
     'format-message/no-missing-params': ['error', { allowNonLiteral: false }],
 
+    // react hooks
     'react-hooks/exhaustive-deps': 'off',
     'react-hooks/rules-of-hooks': 'error',
 
+    // react
     'react/display-name': 'off',
     'react/no-danger': 'error',
     'react/no-deprecated': 'warn',
     'react/prop-types': 'warn',
+
+    // emotion
+    'emotion/jsx-import': 'error',
   },
   overrides: [
     {

Composer/package.json

@@ -61,6 +61,7 @@
     "@babel/preset-env": "7.3.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
+    "@bfc/eslint-plugin-bfcomposer": "*",
     "@emotion/babel-preset-css-prop": "^10.0.17",
     "@typescript-eslint/eslint-plugin": "2.6.0",
     "@typescript-eslint/parser": "2.6.0",
@@ -72,9 +73,11 @@
     "cypress-testing-library": "^3.0.1",
     "eslint": "^5.15.1",
     "eslint-config-prettier": "^4.1.0",
+    "eslint-plugin-emotion": "^10.0.14",
     "eslint-plugin-format-message": "^6.2.3",
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-jsx-a11y": "6.1.2",
+    "eslint-plugin-lodash": "^6.0.0",
     "eslint-plugin-notice": "^0.7.8",
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "7.12.4",

Composer/packages/client/__tests__/components/errorBoundary.test.js

@@ -24,28 +24,38 @@ const ProblemChild = () => {
 };
 
 describe('<ErrorBoundary/>', () => {
+  let consoleErrorStub, consoleLogStub;
+
+  beforeEach(() => {
+    consoleErrorStub = jest.spyOn(console, 'error').mockImplementation(() => {});
+    consoleLogStub = jest.spyOn(console, 'log').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleErrorStub.mockRestore();
+    consoleLogStub.mockRestore();
+  });
+
   it('should just render the children if error not occur', () => {
     ErrorBoundary.contextType = Store;
-    const { container, debug } = render(
+    const { container } = render(
       <ErrorBoundary>
         <div>test</div>
       </ErrorBoundary>
     );
-    debug();
     expect(container).toHaveTextContent('test');
   });
 
   it('all the components will not crash with ErrorBoundary even child compoent throw a error', () => {
     ErrorBoundary.contextType = Store;
-    const { container, debug } = render(
+    const { container } = render(
       <div>
         <ErrorBoundary>
           <ProblemChild />
         </ErrorBoundary>
         <div> will not crash</div>
       </div>
     );
-    debug();
     expect(container).toHaveTextContent('will not crash');
   });
 

Composer/packages/client/config/webpack.config.js

@@ -1,14 +1,11 @@
 'use strict';
 
-const fs = require('fs');
 const path = require('path');
 
 const webpack = require('webpack');
-const resolve = require('resolve');
 const PnpWebpackPlugin = require('pnp-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
@@ -20,8 +17,6 @@ const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeM
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
-const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 const MonacoWebpackPlugin = require('@bfcomposer/monaco-editor-webpack-plugin');
 
 const getClientEnvironment = require('./env');
@@ -30,9 +25,6 @@ const paths = require('./paths');
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 
-// Check if TypeScript is setup
-const useTypeScript = fs.existsSync(paths.appTsConfig);
-
 // style files regexes
 const cssRegex = /\.css$/;
 const cssModuleRegex = /\.module\.css$/;
@@ -190,11 +182,6 @@ module.exports = function(webpackEnv) {
               ascii_only: true,
             },
           },
-          // Use multi-process parallel running to improve the build speed
-          // Default number of concurrent runs: os.cpus().length - 1
-          parallel: true,
-          // Enable file caching
-          cache: true,
           sourceMap: shouldUseSourceMap,
         }),
         // This is only used in production mode
@@ -240,12 +227,7 @@ module.exports = function(webpackEnv) {
       // https://github.com/facebook/create-react-app/issues/290
       // `web` extension prefixes have been added for better support
       // for React Native Web.
-      extensions: paths.moduleFileExtensions.map(ext => `.${ext}`).filter(ext => useTypeScript || !ext.includes('ts')),
-      alias: {
-        // 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',
-      },
+      extensions: paths.moduleFileExtensions.map(ext => `.${ext}`),
       plugins: [
         // Adds support for installing with Plug'n'Play, leading to faster installs and adding
         // guards against forgotten dependencies and such.
@@ -304,10 +286,19 @@ module.exports = function(webpackEnv) {
                 name: 'static/media/[name].[hash:8].[ext]',
               },
             },
+            {
+              test: /\.tsx?$/,
+              include: paths.appSrc,
+              loader: require.resolve('ts-loader'),
+              options: PnpWebpackPlugin.tsLoaderOptions({
+                transpileOnly: isEnvDevelopment,
+                configFile: path.resolve(__dirname, '../tsconfig.build.json'),
+              }),
+            },
             // Process application JS with Babel.
-            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
+            // The preset includes JSX, Flow, and some ESnext features.
             {
-              test: /\.(js|mjs|jsx|ts|tsx)$/,
+              test: /\.(js|jsx)$/,
               include: paths.appSrc,
               loader: require.resolve('babel-loader'),
               options: {
@@ -336,7 +327,7 @@ module.exports = function(webpackEnv) {
             // Process any JS outside of the app with Babel.
             // Unlike the application JS, we only compile the standard ES features.
             {
-              test: /\.(js|mjs)$/,
+              test: /\.(js)$/,
               exclude: /@babel(?:\/|\\{1,2})runtime/,
               loader: require.resolve('babel-loader'),
               options: {
@@ -516,35 +507,6 @@ module.exports = function(webpackEnv) {
             new RegExp('/[^/]+\\.[^/]+$'),
           ],
         }),
-      // TypeScript type checking
-      useTypeScript &&
-        new ForkTsCheckerWebpackPlugin({
-          typescript: resolve.sync('typescript', {
-            basedir: paths.appNodeModules,
-          }),
-          async: false,
-          checkSyntacticErrors: true,
-          tsconfig: paths.appTsConfig,
-          compilerOptions: {
-            module: 'esnext',
-            moduleResolution: 'node',
-            resolveJsonModule: true,
-            isolatedModules: true,
-            noEmit: true,
-            jsx: 'preserve',
-          },
-          reportFiles: [
-            '**',
-            '!**/*.json',
-            '!**/__tests__/**',
-            '!**/?(*.)(spec|test).*',
-            '!**/src/setupProxy.*',
-            '!**/src/setupTests.*',
-          ],
-          watch: paths.appSrc,
-          silent: true,
-          formatter: typescriptFormatter,
-        }),
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.
     // Tell Webpack to provide empty mocks for them so importing them works.

Composer/packages/client/jest.config.js

@@ -1,20 +1,32 @@
 // eslint-disable-next-line
 const path = require('path');
 module.exports = {
+  preset: 'ts-jest/presets/js-with-ts',
+  // transform: {
+  //   '^.+\\.tsx?$': 'ts-jest',
+  //   '^.+\\.jsx?$': 'babel-jest',
+  // },
   moduleNameMapper: {
     // Any imports of .scss / .css files will instead import styleMock.js which is an empty object
     '\\.(jpg|jpeg|png|svg|gif)$': '<rootDir>/__tests__/jestMocks/styleMock.js',
     '\\.(s)?css$': '<rootDir>/__tests__/jestMocks/styleMock.js',
+
+    // use commonjs modules for test so they do not need to be compiled
+    'office-ui-fabric-react/lib/(.*)$': 'office-ui-fabric-react/lib-commonjs/$1',
+    '@uifabric/fluent-theme/lib/(.*)$': '@uifabric/fluent-theme/lib-commonjs/$1',
   },
   testPathIgnorePatterns: ['/node_modules/', '/jestMocks/', '/testUtils/'],
-  transform: {
-    '^.+\\.(j|t)sx?$': 'babel-jest',
-  },
   // Some node modules are packaged and distributed in a non-transpiled form
   // (ex. contain import & export statements); and Jest won't be able to
   // understand them because node_modules aren't transformed by default. So
   // we can specify that they need to be transformed here.
-  transformIgnorePatterns: ['"/node_modules/(?!office-ui-fabric-react).+\\.js$"'],
+  transformIgnorePatterns: ['/node_modules/'],
 
   setupFilesAfterEnv: [path.resolve(__dirname, './setupTests.js')],
+  globals: {
+    'ts-jest': {
+      tsConfig: path.resolve(__dirname, './tsconfig.json'),
+      diagnostics: false,
+    },
+  },
 };