fix: error on same island files in different folders

Author: marvinhagemeister

src/dev/builder.ts

@@ -280,7 +280,7 @@ export class Builder<State = any> {
 
     const prefix = `/_fresh/js/${BUILD_ID}/`;
 
-    for (const name of namer.getNames()) {
+    for (const name of buildCache.islandModNameToChunk.keys()) {
       const chunkName = output.entryToChunk.get(name);
       if (chunkName === undefined) {
         throw new Error(`Could not find chunk for island ${name}`);

src/runtime/server/preact_hooks.tsx

@@ -457,7 +457,9 @@ function FreshRuntimeScript() {
     const islandImports = islandArr.map((island) => {
       const named = island.exportName === "default"
         ? island.name
-        : `{ ${island.exportName} }`;
+        : island.exportName === island.name
+        ? `{ ${island.exportName} }`
+        : `{ ${island.exportName} as ${island.name} }`;
       return `import ${named} from "${`${basePath}${island.file}`}";`;
     }).join("");
 

src/utils.ts

@@ -62,8 +62,4 @@ export class UniqueNamer {
 
     return name;
   }
-
-  getNames(): string[] {
-    return Array.from(this.#seen.keys());
-  }
 }

tests/fixture_island_groups/routes/both/(_islands)/Foo.tsx

@@ -0,0 +1,15 @@
+import { useSignal } from "@preact/signals";
+import { useEffect } from "preact/hooks";
+
+export function Foo() {
+  const active = useSignal(false);
+  useEffect(() => {
+    active.value = true;
+  }, []);
+
+  return (
+    <div id="foo-both" class={active.value ? "ready" : ""}>
+      {active.value ? "it works" : "it doesn't work"}
+    </div>
+  );
+}

tests/fixture_island_groups/routes/both/index.tsx

@@ -0,0 +1,11 @@
+import { Foo } from "./(_islands)/Foo.tsx";
+import { Foo as Foo2 } from "../foo/(_islands)/Foo.tsx";
+
+export default function Home() {
+  return (
+    <div>
+      <Foo />
+      <Foo2 />
+    </div>
+  );
+}

tests/fixture_island_groups/routes/foo/(_islands)/Foo.tsx

@@ -8,7 +8,7 @@ export function Foo() {
   }, []);
 
   return (
-    <div class={active.value ? "ready" : ""}>
+    <div id="foo" class={active.value ? "ready" : ""}>
       {active.value ? "it works" : "it doesn't work"}
     </div>
   );

tests/islands_test.tsx

@@ -32,14 +32,25 @@ const allIslandCache = await buildProd({ islandDir: ALL_ISLAND_DIR });
 const islandGroupdCache = await buildProd({ root: ISLAND_GROUP_DIR });
 
 function testApp(config?: FreshConfig): App<unknown> {
-  const app = new App(config);
-  app.use(staticFiles());
+  const app = new App(config)
+    .use(staticFiles())
+    .fsRoutes();
 
   allIslandCache(app);
 
   return app;
 }
 
+function testGroupApp(config?: FreshConfig): App<unknown> {
+  const app = new App(config)
+    .use(staticFiles())
+    .fsRoutes();
+
+  islandGroupdCache(app);
+
+  return app;
+}
+
 Deno.test({
   name: "islands - should make signals interactive",
   fn: async () => {
@@ -657,11 +668,7 @@ Deno.test({
 Deno.test({
   name: "fsRoutes - load islands from group folder",
   fn: async () => {
-    const app = new App()
-      .use(staticFiles())
-      .fsRoutes();
-
-    islandGroupdCache(app);
+    const app = testGroupApp();
 
     await withBrowserApp(app, async (page, address) => {
       await page.goto(`${address}/foo`, { waitUntil: "load" });
@@ -676,6 +683,30 @@ Deno.test({
   },
 });
 
+Deno.test({
+  name: "fsRoutes - load islands from group folder with same name",
+  fn: async () => {
+    const app = testGroupApp();
+
+    await withBrowserApp(app, async (page, address) => {
+      await page.goto(`${address}/both`, { waitUntil: "load" });
+
+      await page.locator(".ready").wait();
+
+      // Page would error here
+      let text = await page
+        .locator<HTMLDivElement>("#foo.ready")
+        .evaluate((el) => el.textContent!);
+      expect(text).toEqual("it works");
+
+      text = await page
+        .locator<HTMLDivElement>("#foo-both.ready")
+        .evaluate((el) => el.textContent!);
+      expect(text).toEqual("it works");
+    });
+  },
+});
+
 Deno.test({
   name: "islands - adds preload HTTP headers",
   fn: async () => {