fix(exports): configure package exports and npm distribution (#568)

package.json

@@ -3,9 +3,9 @@
   "version": "1.0.0",
   "type": "module",
   "description": "React components for Stellar/Soroban development",
-  "main": "dist/sorokit-ui.cjs",
-  "module": "dist/sorokit-ui.es.js",
-  "types": "dist/components/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist",
     "README.md",
@@ -25,10 +25,11 @@
   "homepage": "https://github.com/Just-Bamford/sorokit-ui#readme",
   "exports": {
     ".": {
-      "types": "./dist/components/index.d.ts",
-      "import": "./dist/sorokit-ui.es.js",
-      "require": "./dist/sorokit-ui.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
+    "./style.css": "./dist/style.css",
     "./styles": "./dist/style.css"
   },
   "scripts": {
@@ -102,9 +103,8 @@
   "size-limit": [
     {
       "name": "ES module (gzip)",
-      "path": "dist/sorokit-ui.es.js",
+      "path": "dist/index.js",
       "limit": "150 kB",
-      "gzip": true,
       "ignore": [
         "react",
         "react-dom",
@@ -118,9 +118,8 @@
     },
     {
       "name": "CommonJS (gzip)",
-      "path": "dist/sorokit-ui.cjs",
+      "path": "dist/index.cjs",
       "limit": "150 kB",
-      "gzip": true,
       "ignore": [
         "react",
         "react-dom",

src/index.ts

@@ -0,0 +1 @@
+export * from "./components/index.js";

tsconfig.lib.json

@@ -3,6 +3,7 @@
     "target": "ES2020",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
+    "types": ["vite/client"],
     "declaration": true,
     "declarationMap": true,
     "emitDeclarationOnly": true,
@@ -21,6 +22,6 @@
       "@/*": ["src/*"]
     }
   },
-  "include": ["src/components/index.ts", "src/lib/client.ts"],
-  "exclude": ["node_modules", "dist", "src/**/*.test.ts", "src/**/*.test.tsx"]
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "src/**/*.test.ts", "src/**/*.test.tsx", "src/__tests__/**", "src/setupTests.ts", "src/test-setup.ts"]
 }

vite.config.ts

@@ -2,39 +2,53 @@ import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 import path from "path";
 import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
 
 export default defineConfig({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  plugins: [react(), tailwindcss()] as any[],
+  plugins: [
+    react(),
+    tailwindcss(),
+    dts({
+      tsconfigPath: path.resolve(__dirname, "tsconfig.lib.json"),
+    }),
+  ],
   build: {
     lib: {
-      entry: path.resolve(__dirname, 'src/components/index.ts'),
-      name: 'SorokitUI',
-      fileName: (format) => `sorokit-ui.${format}.js`,
-      formats: ['es', 'cjs'],
+      entry: path.resolve(__dirname, "src/index.ts"),
+      name: "SorokitUI",
+      fileName: (format) => `index.${format === "es" ? "js" : "cjs"}`,
+      formats: ["es", "cjs"],
     },
     rollupOptions: {
-      // Externalize dependencies that should not be bundled
-      external: ['react', 'react-dom', 'react/jsx-runtime'],
+      external: (id) =>
+        !id.startsWith(".") &&
+        !id.startsWith("@/") &&
+        !id.startsWith("\0") &&
+        !path.isAbsolute(id),
       output: {
-        // Provide global variables for UMD/IIFE builds
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name?.endsWith(".css")) {
+            return "style.css";
+          }
+          return "[name][extname]";
+        },
         globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
+          react: "React",
+          "react-dom": "ReactDOM",
         },
-        // Output ESM and CJS in separate directories
-        dir: 'dist',
       },
     },
     minify: false,
     sourcemap: true,
+    outDir: "dist",
+    emptyOutDir: true,
   },
   optimizeDeps: {
     include: ["sorokit-core", "@creit.tech/stellar-wallets-kit"],
   },
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
+      "@": path.resolve(__dirname, "./src"),
     },
   },
 });

vite.lib.config.ts

@@ -8,43 +8,50 @@ import dts from "vite-plugin-dts";
  * Library build configuration for sorokit-ui
  * 
  * Produces:
- * - dist/sorokit-ui.es.js (ES modules)
- * - dist/sorokit-ui.cjs (CommonJS)
- * - dist/sorokit-ui.d.ts (TypeScript definitions)
+ * - dist/index.js (ES modules)
+ * - dist/index.cjs (CommonJS)
+ * - dist/index.d.ts (TypeScript definitions)
+ * - dist/style.css (Component CSS)
  * 
  * Use with: vite build --config vite.lib.config.ts
  */
 export default defineConfig({
-  plugins: [react(), tailwindcss(), dts({
-    tsconfigPath: path.resolve(__dirname, "tsconfig.app.json"),
-    entryRoot: path.resolve(__dirname, "src"),
-    outDirs: ["dist"],
-    include: ["src/components", "src/lib"],
-  })],
+  plugins: [
+    react(),
+    tailwindcss(),
+    dts({
+      tsconfigPath: path.resolve(__dirname, "tsconfig.lib.json"),
+    }),
+  ],
   build: {
     lib: {
-      entry: path.resolve(__dirname, 'src/components/index.ts'),
-      name: 'SorokitUI',
-      fileName: (format) => `sorokit-ui.${format === 'es' ? 'es.js' : 'cjs'}`,
-      formats: ['es', 'cjs'],
+      entry: path.resolve(__dirname, "src/index.ts"),
+      name: "SorokitUI",
+      fileName: (format) => `index.${format === "es" ? "js" : "cjs"}`,
+      formats: ["es", "cjs"],
     },
     rollupOptions: {
       external: (id) =>
-        !id.startsWith('.') &&
-        !id.startsWith('/') &&
-        !id.startsWith('@/') &&
-        !id.startsWith('\0'),
+        !id.startsWith(".") &&
+        !id.startsWith("@/") &&
+        !id.startsWith("\0") &&
+        !path.isAbsolute(id),
       output: {
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name?.endsWith(".css")) {
+            return "style.css";
+          }
+          return "[name][extname]";
+        },
         globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
+          react: "React",
+          "react-dom": "ReactDOM",
         },
       },
     },
     minify: false,
     sourcemap: true,
-    // Preserve specific directory structure
-    outDir: 'dist',
+    outDir: "dist",
     emptyOutDir: true,
   },
   optimizeDeps: {
@@ -57,7 +64,7 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
+      "@": path.resolve(__dirname, "./src"),
     },
   },
-})
+});