Update package

Improve build and update package version with Vite

Author: kubit-ui

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.17.0",
+  "version": "1.17.1",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
   "author": {
     "name": "Kubit",
@@ -16,9 +16,11 @@
     }
   },
   "private": false,
-  "main": "./dist/cjs/index.js",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/esm/index.d.ts",
+  "main": "dist/kubit-react-components.cjs.js",
+  "module": "dist/kubit-react-components.es.js",
+  "unpkg": "dist/kubit-react-components.umd.js",
+  "jsdelivr": "dist/kubit-react-components.umd.js",
+  "types": "dist/types/index.d.ts",
   "engines": {
     "node": ">=20.x",
     "npm": ">=7.0.0"
@@ -60,7 +62,7 @@
     "storybook": "storybook dev -p 6006",
     "predist": "echo predist",
     "postdist": "cpy 'src/**/*.(svg|ttf|eot|css|png|jpg|otf)' dist/esm --no-overwrite --parents && cpy 'src/**/*.(svg|ttf|eot|css|png|jpg|otf)' dist/cjs --no-overwrite --parents",
-    "dist": "rm -rf dist && yarn dist:cjs && yarn dist:esm",
+    "dist": "rm -rf dist && yarn dist:cjs && yarn dist:esm && yarn run vite build --config vite.config.mts",
     "dist:watch": "rm -rf dist && yarn dist:cjs:watch & yarn dist:esm:watch",
     "dist:cjs": "tsc -p tsconfig-cjs.json && tsc-alias -p tsconfig-cjs.json",
     "dist:cjs:watch": "tsc -p tsconfig-cjs.json --watch & tsc-alias -p tsconfig-cjs.json --watch",
@@ -140,6 +142,7 @@
     "eslint-plugin-react-refresh": "^0.4.16",
     "eslint-plugin-storybook": "^0.11.1",
     "eslint-plugin-unused-imports": "^4.1.4",
+    "glob": "^11.0.3",
     "globals": "^15.13.0",
     "gts": "^6.0.2",
     "html-validate": "^8.27.0",
@@ -153,13 +156,16 @@
     "json-beautify": "^1.1.1",
     "prettier": "^3.4.2",
     "react-transition-group": "^4.4.5",
+    "rollup-plugin-terser": "^7.0.2",
     "sort-imports": "^1.1.0",
     "storybook": "^8.4.7",
     "ts-jest": "^29.2.5",
     "tsc-alias": "1.8.10",
     "typedoc": "^0.27.3",
     "typescript": "^5.7.2",
-    "vite": "^6.0.3",
+    "vite": "^7.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-node-polyfills": "^0.23.0",
     "vite-tsconfig-paths": "^4.3.2",
     "yarn-deduplicate": "^6.0.2"
   },

tsconfig.build.json

@@ -0,0 +1,36 @@
+{
+  "exclude": [
+    "src/**/*.test.*",
+    "src/**/__mocks__",
+    "src/**/__tests__",
+    "src/**/*.mock.*",
+    "dist",
+    "vitest.config.ts",
+    "vitest.setup.ts",
+    "vite.config.mts"
+  ],
+  "compilerOptions": {
+    "target": "es2020",
+    "lib": ["ES2015", "ES2016", "ES2021", "DOM"],
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "module": "ESNext",
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["./*"],
+      "fixtures/*": ["./__fixtures__/*"]
+    },
+    "typeRoots": ["src/types", "node_modules/@types"],
+    "types": ["jest"],
+    "resolveJsonModule": true,
+    "checkJs": false,
+    "noEmit": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "plugins": [],
+    "skipLibCheck": true
+  }
+}

vite.config.mts

@@ -0,0 +1,66 @@
+import react from '@vitejs/plugin-react';
+
+import fs from 'fs';
+import path from 'path';
+import { terser } from 'rollup-plugin-terser';
+import { defineConfig } from 'vite';
+
+const copyRecursiveCSS = (srcDir: string, destDir: string) => {
+  fs.mkdirSync(destDir, { recursive: true });
+
+  for (const entry of fs.readdirSync(srcDir, { withFileTypes: true })) {
+    const srcPath = path.join(srcDir, entry.name);
+    const destPath = path.join(destDir, entry.name);
+
+    if (entry.isDirectory()) {
+      copyRecursiveCSS(srcPath, destPath);
+    } else if (entry.name.endsWith('.css')) {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+};
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      fileName: format => `kubit-react-components.${format}.js`,
+      formats: ['es', 'cjs', 'umd'],
+      name: 'KubitReactComponents',
+    },
+    minify: 'terser',
+    outDir: 'dist',
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          'react': 'React',
+          'react-dom': 'ReactDOM',
+        },
+        plugins: [
+          terser({
+            compress: {
+              drop_console: true,
+              drop_debugger: true,
+            },
+          }),
+        ],
+      },
+    },
+    terserOptions: {
+      compress: {
+        drop_console: true,
+        drop_debugger: true,
+      },
+    },
+  },
+  define: {
+    'process.env.NODE_ENV': JSON.stringify('production'),
+  },
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+});