chore: Normalize custom types (#2252)

Author: ecraig12345

build/config.ts

@@ -1,5 +1,6 @@
 import * as path from 'path'
 import * as _ from 'lodash'
+import * as webpack from 'webpack'
 
 // ------------------------------------
 // Environment vars
@@ -21,12 +22,14 @@ const envConfig = {
   // ----------------------------------
   path_base: path.resolve(__dirname, '..'),
   dir_build: 'build',
+  dir_docs: 'docs',
   dir_docs_dist: 'docs/dist',
   dir_docs_src: 'docs/src',
   dir_e2e: 'e2e',
   dir_e2e_src: 'e2e/server',
   dir_e2e_dist: 'e2e/dist',
   dir_packages: 'packages',
+  dir_perf: 'perf',
   dir_perf_dist: 'perf/dist',
   dir_perf_src: 'perf/src',
   dir_umd_dist: 'dist/umd',
@@ -41,6 +44,7 @@ const fromBase = (...paths: string[]) => (...subPaths: string[]) => base(...path
 
 const tempPaths = {
   build: fromBase(envConfig.dir_build),
+  docs: fromBase(envConfig.dir_docs),
   docsDist: fromBase(envConfig.dir_docs_dist),
   docsSrc: fromBase(envConfig.dir_docs_src),
   e2e: fromBase(envConfig.dir_e2e),
@@ -51,6 +55,7 @@ const tempPaths = {
   packageSrc: (packageName: string, ...paths: string[]) =>
     base(envConfig.dir_packages, packageName, 'src', ...paths),
   packages: fromBase(envConfig.dir_packages),
+  perf: fromBase(envConfig.dir_perf),
   perfDist: fromBase(envConfig.dir_perf_dist),
   perfSrc: fromBase(envConfig.dir_perf_src),
   umdDist: fromBase(envConfig.dir_umd_dist),
@@ -91,8 +96,8 @@ const config = {
   // ----------------------------------
   // Compiler Configuration
   // ----------------------------------
-  compiler_devtool: __DEV__ && 'eval-source-map',
-  compiler_mode: __DEV__ ? 'development' : 'production',
+  compiler_devtool: __DEV__ && ('eval-source-map' as webpack.Options.Devtool),
+  compiler_mode: (__DEV__ ? 'development' : 'production') as webpack.Configuration['mode'],
   compiler_globals: {
     __DEV__,
     __PERF__,

build/package.json

@@ -28,6 +28,7 @@
     "@types/node": "^10.3.2",
     "@types/puppeteer": "^1.11.1",
     "@types/webpack-dev-middleware": "^2.0.1",
+    "@types/webpack-env": "^1.14.1",
     "@types/webpack-hot-middleware": "^2.16.3",
     "@typescript-eslint/eslint-plugin": "^2.5.0",
     "@typescript-eslint/parser": "^2.5.0",

build/screener/screener.config.js

@@ -1,7 +1,10 @@
+// @ts-check
+
 require('@fluentui/internal-tooling/babel/register')
 
 const config = require('../config').default
-const { compilerOptions } = require('../tsconfig.docs.json')
+
+const { compilerOptions } = require(config.paths.docs('tsconfig.json'))
 
 require('tsconfig-paths').register({
   baseUrl: config.path_base,

build/screener/screener.steps.ts

@@ -3,7 +3,7 @@ import fs from 'fs'
 import Steps from 'screener-runner/src/steps'
 import keys from 'screener-runner/src/keys'
 
-const DEFAULT_THEMES: ScreenerThemes = ['teams']
+const DEFAULT_THEMES: ScreenerThemeName[] = ['teams']
 
 Steps.prototype.resetExternalLayout = function resetExternalLayout() {
   return this.executeScript(`window.resetExternalLayout()`)

build/tsconfig.common.json

@@ -12,7 +12,6 @@
       "@fluentui/*": ["packages/*/src"]
     },
     "types": ["node", "jest"],
-    "typeRoots": ["../types", "../node_modules/@types"],
     "jsx": "react",
     "importHelpers": true,
     "isolatedModules": true,

build/tsconfig.docs.json

@@ -1,6 +1,8 @@
 {
   "extends": "./tsconfig.common.json",
   "compilerOptions": {
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "typeRoots": ["../types", "../node_modules/@types"],
+    "types": ["node", "webpack-env", "screener-runner"]
   }
 }

build/tsconfig.e2e.json

@@ -1,12 +1,13 @@
 import CopyWebpackPlugin from 'copy-webpack-plugin'
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
 import { webpack as lernaAliases } from 'lerna-alias'
+import webpack from 'webpack'
 
 import config from './config'
 
 const { paths } = config
 
-const webpackConfig: any = {
+const webpackConfig: webpack.Configuration = {
   name: 'client',
   target: 'web',
   mode: 'development',
@@ -18,7 +19,7 @@ const webpackConfig: any = {
     path: paths.e2eDist(),
     pathinfo: true,
   },
-  devtool: config.compiler_devtool,
+  devtool: config.compiler_devtool as webpack.Options.Devtool,
   node: {
     fs: 'empty',
     module: 'empty',
@@ -40,7 +41,7 @@ const webpackConfig: any = {
     ],
   },
   plugins: [
-    new ForkTsCheckerWebpackPlugin({ tsconfig: paths.build('tsconfig.e2e.json') }),
+    new ForkTsCheckerWebpackPlugin({ tsconfig: paths.e2e('tsconfig.json') }),
     new CopyWebpackPlugin([
       {
         from: paths.e2eSrc('index.html'),

build/tsconfig.json

@@ -2,12 +2,13 @@ import CopyWebpackPlugin from 'copy-webpack-plugin'
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
 import { webpack as lernaAliases } from 'lerna-alias'
 import { argv } from 'yargs'
+import webpack from 'webpack'
 
 import config from './config'
 
 const { paths } = config
 
-const webpackConfig: any = {
+const webpackConfig: webpack.Configuration = {
   name: 'client',
   target: 'web',
   mode: 'development',
@@ -20,7 +21,7 @@ const webpackConfig: any = {
     pathinfo: true,
     publicPath: config.compiler_public_path,
   },
-  devtool: config.compiler_devtool,
+  devtool: config.compiler_devtool as webpack.Options.Devtool,
   node: {
     fs: 'empty',
     module: 'empty',
@@ -42,7 +43,7 @@ const webpackConfig: any = {
     ],
   },
   plugins: [
-    new ForkTsCheckerWebpackPlugin({ tsconfig: paths.build('tsconfig.perf.json') }),
+    new ForkTsCheckerWebpackPlugin({ tsconfig: paths.perf('tsconfig.json') }),
     new CopyWebpackPlugin([
       {
         from: paths.perfSrc('index.html'),

build/tsconfig.perf.json

@@ -27,7 +27,7 @@ class IgnoreNotFoundExportPlugin {
   }
 }
 
-const makeConfig = (srcPath, name) => ({
+const makeConfig = (srcPath: string, name: string): webpack.Configuration => ({
   mode: 'production',
   name: 'client',
   target: 'web',

build/tsconfig.test.json

@@ -12,7 +12,7 @@ import config from './config'
 const { paths } = config
 const { __DEV__, __PROD__ } = config.compiler_globals
 
-const webpackConfig: any = {
+const webpackConfig: webpack.Configuration = {
   name: 'client',
   target: 'web',
   mode: config.compiler_mode,
@@ -26,7 +26,7 @@ const webpackConfig: any = {
     pathinfo: true,
     publicPath: config.compiler_public_path,
   },
-  devtool: config.compiler_devtool,
+  devtool: config.compiler_devtool as webpack.Options.Devtool,
   externals: {
     '@babel/standalone': 'Babel',
     'anchor-js': 'AnchorJS',
@@ -68,7 +68,7 @@ const webpackConfig: any = {
   },
   plugins: [
     new ForkTsCheckerWebpackPlugin({
-      tsconfig: paths.base('build/tsconfig.docs.json'),
+      tsconfig: paths.docs('tsconfig.json'),
       watch: [paths.docsSrc(), paths.packages()],
     }),
     new webpack.DefinePlugin(config.compiler_globals),
@@ -112,7 +112,7 @@ const webpackConfig: any = {
         entries: true,
         modules: true,
         modulesCount: 500,
-      }),
+      } as any),
   ].filter(Boolean),
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json'],
@@ -141,7 +141,7 @@ const webpackConfig: any = {
 // Environment Configuration
 // ------------------------------------
 if (__DEV__) {
-  const webpackHotPath = `${config.compiler_public_path}__webpack_hmr`
+  const webpackHotPath = `${config.compiler_public_path}__compiler_hmr`
   const webpackHotMiddlewareEntry = `webpack-hot-middleware/client?${_.map(
     {
       path: webpackHotPath, // The path which the middleware is serving the event stream on
@@ -153,8 +153,9 @@ if (__DEV__) {
     },
     (val, key) => `&${key}=${val}`,
   ).join('')}`
+  const entry = webpackConfig.entry as webpack.Entry
+  entry.app = [webpackHotMiddlewareEntry].concat((entry as webpack.Entry).app)
 
-  webpackConfig.entry.app = [webpackHotMiddlewareEntry].concat(webpackConfig.entry.app)
   webpackConfig.plugins.push(
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),

build/webpack.config.e2e.ts

@@ -1,9 +1,10 @@
+import webpack from 'webpack'
 import config from './config'
 import webpackConfig from './webpack.config'
 
 const { paths } = config
 
-const webpackUMDConfig = (packageName: string) => {
+const webpackUMDConfig = (packageName: string): webpack.Configuration => {
   const pkg = require(`../packages/${packageName}/package.json`)
 
   return {

build/webpack.config.perf.ts

@@ -28,6 +28,7 @@
     "@types/node": "^10.3.2",
     "@types/react-custom-scrollbars": "^4.0.5",
     "@types/react-router-dom": "^4.3.4",
+    "@types/webpack-env": "^1.14.1",
     "gulp": "^4.0.2"
   },
   "publishConfig": {

build/webpack.config.stats.ts

@@ -1,4 +1,5 @@
 import { Provider, themes, pxToRem, createTheme } from '@fluentui/react'
+// @ts-ignore
 import AnchorJS from 'anchor-js'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'

build/webpack.config.ts

@@ -1,15 +1,12 @@
+// Due to the react reference, putting these under /types doesn't work well
+
+/* eslint-disable spaced-comment */
+/// <reference types="react" />
+
 declare const __DEV__: boolean
 declare const __PATH_SEP__: string
 declare const __BASENAME__: string
 
-declare interface NodeModule {
-  hot: any
-}
-
-declare interface NodeRequire {
-  context: any
-}
-
 declare module '*.json' {
   const value: any
   export default value

build/webpack.config.umd.ts

@@ -7,7 +7,7 @@ import { ComponentInfo } from '../types'
 const requireContext = require.context('../componentInfo', true, /\.info\.json$/)
 
 const keys: string[] = requireContext.keys()
-const infoObjects: ComponentInfo[] = keys.map(requireContext)
+const infoObjects = keys.map(requireContext) as ComponentInfo[]
 
 const componentInfoContext: {
   byDisplayName: { [componentName: string]: ComponentInfo }

docs/package.json

@@ -1,3 +1,15 @@
 {
-  "extends": "../build/tsconfig.docs.json"
+  "extends": "../build/tsconfig.common.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "paths": {
+      "@fluentui/*": ["packages/*/src"],
+      "docs/*": ["docs/*"],
+      "src/*": ["packages/react/src/*"],
+      "test/*": ["packages/react/test/*"]
+    },
+    "typeRoots": ["../types", "../node_modules/@types"],
+    "types": ["node", "webpack-env", "screener-runner"]
+  },
+  "include": ["./src"]
 }

docs/src/components/DocsLayout.tsx

@@ -2,7 +2,8 @@
   "extends": "../build/tsconfig.common.json",
   "compilerOptions": {
     "module": "esnext",
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "types": ["node", "jest", "webpack-env"]
   },
-  "include": ["../packages/react/src", "../e2e", "../types"]
+  "include": ["."]
 }

types/global.d.ts renamed to docs/src/global.d.ts

@@ -4,7 +4,7 @@ import * as tsPaths from 'tsconfig-paths'
 
 import config from './build/config'
 
-const { compilerOptions } = require('./build/tsconfig.docs.json')
+const { compilerOptions } = require(config.paths.docs('tsconfig.json'))
 
 // add node_modules/.bin to the path so we can invoke .bin CLIs in tasks
 process.env.PATH =

docs/src/utils/componentInfoContext.ts

@@ -81,7 +81,6 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "satisfied": "^1.1.1",
-    "simulant": "^0.2.2",
     "syncpack": "^4.5.4",
     "tsconfig-paths": "^3.7.0",
     "tslint": "^5.11.0",

docs/tsconfig.json

@@ -6,7 +6,7 @@
     "moduleResolution": "node",
     "declaration": true,
     "skipLibCheck": true,
-    "types": ["node", "react"],
+    "types": ["node"],
     "baseUrl": ".",
     "allowSyntheticDefaultImports": true,
     "paths": {

e2e/tsconfig.json

@@ -18,6 +18,7 @@
     "@fluentui/digest": "^0.43.0",
     "@types/react": "^16.8.10",
     "@types/react-dom": "^16.8.3",
+    "@types/webpack-env": "^1.14.1",
     "flamegrill": "^0.1.3",
     "ignore-not-found-export-webpack-plugin": "^1.0.1",
     "just-scripts": "^0.35.0"

gulpfile.ts

@@ -1,9 +1,9 @@
 {
-  "extends": "../../build/tsconfig.docs.json",
+  "extends": "../../docs/tsconfig.json",
   "compilerOptions": {
     "rootDir": "src",
     "outDir": "lib",
-    "types": ["node", "jest", "expect-puppeteer", "jest-environment-puppeteer"]
+    "types": ["node", "jest", "expect-puppeteer", "jest-environment-puppeteer", "webpack-env"]
   },
   "include": ["src"],
   "references": []