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

.gitignore

@@ -159,3 +159,4 @@ opentrons-robot-app.tar.gz
 
 # asdf versions file
 .tool-versions
+mock_dir

.npmrc

@@ -1,20 +1,21 @@
-'use strict'
-
-const { baseConfig } = require('@opentrons/webpack-config')
-
 module.exports = {
-  webpackFinal: config => ({
-    ...config,
-    module: { ...config.module, rules: baseConfig.module.rules },
-    plugins: [...config.plugins, ...baseConfig.plugins],
-  }),
   stories: [
     '../components/**/*.stories.@(js|jsx|ts|tsx)',
     '../app/**/*.stories.@(js|jsx|ts|tsx)',
   ],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     'storybook-addon-pseudo-states',
   ],
+
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
+  },
 }

.storybook/main.js

@@ -171,7 +171,7 @@ See [DEV_SETUP.md](./DEV_SETUP.md) for our recommended development setup guides
 We use:
 
 - [pytest][] to test Python
-- [Jest][jest] to test JavaScript
+- [Vitest][vitest] to test JavaScript
   - To run tests in watch mode, you should also install [watchman][]
 - [Cypress.io][cypress] for end to end UI testing
 
@@ -199,7 +199,7 @@ make test-js watch=true
 make test-js cover=false
 
 # update snapshot tests
-# https://jestjs.io/docs/en/snapshot-testing
+# https://vitest.dev/guide/snapshot.html
 make test-js updateSnapshot=true
 ```
 
@@ -217,7 +217,7 @@ make check-js
 ```
 
 [pytest]: https://docs.pytest.org/en/latest/
-[jest]: https://jestjs.io/
+[vitest]: https://vitest.dev/
 [watchman]: https://facebook.github.io/watchman/
 [cypress]: https://www.cypress.io/
 

.storybook/preview.js renamed to .storybook/preview.jsx

@@ -148,7 +148,7 @@ eval "$(pyenv init -)"
 # ...
 ```
 
-#### 3. Install `jpeg` if on ARM Mac (M1)
+#### 3. Install `jpeg` if on ARM Mac (M1/M2/M3)
 
 `/hardware` depends on the Python library Pillow. On ARM Macs, `pip` will build Pillow from source, which requires [jpeg](https://formulae.brew.sh/formula/jpeg) to be installed.
 

CONTRIBUTING.md

@@ -47,7 +47,7 @@ endif
 
 # run at usage (=), not on makefile parse (:=)
 # todo(mm, 2021-03-17): Deduplicate with scripts/python.mk.
-usb_host=$(shell yarn run -s discovery find -i 169.254)
+usb_host=$(shell yarn -s discovery find -i 169.254)
 
 # install all project dependencies
 .PHONY: setup
@@ -62,6 +62,7 @@ setup-py-toolchain:
 
 # front-end dependecies handled by yarn
 .PHONY: setup-js
+setup-js:
 setup-js: setup-py-toolchain
 	yarn config set network-timeout 60000
 	yarn
@@ -263,7 +264,7 @@ circular-dependencies-js:
 
 .PHONY: test-js-internal
 test-js-internal:
-	yarn jest $(tests) $(test_opts) $(cov_opts)
+	yarn vitest $(tests) $(test_opts) $(cov_opts)
 
 .PHONY: test-js-%
 test-js-%: 

DEV_SETUP.md

@@ -1,6 +1,27 @@
 // mock electron-store
 'use strict'
+import { vi } from 'vitest'
+import { DEFAULTS_V12, migrate } from '../app-shell-odd/src/config/migrate'
 
-module.exports = jest.createMockFromModule(
-  '../app-shell/node_modules/electron-store'
-)
+// will by default mock the config dir. if you need other behaavior you can
+// override this mock (see app-shell/src/__tests__/discovery.test.ts for an example)
+const Store = vi.fn(function () {
+  this.store = vi.fn(() => {
+    return {}
+  })
+  this.get = vi.fn(property => {
+    return {}
+  })
+  this.onDidChange = vi.fn()
+})
+
+// eslint-disable-next-line import/no-default-export
+export default Store
+
+// const Store = vi.fn(function () {
+//   this.store = vi.fn(() => migrate(DEFAULTS_V12))
+//   this.get = vi.fn(property => {
+//     return this.store()[property]
+//   })
+//   this.onDidChange = vi.fn()
+// })

Makefile

@@ -1,6 +1,6 @@
 // mock electron-updater
 'use strict'
-
+import { vi } from 'vitest'
 const EventEmitter = require('events')
 const autoUpdater = new EventEmitter()
 
@@ -13,12 +13,12 @@ module.exports.__mockReset = () => {
     currentVersion: { version: '0.0.0-mock' },
     channel: null,
 
-    checkForUpdates: jest.fn(),
-    checkForUpdatesAndNotify: jest.fn(),
-    downloadUpdate: jest.fn(),
-    getFeedURL: jest.fn(),
-    setFeedURL: jest.fn(),
-    quitAndInstall: jest.fn(),
+    checkForUpdates: vi.fn(),
+    checkForUpdatesAndNotify: vi.fn(),
+    downloadUpdate: vi.fn(),
+    getFeedURL: vi.fn(),
+    setFeedURL: vi.fn(),
+    quitAndInstall: vi.fn(),
   })
 }