fix: preserve relative child paths during route localization (#3783)

Author: BobbieGoede

src/kit/gen.ts

@@ -43,12 +43,20 @@ export type LocalizeRouteParams = {
 
 function handlePathNesting(localizedPath: string, parentLocalizedPath: string = '') {
   if (!parentLocalizedPath) return localizedPath
-  // handle parent/index
-  const path = localizedPath.replace(parentLocalizedPath + '/', '')
-  if (path === parentLocalizedPath) {
-    return localizedPath === parentLocalizedPath ? '' : localizedPath
+
+  if (localizedPath[0] !== '/') {
+    return localizedPath
+  }
+
+  const index = localizedPath.indexOf(parentLocalizedPath)
+  if (index >= 0) {
+    // parent path is found, slice from index + parent length + slash, for example:
+    // * parent='/foo', child='/foo/bar'       => 'bar'
+    // * parent='bar',  child='/foo/bar/:id()' => ':id()'
+    return localizedPath.slice(localizedPath.indexOf(parentLocalizedPath) + parentLocalizedPath.length + 1)
   }
-  return path
+
+  return localizedPath
 }
 
 function createHandleTrailingSlash(ctx: RouteContext): RouteContext['handleTrailingSlash'] {
@@ -143,7 +151,7 @@ export type RouteContext = {
     locale: string,
     opts: LocalizeRouteParams
   ) => LocalizableRoute[]
-  localizeRouteName: (name: LocalizableRoute, locale: string, isDefault: boolean) => string
+  localizeRouteName: (name: LocalizableRoute, locale: string, isDefault: boolean) => string | undefined
   handleTrailingSlash: (localizedPath: string, hasParent: boolean) => string
   localizers: { enabled: (data: LocalizerData) => boolean; localizer: LocalizerFn }[]
 }
@@ -167,6 +175,7 @@ function createLocalizeRouteName(opts: {
   const separator = opts.routesNameSeparator || '___'
   const defaultSuffix = opts.defaultLocaleRouteNameSuffix || 'default'
   return (route, locale, isDefault) => {
+    if (route.name == null) return
     // prettier-ignore
     return !isDefault
       ? route.name + separator + locale

test/pages/custom_route.test.ts

@@ -299,6 +299,102 @@ test('#1649', () => {
   expect(localizedPages).toMatchSnapshot()
 })
 
+test('#3781', () => {
+  const pages = [
+    {
+      name: 'index',
+      path: '/',
+      file: '/path/to/3781/pages/index.vue',
+      children: []
+    },
+    {
+      path: '/customer',
+      file: '/path/to/3781/pages/customer.vue',
+      children: [
+        {
+          path: 'my-orders',
+          file: '/path/to/3781/pages/customer/my-orders.vue',
+          children: [
+            {
+              name: 'customer-my-orders',
+              path: 'index',
+              file: '/path/to/3781/pages/customer/my-orders/index.vue',
+              children: []
+            },
+            {
+              name: 'customer-my-orders-id',
+              path: ':id()',
+              file: '/path/to/3781/pages/customer/my-orders/[id].vue',
+              children: []
+            }
+          ]
+        }
+      ]
+    }
+  ]
+
+  const options = getNuxtOptions({
+    customer: {
+      en: '/customer-account'
+    },
+    'customer-my-orders': {
+      en: '/customer-account/my-orders'
+    },
+    'customer-my-orders-id': {
+      en: '/customer-account/my-orders/[id]'
+    }
+  })
+
+  options.locales = [{ code: 'en' }]
+  options.defaultLocale = 'en'
+  options.customRoutes = 'config'
+
+  vi.spyOn(fs, 'readFileSync').mockReturnValue('')
+
+  const ctx = new NuxtPageAnalyzeContext(options.pages)
+  analyzeNuxtPages(ctx, 'pages', pages)
+  const localizedPages = localizeRoutes(pages, {
+    ...options,
+    includeUnprefixedFallback: false,
+    optionsResolver: getRouteOptionsResolver(ctx, options.defaultLocale!, options.customRoutes!)
+  } as Parameters<typeof localizeRoutes>[1])
+
+  expect(localizedPages).toMatchInlineSnapshot(`
+    [
+      {
+        "children": [],
+        "file": "/path/to/3781/pages/index.vue",
+        "name": "index___en",
+        "path": "/",
+      },
+      {
+        "children": [
+          {
+            "children": [
+              {
+                "children": [],
+                "file": "/path/to/3781/pages/customer/my-orders/index.vue",
+                "name": "customer-my-orders___en",
+                "path": "",
+              },
+              {
+                "children": [],
+                "file": "/path/to/3781/pages/customer/my-orders/[id].vue",
+                "name": "customer-my-orders-id___en",
+                "path": ":id()",
+              },
+            ],
+            "file": "/path/to/3781/pages/customer/my-orders.vue",
+            "path": "my-orders",
+          },
+        ],
+        "file": "/path/to/3781/pages/customer.vue",
+        "path": "/customer-account",
+      },
+    ]
+  `)
+})
+
 test('pages config using route name', () => {
   const pages = [
     {