add additional build mode (#2904)

*`yarn build:package` will build default component 
* moved some devDependencies to dependencies that are needed for
postinstall script

invokeai/frontend/web/index.d.ts

@@ -39,3 +39,6 @@ declare global {
   }
   /* eslint-enable @typescript-eslint/no-explicit-any */
 }
+
+declare function Invoke(): React.JSX;
+export = Invoke;

invokeai/frontend/web/package.json

@@ -6,6 +6,7 @@
     "prepare": "cd ../../../ && husky install invokeai/frontend/web/.husky",
     "dev": "concurrently \"vite dev\" \"yarn run theme:watch\"",
     "build": "yarn run lint && vite build",
+    "build:package": "vite build --mode=package",
     "preview": "vite preview",
     "lint:madge": "madge --circular src/main.tsx",
     "lint:eslint": "eslint --max-warnings=0 .",
@@ -36,6 +37,7 @@
   },
   "dependencies": {
     "@chakra-ui/anatomy": "^2.1.1",
+    "@chakra-ui/cli": "^2.3.0",
     "@chakra-ui/icons": "^2.0.17",
     "@chakra-ui/react": "^2.5.1",
     "@chakra-ui/styled-system": "^2.6.1",
@@ -52,6 +54,7 @@
     "i18next-http-backend": "^2.1.1",
     "konva": "^8.4.2",
     "lodash": "^4.17.21",
+    "patch-package": "^6.5.1",
     "re-resizable": "^6.9.9",
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",
@@ -72,7 +75,6 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@chakra-ui/cli": "^2.3.0",
     "@fontsource/inter": "^4.5.15",
     "@types/dateformat": "^5.0.0",
     "@types/react": "^18.0.28",
@@ -92,7 +94,6 @@
     "husky": "^8.0.3",
     "lint-staged": "^13.1.2",
     "madge": "^6.0.0",
-    "patch-package": "^6.5.1",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.8.4",
     "rollup-plugin-visualizer": "^5.9.0",

invokeai/frontend/web/vite.config.ts

@@ -1,3 +1,4 @@
+import path from 'path';
 import react from '@vitejs/plugin-react-swc';
 import { visualizer } from 'rollup-plugin-visualizer';
 import { defineConfig, PluginOption } from 'vite';
@@ -46,7 +47,7 @@ export default defineConfig(({ mode }) => {
        * overrides any target specified here.
        */
       // target: 'esnext',
-      chunkSizeWarningLimit: 1500, // we don't really care about chunk size
+      chunkSizeWarningLimit: 1500, // we don't really care about chunk size,
     },
   };
   if (mode == 'development') {
@@ -57,6 +58,26 @@ export default defineConfig(({ mode }) => {
         // sourcemap: true, // this can be enabled if needed, it adds ovwer 15MB to the commit
       },
     };
+  } else if (mode === 'package') {
+    return {
+      ...common,
+      build: {
+        ...common.build,
+        lib: {
+          entry: path.resolve(__dirname, 'src/component.tsx'),
+          name: 'InvokeAI UI',
+          fileName: (format) => `invoke-ai-ui.${format}.js`,
+        },
+        rollupOptions: {
+          external: ['react', 'react-dom'],
+          output: {
+            globals: {
+              react: 'React',
+            },
+          },
+        },
+      },
+    };
   } else {
     return {
       ...common,