bertui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 BunElysiaReact
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,52 @@
+# BertUI ⚡
+
+Lightning-fast React development powered by Bun.
+
+## Features
+
+- ⚡ **Blazing Fast** - Built on Bun
+- 🎨 **Built-in Animations** - 15+ CSS utility classes
+- 🔥 **Hot Module Replacement** - Instant updates
+- 📦 **Zero Config** - Works out of the box
+- 🚀 **Production Ready** - Optimized builds
+
+## Installation
+```bash
+bun add bertui react react-dom
+```
+
+## Usage
+```javascript
+// src/main.jsx
+import 'bertui/styles';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <h1 className="split fadein">Hello BertUI!</h1>
+);
+```
+
+## Commands
+```bash
+bertui dev         # Start dev server
+bertui build       # Build for production
+```
+
+## CSS Classes
+
+- `.split` - Split text animation
+- `.moveright` - Slide from left
+- `.moveleft` - Slide from right
+- `.fadein` - Fade in
+- `.scalein` - Scale in
+- `.bouncein` - Bounce in
+- `.slideup` - Slide up
+- `.slidedown` - Slide down
+- `.rotatein` - Rotate in
+- `.pulse` - Pulse animation
+- `.shake` - Shake animation
+
+## License
+
+MIT

package/bin/bertui.js

@@ -0,0 +1,8 @@
+#!/usr/bin/env bun
+// bin/bertui.js
+
+// Import the CLI program from index
+import { program } from '../index.js';
+
+// Run it
+program();

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "bertui",
+  "version": "0.1.0",
+  "description": "Lightning-fast React dev server powered by Bun and Elysia",
+  "type": "module",
+  "main": "./index.ts",
+  "bin": {
+    "bertui": "./bin/bertui.js"
+  },
+  "exports": {
+    ".": "./index.js",
+    "./styles": "./src/styles/bertui.css",
+    "./logger": "./src/logger/logger.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "index.ts",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "bun bin/bertui.js dev",
+    "build": "bun bin/bertui.js build",
+    "test": "cd test-app && bun run dev"
+  },
+  "keywords": [
+    "react",
+    "bun",
+    "dev-server",
+    "vite-alternative",
+    "elysia",
+    "build-tool",
+    "bundler"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BunElysiaReact/BERTUI.git"
+  },
+  "dependencies": {
+    "elysia": "^1.0.0",
+    "ernest-logger": "latest"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "bun": ">=1.0.0"
+  }
+}

package/src/build.js

