Upgrading to [email protected] (#5)

Author: Thesephi

deno.jsonc

@@ -1,9 +1,10 @@
 {
   "imports": {
-    "fullsoak": "jsr:@fullsoak/[email protected].0-alpha.2",
+    "fullsoak": "jsr:@fullsoak/[email protected]",
     "preact": "npm:[email protected]",
     "preact-iso": "npm:[email protected]",
-    "@std/testing": "jsr:@std/testing@^1.0.9"
+    "@std/testing": "jsr:@std/testing@^1.0.9",
+    "superoak": "https://deno.land/x/[email protected]/mod.ts"
   },
   "nodeModulesDir": "auto",
   "compilerOptions": {

deno.lock

@@ -1,10 +1,11 @@
-import { type FunctionComponent } from "preact";
+import type { FunctionComponent } from "preact";
+import type { RoutableProps } from "preact-iso";
 import { useEffect, useState } from "preact/hooks";
 import { MyOtherComponent } from "../MyOtherComponent/index.tsx";
 
 console.log("MyComponent is being synchronously imported...");
 
-type MyProps = {
+type MyProps = RoutableProps & {
   foo: string;
 };
 
@@ -24,8 +25,12 @@ export const MyComponent: FunctionComponent<MyProps> = ({ foo }) => {
           <li>props 'foo' is {foo}</li>
           <li>
             state count is {count}{" "}
-            <button onClick={() => setCount((x) => x + 1)}>+</button>
-            <button onClick={() => setCount((x) => x - 1)}>-</button>
+            <button type="button" onClick={() => setCount((x) => x + 1)}>
+              +
+            </button>
+            <button type="button" onClick={() => setCount((x) => x - 1)}>
+              -
+            </button>
           </li>
           <li>
             <a href="/app">Route Aware App Component</a>

src/components/MyComponent/index.tsx

@@ -1,5 +1,5 @@
 import type { FunctionComponent } from "preact";
-import type { RoutableProps } from "preact/iso";
+import type { RoutableProps } from "preact-iso";
 
 type Props = RoutableProps & { foo: string };
 

src/components/MyRouteAwareComponent/routes/Home.tsx

@@ -1,5 +1,5 @@
 import type { FunctionComponent } from "preact";
-import type { RoutableProps } from "preact/iso";
+import type { RoutableProps } from "preact-iso";
 
 export const NotFound: FunctionComponent<RoutableProps> = () => (
   <main>

src/components/MyRouteAwareComponent/routes/_404.tsx

@@ -6,7 +6,7 @@ import {
   ssr,
   useFullSoak,
 } from "fullsoak";
-import { byoHat } from "fullsoak/batteries";
+import { makeHat } from "fullsoak/batteries";
 import { MyComponent } from "./components/MyComponent/index.tsx";
 import { MyRouteAwareComponent } from "./components/MyRouteAwareComponent/index.tsx";
 
@@ -17,16 +17,19 @@ const GLOBAL_COMPONENTS_DIR: string = Deno.cwd() + "/src/components";
 @Controller()
 class MyController {
   @Get("/")
-  simpleExample() {
-    return ssr(MyComponent, { foo: "bar" });
+  simpleExample(ctx: Context) {
+    return ssr(MyComponent, {
+      path: ctx.request.url.pathname,
+      foo: "bar",
+    });
   }
 
   @Get("/app/:page*")
   renderMyRouteAwareComponent(ctx: Context) {
     return ssr(MyRouteAwareComponent, {
-      foo: "Lorem Ipsum",
       path: ctx.request.url.pathname,
-    }, { headContent: byoHat({ title: "FullSoak App" }) });
+      foo: "Lorem Ipsum",
+    }, { headContent: makeHat({ title: "FullSoak App" }) });
   }
 }
 

src/main.ts

@@ -1,8 +1,20 @@
-import { ssr } from "fullsoak";
-import { MyComponent } from "../src/components/MyComponent/index.tsx";
+import { useFullSoak } from "fullsoak/testing";
 import { assertSnapshot } from "@std/testing/snapshot";
+import { superoak } from "superoak";
+import { Controller, Get, ssr } from "fullsoak";
+import { MyComponent } from "../src/components/MyComponent/index.tsx";
+
+@Controller()
+class FooController {
+  @Get("/")
+  serve() {
+    return ssr(MyComponent, { path: "/", foo: "bar" });
+  }
+}
 
 Deno.test("MyComponent", async (t) => {
-  const output = await ssr(MyComponent, { foo: "bar" });
-  await assertSnapshot(t, output);
+  const app = await useFullSoak({ controllers: [FooController] });
+  const req = await superoak(app);
+  const resp = await req.get("/");
+  assertSnapshot(t, resp.text);
 });

tests/MyComponent.test.ts

@@ -1,10 +1,23 @@
-import { ssr } from "fullsoak";
+import { useFullSoak } from "fullsoak/testing";
 import { assertSnapshot } from "@std/testing/snapshot";
+import { superoak } from "superoak";
+import { Controller, Get, ssr } from "fullsoak";
+import { makeHat } from "fullsoak/batteries";
 import { MyRouteAwareComponent } from "../src/components/MyRouteAwareComponent/index.tsx";
 
+@Controller()
+class MyController {
+  @Get("/:whatever*")
+  serve() {
+    return ssr(MyRouteAwareComponent, { path: "/do/some/thing", foo: "bar" }, {
+      headContent: makeHat({ title: "FullSoak SSR App" }),
+    });
+  }
+}
+
 Deno.test("MyRouteAwareComponent", async (t) => {
-  const output = await ssr(MyRouteAwareComponent, {
-    url: "http://localhost/bar",
-  });
-  await assertSnapshot(t, output);
+  const app = await useFullSoak({ controllers: [MyController] });
+  const req = await superoak(app);
+  const resp = await req.get("/do/some/thing");
+  assertSnapshot(t, resp.text);
 });