feat(server): plugins can create islands

docs/canary/concepts/plugins.md

@@ -163,3 +163,17 @@ For more examples see the [Concepts: Routing](/docs/concepts/routing) page.
 To create a middleware you need to create a `MiddlewareHandler` function.
 
 And to create a route you can create both a Handler and/or component.
+
+A very basic example can be found
+[here](https://github.com/denoland/fresh/blob/main/tests/fixture_plugin/utils/route-plugin.ts).
+
+### Islands
+
+You can create islands that get loaded and rendered like normal
+[islands](/docs/concepts/islands).
+
+You need to provide the location of your plugin and an array of island
+filenames. The intent is to somewhat mimic the manifest file.
+
+A very basic example can be found
+[here](https://github.com/denoland/fresh/blob/main/tests/fixture_plugin/utils/route-plugin.ts).

src/server/deps.ts

@@ -1,5 +1,6 @@
 // -- std --
 export {
+  basename,
   dirname,
   extname,
   fromFileUrl,

src/server/fs_extract.ts

@@ -5,6 +5,7 @@ import {
   ErrorPageModule,
   InternalFreshState,
   Island,
+  IslandModule,
   LayoutModule,
   LayoutRoute,
   MiddlewareHandler,
@@ -19,7 +20,15 @@ import {
 } from "./types.ts";
 import * as router from "./router.ts";
 import DefaultErrorHandler from "./default_error_page.tsx";
-import { extname, join, toFileUrl, typeByExtension, walk } from "./deps.ts";
+import {
+  basename,
+  dirname,
+  extname,
+  join,
+  toFileUrl,
+  typeByExtension,
+  walk,
+} from "./deps.ts";
 import { BUILD_ID } from "./build_id.ts";
 import { toBaseRoute } from "./compose.ts";
 
@@ -233,6 +242,28 @@ export async function extractRoutes(
     }
   }
 
+  const processedIslands: {
+    name: string;
+    path: string;
+    module: IslandModule;
+  }[] = [];
+
+  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);
+      const module = await import(full);
+      const fileNameWithExt = basename(full);
+      const fileName = fileNameWithExt.replace(extname(fileNameWithExt), "");
+      processedIslands.push({
+        name: sanitizeIslandName(fileName),
+        path: full,
+        module,
+      });
+    }
+  }
+
   for (const [self, module] of Object.entries(manifest.islands)) {
     const url = new URL(self, baseUrl).href;
     if (!url.startsWith(baseUrl)) {
@@ -244,16 +275,26 @@ export async function extractRoutes(
     }
     const baseRoute = path.substring(0, path.length - extname(path).length);
 
-    for (const [exportName, exportedFunction] of Object.entries(module)) {
-      if (typeof exportedFunction !== "function") {
-        continue;
-      }
-      const name = sanitizeIslandName(baseRoute);
+    processedIslands.push({
+      name: sanitizeIslandName(baseRoute),
+      path: url,
+      module,
+    });
+  }
+
+  for (const processedIsland of processedIslands) {
+    for (
+      const [exportName, exportedFunction] of Object.entries(
+        processedIsland.module,
+      )
+    ) {
+      if (typeof exportedFunction !== "function") continue;
+      const name = processedIsland.name;
       const id = `${name}_${exportName}`.toLowerCase();
       islands.push({
         id,
         name,
-        url,
+        url: processedIsland.path,
         component: exportedFunction,
         exportName,
       });

src/server/mod.ts

@@ -42,13 +42,15 @@ export type {
   Plugin,
   PluginAsyncRenderContext,
   PluginAsyncRenderFunction,
+  PluginIslands,
   PluginMiddleware,
   PluginRenderContext,
   PluginRenderFunction,
   PluginRenderFunctionResult,
   PluginRenderResult,
   PluginRenderScripts,
   PluginRenderStyleTag,
+  PluginRoute,
   RenderFunction,
   ResolvedFreshConfig,
   RouteConfig,

src/server/types.ts

@@ -590,6 +590,8 @@ export interface Plugin<State = Record<string, unknown>> {
   routes?: PluginRoute[];
 
   middlewares?: PluginMiddleware<State>[];
+
+  islands?: PluginIslands;
 }
 
 export interface PluginRenderContext {
@@ -672,3 +674,8 @@ export interface PluginRoute {
   // deno-lint-ignore no-explicit-any
   handler?: Handler<any, any> | Handlers<any, any>;
 }
+
+export interface PluginIslands {
+  baseLocation: string;
+  paths: string[];
+}

tests/fixture_plugin/utils/route-plugin.ts

@@ -1,6 +1,7 @@
 import { MiddlewareHandlerContext, Plugin } from "$fresh/server.ts";
 import { handler as testMiddleware } from "./sample_routes/_middleware.ts";
 import { AppBuilder } from "./sample_routes/AppBuilder.tsx";
+import IslandPluginComponent from "./sample_routes/PluginRouteWithIsland.tsx";
 import { SimpleRoute } from "./sample_routes/simple-route.tsx";
 export type { Options };
 
@@ -43,9 +44,20 @@ export default function routePlugin(
       },
       path: "lots-of-middleware",
     }],
-    routes: [{
-      path: "/_app",
-      component: AppBuilder(options),
-    }, { path: "no-leading-slash-here", component: SimpleRoute }],
+    routes: [
+      {
+        path: "/_app",
+        component: AppBuilder(options),
+      },
+      { path: "no-leading-slash-here", component: SimpleRoute },
+      {
+        path: "pluginroutewithisland",
+        component: IslandPluginComponent,
+      },
+    ],
+    islands: {
+      baseLocation: import.meta.url,
+      paths: ["./sample_islands/IslandFromPlugin.tsx"],
+    },
   };
 }

tests/fixture_plugin/utils/sample_islands/IslandFromPlugin.tsx

@@ -0,0 +1,10 @@
+import { IS_BROWSER } from "../../../../src/runtime/utils.ts";
+
+export default function IslandFromPlugin() {
+  const id = IS_BROWSER ? "csr_alt_folder" : "ssr_alt_folder";
+  return (
+    <div>
+      <p id={id}>{id}</p>
+    </div>
+  );
+}

tests/fixture_plugin/utils/sample_routes/PluginRouteWithIsland.tsx

@@ -0,0 +1,11 @@
+import Island from "../../islands/Island.tsx";
+import IslandFromPlugin from "../sample_islands/IslandFromPlugin.tsx";
+
+export default function IslandPluginComponent() {
+  return (
+    <div>
+      <Island />
+      <IslandFromPlugin />
+    </div>
+  );
+}

tests/plugin_test.ts

@@ -107,6 +107,34 @@ Deno.test("plugin route no leading slash", async () => {
   );
 });
 
+Deno.test({
+  name: "plugin supports islands",
+  async fn(t) {
+    await withPageName(
+      "./tests/fixture_plugin/main.ts",
+      async (page, address) => {
+        async function idTest(id: string) {
+          const elem = await page.waitForSelector(`#${id}`);
+
+          const value = await elem?.evaluate((el) => el.textContent);
+          assert(value === `${id}`, `value ${value} not equal to id ${id}`);
+        }
+
+        await page.goto(`${address}/pluginroutewithisland`, {
+          waitUntil: "networkidle2",
+        });
+
+        await t.step("verify tags", async () => {
+          await idTest("csr");
+          await idTest("csr_alt_folder");
+        });
+      },
+    );
+  },
+  sanitizeOps: false,
+  sanitizeResources: false,
+});
+
 Deno.test({
   name: "/with-island hydration",
   async fn(t) {