From 444307425436fe698106f4a62624c6ef3048608e Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 26 Jul 2024 23:57:18 -0400 Subject: [PATCH 1/3] docs(labware-library): remove description about webpack remove the description about webpack since we switched from webpack to vite close AUTH- --- .storybook/main.ts | 22 ++++++++++++++ components/vite.config.mts | 59 ++++++++++++++++++++++++++++++++++++++ labware-library/Makefile | 1 - labware-library/README.md | 9 +++--- 4 files changed, 85 insertions(+), 6 deletions(-) create mode 100644 .storybook/main.ts create mode 100644 components/vite.config.mts diff --git a/.storybook/main.ts b/.storybook/main.ts new file mode 100644 index 00000000000..985486d5d4e --- /dev/null +++ b/.storybook/main.ts @@ -0,0 +1,22 @@ +module.exports = { + stories: [ + '../components/**/*.stories.@(js|jsx|ts|tsx)', + '../app/**/*.stories.@(js|jsx|ts|tsx)', + '../opentrons-ai-client/**/*.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, + }, +} diff --git a/components/vite.config.mts b/components/vite.config.mts new file mode 100644 index 00000000000..757aa06d443 --- /dev/null +++ b/components/vite.config.mts @@ -0,0 +1,59 @@ +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 + ssr: 'src/index.ts', + outDir: 'lib', + // do not delete the outdir, typescript types might live there and we dont want to delete them + emptyOutDir: false, + commonjsOptions: { + transformMixedEsModules: true, + esmExternals: true, + }, + }, + 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/shared-data': path.resolve('../shared-data/js/index.ts'), + '@opentrons/components/styles': path.resolve( + '../components/src/index.module.css' + ), + }, + }, +}) diff --git a/labware-library/Makefile b/labware-library/Makefile index 92fe4785cda..2ccca5f45a8 100644 --- a/labware-library/Makefile +++ b/labware-library/Makefile @@ -30,7 +30,6 @@ dist: # development assets server .PHONY: dev dev: export NODE_ENV := development -dev: export NODE_OPTIONS := --openssl-legacy-provider dev: vite serve --host=:: diff --git a/labware-library/README.md b/labware-library/README.md index bae2741a422..06982723d7d 100644 --- a/labware-library/README.md +++ b/labware-library/README.md @@ -43,7 +43,7 @@ make -C labware-library all make -C labware-library clean dist # start a hot-reloading development server -# (optional) specify port with PORT; default is 8080 +# (optional) specify port with PORT; default is 5173 make -C labware-library dev make -C labware-library dev PORT=8081 @@ -53,11 +53,10 @@ make -C labware-library serve make -C labware-library serve PORT=9091 ``` -### webpack setup +### vite setup -This project (along with our other front-end projects) uses [webpack][] to generate artifacts. +This project (along with our other front-end projects) uses [vite][] to generate artifacts. -- Extends our [base webpack config][base-config] - Entry point is [`labware-library/src/index.tsx`][entry] - [Handlebars][] HTML template is [`labware-library/src/index.hbs`][template] - Post-build, the site is crawled and prerendered with [react-snap][] @@ -68,10 +67,10 @@ This project (along with our other front-end projects) uses [webpack][] to gener [handlebars]: https://handlebarsjs.com/ [css modules]: https://github.com/css-modules/css-modules [react-snap]: https://github.com/stereobooster/react-snap -[base-config]: ../webpack-config [entry]: ./src/index.js [template]: ./src/index.hbs [global-style]: ./src/global.module.css +[vite]: https://vitejs.dev/ ### environment variables From 134c85d9835f3505d2b8a02960f60727b7c5d22d Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 26 Jul 2024 23:59:40 -0400 Subject: [PATCH 2/3] remove unrelated ts file --- .storybook/main.ts | 22 ---------------------- 1 file changed, 22 deletions(-) delete mode 100644 .storybook/main.ts diff --git a/.storybook/main.ts b/.storybook/main.ts deleted file mode 100644 index 985486d5d4e..00000000000 --- a/.storybook/main.ts +++ /dev/null @@ -1,22 +0,0 @@ -module.exports = { - stories: [ - '../components/**/*.stories.@(js|jsx|ts|tsx)', - '../app/**/*.stories.@(js|jsx|ts|tsx)', - '../opentrons-ai-client/**/*.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, - }, -} From 582a28eb85927132a2cc0d2249211443b1344ad6 Mon Sep 17 00:00:00 2001 From: koji Date: Sat, 27 Jul 2024 00:00:46 -0400 Subject: [PATCH 3/3] remove unrelated ts file --- components/vite.config.mts | 59 -------------------------------------- 1 file changed, 59 deletions(-) delete mode 100644 components/vite.config.mts diff --git a/components/vite.config.mts b/components/vite.config.mts deleted file mode 100644 index 757aa06d443..00000000000 --- a/components/vite.config.mts +++ /dev/null @@ -1,59 +0,0 @@ -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 - ssr: 'src/index.ts', - outDir: 'lib', - // do not delete the outdir, typescript types might live there and we dont want to delete them - emptyOutDir: false, - commonjsOptions: { - transformMixedEsModules: true, - esmExternals: true, - }, - }, - 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/shared-data': path.resolve('../shared-data/js/index.ts'), - '@opentrons/components/styles': path.resolve( - '../components/src/index.module.css' - ), - }, - }, -})