bertui 0.4.5 → 1.0.0

package/README.md

@@ -1,5 +1,9 @@
 # BertUI ⚡
 
+[![Stable: v1.0.0](https://img.shields.io/badge/Stable-v1.0.0-brightgreen)](https://github.com/your-repo)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+**The fastest, zero-config React static site generator. Now stable and production-ready.**
 Lightning-fast React development powered by Bun.
 
 ## ⚠️ Important Notice - CSS Animations Temporarily Unavailable

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bertui",
-  "version": "0.4.5",
+  "version": "1.0.0",
   "description": "Lightning-fast React dev server powered by Bun and Elysia",
   "type": "module",
   "main": "./index.js",
@@ -44,9 +44,6 @@
     "url": "https://github.com/BunElysiaReact/BERTUI.git"
   },
   "dependencies": {
-    "@jsquash/jpeg": "^1.6.0",
-    "@jsquash/png": "^3.1.1",
-    "@jsquash/webp": "^1.5.0",
     "elysia": "^1.0.0",
     "ernest-logger": "latest",
     "lightningcss": "^1.30.2"

package/src/build/image-optimizer.js

@@ -1,291 +1,86 @@
-// bertui/src/build/image-optimizer.js - FIXED VERSION
+// bertui/src/build/image-optimizer.js - SIMPLE & STABLE
 import { join, extname } from 'path';
 import { existsSync, mkdirSync, readdirSync, cpSync } from 'fs';
 import logger from '../logger/logger.js';
 
 /**
- * 🎯 WASM-powered image optimization using @jsquash
- * Zero OS dependencies, pure JavaScript, blazing fast!
+ * Simple, reliable image copying
+ * No WASM, no optimization, just copy files
  */
 
-// Lazy-load WASM modules (only when needed)
-let pngEncode, pngDecode;
-let jpegEncode, jpegDecode;
-let webpEncode, webpDecode;
-
-async function initializePNG() {
-  if (!pngEncode) {
-    const { encode, decode } = await import('@jsquash/png');
-    pngEncode = encode;
-    pngDecode = decode;
-  }
-}
-
-async function initializeJPEG() {
-  if (!jpegEncode) {
-    const { encode, decode } = await import('@jsquash/jpeg');
-    jpegEncode = encode;
-    jpegDecode = decode;
-  }
-}
-
-async function initializeWebP() {
-  if (!webpEncode) {
-    const { encode, decode } = await import('@jsquash/webp');
-    webpEncode = encode;
-    webpDecode = decode;
-  }
-}
-
-/**
- * Optimize images using WASM-powered codecs
- * This is FAST and has ZERO OS dependencies! 🚀
- */
 export async function optimizeImages(srcDir, outDir) {
-  const imageExtensions = ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg'];
-  let optimized = 0;
-  let totalSaved = 0;
-
-  logger.info(`🖼️  Optimizing images from ${srcDir} to ${outDir}...`);
-
-  // Check if source directory exists
-  if (!existsSync(srcDir)) {
-    logger.warn(`⚠️  Source directory not found: ${srcDir}`);
-    return { optimized: 0, saved: 0 };
-  }
-
-  // Create output directory if it doesn't exist
-  if (!existsSync(outDir)) {
-    mkdirSync(outDir, { recursive: true });
-  }
-
-  async function processDirectory(dir, targetDir) {
-    const entries = readdirSync(dir, { withFileTypes: true });
-
-    for (const entry of entries) {
-      const srcPath = join(dir, entry.name);
-      const destPath = join(targetDir, entry.name);
-
-      if (entry.isDirectory()) {
-        // Create subdirectory in target
-        const subDestPath = join(targetDir, entry.name);
-        if (!existsSync(subDestPath)) {
-          mkdirSync(subDestPath, { recursive: true });
-        }
-        await processDirectory(srcPath, subDestPath);
-      } else if (entry.isFile()) {
-        const ext = extname(entry.name).toLowerCase();
-
-        if (imageExtensions.includes(ext)) {
-          try {
-            const result = await optimizeImage(srcPath, destPath);
-            if (result) {
-              optimized++;
-              totalSaved += result.saved;
-              const savedPercent = ((result.saved / result.originalSize) * 100).toFixed(1);
-              logger.debug(
-                `✨ ${entry.name}: ${(result.originalSize / 1024).toFixed(1)}KB → ${(result.newSize / 1024).toFixed(1)}KB (-${savedPercent}%)`
-              );
-            }
-          } catch (error) {
-            logger.warn(`⚠️  Failed to optimize ${entry.name}: ${error.message}`);
-            // Fallback: just copy the file
-            try {
-              cpSync(srcPath, destPath);
-              logger.debug(`📋 Copied ${entry.name} (fallback)`);
-            } catch (copyError) {
-              logger.error(`❌ Failed to copy ${entry.name}: ${copyError.message}`);
-            }
-          }
-        }
-      }
-    }
-  }
-
-  await processDirectory(srcDir, outDir);
-
-  if (optimized > 0) {
-    logger.success(
-      `✅ Optimized ${optimized} images (saved ${(totalSaved / 1024).toFixed(2)}KB total)`
-    );
-  } else {
-    logger.info(`📋 No images optimized (copied ${countFilesInDir(outDir)} files)`);
-  }
-
-  return { optimized, saved: totalSaved };
-}
-
-/**
- * Count files in directory (for logging)
- */
-function countFilesInDir(dir) {
-  if (!existsSync(dir)) return 0;
-  
-  let count = 0;
-  const entries = readdirSync(dir, { withFileTypes: true });
-  
-  for (const entry of entries) {
-    if (entry.isFile()) {
-      count++;
-    } else if (entry.isDirectory()) {
-      count += countFilesInDir(join(dir, entry.name));
-    }
-  }
-  
-  return count;
+  // Alias for copyImages to maintain API
+  logger.info(`📁 Copying from ${srcDir} to ${outDir}...`);
+  const copied = copyImages(srcDir, outDir);
+  return { optimized: 0, saved: 0, copied };
 }
 
-/**
- * Optimize a single image using WASM codecs
- */
-async function optimizeImage(srcPath, destPath) {
-  const ext = extname(srcPath).toLowerCase();
-  const originalFile = Bun.file(srcPath);
-  
-  // Check if file exists
-  if (!await originalFile.exists()) {
-    throw new Error(`File not found: ${srcPath}`);
-  }
-  
-  const originalSize = originalFile.size;
-
-  try {
-    // For SVG and GIF, just copy (no optimization needed/supported)
-    if (ext === '.svg' || ext === '.gif') {
-      cpSync(srcPath, destPath);
-      return null;
-    }
-
-    // Read the original image
-    const originalBuffer = await originalFile.arrayBuffer();
-
-    let optimizedBuffer;
-
-    if (ext === '.png') {
-      await initializePNG();
-      
-      // Decode → Re-encode with compression
-      const imageData = await pngDecode(originalBuffer);
-      
-      // Encode with oxipng-level compression (quality 85, similar to oxipng -o 2)
-      optimizedBuffer = await pngEncode(imageData, { 
-        quality: 85,
-        effort: 2 // 0-10, higher = better compression but slower
-      });
-      
-    } else if (ext === '.jpg' || ext === '.jpeg') {
-      await initializeJPEG();
-      
-      // Decode → Re-encode with quality 85 (mozjpeg-like quality)
-      const imageData = await jpegDecode(originalBuffer);
-      optimizedBuffer = await jpegEncode(imageData, { quality: 85 });
-      
-    } else if (ext === '.webp') {
-      await initializeWebP();
-      
-      // WebP optimization
-      const imageData = await webpDecode(originalBuffer);
-      optimizedBuffer = await webpEncode(imageData, { quality: 85 });
-    } else {
-      // Unsupported format, just copy
-      cpSync(srcPath, destPath);
-      return null;
-    }
-
-    // Only save if we actually reduced the size
-    if (optimizedBuffer && optimizedBuffer.byteLength < originalSize) {
-      await Bun.write(destPath, optimizedBuffer);
-      const saved = originalSize - optimizedBuffer.byteLength;
-      return { saved, originalSize, newSize: optimizedBuffer.byteLength };
-    }
-
-    // If optimization didn't help, just copy the original
-    cpSync(srcPath, destPath);
-    return null;
-    
-  } catch (error) {
-    // If anything fails, just copy the original
-    logger.warn(`Optimization failed for ${srcPath.split('/').pop()}, copying original`);
-    cpSync(srcPath, destPath);
-    return null;
-  }
-}
-
-/**
- * Check if optimization is available (always true with WASM! 🎉)
- */
 export async function checkOptimizationTools() {
-  try {
-    // Try to import the WASM modules
-    await import('@jsquash/png');
-    await import('@jsquash/jpeg');
-    await import('@jsquash/webp');
-    
-    logger.success('✅ WASM image optimization available');
-    logger.info('📦 Using @jsquash (zero OS dependencies!)');
-    return ['png', 'jpeg', 'webp'];
-  } catch (error) {
-    logger.error('❌ WASM codecs not installed. Run: bun add @jsquash/png @jsquash/jpeg @jsquash/webp');
-    return [];
-  }
+  // Always return empty array to disable optimization
+  return [];
 }
 
-/**
- * Copy images without optimization (fallback)
- */
 export function copyImages(srcDir, outDir) {
-  const imageExtensions = ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg', '.avif', '.ico'];
+  // All common image formats
+  const imageExtensions = [
+    '.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg', 
+    '.avif', '.ico', '.bmp', '.tiff', '.tif'
+  ];
+  
   let copied = 0;
+  let skipped = 0;
 
-  // Check if source directory exists
   if (!existsSync(srcDir)) {
-    logger.warn(`⚠️  Source directory not found: ${srcDir}`);
+    logger.warn(`⚠️  Source not found: ${srcDir}`);
     return 0;
   }
 
-  // Create output directory if it doesn't exist
-  if (!existsSync(outDir)) {
-    mkdirSync(outDir, { recursive: true });
-  }
+  // Ensure output directory exists
+  mkdirSync(outDir, { recursive: true });
 
   function processDirectory(dir, targetDir) {
-    const entries = readdirSync(dir, { withFileTypes: true });
+    try {
+      const entries = readdirSync(dir, { withFileTypes: true });
 
-    for (const entry of entries) {
-      const srcPath = join(dir, entry.name);
-      const destPath = join(targetDir, entry.name);
+      for (const entry of entries) {
+        const srcPath = join(dir, entry.name);
+        const destPath = join(targetDir, entry.name);
 
-      if (entry.isDirectory()) {
-        // Create subdirectory in target
-        const subDestPath = join(targetDir, entry.name);
-        if (!existsSync(subDestPath)) {
+        if (entry.isDirectory()) {
+          // Recursively process subdirectories
+          const subDestPath = join(targetDir, entry.name);
           mkdirSync(subDestPath, { recursive: true });
-        }
-        // FIXED: Use destPath, not targetDir
-        processDirectory(srcPath, subDestPath);
-      } else if (entry.isFile()) {
-        const ext = extname(entry.name).toLowerCase();
+          processDirectory(srcPath, subDestPath);
+        } else if (entry.isFile()) {
+          const ext = extname(entry.name).toLowerCase();
 
-        if (imageExtensions.includes(ext)) {
-          try {
-            cpSync(srcPath, destPath);
-            copied++;
-            logger.debug(`📋 Copied ${entry.name}`);
-          } catch (error) {
-            logger.warn(`Failed to copy ${entry.name}: ${error.message}`);
+          if (imageExtensions.includes(ext)) {
+            try {
+              cpSync(srcPath, destPath);
+              copied++;
+            } catch (error) {
+              logger.warn(`  Failed to copy ${entry.name}: ${error.message}`);
+              skipped++;
+            }
+          } else {
+            skipped++;
           }
         }
       }
+    } catch (error) {
+      logger.error(`Error processing ${dir}: ${error.message}`);
     }
   }
 
   processDirectory(srcDir, outDir);
-  
+
   if (copied > 0) {
-    logger.info(`📋 Copied ${copied} images without optimization`);
-  } else {
-    logger.warn(`⚠️  No images found in ${srcDir}`);
+    logger.success(`✅ Copied ${copied} image(s) to ${outDir}`);
   }
   
+  if (skipped > 0) {
+    logger.info(`📝 Skipped ${skipped} non-image file(s)`);
+  }
+
   return copied;
 }

package/src/build.js

@@ -1,4 +1,4 @@
-// src/build.js - FIXED VERSION
+// src/build.js - COMPLETELY FIXED VERSION
 import { join, relative, basename, extname, dirname } from 'path';
 import { existsSync, mkdirSync, rmSync, cpSync, readdirSync, statSync } from 'fs';
 import logger from './logger/logger.js';
@@ -13,6 +13,7 @@ export async function buildProduction(options = {}) {
   
   logger.bigLog('BUILDING FOR PRODUCTION', { color: 'green' });
   
+  // Clean up old builds
   if (existsSync(buildDir)) {
     rmSync(buildDir, { recursive: true });
   }
@@ -35,7 +36,7 @@ export async function buildProduction(options = {}) {
     
     logger.info('Step 1: Compiling for production...');
     const { routes } = await compileForBuild(root, buildDir, envVars);
-    logger.success('Production compilation complete');
+    logger.success(`Production compilation complete - ${routes.length} routes`);
     
     logger.info('Step 2: Building CSS with Lightning CSS...');
     await buildAllCSS(root, outDir);
@@ -44,8 +45,8 @@ export async function buildProduction(options = {}) {
     const optimizationTools = await checkOptimizationTools();
     
     logger.info('Step 4: Copying and optimizing static assets...');
-    // ✅ FIX 1: Copy images from BOTH src/images/ and public/
-    await copyAllStaticAssets(root, outDir, optimizationTools.length > 0);
+    // SKIP OPTIMIZATION FOR NOW - JUST COPY
+    await copyAllStaticAssets(root, outDir);
     
     logger.info('Step 5: Bundling JavaScript with Bun...');
     const buildEntry = join(buildDir, 'main.js');
@@ -85,22 +86,33 @@ export async function buildProduction(options = {}) {
       process.exit(1);
     }
     
-    logger.success('JavaScript bundled with tree-shaking');
+    logger.success('JavaScript bundled successfully');
     
-    logger.info('Step 6: Generating SEO-optimized HTML files...');
-    // ✅ FIX 2: Generate HTML for ALL routes including index.html
+    // DEBUG: Show what was built
+    logger.info('Built outputs:');
+    result.outputs.forEach((output, i) => {
+      logger.info(`  ${i + 1}. ${relative(outDir, output.path)} (${output.kind})`);
+    });
+    
+    logger.info('Step 6: Generating HTML files...');
+    // ✅ CRITICAL FIX: Generate HTML files
     await generateProductionHTML(root, outDir, result, routes);
     
-    rmSync(buildDir, { recursive: true });
-    logger.info('Cleaned up .bertuibuild/');
+    // Clean up build directory
+    if (existsSync(buildDir)) {
+      rmSync(buildDir, { recursive: true });
+      logger.info('Cleaned up .bertuibuild/');
+    }
     
     const duration = Date.now() - startTime;
     logger.success(`✨ Build complete in ${duration}ms`);
     logger.info(`📦 Output: ${outDir}`);
     
+    // Show build summary
     logger.table(result.outputs.map(o => ({
       file: o.path.replace(outDir, ''),
-      size: `${(o.size / 1024).toFixed(2)} KB`
+      size: `${(o.size / 1024).toFixed(2)} KB`,
+      type: o.kind
     })));
     
     logger.bigLog('READY TO DEPLOY', { color: 'green' });
@@ -108,7 +120,7 @@ export async function buildProduction(options = {}) {
     console.log('  Vercel:  bunx vercel');
     console.log('  Netlify: bunx netlify deploy');
     console.log('\n🔍 Preview locally:\n');
-    console.log('  bun run preview\n');
+    console.log('  cd dist && bun run preview\n');
     
   } catch (error) {
     logger.error(`Build failed: ${error.message}`);
@@ -124,64 +136,28 @@ export async function buildProduction(options = {}) {
   }
 }
 
-// ✅ FIX 3: Enhanced asset copying with proper directory structure
-// ✅ FIX 3: Enhanced asset copying with proper directory structure
-async function copyAllStaticAssets(root, outDir, optimize = true) {
+async function copyAllStaticAssets(root, outDir) {
   const publicDir = join(root, 'public');
   const srcImagesDir = join(root, 'src', 'images');
   
-  let assetsCopied = 0;
-  let assetsOptimized = 0;
+  logger.info('📦 Copying static assets...');
   
-  logger.info(`🔍 Checking source directories...`);
-  logger.info(`  public/: ${existsSync(publicDir) ? '✅ exists' : '❌ not found'}`);
-  logger.info(`  src/images/: ${existsSync(srcImagesDir) ? '✅ exists' : '❌ not found'}`);
-  
-  // Create images directory in dist/
-  const distImagesDir = join(outDir, 'images');
-  if (!existsSync(distImagesDir)) {
-    mkdirSync(distImagesDir, { recursive: true });
-  }
-  
-  // Copy from public/ to root of dist/
+  // Copy from public/ to dist/
   if (existsSync(publicDir)) {
-    logger.info('Copying public/ assets...');
-    if (optimize) {
-      const result = await optimizeImages(publicDir, outDir);
-      assetsOptimized += result.optimized;
-    } else {
-      assetsCopied += copyImages(publicDir, outDir);
-    }
-  } else {
-    logger.info('No public/ directory found, skipping...');
+    logger.info('  Copying public/ directory...');
+    copyImages(publicDir, outDir);
   }
   
-  // ✅ FIX: Copy from src/images/ to dist/images/
+  // Copy from src/images/ to dist/images/
   if (existsSync(srcImagesDir)) {
-    logger.info(`Copying src/images/ to dist/images/...`);
-    
-    // Debug: List files in src/images/
-    const files = readdirSync(srcImagesDir);
-    logger.info(`Found ${files.length} items in src/images/: ${files.join(', ')}`);
-    
-    if (optimize) {
-      const result = await optimizeImages(srcImagesDir, distImagesDir);
-      assetsOptimized += result.optimized;
-    } else {
-      assetsCopied += copyImages(srcImagesDir, distImagesDir);
-    }
-  } else {
-    logger.info('No src/images/ directory found, skipping...');
+    const distImagesDir = join(outDir, 'images');
+    logger.info(`  Copying src/images/ to ${relative(root, distImagesDir)}/...`);
+    copyImages(srcImagesDir, distImagesDir);
   }
   
-  if (optimize && assetsOptimized > 0) {
-    logger.success(`🎨 Optimized ${assetsOptimized} images with WASM codecs`);
-  } else if (assetsCopied > 0) {
-    logger.success(`📋 Copied ${assetsCopied} static assets`);
-  } else {
-    logger.warn(`⚠️  No static assets found or copied`);
-  }
+  logger.success('✅ All assets copied');
 }
+
 async function buildAllCSS(root, outDir) {
   const srcStylesDir = join(root, 'src', 'styles');
   const stylesOutDir = join(outDir, 'styles');
@@ -569,63 +545,71 @@ function extractMetaFromSource(code) {
   }
 }
 
-// ✅ FIX 4: Generate proper HTML files with correct meta tags
+// ✅ CRITICAL FIX: Generate HTML files
 async function generateProductionHTML(root, outDir, buildResult, routes) {
+  if (routes.length === 0) {
+    logger.warn('No routes found, skipping HTML generation');
+    return;
+  }
+  
+  logger.info(`Generating HTML files for ${routes.length} routes...`);
+  
+  // Find main JS 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 in build output');
+    logger.error('Could not find main bundle in build output');
+    // List all outputs for debugging
+    logger.info('Available outputs:');
+    buildResult.outputs.forEach((o, i) => {
+      logger.info(`  ${i + 1}. ${o.path} (${o.kind})`);
+    });
+    return;
   }
   
   const bundlePath = relative(outDir, mainBundle.path).replace(/\\/g, '/');
-  logger.info(`Main bundle path: ${bundlePath}`);
+  logger.info(`Main bundle: ${bundlePath}`);
   
-  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');
-  }
-  
-  // ✅ Load config for default meta
+  // 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...');
-  
-  // ✅ FIX: Generate HTML for ALL routes (including dynamic as fallback)
+  // Generate HTML for each route
   for (const route of routes) {
-    const sourceCode = await Bun.file(route.path).text();
-    const pageMeta = extractMetaFromSource(sourceCode);
-    const meta = { ...defaultMeta, ...pageMeta };
-    
-    if (pageMeta) {
-      logger.info(`Extracted meta for ${route.route}: ${JSON.stringify(pageMeta)}`);
-    }
-    
-    const html = generateHTML(meta, route, bundlePath, userStylesheets);
-    
-    let htmlPath;
-    if (route.route === '/') {
-      htmlPath = join(outDir, 'index.html');
-    } else {
-      const routeDir = join(outDir, route.route);
-      mkdirSync(routeDir, { recursive: true });
-      htmlPath = join(routeDir, 'index.html');
+    try {
+      const sourceCode = await Bun.file(route.path).text();
+      const pageMeta = extractMetaFromSource(sourceCode);
+      const meta = { ...defaultMeta, ...pageMeta };
+      
+      const html = generateHTML(meta, route, bundlePath);
+      
+      let htmlPath;
+      if (route.route === '/') {
+        htmlPath = join(outDir, 'index.html');
+      } else {
+        // Create directory for the route
+        const routeDir = join(outDir, route.route.slice(1)); // Remove leading slash
+        mkdirSync(routeDir, { recursive: true });
+        htmlPath = join(routeDir, 'index.html');
+      }
+      
+      await Bun.write(htmlPath, html);
+      logger.success(`Generated: ${route.route === '/' ? 'index.html' : route.route + '/index.html'}`);
+    } catch (error) {
+      logger.error(`Failed to generate HTML for ${route.route}: ${error.message}`);
     }
-    
-    await Bun.write(htmlPath, html);
-    logger.success(`Generated ${route.route === '/' ? 'index.html' : route.route + '/index.html'}`);
   }
 }
 
-function generateHTML(meta, route, bundlePath, userStylesheets) {
+function generateHTML(meta, route, bundlePath) {
+  const cssFiles = ['global.min.css', 'home.min.css'];
+  const stylesheets = cssFiles.map(css => 
+    `  <link rel="stylesheet" href="/styles/${css}">`
+  ).join('\n');
+  
   return `<!DOCTYPE html>
 <html lang="${meta.lang || 'en'}">
 <head>
@@ -636,23 +620,10 @@ function generateHTML(meta, route, bundlePath, userStylesheets) {
   <meta name="description" content="${meta.description || 'Built with BertUI - Lightning fast React development'}">
   ${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}">` : ''}
-  <meta property="og:type" content="website">
-  <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'}">
-  <meta name="twitter:description" content="${meta.ogDescription || meta.description || 'Built with BertUI'}">
-  ${meta.ogImage ? `<meta name="twitter:image" content="${meta.ogImage}">` : ''}
   
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-  <link rel="canonical" href="${route.route}">
   
-${userStylesheets}
+${stylesheets}
   
   <script type="importmap">
   {