feat(cloudflare-pages): custom _routes.json (#135)

* feat(cloudflare-pages): custom `_routes.json`

* change path name on exclude

like an actual path

* add changeset

* add description to README for custom `_routes.json`

.changeset/moody-islands-wave.md

@@ -0,0 +1,5 @@
+---
+"@hono/vite-cloudflare-pages": minor
+---
+
+feat: creating a `public/_routes.json` will override the automatic generation

packages/cloudflare-pages/README.md

@@ -79,6 +79,8 @@ export const defaultOptions = {
 }
 ```
 
+This plugin generates `_routes.json` automatically. The automatic generation can be overridden by creating a `public/_routes.json`. See [Create a `_routes.json` file](https://developers.cloudflare.com/pages/functions/routing/#create-a-_routesjson-file) on Cloudflare Docs for more details.
+
 ## Build a client
 
 If you also want to build a client-side script, you can configure it as follows.

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

@@ -30,6 +30,7 @@ export const defaultOptions: Required<Omit<CloudflarePagesOptions, 'serveStaticD
 }
 
 const WORKER_JS_NAME = '_worker.js'
+const ROUTES_JSON_NAME = '_routes.json'
 
 type StaticRoutes = { version: number; include: string[]; exclude: string[] }
 
@@ -64,27 +65,32 @@ export const cloudflarePagesPlugin = (options?: CloudflarePagesOptions): Plugin
       const paths = await readdir(resolve(config.root, config.build.outDir), {
         withFileTypes: true,
       })
-      paths.forEach((p) => {
-        if (p.isDirectory()) {
-          staticPaths.push(`/${p.name}/*`)
-        } else {
-          if (p.name === WORKER_JS_NAME) {
-            return
+      // If _routes.json already exists, don't create it
+      if (paths.some((p) => p.name === ROUTES_JSON_NAME)) {
+        return
+      } else {
+        paths.forEach((p) => {
+          if (p.isDirectory()) {
+            staticPaths.push(`/${p.name}/*`)
+          } else {
+            if (p.name === WORKER_JS_NAME) {
+              return
+            }
+            staticPaths.push(`/${p.name}`)
           }
-          staticPaths.push(`/${p.name}`)
+        })
+        const staticRoutes: StaticRoutes = {
+          version: 1,
+          include: ['/*'],
+          exclude: staticPaths,
         }
-      })
-      const staticRoutes: StaticRoutes = {
-        version: 1,
-        include: ['/*'],
-        exclude: staticPaths,
+        const path = resolve(
+          config.root,
+          options?.outputDir ?? defaultOptions.outputDir,
+          '_routes.json'
+        )
+        await writeFile(path, JSON.stringify(staticRoutes))
       }
-      const path = resolve(
-        config.root,
-        options?.outputDir ?? defaultOptions.outputDir,
-        '_routes.json'
-      )
-      await writeFile(path, JSON.stringify(staticRoutes))
     },
     config: async (): Promise<UserConfig> => {
       return {

packages/cloudflare-pages/test/cloudflare-pages.test.ts

@@ -67,4 +67,26 @@ describe('cloudflarePagesPlugin', () => {
       '{"version":1,"include":["/*"],"exclude":["/favicon.ico","/static/*"]}'
     )
   })
+
+  it('Should not create a new _routes.json when _routes.json on output directory.', async () => {
+    const outputFile = `${testDir}/dist/_worker.js`
+    const routesFile = `${testDir}/dist/_routes.json`
+
+    expect(fs.existsSync(entryFile)).toBe(true)
+
+    await build({
+      publicDir: 'public-routes-json',
+      root: testDir,
+      plugins: [cloudflarePagesPlugin()],
+    })
+
+    expect(fs.existsSync(outputFile)).toBe(true)
+    expect(fs.existsSync(routesFile)).toBe(true)
+
+    const output = fs.readFileSync(outputFile, 'utf-8')
+    expect(output).toContain('Hello World')
+
+    const routes = fs.readFileSync(routesFile, 'utf-8')
+    expect(routes).toContain('{"version":1,"include":["/"],"exclude":["/customRoute"]}')
+  })
 })

packages/cloudflare-pages/test/project/public-routes-json/_routes.json

@@ -0,0 +1 @@
+{"version":1,"include":["/"],"exclude":["/customRoute"]}