fix(vite): partial island loading (denoland#3226)

Author: marvinhagemeister

packages/plugin-vite/demo/islands/tests/Ready.tsx

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "preact/hooks";
+
+export function ReadyIsland() {
+  const [ready, set] = useState(false);
+
+  useEffect(() => {
+    set(true);
+  }, []);
+
+  return (
+    <div class={ready ? "ready" : "not-ready"}>
+      {ready ? "ready" : "waiting..."}
+    </div>
+  );
+}

packages/plugin-vite/demo/routes/tests/partial.tsx

@@ -0,0 +1,14 @@
+import { Partial } from "@fresh/core/runtime";
+import { ReadyIsland } from "../../islands/tests/Ready.tsx";
+
+export default function Page() {
+  return (
+    <div f-client-nav>
+      <h1>Partial</h1>
+      <Partial name="partial-test">
+        <a href="/tests/partial_insert">click me</a>
+      </Partial>
+      <ReadyIsland />
+    </div>
+  );
+}

packages/plugin-vite/demo/routes/tests/partial_insert.tsx

@@ -0,0 +1,10 @@
+import { Partial } from "@fresh/core/runtime";
+import { CounterHooks } from "../../islands/tests/CounterHooks.tsx";
+
+export default function Page() {
+  return (
+    <Partial name="partial-test">
+      <CounterHooks />
+    </Partial>
+  );
+}

packages/plugin-vite/src/plugins/server_snapshot.ts

@@ -142,10 +142,16 @@ export function serverSnapshot(options: ResolvedFreshViteConfig): Plugin[] {
               const mod = manifest[id];
               const serverPath = path.join(root, mod.src ?? id);
 
+              let spec = pathToSpec(clientOutDir, mod.file);
+
+              if (spec.startsWith("./")) {
+                spec = spec.slice(1);
+              }
+
               const name = namer.getUniqueName(specToName(id));
               islandMods.push({
                 name,
-                browser: pathToSpec(clientOutDir, mod.file),
+                browser: spec,
                 server: serverPath,
               });
             }

packages/plugin-vite/tests/build_test.ts

@@ -266,3 +266,33 @@ Deno.test({
   sanitizeOps: false,
   sanitizeResources: false,
 });
+
+Deno.test({
+  name: "vite build - partial island",
+  fn: async () => {
+    await using res = await buildVite(DEMO_DIR);
+
+    await withChildProcessServer(
+      {
+        cwd: res.tmp,
+        args: ["serve", "-A", "--port", "0", "_fresh/server.js"],
+      },
+      async (address) => {
+        await withBrowser(async (page) => {
+          await page.goto(`${address}/tests/partial`, {
+            waitUntil: "networkidle2",
+          });
+
+          await page.locator(".ready").wait();
+          await page.locator("a").click();
+          await page.locator(".counter-hooks").wait();
+
+          await page.locator(".counter-hooks button").click();
+          await waitForText(page, ".counter-hooks button", "count: 1");
+        });
+      },
+    );
+  },
+  sanitizeOps: false,
+  sanitizeResources: false,
+});

packages/plugin-vite/tests/dev_server_test.ts

@@ -216,3 +216,25 @@ Deno.test({
   sanitizeResources: false,
   sanitizeOps: false,
 });
+
+Deno.test({
+  name: "vite dev - partial island",
+  fn: async () => {
+    await withDevServer(DEMO_DIR, async (address) => {
+      await withBrowser(async (page) => {
+        await page.goto(`${address}/tests/partial`, {
+          waitUntil: "networkidle2",
+        });
+
+        await page.locator(".ready").wait();
+        await page.locator("a").click();
+        await page.locator(".counter-hooks").wait();
+
+        await page.locator(".counter-hooks button").click();
+        await waitForText(page, ".counter-hooks button", "count: 1");
+      });
+    });
+  },
+  sanitizeResources: false,
+  sanitizeOps: false,
+});