fix: _middleware.ts supports Optional Parameter and Regexp routing (#332)

Author: yusukebe

mocks/app-with-mount-patterns/routes/_middleware.ts

@@ -0,0 +1,9 @@
+import { createMiddleware } from 'hono/factory'
+import { createRoute } from '../../../src/factory'
+
+const addHeader = createMiddleware(async (c, next) => {
+  await next()
+  c.res.headers.set('x-message', 'from middleware')
+})
+
+export default createRoute(addHeader)

src/server/server.ts

@@ -181,7 +181,7 @@ export const createApp = <E extends Env>(options: BaseServerOptions<E>): Hono<E>
 
           // Apply extra middleware for parent routing patterns like /:lang{en} or /:lang?
           const rootPath = dir.replace(rootRegExp, '')
-          const isRootLevel = !rootPath.includes('/') || rootPath === ''
+          const isRootLevel = !rootPath.includes('/')
           const isSimpleStructure = !Object.keys(content).some((f) => f.includes('/'))
 
           if (Object.keys(content).length > 0 && isRootLevel && isSimpleStructure) {
@@ -231,7 +231,8 @@ export const createApp = <E extends Env>(options: BaseServerOptions<E>): Hono<E>
         const shouldApply = middlewareDir === dir || dir.startsWith(middlewareDir + '/')
 
         if (middleware.default && shouldApply) {
-          subApp.use(...middleware.default)
+          // Use a dynamic route pattern that matches all paths including root
+          subApp.use('/:*{.+}?', ...middleware.default)
 
           // Track that this middleware has been applied to this directory
           if (!appliedMiddlewaresByDirectory.has(dir)) {

test-integration/apps.test.ts

@@ -1057,70 +1057,105 @@ describe('Renderer loading when mounted with special route patterns', () => {
     eager: true,
   })
 
+  const MIDDLEWARE = import.meta.glob(
+    '../mocks/app-with-mount-patterns/routes/**/_middleware.(tsx|ts)',
+    {
+      eager: true,
+    }
+  )
+
   describe('RegExp pattern mounting (/:lang{en})', () => {
     // Reproduce the scenario where parent app uses RegExp routing
     const app = createApp({
       root: '../mocks/app-with-mount-patterns/routes',
       ROUTES: ROUTES as any,
       RENDERER: RENDERER as any,
+      MIDDLEWARE: MIDDLEWARE as any,
     })
 
-    const apps = new Hono()
-
-    // This is the problematic setup with RegExp pattern
-    apps.route('/:lang{en}', app)
-    apps.route('/', app) // Additional route as mentioned in the original issue
-
-    it('Should return rendered index.tsx with _renderer.tsx', async () => {
-      // Test accessing /en (should show both index.tsx and _renderer.tsx)
-      const res = await apps.request('/en')
-      const html = await res.text()
-
-      expect(res.status).toBe(200)
-      expect(html).toContain('index.tsx')
-      expect(html).toContain('_renderer.tsx')
-    })
-
-    it('Should return rendered foo.tsx with _renderer.tsx', async () => {
-      // Test accessing /en/foo
-      const res = await apps.request('/en/foo')
-      const html = await res.text()
+    const routeAndPaths = [
+      {
+        route: '/:lang{en}',
+        paths: ['/en', '/en/foo'],
+      },
+      {
+        route: '/bar/:lang{en}',
+        paths: ['/bar/en', '/bar/en/foo'],
+      },
+      {
+        route: '/bar/buzz/:lang{en}',
+        paths: ['/bar/buzz/en', '/bar/buzz/en/foo'],
+      },
+    ]
 
-      expect(res.status).toBe(200)
-      expect(html).toContain('foo.tsx')
-      expect(html).toContain('_renderer.tsx')
+    routeAndPaths.forEach(({ route, paths }) => {
+      describe(route, () => {
+        const apps = new Hono()
+        // This is the problematic setup with RegExp pattern
+        apps.route(route, app)
+        apps.route('/', app) // Additional route as mentioned in the original issue
+
+        paths.forEach((path) => {
+          it(path, async () => {
+            const res = await apps.request(path)
+            const html = await res.text()
+            expect(res.status).toBe(200)
+
+            // Check which component should be rendered based on the path
+            const expectedComponent = path.endsWith('/foo') ? 'foo.tsx' : 'index.tsx'
+            expect(html).toContain(expectedComponent)
+            expect(html).toContain('_renderer.tsx')
+            expect(res.headers.get('x-message')).toBe('from middleware')
+          })
+        })
+      })
     })
   })
 
-  describe('Optional parameter mounting (/:lang?)', () => {
+  describe('Optional parameter mounting', () => {
     // Reproduce the scenario where parent app uses optional parameter routing
     const app = createApp({
       root: '../mocks/app-with-mount-patterns/routes',
       ROUTES: ROUTES as any,
       RENDERER: RENDERER as any,
+      MIDDLEWARE: MIDDLEWARE as any,
     })
 
-    const apps = new Hono()
-
-    // This is the problematic setup with optional parameter
-    apps.route('/:lang?', app)
-
-    it('Should return rendered content with _renderer.tsx when using optional parameters', async () => {
-      // Test accessing /en (should show both index.tsx and _renderer.tsx)
-      const res = await apps.request('/en')
-      const html = await res.text()
-      expect(res.status).toBe(200)
-      expect(html).toContain('index.tsx')
-      expect(html).toContain('_renderer.tsx')
-    })
+    const routeAndPaths = [
+      {
+        route: '/:lang?',
+        paths: ['/en', '/en/foo'],
+      },
+      {
+        route: '/bar/:lang?',
+        paths: ['/bar/en', '/bar/en/foo'],
+      },
+      {
+        route: '/bar/buzz/:lang?',
+        paths: ['/bar/buzz/en', '/bar/buzz/en/foo'],
+      },
+    ]
 
-    it('Should return rendered foo.tsx with _renderer.tsx when using optional parameters', async () => {
-      // Test accessing /en/foo
-      const res = await apps.request('/en/foo')
-      const html = await res.text()
-      expect(res.status).toBe(200)
-      expect(html).toContain('foo.tsx')
-      expect(html).toContain('_renderer.tsx')
+    routeAndPaths.forEach(({ route, paths }) => {
+      describe(route, () => {
+        const apps = new Hono()
+        // This is the problematic setup with optional parameter
+        apps.route(route, app)
+
+        paths.forEach((path) => {
+          it(path, async () => {
+            const res = await apps.request(path)
+            const html = await res.text()
+            expect(res.status).toBe(200)
+
+            // Check which component should be rendered based on the path
+            const expectedComponent = path.endsWith('/foo') ? 'foo.tsx' : 'index.tsx'
+            expect(html).toContain(expectedComponent)
+            expect(html).toContain('_renderer.tsx')
+            expect(res.headers.get('x-message')).toBe('from middleware')
+          })
+        })
+      })
     })
   })
 })