bertui 1.1.0 → 1.1.2

package/src/client/compiler.js

@@ -1,3 +1,4 @@
+// bertui/src/client/compiler.js - FIXED NODE_MODULES IMPORTS
 import { existsSync, mkdirSync, readdirSync, statSync } from 'fs';
 import { join, extname, relative, dirname } from 'path';
 import logger from '../logger/logger.js';
@@ -73,12 +74,10 @@ async function discoverRoutes(pagesDir) {
         await scanDirectory(fullPath, relativePath);
       } else if (entry.isFile()) {
         const ext = extname(entry.name);
-        
         if (ext === '.css') continue;
         
         if (['.jsx', '.tsx', '.js', '.ts'].includes(ext)) {
           const fileName = entry.name.replace(ext, '');
-          
           let route = '/' + relativePath.replace(/\\/g, '/').replace(ext, '');
           
           if (fileName === 'index') {
@@ -100,7 +99,6 @@ async function discoverRoutes(pagesDir) {
   }
   
   await scanDirectory(pagesDir);
-  
   routes.sort((a, b) => {
     if (a.type === b.type) {
       return a.route.localeCompare(b.route);
@@ -141,11 +139,7 @@ export function Router({ routes }) {
 
   useEffect(() => {
     matchAndSetRoute(window.location.pathname);
-
-    const handlePopState = () => {
-      matchAndSetRoute(window.location.pathname);
-    };
-
+    const handlePopState = () => matchAndSetRoute(window.location.pathname);
     window.addEventListener('popstate', handlePopState);
     return () => window.removeEventListener('popstate', handlePopState);
   }, [routes]);
@@ -158,27 +152,21 @@ export function Router({ routes }) {
         return;
       }
     }
-
     for (const route of routes) {
       if (route.type === 'dynamic') {
         const pattern = route.path.replace(/\\[([^\\]]+)\\]/g, '([^/]+)');
         const regex = new RegExp('^' + pattern + '$');
         const match = pathname.match(regex);
-
         if (match) {
           const paramNames = [...route.path.matchAll(/\\[([^\\]]+)\\]/g)].map(m => m[1]);
           const extractedParams = {};
-          paramNames.forEach((name, i) => {
-            extractedParams[name] = match[i + 1];
-          });
-
+          paramNames.forEach((name, i) => { extractedParams[name] = match[i + 1]; });
           setCurrentRoute(route);
           setParams(extractedParams);
           return;
         }
       }
     }
-
     setCurrentRoute(null);
     setParams({});
   }
@@ -188,31 +176,21 @@ export function Router({ routes }) {
     matchAndSetRoute(path);
   }
 
-  const routerValue = {
-    currentRoute,
-    params,
-    navigate,
-    pathname: window.location.pathname
-  };
-
   const Component = currentRoute?.component;
-
   return React.createElement(
     RouterContext.Provider,
-    { value: routerValue },
-    Component ? React.createElement(Component, { params }) : React.createElement(NotFound, null)
+    { value: { currentRoute, params, navigate, pathname: window.location.pathname } },
+    Component ? React.createElement(Component, { params }) : React.createElement(NotFound)
   );
 }
 
 export function Link({ to, children, ...props }) {
   const { navigate } = useRouter();
-
-  function handleClick(e) {
-    e.preventDefault();
-    navigate(to);
-  }
-
-  return React.createElement('a', { href: to, onClick: handleClick, ...props }, children);
+  return React.createElement('a', { 
+    href: to, 
+    onClick: (e) => { e.preventDefault(); navigate(to); }, 
+    ...props 
+  }, children);
 }
 
 function NotFound() {
@@ -250,7 +228,6 @@ ${routeConfigs}
 
 async function compileDirectory(srcDir, outDir, root, envVars) {
   const stats = { files: 0, skipped: 0 };
-  
   const files = readdirSync(srcDir);
   
   for (const file of files) {
@@ -287,7 +264,6 @@ async function compileDirectory(srcDir, outDir, root, envVars) {
         code = replaceEnvInCode(code, envVars);
         code = fixRouterImports(code, outPath, root);
         
-        // ✅ CRITICAL FIX: Ensure React import for .js files with JSX
         if (usesJSX(code) && !code.includes('import React')) {
           code = `import React from 'react';\n${code}`;
         }
@@ -331,11 +307,11 @@ async function compileFile(srcPath, outDir, filename, relativePath, root, envVar
     });
     let compiled = await transpiler.transform(code);
     
-    // ✅ CRITICAL FIX: Always add React import if JSX is present
     if (usesJSX(compiled) && !compiled.includes('import React')) {
       compiled = `import React from 'react';\n${compiled}`;
     }
     
+    // ✅ CRITICAL FIX: Don't touch node_modules imports
     compiled = fixRelativeImports(compiled);
     
     await Bun.write(outPath, compiled);
@@ -346,13 +322,12 @@ async function compileFile(srcPath, outDir, filename, relativePath, root, envVar
   }
 }
 
-// ✅ NEW: Detect if code uses JSX
 function usesJSX(code) {
   return code.includes('React.createElement') || 
          code.includes('React.Fragment') ||
-         /<[A-Z]/.test(code) || // Detects JSX tags like <Component>
-         code.includes('jsx(') || // Runtime JSX
-         code.includes('jsxs('); // Runtime JSX
+         /<[A-Z]/.test(code) ||
+         code.includes('jsx(') ||
+         code.includes('jsxs(');
 }
 
 function removeCSSImports(code) {
@@ -384,13 +359,19 @@ function fixRouterImports(code, outPath, root) {
 }
 
 function fixRelativeImports(code) {
-  const importRegex = /from\s+['"](\.\.[\/\\]|\.\/)((?:[^'"]+?)(?<!\.js|\.jsx|\.ts|\.tsx|\.json))['"];?/g;
+  // ✅ 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'
+  
+  const importRegex = /from\s+['"](\.\.?\/[^'"]+?)(?<!\.js|\.jsx|\.ts|\.tsx|\.json)['"]/g;
   
-  code = code.replace(importRegex, (match, prefix, path) => {
+  code = code.replace(importRegex, (match, path) => {
+    // Don't add .js if path already has an extension or ends with /
     if (path.endsWith('/') || /\.\w+$/.test(path)) {
       return match;
     }
-    return `from '${prefix}${path}.js';`;
+    return `from '${path}.js'`;
   });
   
   return code;

package/src/config/defaultConfig.js

@@ -1,16 +1,36 @@
+// bertui/src/config/defaultConfig.js
+// Default configuration used when bertui.config.js is not present
+
 export const defaultConfig = {
+  // Site information (used for sitemap generation)
+  siteName: "BertUI App",
+  baseUrl: "http://localhost:3000", // Default to localhost
+  
+  // HTML Meta Tags (SEO)
   meta: {
-    title: "BertUI App",
-    description: "Built with BertUI - Lightning fast React development",
-    keywords: "react, bun, bertui",
+    title: "BertUI - Lightning Fast React",
+    description: "Build lightning-fast React applications with file-based routing powered by Bun",
+    keywords: "react, bun, bertui, fast, file-based routing",
     author: "Pease Ernest",
-    ogImage: "/og-image.png",
-    themeColor: "#f30606ff",
-    lang: "en"
+    themeColor: "#667eea",
+    lang: "en",
+    
+    // Open Graph for social sharing
+    ogTitle: "BertUI - Lightning Fast React Framework",
+    ogDescription: "Build lightning-fast React apps with zero config",
+    ogImage: "/og-image.png"
   },
+  
+  // App Shell Configuration
   appShell: {
     loading: true,
     loadingText: "Loading...",
     backgroundColor: "#ffffff"
+  },
+  
+  // robots.txt Configuration
+  robots: {
+    disallow: [], // No paths blocked by default
+    crawlDelay: null // No crawl delay by default
   }
 };

package/src/config/loadConfig.js

@@ -1,4 +1,4 @@
-// src/config/loadConfig.js
+// src/config/loadConfig.js - COMPLETE CORRECTED VERSION
 import { join } from 'path';
 import { existsSync } from 'fs';
 import { defaultConfig } from './defaultConfig.js';
@@ -13,6 +13,13 @@ export async function loadConfig(root) {
       const userConfig = await import(configPath);
       logger.success('Loaded bertui.config.js');
       
+      // DEBUG: Show what we loaded
+      logger.info(`📋 Config loaded: ${JSON.stringify({
+        hasSiteName: !!(userConfig.default?.siteName || userConfig.siteName),
+        hasBaseUrl: !!(userConfig.default?.baseUrl || userConfig.baseUrl),
+        hasRobots: !!(userConfig.default?.robots || userConfig.robots)
+      })}`);
+      
       // Merge user config with defaults
       return mergeConfig(defaultConfig, userConfig.default || userConfig);
     } catch (error) {
@@ -26,8 +33,17 @@ export async function loadConfig(root) {
 }
 
 function mergeConfig(defaults, user) {
-  return {
-    meta: { ...defaults.meta, ...(user.meta || {}) },
-    appShell: { ...defaults.appShell, ...(user.appShell || {}) }
-  };
+  // Start with user config (so user values override defaults)
+  const merged = { ...user };
+  
+  // Deep merge for nested objects
+  merged.meta = { ...defaults.meta, ...(user.meta || {}) };
+  merged.appShell = { ...defaults.appShell, ...(user.appShell || {}) };
+  merged.robots = { ...defaults.robots, ...(user.robots || {}) };
+  
+  // Ensure we have required top-level fields
+  if (!merged.siteName) merged.siteName = defaults.siteName;
+  if (!merged.baseUrl) merged.baseUrl = defaults.baseUrl;
+  
+  return merged;
 }

package/src/pagebuilder/core.js

@@ -0,0 +1,191 @@
+// bertui/src/pagebuilder/core.js
+import { join } from 'path';
+import { existsSync, mkdirSync } from 'fs';
+import logger from '../logger/logger.js';
+
+/**
+ * Run page builder to generate pages from config
+ * @param {string} root - Project root directory
+ * @param {Object} config - BertUI configuration
+ */
+export async function runPageBuilder(root, config) {
+  const pagesDir = join(root, 'src', 'pages');
+  
+  if (!config.pageBuilder || typeof config.pageBuilder !== 'object') {
+    logger.debug('No page builder configuration found');
+    return;
+  }
+  
+  const { pages } = config.pageBuilder;
+  
+  if (!pages || !Array.isArray(pages) || pages.length === 0) {
+    logger.debug('No pages defined in page builder');
+    return;
+  }
+  
+  logger.info(`📄 Page Builder: Generating ${pages.length} page(s)...`);
+  
+  // Ensure pages directory exists
+  const generatedDir = join(pagesDir, 'generated');
+  if (!existsSync(generatedDir)) {
+    mkdirSync(generatedDir, { recursive: true });
+  }
+  
+  for (const page of pages) {
+    try {
+      await generatePage(page, generatedDir);
+      logger.success(`✅ Generated: ${page.name}`);
+    } catch (error) {
+      logger.error(`❌ Failed to generate ${page.name}: ${error.message}`);
+    }
+  }
+}
+
+/**
+ * Generate a single page from configuration
+ * @param {Object} pageConfig - Page configuration
+ * @param {string} outputDir - Output directory
+ */
+async function generatePage(pageConfig, outputDir) {
+  const { name, type, data } = pageConfig;
+  
+  if (!name) {
+    throw new Error('Page name is required');
+  }
+  
+  let pageContent = '';
+  
+  switch (type) {
+    case 'markdown':
+      pageContent = generateMarkdownPage(name, data);
+      break;
+    
+    case 'json':
+      pageContent = generateJsonPage(name, data);
+      break;
+    
+    case 'custom':
+      pageContent = data.template || generateDefaultPage(name, data);
+      break;
+    
+    default:
+      pageContent = generateDefaultPage(name, data);
+  }
+  
+  // Write the generated page
+  const filename = name.toLowerCase().replace(/\s+/g, '-') + '.jsx';
+  const filepath = join(outputDir, filename);
+  
+  await Bun.write(filepath, pageContent);
+}
+
+/**
+ * Generate a default React page
+ */
+function generateDefaultPage(name, data) {
+  const title = data?.title || name;
+  const content = data?.content || `<p>Welcome to ${name}</p>`;
+  
+  return `// Auto-generated page: ${name}
+import React from 'react';
+
+export const title = "${title}";
+export const description = "${data?.description || `${name} page`}";
+
+export default function ${sanitizeComponentName(name)}() {
+  return (
+    <div>
+      <h1>${title}</h1>
+      ${content}
+    </div>
+  );
+}
+`;
+}
+
+/**
+ * Generate a page from Markdown data
+ */
+function generateMarkdownPage(name, data) {
+  const title = data?.title || name;
+  const markdown = data?.markdown || '';
+  
+  // Simple markdown to JSX conversion
+  const jsxContent = convertMarkdownToJSX(markdown);
+  
+  return `// Auto-generated markdown page: ${name}
+import React from 'react';
+
+export const title = "${title}";
+export const description = "${data?.description || `${name} page`}";
+
+export default function ${sanitizeComponentName(name)}() {
+  return (
+    <div className="markdown-content">
+      ${jsxContent}
+    </div>
+  );
+}
+`;
+}
+
+/**
+ * Generate a page from JSON data
+ */
+function generateJsonPage(name, data) {
+  const title = data?.title || name;
+  const items = data?.items || [];
+  
+  return `// Auto-generated JSON page: ${name}
+import React from 'react';
+
+export const title = "${title}";
+export const description = "${data?.description || `${name} page`}";
+
+const items = ${JSON.stringify(items, null, 2)};
+
+export default function ${sanitizeComponentName(name)}() {
+  return (
+    <div>
+      <h1>${title}</h1>
+      <ul>
+        {items.map((item, index) => (
+          <li key={index}>{item.title || item.name || item}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+`;
+}
+
+/**
+ * Convert markdown to JSX (basic implementation)
+ */
+function convertMarkdownToJSX(markdown) {
+  let jsx = markdown
+    // Headers
+    .replace(/^### (.*$)/gm, '<h3>$1</h3>')
+    .replace(/^## (.*$)/gm, '<h2>$1</h2>')
+    .replace(/^# (.*$)/gm, '<h1>$1</h1>')
+    // Bold
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    // Italic
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    // Paragraphs
+    .split('\n\n')
+    .map(para => para.trim() ? `<p>${para}</p>` : '')
+    .join('\n      ');
+  
+  return jsx;
+}
+
+/**
+ * Sanitize component name (must be valid React component name)
+ */
+function sanitizeComponentName(name) {
+  return name
+    .replace(/[^a-zA-Z0-9]/g, '')
+    .replace(/^[0-9]/, 'Page$&')
+    .replace(/^./, c => c.toUpperCase());
+}