@senrijs/senri 0.1.0 → 0.2.0

package/README.md

@@ -7,14 +7,15 @@
 
 <p align="center">
   Web 標準の <code>Request</code> / <code>Response</code> だけで書かれた、小さな Web フレームワーク。<br>
-  Bun・Deno・Node.js・Cloudflare Workers で、同じコードが動きます。
+  Bun・Deno・Node.js・Cloudflare Workers・ブラウザ(Service Worker)で、同じコードが動きます。
 </p>
 
 ```ts
 import { createApp } from "@senrijs/senri";
+import { devtools } from "@senrijs/senri/dev";
 import { serve } from "@senrijs/senri/serve";
 
-const app = createApp();
+const app = createApp({ dev: devtools() });      // 開発中の親切なエラーページなど。NODE_ENV=production では何もしない
 
 app.get("/hello", () => "こんにちは!");          // 文字列 → text/plain
 app.get("/users/:id", ({ id }) => ({ id }));    // オブジェクト → JSON(id の型はパスから推論)
@@ -22,10 +23,12 @@ app.get("/users/:id", ({ id }) => ({ id }));    // オブジェクト → JSON(i
 serve(app);   // Bun でも Deno でも Node.js でも
 ```
 
+本番のビルドでは `dev: devtools()` を外すと、開発用のコードがバンドルに入らず、本体だけ(minify して約 14KB)になります([開発モード](#開発モード))。
+
 - **返した値がレスポンスになる。** 文字列はテキスト、オブジェクトは JSON。`Response` もそのまま返せます
 - **型はパスから。** `/users/:id` と書けば、ハンドラーの `id` に型が付きます。[Standard Schema](https://standardschema.dev)(Zod・Valibot・ArkType など)で、パラメーター・クエリ・ボディも確かめられます
 - **開発モードが親切。** エラーページ(該当コード・ヒント・エディタで開く)、404 の「もしかして」、リクエストを玉ねぎのように見られるダッシュボード(`/_senri`)、層ごとの `Server-Timing`
-- **どこでも動く。** Web 標準の API だけで書いていて、`eval` も `new Function` も使いません
+- **どこでも動く。** Web 標準の API だけで書いていて、`eval` も `new Function` も使いません。ブラウザの Service Worker でも動きます
 
 ## インストール
 
@@ -86,10 +89,31 @@ export default app;
 ```
 
 - 変数の型も決めるときは `createApp<{ Bindings: Env; Variables: { user: User } }>()` と書きます。変数だけなら、今までどおり `createApp<{ user: User }>()` です
-- `c.ip` は、Cloudflare が付ける `CF-Connecting-IP` を読みます(Workers で動いているときだけ)
+- `getIp(c)`(`@senrijs/senri/ip`)は、Cloudflare が付ける `CF-Connecting-IP` を読みます(Workers で動いているときだけ)
 - 開発モードのダッシュボードは作りません(`/_senri` はふつうの 404)。エラーページは出ますが、該当コードは出ません
+- wrangler は1つのファイルにまとめるので、`dev: devtools()` を残すと、開発用のコード(約 140KB)もバンドルに入ります。本番のビルドでは外してください
+- Workers では `NODE_ENV` が読めないので、`devtools()` は `localhost` へのリクエスト(`wrangler dev`)のときだけ開発用の出力をします([開発モード](#開発モード))
 - 静的ファイルは `@senrijs/senri/static` ではなく、Workers の [Static Assets](https://developers.cloudflare.com/workers/static-assets/) で配ってください
 
+### ブラウザ(Service Worker)
+
+Service Worker の `fetch` イベントに、そのまま答えられます。サーバーなしで、ページからの `fetch` に Senri が返事をします。
+
+```ts
+// sw.ts(bun build や Vite でまとめて、navigator.serviceWorker.register("/sw.js") で登録する)
+import { createApp } from "@senrijs/senri";
+
+const app = createApp();
+app.get("/api/todos/:id", ({ id }) => ({ id, done: false }));
+
+self.addEventListener("fetch", (e) => {
+    if (new URL(e.request.url).pathname.startsWith("/api/")) e.respondWith(app.fetch(e.request));
+});
+```
+
+- ページの中で `app.fetch(new Request(...))` を直接呼ぶこともできます
+- CI で、Chromium のページと Service Worker の両方で動くことを確かめています(`scripts/browser.ts`)
+
 ### 止め方(graceful shutdown)
 
 `serve()` は SIGTERM / SIGINT を受けると、次の順に止まります。
@@ -158,19 +182,24 @@ app.route("/admin", adminApp);                             // 別の createApp()
 ## リクエストを読む
 
 ```ts
+import { getCookie, setCookie } from "@senrijs/senri/cookie";
+import { getIp } from "@senrijs/senri/ip";
+
 app.post("/search", async (_, c) => {
-    c.query("page");          // "2"(なければ undefined。c.query() で全部)
-    c.queries("tag");         // ["a", "b"]
-    await c.body();           // Content-Type に合わせて読む(JSON・フォーム・テキスト・それ以外は ArrayBuffer)
-    c.cookie("session");      // Cookie
-    c.ip;                     // 接続元の IP アドレス(分からなければ null)
+    c.query("page");               // "2"(なければ undefined。c.query() で全部)
+    c.queries("tag");              // ["a", "b"]
+    await c.body();                // Content-Type に合わせて読む(JSON・フォーム・テキスト・それ以外は ArrayBuffer)
+    getCookie(c, "session");       // Cookie(getCookie(c) で全部)
+    setCookie(c, "seen", "1");     // deleteCookie(c, name) で消す
+    getIp(c);                      // 接続元の IP アドレス(分からなければ null)
     return "ok";
 });
 ```
 
 - `c.body()` は何度呼んでも同じ結果です(ミドルウェアとハンドラーの両方から読めます)
-- `c.ip` はランタイムが渡す接続元を使います。`X-Forwarded-For` などのヘッダーは偽装できるので読みません。プロキシの後ろでは、プロキシが付けるヘッダーを自分で読んでください
-- `c.setCookie(name, value, options)` の既定は `Path=/`・`HttpOnly`・`SameSite=Lax` です
+- Cookie と IP は、使わないアプリのバンドルに入らないよう、別の入口(`@senrijs/senri/cookie`・`@senrijs/senri/ip`)にしています
+- `getIp(c)` はランタイムが渡す接続元を使います。`X-Forwarded-For` などのヘッダーは偽装できるので読みません。プロキシの後ろでは、プロキシが付けるヘッダーを自分で読んでください
+- `setCookie(c, name, value, options)` の既定は `Path=/`・`HttpOnly`・`SameSite=Lax` です
 
 ## バリデーション
 
@@ -193,7 +222,7 @@ app.post(
 ```
 
 - `params`・`query`・`body` を渡せます。`params` が通れば、ハンドラーの第1引数が変換後の値になります
-- 通らなければ 400 です。本番の本文は `400 Bad Request` だけで、開発モードでは、どこが違うかを一覧にします
+- 通らなければ 400 です。本番の本文は `400 Bad Request` だけで、開発モード(`devtools()`)では、どこが違うかを一覧にします。スキーマの書き間違いも、開発モードなら登録した時点で知らせます
 - 自分の形で返したいときは、`app.onError` で `ValidationError` を受けます(`err.target` と `err.issues`)
 
 ## ミドルウェア
@@ -254,17 +283,34 @@ app.notFound((c) => `ありません: ${c.path}`);
 ## 開発モード
 
 ```ts
-const app = createApp({ dev: true });
+import { createApp } from "@senrijs/senri";
+import { devtools } from "@senrijs/senri/dev";
+
+const app = createApp({ dev: devtools() });
 ```
 
-開発モードのときだけ、次のものが動きます。本番(既定)では、固定の文言(`500 Internal Server Error` など)だけを返し、計測も記録もしません。
+開発用の機能は、すべて `@senrijs/senri/dev` にあります。本体(`@senrijs/senri`)は開発用のコードを一切 import しないので、`devtools()` を渡さなければ、どのバンドラーでも開発用のコードは入りません。`devtools()` を渡したときだけ、次のものが動きます。渡さなければ、固定の文言(`500 Internal Server Error` など)だけを返し、計測も記録もしません。
 
-- 500 の本文にエラーメッセージ、404 に「もしかして: GET /hello ?」、405 にどのメソッドならあるか、バリデーションの 400 に違うところの一覧
+- 500 の本文にエラーメッセージ、404 に「もしかして: GET /hello ?」、405 にどのメソッドならあるか、バリデーションの 400 に違うところの一覧、登録時のエラーに日本語の説明
 - **エラーページと 404 ページ**: ブラウザから開いたとき(`Accept` に `text/html` があるとき)だけ。エラーが起きた行の前後のコード、ヒント、スタックトレース、ミドルウェアを通った順番と時間。エラーの場所は VS Code・Cursor・WebStorm・Zed で開けます
 - **ダッシュボード(`/_senri`)**: 直近 200 件のリクエストをリアルタイムで。玉ねぎタイムライン(ミドルウェアごとの自分の時間と下流込みの時間)、ルートとミドルウェアの一覧
 - **`Server-Timing` ヘッダー**: 層ごとの時間が、ブラウザの開発者ツールの「タイミング」に出ます
 
-開発モードを決めるのに環境変数(`NODE_ENV` など)は読みません。本番では `dev: true` にしないでください。
+本番での扱いは、2通りあります。**本番のビルドから外すのが確実です。**
+
+- **本番のビルドから `devtools()` を外す(`dev` を渡さない)**: 開発用のコードがバンドルに入らず、サイズが最小になります。依存は増えません(同じパッケージの別の入口なので)
+- **`dev: devtools()` を残して `NODE_ENV=production` にする**: `devtools()` は何もしないので、本番に開発ページは出ません。ただし、1つのファイルにまとめるバンドラー(Workers の wrangler など)では、コードが入ったままなのでサイズは減りません
+
+**Cloudflare Workers とブラウザ(Service Worker)では `NODE_ENV` が読めない**ので、`devtools()` は、リクエストの URL のホスト名が `localhost`(`127.0.0.1`・`[::1]`・`*.localhost` を含む)のときだけ開発用の出力をします。それ以外のリクエストには、本番と同じ固定の文言だけを返し、エラーページ・ルートの一覧・`Server-Timing` は出しません。
+
+- 見るのは URL のホスト名だけです。`Host` や `X-Forwarded-Host` などのヘッダーは、だれでも付けられるので見ません
+- Workers では、本番の Worker に `localhost` のリクエストは届かない(Cloudflare は登録されたドメインのリクエストしか渡さない)ので、`wrangler dev`(`localhost:8787`)のときだけ有効になります
+- ブラウザでは、開発中のサイト(`localhost`)のときだけ有効になります
+- それでも、本番のビルドからは外すのが確実です。消し忘れても漏れないようにするための、念のための仕組みです
+
+Deno では、`NODE_ENV` を読む許可(`--allow-env=NODE_ENV`)がないと本番かどうか分からないので、`devtools()` は無効になり、その旨を1行出します。
+
+0.1 の `createApp({ dev: true })` は、0.2 からエラーになります([CHANGELOG](./CHANGELOG.md) に移行方法があります)。
 
 ダッシュボードの記録とセキュリティについて:
 

package/dist/src/app.d.ts

@@ -1,8 +1,27 @@
-import { type ExecutionContext, type Handler, type Middleware } from "./context.ts";
-import { type ExtractParams, type RouteTable, type Simplify } from "./router.ts";
-import type { RouteSchemas, Validated, ValidatedParams } from "./validate.ts";
+import { Context, type ExecutionContext, type Handler, type Middleware } from "./context.ts";
+import { type ExtractParams, type RouteTable, type Route, type Simplify } from "./router.ts";
+import { type Layer } from "./compose.ts";
+import { type RouteSchemas, type Validated, type ValidatedParams } from "./validate.ts";
 import { type Router } from "./group.ts";
 import { type ErrorHandler, type NotFoundHandler } from "./errors.ts";
+export type Resolved = {
+    kind: "route";
+    route: Route;
+    params: Record<string, string>;
+} | {
+    kind: "options";
+    allow: string;
+} | {
+    kind: "methodNotAllowed";
+    allow: string;
+} | {
+    kind: "notFound";
+} | {
+    kind: "notImplemented";
+} | {
+    kind: "badRequest";
+    error: unknown;
+};
 export type RouteMethod<V extends object> = {
     <Path extends string>(path: Path, handler: Handler<Simplify<ExtractParams<Path>>, V>): void;
     <Path extends string, S extends RouteSchemas>(path: Path, schemas: S, handler: Handler<ValidatedParams<S, Simplify<ExtractParams<Path>>>, V, Validated<S>>): void;
@@ -44,6 +63,24 @@ export type App<V extends object = Record<string, unknown>> = {
     fetch(req: Request, info?: unknown, ctx?: ExecutionContext): Promise<Response>;
 };
 export type AppOptions = {
-    dev?: boolean;
+    dev?: DevHooks | undefined;
+};
+export type DevHooks = {
+    install(core: AppCore): DevInstalled;
+};
+export type AppCore = {
+    app: App<any>;
+    resolve(c: Context): Resolved;
+    layers(c: Context): Layer[];
+    inner(c: Context, resolved: Resolved): Response | Promise<Response>;
+    fail(err: unknown, c: Context): Promise<Response>;
+    routes(): readonly Route[];
+};
+export type DevInstalled = {
+    fetch(req: Request, info?: unknown, ctx?: ExecutionContext): Promise<Response>;
+    onError: ErrorHandler;
+    notFound: NotFoundHandler;
+    checkRoute(method: string, path: string, schemas: RouteSchemas | undefined): void;
+    explain(err: unknown): unknown;
 };
 export declare function createApp<V extends object = Record<string, unknown>>(options?: AppOptions): App<V>;

package/dist/src/app.js

@@ -1,76 +1,65 @@
 import { Context } from "./context.js";
-import { compareRoutes, allowedMethods, checkParamNames, normalizeMethod, routeShape, splitPattern, startsWithSegments, } from "./router.js";
+import { allowedMethods, checkParamNames, normalizeMethod, routeShape, splitPattern, startsWithSegments, } from "./router.js";
 import { compose } from "./compose.js";
 import { createMatcher } from "./matcher.js";
-import { isWorkers } from "./runtime.js";
-import { groupEntries, joinPath, routeHandler } from "./group.js";
-import { defaultNotFound, defaultOnError, checkQueryRequest, handleError, HttpError, markConversionError, methodNotAllowed, } from "./errors.js";
-// パスが /_senri か /_senri/... なら、"_senri" より後ろのセグメント。そうでなければ null
-function underDashboard(c) {
-    try {
-        return c.segments[0] === "_senri" ? c.segments.slice(1) : null;
-    }
-    catch {
-        return null;
-    }
-}
-// 計測で、いちばん内側の層に付ける名前(ダッシュボードの玉ねぎタイムラインに出る)
-const INNER_NAME = {
-    route: "handler",
-    notFound: "notFound",
-    methodNotAllowed: "405",
-    options: "options",
-    badRequest: "400",
-    notImplemented: "501",
-};
+import { routeHandler } from "./validate.js";
+import { groupEntries, joinPath } from "./group.js";
+import { defaultNotFound, defaultOnError, checkQueryRequest, handleError, HttpError, markConversionError, methodNotAllowed, senriError, } from "./errors.js";
 // 扱わないメソッド。ルートがあってもなくても 501 にする(app.all() でも受けない)
 const NOT_IMPLEMENTED = new Set(["CONNECT", "TRACE", "TRACK"]);
 // app.route(prefix, app) でつなげるように、アプリに登録されたものを横に置いておく
 const appEntries = new WeakMap();
+// 0.1 の createApp({ dev: true }) は使えなくなった。どう書き換えるかを案内する
+const DEV_TRUE = `createApp({ dev: true }) is no longer supported. Use devtools() from "@senrijs/senri/dev".
+createApp({ dev: true }) は使えなくなりました。@senrijs/senri/dev の devtools() を渡してください。
+
+  import { createApp } from "@senrijs/senri";
+  import { devtools } from "@senrijs/senri/dev";
+
+  const app = createApp({ dev: devtools() });`;
 // V はアプリの型。c.set / c.get で使う変数の型(createApp<{ user: User }>())か、
 // Workers の env も含めた形(createApp<{ Bindings: Env; Variables: { user: User } }>())で指定する(src/context.ts)
 export function createApp(options = {}) {
-    const dev = options.dev ?? false;
+    if (options.dev === true)
+        throw senriError("dev_true", DEV_TRUE);
     const routes = [];
     const matcher = createMatcher();
     // prefix が null なら全部のリクエストで動く。["admin"] なら /admin とその下だけ
     // anonymous: 無名の関数だった(名前を anonymous#番号 にした)。ダッシュボードで「名前を付けると出る」と案内する
     const middlewares = [];
-    // 開発モードだけで使うもの(エラーページ、ダッシュボード)。ビルド済みの HTML など大きいので、
-    // 本番では読み込まないよう dev のときだけ import() する(src/dev/index.ts)
-    const devTools = dev ? import("./dev/index.js") : null;
-    // 開発モードでは、ブラウザから開いた 5xx を HTML のエラーページにする(src/dev/pages.ts)
-    const baseOnError = defaultOnError(dev);
-    let onError = devTools
-        ? async (err, c) => (await devTools).withErrorPage(baseOnError, true)(err, c)
-        : baseOnError;
-    let notFound = defaultNotFound(routes, dev);
+    // 開発モードの処理。createApp の最後に devtools().install() で入る(渡さなければ undefined のまま)
+    let devHooks;
+    let onError = defaultOnError;
+    let notFound = defaultNotFound;
+    // 登録時のエラーに、開発モードでは日本語の説明を付ける
+    function guard(fn) {
+        return (...args) => {
+            try {
+                fn(...args);
+            }
+            catch (err) {
+                throw devHooks ? devHooks.explain(err) : err;
+            }
+        };
+    }
     function method(name) {
-        return ((path, a, b) => add(name, path, routeHandler(path, a, b)));
+        return guard((path, a, b) => add(name, path, routeHandler(path, a, b), typeof a === "function" ? undefined : a));
     }
-    function add(rawMethod, path, handler) {
+    function add(rawMethod, path, handler, schemas) {
         // app.all() の印の "ALL" だけはそのまま。ほかは名前を確かめて大文字にする
         const method = rawMethod === "ALL" ? rawMethod : normalizeMethod(rawMethod);
+        devHooks?.checkRoute(method, path, schemas);
         const segments = splitPattern(path);
         checkParamNames(path, segments);
-        // 開発モードでは /_senri 以下はダッシュボードが使うので、登録しても呼ばれない。気づけるようにエラーにする
-        if (dev && segments[0] === "_senri") {
-            throw new Error(`${method} ${path}: /_senri 以下は、開発モードではダッシュボード用に予約されています`);
-        }
         // 同じメソッド + 同じ形のパスがあったら、あとから登録したほうは絶対に呼ばれないのでエラーにする
         const shape = routeShape(segments);
         const dup = routes.find((r) => r.method === method && routeShape(r.segments) === shape);
-        if (dup) {
-            const samePath = dup.segments.join("/") === segments.join("/");
-            throw new Error(samePath
-                ? `${method} ${path} はすでに登録されています`
-                : `${method} ${path} は、登録済みの ${dup.method} ${dup.path} と同じパスです(パラメーター名が違うだけです)`);
-        }
+        if (dup)
+            throw senriError("route_duplicate", `Duplicate route: ${method} ${path} (already: ${dup.method} ${dup.path})`);
         const paramNames = segments.filter((s) => s.startsWith(":")).map((s) => s.slice(1));
         const route = { path, segments, paramNames, method, handler };
-        // routes は一覧(routeList や 404 の「もしかして」)用。探すのは matcher(Trie)で行う
+        // routes は一覧(routeList や 404 の「もしかして」)用で、登録順。探すのは matcher(Trie)で行う
         routes.push(route);
-        routes.sort(compareRoutes);
         matcher.add(route);
     }
     // マッチしたルートのパラメーターを、ルートごとの名前で組み立てる
@@ -144,11 +133,11 @@ export function createApp(options = {}) {
         return layers;
     }
     const app = {
-        use(pathOrMw, mw) {
+        use: guard((pathOrMw, mw) => {
             const path = typeof pathOrMw === "string" ? pathOrMw : null;
             const fn = typeof pathOrMw === "string" ? mw : pathOrMw;
             if (!fn)
-                throw new Error(`app.use("${path}", ...) にミドルウェアがありません`);
+                throw senriError("no_middleware", `Missing middleware: ${path}`);
             middlewares.push({
                 // 関数の名前を使う。無名の関数(その場で書いたアロー関数など)は登録順の番号で呼ぶ
                 name: fn.name || `anonymous#${middlewares.length + 1}`,
@@ -157,7 +146,7 @@ export function createApp(options = {}) {
                 prefix: path === null ? null : splitPattern(path),
                 mw: fn,
             });
-        },
+        }),
         onError(handler) {
             onError = handler;
         },
@@ -178,38 +167,37 @@ export function createApp(options = {}) {
         all: method("ALL"),
         // 任意のメソッド(QUERY や、PROPFIND などの WebDAV)を登録する。配列でまとめて登録もできる
         // 小文字で書いても大文字にする。CONNECT / TRACE / TRACK は扱わない
-        on: ((methods, path, a, b) => {
+        on: guard((methods, path, a, b) => {
             const list = typeof methods === "string" ? [methods] : methods;
             if (list.length === 0)
-                throw new Error(`app.on(..., "${path}") にメソッドがありません`);
+                throw senriError("no_method", `Missing method: ${path}`);
             const handler = routeHandler(path, a, b);
             for (const m of list) {
                 if (m.toUpperCase() === "ALL")
-                    throw new Error("すべてのメソッドで動かすには app.all() を使ってください");
-                add(m, path, handler);
+                    throw senriError("on_all", "Use app.all() for every method");
+                add(m, path, handler, typeof a === "function" ? undefined : a);
             }
         }),
         // K はテーブルのキーから推論される。各キーのパスからパラメーターの型が決まる
-        routes(table) {
+        routes: guard((table) => {
             for (const [key, handler] of Object.entries(table)) {
                 const [method, path] = key.split(" ");
-                if (!method || !path) {
-                    throw new Error(`ルートの書き方が違います: "${key}"\n例: "GET /hello"`);
-                }
+                if (!method || !path)
+                    throw senriError("route_key", `Invalid route key: "${key}" (e.g. "GET /hello")`);
                 add(method.toUpperCase(), path, handler);
             }
-        },
+        }),
         // createRouter() で作ったルーターをつなげる。ルーターに登録済みのものが、この時点でアプリに入る
         // app.route(prefix, app) なら、別のアプリをプレフィックス付きでつなげる
         // (つなぐ側のアプリでは、プレフィックスのパラメーターに型は付かない。型が必要なら createRouter を使う)
         // つないだアプリの onError / notFound は使わず、こちらのものを使う
-        route(routerOrPrefix, child) {
+        route: guard((routerOrPrefix, child) => {
             // 先に全部読んでおく(ルーターの作りがおかしいときに、途中まで登録された状態にしない)
             let list;
             if (typeof routerOrPrefix === "string") {
                 const read = child ? appEntries.get(child) : undefined;
                 if (!read)
-                    throw new TypeError(`app.route("${routerOrPrefix}", app) には createApp() で作ったアプリを渡してください`);
+                    throw senriError("not_app", new TypeError(`Not an app from createApp(): ${routerOrPrefix}`));
                 list = read().map((entry) => ({ ...entry, path: joinPath(routerOrPrefix, entry.path) }));
             }
             else {
@@ -221,7 +209,7 @@ export function createApp(options = {}) {
                 else
                     add(entry.method, entry.path, entry.handler);
             }
-        },
+        }),
         middlewareList() {
             return middlewares.map((m) => ({ name: m.name, path: m.path, anonymous: m.anonymous }));
         },
@@ -232,9 +220,9 @@ export function createApp(options = {}) {
         // (形で見分けるので、Cloudflare Workers の env のような別のものが来ても壊れない。src/dev/dashboard/access.ts)
         // ctx: Cloudflare Workers の3つ目の引数(c.executionCtx)。export default app で、Workers がそのまま呼ぶ
         fetch(req, info, ctx) {
-            // 開発モードは計測・記録をするので別の道を通る。本番では、その分のコードを一切通らない
-            if (devTools)
-                return devFetch(req, info, ctx);
+            // 開発モードは計測・記録をするので別の道を通る(@senrijs/senri/dev)
+            if (devHooks)
+                return devHooks.fetch(req, info, ctx);
             try {
                 const c = new Context(req, info, ctx);
                 const resolved = resolve(c);
@@ -274,7 +262,7 @@ export function createApp(options = {}) {
                 const route = resolved.route;
                 // QUERY として登録したルートだけ、ボディと Content-Type を確かめる(app.all はハンドラーに任せる)
                 if (route.method === "QUERY") {
-                    return checkQueryRequest(c, dev).then((invalid) => {
+                    return checkQueryRequest(c).then((invalid) => {
                         if (invalid)
                             throw invalid;
                         return callHandler(c, route);
@@ -285,7 +273,7 @@ export function createApp(options = {}) {
             case "options":
                 return new Response(null, { status: 204, headers: { allow: resolved.allow } });
             case "methodNotAllowed":
-                throw methodNotAllowed(c, c.path, resolved.allow, dev);
+                throw methodNotAllowed(resolved.allow);
             case "notImplemented":
                 throw new HttpError(501, "501 Not Implemented");
             case "notFound":
@@ -315,61 +303,23 @@ export function createApp(options = {}) {
             return new Response(null, { status: res.status, statusText: res.statusText, headers: res.headers });
         })();
     }
-    // 開発モードの fetch。層ごとの時間を測り、エラーページ・Server-Timing・ダッシュボードの記録を付ける
-    async function devFetch(req, info, ctx) {
-        // 計測の基準になるリクエストの開始時刻
-        const origin = performance.now();
-        const time = Date.now();
-        const c = new Context(req, info, ctx);
-        const dashboard = dashboardPromise ? await dashboardPromise : null;
-        // /_senri 以下はダッシュボード。localhost から開いたときだけ、ミドルウェアを通さずに処理する
-        // (開けないときは普通の処理に回すので、/_senri はないものとして 404 になる)。どちらも記録はしない
-        const dashboardPath = underDashboard(c);
-        if (dashboard && dashboardPath && dashboard.canOpen(req, info)) {
-            return dashboard.handle(req, dashboardPath);
-        }
-        if (!dashboardPath)
-            dashboard?.begin(c, info);
-        const fail = (err) => handleError(err, c, onError);
-        // ミドルウェアより先にマッチして、c.route / c.params を見られるようにしておく
-        const resolved = resolve(c);
-        if (resolved.kind === "route") {
-            c.route = resolved.route.path;
-            c.params = resolved.params;
-        }
-        // ハンドラー・notFound・toResponse のどこで投げても、compose が onError に集める
-        const layers = applicableMiddlewares(c);
-        const innerName = INNER_NAME[resolved.kind];
-        const measure = { timings: c.timings, origin, innerName };
-        const res = await compose(layers, c, () => inner(c, resolved), fail, measure);
-        // ミドルウェアを全部通ったあとなので、ここなら「通った順番」が揃っている
-        const tools = await devTools;
-        const page = await tools.finishErrorPage(c, res);
-        // 層ごとの時間を Server-Timing に載せる(ブラウザの開発者ツールで見られる)
-        const desc = resolved.kind === "route" ? `${resolved.route.method} ${resolved.route.path}` : innerName;
-        const final = tools.withServerTiming(c.finalize(page), tools.serverTimingHeader(c.timings, { name: innerName, desc }, performance.now() - origin));
-        // ダッシュボードに記録する(失敗してもレスポンスには影響しない)
-        await dashboard?.record(c, final, time, [
-            ...layers.map((l) => ({ name: l.name, order: l.order ?? null })),
-            { name: innerName, order: null },
-        ]);
-        return final;
-    }
-    // ミドルウェアを先に(登録順のまま)、ルートはそのあと。ルートの順番は add() が並べ直すので関係ない
+    // ミドルウェアを先に、ルートはそのあと(どちらも登録順)
     appEntries.set(app, () => [
         ...middlewares.map((m) => ({ kind: "use", path: m.path ?? "/", mw: m.mw })),
         ...routes.map((r) => ({ kind: "route", method: r.method, path: r.path, handler: r.handler })),
     ]);
-    // 開発モードでは、ダッシュボードを作ってアプリに結び付けておく
-    // Cloudflare Workers では作らない(接続元が分からず localhost 制限で開けないうえ、
-    // リクエストごとに別の isolate で動くことがあり、記録が残らない)。/_senri はふつうの 404 になる
-    const dashboardPromise = isWorkers() ? null : devTools?.then((m) => {
-        const dashboard = m.createDashboard({
-            routes: () => app.routeList(),
-            middlewares: () => app.middlewareList(),
+    // 開発モード: 中身を渡して、開発用の fetch と既定の onError / notFound を受け取る
+    if (options.dev) {
+        devHooks = options.dev.install({
+            app,
+            resolve,
+            layers: applicableMiddlewares,
+            inner: inner,
+            fail: (err, c) => handleError(err, c, onError),
+            routes: () => routes,
         });
-        m.registerDashboard(app, dashboard);
-        return dashboard;
-    });
+        onError = devHooks.onError;
+        notFound = devHooks.notFound;
+    }
     return app;
 }

package/dist/src/compose.d.ts

@@ -14,9 +14,9 @@ export type Timing = {
     start: number;
     stopped: boolean;
 };
-export type Measure = {
-    timings: Timing[];
-    origin: number;
-    innerName: string;
+export type Trace = {
+    enter(i: number): void;
+    down(i: number): () => void;
+    leave(i: number, failed: boolean, stopped: boolean): void;
 };
-export declare function compose(layers: Layer[], c: Context, handle: () => Response | Promise<Response>, onError: (err: unknown) => Promise<Response>, measure?: Measure): Promise<Response>;
+export declare function compose(layers: Layer[], c: Context, handle: () => Response | Promise<Response>, onError: (err: unknown) => Promise<Response>, trace?: Trace): Promise<Response>;

package/dist/src/compose.js

@@ -1,4 +1,4 @@
-import { markConversionError } from "./errors.js";
+import { markConversionError, senriError } from "./errors.js";
 // 返した値をレスポンスにする。失敗したら、どこが返した値だったかをエラーに覚えさせてから投げ直す
 export function toResponseOf(c, value, origin) {
     try {
@@ -10,10 +10,9 @@ export function toResponseOf(c, value, origin) {
 }
 // ミドルウェアを順に通して、最後に handle を呼ぶ
 // 例外は(ミドルウェアでもハンドラーでも)onError に渡してレスポンスにしてもらう
-// measure を渡したときだけ、各層の時間を timings[i] に記録する(i = 層の順番、最後がいちばん内側)
-export function compose(layers, c, handle, onError, measure) {
+export function compose(layers, c, handle, onError, trace) {
     // 近道: ミドルウェアがなく、計測もしないなら、いちばん内側の処理を呼ぶだけ(下の dispatch と同じ結果になる)
-    if (layers.length === 0 && !measure) {
+    if (layers.length === 0 && !trace) {
         try {
             return Promise.resolve(handle()).catch(onError);
         }
@@ -21,9 +20,6 @@ export function compose(layers, c, handle, onError, measure) {
             return onError(err);
         }
     }
-    const timings = measure?.timings;
-    // 計測しないときは時計を読まない
-    const now = timings ? () => performance.now() : () => 0;
     // どの層で例外が起きたか(層の番号)
     let failedAt = -1;
     const fail = (err, i) => {
@@ -31,29 +27,17 @@ export function compose(layers, c, handle, onError, measure) {
         return onError(err);
     };
     const dispatch = async (i) => {
-        const start = now();
-        // next() の中(下流)で待っていた時間
-        let inner = 0;
+        trace?.enter(i);
         // next() を呼ばずに値を返して終わったか
         let stopped = false;
         try {
-            return await step(i, (ms) => (inner += ms), () => (stopped = true));
+            return await step(i, () => (stopped = true));
         }
         finally {
-            if (measure) {
-                const total = now() - start;
-                measure.timings[i] = {
-                    name: layers[i]?.name ?? measure.innerName,
-                    total,
-                    self: total - inner,
-                    failed: failedAt === i,
-                    start: start - measure.origin,
-                    stopped,
-                };
-            }
+            trace?.leave(i, failedAt === i, stopped);
         }
     };
-    const step = async (i, addInner, markStopped) => {
+    const step = async (i, markStopped) => {
         const layer = layers[i];
         if (!layer) {
             try {
@@ -68,12 +52,13 @@ export function compose(layers, c, handle, onError, measure) {
         let result;
         try {
             result = await layer.mw(c, () => {
-                if (downstream) {
-                    // 2回目を許すと、ハンドラーや後ろのミドルウェアが2回動いてしまう
-                    throw new Error("next() が2回呼ばれました。1つのミドルウェアで呼べるのは1回だけです");
-                }
-                const nextStart = now();
-                downstream = dispatch(i + 1).finally(() => addInner(now() - nextStart));
+                // 2回目を許すと、ハンドラーや後ろのミドルウェアが2回動いてしまう
+                if (downstream)
+                    throw senriError("next_twice", "next() called twice");
+                // 下流に入る時刻は、dispatch を始める前に取る(下流が最初の await までに同期で使った時間も、下流の時間にする)
+                const up = trace?.down(i);
+                const d = dispatch(i + 1);
+                downstream = up ? d.finally(up) : d;
                 return downstream;
             });
             // toResponse も JSON.stringify で投げることがあるので try の中で
@@ -89,7 +74,7 @@ export function compose(layers, c, handle, onError, measure) {
         catch (err) {
             return fail(err, i);
         }
-        return fail(new Error("ミドルウェアが何も返さず、next()もよんでいません"), i);
+        return fail(senriError("no_response", "Middleware returned nothing and did not call next()"), i);
     };
     return dispatch(0);
 }