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]>

.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

.storybook/main.js

@@ -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,
+ },
 }

CONTRIBUTING.md

@@ -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/
 

DEV_SETUP.md

@@ -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.
 

Makefile

@@ -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-%: 

__mocks__/electron-store.js

@@ -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()
+// })

__mocks__/electron-updater.js

@@ -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(),
  })
 }