Merge branch 'protocol_designer-migrate-webpack-to-vite' of github.co…

…m:Opentrons/opentrons into protocol_designer-migrate-webpack-to-vite

.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'],

.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
+  }
 }

app-shell-odd/Makefile

@@ -56,7 +56,7 @@ clean:
 .PHONY: lib
 lib: export NODE_ENV := production
 lib:
-	OPENTRONS_PROJECT=$(OPENTRONS_PROJECT) NODE_OPTIONS=--openssl-legacy-provider webpack --profile
+	OPENTRONS_PROJECT=$(OPENTRONS_PROJECT) vite build
 
 .PHONY: deps
 deps:
@@ -83,7 +83,7 @@ push-ot3: dist-ot3
 .PHONY: dev
 dev: export NODE_ENV := development
 dev:
-	NODE_OPTIONS=--openssl-legacy-provider webpack
+	vite build
 	$(electron)
 
 .PHONY: test

app-shell-odd/vite.config.ts

@@ -0,0 +1,88 @@
+import { versionForProject } from '../scripts/git-version'
+import pkg from './package.json'
+import path from 'path'
+import { UserConfig, defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import postCssImport from 'postcss-import'
+import postCssApply from 'postcss-apply'
+import postColorModFunction from 'postcss-color-mod-function'
+import postCssPresetEnv from 'postcss-preset-env'
+import lostCss from 'lost'
+
+export default defineConfig(
+  async (): Promise<UserConfig> => {
+    const project = process.env.OPENTRONS_PROJECT ?? 'robot-stack'
+    const version = await versionForProject(project)
+    return {
+      publicDir: false,
+      build: {
+        // Relative to the root
+        ssr: 'src/main.ts',
+        outDir: 'lib',
+        commonjsOptions: {
+          transformMixedEsModules: true,
+          esmExternals: true,
+        },
+        lib: {
+          entry: {
+            main: 'src/main.ts',
+            preload: 'src/preload.ts',
+          },
+
+          formats: ['cjs'],
+        },
+      },
+      plugins: [
+        react({
+          include: '**/*.tsx',
+          babel: {
+            // Use babel.config.js files
+            configFile: true,
+          },
+        }),
+      ],
+      optimizeDeps: {
+        esbuildOptions: {
+          target: 'CommonJs',
+        },
+      },
+      css: {
+        postcss: {
+          plugins: [
+            postCssImport({ root: 'src/' }),
+            postCssApply(),
+            postColorModFunction(),
+            postCssPresetEnv({ stage: 0 }),
+            lostCss(),
+          ],
+        },
+      },
+      define: {
+        'process.env': process.env,
+        global: 'globalThis',
+        _PKG_VERSION_: JSON.stringify(version),
+        _PKG_PRODUCT_NAME_: JSON.stringify(pkg.productName),
+        _PKG_BUGS_URL_: JSON.stringify(pkg.bugs.url),
+        _OPENTRONS_PROJECT_: JSON.stringify(project),
+      },
+      resolve: {
+        alias: {
+          '@opentrons/components/styles': path.resolve(
+            '../components/src/index.module.css'
+          ),
+          '@opentrons/components': path.resolve('../components/src/index.ts'),
+          '@opentrons/shared-data': path.resolve('../shared-data/js/index.ts'),
+          '@opentrons/step-generation': path.resolve(
+            '../step-generation/src/index.ts'
+          ),
+          '@opentrons/discovery-client': path.resolve(
+            '../discovery-client/src/index.ts'
+          ),
+          '@opentrons/usb-bridge/node-client': path.resolve(
+            '../usb-bridge/node-client/src/index.ts'
+          ),
+        },
+      },
+    }
+  }
+)

app-shell/Makefile

@@ -182,9 +182,7 @@ dev-app-update.yml:
 dev: export NODE_ENV := development
 dev: export OPENTRONS_PROJECT := $(OPENTRONS_PROJECT)
 dev: clean-dev-autoupdate ./dev-app-update.yml
-	echo STARTING VITE!
 	vite build
-	echo STARTING ELECTRON!
 	$(electron)
 
 .PHONY: test

app-shell/src/main.ts

@@ -3,10 +3,7 @@ import { app, ipcMain } from 'electron'
 import electronDebug from 'electron-debug'
 import dns from 'dns'
 import contextMenu from 'electron-context-menu'
-import devtools, {
-  REACT_DEVELOPER_TOOLS,
-  REDUX_DEVTOOLS,
-} from 'electron-devtools-installer'
+import * as electronDevtoolsInstaller from 'electron-devtools-installer'
 import { webusb } from 'usb'
 
 import { createUi, registerReloadUi } from './ui'
@@ -138,18 +135,29 @@ function createRendererLogger(): Logger {
 }
 
 function installDevtools(): Promise<void | Logger> {
-  const extensions = [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS]
-  const install = devtools
+  const extensions = [
+    electronDevtoolsInstaller.REACT_DEVELOPER_TOOLS,
+    electronDevtoolsInstaller.REDUX_DEVTOOLS,
+  ]
+  // @ts-expect-error the types for electron-devtools-installer are not correct
+  // when importing the default export via commmon JS. the installer is actually nested in
+  // another default object
+  const install = electronDevtoolsInstaller.default?.default
   const forceReinstall = config.reinstallDevtools
 
   log.debug('Installing devtools')
 
-  return install(extensions, forceReinstall)
-    .then(() => log.debug('Devtools extensions installed'))
-    .catch((error: unknown) => {
-      log.warn('Failed to install devtools extensions', {
-        forceReinstall,
-        error,
+  if (typeof install === 'function') {
+    return install(extensions, forceReinstall)
+      .then(() => log.debug('Devtools extensions installed'))
+      .catch((error: unknown) => {
+        log.warn('Failed to install devtools extensions', {
+          forceReinstall,
+          error,
+        })
       })
-    })
+  } else {
+    log.warn('could not resolve electron dev tools installer')
+    return Promise.reject('could not resolve electron dev tools installer')
+  }
 }