bertui 0.3.5 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bertui",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Lightning-fast React dev server powered by Bun and Elysia",
   "type": "module",
   "main": "./index.js",

package/src/build.js

@@ -32,15 +32,16 @@ export async function buildProduction(options = {}) {
     logger.info('Step 2: Building CSS with Lightning CSS...');
     await buildAllCSS(root, outDir);
     
-    
     const publicDir = join(root, 'public');
     if (existsSync(publicDir)) {
       logger.info('Step 3: Copying public assets...');
       const publicFiles = readdirSync(publicDir);
       for (const file of publicFiles) {
         const srcFile = join(publicDir, file);
-        const destFile = join(outDir, file); 
-        cpSync(srcFile, destFile);
+        const destFile = join(outDir, file);
+        if (statSync(srcFile).isFile()) {
+          cpSync(srcFile, destFile);
+        }
       }
       logger.success('Public assets copied');
     } else {
@@ -78,7 +79,7 @@ export async function buildProduction(options = {}) {
     
     logger.success('JavaScript bundled with tree-shaking');
     
-    logger.info('Step 5: Generating HTML files with page-specific meta...');
+    logger.info('Step 5: Generating SEO-optimized HTML files...');
     await generateProductionHTML(root, outDir, result, routes);
     
     rmSync(buildDir, { recursive: true });
@@ -447,80 +448,64 @@ function fixRelativeImports(code) {
   return code;
 }
 
-// NEW: Extract meta from page component
-async function extractMetaFromPage(pagePath) {
+// IMPROVED: Extract meta using regex (works on raw source code)
+function extractMetaFromSource(code) {
   try {
-    const code = await Bun.file(pagePath).text();
-    
-    // Match: export const meta = { ... }
-    const metaRegex = /export\s+const\s+meta\s*=\s*(\{[\s\S]*?\});/;
+    // Match: export const meta = { ... };
+    const metaRegex = /export\s+const\s+meta\s*=\s*\{([^}]+)\}/s;
     const match = code.match(metaRegex);
     
     if (!match) return null;
     
-    // Parse the object (simple eval - production should use AST parser)
-    const metaStr = match[1];
-    const meta = eval(`(${metaStr})`);
+    const metaContent = match[1];
+    const meta = {};
+    
+    // Extract key-value pairs
+    const pairs = metaContent.match(/(\w+)\s*:\s*(['"`])((?:(?!\2).)*)\2/g);
+    
+    if (!pairs) return null;
+    
+    pairs.forEach(pair => {
+      const [key, value] = pair.split(':').map(s => s.trim());
+      meta[key] = value.replace(/['"]/g, '');
+    });
     
     return meta;
   } catch (error) {
-    logger.warn(`Failed to extract meta from ${pagePath}: ${error.message}`);
     return null;
   }
 }
 
-async function generateProductionHTML(root, outDir, buildResult, routes) {
-  const mainBundle = buildResult.outputs.find(o => 
-    o.path.includes('main') && o.kind === 'entry-point'
-  );
-  
-  if (!mainBundle) {
-    throw new Error('Could not find main bundle in build output');
-  }
-  
-  const bundlePath = mainBundle.path.replace(outDir, '').replace(/^\//, '');
+// IMPROVED: Render component to static HTML using JSDOM-like approach
+async function renderComponentToHTML(route, bundlePath, userStylesheets, meta) {
+  // For now, we'll create a basic shell with meta tags
+  // Full SSR would require running React server-side
   
-  const srcStylesDir = join(root, 'src', 'styles');
-  let userStylesheets = '';
-  
-  if (existsSync(srcStylesDir)) {
-    const cssFiles = readdirSync(srcStylesDir).filter(f => f.endsWith('.css'));
-    userStylesheets = cssFiles.map(f => 
-      `  <link rel="stylesheet" href="/styles/${f.replace('.css', '.min.css')}">`
-    ).join('\n');
-  }
-  
-  // Generate HTML for each route
-  logger.info('Generating HTML files for each route...');
-  
-  for (const route of routes) {
-    if (route.type === 'dynamic') continue; // Skip dynamic routes
-    
-    // Extract meta from page component
-    const pageMeta = await extractMetaFromPage(route.path);
-    
-    const meta = pageMeta || {
-      title: 'BertUI App',
-      description: 'Built with BertUI - Lightning fast React development'
-    };
-    
-    const html = `<!DOCTYPE html>
+  const html = `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${meta.title}</title>
+  <title>${meta.title || 'BertUI App'}</title>
   
-  <meta name="description" content="${meta.description || ''}">
+  <meta name="description" content="${meta.description || 'Built with BertUI - Lightning fast React development'}">
   ${meta.keywords ? `<meta name="keywords" content="${meta.keywords}">` : ''}
   ${meta.author ? `<meta name="author" content="${meta.author}">` : ''}
   ${meta.themeColor ? `<meta name="theme-color" content="${meta.themeColor}">` : ''}
   
-  ${meta.ogTitle ? `<meta property="og:title" content="${meta.ogTitle}">` : `<meta property="og:title" content="${meta.title}">`}
-  ${meta.ogDescription ? `<meta property="og:description" content="${meta.ogDescription}">` : meta.description ? `<meta property="og:description" content="${meta.description}">` : ''}
+  <meta property="og:title" content="${meta.ogTitle || meta.title || 'BertUI App'}">
+  <meta property="og:description" content="${meta.ogDescription || meta.description || 'Built with BertUI'}">
   ${meta.ogImage ? `<meta property="og:image" content="${meta.ogImage}">` : ''}
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="${route}">
+  
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="${meta.ogTitle || meta.title || 'BertUI App'}">
+  <meta name="twitter:description" content="${meta.ogDescription || meta.description || 'Built with BertUI'}">
+  ${meta.ogImage ? `<meta name="twitter:image" content="${meta.ogImage}">` : ''}
   
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="canonical" href="${route}">
   
 ${userStylesheets}
   
@@ -534,12 +519,65 @@ ${userStylesheets}
     }
   }
   </script>
+  
+  <!-- SEO Preload Hints -->
+  <link rel="preconnect" href="https://esm.sh">
+  <link rel="dns-prefetch" href="https://esm.sh">
 </head>
 <body>
-  <div id="root"></div>
+  <div id="root">
+    <!-- App shell - JavaScript will hydrate this -->
+    <div style="display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:system-ui">
+      <div style="text-align:center">
+        <h1 style="font-size:2rem;margin-bottom:1rem">${meta.title || 'Loading...'}</h1>
+        <p style="color:#666">${meta.description || 'Please wait while we load your content'}</p>
+      </div>
+    </div>
+  </div>
   <script type="module" src="/${bundlePath}"></script>
 </body>
 </html>`;
+  
+  return html;
+}
+
+async function generateProductionHTML(root, outDir, buildResult, routes) {
+  const mainBundle = buildResult.outputs.find(o => 
+    o.path.includes('main') && o.kind === 'entry-point'
+  );
+  
+  if (!mainBundle) {
+    throw new Error('Could not find main bundle in build output');
+  }
+  
+  const bundlePath = mainBundle.path.replace(outDir, '').replace(/^[\/\\]/, '');
+  
+  const srcStylesDir = join(root, 'src', 'styles');
+  let userStylesheets = '';
+  
+  if (existsSync(srcStylesDir)) {
+    const cssFiles = readdirSync(srcStylesDir).filter(f => f.endsWith('.css'));
+    userStylesheets = cssFiles.map(f => 
+      `  <link rel="stylesheet" href="/styles/${f.replace('.css', '.min.css')}">`
+    ).join('\n');
+  }
+  
+  logger.info('Generating SEO-optimized HTML files...');
+  
+  for (const route of routes) {
+    if (route.type === 'dynamic') {
+      logger.info(`Skipping dynamic route: ${route.route}`);
+      continue;
+    }
+    
+    // Read source file and extract meta
+    const sourceCode = await Bun.file(route.path).text();
+    const meta = extractMetaFromSource(sourceCode) || {};
+    
+    logger.info(`Extracting meta for ${route.route}: ${JSON.stringify(meta)}`);
+    
+    // Generate HTML with meta tags and app shell
+    const html = await renderComponentToHTML(route.route, bundlePath, userStylesheets, meta);
     
     // Determine output path
     let htmlPath;
@@ -552,6 +590,6 @@ ${userStylesheets}
     }
     
     await Bun.write(htmlPath, html);
-    logger.success(`Generated ${route.route === '/' ? 'index.html' : route.route + '/index.html'}`);
+    logger.success(`Generated ${route.route === '/' ? 'index.html' : route.route + '/index.html'} with meta: ${meta.title || 'default'}`);
   }
 }