bertui 1.0.3 → 1.1.1

package/package.json

@@ -1,21 +1,33 @@
 {
   "name": "bertui",
-  "version": "1.0.3",
-  "description": "Lightning-fast React dev server powered by Bun and Elysia",
+  "version": "1.1.1",
+  "description": "Lightning-fast React dev server powered by Bun and Elysia - Now with TypeScript support!",
   "type": "module",
   "main": "./index.js",
+  "types": "./types/index.d.ts",
   "bin": {
     "bertui": "./bin/bertui.js"
   },
   "exports": {
-    ".": "./index.js",
+    ".": {
+      "types": "./types/index.d.ts",
+      "default": "./index.js"
+    },
     "./styles": "./src/styles/bertui.css",
     "./logger": "./src/logger/logger.js",
-    "./router": "./src/router/Router.jsx"
+    "./router": {
+      "types": "./types/router.d.ts",
+      "default": "./src/router/Router.jsx"
+    },
+    "./config": {
+      "types": "./types/config.d.ts",
+      "default": "./src/config/loadConfig.js"
+    }
   },
   "files": [
     "bin",
     "src",
+    "types",
     "index.js",
     "README.md",
     "LICENSE"
@@ -35,7 +47,11 @@
     "bundler",
     "fast",
     "hmr",
-    "file-based-routing"
+    "file-based-routing",
+    "typescript",
+    "seo",
+    "sitemap",
+    "server-islands"
   ],
   "author": "Pease Ernest",
   "license": "MIT",
@@ -45,14 +61,18 @@
   },
   "dependencies": {
     "elysia": "^1.0.0",
-    "ernest-logger": "latest",
+    "ernest-logger": "^2.0.0",
     "lightningcss": "^1.30.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-dom": "^19.2.3",
     "bun": ">=1.0.0"
   },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
+  },
   "engines": {
     "bun": ">=1.0.0"
   }

package/src/build/compiler/file-transpiler.js

