npm - bertui - Versions diffs - 0.3.6 → 0.3.7 - Mend

bertui 0.3.6 → 0.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/package.json +1 -1
package/src/build.js +90 -79
package/src/server/dev-server.js +12 -11
package/src/utils/env.js +16 -5

package/package.json CHANGED Viewed

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

package/src/build.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { join } from 'path';
+import { join, relative, basename } from 'path';
 import { existsSync, mkdirSync, rmSync, cpSync, readdirSync, statSync } from 'fs';
-import { extname, relative, dirname } from 'path';
+import { extname, dirname } from 'path';
 import logger from './logger/logger.js';
 import { buildCSS } from './build/css-builder.js';
@@ -448,41 +448,105 @@ function fixRelativeImports(code) {
   return code;
 }
-// IMPROVED: Extract meta using regex (works on raw source code)
+// ✅ FIXED: Better meta extraction that handles multi-line objects
 function extractMetaFromSource(code) {
   try {
-    // Match: export const meta = { ... };
-    const metaRegex = /export\s+const\s+meta\s*=\s*\{([^}]+)\}/s;
-    const match = code.match(metaRegex);
+    // Match export const meta = { ... } with proper brace counting
+    const metaMatch = code.match(/export\s+const\s+meta\s*=\s*\{/);
+    if (!metaMatch) return null;
+    const startIndex = metaMatch.index + metaMatch[0].length - 1; // Start at opening brace
+    let braceCount = 0;
+    let endIndex = startIndex;
+    // Count braces to find the closing brace
+    for (let i = startIndex; i < code.length; i++) {
+      if (code[i] === '{') braceCount++;
+      if (code[i] === '}') {
+        braceCount--;
+        if (braceCount === 0) {
+          endIndex = i;
+          break;
+        }
+      }
+    }
-    if (!match) return null;
+    if (endIndex === startIndex) return null;
-    const metaContent = match[1];
-    const meta = {};
+    const metaString = code.substring(startIndex, endIndex + 1);
-    // Extract key-value pairs
-    const pairs = metaContent.match(/(\w+)\s*:\s*(['"`])((?:(?!\2).)*)\2/g);
+    // Parse the meta object safely
+    const meta = {};
-    if (!pairs) return null;
+    // Extract key-value pairs (handles strings with quotes)
+    const pairRegex = /(\w+)\s*:\s*(['"`])((?:(?!\2).)*)\2/g;
+    let match;
-    pairs.forEach(pair => {
-      const [key, value] = pair.split(':').map(s => s.trim());
-      meta[key] = value.replace(/['"]/g, '');
-    });
+    while ((match = pairRegex.exec(metaString)) !== null) {
+      const key = match[1];
+      const value = match[3];
+      meta[key] = value;
+    }
-    return meta;
+    return Object.keys(meta).length > 0 ? meta : null;
   } catch (error) {
+    logger.warn(`Could not extract meta: ${error.message}`);
     return null;
   }
 }
-// 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
+// ✅ FIXED: Correct bundle path and proper hydration
+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');
+  }
+  // ✅ FIX 1: Get ONLY the relative path from dist/
+  const bundlePath = relative(outDir, mainBundle.path).replace(/\\/g, '/');
+  logger.info(`Main bundle path: ${bundlePath}`);
+  const srcStylesDir = join(root, 'src', 'styles');
+  let userStylesheets = '';
-  const html = `<!DOCTYPE html>
-<html lang="en">
+  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');
+  }
+  // Load config for default meta
+  const { loadConfig } = await import('./config/loadConfig.js');
+  const config = await loadConfig(root);
+  const defaultMeta = config.meta || {};
+  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 pageMeta = extractMetaFromSource(sourceCode);
+    // Merge page meta with default meta
+    const meta = { ...defaultMeta, ...pageMeta };
+    if (pageMeta) {
+      logger.info(`Extracted meta for ${route.route}: ${JSON.stringify(pageMeta)}`);
+    }
+    // ✅ FIX 2: Generate proper HTML with correct script path
+    const html = `<!DOCTYPE html>
+<html lang="${meta.lang || 'en'}">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -497,7 +561,7 @@ async function renderComponentToHTML(route, bundlePath, userStylesheets, meta) {
   <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 property="og:url" content="${route.route}">
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="${meta.ogTitle || meta.title || 'BertUI App'}">
@@ -505,7 +569,7 @@ async function renderComponentToHTML(route, bundlePath, userStylesheets, meta) {
   ${meta.ogImage ? `<meta name="twitter:image" content="${meta.ogImage}">` : ''}
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-  <link rel="canonical" href="${route}">
+  <link rel="canonical" href="${route.route}">
 ${userStylesheets}
@@ -519,65 +583,12 @@ ${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">
-    <!-- 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>
+  <div id="root"></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;

package/src/server/dev-server.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Elysia } from 'elysia';
 import { watch } from 'fs';
 import { join, extname } from 'path';
-import { existsSync } from 'fs';
+import { existsSync, readdirSync } from 'fs'; // ✅ FIXED: Import properly
 import logger from '../logger/logger.js';
 import { compileProject } from '../client/compiler.js';
 import { loadConfig } from '../config/loadConfig.js';
@@ -50,7 +50,7 @@ export async function startDevServer(options = {}) {
           }
         }
-        // FIXED: Handle CSS files from .bertui/styles
+        // 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);
@@ -148,7 +148,6 @@ ws.onclose = () => {
       });
     })
-    // FIXED: Serve CSS from .bertui/styles
     .get('/styles/*', async ({ params, set }) => {
       const filepath = join(stylesDir, params['*']);
       const file = Bun.file(filepath);
@@ -166,7 +165,6 @@ ws.onclose = () => {
       });
     })
-    // Around line 60, update the route handler:
     .get('/public/*', async ({ params, set }) => {
       const publicDir = join(root, 'public');
       const filepath = join(publicDir, params['*']);
@@ -200,17 +198,20 @@ ws.onclose = () => {
 function serveHTML(root, hasRouter, config) {
   const meta = config.meta || {};
-  // Find user's CSS files
+  // ✅ FIXED: Proper ESM import for fs
   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');
+    try {
+      const cssFiles = readdirSync(srcStylesDir).filter(f => f.endsWith('.css'));
+      userStylesheets = cssFiles.map(f => `  <link rel="stylesheet" href="/styles/${f}">`).join('\n');
+    } catch (error) {
+      logger.warn(`Could not read styles directory: ${error.message}`);
+    }
   }
-  const html = `
-<!DOCTYPE html>
+  const html = `<!DOCTYPE html>
 <html lang="${meta.lang || 'en'}">
 <head>
   <meta charset="UTF-8">
@@ -226,9 +227,9 @@ function serveHTML(root, hasRouter, config) {
   ${meta.ogDescription ? `<meta property="og:description" content="${meta.ogDescription || meta.description}">` : ''}
   ${meta.ogImage ? `<meta property="og:image" content="${meta.ogImage}">` : ''}
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="icon" type="image/svg+xml" href="/public/favicon.svg">
-  ${userStylesheets}
+${userStylesheets}
   <script type="importmap">
   {

package/src/utils/env.js CHANGED Viewed

@@ -11,7 +11,7 @@ export function loadEnvVariables(root) {
   // Load from process.env (already loaded by Bun/Node)
   for (const [key, value] of Object.entries(process.env)) {
-    // Only expose variables that start with VITE_ or PUBLIC_
+    // Only expose variables that start with BERTUI_ or PUBLIC_
     if (key.startsWith('BERTUI_') || key.startsWith('PUBLIC_')) {
       envVars[key] = value;
     }
@@ -28,13 +28,12 @@ export function generateEnvCode(envVars) {
     .map(([key, value]) => `  "${key}": ${JSON.stringify(value)}`)
     .join(',\n');
-  return `
-// Environment variables injected at build time
+  return `// Environment variables injected at build time
 export const env = {
 ${envObject}
 };
- Make it available globally (optional)
+// Make it available globally (optional)
 if (typeof window !== 'undefined') {
   window.__BERTUI_ENV__ = env;
 }
@@ -42,7 +41,8 @@ if (typeof window !== 'undefined') {
 }
 /**
- * Replace process.env references in code with actual values
+ * ✅ CRITICAL FIX: Replace ALL process.env references with actual values
+ * This prevents "process is not defined" errors in the browser
  */
 export function replaceEnvInCode(code, envVars) {
   let result = code;
@@ -53,5 +53,16 @@ export function replaceEnvInCode(code, envVars) {
     result = result.replace(regex, JSON.stringify(value));
   }
+  // ✅ NEW: Also replace generic process.env.NODE_ENV
+  // This is commonly used by React and other libraries
+  result = result.replace(
+    /process\.env\.NODE_ENV/g,
+    JSON.stringify('production')
+  );
+  // ✅ NEW: Remove any remaining process references that might cause errors
+  // Replace with undefined to avoid runtime errors
+  result = result.replace(/\bprocess\b/g, 'undefined');
   return result;
 }