Merge pull request #10 from vikejs/runtime

feat: forward runtime context

examples/hattip-app/.testRun.ts

@@ -2,13 +2,17 @@ import { expect, fetchHtml, getServerUrl, page, run, test } from "@brillout/test
 
 export { testRun };
 
+let isProd: boolean;
+
 function testRun(cmd: `pnpm run ${"dev" | "preview"}${string}`, options?: Parameters<typeof run>[1]) {
   run(cmd, options);
 
+  isProd = !cmd.startsWith("pnpm run dev");
+
   testUrl({
     url: "/",
     title: "My Vike App",
-    text: "Rendered to HTML",
+    text: isProd ? "SSR running on Cloudflare" : "Rendered to HTML",
     textHydration: "Rendered to HTML",
   });
 

examples/hattip-app/hattip-entry.ts

@@ -1,29 +1,18 @@
+import type { HattipHandler } from "@hattip/core";
+import { createRouter } from "@hattip/router";
+import { createHandler } from "@universal-middleware/hattip";
 import { createTodoHandler } from "./server/create-todo-handler";
 import { vikeHandler } from "./server/vike-handler";
-import type { HattipHandler } from "@hattip/core";
-import { createRouter, type RouteHandler } from "@hattip/router";
-
-type Middleware<Context extends Record<string | number | symbol, unknown>> = (request: Request, context: Context) => Response | void | Promise<Response> | Promise<void>
-
-function handlerAdapter<Context extends Record<string | number | symbol, unknown>>(
-  handler: Middleware<Context>,
-): RouteHandler<unknown, unknown> {
-  return (context) => {
-    const rawContext = context as unknown as Record<string, unknown>;
-    rawContext.context ??= {};
-    return handler(context.request, rawContext.context as Context);
-  };
-}
 
 const router = createRouter();
 
-router.post("/api/todo/create", handlerAdapter(createTodoHandler));
+router.post("/api/todo/create", createHandler(() => createTodoHandler)());
 
 /**
  * Vike route
  *
  * @link {@see https://vike.dev}
  **/
-router.use(handlerAdapter(vikeHandler));
+router.use(createHandler(() => vikeHandler)());
 
 export default router.buildHandler() as HattipHandler;

examples/hattip-app/package.json

@@ -17,18 +17,20 @@
     "@hattip/adapter-cloudflare-workers": "^0.0.47",
     "@hattip/adapter-node": "^0.0.47",
     "@hattip/vite": "^0.0.47",
+    "@universal-middleware/core": "^0.2.6",
     "cross-env": "^7.0.3",
     "typescript": "^5.5.4",
     "vike-cloudflare": "^0.1.0",
-    "wrangler": "^3.72.2"
+    "wrangler": "^3.72.3"
   },
   "dependencies": {
     "@hattip/core": "^0.0.47",
     "@hattip/router": "^0.0.47",
+    "@universal-middleware/hattip": "^0.2.3",
     "cross-fetch": "^4.0.0",
     "hattip": "^0.0.33",
     "lowdb": "^7.0.1",
-    "solid-js": "^1.8.21",
+    "solid-js": "^1.8.22",
     "vike": "^0.4.193",
     "vike-solid": "^0.7.3",
     "vite": "^5.4.2"

examples/hattip-app/pages/index/+Page.tsx

@@ -1,12 +1,16 @@
+import { usePageContext } from "vike-solid/usePageContext";
 import { Counter } from "./Counter.js";
 
 export default function Page() {
+  const ctx = usePageContext();
+
   return (
     <>
       <h1>My Vike app</h1>
       This page is:
       <ul>
         <li>Rendered to HTML.</li>
+        {typeof ctx?.ctx?.waitUntil === "function" ? <li>SSR running on Cloudflare</li> : null}
         <li>
           Interactive. <Counter />
         </li>

examples/hattip-app/server/create-todo-handler.ts

@@ -1,7 +1,6 @@
-export async function createTodoHandler<Context extends Record<string | number | symbol, unknown>>(
-  request: Request,
-  _context?: Context,
-): Promise<Response> {
+import type { UniversalHandler } from "@universal-middleware/core";
+
+export const createTodoHandler = (async (request: Request): Promise<Response> => {
   await request.json();
 
   return new Response(JSON.stringify({ status: "OK" }), {
@@ -10,4 +9,4 @@ export async function createTodoHandler<Context extends Record<string | number |
       "content-type": "application/json",
     },
   });
-}
+}) satisfies UniversalHandler;

examples/hattip-app/server/vike-handler.ts

@@ -1,10 +1,8 @@
 import { renderPage } from "vike/server";
+import type { UniversalHandler } from "@universal-middleware/core";
 
-export async function vikeHandler<Context extends Record<string | number | symbol, unknown>>(
-  request: Request,
-  context?: Context,
-): Promise<Response> {
-  const pageContextInit = { ...context, urlOriginal: request.url };
+export const vikeHandler = (async (request, context, runtime): Promise<Response> => {
+  const pageContextInit = { ...context, urlOriginal: request.url, ...runtime };
   const pageContext = await renderPage(pageContextInit);
   const response = pageContext.httpResponse;
 
@@ -16,4 +14,4 @@ export async function vikeHandler<Context extends Record<string | number | symbo
     status: response?.statusCode,
     headers: response?.headers,
   });
-}
+}) satisfies UniversalHandler;

