bertui 1.2.8 → 2.0.0

package/src/loading/index.js

@@ -1,210 +0,0 @@
-// bertui/src/loading/index.js
-// Built-in loading states - per route loading UI
-
-import { join, extname, basename } from 'path';
-import { existsSync, readdirSync } from 'fs';
-import logger from '../logger/logger.js';
-
-/**
- * Default loading spinner HTML injected into pages
- * Beautiful, zero-dependency, CSS-only spinner
- */
-export const DEFAULT_LOADING_HTML = `
-<div id="bertui-loading" style="
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(255,255,255,0.95);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  z-index: 99999;
-  font-family: system-ui, sans-serif;
-  transition: opacity 0.2s ease;
-">
-  <div style="
-    width: 40px;
-    height: 40px;
-    border: 3px solid #e5e7eb;
-    border-top-color: #10b981;
-    border-radius: 50%;
-    animation: bertui-spin 0.7s linear infinite;
-  "></div>
-  <p style="margin-top: 16px; color: #6b7280; font-size: 14px; font-weight: 500;">Loading...</p>
-</div>
-<style>
-  @keyframes bertui-spin {
-    to { transform: rotate(360deg); }
-  }
-</style>
-<script>
-  // Remove loading screen once React mounts
-  window.__BERTUI_HIDE_LOADING__ = function() {
-    const el = document.getElementById('bertui-loading');
-    if (el) {
-      el.style.opacity = '0';
-      setTimeout(() => el.remove(), 200);
-    }
-  };
-  
-  // Fallback: remove after 5s no matter what
-  setTimeout(() => window.__BERTUI_HIDE_LOADING__?.(), 5000);
-  
-  // React root observer - hide when #root gets children
-  const observer = new MutationObserver(() => {
-    const root = document.getElementById('root');
-    if (root && root.children.length > 0) {
-      window.__BERTUI_HIDE_LOADING__?.();
-      observer.disconnect();
-    }
-  });
-  const root = document.getElementById('root');
-  if (root) observer.observe(root, { childList: true, subtree: true });
-</script>
-`;
-
-/**
- * Discover per-route loading components from src/pages/
- * Convention: create a loading.tsx next to your page file
- * e.g., src/pages/blog/loading.tsx → shown while /blog loads
- */
-export async function discoverLoadingComponents(root) {
-  const pagesDir = join(root, 'src', 'pages');
-  if (!existsSync(pagesDir)) return {};
-
-  const loadingComponents = {};
-
-  function scan(dir, routeBase = '') {
-    const entries = readdirSync(dir, { withFileTypes: true });
-
-    for (const entry of entries) {
-      const fullPath = join(dir, entry.name);
-
-      if (entry.isDirectory()) {
-        scan(fullPath, `${routeBase}/${entry.name}`);
-      } else if (entry.isFile()) {
-        const ext = extname(entry.name);
-        const name = basename(entry.name, ext);
-
-        if (name === 'loading' && ['.jsx', '.tsx', '.js', '.ts'].includes(ext)) {
-          const route = routeBase || '/';
-          loadingComponents[route] = {
-            path: fullPath,
-            route,
-          };
-          logger.debug(`⏳ Loading component: ${route} → ${entry.name}`);
-        }
-      }
-    }
-  }
-
-  scan(pagesDir);
-
-  if (Object.keys(loadingComponents).length > 0) {
-    logger.success(`✅ ${Object.keys(loadingComponents).length} loading component(s) found`);
-  }
-
-  return loadingComponents;
-}
-
-/**
- * Compile loading components to .bertui/compiled/loading/
- */
-export async function compileLoadingComponents(root, compiledDir) {
-  const components = await discoverLoadingComponents(root);
-  if (Object.keys(components).length === 0) return components;
-
-  const outDir = join(compiledDir, 'loading');
-  const { mkdirSync } = await import('fs');
-  mkdirSync(outDir, { recursive: true });
-
-  for (const [route, comp] of Object.entries(components)) {
-    const ext = extname(comp.path);
-    const loader = ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx';
-    const safeName = route.replace(/\//g, '_').replace(/^_/, '') || 'root';
-
-    try {
-      let code = await Bun.file(comp.path).text();
-
-      if (!code.includes('import React')) {
-        code = `import React from 'react';\n${code}`;
-      }
-
-      const transpiler = new Bun.Transpiler({
-        loader,
-        target: 'browser',
-        tsconfig: {
-          compilerOptions: {
-            jsx: 'react',
-            jsxFactory: 'React.createElement',
-            jsxFragmentFactory: 'React.Fragment',
-          },
-        },
-      });
-
-      const compiled = await transpiler.transform(code);
-      await Bun.write(join(outDir, `${safeName}.js`), compiled);
-      components[route].compiledPath = join(outDir, `${safeName}.js`);
-      components[route].compiledName = safeName;
-
-    } catch (err) {
-      logger.error(`Failed to compile loading component for ${route}: ${err.message}`);
-    }
-  }
-
-  return components;
-}
-
-/**
- * Generate loading-aware router code
- * Wraps each route component with Suspense + loading fallback
- */
-export function generateLoadingAwareRouter(routes, loadingComponents) {
-  const hasLoading = Object.keys(loadingComponents).length > 0;
-
-  const loadingImports = hasLoading
-    ? Object.entries(loadingComponents)
-        .map(([route, comp]) => {
-          const safeName = comp.compiledName || (route.replace(/\//g, '_').replace(/^_/, '') || 'root');
-          return `import Loading_${safeName} from './loading/${safeName}.js';`;
-        })
-        .join('\n')
-    : '';
-
-  const getLoadingComponent = (route) => {
-    // Exact match
-    if (loadingComponents[route]) {
-      const safeName = loadingComponents[route].compiledName || 
-        (route.replace(/\//g, '_').replace(/^_/, '') || 'root');
-      return `Loading_${safeName}`;
-    }
-
-    // Parent route match
-    const segments = route.split('/').filter(Boolean);
-    while (segments.length > 0) {
-      segments.pop();
-      const parent = '/' + segments.join('/') || '/';
-      if (loadingComponents[parent]) {
-        const safeName = loadingComponents[parent].compiledName || 
-          (parent.replace(/\//g, '_').replace(/^_/, '') || 'root');
-        return `Loading_${safeName}`;
-      }
-    }
-
-    return null;
-  };
-
-  return { loadingImports, getLoadingComponent };
-}
-
-/**
- * Generate the default loading screen script to inject into HTML
- */
-export function getLoadingScript(customText = 'Loading...', color = '#10b981') {
-  return DEFAULT_LOADING_HTML
-    .replace('Loading...', customText)
-    .replace('#10b981', color);
-}

package/src/logger/logger.js

@@ -1,320 +0,0 @@
-// bertui/src/logger/logger.js
-// Compact, progress-style CLI — replaces verbose line-by-line logs
-
-import { createWriteStream } from 'fs';
-import { join } from 'path';
-import { mkdirSync, existsSync } from 'fs';
-
-// ── ANSI helpers ─────────────────────────────────────────────────────────────
-const C = {
-  reset:    '\x1b[0m',
-  bold:     '\x1b[1m',
-  dim:      '\x1b[2m',
-  red:      '\x1b[31m',
-  green:    '\x1b[32m',
-  yellow:   '\x1b[33m',
-  blue:     '\x1b[34m',
-  magenta:  '\x1b[35m',
-  cyan:     '\x1b[36m',
-  white:    '\x1b[37m',
-  bgBlack:  '\x1b[40m',
-  bgRed:    '\x1b[41m',
-  bgGreen:  '\x1b[42m',
-  bgBlue:   '\x1b[44m',
-  bgCyan:   '\x1b[46m',
-  bgWhite:  '\x1b[47m',
-  gray:     '\x1b[90m',
-};
-
-const isTTY = process.stdout.isTTY;
-
-// ── Spinner frames ────────────────────────────────────────────────────────────
-const SPINNER = ['⠋','⠙','⠹','⠸','⠼','⠴','⠦','⠧','⠇','⠏'];
-let _spinnerFrame = 0;
-let _spinnerTimer = null;
-let _currentSpinnerLine = '';
-
-// ── Internal state ────────────────────────────────────────────────────────────
-let _mode       = 'idle';   // 'idle' | 'build' | 'dev'
-let _totalSteps = 10;
-let _stepIndex  = 0;
-let _stepLabel  = '';
-let _stepDetail = '';
-let _errors     = [];
-let _warnings   = [];
-let _startTime  = null;
-
-// ── Header ────────────────────────────────────────────────────────────────────
-export function printHeader(mode = 'BUILD') {
-  _mode      = mode.toLowerCase();
-  _startTime = Date.now();
-  _errors    = [];
-  _warnings  = [];
-
-  const W = 46;
-  const bar = '█'.repeat(W);
-
-  // Big block-letter BERTUI (6 rows)
-  const BIG = [
-    '  ██████╗ ███████╗██████╗ ████████╗██╗   ██╗██╗',
-    '  ██╔══██╗██╔════╝██╔══██╗╚══██╔══╝██║   ██║██║',
-    '  ██████╔╝█████╗  ██████╔╝   ██║   ██║   ██║██║',
-    '  ██╔══██╗██╔══╝  ██╔══██╗   ██║   ██║   ██║██║',
-    '  ██████╔╝███████╗██║  ██║   ██║   ╚██████╔╝██║',
-    '  ╚═════╝ ╚══════╝╚═╝  ╚═╝   ╚═╝    ╚═════╝ ╚═╝',
-  ];
-
-  process.stdout.write('\n');
-  process.stdout.write(`${C.cyan}${C.bold}  ${bar}${C.reset}\n`);
-  for (const row of BIG) {
-    process.stdout.write(`${C.cyan}${C.bold}${row}${C.reset}\n`);
-  }
-  process.stdout.write(`${C.gray}  by Pease Ernest${C.reset}${C.gray}  ·  ${C.reset}${C.white}${C.bold}${mode.toUpperCase()}${C.reset}\n`);
-  process.stdout.write(`${C.cyan}${C.bold}  ${bar}${C.reset}\n`);
-  process.stdout.write('\n');
-}
-
-// ── Step progress ─────────────────────────────────────────────────────────────
-export function step(index, total, label, detail = '') {
-  _stepIndex  = index;
-  _totalSteps = total;
-  _stepLabel  = label;
-  _stepDetail = detail;
-  _stopSpinner();
-  _renderStep('running', detail);
-  _startSpinner();
-}
-
-export function stepDone(label, detail = '') {
-  _stopSpinner();
-  _clearLine();
-  const idx = String(_stepIndex).padStart(2, ' ');
-  const lbl = (label || _stepLabel).padEnd(24, ' ');
-  const det = detail ? `${C.gray}${_truncate(detail, 38)}${C.reset}` : '';
-  process.stdout.write(
-    `  ${C.gray}[${idx}/${_totalSteps}]${C.reset} ${C.green}✓${C.reset}  ${C.white}${lbl}${C.reset} ${det}\n`
-  );
-}
-
-export function stepFail(label, detail = '') {
-  _stopSpinner();
-  _clearLine();
-  const idx = String(_stepIndex).padStart(2, ' ');
-  const lbl = (label || _stepLabel).padEnd(24, ' ');
-  process.stdout.write(
-    `  ${C.gray}[${idx}/${_totalSteps}]${C.reset} ${C.red}✗${C.reset}  ${C.white}${lbl}${C.reset} ${C.red}${detail}${C.reset}\n`
-  );
-}
-
-// ── Inline file progress (replaces "Progress: 2/2 (100%)") ───────────────────
-export function fileProgress(current, total, filename) {
-  if (!isTTY) return;
-  _clearLine();
-  const pct  = Math.round((current / total) * 100);
-  const bar  = _bar(pct, 16);
-  const name = _truncate(filename, 30);
-  _currentSpinnerLine =
-    `  ${C.gray}[${String(_stepIndex).padStart(2,' ')}/${_totalSteps}]${C.reset}` +
-    ` ${C.cyan}⠸${C.reset}  ${C.white}${_stepLabel.padEnd(24,' ')}${C.reset}` +
-    ` ${bar} ${C.gray}${current}/${total}${C.reset} ${C.dim}${name}${C.reset}`;
-  process.stdout.write('\r' + _currentSpinnerLine);
-}
-
-// ── Simple log levels (used internally, suppressed in compact mode) ───────────
-export function info(msg) {
-  _debugLog('INFO', msg);
-}
-
-export function success(msg) {
-  _debugLog('SUCCESS', msg);
-}
-
-export function warn(msg) {
-  _warnings.push(msg);
-  _stopSpinner();
-  _clearLine();
-  process.stdout.write(`  ${C.yellow}⚠${C.reset}  ${C.yellow}${msg}${C.reset}\n`);
-  if (_stepLabel) _startSpinner();
-}
-
-export function error(msg) {
-  _errors.push(msg);
-  _stopSpinner();
-  _clearLine();
-  process.stdout.write(`  ${C.red}✗${C.reset}  ${C.red}${msg}${C.reset}\n`);
-}
-
-export function debug(msg) {
-  _debugLog('DEBUG', msg);
-}
-
-// ── Table (kept for route/island tables but made compact) ─────────────────────
-export function table(rows) {
-  if (!rows || rows.length === 0) return;
-  _stopSpinner();
-  const keys = Object.keys(rows[0]).filter(k => k !== '');
-  const widths = keys.map(k =>
-    Math.max(k.length, ...rows.map(r => String(r[k] ?? '').length))
-  );
-
-  const hr = '  ' + widths.map(w => '─'.repeat(w + 2)).join('┼') ;
-  const header = '  ' + keys.map((k, i) => ` ${C.bold}${k.padEnd(widths[i])}${C.reset} `).join('│');
-
-  process.stdout.write(`${C.gray}${hr}${C.reset}\n`);
-  process.stdout.write(`${header}\n`);
-  process.stdout.write(`${C.gray}${hr}${C.reset}\n`);
-
-  for (const row of rows) {
-    const line = '  ' + keys.map((k, i) => ` ${String(row[k] ?? '').padEnd(widths[i])} `).join(`${C.gray}│${C.reset}`);
-    process.stdout.write(`${line}\n`);
-  }
-  process.stdout.write(`${C.gray}${hr}${C.reset}\n`);
-
-  if (_stepLabel) _startSpinner();
-}
-
-// ── bigLog — replaced by section headers ─────────────────────────────────────
-export function bigLog(title, opts = {}) {
-  _stopSpinner();
-  _clearLine();
-  process.stdout.write(`\n  ${C.bold}${C.cyan}── ${title} ──${C.reset}\n\n`);
-  if (_stepLabel) _startSpinner();
-}
-
-// ── Build/Dev summary ─────────────────────────────────────────────────────────
-export function printSummary(stats = {}) {
-  _stopSpinner();
-  // Close the log stream before printing summary
-  _closeLogStream();
-  
-  process.stdout.write('\n');
-
-  const dur = _startTime ? `${((Date.now() - _startTime) / 1000).toFixed(2)}s` : '';
-
-  process.stdout.write(`${C.cyan}${C.bold}  ────────────────────────────────────────────${C.reset}\n`);
-  process.stdout.write(`${C.green}${C.bold}  ✓ Done${C.reset}${dur ? `  ${C.gray}${dur}${C.reset}` : ''}\n`);
-
-  if (stats.routes)       _summaryLine('Routes',          stats.routes);
-  if (stats.serverIslands)_summaryLine('Server Islands',  stats.serverIslands);
-  if (stats.interactive)  _summaryLine('Interactive',     stats.interactive);
-  if (stats.staticRoutes) _summaryLine('Static',          stats.staticRoutes);
-  if (stats.jsSize)       _summaryLine('JS bundle',       stats.jsSize);
-  if (stats.cssSize)      _summaryLine('CSS bundle',      stats.cssSize);
-  if (stats.outDir)       _summaryLine('Output',          stats.outDir);
-
-  if (_warnings.length > 0) {
-    process.stdout.write(`\n  ${C.yellow}${_warnings.length} warning(s)${C.reset}\n`);
-  }
-  if (_errors.length > 0) {
-    process.stdout.write(`\n  ${C.red}${_errors.length} error(s)${C.reset}\n`);
-    _errors.forEach(e => process.stdout.write(`  ${C.red}  · ${e}${C.reset}\n`));
-  }
-
-  process.stdout.write(`${C.cyan}${C.bold}  ────────────────────────────────────────────${C.reset}\n\n`);
-}
-
-function _summaryLine(label, value) {
-  process.stdout.write(
-    `  ${C.gray}${label.padEnd(18)}${C.reset}${C.white}${value}${C.reset}\n`
-  );
-}
-
-// ── Spinner internals ─────────────────────────────────────────────────────────
-function _startSpinner() {
-  if (!isTTY || _spinnerTimer) return;
-  _spinnerTimer = setInterval(() => {
-    _spinnerFrame = (_spinnerFrame + 1) % SPINNER.length;
-    _renderStep('running', _stepDetail);
-  }, 80);
-}
-
-function _stopSpinner() {
-  if (_spinnerTimer) {
-    clearInterval(_spinnerTimer);
-    _spinnerTimer = null;
-  }
-}
-
-function _renderStep(state, detail = '') {
-  if (!isTTY) return;
-  _clearLine();
-  const spin = SPINNER[_spinnerFrame];
-  const idx  = String(_stepIndex).padStart(2, ' ');
-  const lbl  = _stepLabel.padEnd(24, ' ');
-  const det  = detail ? `${C.gray}${_truncate(detail, 38)}${C.reset}` : '';
-  _currentSpinnerLine =
-    `  ${C.gray}[${idx}/${_totalSteps}]${C.reset} ${C.cyan}${spin}${C.reset}  ${C.white}${lbl}${C.reset} ${det}`;
-  process.stdout.write('\r' + _currentSpinnerLine);
-}
-
-function _clearLine() {
-  if (!isTTY) return;
-  process.stdout.write('\r\x1b[2K');
-}
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-function _bar(pct, width) {
-  const filled = Math.round((pct / 100) * width);
-  const empty  = width - filled;
-  return `${C.cyan}${'█'.repeat(filled)}${C.gray}${'░'.repeat(empty)}${C.reset}`;
-}
-
-function _truncate(str, max) {
-  if (!str) return '';
-  str = String(str);
-  return str.length > max ? '…' + str.slice(-(max - 1)) : str;
-}
-
-// ── Debug file log (always written, never shown in terminal) ──────────────────
-let _logStream = null;
-function _debugLog(level, msg) {
-  if (!_logStream) {
-    try {
-      const logDir = join(process.cwd(), '.bertui');
-      if (!existsSync(logDir)) {
-        mkdirSync(logDir, { recursive: true });
-      }
-      
-      _logStream = createWriteStream(
-        join(logDir, 'dev.log'),
-        { flags: 'a' }
-      );
-    } catch (err) {
-      return;
-    }
-  }
-  const ts = new Date().toISOString().substring(11, 23);
-  _logStream.write(`[${ts}] [${level}] ${msg}\n`);
-}
-
-// NEW: Function to close the log stream
-function _closeLogStream() {
-  if (_logStream) {
-    _logStream.end();
-    _logStream = null;
-  }
-}
-
-// NEW: Cleanup function to be called when done
-export function cleanup() {
-  _stopSpinner();
-  _closeLogStream();
-}
-
-// ── Default export ────────────────────────────────────────────────────────────
-export default {
-  printHeader,
-  step,
-  stepDone,
-  stepFail,
-  fileProgress,
-  info,
-  success,
-  warn,
-  error,
-  debug,
-  table,
-  bigLog,
-  printSummary,
-  cleanup,  // Export cleanup function
-};

package/src/logger/notes.md

@@ -1,20 +0,0 @@
-here we will use the ernest logger libraray instead of chalk because i want colourfull logs and not just normal b/w logs the whole module is exported for use in the libraray 
-it is a file that is complete and needs no updated later on 
-// src/utils/logger.js
-import { createLogger } from 'ernest-logger';
-
-// Create logger instance for BertUI
-const logger = createLogger({
-  time: true,
-  emoji: true,
-  level: 'info',
-  prefix: '[BertUI]',
-  customLevels: {
-    server: { color: 'brightCyan', emoji: '🌐', priority: 2 },
-    build: { color: 'brightGreen', emoji: '📦', priority: 2 },
-    hmr: { color: 'brightYellow', emoji: '🔥', priority: 2 }
-  }
-});
-
-// Export the logger
-export default logger;