veslx 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veslx",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "bin": {
     "veslx": "bin/veslx.ts"
@@ -12,11 +12,14 @@
     "src",
     "public",
     "index.html",
-    "vite.config.ts"
+    "vite.config.ts",
+    "vite.lib.config.ts"
   ],
   "scripts": {
     "dev": "bun bin/veslx.ts serve",
-    "build": "bun bin/veslx.ts build"
+    "build": "bun bin/veslx.ts build",
+    "build:lib": "vite build --config vite.lib.config.ts",
+    "prepublishOnly": "npm run build:lib"
   },
   "dependencies": {
     "acorn": "^8.15.0",
@@ -82,7 +85,8 @@
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.3"
+    "typescript-eslint": "^8.46.3",
+    "vite-plugin-dts": "^4.5.4"
   },
   "overrides": {}
 }

package/src/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
-import App from './App'
+import App from '@/App'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

package/vite.config.ts

@@ -1,4 +1,3 @@
-
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
@@ -10,10 +9,21 @@ import remarkGfm from 'remark-gfm'
 import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
 import { fileURLToPath } from 'url'
 import path from 'path'
+import fs from 'fs'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
-export default defineConfig({
+const distClientPath = path.join(__dirname, 'dist/client')
+const srcPath = path.join(__dirname, 'src')
+const hasPrebuilt = fs.existsSync(path.join(distClientPath, 'main.js'))
+
+export default defineConfig(({ command }) => {
+  // Only use pre-built files for dev server, not production build
+  // Pre-built files have externalized React which breaks production bundles
+  const usePrebuilt = command === 'serve' && hasPrebuilt
+  const clientPath = usePrebuilt ? distClientPath : srcPath
+
+  return {
   clearScreen: false,
   cacheDir: path.join(__dirname, 'node_modules/.vite'),
   publicDir: path.join(__dirname, 'public'),
@@ -37,7 +47,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@': path.join(__dirname, 'src'),
+      '@': clientPath,
     },
   },
   server: {
@@ -60,7 +70,7 @@ export default defineConfig({
     reportCompressedSize: false,
   },
   optimizeDeps: {
-    entries: [path.join(__dirname, 'src/main.tsx')],
+    entries: [path.join(clientPath, usePrebuilt ? 'main.js' : 'main.tsx')],
     include: [
       'react',
       'react-dom',
@@ -69,6 +79,20 @@ export default defineConfig({
       'react/jsx-dev-runtime',
       '@mdx-js/react',
       'react-router-dom',
+      // Pre-bundle heavy UI deps
+      '@radix-ui/react-collapsible',
+      '@radix-ui/react-dialog',
+      '@radix-ui/react-dropdown-menu',
+      '@radix-ui/react-scroll-area',
+      '@radix-ui/react-select',
+      '@radix-ui/react-tooltip',
+      'lucide-react',
+      'embla-carousel-react',
+      'next-themes',
+      'clsx',
+      'tailwind-merge',
+      'class-variance-authority',
     ],
   },
+  }
 })

package/vite.lib.config.ts

@@ -0,0 +1,47 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { resolve } from 'path'
+
+// Library build config - pre-compiles src/ components for distribution
+// CSS is left to runtime processing (Tailwind needs to scan for classes)
+export default defineConfig({
+  plugins: [
+    react(),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/main.tsx'),
+      formats: ['es'],
+      fileName: 'main'
+    },
+    rollupOptions: {
+      // Externalize all deps - they're resolved at runtime
+      external: (id) => {
+        // Virtual modules
+        if (id === 'virtual:content-modules') return true
+        // CSS files (processed at runtime by Tailwind)
+        if (id.endsWith('.css')) return true
+        // All node_modules
+        if (id.includes('node_modules')) return true
+        // Bare imports (dependencies)
+        if (!id.startsWith('.') && !id.startsWith('/') && !id.startsWith('@/')) return true
+        return false
+      },
+      output: {
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+        entryFileNames: '[name].js',
+      }
+    },
+    outDir: 'dist/client',
+    emptyOutDir: true,
+    // Don't minify for better debugging
+    minify: false,
+    sourcemap: true,
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'),
+    },
+  },
+})