fix(dev-server): add navigator.userAgent value for the cloudflare a…

…dapter (#150)

* fix(dev-server): add `navigator.userAgent` value for the cloudflare adapter

* add a changeset

* remove Cloudflare Plugin that is deprecated from tests

.changeset/fifty-ligers-care.md

@@ -0,0 +1,5 @@
+---
+'@hono/vite-dev-server': patch
+---
+
+fix: add `navigator.userAgent` value for the cloudflare adapter

packages/dev-server/README.md

@@ -9,7 +9,7 @@ You can develop your application with Vite. It's fast.
 - Hono applications run on.
 - Fast by Vite.
 - HMR (Only for the client side).
-- Plugins are available, e.g., Cloudflare Pages.
+- Adapters are available, e.g., Cloudflare.
 - Also runs on Bun.
 
 ## Demo

packages/dev-server/e2e/e2e.test.ts

@@ -65,22 +65,6 @@ test('Should return 200 response - /stream', async ({ page }) => {
   expect(content).toBe('Hello Vite!')
 })
 
-test('Should serve static files in `public/static`', async ({ page }) => {
-  const response = await page.goto('/static/hello.json')
-  expect(response?.status()).toBe(200)
-
-  const data = await response?.json()
-  expect(data['message']).toBe('Hello')
-})
-
-test('Should handle `env.ASSETS.fetch` function', async ({ page }) => {
-  const response = await page.goto('/assets/hello.json')
-  expect(response?.status()).toBe(200)
-
-  const data = await response?.json()
-  expect(data['message']).toBe('Hello')
-})
-
 test('Should return a vite error page - /invalid-response', async ({ page }) => {
   const response = await page.goto('/invalid-response')
   expect(response?.status()).toBe(500)
@@ -95,57 +79,6 @@ test('Should return a vite error page with stack trace - /invalid-error-response
   expect(await response?.text()).toContain('e2e/mock/worker.ts')
 })
 
-test('Should set bindings from wrangler.toml [vars]', async ({ page }) => {
-  const res = await page.goto('/env', { waitUntil: 'domcontentloaded' })
-  expect(res?.ok()).toBe(true)
-  const json = await res?.json()
-  expect(json).toBeTruthy()
-  expect(json.env).toHaveProperty(
-    'VARIABLE_FROM_WRANGLER_TOML',
-    'VARIABLE_FROM_WRANGLER_TOML_VALUE'
-  )
-})
-
-test('Should set bindings from wrangler.toml [[d1_database]]', async ({ page }) => {
-  const res = await page.goto('/env', { waitUntil: 'domcontentloaded' })
-  expect(res?.ok()).toBe(true)
-  const json = await res?.json()
-  expect(json).toBeTruthy()
-  expect(json.env).toHaveProperty('DB_FROM_WRANGLER_TOML')
-})
-
-test('Should set bindings from root `env` in config', async ({ page }) => {
-  const res = await page.goto('/env', { waitUntil: 'domcontentloaded' })
-  expect(res?.ok()).toBe(true)
-  const json = await res?.json()
-  expect(json).toBeTruthy()
-  expect(json.env).toHaveProperty('ENV_FROM_ROOT', 'ENV_FROM_ROOT_VALUE')
-})
-
-test('Should set bindings from `cf` in config', async ({ page }) => {
-  const res = await page.goto('/env', { waitUntil: 'domcontentloaded' })
-  expect(res?.ok()).toBe(true)
-  const json = await res?.json()
-  expect(json).toBeTruthy()
-  expect(json.env).toHaveProperty('ENV_FROM_DEPRACATED_CF', 'ENV_FROM_DEPRACATED_CF_VALUE')
-})
-
-test('Should set bindings from `plugins` in config', async ({ page }) => {
-  const res = await page.goto('/env', { waitUntil: 'domcontentloaded' })
-  expect(res?.ok()).toBe(true)
-  const json = await res?.json()
-  expect(json).toBeTruthy()
-  expect(json.env).toHaveProperty('ENV_FROM_PLUGIN', 'ENV_FROM_PLUGIN_VALUE')
-})
-
-test('Should set bindings from `plugins` in config (async)', async ({ page }) => {
-  const res = await page.goto('/env', { waitUntil: 'domcontentloaded' })
-  expect(res?.ok()).toBe(true)
-  const json = await res?.json()
-  expect(json).toBeTruthy()
-  expect(json.env).toHaveProperty('ENV_FROM_PLUGIN_AS_FUNC', 'ENV_FROM_PLUGIN_AS_FUNC_VALUE')
-})
-
 test('Should set `workerd` as a runtime key', async ({ page }) => {
   const res = await page.goto('/runtime')
   expect(res?.ok()).toBe(true)

packages/dev-server/e2e/mock/worker.ts

@@ -4,7 +4,6 @@ import { getRuntimeKey } from 'hono/adapter'
 const app = new Hono<{
   Bindings: {
     NAME: string
-    ASSETS: { fetch: typeof fetch }
   }
 }>()
 
@@ -54,12 +53,6 @@ app.get('/stream', () => {
   })
 })
 
-app.get('/assets/hello.json', async (c) => {
-  const res = await c.env.ASSETS.fetch(new URL('/static/hello.json', c.req.url))
-  const data = await res.json()
-  return c.json(data)
-})
-
 // @ts-expect-error the response is string
 app.get('/invalid-response', () => {
   return '<h1>Hello!</h1>'

packages/dev-server/e2e/vite.config.ts

@@ -1,35 +1,13 @@
 import { defineConfig } from 'vite'
-import { getPlatformProxy } from 'wrangler'
 import devServer, { defaultOptions } from '../src'
 import cloudflareAdapter from '../src/adapter/cloudflare'
-import pages from '../src/cloudflare-pages'
 
 export default defineConfig(async () => {
-  const { env, dispose } = await getPlatformProxy()
-
   return {
     plugins: [
       devServer({
-        env: {
-          ENV_FROM_ROOT: 'ENV_FROM_ROOT_VALUE',
-        },
-        cf: {
-          bindings: {
-            ENV_FROM_DEPRACATED_CF: 'ENV_FROM_DEPRACATED_CF_VALUE',
-          },
-        },
         entry: './mock/worker.ts',
         exclude: [...defaultOptions.exclude, '/app/**'],
-        plugins: [
-          { onServerClose: dispose, env },
-          pages({
-            bindings: {
-              NAME: 'Hono',
-            },
-          }),
-          { env: { ENV_FROM_PLUGIN: 'ENV_FROM_PLUGIN_VALUE' } },
-          { env: async () => ({ ENV_FROM_PLUGIN_AS_FUNC: 'ENV_FROM_PLUGIN_AS_FUNC_VALUE' }) },
-        ],
         adapter: cloudflareAdapter,
       }),
     ],

packages/dev-server/e2e/wrangler.toml

@@ -1,8 +1,2 @@
 [vars]
-VARIABLE_FROM_WRANGLER_TOML = "VARIABLE_FROM_WRANGLER_TOML_VALUE"
-
-[[d1_databases]]
-binding = "DB_FROM_WRANGLER_TOML"
-database_name = "DB_NAME"
-database_id = "DB_ID"
-
+NAME = "Hono"

packages/dev-server/package.json

@@ -67,14 +67,14 @@
   "devDependencies": {
     "@playwright/test": "^1.37.1",
     "glob": "^10.3.10",
-    "hono": "^4.2.7",
+    "hono": "^4.4.11",
     "playwright": "^1.39.0",
     "publint": "^0.2.5",
     "rimraf": "^5.0.1",
     "tsup": "^7.2.0",
     "vite": "^5.2.10",
     "vitest": "^0.34.6",
-    "wrangler": "^3.28.4"
+    "wrangler": "^3.63.1"
   },
   "peerDependencies": {
     "hono": "*"

packages/dev-server/src/adapter/cloudflare.ts

@@ -17,6 +17,11 @@ export const cloudflareAdapter: (options?: CloudflareAdapterOptions) => Promise<
   proxy ??= await getPlatformProxy(options?.proxy)
   // Cache API provided by `getPlatformProxy` currently do nothing.
   Object.assign(globalThis, { caches: proxy.caches })
+  Object.assign(globalThis, {
+    navigator: {
+      userAgent: 'Cloudflare-Workers',
+    },
+  })
   return {
     env: proxy.env,
     executionContext: proxy.ctx,

packages/dev-server/src/cloudflare-pages/cloudflare-pages.ts

@@ -54,6 +54,10 @@ export const disposeMf = async () => {
   mf = undefined
 }
 
+/**
+ * @deprecated
+ * Use the Cloudflare Adapter instead of it.
+ */
 const plugin = (options?: Options): Plugin => {
   const env = getEnv(options ?? {})
   return {

packages/dev-server/src/dev-server.ts

@@ -4,7 +4,7 @@ import { minimatch } from 'minimatch'
 import type { Plugin as VitePlugin, ViteDevServer, Connect } from 'vite'
 import { createViteRuntime } from 'vite'
 import type { ViteRuntime } from 'vite/runtime'
-import { getEnv as cloudflarePagesGetEnv } from './cloudflare-pages/index.js'
+import type { getEnv as cloudflarePagesGetEnv } from './cloudflare-pages/index.js'
 import type { Env, Fetch, EnvFunc, Plugin, Adapter } from './types.js'
 
 export type DevServerOptions = {
@@ -14,6 +14,10 @@ export type DevServerOptions = {
   exclude?: (string | RegExp)[]
   ignoreWatching?: (string | RegExp)[]
   env?: Env | EnvFunc
+  /**
+   * @deprecated
+   * The `plugins` option is deprecated. Use the `adapter` instead of it.
+   */
   plugins?: Plugin[]
   /**
    * This can be used to inject environment variables into the worker from your wrangler.toml for example,
@@ -120,22 +124,6 @@ export function devServer(options?: DevServerOptions): VitePlugin {
                   env = { ...env, ...options.env }
                 }
               }
-              if (options?.cf) {
-                env = {
-                  ...env,
-                  ...(await cloudflarePagesGetEnv(options.cf)()),
-                }
-              }
-              if (options?.plugins) {
-                for (const plugin of options.plugins) {
-                  if (plugin.env) {
-                    env = {
-                      ...env,
-                      ...(typeof plugin.env === 'function' ? await plugin.env() : plugin.env),
-                    }
-                  }
-                }
-              }
 
               const adapter = await getAdapterFromOptions(options)
 
@@ -191,13 +179,6 @@ export function devServer(options?: DevServerOptions): VitePlugin {
 
       server.middlewares.use(await createMiddleware(server))
       server.httpServer?.on('close', async () => {
-        if (options?.plugins) {
-          for (const plugin of options.plugins) {
-            if (plugin.onServerClose) {
-              await plugin.onServerClose()
-            }
-          }
-        }
         const adapter = await getAdapterFromOptions(options)
         if (adapter?.onServerClose) {
           await adapter.onServerClose()