@@ -0,0 +1,94 @@
+// src/build.js
+import { join } from 'path';
+import { existsSync, mkdirSync, rmSync } from 'fs';
+import logger from './logger/logger.js';
+
+export async function buildProduction(options = {}) {
+  const root = options.root || process.cwd();
+  const outDir = join(root, 'dist');
+  
+  logger.bigLog('BUILDING FOR PRODUCTION', { color: 'green' });
+  
+  // Clean dist folder
+  if (existsSync(outDir)) {
+    rmSync(outDir, { recursive: true });
+    logger.info('Cleaned dist/');
+  }
+  mkdirSync(outDir, { recursive: true });
+  
+  const startTime = Date.now();
+  
+  try {
+    // Build with Bun's bundler
+    const result = await Bun.build({
+      entrypoints: [join(root, 'src/main.jsx')],
+      outdir: outDir,
+      target: 'browser',
+      minify: true,
+      splitting: true,
+      sourcemap: 'external',
+      naming: {
+        entry: '[name]-[hash].js',
+        chunk: 'chunks/[name]-[hash].js',
+        asset: 'assets/[name]-[hash].[ext]'
+      }
+    });
+    
+    if (!result.success) {
+      logger.error('Build failed!');
+      result.logs.forEach(log => logger.error(log.message));
+      process.exit(1);
+    }
+    
+    // Copy BertUI CSS to dist
+    const bertuiCss = join(import.meta.dir, 'styles/bertui.css');
+    const destCss = join(outDir, 'bertui.css');
+    await Bun.write(destCss, Bun.file(bertuiCss));
+    logger.info('Copied BertUI CSS');
+    
+    // Generate index.html
+    await generateProductionHTML(root, outDir, result);
+    
+    const duration = Date.now() - startTime;
+    logger.success(`Build complete in ${duration}ms`);
+    logger.info(`Output: ${outDir}`);
+    logger.table(result.outputs.map(o => ({
+      file: o.path,
+      size: `${(o.size / 1024).toFixed(2)} KB`
+    })));
+    
+  } catch (error) {
+    logger.error(`Build failed: ${error.message}`);
+    process.exit(1);
+  }
+}
+
+async function generateProductionHTML(root, outDir, buildResult) {
+  // Find the main bundle
+  const mainBundle = buildResult.outputs.find(o => 
+    o.path.includes('main') && o.kind === 'entry-point'
+  );
+  
+  if (!mainBundle) {
+    throw new Error('Could not find main bundle');
+  }
+  
+  const bundleName = mainBundle.path.split('/').pop();
+  
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BertUI App</title>
+  <link rel="stylesheet" href="/bertui.css">
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/${bundleName}"></script>
+</body>
+</html>`;
+  
+  await Bun.write(join(outDir, 'index.html'), html);
+  logger.info('Generated index.html');
+}

package/src/cli.js

@@ -0,0 +1,66 @@
+// src/cli.js
+import { startDev } from './dev.js';
+import { buildProduction } from './build.js';
+import logger from './logger/logger.js';
+
+export function program() {
+  const args = process.argv.slice(2);
+  const command = args[0] || 'dev';
+
+  switch (command) {
+    case 'dev':
+      const devPort = getArg('--port', '-p') || 3000;
+      startDev({ 
+        port: parseInt(devPort), 
+        root: process.cwd() 
+      });
+      break;
+    
+    case 'build':
+      buildProduction({ 
+        root: process.cwd() 
+      });
+      break;
+    
+    case '--version':
+    case '-v':
+      console.log('bertui v0.1.0');
+      break;
+    
+    case '--help':
+    case '-h':
+      showHelp();
+      break;
+    
+    default:
+      logger.error(`Unknown command: ${command}`);
+      showHelp();
+  }
+}
+
+function getArg(longForm, shortForm) {
+  const args = process.argv.slice(2);
+  const longIndex = args.indexOf(longForm);
+  const shortIndex = args.indexOf(shortForm);
+  const index = longIndex !== -1 ? longIndex : shortIndex;
+  return index !== -1 && args[index + 1] ? args[index + 1] : null;
+}
+
+function showHelp() {
+  logger.bigLog('BERTUI CLI', { color: 'blue' });
+  console.log(`
+Commands:
+  bertui dev              Start development server
+  bertui build            Build for production
+  bertui --version        Show version
+  bertui --help           Show help
+
+Options:
+  --port, -p <number>     Port for dev server (default: 3000)
+
+Examples:
+  bertui dev
+  bertui dev --port 8080
+  bertui build
+  `);
+}

package/src/client/compiler.js

@@ -0,0 +1,94 @@
+// src/client/compiler.js
+import { existsSync, mkdirSync, readdirSync, statSync } from 'fs';
+import { join, extname, relative } from 'path';
+import logger from '../logger/logger.js';
+
+export async function compileProject(root) {
+  logger.bigLog('COMPILING PROJECT', { color: 'blue' });
+  
+  const srcDir = join(root, 'src');
+  const outDir = join(root, '.bertui', 'compiled');
+  
+  // Check if src exists
+  if (!existsSync(srcDir)) {
+    logger.error('src/ directory not found!');
+    process.exit(1);
+  }
+  
+  // Create output directory
+  if (!existsSync(outDir)) {
+    mkdirSync(outDir, { recursive: true });
+    logger.info('Created .bertui/compiled/');
+  }
+  
+  // Compile all files
+  const startTime = Date.now();
+  const stats = await compileDirectory(srcDir, outDir, root);
+  const duration = Date.now() - startTime;
+  
+  logger.success(`Compiled ${stats.files} files in ${duration}ms`);
+  logger.info(`Output: ${outDir}`);
+  
+  return { outDir, stats };
+}
+
+async function compileDirectory(srcDir, outDir, root) {
+  const stats = { files: 0, skipped: 0 };
+  
+  const files = readdirSync(srcDir);
+  
+  for (const file of files) {
+    const srcPath = join(srcDir, file);
+    const stat = statSync(srcPath);
+    
+    if (stat.isDirectory()) {
+      // Recursively compile subdirectories
+      const subOutDir = join(outDir, file);
+      mkdirSync(subOutDir, { recursive: true });
+      const subStats = await compileDirectory(srcPath, subOutDir, root);
+      stats.files += subStats.files;
+      stats.skipped += subStats.skipped;
+    } else {
+      // Compile file
+      const ext = extname(file);
+      const relativePath = relative(join(root, 'src'), srcPath);
+      
+      if (['.jsx', '.tsx', '.ts'].includes(ext)) {
+        await compileFile(srcPath, outDir, file, relativePath);
+        stats.files++;
+      } else if (ext === '.js' || ext === '.css') {
+        // Copy as-is
+        const outPath = join(outDir, file);
+        await Bun.write(outPath, Bun.file(srcPath));
+        logger.debug(`Copied: ${relativePath}`);
+        stats.files++;
+      } else {
+        logger.debug(`Skipped: ${relativePath}`);
+        stats.skipped++;
+      }
+    }
+  }
+  
+  return stats;
+}
+
+async function compileFile(srcPath, outDir, filename, relativePath) {
+  const ext = extname(filename);
+  const loader = ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx';
+  
+  try {
+    const transpiler = new Bun.Transpiler({ loader });
+    const code = await Bun.file(srcPath).text();
+    const compiled = await transpiler.transform(code);
+    
+    // Change extension to .js
+    const outFilename = filename.replace(/\.(jsx|tsx|ts)$/, '.js');
+    const outPath = join(outDir, outFilename);
+    
+    await Bun.write(outPath, compiled);
+    logger.debug(`Compiled: ${relativePath} → ${outFilename}`);
+  } catch (error) {
+    logger.error(`Failed to compile ${relativePath}: ${error.message}`);
+    throw error;
+  }
+}

package/src/config/defaultConfig.js

@@ -0,0 +1,16 @@
+export const defaultConfig = {
+  meta: {
+    title: "BertUI App",
+    description: "Built with BertUI - Lightning fast React development",
+    keywords: "react, bun, bertui",
+    author: "Pease Ernest",
+    ogImage: "/og-image.png",
+    themeColor: "#f30606ff",
+    lang: "en"
+  },
+  appShell: {
+    loading: true,
+    loadingText: "Loading...",
+    backgroundColor: "#ffffff"
+  }
+};

package/src/config/loadConfig.js

@@ -0,0 +1,32 @@
+import { join } from 'path';
+import { existsSync } from 'fs';
+import { defaultConfig } from './defaultConfig.js';
+import logger from '../utils/logger.js';
+
+export async function loadConfig(root) {
+  const configPath = join(root, 'bertui.config.js');
+  
+  // Check if user created config
+  if (existsSync(configPath)) {
+    try {
+      const userConfig = await import(configPath);
+      logger.success('Loaded bertui.config.js');
+      
+      // Merge user config with defaults
+      return mergeConfig(defaultConfig, userConfig.default || userConfig);
+    } catch (error) {
+      logger.error(`Failed to load config make sure the file bertui.config.js is in the root directory of the app if not create it : ${error.message}`);
+      return defaultConfig;
+    }
+  }
+  
+  logger.info('No config found, using defaults');
+  return defaultConfig;
+}
+
+function mergeConfig(defaults, user) {
+  return {
+    meta: { ...defaults.meta, ...user.meta },
+    appShell: { ...defaults.appShell, ...user.appShell }
+  };
+}

package/src/dev.js

@@ -0,0 +1,23 @@
+// src/dev.js
+import { compileProject } from './client/compiler.js';
+import { startDevServer } from './server/dev-server.js';
+import logger from './logger/logger.js';
+
+export async function startDev(options = {}) {
+  const root = options.root || process.cwd();
+  const port = options.port || 3000;
+  
+  try {
+    // Step 1: Compile project
+    logger.info('Step 1: Compiling project...');
+    await compileProject(root);
+    
+    // Step 2: Start dev server
+    logger.info('Step 2: Starting dev server...');
+    await startDevServer({ root, port });
+    
+  } catch (error) {
+    logger.error(`Dev server failed: ${error.message}`);
+    process.exit(1);
+  }
+}

package/src/logger/logger.js

@@ -0,0 +1,18 @@
+// 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;

package/src/logger/notes.md

@@ -0,0 +1,20 @@
+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;

package/src/server/dev-server.js

@@ -0,0 +1,154 @@
+// src/server/dev-server.js
+import { Elysia } from 'elysia';
+import { watch } from 'fs';
+import { join, extname } from 'path';
+import { existsSync } from 'fs';
+import logger from '../logger/logger.js';
+import { compileProject } from '../client/compiler.js';
+
+export async function startDevServer(options = {}) {
+  const port = parseInt(options.port) || 3000;
+  const root = options.root || process.cwd();
+  const compiledDir = join(root, '.bertui', 'compiled');
+  
+  const clients = new Set();
+  
+  const app = new Elysia()
+    .get('/', async () => {
+      const html = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BertUI App</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/hmr-client.js"></script>
+  <script type="module" src="/compiled/main.js"></script>
+</body>
+</html>`;
+      
+      return new Response(html, {
+        headers: { 'Content-Type': 'text/html' }
+      });
+    })
+    
+    .get('/hmr-client.js', () => {
+      const script = `
+const ws = new WebSocket('ws://localhost:${port}/hmr');
+
+ws.onopen = () => {
+  console.log('%c🔥 BertUI HMR connected', 'color: #10b981; font-weight: bold');
+};
+
+ws.onmessage = (event) => {
+  const data = JSON.parse(event.data);
+  
+  if (data.type === 'reload') {
+    console.log('%c🔄 Reloading...', 'color: #f59e0b');
+    window.location.reload();
+  }
+  
+  if (data.type === 'recompiling') {
+    console.log('%c⚙️ Recompiling...', 'color: #3b82f6');
+  }
+};
+`;
+      
+      return new Response(script, {
+        headers: { 'Content-Type': 'application/javascript' }
+      });
+    })
+    
+    .ws('/hmr', {
+      open(ws) {
+        clients.add(ws);
+        logger.info('Client connected to HMR');
+      },
+      close(ws) {
+        clients.delete(ws);
+      }
+    })
+    
+    // Serve compiled files
+    .get('/compiled/*', async ({ params, set }) => {
+      const filepath = join(compiledDir, params['*']);
+      const file = Bun.file(filepath);
+      
+      if (!await file.exists()) {
+        set.status = 404;
+        return 'File not found';
+      }
+      
+      const ext = extname(filepath);
+      const contentType = ext === '.js' ? 'application/javascript' : 'text/plain';
+      
+      return new Response(await file.text(), {
+        headers: { 
+          'Content-Type': contentType,
+          'Cache-Control': 'no-store'
+        }
+      });
+    })
+    
+    .listen(port);
+  
+  if (!app.server) {
+    logger.error('Failed to start server');
+    process.exit(1);
+  }
+  
+  logger.success(`Server running at http://localhost:${port}`);
+  
+  // Watch for file changes
+  setupWatcher(root, compiledDir, clients);
+  
+  return app;
+}
+
+function setupWatcher(root, compiledDir, clients) {
+  const srcDir = join(root, 'src');
+  
+  if (!existsSync(srcDir)) {
+    logger.warn('src/ directory not found');
+    return;
+  }
+  
+  logger.info(`Watching: ${srcDir}`);
+  
+  watch(srcDir, { recursive: true }, async (eventType, filename) => {
+    if (!filename) return;
+    
+    const ext = extname(filename);
+    if (['.js', '.jsx', '.ts', '.tsx', '.css'].includes(ext)) {
+      logger.info(`File changed: ${filename}`);
+      
+      // Notify clients that recompilation is starting
+      for (const client of clients) {
+        try {
+          client.send(JSON.stringify({ type: 'recompiling' }));
+        } catch (e) {
+          clients.delete(client);
+        }
+      }
+      
+      // Recompile the project
+      try {
+        await compileProject(root);
+        
+        // Notify clients to reload
+        for (const client of clients) {
+          try {
+            client.send(JSON.stringify({ type: 'reload', file: filename }));
+          } catch (e) {
+            clients.delete(client);
+          }
+        }
+      } catch (error) {
+        logger.error(`Recompilation failed: ${error.message}`);
+      }
+    }
+  });
+}

