fix(client): support non-ascii locale path

Author: meteorlxy

e2e/docs/.vuepress/config.ts

@@ -41,6 +41,15 @@ export default defineUserConfig({
         ['meta', { name: 'bar', content: 'foobar zh' }],
       ],
     },
+    '/中文/': {
+      lang: '中文',
+      title: 'VuePress E2E',
+      description: 'VuePress E2E 测试站点',
+      head: [
+        ['meta', { name: 'foo-中文', content: 'foo-中文' }],
+        ['meta', { name: 'bar', content: '中文' }],
+      ],
+    },
   },
 
   markdown: {

e2e/docs/zh/README.md

@@ -1 +1 @@
-foo
+bar

e2e/docs/中文/README.md

@@ -0,0 +1 @@
+baz

e2e/tests/site-data.spec.ts

@@ -95,3 +95,50 @@ test.describe('zh-CN', () => {
     await expect(fooZhLocator.first()).toHaveAttribute('content', 'foo-zh')
   })
 })
+
+test.describe('non-ASCII', () => {
+  test.beforeEach(async ({ page }) => page.goto('中文/'))
+
+  test('lang', async ({ page }) => {
+    await expect(page.locator('html')).toHaveAttribute('lang', '中文')
+  })
+
+  test('title', async ({ page }) => {
+    const locator = page.locator('head title')
+
+    await expect(page).toHaveTitle('VuePress E2E')
+    await expect(locator).toHaveCount(1)
+    await expect(locator.first()).toHaveText('VuePress E2E', {
+      useInnerText: true,
+    })
+  })
+
+  test('description', async ({ page }) => {
+    const locator = page.locator('head meta[name="description"]')
+
+    await expect(locator).toHaveCount(1)
+    await expect(locator.first()).toHaveAttribute(
+      'content',
+      'VuePress E2E 测试站点',
+    )
+  })
+
+  test('head', async ({ page }) => {
+    const fooLocator = page.locator('head meta[name="foo"]')
+    const barLocator = page.locator('head meta[name="bar"]')
+    const bazLocator = page.locator('head meta[name="baz"]')
+    const fooChsLocator = page.locator('head meta[name="foo-中文"]')
+
+    await expect(fooLocator).toHaveCount(1)
+    await expect(fooLocator.first()).toHaveAttribute('content', 'foo')
+
+    await expect(barLocator).toHaveCount(1)
+    await expect(barLocator.first()).toHaveAttribute('content', '中文')
+
+    await expect(bazLocator).toHaveCount(1)
+    await expect(bazLocator.first()).toHaveAttribute('content', 'baz')
+
+    await expect(fooChsLocator).toHaveCount(1)
+    await expect(fooChsLocator.first()).toHaveAttribute('content', 'foo-中文')
+  })
+})

e2e/tests/update-head.spec.ts

@@ -9,6 +9,7 @@ test('should update head correctly', async ({ page }) => {
   const bazLocator = page.locator('head meta[name="baz"]')
   const fooEnLocator = page.locator('head meta[name="foo-en"]')
   const fooZhLocator = page.locator('head meta[name="foo-zh"]')
+  const fooChsLocator = page.locator('head meta[name="foo-中文"]')
 
   // en-US
   await page.goto('')
@@ -36,6 +37,8 @@ test('should update head correctly', async ({ page }) => {
   await expect(bazLocator.first()).toHaveAttribute('content', 'foobar baz')
   await expect(fooEnLocator).toHaveCount(1)
   await expect(fooEnLocator.first()).toHaveAttribute('content', 'foo-en')
+  await expect(fooZhLocator).toHaveCount(0)
+  await expect(fooChsLocator).toHaveCount(0)
 
   // navigate to zh-CN
   await page.locator('.e2e-theme-nav a', { hasText: 'zh-CN' }).click()
@@ -61,6 +64,37 @@ test('should update head correctly', async ({ page }) => {
   await expect(barLocator.first()).toHaveAttribute('content', 'foobar zh')
   await expect(bazLocator).toHaveCount(1)
   await expect(bazLocator.first()).toHaveAttribute('content', 'baz')
+  await expect(fooEnLocator).toHaveCount(0)
   await expect(fooZhLocator).toHaveCount(1)
   await expect(fooZhLocator.first()).toHaveAttribute('content', 'foo-zh')
+  await expect(fooChsLocator).toHaveCount(0)
+
+  // navigate to non-ASCII path
+  await page.locator('.e2e-theme-nav a', { hasText: '中文' }).click()
+
+  // lang
+  await expect(htmlLocator).toHaveAttribute('lang', '中文')
+  // title
+  await expect(page).toHaveTitle('VuePress E2E')
+  await expect(titleLocator).toHaveCount(1)
+  await expect(titleLocator.first()).toHaveText('VuePress E2E', {
+    useInnerText: true,
+  })
+  // description
+  await expect(descriptionLocator).toHaveCount(1)
+  await expect(descriptionLocator.first()).toHaveAttribute(
+    'content',
+    'VuePress E2E 测试站点',
+  )
+  // head
+  await expect(fooLocator).toHaveCount(1)
+  await expect(fooLocator.first()).toHaveAttribute('content', 'foo')
+  await expect(barLocator).toHaveCount(1)
+  await expect(barLocator.first()).toHaveAttribute('content', '中文')
+  await expect(bazLocator).toHaveCount(1)
+  await expect(bazLocator.first()).toHaveAttribute('content', 'baz')
+  await expect(fooEnLocator).toHaveCount(0)
+  await expect(fooZhLocator).toHaveCount(0)
+  await expect(fooChsLocator).toHaveCount(1)
+  await expect(fooChsLocator.first()).toHaveAttribute('content', 'foo-中文')
 })

packages/client/src/resolvers.ts

@@ -97,7 +97,7 @@ export const resolvers = reactive({
   resolveRouteLocale: (
     locales: SiteData['locales'],
     routePath: string,
-  ): RouteLocale => resolveLocalePath(locales, routePath),
+  ): RouteLocale => resolveLocalePath(locales, decodeURI(routePath)),
 
   /**
    * Resolve site data for specific locale

packages/core/tests/page/inferPagePath.spec.ts

@@ -10,6 +10,7 @@ const app = createBaseApp({
     '/': {},
     '/en/': {},
     '/zh/': {},
+    '/中文/': {},
   },
 })
 const appWithoutLocales = createBaseApp({
@@ -40,6 +41,13 @@ const testCases: [string, ReturnType<typeof inferPagePath>][] = [
       pathLocale: '/zh/',
     },
   ],
+  [
+    '中文/foo.md',
+    {
+      pathInferred: '/中文/foo.html',
+      pathLocale: '/中文/',
+    },
+  ],
 ]
 
 describe('core > page > inferPagePath', () => {