bertui 0.2.2 → 0.2.4

package/package.json

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

package/src/client/compiler.js

@@ -111,8 +111,7 @@ async function generateRouter(routes, outDir, root) {
     return `  { path: '${route.route}', component: ${componentName}, type: '${route.type}' }`;
   }).join(',\n');
   
-  const routerComponentCode = `
-import { useState, useEffect, createContext, useContext } from 'react';
+  const routerComponentCode = `import React, { useState, useEffect, createContext, useContext } from 'react';
 
 const RouterContext = createContext(null);
 
@@ -186,10 +185,10 @@ export function Router({ routes }) {
 
   const Component = currentRoute?.component;
 
-  return (
-    <RouterContext.Provider value={routerValue}>
-      {Component ? <Component params={params} /> : <NotFound />}
-    </RouterContext.Provider>
+  return React.createElement(
+    RouterContext.Provider,
+    { value: routerValue },
+    Component ? React.createElement(Component, { params }) : React.createElement(NotFound, null)
   );
 }
 
@@ -201,29 +200,28 @@ export function Link({ to, children, ...props }) {
     navigate(to);
   }
 
-  return (
-    <a href={to} onClick={handleClick} {...props}>
-      {children}
-    </a>
-  );
+  return React.createElement('a', { href: to, onClick: handleClick, ...props }, children);
 }
 
 function NotFound() {
-  return (
-    <div style={{
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      minHeight: '100vh',
-      fontFamily: 'system-ui'
-    }}>
-      <h1 style={{ fontSize: '6rem', margin: 0 }}>404</h1>
-      <p style={{ fontSize: '1.5rem', color: '#666' }}>Page not found</p>
-      <a href="/" style={{ color: '#10b981', textDecoration: 'none', fontSize: '1.2rem' }}>
-        Go home
-      </a>
-    </div>
+  return React.createElement(
+    'div',
+    {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        fontFamily: 'system-ui'
+      }
+    },
+    React.createElement('h1', { style: { fontSize: '6rem', margin: 0 } }, '404'),
+    React.createElement('p', { style: { fontSize: '1.5rem', color: '#666' } }, 'Page not found'),
+    React.createElement('a', { 
+      href: '/', 
+      style: { color: '#10b981', textDecoration: 'none', fontSize: '1.2rem' } 
+    }, 'Go home')
   );
 }
 
@@ -288,9 +286,22 @@ async function compileFile(srcPath, outDir, filename, relativePath) {
     
     code = fixImports(code);
     
-    const transpiler = new Bun.Transpiler({ loader });
+    const transpiler = new Bun.Transpiler({ 
+      loader,
+      tsconfig: {
+        compilerOptions: {
+          jsx: 'react',
+          jsxFactory: 'React.createElement',
+          jsxFragmentFactory: 'React.Fragment'
+        }
+      }
+    });
     let compiled = await transpiler.transform(code);
     
+    if (!compiled.includes('import React') && (compiled.includes('React.createElement') || compiled.includes('React.Fragment'))) {
+      compiled = `import React from 'react';\n${compiled}`;
+    }
+    
     compiled = fixRelativeImports(compiled);
     
     const outFilename = filename.replace(/\.(jsx|tsx|ts)$/, '.js');