fix: islands not working with basePath (#2496)

src/middlewares/static_files.ts

@@ -14,14 +14,21 @@ import { getBuildCache } from "../context.ts";
  */
 export function staticFiles<T>(): MiddlewareFn<T> {
   return async function freshStaticFiles(ctx) {
-    const { req, url } = ctx;
+    const { req, url, config } = ctx;
     const buildCache = getBuildCache(ctx);
 
+    let pathname = url.pathname;
+    if (config.basePath) {
+      pathname = pathname !== config.basePath
+        ? pathname.slice(config.basePath.length)
+        : "/";
+    }
+
     // Fast path bail out
-    const file = await buildCache.readFile(url.pathname);
-    if (url.pathname === "/" || file === null) {
+    const file = await buildCache.readFile(pathname);
+    if (pathname === "/" || file === null) {
       // Optimization: Prevent long responses for favicon.ico requests
-      if (url.pathname === "/favicon.ico") {
+      if (pathname === "/favicon.ico") {
         return new Response(null, { status: 404 });
       }
       return ctx.next();
@@ -43,7 +50,7 @@ export function staticFiles<T>(): MiddlewareFn<T> {
       });
     }
 
-    const ext = path.extname(url.pathname);
+    const ext = path.extname(pathname);
     const etag = file.hash;
 
     const contentType = getContentType(ext);

src/runtime/server/preact_hooks.tsx

@@ -70,7 +70,6 @@ export class RenderState {
   error: Error | null = null;
   // deno-lint-ignore no-explicit-any
   slots: Array<{ id: number; name: string; vnode: VNode<any> } | null> = [];
-  basePath = ""; // FIXME
   // deno-lint-ignore no-explicit-any
   islandProps: any[] = [];
   islands = new Set<Island>();
@@ -463,7 +462,7 @@ function FreshRuntimeScript() {
       const named = island.exportName === "default"
         ? island.name
         : `{ ${island.exportName} }`;
-      return `import ${named} from "${asset(chunk)}";`;
+      return `import ${named} from "${asset(`${basePath}${chunk}`)}";`;
     }).join("");
 
     const islandObj = "{" + islandArr.map((island) => island.name)

tests/islands_test.tsx

@@ -28,11 +28,12 @@ import { EscapeIsland } from "./fixtures_islands/EscapeIsland.tsx";
 import * as path from "@std/path";
 import { setBuildCache } from "../src/app.ts";
 import { getBuildCache } from "../src/app.ts";
+import type { FreshConfig } from "../src/config.ts";
 
 await buildProd(allIslandApp);
 
-function testApp() {
-  const app = new App();
+function testApp(config?: FreshConfig) {
+  const app = new App(config);
   setBuildCache(app, getBuildCache(allIslandApp));
   return app;
 }
@@ -575,6 +576,31 @@ Deno.test({
   },
 });
 
+Deno.test({
+  name: "islands - in base path",
+  fn: async () => {
+    const selfCounter = getIsland("SelfCounter.tsx");
+
+    const app = testApp({ basePath: "/foo" })
+      .use(staticFiles())
+      .island(selfCounter, "SelfCounter", SelfCounter)
+      .get("/", (ctx) =>
+        ctx.render(
+          <Doc>
+            <SelfCounter />
+          </Doc>,
+        ));
+
+    await withBrowserApp(app, async (page, address) => {
+      await page.goto(`${address}/foo`, { waitUntil: "load" });
+      await page.locator(".ready").wait();
+
+      await page.locator(".increment").click();
+      await waitForText(page, ".output", "1");
+    });
+  },
+});
+
 Deno.test({
   name: "fsRoutes - load islands from group folder",
   fn: async () => {