bertui 0.2.9 → 0.3.2

package/README.md

@@ -2,110 +2,101 @@
 
 Lightning-fast React development powered by Bun.
 
+## ⚠️ Important Notice - CSS Animations Temporarily Unavailable
+
+**The built-in CSS animation utilities have been temporarily removed** due to compatibility issues with `bun.build`. We're working on a solution and they will be back in an upcoming release.
+
+**What this means:**
+- The 15+ animation classes (`.fadein`, `.scalein`, `.bouncein`, etc.) are not currently available
+- You can still use your own CSS animations or external libraries
+- All other BertUI features work normally
+
+**We apologize for any inconvenience caused.** This feature will return soon! 🚀
+
+---
+
 ## Features
 
 - ⚡ **Blazing Fast** - Built on Bun
-- 🎨 **Built-in Animations** - 15+ CSS utility classes
+- 📁 **File-Based Routing** - Zero config routing
 - 🔥 **Hot Module Replacement** - Instant updates
 - 📦 **Zero Config** - Works out of the box
 - 🚀 **Production Ready** - Optimized builds
 
-## Installation
+## Quick Start
+
+### Create New App (Recommended)
 ```bash
-bun add bertui react react-dom
+bunx create-bertui my-app
+cd my-app
+bun run dev
 ```
 
-## Usage
-```javascript
-// src/main.jsx
-;
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+This creates a complete BertUI project with:
+- Pre-configured file structure
+- Sample pages with routing
+- Beautiful example components
+- All dependencies installed
 
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <h1 className="split fadein">Hello BertUI!</h1>
-);
+### Manual Installation (Advanced)
+If you want to configure everything yourself:
+```bash
+bun add bertui react react-dom
 ```
 
+Then you'll need to manually set up:
+- Project structure (`src/pages/`, `src/main.jsx`, etc.)
+- Router configuration
+- Build configuration
+
+**Note:** We recommend using `bunx create-bertui` for the best experience!
+
 ## Commands
 ```bash
 bertui dev         # Start dev server
 bertui build       # Build for production
 ```
 
-## CSS Classes
-
-- `.split` - Split text animation
-- `.moveright` - Slide from left
-- `.moveleft` - Slide from right
-- `.fadein` - Fade in
-- `.scalein` - Scale in
-- `.bouncein` - Bounce in
-- `.slideup` - Slide up
-- `.slidedown` - Slide down
-- `.rotatein` - Rotate in
-- `.pulse` - Pulse animation
-- `.shake` - Shake animation
-
-# 🎉 BertUI Now Has File-Based Routing!
-
-## What We Built
-
-I've added a **complete file-based routing system** to BertUI. Here's what's included:
-
-### 📁 New Files to Add
+## File-Based Routing
 
-1. **`src/router/router.js`** - Core routing logic
-   - Scans `src/pages/` directory
-   - Generates route definitions
-   - Creates React Router component
-   - Provides `Link` and `navigate` utilities
+BertUI now has **complete file-based routing**! Here's what's included:
 
-2. **`src/client/compiler.js`** (updated) - Enhanced compiler
-   - Detects `pages/` directory
-   - Auto-generates router code
-   - Supports both routing and non-routing modes
+### 📁 Features
 
-3. **`src/server/dev-server.js`** (updated) - Enhanced dev server
-   - Serves SPA-style HTML for all routes
-   - Notifies clients of route changes
-   - Better HMR integration
-
-## 🚀 Features
-
-### ✅ File-Based Routing
+#### ✅ File-Based Routing
 ```
 src/pages/index.jsx       → /
 src/pages/about.jsx       → /about
 src/pages/blog/index.jsx  → /blog
 ```
 
-### ✅ Dynamic Routes
+#### ✅ Dynamic Routes
 ```
 src/pages/user/[id].jsx           → /user/:id
 src/pages/blog/[slug].jsx         → /blog/:slug
 src/pages/shop/[cat]/[prod].jsx   → /shop/:cat/:prod
 ```
 
-### ✅ Navigation Components
+#### ✅ Navigation Components
 ```jsx
