feat(ui): add vitest

- Add vitest. - Consolidate vite configs into single file (easier to config everything based on env for testing)
2024-08-30 20:32:17 +00:00 · 2024-02-13 22:51:44 +11:00 · 2024-02-13 22:51:44 +11:00 · 62c3687a9a
commit 62c3687a9a
parent c7f1fad398
6 changed files with 306 additions and 102 deletions
--- a/invokeai/frontend/web/config/common.mts
+++ b/invokeai/frontend/web/config/common.mts
@ -1,12 +0,0 @@
-import react from '@vitejs/plugin-react-swc';
-import { visualizer } from 'rollup-plugin-visualizer';
-import type { PluginOption, UserConfig } from 'vite';
-import eslint from 'vite-plugin-eslint';
-import tsconfigPaths from 'vite-tsconfig-paths';
-
-export const commonPlugins: UserConfig['plugins'] = [
-  react(),
-  eslint(),
-  tsconfigPaths(),
-  visualizer() as unknown as PluginOption,
-];
--- a/invokeai/frontend/web/config/vite.app.config.mts
+++ b/invokeai/frontend/web/config/vite.app.config.mts
@ -1,33 +0,0 @@
-import type { UserConfig } from 'vite';
-
-import { commonPlugins } from './common.mjs';
-
-export const appConfig: UserConfig = {
-  base: './',
-  plugins: [...commonPlugins],
-  build: {
-    chunkSizeWarningLimit: 1500,
-  },
-  server: {
-    // Proxy HTTP requests to the flask server
-    proxy: {
-      // Proxy socket.io to the nodes socketio server
-      '/ws/socket.io': {
-        target: 'ws://127.0.0.1:9090',
-        ws: true,
-      },
-      // Proxy openapi schema definiton
-      '/openapi.json': {
-        target: 'http://127.0.0.1:9090/openapi.json',
-        rewrite: (path) => path.replace(/^\/openapi.json/, ''),
-        changeOrigin: true,
-      },
-      // proxy nodes api
-      '/api/v1': {
-        target: 'http://127.0.0.1:9090/api/v1',
-        rewrite: (path) => path.replace(/^\/api\/v1/, ''),
-        changeOrigin: true,
-      },
-    },
-  },
-};
--- a/invokeai/frontend/web/config/vite.package.config.mts
+++ b/invokeai/frontend/web/config/vite.package.config.mts
@ -1,46 +0,0 @@
-import path from 'path';
-import type { UserConfig } from 'vite';
-import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
-import dts from 'vite-plugin-dts';
-
-import { commonPlugins } from './common.mjs';
-
-export const packageConfig: UserConfig = {
-  base: './',
-  plugins: [
-    ...commonPlugins,
-    dts({
-      insertTypesEntry: true,
-    }),
-    cssInjectedByJsPlugin(),
-  ],
-  build: {
-    cssCodeSplit: true,
-    lib: {
-      entry: path.resolve(__dirname, '../src/index.ts'),
-      name: 'InvokeAIUI',
-      fileName: (format) => `invoke-ai-ui.${format}.js`,
-    },
-    rollupOptions: {
-      external: ['react', 'react-dom', '@emotion/react', '@chakra-ui/react', '@invoke-ai/ui-library'],
-      output: {
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
-          '@emotion/react': 'EmotionReact',
-          '@invoke-ai/ui-library': 'UiLibrary',
-        },
-      },
-    },
-  },
-  resolve: {
-    alias: {
-      app: path.resolve(__dirname, '../src/app'),
-      assets: path.resolve(__dirname, '../src/assets'),
-      common: path.resolve(__dirname, '../src/common'),
-      features: path.resolve(__dirname, '../src/features'),
-      services: path.resolve(__dirname, '../src/services'),
-      theme: path.resolve(__dirname, '../src/theme'),
-    },
-  },
-};
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@ -33,7 +33,9 @@
    "preinstall": "npx only-allow pnpm",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