package/src/server/notes.md

@@ -0,0 +1 @@
+here i want to try and impliment the creation of a dev server using elisia bun library

package/src/styles/bertui.css

@@ -0,0 +1,210 @@
+/* BertUI Built-in Utilities v0.1.0 */
+
+/* Split Text Animation */
+.split {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+}
+
+.split::before {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50%;
+  overflow: hidden;
+  animation: split-left 0.6s ease-out;
+}
+
+.split::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 50%;
+  overflow: hidden;
+  animation: split-right 0.6s ease-out;
+}
+
+@keyframes split-left {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes split-right {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Move Right Animation */
+.moveright {
+  animation: moveright 0.5s ease-out;
+}
+
+@keyframes moveright {
+  from {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Move Left Animation */
+.moveleft {
+  animation: moveleft 0.5s ease-out;
+}
+
+@keyframes moveleft {
+  from {
+    transform: translateX(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Fade In */
+.fadein {
+  animation: fadein 0.5s ease-out;
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Scale In */
+.scalein {
+  animation: scalein 0.4s ease-out;
+}
+
+@keyframes scalein {
+  from {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Bounce In */
+.bouncein {
+  animation: bouncein 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+@keyframes bouncein {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Slide Up */
+.slideup {
+  animation: slideup 0.5s ease-out;
+}
+
+@keyframes slideup {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Slide Down */
+.slidedown {
+  animation: slidedown 0.5s ease-out;
+}
+
+@keyframes slidedown {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Rotate In */
+.rotatein {
+  animation: rotatein 0.6s ease-out;
+}
+
+@keyframes rotatein {
+  from {
+    transform: rotate(-180deg) scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: rotate(0) scale(1);
+    opacity: 1;
+  }
+}
+
+/* Pulse */
+.pulse {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+/* Shake */
+.shake {
+  animation: shake 0.5s ease-in-out;
+}
+
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-5px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(5px);
+  }
+}