bertui 1.1.2 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bertui",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Lightning-fast React dev server powered by Bun and Elysia - Now with TypeScript support!",
   "type": "module",
   "main": "./index.js",

package/src/build/compiler/file-transpiler.js

@@ -1,40 +1,21 @@
-// bertui/src/build/compiler/file-transpiler.js - SINGLE TRANSPILER INSTANCE
+// bertui/src/build/compiler/file-transpiler.js - FORCE PRODUCTION JSX
 import { join, relative, dirname, extname } from 'path';
-import { readdirSync, statSync, mkdirSync } from 'fs';
+import { readdirSync, statSync, mkdirSync, writeFileSync } from 'fs';
 import logger from '../../logger/logger.js';
 import { replaceEnvInCode } from '../../utils/env.js';
 
-// ✅ CRITICAL FIX: Create transpilers ONCE at module level
-const jsxTranspiler = new Bun.Transpiler({ loader: 'jsx' });
-
-const tsxTranspiler = new Bun.Transpiler({ 
-  loader: 'tsx',
-  tsconfig: {
-    compilerOptions: {
-      jsx: 'react',
-      jsxFactory: 'React.createElement',
-      jsxFragmentFactory: 'React.Fragment'
-    }
-  }
-});
-
-const tsTranspiler = new Bun.Transpiler({ 
-  loader: 'ts',
-  tsconfig: {
-    compilerOptions: {
-      jsx: 'preserve'
-    }
-  }
-});
-
-function getTranspiler(loader) {
-  // Just return the pre-created instances
-  return loader === 'tsx' ? tsxTranspiler : 
-         loader === 'ts' ? tsTranspiler : 
-         jsxTranspiler;
-}
-
 export async function compileBuildDirectory(srcDir, buildDir, root, envVars) {
+  // Create bunfig.toml in build directory
+  const bunfigContent = `
+[build]
+jsx = "react"
+jsxFactory = "React.createElement"
+jsxFragment = "React.Fragment"
+`.trim();
+  
+  writeFileSync(join(buildDir, 'bunfig.toml'), bunfigContent);
+  logger.info('Created bunfig.toml for classic JSX');
+  
   const files = readdirSync(srcDir);
   const filesToCompile = [];
   
@@ -60,20 +41,18 @@ export async function compileBuildDirectory(srcDir, buildDir, root, envVars) {
   
   if (filesToCompile.length === 0) return;
   
-  // ✅ Process sequentially with progress
-  logger.info(`📦 Compiling ${filesToCompile.length} files sequentially...`);
+  logger.info(`📦 Compiling ${filesToCompile.length} files...`);
   
   for (let i = 0; i < filesToCompile.length; i++) {
     const file = filesToCompile[i];
     
     try {
       if (file.type === 'tsx') {
-        await compileBuildFile(file.path, file.dir, file.name, root, envVars);
+        await compileBuildFile(file.path, file.dir, file.name, root, envVars, buildDir);
       } else {
         await compileJSFile(file.path, file.dir, file.name, root, envVars);
       }
       
-      // Progress every 10 files
       if ((i + 1) % 10 === 0 || i === filesToCompile.length - 1) {
         const percent = (((i + 1) / filesToCompile.length) * 100).toFixed(0);
         logger.info(`   Progress: ${i + 1}/${filesToCompile.length} (${percent}%)`);
@@ -81,16 +60,14 @@ export async function compileBuildDirectory(srcDir, buildDir, root, envVars) {
       
     } catch (error) {
       logger.error(`Failed to compile ${file.name}: ${error.message}`);
-      // Continue with other files
     }
   }
   
   logger.success(`✅ Compiled ${filesToCompile.length} files`);
 }
 
-async function compileBuildFile(srcPath, buildDir, filename, root, envVars) {
+async function compileBuildFile(srcPath, buildDir, filename, root, envVars, configDir) {
   const ext = extname(filename);
-  const loader = ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx';
   
   try {
     let code = await Bun.file(srcPath).text();
@@ -101,18 +78,39 @@ async function compileBuildFile(srcPath, buildDir, filename, root, envVars) {
     const outPath = join(buildDir, outFilename);
     code = fixBuildImports(code, srcPath, outPath, root);
     
-    // ✅ Reuse the same transpiler instance
-    const transpiler = getTranspiler(loader);
+    // Add React import BEFORE transpiling
+    if (!code.includes('import React')) {
+      code = `import React from 'react';\n${code}`;
+    }
+    
+    // Use Bun.Transpiler with explicit production settings
+    const transpiler = new Bun.Transpiler({
+      loader: ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx',
+      target: 'browser',
+      define: {
+        'process.env.NODE_ENV': '"production"'
+      },
+      tsconfig: {
+        compilerOptions: {
+          jsx: 'react',
+          jsxFactory: 'React.createElement',
+          jsxFragmentFactory: 'React.Fragment',
+          target: 'ES2020'
+        }
+      }
+    });
+    
     let compiled = await transpiler.transform(code);
     
-    if (usesJSX(compiled) && !compiled.includes('import React')) {
-      compiled = `import React from 'react';\n${compiled}`;
+    // Verify no dev JSX leaked through
+    if (compiled.includes('jsxDEV')) {
+      logger.warn(`⚠️  Dev JSX detected in ${filename}, fixing...`);
+      compiled = compiled.replace(/jsxDEV/g, 'jsx');
     }
     
     compiled = fixRelativeImports(compiled);
     await Bun.write(outPath, compiled);
     
-    // Help GC
     code = null;
     compiled = null;
     
@@ -140,9 +138,7 @@ async function compileJSFile(srcPath, buildDir, filename, root, envVars) {
 function usesJSX(code) {
   return code.includes('React.createElement') || 
          code.includes('React.Fragment') ||
-         /<[A-Z]/.test(code) ||
-         code.includes('jsx(') ||
-         code.includes('jsxs(');
+         /<[A-Z]/.test(code);
 }
 
 function removeCSSImports(code) {
@@ -168,4 +164,4 @@ function fixRelativeImports(code) {
     return `from '${prefix}${path}.js';`;
   });
   return code;
-}
+}

package/src/build/generators/html-generator.js

@@ -1,4 +1,4 @@
-// bertui/src/build/generators/html-generator.js - FIXED PRODUCTION IMPORT MAP
+// bertui/src/build/generators/html-generator.js - FIXED JSX RUNTIME
 import { join, relative } from 'path';
 import { mkdirSync, existsSync, cpSync } from 'fs';
 import logger from '../../logger/logger.js';
@@ -239,7 +239,7 @@ async function extractStaticHTMLFromComponent(sourceCode, filePath) {
   }
 }
 
-// ✅ FIXED: Add bertuiIconsInstalled parameter
+// ✅ FIXED: Add jsx-runtime to import map
 function generateHTML(meta, route, bundlePath, staticHTML = '', isServerIsland = false, bertuiIconsInstalled = false) {
   const rootContent = staticHTML 
     ? `<div id="root">${staticHTML}</div>` 
@@ -249,7 +249,7 @@ function generateHTML(meta, route, bundlePath, staticHTML = '', isServerIsland =
     ? '<!-- 🏝️ Server Island: Static content rendered at build time -->'
     : '<!-- ⚡ Client-only: Content rendered by JavaScript -->';
   
-  // ✅ FIX: Add bertui-icons to production import map if installed
+  // ✅ FIX: Add jsx-runtime to import map for production
   const bertuiIconsImport = bertuiIconsInstalled 
     ? ',\n      "bertui-icons": "/node_modules/bertui-icons/generated/index.js"'
     : '';

package/src/build.js

@@ -1,11 +1,10 @@
-// bertui/src/build.js - FIXED BUNDLING
+// bertui/src/build.js - FORCE PRODUCTION MODE
 import { join } from 'path';
-import { existsSync, mkdirSync, rmSync } from 'fs';
+import { existsSync, mkdirSync, rmSync, writeFileSync } from 'fs';
 import logger from './logger/logger.js';
 import { loadEnvVariables } from './utils/env.js';
 import { runPageBuilder } from './pagebuilder/core.js';
 
-// Import modular components
 import { compileForBuild } from './build/compiler/index.js';
 import { buildAllCSS } from './build/processors/css-builder.js';
 import { copyAllStaticAssets } from './build/processors/asset-processor.js';
@@ -18,10 +17,12 @@ export async function buildProduction(options = {}) {
   const buildDir = join(root, '.bertuibuild');
   const outDir = join(root, 'dist');
   
+  // Force production environment
+  process.env.NODE_ENV = 'production';
+  
   logger.bigLog('BUILDING WITH SERVER ISLANDS 🏝️', { color: 'green' });
   logger.info('🔥 OPTIONAL SERVER CONTENT - THE GAME CHANGER');
   
-  // Clean directories
   if (existsSync(buildDir)) rmSync(buildDir, { recursive: true });
   if (existsSync(outDir)) rmSync(outDir, { recursive: true });
   mkdirSync(buildDir, { recursive: true });
@@ -30,11 +31,9 @@ export async function buildProduction(options = {}) {
   const startTime = Date.now();
   
   try {
-    // Step 0: Environment
     logger.info('Step 0: Loading environment variables...');
     const envVars = loadEnvVariables(root);
     
-    // Step 0.5: Load config and run Page Builder
     const { loadConfig } = await import('./config/loadConfig.js');
     const config = await loadConfig(root);
     
@@ -43,7 +42,6 @@ export async function buildProduction(options = {}) {
       await runPageBuilder(root, config);
     }
     
-    // Step 1: Compilation
     logger.info('Step 1: Compiling and detecting Server Islands...');
     const { routes, serverIslands, clientRoutes } = await compileForBuild(root, buildDir, envVars);
     
@@ -56,43 +54,33 @@ export async function buildProduction(options = {}) {
       })));
     }
     
-    // Step 2: CSS Processing
     logger.info('Step 2: Combining CSS...');
     await buildAllCSS(root, outDir);
     
-    // Step 3: Assets
     logger.info('Step 3: Copying static assets...');
     await copyAllStaticAssets(root, outDir);
     
-    // Step 4: JavaScript Bundling
     logger.info('Step 4: Bundling JavaScript...');
     const buildEntry = join(buildDir, 'main.js');
     
-    // ✅ CRITICAL FIX: Check if main.js exists before bundling
     if (!existsSync(buildEntry)) {
       logger.error('❌ main.js not found in build directory!');
-      logger.error('   Expected: ' + buildEntry);
-      throw new Error('Build entry point missing. Compilation may have failed.');
+      throw new Error('Build entry point missing');
     }
     
-    const result = await bundleJavaScript(buildEntry, outDir, envVars);
+    const result = await bundleJavaScript(buildEntry, outDir, envVars, buildDir);
     
-    // Step 5: HTML Generation
     logger.info('Step 5: Generating HTML with Server Islands...');
     await generateProductionHTML(root, outDir, result, routes, serverIslands, config);
     
-    // Step 6: Sitemap
     logger.info('Step 6: Generating sitemap.xml...');
     await generateSitemap(routes, config, outDir);
     
-    // Step 7: Robots.txt
     logger.info('Step 7: Generating robots.txt...');
     await generateRobots(config, outDir, routes);
     
-    // Cleanup
     if (existsSync(buildDir)) rmSync(buildDir, { recursive: true });
     
-    // Summary
     const duration = Date.now() - startTime;
     showBuildSummary(routes, serverIslands, clientRoutes, duration);
     
@@ -104,9 +92,14 @@ export async function buildProduction(options = {}) {
   }
 }
 
-async function bundleJavaScript(buildEntry, outDir, envVars) {
+async function bundleJavaScript(buildEntry, outDir, envVars, buildDir) {
   try {
-    // ✅ CRITICAL FIX: Better error handling and clearer external configuration
+    // Change to build directory where bunfig.toml is
+    const originalCwd = process.cwd();
+    process.chdir(buildDir);
+    
+    logger.info('🔧 Bundling with production JSX...');
+    
     const result = await Bun.build({
       entrypoints: [buildEntry],
       outdir: join(outDir, 'assets'),
@@ -119,8 +112,7 @@ async function bundleJavaScript(buildEntry, outDir, envVars) {
         chunk: 'chunks/[name]-[hash].js',
         asset: '[name]-[hash].[ext]'
       },
-      // ✅ FIXED: Externalize React to use CDN (reduces bundle size)
-      external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime'],
+      external: ['react', 'react-dom', 'react-dom/client'],
       define: {
         'process.env.NODE_ENV': '"production"',
         ...Object.fromEntries(
@@ -132,10 +124,11 @@ async function bundleJavaScript(buildEntry, outDir, envVars) {
       }
     });
     
+    process.chdir(originalCwd);
+    
     if (!result.success) {
       logger.error('❌ JavaScript build failed!');
       
-      // ✅ IMPROVED: Better error reporting
       if (result.logs && result.logs.length > 0) {
         logger.error('\n📋 Build errors:');
         result.logs.forEach((log, i) => {
@@ -147,10 +140,9 @@ async function bundleJavaScript(buildEntry, outDir, envVars) {
         });
       }
       
-      throw new Error('JavaScript bundling failed - check errors above');
+      throw new Error('JavaScript bundling failed');
     }
     
-    // ✅ IMPROVED: Log successful bundle info
     logger.success('✅ JavaScript bundled successfully');
     logger.info(`   Entry points: ${result.outputs.filter(o => o.kind === 'entry-point').length}`);
     logger.info(`   Chunks: ${result.outputs.filter(o => o.kind === 'chunk').length}`);
@@ -162,7 +154,6 @@ async function bundleJavaScript(buildEntry, outDir, envVars) {
     
   } catch (error) {
     logger.error('❌ Bundling error: ' + error.message);
-    if (error.stack) logger.error(error.stack);
     throw error;
   }
 }
@@ -181,4 +172,4 @@ function showBuildSummary(routes, serverIslands, clientRoutes, duration) {
   }
   
   logger.bigLog('READY TO DEPLOY 🚀', { color: 'green' });
-}
+}

package/src/client/compiler.js

@@ -1,4 +1,4 @@
-// bertui/src/client/compiler.js - FIXED NODE_MODULES IMPORTS
+// bertui/src/client/compiler.js - FIXED JSX FOR DEV
 import { existsSync, mkdirSync, readdirSync, statSync } from 'fs';
 import { join, extname, relative, dirname } from 'path';
 import logger from '../logger/logger.js';
@@ -295,23 +295,21 @@ async function compileFile(srcPath, outDir, filename, relativePath, root, envVar
     const outPath = join(outDir, filename.replace(/\.(jsx|tsx|ts)$/, '.js'));
     code = fixRouterImports(code, outPath, root);
     
+    // ✅ FIXED: Use automatic JSX runtime for dev too
     const transpiler = new Bun.Transpiler({ 
       loader,
+      jsxImportSource: 'react',
       tsconfig: {
         compilerOptions: {
-          jsx: 'react',
-          jsxFactory: 'React.createElement',
-          jsxFragmentFactory: 'React.Fragment'
+          jsx: loader === 'ts' ? 'preserve' : 'react-jsx',
+          jsxImportSource: 'react'
         }
       }
     });
     let compiled = await transpiler.transform(code);
     
-    if (usesJSX(compiled) && !compiled.includes('import React')) {
-      compiled = `import React from 'react';\n${compiled}`;
-    }
+    // ✅ REMOVED: Don't manually add React for automatic runtime
     
-    // ✅ CRITICAL FIX: Don't touch node_modules imports
     compiled = fixRelativeImports(compiled);
     
     await Bun.write(outPath, compiled);
@@ -359,11 +357,7 @@ function fixRouterImports(code, outPath, root) {
 }
 
 function fixRelativeImports(code) {
-  // ✅ CRITICAL FIX: Only fix relative imports, NOT bare specifiers like 'bertui-icons'
-  // Regex explanation:
-  // - Match: from './file' or from '../file'
-  // - DON'T match: from 'bertui-icons' or from 'react'
-  
+  // ✅ CRITICAL FIX: Only fix relative imports, NOT bare specifiers
   const importRegex = /from\s+['"](\.\.?\/[^'"]+?)(?<!\.js|\.jsx|\.ts|\.tsx|\.json)['"]/g;
   
   code = code.replace(importRegex, (match, path) => {

package/types/index.d.ts

@@ -1,19 +1,80 @@
 // bertui/types/index.d.ts
 
-declare namespace React {
-  type ReactNode = any;
-}
+// Import React types
+import React from 'react';
 
 declare global {
+  // Global React namespace
+  namespace React {
+    type ReactNode = import('react').ReactNode;
+  }
+  
+  // JSX namespace
   namespace JSX {
-    type Element = any;
+    type Element = React.ReactElement;
+    interface ElementClass extends React.Component<any> {
+      render(): React.ReactNode;
+    }
+    interface ElementAttributesProperty {
+      props: {};
+    }
+    interface ElementChildrenAttribute {
+      children: {};
+    }
+    
     interface IntrinsicElements {
+      // HTML elements
+      a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+      div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+      span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+      h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
+      h2: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
+      h3: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
+      h4: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
+      h5: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
+      h6: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
+      p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
+      img: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
+      button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+      input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+      textarea: React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
+      form: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
+      label: React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
+      select: React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
+      option: React.DetailedHTMLProps<React.OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>;
+      ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
+      ol: React.DetailedHTMLProps<React.HTMLAttributes<HTMLOListElement>, HTMLOListElement>;
+      li: React.DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement>;
+      table: React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>;
+      tr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>;
+      td: React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>;
+      th: React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>;
+      header: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+      footer: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+      nav: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+      main: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+      section: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+      article: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+      aside: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+      
+      // SVG elements
+      svg: React.SVGProps<SVGSVGElement>;
+      path: React.SVGProps<SVGPathElement>;
+      circle: React.SVGProps<SVGCircleElement>;
+      rect: React.SVGProps<SVGRectElement>;
+      
+      // Allow any other element with generic props
       [elemName: string]: any;
     }
   }
+  
+  // Global React variable for JSX transform
+  const React: typeof import('react');
 }
+
 declare module 'bertui' {
   import { BertuiConfig } from 'bertui/config';
+  import React from 'react';
   
   /**
    * Logger utility

package/types/react.d.ts

@@ -1,13 +1,16 @@
 // bertui/types/react.d.ts
 import React from 'react';
 
+// Export everything from React
+export = React;
+export as namespace React;
+
 declare global {
+  // Re-export React types for global access
   namespace JSX {
     interface IntrinsicElements {
-      [elemName: string]: React.DetailedHTMLProps<
-        React.HTMLAttributes<HTMLElement>, 
-        HTMLElement
-      >;
+      // All HTML elements with proper typing
+      [key: string]: any;
     }
   }
 }