examples/hattip-app/tsconfig.json

@@ -13,7 +13,7 @@
     "moduleResolution": "Bundler",
     "target": "ES2022",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["vite/client", "vike-solid/client"],
+    "types": ["vite/client", "vike-solid/client", "vike-cloudflare/types"],
     "jsx": "preserve",
     "jsxImportSource": "solid-js"
   },

examples/hono-app/.testRun.ts

@@ -7,12 +7,12 @@ let isProd: boolean;
 function testRun(cmd: `pnpm run ${"dev" | "preview"}${string}`, options?: Parameters<typeof run>[1]) {
   run(cmd, options);
 
-  isProd = cmd !== "pnpm run dev";
+  isProd = !cmd.startsWith("pnpm run dev");
 
   testUrl({
     url: "/",
     title: "My Vike App",
-    text: "Rendered to HTML",
+    text: "SSR running on Cloudflare",
     textHydration: "Rendered to HTML",
   });
 

examples/hono-app/hono-entry.ts

@@ -1,40 +1,17 @@
+import { createHandler } from "@universal-middleware/hono";
 import { Hono } from "hono";
-import { createMiddleware } from "hono/factory";
 import { createTodoHandler } from "./server/create-todo-handler.js";
 import { vikeHandler } from "./server/vike-handler";
 
-type Middleware<Context extends Record<string | number | symbol, unknown>> = (request: Request, context: Context) => Response | void | Promise<Response> | Promise<void>
-
-export function handlerAdapter<Context extends Record<string | number | symbol, unknown>>(
-  handler: Middleware<Context>,
-) {
-  return createMiddleware(async (context, next) => {
-    let ctx = context.get("context");
-    if (!ctx) {
-      ctx = {};
-      context.set("context", ctx);
-    }
-
-    const res = await handler(context.req.raw, ctx as Context);
-    context.set("context", ctx);
-
-    if (!res) {
-      await next();
-    }
-
-    return res;
-  });
-}
-
 const app = new Hono();
 
-app.post("/api/todo/create", handlerAdapter(createTodoHandler));
+app.post("/api/todo/create", createHandler(() => createTodoHandler)());
 
 /**
  * Vike route
  *
  * @link {@see https://vike.dev}
  **/
-app.all("*", handlerAdapter(vikeHandler));
+app.all("*", createHandler(() => vikeHandler)());
 
 export default app;

examples/hono-app/package.json

@@ -16,17 +16,19 @@
   "devDependencies": {
     "@auth/core": "^0.34.2",
     "@hono/vite-cloudflare-pages": "^0.4.2",
-    "@hono/vite-dev-server": "^0.14.0",
+    "@hono/vite-dev-server": "^0.15.1",
     "@types/node": "^18.19.14",
+    "@universal-middleware/core": "^0.2.6",
     "typescript": "^5.5.4",
     "vike-cloudflare": "^0.1.0",
-    "wrangler": "^3.72.2"
+    "wrangler": "^3.72.3"
   },
   "dependencies": {
+    "@universal-middleware/hono": "^0.2.4",
     "cross-fetch": "^4.0.0",
-    "hono": "^4.5.8",
-    "solid-js": "^1.8.21",
-    "tsx": "^4.18.0",
+    "hono": "^4.5.9",
+    "solid-js": "^1.8.22",
+    "tsx": "^4.19.0",
     "vike": "^0.4.193",
     "vike-solid": "^0.7.3",
     "vite": "^5.4.2"

examples/hono-app/pages/index/+Page.tsx

@@ -1,12 +1,19 @@
+import { Show } from "solid-js";
+import { usePageContext } from "vike-solid/usePageContext";
 import { Counter } from "./Counter.js";
 
 export default function Page() {
+  const ctx = usePageContext();
+
   return (
     <>
       <h1>My Vike app</h1>
       This page is:
       <ul>
         <li>Rendered to HTML.</li>
+        <Show when={typeof ctx?.ctx?.waitUntil === "function"}>
+          <li>SSR running on Cloudflare</li>
+        </Show>
         <li>
           Interactive. <Counter />
         </li>

examples/hono-app/server/create-todo-handler.ts

@@ -1,7 +1,6 @@
-export async function createTodoHandler<Context extends Record<string | number | symbol, unknown>>(
-  request: Request,
-  _context?: Context,
-): Promise<Response> {
+import type { UniversalHandler } from "@universal-middleware/core";
+
+export const createTodoHandler = (async (request: Request): Promise<Response> => {
   await request.json();
 
   return new Response(JSON.stringify({ status: "OK" }), {
@@ -10,4 +9,4 @@ export async function createTodoHandler<Context extends Record<string | number |
       "content-type": "application/json",
     },
   });
-}
+}) satisfies UniversalHandler;

examples/hono-app/server/vike-handler.ts

@@ -1,10 +1,8 @@
+import type { UniversalHandler } from "@universal-middleware/core";
 import { renderPage } from "vike/server";
 
-export async function vikeHandler<Context extends Record<string | number | symbol, unknown>>(
-  request: Request,
-  context?: Context,
-): Promise<Response> {
-  const pageContextInit = { ...context, urlOriginal: request.url };
+export const vikeHandler = (async (request, context, runtime): Promise<Response> => {
+  const pageContextInit = { ...context, urlOriginal: request.url, headersOriginal: request.headers, ...runtime };
   const pageContext = await renderPage(pageContextInit);
   const response = pageContext.httpResponse;
 
@@ -16,4 +14,4 @@ export async function vikeHandler<Context extends Record<string | number | symbo
     status: response?.statusCode,
     headers: response?.headers,
   });
-}
+}) satisfies UniversalHandler;

examples/hono-app/tsconfig.json

@@ -13,7 +13,7 @@
     "moduleResolution": "Bundler",
     "target": "ES2022",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["vite/client", "vike-solid/client"],
+    "types": ["vite/client", "vike-solid/client", "vike-cloudflare/types"],
     "jsx": "preserve",
     "jsxImportSource": "solid-js"
   },

