ci: update vite config, and packages

package.json

@@ -27,7 +27,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwind-merge": "^1.14.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "vite-plugin-node-polyfills": "^0.15.0",
+    "vite-plugin-optimizer": "^1.4.2"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.4.6",

vite.config.ts

@@ -1,9 +1,11 @@
-import { defineConfig } from "vite"
-import react from "@vitejs/plugin-react"
-import scopeTailwind from "./lib/vite-plugin-scope-tailwind/src/main"
-import { resolve } from "path"
-import svgr from "vite-plugin-svgr"
-import dts from "vite-plugin-dts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+//import scopeTailwind from "./lib/vite-plugin-scope-tailwind/src/main"
+import { resolve } from "path";
+import svgr from "vite-plugin-svgr";
+import dts from "vite-plugin-dts";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+import optimizer from "vite-plugin-optimizer";
 // import css from 'rollup-plugin-css-only'
 
 // https://vitejs.dev/config/
@@ -11,13 +13,22 @@ export default defineConfig({
   plugins: [
     svgr(),
     react(),
-    scopeTailwind({ react: true, classNameTransformers: ["cn"] }),
+    //  scopeTailwind({ react: true, classNameTransformers: ["cn"] }),
     dts({
-      tsconfigPath: "tsconfig.build.json"
+      tsconfigPath: "tsconfig.build.json",
+    }),
+    optimizer({
+      "node-fetch":
+        "const e = undefined; export default e;export {e as Response, e as FormData, e as Blob};",
+    }),
+    nodePolyfills({
+      exclude: ["fs"],
+      globals: { Buffer: true, global: true, process: true },
     }),
     // css({ output: 'styles/globals.css' })
   ],
   resolve: {
+    dedupe: ["@lumeweb/libportal", "@lumeweb/libweb", "@lumeweb/libkernel"],
     // TODO: For some reason aliases are not working....
     // alias: {
     //   '@styles/': resolve(__dirname, './styles'),
@@ -31,10 +42,11 @@ export default defineConfig({
     outDir: "dist",
     emptyOutDir: true,
     sourcemap: true,
+    minify: false,
     lib: {
       entry: resolve(__dirname, "src/main.ts"),
       name: "lume-sdk",
-      fileName: (format) => `lib.${format}.js`
+      fileName: (format) => `lib.${format}.js`,
     },
     rollupOptions: {
       external: [
@@ -43,7 +55,7 @@ export default defineConfig({
         // "framer-motion",
         // "tailwind-merge",
         // "class-variance-authority"
-      ]
-    }
-  }
-})
+      ],
+    },
+  },
+});