abret 0.1.3 → 0.1.5

package/dist/html.d.ts

@@ -6,57 +6,12 @@ export { AsyncBuffer, SafeString, VNode, Fragment, type JSXNode };
 export declare class HTMLResponse extends Response {
     private _bodySource;
     constructor(body: any, init?: ResponseInit);
-    /**
-     * Initializes the response with new options.
-     *
-     * @param newInit - The new options to apply to the response.
-     * @returns A new HTMLResponse instance with the updated options.
-     *
-     * @example
-     * ```ts
-     * const response = new HTMLResponse(<div>Hello World</div>).init({ status: 200 });
-     * ```
-     */
     init(newInit: ResponseInit): HTMLResponse;
-    /**
-     * Adds a DOCTYPE declaration to the response body.
-     *
-     * @param dt - The DOCTYPE declaration to add. Can be a string or a boolean.
-     * @returns A new HTMLResponse instance with the DOCTYPE declaration added.
-     *
-     * @example
-     * ```ts
-     * const response = new HTMLResponse(<div>Hello World</div>).doctype(true);
-     * ```
-     */
     doctype(dt?: string | boolean): HTMLResponse;
 }
 /**
  * Creates an implementation of `HTMLResponse`.
  */
 export declare function html(bodyOrStrings: JSXNode | TemplateStringsArray, ...args: any[]): HTMLResponse;
-/**
- * Renders a JSXNode to a SafeString or Promise<SafeString>.
- *
- * @param node - The JSXNode to render.
- * @returns A SafeString or Promise<SafeString> containing the rendered HTML.
- *
- * @example
- * ```tsx
- * const rendered = render(<div>Hello World</div>);
- * ```
- */
 export declare function render(node: any): SafeString | Promise<SafeString>;
-/**
- * Creates a raw HTML string that will not be escaped when rendered.
- * Equivalent to using `new SafeString(str)`.
- *
- * @param str - The raw HTML string.
- * @returns A SafeString instance.
- *
- * @example
- * ```tsx
- * <div>{raw("<span>Raw HTML</span>")}</div>
- * ```
- */
 export declare function raw(str: string): SafeString;

package/dist/html.js

@@ -6,10 +6,15 @@ import {
   VNode
 } from "./chunk-m9t91z6h.js";
 import {
-  getContextStore
+  createContext,
+  getContextStore,
+  runWithContextValue,
+  useContext
 } from "./chunk-xw5b0251.js";
 
 // src/html.ts
