Updated build to be more treeshakeable, added CSS generation

Author: erjdev

lib/main.ts lib/index.tslib/main.ts renamed to lib/index.ts

@@ -1,19 +1,15 @@
 {
   "name": "@erjdev/vite-react-components",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "type": "module",
   "files": [
-    "dist/"
+    "dist"
+  ],
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.js",
+  "sideEffects": [
+    "**/*.css"
   ],
-  "types": "./dist/vrc.es.d.ts",
-  "module": "./dist/vrc.es.js",
-  "exports": {
-    ".": {
-      "import": "./dist/vrc.es.js",
-      "types": "./dist/vrc.es.d.ts"
-    },
-    "./dist/style.css": "./dist/style.css"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/erjdev/vite-react-components.git"
@@ -43,6 +39,7 @@
     "typescript": "^5.2.2",
     "vite": "^5.3.1",
     "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-lib-inject-css": "^2.1.1",
     "vitest": "^1.6.0"
   },
   "publishConfig": {

package-lock.json

@@ -3,31 +3,44 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
 import path, { resolve } from 'path'
 import dts from 'vite-plugin-dts';
+import { libInjectCss } from 'vite-plugin-lib-inject-css';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     react(),
     dts({
-    include: ['lib'],
+      include: ['lib'],
       tsconfigPath: 'tsconfig.lib.json',
       rollupTypes: true,
     }),
+    libInjectCss(),
   ],
   server: {
     port: 3000,
   },
   build: {
     copyPublicDir: false,
     lib: {
-      entry: resolve(__dirname, 'lib/main.ts'),
+      entry: {
+        index: resolve(__dirname, 'lib/index.ts'),
+        button: resolve(__dirname, 'lib/components/Button/index.tsx'),
+        input: resolve(__dirname, 'lib/components/Input/index.tsx'),
+        label: resolve(__dirname, 'lib/components/Label/index.tsx'),
+      },
       formats: ['es'],
       name: 'ViteReactComponents',
       fileName: (format) => `vrc.${format}.js`,
     },
     rollupOptions: {
       external: ['react', 'react/jsx-runtime', 'react-dom'],
       output: {
+        // Put chunk files at <output>/chunks
+        chunkFileNames: 'chunks/[name].[hash].js',
+        // Put chunk styles at <output>/assets
+        assetFileNames: 'assets/[name][extname]',
+        entryFileNames: '[name].js',
+        // Register externals/globals
         globals: {
           react: "React",
           "react-dom": "ReactDOM",
@@ -42,6 +55,6 @@ export default defineConfig({
     },
   },
   test: {
-    include: ['./vitest/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}']
+    include: ['./vitest/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
   },
 });