From bd372b9535692bad3a75f2bab81a4436e5bbd733 Mon Sep 17 00:00:00 2001
From: Marvin Hagemeister <marvin@deno.com>
Date: Fri, 1 Dec 2023 12:21:10 +0100
Subject: [PATCH] fix: errors in plugin fixture + improve island docs (#2109)

---
 docs/canary/concepts/plugins.md        | 25 +++++++++++++++++++------
 src/server/fs_extract.ts               | 10 +++++-----
 tests/fixture_plugin/static/print.css  |  3 +++
 tests/fixture_plugin/static/styles.css |  3 +++
 4 files changed, 30 insertions(+), 11 deletions(-)
 create mode 100644 tests/fixture_plugin/static/print.css
 create mode 100644 tests/fixture_plugin/static/styles.css

diff --git a/docs/canary/concepts/plugins.md b/docs/canary/concepts/plugins.md
index 7896076a36b..bef0e8d4543 100644
--- a/docs/canary/concepts/plugins.md
+++ b/docs/canary/concepts/plugins.md
@@ -169,11 +169,24 @@ A very basic example can be found
 
 ### Islands
 
-You can create islands that get loaded and rendered like normal
-[islands](/docs/concepts/islands).
+Islands from plugins can be loaded by specifying a list of file paths in your
+plugin. Those files will be treated by Fresh as if they had been placed inside
+the `islands/` directory. They will be processed and bundled for the browser in
+the same way.
 
-You need to provide the location of your plugin and an array of island
-filenames. The intent is to somewhat mimic the manifest file.
+```tsx my-island-plugin.ts
+import { Plugin } from "$fresh/server.ts";
 
-A very basic example can be found
-[here](https://github.com/denoland/fresh/blob/main/tests/fixture_plugin/utils/route-plugin.ts).
+export default function myIslandPlugin(): Plugin {
+  return {
+    name: "my-island-plugin",
+    islands: {
+      baseLocation: import.meta.url,
+      paths: [
+        "./plugin/MyPluginIsland.tsx",
+        "./plugin/OtherPluginIsland.tsx",
+      ],
+    },
+  };
+}
+```
diff --git a/src/server/fs_extract.ts b/src/server/fs_extract.ts
index 4cfbcab0589..1953a2a8e8a 100644
--- a/src/server/fs_extract.ts
+++ b/src/server/fs_extract.ts
@@ -257,13 +257,13 @@ export async function extractRoutes(
   for (const plugin of config.plugins || []) {
     if (!plugin.islands) continue;
     const base = dirname(plugin.islands.baseLocation);
-    for (const name of plugin.islands.paths) {
-      const full = join(base, name);
+
+    for (const specifier of plugin.islands.paths) {
+      const full = join(base, specifier);
       const module = await import(full);
-      const fileNameWithExt = basename(full);
-      const fileName = fileNameWithExt.replace(extname(fileNameWithExt), "");
+      const name = sanitizeIslandName(basename(full, extname(full)));
       processedIslands.push({
-        name: sanitizeIslandName(fileName),
+        name,
         path: full,
         module,
       });
diff --git a/tests/fixture_plugin/static/print.css b/tests/fixture_plugin/static/print.css
new file mode 100644
index 00000000000..901f9301fc3
--- /dev/null
+++ b/tests/fixture_plugin/static/print.css
@@ -0,0 +1,3 @@
+.body {
+  color: black;
+}
diff --git a/tests/fixture_plugin/static/styles.css b/tests/fixture_plugin/static/styles.css
new file mode 100644
index 00000000000..b4197b16a19
--- /dev/null
+++ b/tests/fixture_plugin/static/styles.css
@@ -0,0 +1,3 @@
+.body {
+  color: red;
+}