-import { Link, navigate } from '../.bertui/router';
+import { Link, navigate } from 'bertui/router';
 
 // Link component
-<Link href="/about">About</Link>
+<Link to="/about">About</Link>
 
 // Programmatic navigation
+const { navigate } = useRouter();
 navigate('/dashboard');
 ```
 
-### ✅ Route Parameters
+#### ✅ Route Parameters
 ```jsx
 export default function UserProfile({ params }) {
   return <div>User ID: {params.id}</div>;
 }
 ```
 
-### ✅ Backward Compatible
+#### ✅ Backward Compatible
 - Still works with `src/main.jsx` if no `pages/` directory
 - Automatically detects routing mode
 - No breaking changes!
@@ -139,44 +130,31 @@ export default function UserProfile({ params }) {
    - Client-side routing handles navigation
    - HMR updates routes on file changes
 
-## 🔧 Integration Steps
-
-### 1. Add Router Files
-Copy these files to your BertUI project:
-- `src/router/router.js` (new)
-- `src/client/compiler.js` (replace)
-- `src/server/dev-server.js` (replace)
-
-### 2. Update Dependencies
-No new dependencies needed! Uses existing React ecosystem.
-
-### 3. Test It
-```bash
-# Create example pages
-mkdir -p src/pages
-echo 'export default () => <h1>Home</h1>' > src/pages/index.jsx
-echo 'export default () => <h1>About</h1>' > src/pages/about.jsx
-
-# Start dev server
-bertui dev
-```
-
-### 4. Watch the Magic
-- Navigate to `http://localhost:3000` → Home page
-- Click links → No page reload!
-- Edit files → Instant HMR!
-- Check console → Route discovery logs
-
-## 🎨 Works with BertUI Animations
+## 🎓 Usage Example
 
 ```jsx
+// src/pages/index.jsx
+import { Link } from 'bertui/router';
+
 export default function Home() {
   return (
     <div>
-      <h1 className="split fadein" data-text="Welcome!">
-        Welcome!
-      </h1>
-      <p className="moveright">Lightning fast! ⚡</p>
+      <h1>Welcome to My App!</h1>
+      <nav>
+        <Link to="/about">About</Link>
+        <Link to="/blog">Blog</Link>
+        <Link to="/user/123">My Profile</Link>
+      </nav>
+    </div>
+  );
+}
+
+// src/pages/user/[id].jsx
+export default function UserProfile({ params }) {
+  return (
+    <div>
+      <h1>User {params.id}</h1>
+      <p>Profile page for user {params.id}</p>
     </div>
   );
 }
@@ -210,34 +188,13 @@ Update `build.js` to:
 - Create optimized bundles per route
 - Handle dynamic routes appropriately
 
-## 🎓 Usage Example
-
-```jsx
-// src/pages/index.jsx
-import { Link } from '../.bertui/router';
+## 🏁 Conclusion
 
-export default function Home() {
-  return (
-    <div className="fadein">
-      <h1>Welcome to My App!</h1>
-      <nav>
-        <Link href="/about">About</Link>
-        <Link href="/blog">Blog</Link>
-        <Link href="/user/123">My Profile</Link>
-      </nav>
-    </div>
-  );
-}
-
-// src/pages/user/[id].jsx
-export default function UserProfile({ params }) {
-  return (
-    <div className="scalein">
-      <h1>User {params.id}</h1>
-      <p>Profile page for user {params.id}</p>
-    </div>
-  );
-}
+BertUI now has **production-ready file-based routing** that's:
+- ⚡ **Fast** - Built on Bun
+- 🎯 **Simple** - Zero config
+- 💪 **Powerful** - Dynamic routes, params, navigation
+- 🔥 **Modern** - HMR, code splitting, SPA
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bertui",
-  "version": "0.2.9",
+  "version": "0.3.2",
   "description": "Lightning-fast React dev server powered by Bun and Elysia",
   "type": "module",
   "main": "./index.js",
