fix: PluginRoute supports AsyncRoute and AsyncLayout (denoland#2139)

NaitLee · Dec 4, 2023 · c8844ad · c8844ad
1 parent 993f102
commit c8844ad
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 16 deletions.
diff --git a/src/server/types.ts b/src/server/types.ts
@@ -572,7 +572,11 @@ export interface PluginRoute {
   /** A path in the format of a filename path without filetype */
   path: string;
 
-  component?: ComponentType<PageProps> | ComponentType<AppProps>;
+  component?:
+    | ComponentType<PageProps>
+    | ComponentType<AppProps>
+    | AsyncRoute
+    | AsyncLayout;
 
   // deno-lint-ignore no-explicit-any
   handler?: Handler<any, any> | Handlers<any, any>;

diff --git a/tests/fixture_plugin/fresh.config.ts b/tests/fixture_plugin/fresh.config.ts
@@ -12,7 +12,7 @@ export default {
     jsInjectPlugin,
     cssInjectPluginAsync,
     linkInjectPlugin,
-    routePlugin({ title: "Title Set From Plugin Config" }),
+    routePlugin({ title: "Title Set From Plugin Config", async: false }),
     secondMiddlewarePlugin(),
   ],
 } as FreshConfig;
diff --git a/tests/fixture_plugin/utils/route-plugin.ts b/tests/fixture_plugin/utils/route-plugin.ts
@@ -3,10 +3,12 @@ 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";
+import AsyncRoute from "./sample_routes/async-route.tsx";
 export type { Options };
 
 interface Options {
   title: string;
+  async: boolean;
 }
 export type PluginMiddlewareState = {
   num: number;
@@ -45,6 +47,7 @@ export default function routePlugin(
       path: "lots-of-middleware",
     }],
     routes: [
+      { path: "/async-route", component: AsyncRoute },
       {
         path: "/_app",
         component: AppBuilder(options),

diff --git a/tests/fixture_plugin/utils/sample_routes/AppBuilder.tsx b/tests/fixture_plugin/utils/sample_routes/AppBuilder.tsx
@@ -1,18 +1,32 @@
-import { PageProps } from "$fresh/server.ts";
+import { defineApp, PageProps } from "$fresh/server.ts";
 import { Head } from "../../../../runtime.ts";
 import { Options } from "../route-plugin.ts";
 
 export function AppBuilder(options: Options) {
-  return ({ Component }: PageProps) => {
-    return (
-      <>
-        <Head>
-          <title>{options.title}</title>
-        </Head>
-        <main class="max-w-screen-md px-4 pt-16 mx-auto">
-          <Component />
-        </main>
-      </>
-    );
-  };
+  return options.async
+    ? defineApp((_req, ctx) => {
+      return (
+        <>
+          <Head>
+            <title>{options.title}</title>
+          </Head>
+          <main class="max-w-screen-md px-4 pt-16 mx-auto">
+            foo
+            <ctx.Component />
+          </main>
+        </>
+      );
+    })
+    : ({ Component }: PageProps) => {
+      return (
+        <>
+          <Head>
+            <title>{options.title}</title>
+          </Head>
+          <main class="max-w-screen-md px-4 pt-16 mx-auto">
+            <Component />
+          </main>
+        </>
+      );
+    };
 }
diff --git a/tests/fixture_plugin/utils/sample_routes/async-route.tsx b/tests/fixture_plugin/utils/sample_routes/async-route.tsx
@@ -0,0 +1,9 @@
+import { defineRoute } from "$fresh/src/server/defines.ts";
+
+export default defineRoute((_req, _ctx) => {
+  return (
+    <div>
+      this is an async route!
+    </div>
+  );
+});
diff --git a/tests/plugin_test.ts b/tests/plugin_test.ts
@@ -1,4 +1,4 @@
-import { ServerContext, STATUS_CODE } from "../server.ts";
+import { type FreshConfig, ServerContext, STATUS_CODE } from "../server.ts";
 import {
   assert,
   assertEquals,
@@ -17,6 +17,8 @@ import {
   withFakeServe,
   withPageName,
 } from "./test_utils.ts";
+import routePlugin from "./fixture_plugin/utils/route-plugin.ts";
+import secondMiddlewarePlugin from "./fixture_plugin/utils/second-middleware-plugin.ts";
 
 const ctx = await ServerContext.fromManifest(manifest, config);
 const handler = ctx.handler();
@@ -81,6 +83,38 @@ Deno.test("plugin routes and middleware", async () => {
   );
 });
 
+Deno.test("plugin routes and middleware -- async _app", async () => {
+  const ctx = await ServerContext.fromManifest(manifest, {
+    plugins: [
+      routePlugin({ title: "Title Set From Plugin Config", async: true }),
+      secondMiddlewarePlugin(),
+    ],
+  } as FreshConfig);
+  const handler = ctx.handler();
+  const router = (req: Request) => {
+    return handler(req, {
+      remoteAddr: {
+        transport: "tcp",
+        hostname: "127.0.0.1",
+        port: 80,
+      },
+    });
+  };
+
+  const resp = await router(new Request("https://fresh.deno.dev/test"));
+  assert(resp);
+  assertEquals(resp.status, STATUS_CODE.OK);
+  const body = await resp.text();
+  assertStringIncludes(
+    body,
+    `<h1>look, i'm set from a plugin!</h1>`,
+  );
+  assertStringIncludes(
+    body,
+    `<title>Title Set From Plugin Config</title>`,
+  );
+});
+
 Deno.test("plugin middleware multiple handlers", async () => {
   const resp = await router(
     new Request("https://fresh.deno.dev/lots-of-middleware"),
@@ -107,6 +141,19 @@ Deno.test("plugin route no leading slash", async () => {
   );
 });
 
+Deno.test("plugin async route", async () => {
+  const resp = await router(
+    new Request("https://fresh.deno.dev/async-route"),
+  );
+  assert(resp);
+  assertEquals(resp.status, STATUS_CODE.OK);
+  const body = await resp.text();
+  assertStringIncludes(
+    body,
+    `<div>this is an async route!</div>`,
+  );
+});
+
 Deno.test({
   name: "plugin supports islands",
   async fn(t) {