-    "unimported": "npx unimported"
+    "unimported": "npx unimported",
+    "test": "vitest",
+    "test:no-watch": "vitest --no-watch"
  },
  "madge": {
    "excludeRegExp": [
@ -157,7 +159,8 @@
    "vite-plugin-css-injected-by-js": "^3.3.1",
    "vite-plugin-dts": "^3.7.1",
    "vite-plugin-eslint": "^1.8.1",
-    "vite-tsconfig-paths": "^4.3.1"
+    "vite-tsconfig-paths": "^4.3.1",
+    "vitest": "^1.2.2"
  },
  "pnpm": {
    "patchedDependencies": {
--- a/invokeai/frontend/web/pnpm-lock.yaml
+++ b/invokeai/frontend/web/pnpm-lock.yaml
@ -215,7 +215,7 @@ devDependencies:
    version: 7.6.10(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(vite@5.0.12)
  '@storybook/test':
    specifier: ^7.6.10
-    version: 7.6.10
+    version: 7.6.10(vitest@1.2.2)
  '@storybook/theming':
    specifier: ^7.6.10
    version: 7.6.10(react-dom@18.2.0)(react@18.2.0)
@ -318,6 +318,9 @@ devDependencies:
  vite-tsconfig-paths:
    specifier: ^4.3.1
    version: 4.3.1(typescript@5.3.3)(vite@5.0.12)
+  vitest:
+    specifier: ^1.2.2
+    version: 1.2.2(@types/node@20.11.5)

 packages:

@ -5464,7 +5467,7 @@ packages:
      - supports-color
    dev: true

-  /@storybook/test@7.6.10:
+  /@storybook/test@7.6.10(vitest@1.2.2):
    resolution: {integrity: sha512-dn/T+HcWOBlVh3c74BHurp++BaqBoQgNbSIaXlYDpJoZ+DzNIoEQVsWFYm5gCbtKK27iFd4n52RiQI3f6Vblqw==}
    dependencies:
      '@storybook/client-logger': 7.6.10
@ -5472,7 +5475,7 @@ packages:
      '@storybook/instrumenter': 7.6.10
      '@storybook/preview-api': 7.6.10
      '@testing-library/dom': 9.3.4
-      '@testing-library/jest-dom': 6.2.0
+      '@testing-library/jest-dom': 6.2.0(vitest@1.2.2)
      '@testing-library/user-event': 14.3.0(@testing-library/dom@9.3.4)
      '@types/chai': 4.3.11
      '@vitest/expect': 0.34.7
@ -5652,7 +5655,7 @@ packages:
      pretty-format: 27.5.1
    dev: true

-  /@testing-library/jest-dom@6.2.0:
+  /@testing-library/jest-dom@6.2.0(vitest@1.2.2):
    resolution: {integrity: sha512-+BVQlJ9cmEn5RDMUS8c2+TU6giLvzaHZ8sU/x0Jj7fk+6/46wPdwlgOPcpxS17CjcanBi/3VmGMqVr2rmbUmNw==}
    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
    peerDependencies:
@ -5678,6 +5681,7 @@ packages:
      dom-accessibility-api: 0.6.3
      lodash: 4.17.21
      redent: 3.0.0
+      vitest: 1.2.2(@types/node@20.11.5)
    dev: true

  /@testing-library/user-event@14.3.0(@testing-library/dom@9.3.4):
@ -6490,12 +6494,42 @@ packages:
      chai: 4.4.1
    dev: true

+  /@vitest/expect@1.2.2:
+    resolution: {integrity: sha512-3jpcdPAD7LwHUUiT2pZTj2U82I2Tcgg2oVPvKxhn6mDI2On6tfvPQTjAI4628GUGDZrCm4Zna9iQHm5cEexOAg==}
+    dependencies:
+      '@vitest/spy': 1.2.2
+      '@vitest/utils': 1.2.2
+      chai: 4.4.1
+    dev: true
+
+  /@vitest/runner@1.2.2:
+    resolution: {integrity: sha512-JctG7QZ4LSDXr5CsUweFgcpEvrcxOV1Gft7uHrvkQ+fsAVylmWQvnaAr/HDp3LAH1fztGMQZugIheTWjaGzYIg==}
+    dependencies:
+      '@vitest/utils': 1.2.2
+      p-limit: 5.0.0
+      pathe: 1.1.2
+    dev: true
+
+  /@vitest/snapshot@1.2.2:
+    resolution: {integrity: sha512-SmGY4saEw1+bwE1th6S/cZmPxz/Q4JWsl7LvbQIky2tKE35US4gd0Mjzqfr84/4OD0tikGWaWdMja/nWL5NIPA==}
+    dependencies:
+      magic-string: 0.30.5
+      pathe: 1.1.2
+      pretty-format: 29.7.0
+    dev: true
+
  /@vitest/spy@0.34.7:
    resolution: {integrity: sha512-NMMSzOY2d8L0mcOt4XcliDOS1ISyGlAXuQtERWVOoVHnKwmG+kKhinAiGw3dTtMQWybfa89FG8Ucg9tiC/FhTQ==}
    dependencies:
      tinyspy: 2.2.0
    dev: true

+  /@vitest/spy@1.2.2:
+    resolution: {integrity: sha512-k9Gcahssw8d7X3pSLq3e3XEu/0L78mUkCjivUqCQeXJm9clfXR/Td8+AP+VC1O6fKPIDLcHDTAmBOINVuv6+7g==}
+    dependencies:
+      tinyspy: 2.2.0
+    dev: true
+
  /@vitest/utils@0.34.7:
    resolution: {integrity: sha512-ziAavQLpCYS9sLOorGrFFKmy2gnfiNU0ZJ15TsMz/K92NAPS/rp9K4z6AJQQk5Y8adCy4Iwpxy7pQumQ/psnRg==}
    dependencies:
@ -6504,6 +6538,15 @@ packages:
      pretty-format: 29.7.0
    dev: true

+  /@vitest/utils@1.2.2:
+    resolution: {integrity: sha512-WKITBHLsBHlpjnDQahr+XK6RE7MiAsgrIkr0pGhQ9ygoxBfUeG0lUG5iLlzqjmKSlBv3+j5EGsriBzh+C3Tq9g==}
+    dependencies:
+      diff-sequences: 29.6.3
+      estree-walker: 3.0.3
+      loupe: 2.3.7
+      pretty-format: 29.7.0
+    dev: true
+
  /@volar/language-core@1.11.1:
    resolution: {integrity: sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==}
    dependencies:
@ -7184,6 +7227,11 @@ packages:
    engines: {node: '>=0.4.0'}
    dev: true

+  /acorn-walk@8.3.2:
+    resolution: {integrity: sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==}
+    engines: {node: '>=0.4.0'}
+    dev: true
+
  /acorn@7.4.1:
    resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
    engines: {node: '>=0.4.0'}
@ -7661,6 +7709,11 @@ packages:
    engines: {node: '>= 0.8'}
    dev: true

+  /cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+    dev: true
+
  /call-bind@1.0.5:
    resolution: {integrity: sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==}
    dependencies:
@ -9173,6 +9226,12 @@ packages:
    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
    dev: true

+  /estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+    dependencies:
+      '@types/estree': 1.0.5
+    dev: true
+
  /esutils@2.0.3:
    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
    engines: {node: '>=0.10.0'}
@ -10547,6 +10606,10 @@ packages:
    hasBin: true
    dev: true

+  /jsonc-parser@3.2.1:
+    resolution: {integrity: sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==}
+    dev: true
+
  /jsondiffpatch@0.6.0:
    resolution: {integrity: sha512-3QItJOXp2AP1uv7waBkao5nCvhEv+QmJAd38Ybq7wNI74Q+BBmnLn4EDKz6yI9xGAIQoUF87qHt+kc1IVxB4zQ==}
    engines: {node: ^18.0.0 || >=20.0.0}
@ -10648,6 +10711,14 @@ packages:
    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
    dev: true

+  /local-pkg@0.5.0:
+    resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
+    engines: {node: '>=14'}
+    dependencies:
+      mlly: 1.5.0
+      pkg-types: 1.0.3
+    dev: true
+
  /locate-path@3.0.0:
    resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
    engines: {node: '>=6'}
@ -10986,6 +11057,15 @@ packages:
    hasBin: true
    dev: true

+  /mlly@1.5.0:
+    resolution: {integrity: sha512-NPVQvAY1xr1QoVeG0cy8yUYC7FQcOx6evl/RjT1wL5FvzPnzOysoqB/jmx/DhssT2dYa8nxECLAaFI/+gVLhDQ==}
+    dependencies:
+      acorn: 8.11.3
+      pathe: 1.1.2
+      pkg-types: 1.0.3
+      ufo: 1.3.2
+    dev: true
+
  /module-definition@3.4.0:
    resolution: {integrity: sha512-XxJ88R1v458pifaSkPNLUTdSPNVGMP2SXVncVmApGO+gAfrLANiYe6JofymCzVceGOMwQE2xogxBSc8uB7XegA==}
    engines: {node: '>=6.0'}
@ -11380,6 +11460,13 @@ packages:
      yocto-queue: 0.1.0
    dev: true

+  /p-limit@5.0.0:
+    resolution: {integrity: sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==}
+    engines: {node: '>=18'}
+    dependencies:
+      yocto-queue: 1.0.0
+    dev: true
+
  /p-locate@3.0.0:
    resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==}
    engines: {node: '>=6'}
@ -11550,6 +11637,14 @@ packages:
      find-up: 5.0.0
    dev: true

+  /pkg-types@1.0.3:
+    resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
+    dependencies:
+      jsonc-parser: 3.2.1
+      mlly: 1.5.0
+      pathe: 1.1.2
+    dev: true
+
  /pluralize@8.0.0:
    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
    engines: {node: '>=4'}
@ -12850,6 +12945,10 @@ packages:
      object-inspect: 1.13.1
    dev: true

+  /siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+    dev: true
+
  /signal-exit@3.0.7:
    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
    dev: true
@ -12968,6 +13067,10 @@ packages:
      stackframe: 1.3.4
    dev: false

+  /stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+    dev: true
+
  /stackframe@1.3.4:
    resolution: {integrity: sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==}
    dev: false
@ -12992,6 +13095,10 @@ packages:
    engines: {node: '>= 0.8'}
    dev: true

+  /std-env@3.7.0:
+    resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
+    dev: true
+
  /stop-iteration-iterator@1.0.0:
    resolution: {integrity: sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==}
    engines: {node: '>= 0.4'}
@ -13161,6 +13268,12 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  /strip-literal@1.3.0:
+    resolution: {integrity: sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==}
+    dependencies:
+      acorn: 8.11.3
+    dev: true
+
  /stylis@4.2.0:
    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
    dev: false
@ -13311,6 +13424,15 @@ packages:
  /tiny-invariant@1.3.1:
    resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==}

+  /tinybench@2.6.0:
+    resolution: {integrity: sha512-N8hW3PG/3aOoZAN5V/NSAEDz0ZixDSSt5b/a05iqtpgfLWMSVuCo7w0k2vVvEjdrIoeGqZzweX2WlyioNIHchA==}
+    dev: true
+
+  /tinypool@0.8.2:
+    resolution: {integrity: sha512-SUszKYe5wgsxnNOVlBYO6IC+8VGWdVGZWAqUxp3UErNBtptZvWbwyUOyzNL59zigz2rCA92QiL3wvG+JDSdJdQ==}
+    engines: {node: '>=14.0.0'}
+    dev: true
+
  /tinyspy@2.2.0:
    resolution: {integrity: sha512-d2eda04AN/cPOR89F7Xv5bK/jrQEhmcLFe6HFldoeO9AJtps+fqEnh486vnT/8y4bw38pSyxDcTCAq+Ks2aJTg==}
    engines: {node: '>=14.0.0'}
@ -13828,6 +13950,27 @@ packages:
    engines: {node: '>= 0.8'}
    dev: true

+  /vite-node@1.2.2(@types/node@20.11.5):
+    resolution: {integrity: sha512-1as4rDTgVWJO3n1uHmUYqq7nsFgINQ9u+mRcXpjeOMJUmviqNKjcZB7UfRZrlM7MjYXMKpuWp5oGkjaFLnjawg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    dependencies:
+      cac: 6.7.14
+      debug: 4.3.4
+      pathe: 1.1.2
+      picocolors: 1.0.0
+      vite: 5.0.12(@types/node@20.11.5)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
  /vite-plugin-css-injected-by-js@3.3.1(vite@5.0.12):
    resolution: {integrity: sha512-PjM/X45DR3/V1K1fTRs8HtZHEQ55kIfdrn+dzaqNBFrOYO073SeSNCxp4j7gSYhV9NffVHaEnOL4myoko0ePAg==}
    peerDependencies:
@ -13926,6 +14069,63 @@ packages:
      fsevents: 2.3.3
    dev: true

+  /vitest@1.2.2(@types/node@20.11.5):
+    resolution: {integrity: sha512-d5Ouvrnms3GD9USIK36KG8OZ5bEvKEkITFtnGv56HFaSlbItJuYr7hv2Lkn903+AvRAgSixiamozUVfORUekjw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/node': ^18.0.0 || >=20.0.0
+      '@vitest/browser': ^1.0.0
+      '@vitest/ui': ^1.0.0
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+    dependencies:
+      '@types/node': 20.11.5
+      '@vitest/expect': 1.2.2
+      '@vitest/runner': 1.2.2
+      '@vitest/snapshot': 1.2.2
+      '@vitest/spy': 1.2.2
+      '@vitest/utils': 1.2.2
+      acorn-walk: 8.3.2
+      cac: 6.7.14
+      chai: 4.4.1
+      debug: 4.3.4
+      execa: 8.0.1
+      local-pkg: 0.5.0
+      magic-string: 0.30.5
+      pathe: 1.1.2
+      picocolors: 1.0.0
+      std-env: 3.7.0
+      strip-literal: 1.3.0
+      tinybench: 2.6.0
+      tinypool: 0.8.2
+      vite: 5.0.12(@types/node@20.11.5)
+      vite-node: 1.2.2(@types/node@20.11.5)
+      why-is-node-running: 2.2.2
+    transitivePeerDependencies:
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
  /void-elements@3.1.0:
    resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
    engines: {node: '>=0.10.0'}
@ -14049,6 +14249,15 @@ packages:
      isexe: 2.0.0
    dev: true

+  /why-is-node-running@2.2.2:
+    resolution: {integrity: sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==}
+    engines: {node: '>=8'}
+    hasBin: true
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+    dev: true
+
  /wordwrap@1.0.0:
    resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
    dev: true
@ -14189,6 +14398,11 @@ packages:
    engines: {node: '>=10'}
    dev: true

+  /yocto-queue@1.0.0:
+    resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
+    engines: {node: '>=12.20'}
+    dev: true
+
  /z-schema@5.0.5:
    resolution: {integrity: sha512-D7eujBWkLa3p2sIpJA0d1pr7es+a7m0vFAnZLlCEKq/Ij2k0MLi9Br2UPxoxdYystm5K1yeBGzub0FlYUEWj2Q==}
    engines: {node: '>=8.0.0'}
--- a/invokeai/frontend/web/vite.config.mts
+++ b/invokeai/frontend/web/vite.config.mts
@ -1,12 +1,90 @@
+/// <reference types="vitest" />
+import react from '@vitejs/plugin-react-swc';
+import path from 'path';
+import { visualizer } from 'rollup-plugin-visualizer';
+import type { PluginOption } from 'vite';
 import { defineConfig } from 'vite';
-
-import { appConfig } from './config/vite.app.config.mjs';
-import { packageConfig } from './config/vite.package.config.mjs';
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+import dts from 'vite-plugin-dts';
+import eslint from 'vite-plugin-eslint';
+import tsconfigPaths from 'vite-tsconfig-paths';

 export default defineConfig(({ mode }) => {
  if (mode === 'package') {
-    return packageConfig;
+    return {
+      base: './',
+      plugins: [
+        react(),
+        eslint(),
+        tsconfigPaths(),
+        visualizer() as unknown as PluginOption,
+        dts({
+          insertTypesEntry: true,
+        }),
+        cssInjectedByJsPlugin(),
+      ],
+      build: {
+        cssCodeSplit: true,
+        lib: {
+          entry: path.resolve(__dirname, '../src/index.ts'),
+          name: 'InvokeAIUI',
+          fileName: (format) => `invoke-ai-ui.${format}.js`,
+        },
+        rollupOptions: {
+          external: ['react', 'react-dom', '@emotion/react', '@chakra-ui/react', '@invoke-ai/ui-library'],
+          output: {
+            globals: {
+              react: 'React',
+              'react-dom': 'ReactDOM',
+              '@emotion/react': 'EmotionReact',
+              '@invoke-ai/ui-library': 'UiLibrary',
+            },
+          },
+        },
+      },
+      resolve: {
+        alias: {
+          app: path.resolve(__dirname, '../src/app'),
+          assets: path.resolve(__dirname, '../src/assets'),
+          common: path.resolve(__dirname, '../src/common'),
+          features: path.resolve(__dirname, '../src/features'),
+          services: path.resolve(__dirname, '../src/services'),
+          theme: path.resolve(__dirname, '../src/theme'),
+        },
+      },
+    };
  }

-  return appConfig;
+  return {
+    base: './',
+    plugins: [react(), mode !== 'test' && eslint(), tsconfigPaths(), visualizer() as unknown as PluginOption],
+    build: {
+      chunkSizeWarningLimit: 1500,
+    },
+    server: {
+      // Proxy HTTP requests to the flask server
+      proxy: {
+        // Proxy socket.io to the nodes socketio server
+        '/ws/socket.io': {
+          target: 'ws://127.0.0.1:9090',
+          ws: true,
+        },
+        // Proxy openapi schema definiton
+        '/openapi.json': {
+          target: 'http://127.0.0.1:9090/openapi.json',
+          rewrite: (path) => path.replace(/^\/openapi.json/, ''),
+          changeOrigin: true,
+        },
+        // proxy nodes api
+        '/api/v1': {
+          target: 'http://127.0.0.1:9090/api/v1',
+          rewrite: (path) => path.replace(/^\/api\/v1/, ''),
+          changeOrigin: true,
+        },
+      },
+    },
+    test: {
+      //
+    },
+  };
 });