+var HeadContext = createContext("abret-head");
+
 class HTMLResponse extends Response {
   _bodySource;
   constructor(body, init) {
@@ -68,19 +73,19 @@ var MODE_PROPVAL = 4;
 var MODE_PROPVAL_QUOTE = 5;
 var MODE_CLOSE_TAG = 6;
 function html(bodyOrStrings, ...args) {
-  if (Array.isArray(bodyOrStrings) && bodyOrStrings.raw) {
-    const vnode = parse(bodyOrStrings, args);
-    const rendered2 = render(vnode);
-    if (rendered2 instanceof Promise) {
-      return new HTMLResponse(rendered2.then((s) => raw(processMetadata(s.toString()))));
+  const headCollection = [];
+  const runRender = () => {
+    if (Array.isArray(bodyOrStrings) && bodyOrStrings.raw) {
+      const vnode = parse(bodyOrStrings, args);
+      return render(vnode);
     }
-    return new HTMLResponse(raw(processMetadata(rendered2.toString())));
-  }
-  const rendered = render(bodyOrStrings);
+    return render(bodyOrStrings);
+  };
+  const rendered = runWithContextValue(HeadContext, headCollection, runRender);
   if (rendered instanceof Promise) {
-    return new HTMLResponse(rendered.then((s) => raw(processMetadata(s.toString()))));
+    return new HTMLResponse(rendered.then((s) => raw(injectMetadata(s.toString(), headCollection))));
   }
-  return new HTMLResponse(raw(processMetadata(rendered.toString())));
+  return new HTMLResponse(raw(injectMetadata(rendered.toString(), headCollection)));
 }
 function parse(statics, fields) {
   let mode = MODE_TEXT;
@@ -106,7 +111,7 @@ function parse(statics, fields) {
         if (buffer === "...") {
           Object.assign(active.props, val);
           buffer = "";
-        } else {}
+        }
       } else if (mode === MODE_PROPNAME) {
         propName = fields[i - 1];
         mode = MODE_PROPVAL;
@@ -301,6 +306,59 @@ function render(node) {
     if (typeof node.tag === "string") {
       const tag = node.tag;
       const { children, dangerouslySetInnerHTML, ...rest } = node.props;
+      if (tag === "title" || tag === "meta" || tag === "link") {
+        const headStore = useContext(HeadContext);
+        if (headStore) {
+          const attrs2 = Object.entries(rest).map(([key2, value]) => {
+            if (value === null || value === undefined || value === false)
+              return "";
+            if (key2 === "className")
+              key2 = "class";
+            if (key2 === "style")
+              value = renderStyle(value);
+            if (value === true)
+              return ` ${key2}`;
+            return ` ${key2}="${escapeHtml(String(value))}"`;
+          }).join("");
+          if (tag === "title") {
+            const childrenList2 = Array.isArray(children) ? children : [children];
+            const renderedContent = render(childrenList2);
+            const pushTitle = (content) => {
+              headStore.push({
+                type: "title",
+                content: `<title${attrs2}>${escapeHtml(content)}</title>`
+              });
+            };
+            if (renderedContent instanceof Promise) {
+              return renderedContent.then((c) => {
+                pushTitle(c.toString());
+                return raw("");
+              });
+            }
+            pushTitle(renderedContent.toString());
+            return raw("");
+          }
+          let key;
+          if (tag === "meta") {
+            if (rest.name)
+              key = `name:${rest.name}`;
+            else if (rest.property)
+              key = `property:${rest.property}`;
+            else if (rest.charset)
+              key = "charset";
+            else if (rest["http-equiv"])
+              key = `http-equiv:${rest["http-equiv"]}`;
+          } else if (tag === "link" && rest.rel?.toLowerCase() === "canonical") {
+            key = "canonical";
+          }
+          headStore.push({
+            type: tag,
+            key,
+            content: `<${tag}${attrs2} />`
+          });
+          return raw("");
+        }
+      }
       const attrs = Object.entries(rest).map(([key, value]) => {
         if (value === null || value === undefined || value === false)
           return "";
@@ -308,6 +366,9 @@ function render(node) {
           key = "class";
         if (key === "style")
           value = renderStyle(value);
+        if ((key === "href" || key === "src") && typeof value === "string" && value.trim().toLowerCase().startsWith("javascript:")) {
+          value = "";
+        }
         if (value === true)
           return ` ${key}`;
         return ` ${key}="${escapeHtml(String(value))}"`;
@@ -365,87 +426,43 @@ function renderStyle(style) {
     return style;
   return Object.entries(style).map(([k, v]) => `${kebabCase(k)}:${v}`).join(";");
 }
-function processMetadata(html2) {
-  const metaTags = [];
-  const linkTags = [];
-  let titleTag = null;
-  const extractedHtml = html2.replace(/<title(?:\s[^>]*)?>([\s\S]*?)<\/title>|<meta(?:\s[^>]*)?\/?>|<link(?:\s[^>]*)?\/?>/gi, (match) => {
-    if (match.toLowerCase().startsWith("<title")) {
-      titleTag = match;
-      return "";
-    }
-    if (match.toLowerCase().startsWith("<meta")) {
-      const name = match.match(/name=["']([^"']+)["']/i);
-      const property = match.match(/property=["']([^"']+)["']/i);
-      const charset = match.match(/charset=["']([^"']+)["']/i);
-      const httpEquiv = match.match(/http-equiv=["']([^"']+)["']/i);
-      let key;
-      if (name?.[1])
-        key = `name:${name[1]}`;
-      else if (property?.[1])
-        key = `property:${property[1]}`;
-      else if (charset?.[1])
-        key = "charset";
-      else if (httpEquiv?.[1])
-        key = `http-equiv:${httpEquiv[1]}`;
-      metaTags.push({ tag: "meta", content: match, key });
-      return "";
-    }
-    if (match.toLowerCase().startsWith("<link")) {
-      const rel = match.match(/rel=["']([^"']+)["']/i);
-      const key = rel?.[1]?.toLowerCase() === "canonical" ? "canonical" : undefined;
-      linkTags.push({ tag: "link", content: match, key });
-      return "";
-    }
-    return match;
-  });
+function injectMetadata(html2, tags) {
+  if (tags.length === 0)
+    return html2;
   const headContent = [];
   const metaMap = new Map;
-  metaTags.forEach((m) => {
-    if (m.key)
-      metaMap.set(m.key, m.content);
-  });
+  let titleString = null;
+  for (const t of tags) {
+    if (t.type === "title") {
+      titleString = t.content;
+    } else if (t.key) {
+      metaMap.set(t.key, t.content);
+    } else {
+      headContent.push(t.content);
+    }
+  }
+  const finalHead = [];
   if (metaMap.has("charset")) {
-    const charsetTag = metaMap.get("charset");
-    if (charsetTag)
-      headContent.push(charsetTag);
+    finalHead.push(metaMap.get("charset"));
     metaMap.delete("charset");
   }
-  if (titleTag)
-    headContent.push(titleTag);
+  if (titleString) {
+    finalHead.push(titleString);
+  }
   if (metaMap.has("name:viewport")) {
-    const viewportTag = metaMap.get("name:viewport");
-    if (viewportTag)
-      headContent.push(viewportTag);
+    finalHead.push(metaMap.get("name:viewport"));
     metaMap.delete("name:viewport");
   }
-  metaMap.forEach((v) => {
-    headContent.push(v);
-  });
-  metaTags.filter((m) => !m.key).forEach((m) => {
-    headContent.push(m.content);
-  });
-  const linkMap = new Map;
-  linkTags.forEach((l) => {
-    if (l.key)
-      linkMap.set(l.key, l.content);
-    else
-      headContent.push(l.content);
-  });
-  linkMap.forEach((v) => {
-    headContent.push(v);
-  });
-  const headString = headContent.join("");
-  if (extractedHtml.includes("<head>")) {
-    return extractedHtml.replace("<head>", `<head>${headString}`);
-  }
-  if (extractedHtml.match(/<html/i)) {
-    return extractedHtml.replace(/(<html[^>]*>)/i, `$1<head>${headString}</head>`);
+  metaMap.forEach((v) => finalHead.push(v));
+  finalHead.push(...headContent);
+  const headString = finalHead.join("");
+  if (html2.includes("<head>")) {
+    return html2.replace("<head>", `<head>${headString}`);
   }
-  if (headContent.length > 0) {
-    return `<head>${headString}</head>${extractedHtml}`;
+  if (html2.toLowerCase().includes("<html")) {
+    return html2.replace(/(<html[^>]*>)/i, `$1<head>${headString}</head>`);
   }
-  return extractedHtml;
+  return `<head>${headString}</head>${html2}`;
 }
 function raw(str) {
   return new SafeString(str);

package/dist/middleware/transpiler/index.d.ts

@@ -7,15 +7,22 @@ interface TranspilerOptions {
     vendorPath?: string;
     /** Optional list of modules to bundle on startup */
     prewarm?: string[];
+    /** Minify local modules. Defaults to false (recommended for dev) */
+    minify?: boolean;
+    /** Browser cache TTL for local modules in seconds. Defaults to 0 */
+    localMaxAge?: number;
+    /** Global identifier replacements */
+    define?: Record<string, string>;
+    /** Map modules to global variables (e.g., { 'react': 'React' }) */
+    globals?: Record<string, string>;
+    /** Automatically fallback to esm.sh if package is not found locally */
+    cdnFallback?: boolean;
+    /** Additional Bun plugins */
+    plugins?: any[];
 }
 /**
  * Transpiler middleware that handles on-the-fly TS/TSX transpilation
  * and automatic npm module bundling (vendor modules).
- *
- * Usage:
- * ```ts
- * transpiler({ sourcePath: "./src", staticBasePath: "/_modules" })
- * ```
  */
 export declare const transpiler: (options: TranspilerOptions) => import("../..").Middleware<string, undefined>;
 export {};

package/dist/middleware/transpiler/index.js

@@ -5,14 +5,20 @@ import {
 import"../../chunk-xw5b0251.js";
 
 // src/middleware/transpiler/index.ts
-import { existsSync, mkdirSync } from "fs";
+import { existsSync, mkdirSync, readFileSync, statSync } from "fs";
 import path from "path";
 var transpiler = (options) => {
   const {
     sourcePath,
     staticBasePath,
     vendorPath = "vendor",
-    prewarm = []
+    prewarm = [],
+    minify = false,
+    localMaxAge = 0,
+    define = {},
+    globals = {},
+    cdnFallback = false,
+    plugins = []
   } = options;
   const cacheDir = path.resolve(process.cwd(), "node_modules", ".transpiler");
   const basePrefix = staticBasePath.endsWith("/") ? staticBasePath : `${staticBasePath}/`;
@@ -20,52 +26,143 @@ var transpiler = (options) => {
   if (!existsSync(cacheDir)) {
     mkdirSync(cacheDir, { recursive: true });
   }
+  const publicEnv = {};
+  for (const [key, value] of Object.entries(process.env)) {
+    if (key.startsWith("PUBLIC_")) {
+      publicEnv[`process.env.${key}`] = JSON.stringify(value);
+    }
+  }
+  const defaultDefine = {
+    "process.env.NODE_ENV": JSON.stringify("development"),
+    ...publicEnv,
+    ...define
+  };
+  const trustedDependencies = new Set([
+    ...prewarm || [],
+    ...Object.keys(globals)
+  ]);
+  function registerTrustedDependency(moduleName) {
+    if (!moduleName)
+      return;
+    const normalizedName = moduleName.trim();
+    if (normalizedName && !trustedDependencies.has(normalizedName)) {
+      trustedDependencies.add(normalizedName);
+    }
+  }
+  if (existsSync(cacheDir)) {
+    const files = new Bun.Glob("*.js").scanSync(cacheDir);
+    for (const file of files) {
+      const moduleName = file.slice(0, -3).replace(/__/g, "/");
+      registerTrustedDependency(moduleName);
+    }
+  }
+  const absSourcePath = path.resolve(process.cwd(), sourcePath);
+  if (existsSync(absSourcePath)) {
+    const glob = new Bun.Glob("**/*.{ts,tsx,js,jsx}");
+    const scanner = new Bun.Transpiler({ loader: "tsx" });
+    for (const relativePath of glob.scanSync(absSourcePath)) {
+      try {
+        const fullPath = path.join(absSourcePath, relativePath);
+        const contents = readFileSync(fullPath, "utf8");
+        const imports = scanner.scan(contents).imports;
+        for (const imp of imports) {
+          if (!imp.path.startsWith(".") && !imp.path.startsWith("/")) {
+            registerTrustedDependency(imp.path);
+          }
+        }
+      } catch {}
+    }
+  }
+  const activeBundles = new Map;
+  function resolveModulePath(moduleName) {
+    if (globals[moduleName])
+      return moduleName;
+    try {
+      Bun.resolveSync(moduleName, process.cwd());
+      registerTrustedDependency(moduleName);
+      return `${basePrefix}${vendorPath.replace(/^\/|\/$/g, "")}/${moduleName}`;
+    } catch {
+      if (cdnFallback) {
+        return `https://esm.sh/${moduleName}`;
+      }
+      return `${basePrefix}${vendorPath.replace(/^\/|\/$/g, "")}/${moduleName}`;
+    }
+  }
   async function bundleVendorModule(moduleName) {
     const cacheKey = moduleName.replace(/\//g, "__");
     const cachedFile = path.join(cacheDir, `${cacheKey}.js`);
     if (existsSync(cachedFile))
       return;
-    try {
-      const entryPoint = Bun.resolveSync(moduleName, process.cwd());
-      const result = await Bun.build({
-        entrypoints: [entryPoint],
-        target: "browser",
-        format: "esm",
-        minify: true,
-        plugins: [
-          {
-            name: "abret-external-vendor",
-            setup(build) {
-              build.onResolve({ filter: /^[^./]/ }, (args) => {
-                if (args.path === moduleName)
-                  return null;
-                return { path: args.path, external: true };
-              });
+    if (activeBundles.has(cacheKey)) {
+      return activeBundles.get(cacheKey);
+    }
+    const promise = (async () => {
+      if (existsSync(cachedFile))
+        return;
+      try {
+        const entryPoint = Bun.resolveSync(moduleName, process.cwd());
+        const globalsPlugin = {
+          name: "abret-globals",
+          setup(build) {
+            for (const moduleName2 of Object.keys(globals)) {
+              build.onResolve({ filter: new RegExp(`^${moduleName2}$`) }, () => ({
+                path: moduleName2,
+                namespace: "abret-globals"
+              }));
             }
+            build.onLoad({ filter: /.*/, namespace: "abret-globals" }, (args) => {
+              const gName = globals[args.path];
+              return {
+                contents: `export default globalThis.${gName}; export const ${gName} = globalThis.${gName};`,
+                loader: "js"
+              };
+            });
           }
-        ]
-      });
-      if (!result.success || result.outputs.length === 0) {
-        console.error(`[Abret] Failed to bundle vendor module: ${moduleName}`, result.logs);
-        return;
-      }
-      const output = result.outputs[0];
-      if (!output)
-        return;
-      const rawContent = await output.text();
-      const content = rawContent.replace(/((?:import|export)\s*[\s\S]*?from\s*['"]|import\s*\(['"])([^'"]+)(['"]\)?)/g, (match, prefix, path2, suffix) => {
-        if (/^(https?:|(?:\/\/))/.test(path2))
-          return match;
-        if (!path2.startsWith(".") && !path2.startsWith("/")) {
-          return `${prefix}${basePrefix}${vendorPath.replace(/^\/|\/$/g, "")}/${path2}${suffix}`;
+        };
+        const result = await Bun.build({
+          entrypoints: [entryPoint],
+          target: "browser",
+          format: "esm",
+          minify: true,
+          define: defaultDefine,
+          plugins: [
+            globalsPlugin,
+            {
+              name: "abret-external-vendor",
+              setup(build) {
+                build.onResolve({ filter: /^[^./]/ }, (args) => {
+                  if (args.path === moduleName || globals[args.path])
+                    return null;
+                  if (/^(https?:|(?:\/\/))/.test(args.path)) {
+                    return { path: args.path, external: true };
+                  }
+                  return { path: resolveModulePath(args.path), external: true };
+                });
+              }
+            },
+            ...plugins
+          ]
+        });
+        if (!result.success || result.outputs.length === 0) {
+          console.error(`[Abret] Failed to bundle vendor module: ${moduleName}`, result.logs);
+          return;
         }
-        return match;
-      });
-      await Bun.write(cachedFile, content);
-      console.log(`[Abret] Pre-bundled: ${moduleName}`);
-    } catch (err) {
-      console.error(`[Abret] Error bundling ${moduleName}:`, err);
-    }
+        const output = result.outputs[0];
+        if (!output)
+          return;
+        const rawContent = await output.text();
+        const content = rawContent;
+        await Bun.write(cachedFile, content);
+        console.log(`[Abret] Pre-bundled: ${moduleName}`);
+      } catch (err) {
+        console.error(`[Abret] Error bundling ${moduleName}:`, err);
+        throw err;
+      } finally {
+        activeBundles.delete(cacheKey);
+      }
+    })();
+    activeBundles.set(cacheKey, promise);
+    return promise;
   }
   if (prewarm.length > 0) {
     for (const moduleName of prewarm) {
@@ -80,6 +177,9 @@ var transpiler = (options) => {
     }
     if (pathname.startsWith(vendorPrefix)) {
       const moduleName = pathname.slice(vendorPrefix.length);
+      if (!cdnFallback && !trustedDependencies.has(moduleName)) {
+        return next();
+      }
       const cacheKey = moduleName.replace(/\//g, "__");
       const cachedFile = path.join(cacheDir, `${cacheKey}.js`);
       if (existsSync(cachedFile)) {
@@ -90,7 +190,13 @@ var transpiler = (options) => {
           }
         });
       }
-      await bundleVendorModule(moduleName);
+      try {
+        await bundleVendorModule(moduleName);
+      } catch (_err) {
+        if (cdnFallback) {
+          return Response.redirect(`https://esm.sh/${moduleName}`, 302);
+        }
+      }
       if (existsSync(cachedFile)) {
         return new Response(Bun.file(cachedFile), {
           headers: {
@@ -102,51 +208,141 @@ var transpiler = (options) => {
       return next();
     }
     const internalPath = pathname.slice(basePrefix.length);
-    const baseFileName = internalPath.endsWith(".js") ? internalPath.slice(0, -3) : internalPath;
-    const possibleExtensions = [".tsx", ".ts", ".jsx", ".js"];
+    const extname = path.extname(internalPath);
     let sourceFile = "";
-    for (const ext of possibleExtensions) {
-      const p = path.join(path.resolve(sourcePath), (baseFileName.startsWith("/") ? baseFileName.slice(1) : baseFileName) + ext);
-      if (existsSync(p)) {
+    let contentType = "application/javascript";
+    const secureResolve = (relativePath) => {
+      const cleanRelative = relativePath.startsWith("/") ? relativePath.slice(1) : relativePath;
+      const resolvedPath = path.join(absSourcePath, cleanRelative);
+      if (!resolvedPath.startsWith(absSourcePath)) {
+        return null;
+      }
+      return resolvedPath;
+    };
+    if (extname === ".css") {
+      const p = secureResolve(internalPath);
+      if (p && existsSync(p)) {
         sourceFile = p;
-        break;
+        contentType = "text/css";
+      }
+    } else {
+      const baseFileName = internalPath.endsWith(".js") ? internalPath.slice(0, -3) : internalPath;
+      const possibleExtensions = [".tsx", ".ts", ".jsx", ".js"];
+      for (const ext of possibleExtensions) {
+        const p = secureResolve(baseFileName + ext);
+        if (p && existsSync(p)) {
+          sourceFile = p;
+          break;
+        }
       }
     }
     if (sourceFile) {
-      try {
-        const buildResult = await Bun.build({
-          entrypoints: [sourceFile],
-          target: "browser",
-          format: "esm",
-          external: ["*"]
+      const sourceStat = statSync(sourceFile);
+      const fastEtag = `W/"${sourceStat.size}-${sourceStat.mtimeMs}-${minify}"`;
+      if (req.headers.get("if-none-match") === fastEtag) {
+        return new Response(null, { status: 304 });
+      }
+      const lockKey = `local:${sourceFile}:${fastEtag}`;
+      if (activeBundles.has(lockKey)) {
+        const result = await activeBundles.get(lockKey);
+        return new Response(result.content, {
+          headers: {
+            "Content-Type": result.contentType,
+            ETag: fastEtag,
+            "Cache-Control": localMaxAge > 0 ? `public, max-age=${localMaxAge}` : "no-cache"
+          }
         });
-        if (!buildResult.success || buildResult.outputs.length === 0) {
-          console.error(`[Abret] Build error for ${sourceFile}:`, buildResult.logs);
-          return next();
-        }
-        const output = buildResult.outputs[0];
-        if (!output) {
-          console.error(`[Abret] No output files generated for ${sourceFile}`);
-          return next();
-        }
-        const transpiledCode = await output.text();
-        const finalCode = transpiledCode.replace(/((?:import|export)\s*[\s\S]*?from\s*['"]|import\s*\(['"])([^'"]+)(['"]\)?)/g, (match, prefix, path2, suffix) => {
-          if (/^(https?:|(?:\/\/))/.test(path2))
-            return match;
-          if (!path2.startsWith(".") && !path2.startsWith("/")) {
-            return `${prefix}${basePrefix}${vendorPath.replace(/^\/|\/$/g, "")}/${path2}${suffix}`;
+      }
+      const buildPromise = (async () => {
+        try {
+          const buildResult = await Bun.build({
+            entrypoints: [sourceFile],
+            target: "browser",
+            format: "esm",
+            minify,
+            define: defaultDefine,
+            external: ["*"],
+            plugins: [
+              {
+                name: "abret-globals-local",
+                setup(build) {
+                  for (const moduleName of Object.keys(globals)) {
+                    build.onResolve({ filter: new RegExp(`^${moduleName}$`) }, () => ({
+                      path: moduleName,
+                      namespace: "abret-globals"
+                    }));
+                  }
+                  build.onLoad({ filter: /.*/, namespace: "abret-globals" }, (args) => {
+                    const gName = globals[args.path];
+                    return {
+                      contents: `export default globalThis.${gName};`,
+                      loader: "js"
+                    };
+                  });
+                }
+              },
+              ...plugins
+            ]
+          });
+          if (!buildResult.success || buildResult.outputs.length === 0) {
+            throw new Error(`Build failed: ${buildResult.logs.map((l) => l.message).join(", ")}`);
           }
-          if (path2.startsWith(".") && !path2.split("/").pop()?.includes(".")) {
-            return `${prefix}${path2}.js${suffix}`;
+          const output = buildResult.outputs[0];
+          if (!output)
+            throw new Error("No output generated");
+          const transpiledCode = await output.text();
+          if (contentType === "text/css") {
+            return { content: transpiledCode, contentType };
+          }
+          const tokenRegex = /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`|\/\/[^\n]*|\/\*[\s\S]*?\*\/)|((?:import|export)\s*[\s\S]*?from\s*['"]|import\s*\(['"])([^'"]+)(['"]\)?)/g;
+          const finalCode = transpiledCode.replace(tokenRegex, (match, stringOrComment, prefix, path2, suffix) => {
+            if (stringOrComment) {
+              return match;
+            }
+            if (/^(https?:|(?:\/\/))/.test(path2))
+              return match;
+            if (!path2.startsWith(".") && !path2.startsWith("/")) {
+              return `${prefix}${resolveModulePath(path2)}${suffix}`;
+            }
+            if (path2.startsWith(".") && !path2.split("/").pop()?.includes(".")) {
+              return `${prefix}${path2}.js${suffix}`;
+            }
+            return match;
+          });
+          return { content: finalCode, contentType };
+        } finally {
+          activeBundles.delete(lockKey);
+        }
+      })();
+      activeBundles.set(lockKey, buildPromise);
+      try {
+        const finalResult = await buildPromise;
+        return new Response(finalResult.content, {
+          headers: {
+            "Content-Type": finalResult.contentType,
+            ETag: fastEtag,
+            "Cache-Control": localMaxAge > 0 ? `public, max-age=${localMaxAge}` : "no-cache"
           }
-          return match;
-        });
-        return new Response(finalCode, {
-          headers: { "Content-Type": "application/javascript" }
         });
       } catch (err) {
-        console.error(`[Abret] Transpilation error for ${sourceFile}:`, err);
-        return next();
+        const errorMessage = err.message || "Unknown transpilation error";
+        console.error(`[Abret] ${errorMessage} for ${sourceFile}`);
+        return new Response(`console.error("[Abret] Build Error in ${sourceFile}:", ${JSON.stringify(errorMessage)});
+        if (typeof document !== 'undefined') {
+          const div = document.createElement('div');
+          div.style.position = 'fixed';
+          div.style.top = '0';
+          div.style.left = '0';
+          div.style.width = '100%';
+          div.style.padding = '1rem';
+          div.style.background = '#fee2e2';
+          div.style.color = '#991b1b';
+          div.style.borderBottom = '1px solid #ef4444';
+          div.style.zIndex = '999999';
+          div.style.fontFamily = 'monospace';
+          div.innerText = "[Abret] Build Error in ${sourceFile.split("/").pop()}: " + ${JSON.stringify(errorMessage)};
+          document.body.appendChild(div);
+        }`, { headers: { "Content-Type": "application/javascript" } });
       }
     }
     return next();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "abret",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Fast, type-safe web framework for Bun with built-in JSX and middleware support.",
   "license": "MIT",
   "author": "Arisris",