@@ -0,0 +1,171 @@
+// bertui/src/build/compiler/file-transpiler.js - SINGLE TRANSPILER INSTANCE
+import { join, relative, dirname, extname } from 'path';
+import { readdirSync, statSync, mkdirSync } from 'fs';
+import logger from '../../logger/logger.js';
+import { replaceEnvInCode } from '../../utils/env.js';
+
+// ✅ CRITICAL FIX: Create transpilers ONCE at module level
+const jsxTranspiler = new Bun.Transpiler({ loader: 'jsx' });
+
+const tsxTranspiler = new Bun.Transpiler({ 
+  loader: 'tsx',
+  tsconfig: {
+    compilerOptions: {
+      jsx: 'react',
+      jsxFactory: 'React.createElement',
+      jsxFragmentFactory: 'React.Fragment'
+    }
+  }
+});
+
+const tsTranspiler = new Bun.Transpiler({ 
+  loader: 'ts',
+  tsconfig: {
+    compilerOptions: {
+      jsx: 'preserve'
+    }
+  }
+});
+
+function getTranspiler(loader) {
+  // Just return the pre-created instances
+  return loader === 'tsx' ? tsxTranspiler : 
+         loader === 'ts' ? tsTranspiler : 
+         jsxTranspiler;
+}
+
+export async function compileBuildDirectory(srcDir, buildDir, root, envVars) {
+  const files = readdirSync(srcDir);
+  const filesToCompile = [];
+  
+  for (const file of files) {
+    const srcPath = join(srcDir, file);
+    const stat = statSync(srcPath);
+    
+    if (stat.isDirectory()) {
+      const subBuildDir = join(buildDir, file);
+      mkdirSync(subBuildDir, { recursive: true });
+      await compileBuildDirectory(srcPath, subBuildDir, root, envVars);
+    } else {
+      const ext = extname(file);
+      if (ext === '.css') continue;
+      
+      if (['.jsx', '.tsx', '.ts'].includes(ext)) {
+        filesToCompile.push({ path: srcPath, dir: buildDir, name: file, type: 'tsx' });
+      } else if (ext === '.js') {
+        filesToCompile.push({ path: srcPath, dir: buildDir, name: file, type: 'js' });
+      }
+    }
+  }
+  
+  if (filesToCompile.length === 0) return;
+  
+  // ✅ Process sequentially with progress
+  logger.info(`📦 Compiling ${filesToCompile.length} files sequentially...`);
+  
+  for (let i = 0; i < filesToCompile.length; i++) {
+    const file = filesToCompile[i];
+    
+    try {
+      if (file.type === 'tsx') {
+        await compileBuildFile(file.path, file.dir, file.name, root, envVars);
+      } else {
+        await compileJSFile(file.path, file.dir, file.name, root, envVars);
+      }
+      
+      // Progress every 10 files
+      if ((i + 1) % 10 === 0 || i === filesToCompile.length - 1) {
+        const percent = (((i + 1) / filesToCompile.length) * 100).toFixed(0);
+        logger.info(`   Progress: ${i + 1}/${filesToCompile.length} (${percent}%)`);
+      }
+      
+    } catch (error) {
+      logger.error(`Failed to compile ${file.name}: ${error.message}`);
+      // Continue with other files
+    }
+  }
+  
+  logger.success(`✅ Compiled ${filesToCompile.length} files`);
+}
+
+async function compileBuildFile(srcPath, buildDir, filename, root, envVars) {
+  const ext = extname(filename);
+  const loader = ext === '.tsx' ? 'tsx' : ext === '.ts' ? 'ts' : 'jsx';
+  
+  try {
+    let code = await Bun.file(srcPath).text();
+    code = removeCSSImports(code);
+    code = replaceEnvInCode(code, envVars);
+    
+    const outFilename = filename.replace(/\.(jsx|tsx|ts)$/, '.js');
+    const outPath = join(buildDir, outFilename);
+    code = fixBuildImports(code, srcPath, outPath, root);
+    
+    // ✅ Reuse the same transpiler instance
+    const transpiler = getTranspiler(loader);
+    let compiled = await transpiler.transform(code);
+    
+    if (usesJSX(compiled) && !compiled.includes('import React')) {
+      compiled = `import React from 'react';\n${compiled}`;
+    }
+    
+    compiled = fixRelativeImports(compiled);
+    await Bun.write(outPath, compiled);
+    
+    // Help GC
+    code = null;
+    compiled = null;
+    
+  } catch (error) {
+    logger.error(`Failed to compile ${filename}: ${error.message}`);
+    throw error;
+  }
+}
+
+async function compileJSFile(srcPath, buildDir, filename, root, envVars) {
+  const outPath = join(buildDir, filename);
+  let code = await Bun.file(srcPath).text();
+  code = removeCSSImports(code);
+  code = replaceEnvInCode(code, envVars);
+  code = fixBuildImports(code, srcPath, outPath, root);
+  
+  if (usesJSX(code) && !code.includes('import React')) {
+    code = `import React from 'react';\n${code}`;
+  }
+  
+  await Bun.write(outPath, code);
+  code = null;
+}
+
+function usesJSX(code) {
+  return code.includes('React.createElement') || 
+         code.includes('React.Fragment') ||
+         /<[A-Z]/.test(code) ||
+         code.includes('jsx(') ||
+         code.includes('jsxs(');
+}
+
+function removeCSSImports(code) {
+  code = code.replace(/import\s+['"][^'"]*\.css['"];?\s*/g, '');
+  code = code.replace(/import\s+['"]bertui\/styles['"]\s*;?\s*/g, '');
+  return code;
+}
+
+function fixBuildImports(code, srcPath, outPath, root) {
+  const buildDir = join(root, '.bertuibuild');
+  const routerPath = join(buildDir, 'router.js');
+  const relativeToRouter = relative(dirname(outPath), routerPath).replace(/\\/g, '/');
+  const routerImport = relativeToRouter.startsWith('.') ? relativeToRouter : './' + relativeToRouter;
+  
+  code = code.replace(/from\s+['"]bertui\/router['"]/g, `from '${routerImport}'`);
+  return code;
+}
+
+function fixRelativeImports(code) {
+  const importRegex = /from\s+['"](\.\.[\/\\]|\.\/)((?:[^'"]+?)(?<!\.js|\.jsx|\.ts|\.tsx|\.json))['"];?/g;
+  code = code.replace(importRegex, (match, prefix, path) => {
+    if (path.endsWith('/') || /\.\w+$/.test(path)) return match;
+    return `from '${prefix}${path}.js';`;
+  });
+  return code;
+}

package/src/build/compiler/index.js

@@ -0,0 +1,45 @@
+// bertui/src/build/compiler/index.js
+import { join } from 'path';
+import { existsSync } from 'fs';
+import logger from '../../logger/logger.js';
+import { discoverRoutes } from './route-discoverer.js';
+import { compileBuildDirectory } from './file-transpiler.js';
+import { generateBuildRouter } from './router-generator.js';
+
+
+export async function compileForBuild(root, buildDir, envVars) {
+  const srcDir = join(root, 'src');
+  const pagesDir = join(srcDir, 'pages');
+  
+  if (!existsSync(srcDir)) {
+    throw new Error('src/ directory not found!');
+  }
+  
+  let routes = [];
+  let serverIslands = [];
+  let clientRoutes = [];
+  
+  if (existsSync(pagesDir)) {
+    routes = await discoverRoutes(pagesDir);
+    
+    for (const route of routes) {
+      const sourceCode = await Bun.file(route.path).text();
+      const isServerIsland = sourceCode.includes('export const render = "server"');
+      
+      if (isServerIsland) {
+        serverIslands.push(route);
+        logger.success(`🏝️  Server Island: ${route.route}`);
+      } else {
+        clientRoutes.push(route);
+      }
+    }
+  }
+  
+  await compileBuildDirectory(srcDir, buildDir, root, envVars);
+  
+  if (routes.length > 0) {
+    await generateBuildRouter(routes, buildDir);
+  }
+  
+  return { routes, serverIslands, clientRoutes };
+}

package/src/build/compiler/route-discoverer.js

@@ -0,0 +1,46 @@
+// bertui/src/build/compiler/route-discoverer.js
+import { join, extname } from 'path';
+import { readdirSync, statSync } from 'fs';
+
+export async function discoverRoutes(pagesDir) {
+  const routes = [];
+  
+  async function scanDirectory(dir, basePath = '') {
+    const entries = readdirSync(dir, { withFileTypes: true });
+    
+    for (const entry of entries) {
+      const fullPath = join(dir, entry.name);
+      const relativePath = join(basePath, entry.name);
+      
+      if (entry.isDirectory()) {
+        await scanDirectory(fullPath, relativePath);
+      } else if (entry.isFile()) {
+        const ext = extname(entry.name);
+        if (ext === '.css') continue;
+        
+        if (['.jsx', '.tsx', '.js', '.ts'].includes(ext)) {
+          const fileName = entry.name.replace(ext, '');
+          let route = '/' + relativePath.replace(/\\/g, '/').replace(ext, '');
+          
+          if (fileName === 'index') {
+            route = route.replace('/index', '') || '/';
+          }
+          
+          const isDynamic = fileName.includes('[') && fileName.includes(']');
+          
+          routes.push({
+            route: route === '' ? '/' : route,
+            file: relativePath.replace(/\\/g, '/'),
+            path: fullPath,
+            type: isDynamic ? 'dynamic' : 'static'
+          });
+        }
+      }
+    }
+  }
+  
+  await scanDirectory(pagesDir);
+  routes.sort((a, b) => a.type === b.type ? a.route.localeCompare(b.route) : a.type === 'static' ? -1 : 1);
+  
+  return routes;
+}

package/src/build/compiler/router-generator.js

@@ -0,0 +1,104 @@
+// bertui/src/build/compiler/router-generator.js
+import { join } from 'path';
+
+export async function generateBuildRouter(routes, buildDir) {
+  const imports = routes.map((route, i) => {
+    const componentName = `Page${i}`;
+    const importPath = `./pages/${route.file.replace(/\.(jsx|tsx|ts)$/, '.js')}`;
+    return `import ${componentName} from '${importPath}';`;
+  }).join('\n');
+  
+  const routeConfigs = routes.map((route, i) => {
+    const componentName = `Page${i}`;
+    return `  { path: '${route.route}', component: ${componentName}, type: '${route.type}' }`;
+  }).join(',\n');
+  
+  const routerCode = `import React, { useState, useEffect, createContext, useContext } from 'react';
+
+const RouterContext = createContext(null);
+
+export function useRouter() {
+  const context = useContext(RouterContext);
+  if (!context) throw new Error('useRouter must be used within a Router');
+  return context;
+}
+
+export function Router({ routes }) {
+  const [currentRoute, setCurrentRoute] = useState(null);
+  const [params, setParams] = useState({});
+
+  useEffect(() => {
+    matchAndSetRoute(window.location.pathname);
+    const handlePopState = () => matchAndSetRoute(window.location.pathname);
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, [routes]);
+
+  function matchAndSetRoute(pathname) {
+    for (const route of routes) {
+      if (route.type === 'static' && route.path === pathname) {
+        setCurrentRoute(route);
+        setParams({});
+        return;
+      }
+    }
+    for (const route of routes) {
+      if (route.type === 'dynamic') {
+        const pattern = route.path.replace(/\\[([^\\]]+)\\]/g, '([^/]+)');
+        const regex = new RegExp('^' + pattern + '$');
+        const match = pathname.match(regex);
+        if (match) {
+          const paramNames = [...route.path.matchAll(/\\[([^\\]]+)\\]/g)].map(m => m[1]);
+          const extractedParams = {};
+          paramNames.forEach((name, i) => { extractedParams[name] = match[i + 1]; });
+          setCurrentRoute(route);
+          setParams(extractedParams);
+          return;
+        }
+      }
+    }
+    setCurrentRoute(null);
+    setParams({});
+  }
+
+  function navigate(path) {
+    window.history.pushState({}, '', path);
+    matchAndSetRoute(path);
+  }
+
+  const Component = currentRoute?.component;
+  return React.createElement(
+    RouterContext.Provider,
+    { value: { currentRoute, params, navigate, pathname: window.location.pathname } },
+    Component ? React.createElement(Component, { params }) : React.createElement(NotFound)
+  );
+}
+
+export function Link({ to, children, ...props }) {
+  const { navigate } = useRouter();
+  return React.createElement('a', { 
+    href: to, 
+    onClick: (e) => { e.preventDefault(); navigate(to); }, 
+    ...props 
+  }, children);
+}
+
+function NotFound() {
+  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' } }, 'Go home')
+  );
+}
+
+${imports}
+
+export const routes = [
+${routeConfigs}
+];`;
+  
+  await Bun.write(join(buildDir, 'router.js'), routerCode);
+}

package/src/build/generators/html-generator.js

@@ -0,0 +1,259 @@
+// bertui/src/build/generators/html-generator.js
+import { join, relative } from 'path';
+import { mkdirSync } from 'fs';
+import logger from '../../logger/logger.js';
+import { extractMetaFromSource } from '../../utils/meta-extractor.js';
+
+export async function generateProductionHTML(root, outDir, buildResult, routes, serverIslands, config) {
+  const mainBundle = buildResult.outputs.find(o => 
+    o.path.includes('main') && o.kind === 'entry-point'
+  );
+  
+  if (!mainBundle) {
+    logger.error('❌ Could not find main bundle');
+    return;
+  }
+  
+  const bundlePath = relative(outDir, mainBundle.path).replace(/\\/g, '/');
+  const defaultMeta = config.meta || {};
+  
+  logger.info(`📄 Generating HTML for ${routes.length} routes...`);
+  
+  // Process in batches to avoid Bun crashes
+  const BATCH_SIZE = 5;
+  
+  for (let i = 0; i < routes.length; i += BATCH_SIZE) {
+    const batch = routes.slice(i, i + BATCH_SIZE);
+    logger.debug(`Processing batch ${Math.floor(i/BATCH_SIZE) + 1}/${Math.ceil(routes.length/BATCH_SIZE)}`);
+    
+    // Process batch sequentially
+    for (const route of batch) {
+      await processSingleRoute(route, serverIslands, config, defaultMeta, bundlePath, outDir);
+    }
+  }
+  
+  logger.success(`✅ HTML generation complete for ${routes.length} routes`);
+}
+
+async function processSingleRoute(route, serverIslands, config, defaultMeta, bundlePath, outDir) {
+  try {
+    const sourceCode = await Bun.file(route.path).text();
+    const pageMeta = extractMetaFromSource(sourceCode);
+    const meta = { ...defaultMeta, ...pageMeta };
+    
+    const isServerIsland = serverIslands.find(si => si.route === route.route);
+    
+    let staticHTML = '';
+    
+    if (isServerIsland) {
+      logger.info(`🏝️  Extracting static content: ${route.route}`);
+      staticHTML = await extractStaticHTMLFromComponent(sourceCode, route.path);
+      
+      if (staticHTML) {
+        logger.success(`✅ Server Island rendered: ${route.route}`);
+      } else {
+        logger.warn(`⚠️  Could not extract HTML, falling back to client-only`);
+      }
+    }
+    
+    const html = generateHTML(meta, route, bundlePath, staticHTML, isServerIsland);
+    
+    let htmlPath;
+    if (route.route === '/') {
+      htmlPath = join(outDir, 'index.html');
+    } else {
+      const routeDir = join(outDir, route.route.replace(/^\//, ''));
+      mkdirSync(routeDir, { recursive: true });
+      htmlPath = join(routeDir, 'index.html');
+    }
+    
+    await Bun.write(htmlPath, html);
+    
+    if (isServerIsland) {
+      logger.success(`✅ Server Island: ${route.route} (instant content!)`);
+    } else {
+      logger.success(`✅ Client-only: ${route.route}`);
+    }
+    
+  } catch (error) {
+    logger.error(`Failed HTML for ${route.route}: ${error.message}`);
+  }
+}
+
+async function extractStaticHTMLFromComponent(sourceCode, filePath) {
+  try {
+    const returnMatch = sourceCode.match(/return\s*\(/);
+    if (!returnMatch) {
+      logger.warn(`⚠️  Could not find return statement in ${filePath}`);
+      return null;
+    }
+    
+    const codeBeforeReturn = sourceCode.substring(0, returnMatch.index);
+    const jsxContent = sourceCode.substring(returnMatch.index);
+    
+    const hookPatterns = [
+      'useState', 'useEffect', 'useContext', 'useReducer',
+      'useCallback', 'useMemo', 'useRef', 'useImperativeHandle',
+      'useLayoutEffect', 'useDebugValue'
+    ];
+    
+    let hasHooks = false;
+    for (const hook of hookPatterns) {
+      const regex = new RegExp(`\\b${hook}\\s*\\(`, 'g');
+      if (regex.test(codeBeforeReturn)) {
+        logger.error(`❌ Server Island at ${filePath} contains React hooks!`);
+        logger.error(`   Server Islands must be pure HTML - no ${hook}, etc.`);
+        hasHooks = true;
+        break;
+      }
+    }
+    
+    if (hasHooks) return null;
+    
+    const importLines = codeBeforeReturn.split('\n')
+      .filter(line => line.trim().startsWith('import'))
+      .join('\n');
+    
+    const hasRouterImport = /from\s+['"]bertui\/router['"]/m.test(importLines);
+    
+    if (hasRouterImport) {
+      logger.error(`❌ Server Island at ${filePath} imports from 'bertui/router'!`);
+      logger.error(`   Server Islands cannot use Link - use <a> tags instead.`);
+      return null;
+    }
+    
+    const eventHandlers = [
+      'onClick=', 'onChange=', 'onSubmit=', 'onInput=', 'onFocus=',
+      'onBlur=', 'onMouseEnter=', 'onMouseLeave=', 'onKeyDown=',
+      'onKeyUp=', 'onScroll='
+    ];
+    
+    for (const handler of eventHandlers) {
+      if (jsxContent.includes(handler)) {
+        logger.error(`❌ Server Island uses event handler: ${handler.replace('=', '')}`);
+        logger.error(`   Server Islands are static HTML - no interactivity allowed`);
+        return null;
+      }
+    }
+    
+    const fullReturnMatch = sourceCode.match(/return\s*\(([\s\S]*?)\);?\s*}/);
+    if (!fullReturnMatch) {
+      logger.warn(`⚠️  Could not extract JSX from ${filePath}`);
+      return null;
+    }
+    
+    let html = fullReturnMatch[1].trim();
+    
+    html = html.replace(/\{\/\*[\s\S]*?\*\/\}/g, '');
+    html = html.replace(/className=/g, 'class=');
+    
+    html = html.replace(/style=\{\{([^}]+)\}\}/g, (match, styleObj) => {
+      const props = [];
+      let currentProp = '';
+      let depth = 0;
+      
+      for (let i = 0; i < styleObj.length; i++) {
+        const char = styleObj[i];
+        if (char === '(') depth++;
+        if (char === ')') depth--;
+        
+        if (char === ',' && depth === 0) {
+          props.push(currentProp.trim());
+          currentProp = '';
+        } else {
+          currentProp += char;
+        }
+      }
+      if (currentProp.trim()) props.push(currentProp.trim());
+      
+      const cssString = props
+        .map(prop => {
+          const colonIndex = prop.indexOf(':');
+          if (colonIndex === -1) return '';
+          
+          const key = prop.substring(0, colonIndex).trim();
+          const value = prop.substring(colonIndex + 1).trim();
+          
+          if (!key || !value) return '';
+          
+          const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+          const cssValue = value.replace(/['"]/g, '');
+          
+          return `${cssKey}: ${cssValue}`;
+        })
+        .filter(Boolean)
+        .join('; ');
+      
+      return `style="${cssString}"`;
+    });
+    
+    const voidElements = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 
+                          'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
+    
+    html = html.replace(/<(\w+)([^>]*)\s*\/>/g, (match, tag, attrs) => {
+      if (voidElements.includes(tag.toLowerCase())) {
+        return match;
+      } else {
+        return `<${tag}${attrs}></${tag}>`;
+      }
+    });
+    
+    html = html.replace(/\{`([^`]*)`\}/g, '$1');
+    html = html.replace(/\{(['"])(.*?)\1\}/g, '$2');
+    html = html.replace(/\{(\d+)\}/g, '$1');
+    
+    logger.info(`   Extracted ${html.length} chars of static HTML`);
+    return html;
+    
+  } catch (error) {
+    logger.error(`Failed to extract HTML: ${error.message}`);
+    return null;
+  }
+}
+
+function generateHTML(meta, route, bundlePath, staticHTML = '', isServerIsland = false) {
+  const rootContent = staticHTML 
+    ? `<div id="root">${staticHTML}</div>` 
+    : '<div id="root"></div>';
+  
+  const comment = isServerIsland 
+    ? '<!-- 🏝️ Server Island: Static content rendered at build time -->'
+    : '<!-- ⚡ Client-only: Content rendered by JavaScript -->';
+  
+  return `<!DOCTYPE html>
+<html lang="${meta.lang || 'en'}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${meta.title || 'BertUI App'}</title>
+  
+  <meta name="description" content="${meta.description || 'Built with BertUI'}">
+  ${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 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}">` : ''}
+  
+  <link rel="stylesheet" href="/styles/bertui.min.css">
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  
+  <script type="importmap">
+  {
+    "imports": {
+      "react": "https://esm.sh/react@18.2.0",
+      "react-dom": "https://esm.sh/react-dom@18.2.0",
+      "react-dom/client": "https://esm.sh/react-dom@18.2.0/client",
+      "react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime"
+    }
+  }
+  </script>
+</head>
+<body>
+  ${comment}
+  ${rootContent}
+  <script type="module" src="/${bundlePath}"></script>
+</body>
+</html>`;
+}