@@ -46,9 +46,7 @@
   "dependencies": {
     "elysia": "^1.0.0",
     "ernest-logger": "latest",
-    "postcss": "^8.4.32",
-    "autoprefixer": "^10.4.16",
-    "cssnano": "^6.0.2"
+    "lightningcss": "^1.30.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/build/css-builder.js

@@ -1,19 +1,16 @@
-// src/build/css-builder.js
 import { join } from 'path';
 import { existsSync, mkdirSync } from 'fs';
-import postcss from 'postcss';
-import autoprefixer from 'autoprefixer';
-import cssnano from 'cssnano';
+import { transform } from 'lightningcss';
 import logger from '../logger/logger.js';
 
 /**
- * Build and minify CSS for production
+ * Build and minify CSS for production using Lightning CSS
  * @param {string} srcPath - Source CSS file path
  * @param {string} destPath - Destination CSS file path
  */
 export async function buildCSS(srcPath, destPath) {
   try {
-    logger.info('Processing CSS...');
+    logger.info(`Processing CSS: ${srcPath.split('/').pop()}`);
     
     // Ensure destination directory exists
     const destDir = join(destPath, '..');
@@ -23,38 +20,38 @@ export async function buildCSS(srcPath, destPath) {
     
     // Read source CSS
     const css = await Bun.file(srcPath).text();
+    const originalSize = Buffer.byteLength(css);
     
-    // Process with PostCSS
-    const result = await postcss([
-      autoprefixer(),
-      cssnano({
-        preset: ['default', {
-          discardComments: { removeAll: true },
-          normalizeWhitespace: true,
-          colormin: true,
-          minifyFontValues: true,
-          minifySelectors: true,
-        }]
-      })
-    ]).process(css, { from: srcPath, to: destPath });
+    // Transform with Lightning CSS (blazing fast)
+    const { code } = transform({
+      filename: srcPath,
+      code: Buffer.from(css),
+      minify: true,
+      sourceMap: false,
+      targets: {
+        // Support last 2 versions of major browsers
+        chrome: 90 << 16,
+        firefox: 88 << 16,
+        safari: 14 << 16,
+        edge: 90 << 16
+      },
+      drafts: {
+        nesting: true // Enable CSS nesting
+      }
+    });
     
     // Write minified CSS
-    await Bun.write(destPath, result.css);
+    await Bun.write(destPath, code);
     
     // Calculate size reduction
-    const originalSize = (Buffer.byteLength(css) / 1024).toFixed(2);
-    const minifiedSize = (Buffer.byteLength(result.css) / 1024).toFixed(2);
-    const reduction = ((1 - Buffer.byteLength(result.css) / Buffer.byteLength(css)) * 100).toFixed(1);
+    const minifiedSize = code.length;
+    const originalKB = (originalSize / 1024).toFixed(2);
+    const minifiedKB = (minifiedSize / 1024).toFixed(2);
+    const reduction = ((1 - minifiedSize / originalSize) * 100).toFixed(1);
     
-    logger.success(`CSS minified: ${originalSize}KB → ${minifiedSize}KB (-${reduction}%)`);
+    logger.success(`CSS minified: ${originalKB}KB → ${minifiedKB}KB (-${reduction}%)`);
     
-    if (result.warnings().length > 0) {
-      result.warnings().forEach(warn => {
-        logger.warn(warn.toString());
-      });
-    }
-    
-    return { success: true, size: minifiedSize };
+    return { success: true, size: minifiedKB };
   } catch (error) {
     logger.error(`CSS build failed: ${error.message}`);
     throw error;

package/src/build.js

@@ -1,4 +1,3 @@
-// src/build.js
 import { join } from 'path';
 import { existsSync, mkdirSync, rmSync, cpSync, readdirSync, statSync } from 'fs';
 import { extname, relative, dirname } from 'path';
@@ -32,11 +31,9 @@ export async function buildProduction(options = {}) {
     await compileForBuild(root, buildDir);
     logger.success('Production compilation complete');
     
-    // Step 2: Build CSS from BertUI library
-    logger.info('Step 2: Building CSS...');
-    const bertuiCssSource = join(import.meta.dir, 'styles/bertui.css');
-    const bertuiCssDest = join(outDir, 'styles/bertui.min.css');
-    await buildCSS(bertuiCssSource, bertuiCssDest);
+    // Step 2: Build CSS with Lightning CSS
+    logger.info('Step 2: Building CSS with Lightning CSS...');
+    await buildAllCSS(root, outDir);
     
     // Step 3: Copy public assets if they exist
     const publicDir = join(root, 'public');
@@ -49,7 +46,7 @@ export async function buildProduction(options = {}) {
     }
     
     // Step 4: Build JavaScript with Bun's bundler
-    logger.info('Step 4: Bundling JavaScript...');
+    logger.info('Step 4: Bundling JavaScript with Bun...');
     const buildEntry = join(buildDir, 'main.js');
     
     if (!existsSync(buildEntry)) {
@@ -57,6 +54,7 @@ export async function buildProduction(options = {}) {
       process.exit(1);
     }
     
+    // FIXED: Let Bun handle ALL imports with proper externals
     const result = await Bun.build({
       entrypoints: [buildEntry],
       outdir: join(outDir, 'assets'),
@@ -69,7 +67,8 @@ export async function buildProduction(options = {}) {
         chunk: 'chunks/[name]-[hash].js',
         asset: '[name]-[hash].[ext]'
       },
-      external: ['react', 'react-dom']
+      // FIXED: Use CDN externals - Bun handles tree shaking automatically
+      external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime']
     });
     
     if (!result.success) {
@@ -78,7 +77,7 @@ export async function buildProduction(options = {}) {
       process.exit(1);
     }
     
-    logger.success('JavaScript bundled');
+    logger.success('JavaScript bundled with tree-shaking');
     
     // Step 5: Generate index.html
     logger.info('Step 5: Generating index.html...');
@@ -121,6 +120,27 @@ export async function buildProduction(options = {}) {
   }
 }
 
+async function buildAllCSS(root, outDir) {
+  const srcStylesDir = join(root, 'src', 'styles');
+  const bertuiCssSource = join(import.meta.dir, 'styles/bertui.css');
+  const stylesOutDir = join(outDir, 'styles');
+  
+  mkdirSync(stylesOutDir, { recursive: true });
+  
+  // Build BertUI's built-in CSS
+  await buildCSS(bertuiCssSource, join(stylesOutDir, 'bertui.min.css'));
+  
+  // Build user's CSS files if they exist
+  if (existsSync(srcStylesDir)) {
+    const cssFiles = readdirSync(srcStylesDir).filter(f => f.endsWith('.css'));
+    for (const cssFile of cssFiles) {
+      const srcPath = join(srcStylesDir, cssFile);
+      const destPath = join(stylesOutDir, cssFile.replace('.css', '.min.css'));
+      await buildCSS(srcPath, destPath);
+    }
+  }
+}
+
 async function compileForBuild(root, buildDir) {
   const srcDir = join(root, 'src');
   const pagesDir = join(srcDir, 'pages');
@@ -160,6 +180,10 @@ async function discoverRoutes(pagesDir) {
         await scanDirectory(fullPath, relativePath);
       } else if (entry.isFile()) {
         const ext = extname(entry.name);
+        
+        // FIXED: Ignore CSS files
+        if (ext === '.css') continue;
+        
         if (['.jsx', '.tsx', '.js', '.ts'].includes(ext)) {
           const fileName = entry.name.replace(ext, '');
           
@@ -345,6 +369,9 @@ async function compileBuildDirectory(srcDir, buildDir, root) {
     } else {
       const ext = extname(file);
       
+      // FIXED: Skip CSS files in build
+      if (ext === '.css') continue;
+      
       if (['.jsx', '.tsx', '.ts'].includes(ext)) {
         await compileBuildFile(srcPath, buildDir, file, root);
       } else if (ext === '.js') {
@@ -395,6 +422,7 @@ async function compileBuildFile(srcPath, buildDir, filename, root) {
   }
 }
 
+// FIXED: Only fix router imports, preserve all others
 function fixBuildImports(code, srcPath, outPath, root) {
   // Remove bertui/styles imports
   code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');
@@ -406,7 +434,7 @@ function fixBuildImports(code, srcPath, outPath, root) {
   const relativeToRouter = relative(dirname(outPath), routerPath).replace(/\\/g, '/');
   const routerImport = relativeToRouter.startsWith('.') ? relativeToRouter : './' + relativeToRouter;
   
-  // Replace bertui/router imports
+  // ONLY replace bertui/router imports
   code = code.replace(
     /from\s+['"]bertui\/router['"]/g,
     `from '${routerImport}'`
@@ -451,7 +479,9 @@ async function generateProductionHTML(root, outDir, buildResult) {
   {
     "imports": {
       "react": "https://esm.sh/react@18.2.0",
-      "react-dom": "https://esm.sh/react-dom@18.2.0"
+      "react-dom": "https://esm.sh/react-dom@18.2.0",
+      "react-dom/client": "https://esm.sh/react-dom@18.2.0/client",
+      "react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime"
     }
   }
   </script>

package/src/client/compiler.js

@@ -1,5 +1,5 @@
 import { existsSync, mkdirSync, readdirSync, statSync } from 'fs';
-import { join, extname, relative } from 'path';
+import { join, extname, relative, dirname } from 'path';
 import logger from '../logger/logger.js';
 
 export async function compileProject(root) {
@@ -64,6 +64,14 @@ async function discoverRoutes(pagesDir) {
         await scanDirectory(fullPath, relativePath);
       } else if (entry.isFile()) {
         const ext = extname(entry.name);
+        
+        // FIXED: Ignore CSS files completely
+        if (ext === '.css') {
+          logger.debug(`Skipping CSS file: ${relativePath}`);
+          continue;
+        }
+        
+        // Only process valid page files
         if (['.jsx', '.tsx', '.js', '.ts'].includes(ext)) {
           const fileName = entry.name.replace(ext, '');
           
@@ -255,14 +263,26 @@ async function compileDirectory(srcDir, outDir, root) {
       const ext = extname(file);
       const relativePath = relative(join(root, 'src'), srcPath);
       
-      if (['.jsx', '.tsx', '.ts'].includes(ext)) {
+      // FIXED: Handle CSS files properly - copy to styles output
+      if (ext === '.css') {
+        const stylesOutDir = join(root, '.bertui', 'styles');
+        if (!existsSync(stylesOutDir)) {
+          mkdirSync(stylesOutDir, { recursive: true });
+        }
+        const cssOutPath = join(stylesOutDir, file);
+        await Bun.write(cssOutPath, Bun.file(srcPath));
+        logger.debug(`Copied CSS: ${relativePath}`);
+        stats.files++;
+      } else if (['.jsx', '.tsx', '.ts'].includes(ext)) {
         await compileFile(srcPath, outDir, file, relativePath);
         stats.files++;
       } else if (ext === '.js') {
         const outPath = join(outDir, file);
         let code = await Bun.file(srcPath).text();
         
-        code = fixImports(code);
+        // FIXED: Don't modify imports - let Bun handle them
+        // Only fix router imports
+        code = fixRouterImports(code, outPath, root);
         
         await Bun.write(outPath, code);
         logger.debug(`Copied: ${relativePath}`);
@@ -284,7 +304,10 @@ async function compileFile(srcPath, outDir, filename, relativePath) {
   try {
     let code = await Bun.file(srcPath).text();
     
-    code = fixImports(code);
+    // FIXED: Don't remove any imports - preserve them all
+    // Only fix router imports to point to compiled location
+    const outPath = join(outDir, filename.replace(/\.(jsx|tsx|ts)$/, '.js'));
+    code = fixRouterImports(code, outPath, process.cwd());
     
     const transpiler = new Bun.Transpiler({ 
       loader,
@@ -304,29 +327,31 @@ async function compileFile(srcPath, outDir, filename, relativePath) {
     
     compiled = fixRelativeImports(compiled);
     
-    const outFilename = filename.replace(/\.(jsx|tsx|ts)$/, '.js');
-    const outPath = join(outDir, outFilename);
-    
     await Bun.write(outPath, compiled);
-    logger.debug(`Compiled: ${relativePath} → ${outFilename}`);
+    logger.debug(`Compiled: ${relativePath} → ${filename.replace(/\.(jsx|tsx|ts)$/, '.js')}`);
   } catch (error) {
     logger.error(`Failed to compile ${relativePath}: ${error.message}`);
     throw error;
   }
 }
 
-function fixImports(code) {
-  code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');
+// FIXED: New function - only fixes bertui/router imports
+function fixRouterImports(code, outPath, root) {
+  const buildDir = join(root, '.bertui', 'compiled');
+  const routerPath = join(buildDir, 'router.js');
   
+  // Calculate relative path from output file to router.js
+  const relativeToRouter = relative(dirname(outPath), routerPath).replace(/\\/g, '/');
+  const routerImport = relativeToRouter.startsWith('.') ? relativeToRouter : './' + relativeToRouter;
+  
+  // ONLY replace bertui/router imports
   code = code.replace(
     /from\s+['"]bertui\/router['"]/g,
-    "from '/compiled/router.js'"
+    `from '${routerImport}'`
   );
   
-  code = code.replace(
-    /from\s+['"]\.\.\/\.bertui\/compiled\/([^'"]+)['"]/g,
-    "from '/compiled/$1'"
-  );
+  // Remove bertui/styles imports (CSS handled separately)
+  code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');
   
   return code;
 }
@@ -342,5 +367,4 @@ function fixRelativeImports(code) {
   });
   
   return code;
-}
-
+}

package/src/server/dev-server.js

@@ -10,6 +10,7 @@ export async function startDevServer(options = {}) {
   const port = parseInt(options.port) || 3000;
   const root = options.root || process.cwd();
   const compiledDir = join(root, '.bertui', 'compiled');
+  const stylesDir = join(root, '.bertui', 'styles');
   
   const config = await loadConfig(root);
   
@@ -49,6 +50,21 @@ export async function startDevServer(options = {}) {
           }
         }
         
+        // FIXED: Handle CSS files from .bertui/styles
+        if (path.startsWith('styles/') && path.endsWith('.css')) {
+          const cssPath = join(stylesDir, path.replace('styles/', ''));
+          const file = Bun.file(cssPath);
+          
+          if (await file.exists()) {
+            return new Response(await file.text(), {
+              headers: { 
+                'Content-Type': 'text/css',
+                'Cache-Control': 'no-store'
+              }
+            });
+          }
+        }
+        
         if (path.startsWith('public/')) {
           const publicDir = join(root, 'public');
           const filepath = join(publicDir, path.replace('public/', ''));
@@ -132,6 +148,24 @@ ws.onclose = () => {
       });
     })
     
+    // FIXED: Serve CSS from .bertui/styles
+    .get('/styles/*', async ({ params, set }) => {
+      const filepath = join(stylesDir, params['*']);
+      const file = Bun.file(filepath);
+      
+      if (!await file.exists()) {
+        set.status = 404;
+        return 'CSS file not found';
+      }
+      
+      return new Response(await file.text(), {
+        headers: { 
+          'Content-Type': 'text/css',
+          'Cache-Control': 'no-store'
+        }
+      });
+    })
+    
     .get('/public/*', async ({ params, set }) => {
       const publicDir = join(root, 'public');
       const filepath = join(publicDir, params['*']);
@@ -165,6 +199,15 @@ ws.onclose = () => {
 function serveHTML(root, hasRouter, config) {
   const meta = config.meta || {};
   
+  // Find user's CSS files
+  const srcStylesDir = join(root, 'src', 'styles');
+  let userStylesheets = '';
+  
+  if (existsSync(srcStylesDir)) {
+    const cssFiles = require('fs').readdirSync(srcStylesDir).filter(f => f.endsWith('.css'));
+    userStylesheets = cssFiles.map(f => `  <link rel="stylesheet" href="/styles/${f}">`).join('\n');
+  }
+  
   const html = `
 <!DOCTYPE html>
 <html lang="${meta.lang || 'en'}">
@@ -184,6 +227,8 @@ function serveHTML(root, hasRouter, config) {
   
   <link rel="icon" type="image/svg+xml" href="/public/favicon.svg">
   
+  ${userStylesheets}
+  
   <script type="importmap">
   {
     "imports": {