chore(monorepo): migrate frontend bundling from webpack to vite (#14405)

migrate frontend bundler from webpack to vite

Co-authored-by: Jamey Huffnagle <[email protected]>
Co-authored-by: Brian Cooper <[email protected]>
Co-authored-by: koji <[email protected]>
Co-authored-by: Jethary <[email protected]>
Co-authored-by: ncdiehl11 <[email protected]>
Co-authored-by: smb2268 <[email protected]>
Co-authored-by: Brent Hagen <[email protected]>

Author: 8 people

.eslintignore

@@ -6,11 +6,10 @@
 **/venv/**
 .opentrons_config
 **/tsconfig*.json
-
+**/vite.config.ts
 # prettier
 **/package.json
 **/CHANGELOG.md
-lerna.json
 !api/release-notes.md
 !app-shell/build/release-notes.md
 

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
     'plugin:react/recommended',
     'prettier',
     'plugin:json/recommended',
+    'plugin:storybook/recommended',
   ],
 
   plugins: ['react', 'react-hooks', 'json', 'jest', 'testing-library'],
@@ -89,6 +90,11 @@ module.exports = {
         '@typescript-eslint/unbound-method': 'warn',
         '@typescript-eslint/consistent-generic-constructors': 'warn',
         '@typescript-eslint/no-misused-promises': 'warn',
+        // need this to be able to pass in css prop into raw elements (babel adds this at build time for styled-components)
+        'react/no-unknown-property': [
+          'error',
+          { ignore: ['css', 'indeterminate'] },
+        ],
       },
     },
     {
@@ -98,6 +104,7 @@ module.exports = {
         '**/__mocks__/**.@(js|ts|tsx)',
         '**/__utils__/**.@(js|ts|tsx)',
         '**/__fixtures__/**.@(js|ts|tsx)',
+        '**/fixtures/**.@(js|ts|tsx)',
         'scripts/*.@(js|ts|tsx)',
       ],
       env: {
@@ -108,7 +115,7 @@ module.exports = {
         'jest/expect-expect': 'off',
         'jest/no-standalone-expect': 'off',
         'jest/no-disabled-tests': 'error',
-        'jest/consistent-test-it': 'error',
+        'jest/consistent-test-it': ['error', { fn: 'it' }],
         '@typescript-eslint/consistent-type-assertions': 'off',
         '@typescript-eslint/no-var-requires': 'off',
         '@typescript-eslint/explicit-function-return-type': 'off',
@@ -127,6 +134,7 @@ module.exports = {
       env: { jest: true },
       extends: ['plugin:testing-library/react'],
       rules: {
+        'testing-library/no-manual-cleanup': 'off',
         'testing-library/prefer-screen-queries': 'warn',
       },
     },
@@ -140,6 +148,9 @@ module.exports = {
     {
       files: ['**/cypress/**'],
       extends: ['plugin:cypress/recommended'],
+      rules: {
+        'cypress/unsafe-to-chain-command': 'warn',
+      },
     },
   ],
 }

.github/workflows/app-test-build-deploy.yaml

@@ -11,7 +11,6 @@ on:
       - 'app-shell-odd/**/*'
       - 'components/**/*'
       - 'shared-data/**/*'
-      - 'webpack-config/**/*'
       - 'discovery-client/**/*'
       - '*.js'
       - 'scripts/**/*'
@@ -32,7 +31,6 @@ on:
       - 'app-shell-odd/**/*'
       - 'components/**/*'
       - 'shared-data/**/*'
-      - 'webpack-config/**/*'
       - 'discovery-client/**/*'
       - '*.js'
       - '*.json'
@@ -141,7 +139,7 @@ jobs:
           yarn config set cache-folder ${{ github.workspace }}/.yarn-cache
           make setup-js
       - name: 'test native(er) packages'
-        run: make test-js-internal tests="app-shell/src app-shell-odd/src discovery-client/src" cov_opts="--coverage=true --ci=true --collectCoverageFrom='(app-shell|app-shell-odd| discovery-client)/src/**/*.(js|ts|tsx)'"
+        run: make test-js-internal tests="app-shell/src app-shell-odd/src discovery-client/src" cov_opts="--coverage=true"
       - name: 'Upload coverage report'
         uses: 'codecov/codecov-action@v3'
         with:
@@ -293,7 +291,7 @@ jobs:
           OT_APP_DEPLOY_FOLDER: ${{ steps.project.outputs.folder }}
 
         run: |
-          make -C app-shell dist-${{ matrix.os }}
+          make -C app-shell dist-${{ matrix.os }} USE_HARD_LINKS=false
 
       - name: 'upload github artifact'
         if: matrix.target == 'desktop'
@@ -443,7 +441,6 @@ jobs:
           path: |
             ${{ github.workspace }}/.npm-cache/_prebuild
             ${{ github.workspace }}/.yarn-cache
-          key: js-${{ secrets.GH_CACHE_VERSION }}-${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
       - name: 'setup-js'
         run: |
           npm config set cache ${{ github.workspace }}/.npm-cache

.github/workflows/components-test-build-deploy.yaml

@@ -8,14 +8,12 @@ on:
       - 'Makefile'
       - 'components/**'
       - 'app/**/*.stories.@(js|jsx|ts|tsx)'
-      - 'webpack-config/**'
       - 'package.json'
       - '.github/workflows/components-test-build-deploy.yaml'
   push:
     paths:
       - 'components/**'
       - 'app/**/*.stories.@(js|jsx|ts|tsx)'
-      - 'webpack-config/**'
       - 'package.json'
       - '.github/workflows/components-test-build-deploy.yaml'
     branches:
@@ -59,7 +57,6 @@ jobs:
       - name: 'setup-js'
         run: |
           npm config set cache ./.npm-cache
-          yarn config set cache-folder ./.yarn-cache
           make setup-js
       - name: 'run components unit tests'
         run: make -C components test-cov
@@ -177,21 +174,10 @@ jobs:
         with:
           node-version: '18.19.0'
           registry-url: 'https://registry.npmjs.org'
-      - name: 'cache yarn cache'
-        uses: actions/cache@v3
-        with:
-          path: |
-            ${{ github.workspace }}/.yarn-cache
-            ${{ github.workspace }}/.npm-cache
-          key: js-${{ secrets.GH_CACHE_VERSION }}-${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
-          restore-keys: |
-            js-${{ secrets.GH_CACHE_VERSION }}-${{ runner.os }}-yarn-
       - name: 'setup-js'
         run: |
           npm config set cache ./.npm-cache
           yarn config set cache-folder ./.yarn-cache
-          yarn config set network-timeout 60000
-          yarn
       - name: 'build typescript'
         run: make build-ts
       - name: 'build library'

.github/workflows/js-check.yaml

@@ -88,4 +88,4 @@ jobs:
         if: always() && steps.setup-js.outcome == 'success'
         run: make lint-css
       - name: 'test scripts'
-        run: yarn jest scripts
+        run: yarn vitest scripts

.github/workflows/ll-test-build-deploy.yaml

@@ -8,7 +8,6 @@ on:
       - 'labware-library/**'
       - 'shared-data/labware/**'
       - 'components/**'
-      - 'webpack-config/**'
       - 'package.json'
       - '.github/workflows/ll-test-build-deploy.yaml'
       - '.github/actions/webstack/deploy-to-sandbox/**'
@@ -18,7 +17,6 @@ on:
       - 'labware-library/**'
       - 'shared-data/labware/**'
       - 'components/**'
-      - 'webpack-config/**'
       - 'package.json'
       - '.github/workflows/ll-test-build-deploy.yaml'
     branches:

.github/workflows/pd-test-build-deploy.yaml

@@ -9,7 +9,6 @@ on:
       - 'step-generation/**'
       - 'shared-data/**'
       - 'components/**'
-      - 'webpack-config/**'
       - 'package.json'
       - '.github/workflows/pd-test-build-deploy.yaml'
   push:
@@ -18,7 +17,6 @@ on:
       - 'step-generation/**'
       - 'shared-data/**'
       - 'components/**'
-      - 'webpack-config/**'
       - 'package.json'
       - '.github/workflows/pd-test-build-deploy.yaml'
     branches:
@@ -145,8 +143,6 @@ jobs:
             ${{ github.workspace }}/.yarn-cache
             ${{ github.workspace }}/.npm-cache
           key: js-${{ secrets.GH_CACHE_VERSION }}-${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
-          restore-keys: |
-            js-${{ secrets.GH_CACHE_VERSION }}-${{ runner.os }}-yarn-
       - name: 'setup-js'
         run: |
           npm config set cache ./.npm-cache

.github/workflows/shared-data-test-lint-deploy.yaml

@@ -237,9 +237,7 @@ jobs:
       - name: 'js deps'
         run: |
           npm config set cache ./.npm-cache
-          yarn config set cache-folder ./.yarn-cache
-          yarn config set network-timeout 60000
-          yarn
+          yarn config set cache-folder ./.yarn-cache 
       - name: 'build typescript'
         run: make build-ts
       - name: 'build library'

.github/workflows/step-generation-test.yaml

@@ -7,14 +7,12 @@ on:
     paths:
       - 'step-generation/**'
       - 'shared-data/**'
-      - 'webpack-config/**'
       - 'package.json'
       - '.github/workflows/step-generation-test.yaml'
   push:
     paths:
       - 'step-generation/**'
       - 'shared-data/**'
-      - 'webpack-config/**'
       - 'package.json'
       - '.github/workflows/step-generation-test.yaml'
     branches:

.github/workflows/tag-releases.yaml

@@ -37,6 +37,7 @@ jobs:
           npm config set cache ${{ github.workspace }}/.npm-cache
           yarn config set cache-folder ${{ github.workspace }}/.yarn-cache
           yarn install
+
       - name: 'create release'
         run: |
           node ./scripts/deploy/create-release.js ${{ github.token }} ${{ github.ref_name }} --deploy