build: optimize build by splitting out typechecking and linting (#6323)

* build: move typecheck/lint out of build

* build: add typecheck to test action

* build: fix lint to use gitignore

* fix: correctly lint/check

* fix: simplify lint

* build: back out eslint array-ification

* test(lint): add comment RE config/typings

* build: clarify craco webpack plugin mods

* build: simplify craco webpack with functional methods

* build: rm unused IgnorePlugin

* test(lint): order imports

.eslintignore

-*.config.ts
-*.d.ts
-/src/graphql/data/__generated__/types-and-hooks.ts
-/src/graphql/thegraph/__generated__/types-and-hooks.ts
-/src/schema/schema.graphql

.eslintrc.js

@@ -5,6 +5,14 @@ require('@uniswap/eslint-config/load')
 module.exports = {
   extends: '@uniswap/eslint-config/react',
   overrides: [
+    {
+      // Configuration/typings typically export objects/definitions that are used outside of the transpiled package
+      // (eg not captured by the tsconfig). Because it's typical and not exceptional, this is turned off entirely.
+      files: ['**/*.config.*', '**/*.d.ts'],
+      rules: {
+        'import/no-unused-modules': 'off',
+      },
+    },
     {
       files: ['**/*.ts', '**/*.tsx'],
       rules: {

.github/workflows/test.yml

@@ -15,6 +15,14 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
       - run: yarn lint
+  
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup
+      - run: yarn prepare
+      - run: yarn typecheck
 
   deps-tests:
     runs-on: ubuntu-latest

craco.config.cjs

 /* eslint-env node */
 const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin')
+const { execSync } = require('child_process')
+const EsLintWebpackPlugin = require('eslint-webpack-plugin')
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const { DefinePlugin } = require('webpack')
 
-const commitHash = require('child_process').execSync('git rev-parse HEAD')
+const isProduction = process.env.NODE_ENV === 'production'
+const commitHash = execSync('git rev-parse HEAD').toString().trim()
 
 module.exports = {
   babel: {
@@ -29,25 +33,40 @@ module.exports = {
     },
   },
   webpack: {
-    plugins: [
-      new VanillaExtractPlugin({ identifiers: 'short' }),
-      new DefinePlugin({
-        'process.env.REACT_APP_GIT_COMMIT_HASH': JSON.stringify(commitHash.toString()),
-      }),
-    ],
+    plugins: [new VanillaExtractPlugin({ identifiers: 'short' })],
     configure: (webpackConfig) => {
-      const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find(
-        (plugin) => plugin instanceof MiniCssExtractPlugin
-      )
-      if (instanceOfMiniCssExtractPlugin !== undefined) instanceOfMiniCssExtractPlugin.options.ignoreOrder = true
+      webpackConfig.plugins = webpackConfig.plugins
+        .filter((plugin) => {
+          // Type checking and linting are only necessary as part of development and testing.
+          // Omit them from production builds, as they slow down the feedback loop.
+          if (isProduction) {
+            if (plugin instanceof ForkTsCheckerWebpackPlugin) return false
+            if (plugin instanceof EsLintWebpackPlugin) return false
+          }
 
-      // We're currently on Webpack 4.x that doesn't support the `exports` field in package.json.
+          return true
+        })
+        .map((plugin) => {
+          // Extend process.env with dynamic values (eg commit hash).
+          // This will make dynamic values available to JavaScript only, not to interpolated HTML (ie index.html).
+          if (plugin instanceof DefinePlugin) {
+            Object.assign(plugin.definitions['process.env'], {
+              REACT_APP_GIT_COMMIT_HASH: JSON.stringify(commitHash),
+            })
+          }
+
+          // CSS ordering is mitigated through scoping / naming conventions, so we can ignore order warnings.
+          // See https://webpack.js.org/plugins/mini-css-extract-plugin/#remove-order-warnings.
+          if (plugin instanceof MiniCssExtractPlugin) {
+            plugin.options.ignoreOrder = true
+          }
+
+          return plugin
+        })
+
+      // We're currently on Webpack 4.x which doesn't support the `exports` field in package.json.
+      // Instead, we need to manually map the import path to the correct exports path (eg dist or build folder).
       // See https://github.com/webpack/webpack/issues/9509.
-      //
-      // In case you need to add more modules, make sure to remap them to the correct path.
-      //
-      // Map @uniswap/conedison to its dist folder.
-      // This is required because conedison uses * to redirect all imports to its dist.
       webpackConfig.resolve.alias['@uniswap/conedison'] = '@uniswap/conedison/dist'
 
       return webpackConfig

package.json

@@ -17,16 +17,17 @@
     "i18n:compile": "yarn i18n:extract && lingui compile",
     "i18n:pseudo": "lingui extract --locale pseudo && lingui compile",
     "prepare": "yarn contracts:compile && yarn graphql:fetch && yarn graphql:generate && yarn i18n:compile",
+    "postinstall": "patch-package",
     "start": "craco start",
     "build": "craco build",
     "serve": "serve build -l 3000",
-    "deduplicate": "yarn-deduplicate --strategy=highest",
-    "lint": "yarn eslint .",
+    "lint": "yarn eslint --ignore-path .gitignore .",
+    "typecheck": "tsc --noEmit",
     "test": "craco test --coverage",
     "test:size": "node scripts/test-size.js",
     "cypress:open": "cypress open --browser chrome --e2e",
     "cypress:run": "cypress run --browser chrome --e2e",
-    "postinstall": "patch-package"
+    "deduplicate": "yarn-deduplicate --strategy=highest"
   },
   "jest": {
     "collectCoverageFrom": [

src/state/application/reducer.test.ts

@@ -14,6 +14,7 @@ describe('application reducer', () => {
 
   beforeEach(() => {
     store = createStore(reducer, {
+      fiatOnramp: { available: false, availabilityChecked: false },
       chainId: null,
       openModal: null,
       popupList: [],

src/utils/computeSurroundingTicks.test.ts

 import { Token } from '@uniswap/sdk-core'
 import { FeeAmount, TICK_SPACINGS } from '@uniswap/v3-sdk'
-import { TickData, TickProcessed } from 'hooks/usePoolTickData'
+import { TickData } from 'graphql/thegraph/AllV3TicksQuery'
+import { TickProcessed } from 'hooks/usePoolTickData'
 import JSBI from 'jsbi'
 
 import computeSurroundingTicks from './computeSurroundingTicks'
@@ -8,7 +9,8 @@ import computeSurroundingTicks from './computeSurroundingTicks'
 const getV3Tick = (tick: number, liquidityNet: number): TickData => ({
   tick,
   liquidityNet: JSBI.BigInt(liquidityNet),
-  liquidityGross: JSBI.BigInt(liquidityNet),
+  price0: undefined,
+  price1: undefined,
 })
 
 describe('#computeSurroundingTicks', () => {