migrate labware designer and discovery client

Opentrons · Feb 16, 2024 · 69553ce · 69553ce
1 parent 9021ba9
commit 69553ce
Show file tree

Hide file tree

Showing 6 changed files with 174 additions and 5 deletions.
diff --git a/discovery-client/Makefile b/discovery-client/Makefile
@@ -26,7 +26,7 @@ lib: export NODE_ENV := production
 lib: $(main_out) $(cli_out)
 
 $(main_out) $(cli_out):
-	pnpm webpack
+	pnpm vite build
 
 .PHONY: test
 test:

diff --git a/discovery-client/vite.config.ts b/discovery-client/vite.config.ts
@@ -0,0 +1,79 @@
+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/index.ts',
+        outDir: 'lib',
+        commonjsOptions: {
+          transformMixedEsModules: true,
+          esmExternals: true,
+        },
+      },
+      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_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'
+          ),
+        },
+      },
+    }
+  }
+)
diff --git a/labware-designer/babel.config.cjs b/labware-designer/babel.config.cjs
@@ -0,0 +1,21 @@
+'use strict'
+
+module.exports = {
+  env: {
+    // Note(isk: 3/2/20): Must have babel-plugin-styled-components in each env,
+    // see here for further details: s https://styled-components.com/docs/tooling#babel-plugin
+    production: {
+      plugins: ['babel-plugin-styled-components', 'babel-plugin-unassert'],
+    },
+    development: {
+      plugins: ['babel-plugin-styled-components'],
+    },
+    test: {
+      plugins: [
+        // NOTE(mc, 2020-05-08): disable ssr, displayName to fix toHaveStyleRule
+        // https://github.com/styled-components/jest-styled-components/issues/294
+        ['babel-plugin-styled-components', { ssr: false, displayName: false }],
+      ],
+    },
+  },
+}
diff --git a/labware-designer/index.html b/labware-designer/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name='viewport' content='width=device-width,initial-scale=1'>
+
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i" rel="stylesheet">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="src/index.tsx"></script>
+  </body>
+</html>
diff --git a/labware-designer/src/organisms/CreateLabwareSandbox/index.tsx b/labware-designer/src/organisms/CreateLabwareSandbox/index.tsx
@@ -22,13 +22,14 @@ import {
   createIrregularLabware,
   createRegularLabware,
   getPositionFromSlotId,
+  ot2StandardDeckV4,
 } from '@opentrons/shared-data'
-import standardDeckDef from '@opentrons/shared-data/deck/definitions/4/ot2_standard.json'
+
 import { IRREGULAR_OPTIONS, REGULAR_OPTIONS } from './fixtures'
 
 import type { DeckDefinition, LabwareDefinition2 } from '@opentrons/shared-data'
 
-const SLOT_OPTIONS = standardDeckDef.locations.addressableAreas.map(
+const SLOT_OPTIONS = ot2StandardDeckV4.locations.addressableAreas.map(
   slot => slot.id
 )
 const DEFAULT_LABWARE_SLOT = SLOT_OPTIONS[0]
@@ -181,13 +182,13 @@ export function CreateLabwareSandbox(): JSX.Element {
           <Flex maxHeight="84vh">
             {viewOnDeck ? (
               <RobotWorkSpace
-                deckDef={(standardDeckDef as unknown) as DeckDefinition}
+                deckDef={(ot2StandardDeckV4 as unknown) as DeckDefinition}
                 showDeckLayers
               >
                 {() => {
                   const lwPosition = getPositionFromSlotId(
                     labwareSlot,
-                    (standardDeckDef as unknown) as DeckDefinition
+                    (ot2StandardDeckV4 as unknown) as DeckDefinition
                   )
                   return (
                     <g

diff --git a/labware-designer/vite.config.ts b/labware-designer/vite.config.ts
@@ -0,0 +1,52 @@
+import path from 'path'
+import { 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({
+  build: {
+    // Relative to the root
+    outDir: 'dist',
+  },
+  plugins: [
+    react({
+      include: '**/*.tsx',
+      babel: {
+        // Use babel.config.js files
+        configFile: true,
+      },
+    }),
+  ],
+  optimizeDeps: {
+    esbuildOptions: {
+      target: 'es2020',
+    },
+  },
+  css: {
+    postcss: {
+      plugins: [
+        postCssImport({ root: 'src/' }),
+        postCssApply(),
+        postColorModFunction(),
+        postCssPresetEnv({ stage: 0 }),
+        lostCss(),
+      ],
+    },
+  },
+  define: {
+    'process.env': process.env,
+    global: 'globalThis',
+  },
+  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'),
+    },
+  },
+})