examples/vike-app/.testRun.ts

@@ -7,12 +7,12 @@ let isProd: boolean;
 function testRun(cmd: `pnpm run ${"dev" | "preview"}${string}`, options?: Parameters<typeof run>[1]) {
   run(cmd, options);
 
-  isProd = cmd !== "pnpm run dev";
+  isProd = !cmd.startsWith("pnpm run dev");
 
   testUrl({
     url: "/",
     title: "My Vike App",
-    text: "Rendered to HTML",
+    text: isProd ? "SSR running on Cloudflare" : "Rendered to HTML",
     textHydration: "Rendered to HTML",
   });
 

examples/vike-app/package.json

@@ -18,12 +18,12 @@
     "@types/node": "^18.19.14",
     "typescript": "^5.5.4",
     "vike-cloudflare": "^0.1.0",
-    "wrangler": "^3.72.2"
+    "wrangler": "^3.72.3"
   },
   "dependencies": {
     "cross-fetch": "^4.0.0",
-    "solid-js": "^1.8.21",
-    "tsx": "^4.18.0",
+    "solid-js": "^1.8.22",
+    "tsx": "^4.19.0",
     "vike": "^0.4.193",
     "vike-solid": "^0.7.3",
     "vite": "^5.4.2"

examples/vike-app/pages/index/+Page.tsx

@@ -1,12 +1,16 @@
+import { usePageContext } from "vike-solid/usePageContext";
 import { Counter } from "./Counter.js";
 
 export default function Page() {
+  const ctx = usePageContext();
+
   return (
     <>
       <h1>My Vike app</h1>
       This page is:
       <ul>
         <li>Rendered to HTML.</li>
+        {typeof ctx?.ctx?.waitUntil === "function" ? <li>SSR running on Cloudflare</li> : null}
         <li>
           Interactive. <Counter />
         </li>

examples/vike-app/tsconfig.json

@@ -13,7 +13,7 @@
     "moduleResolution": "Bundler",
     "target": "ES2022",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["vite/client", "vike-solid/client"],
+    "types": ["vite/client", "vike-solid/client", "vike-cloudflare/types"],
     "jsx": "preserve",
     "jsxImportSource": "solid-js"
   },

package.json

@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.3",
-    "@brillout/test-e2e": "^0.5.34",
+    "@brillout/test-e2e": "^0.5.35",
     "@brillout/test-types": "^0.1.15",
     "playwright": "^1.46.1"
   },