feat(dev): cloudflare dev server adapter

[rmarscher]

Related to #891. This is a better implementation than using a waku plugin.

See https://github.com/honojs/vite-plugins/blob/main/packages/dev-server/src/dev-server.ts#L124-L137 for similar work.

Here is the plugin implementation for comparison - https://gist.github.com/rmarscher/9bb6ed54dc9535f4b81bed147204c7e9

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
waku	✅ Ready (Inspect)	Visit Preview	Sep 18, 2024 6:18pm

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[dai-shi]

Oookay, I get that waku middleware system doesn't work for this case (because waku middleware is to hide Hono.)

The solution in this PR looks nice DX-wise, however, it doesn't fit well with the minimal mental model in Waku, and there would be some issue with (peer) dependencies. Let me try another approach.

[rmarscher]

Closing for #893.

[rmarscher]

With #893, this can look like this:

waku.config.ts:

import type { Config } from "waku/config";
import { cloudflareDevServer } from "./waku.cloudflare-dev-server";

const wakuConfig: Config = {
  ...(import.meta.env && import.meta.env.MODE !== "production"
    ? {
        unstable_honoEnhancer: cloudflareDevServer({
          // Optional config settings for the Cloudflare dev server (wrangler proxy)
          // https://developers.cloudflare.com/workers/wrangler/api/#parameters-1
          persist: {
            path: ".wrangler/state/v3",
          },
        }),
      }
    : {}),
  middleware: () => {
    return [
      import("waku/middleware/dev-server"),
      import("waku/middleware/headers"),
      import("waku/middleware/ssr"),
      import("waku/middleware/rsc"),
    ];
  },
};

export default wakuConfig;

waku.cloudflare-dev-server.ts:

import type { Hono } from 'hono';
import { getPlatformProxy } from 'wrangler';
import { WebSocketPair } from 'miniflare';

Object.assign(globalThis, { WebSocketPair })

export const cloudflareDevServer = (cfOptions: any) => async (app: Hono) => {
  const proxyPromise = getPlatformProxy({
    ...(cfOptions || {}),
  })
  return async (req: Request) => {
    const proxy = await proxyPromise;
    Object.assign(req, { cf: proxy.cf });
    Object.assign(globalThis, {
      caches: proxy.caches,
    });
    return app.fetch(req, proxy.env, proxy.ctx);
  };
};