feat(client): support relative path (close #1492)

e2e/docs/components/auto-link.md

@@ -0,0 +1,60 @@
+# AutoLink
+
+<div id="route-link">
+  <AutoLink v-for="item in routeLinksConfig" :config="item" />
+</div>
+
+<div id="anchor-link">
+  <AutoLink v-for="item in anchorLinksConfig" :config="item" />
+</div>
+
+<div id="config">
+  <AutoLink :config="{ text: 'text', link: '/', ariaLabel: 'label' }" />
+</div>
+
+<script setup lang="ts">
+import { AutoLink } from 'vuepress/client'
+
+const routeLinks = [
+  '/',
+  '/README.md',
+  '/index.html',
+  '/non-existent',
+  '/non-existent.md',
+  '/non-existent.html',
+  '/routes/non-ascii-paths/中文目录名/中文文件名',
+  '/routes/non-ascii-paths/中文目录名/中文文件名.md',
+  '/routes/non-ascii-paths/中文目录名/中文文件名.html',
+  '/README.md#hash',
+  '/README.md?query',
+  '/README.md?query#hash',
+  '/#hash',
+  '/?query',
+  '/?query#hash',
+  '#hash',
+  '?query',
+  '?query#hash',
+  'route-link',
+  'route-link.md',
+  'route-link.html',
+  'not-existent',
+  'not-existent.md',
+  'not-existent.html',
+  '../',
+  '../README.md',
+  '../404.md',
+  '../404.html',
+]
+
+const routeLinksConfig = routeLinks.map((link) => ({ link, text: 'text' }))
+
+const anchorLinks = [
+  '//example.com',
+  'http://example.com',
+  'https://example.com',
+  'mailto:[email protected]',
+  'tel:+1234567890',
+]
+
+const anchorLinksConfig = anchorLinks.map((link) => ({ link, text: 'text' }))
+</script>

e2e/docs/components/route-link.md

@@ -28,25 +28,37 @@
 
 - <RouteLink to="/README.md" active="">text</RouteLink>
 - <RouteLink to="/README.md" active>text</RouteLink>
+- <RouteLink to="/" active="">text</RouteLink>
+- <RouteLink to="/" active>text</RouteLink>
 - <RouteLink to="/README.md" :active="false">text</RouteLink>
 - <RouteLink to="/README.md">text</RouteLink>
+- <RouteLink to="/" :active="false">text</RouteLink>
+- <RouteLink to="/">text</RouteLink>
 
 ### Class
 
 - <RouteLink to="/README.md" class="custom-class">text</RouteLink>
 - <RouteLink to="/README.md" active class="custom-class">text</RouteLink>
+- <RouteLink to="/" class="custom-class">text</RouteLink>
+- <RouteLink to="/" active class="custom-class">text</RouteLink>
 
 ### Attrs
 
 - <RouteLink to="/README.md" title="Title">text</RouteLink>
 - <RouteLink to="/README.md" target="_blank">text</RouteLink>
 - <RouteLink to="/README.md" rel="noopener">text</RouteLink>
 - <RouteLink to="/README.md" aria-label="test">text</RouteLink>
+- <RouteLink to="/" title="Title">text</RouteLink>
+- <RouteLink to="/" target="_blank">text</RouteLink>
+- <RouteLink to="/" rel="noopener">text</RouteLink>
+- <RouteLink to="/" aria-label="test">text</RouteLink>
 
 ### Slots
 
 - <RouteLink to="/README.md"><span>text</span></RouteLink>
 - <RouteLink to="/README.md"><span>text</span><span>text2</span></RouteLink>
+- <RouteLink to="/"><span>text</span></RouteLink>
+- <RouteLink to="/"><span>text</span><span>text2</span></RouteLink>
 
 ### Hash and query
 
@@ -56,9 +68,24 @@
 - <RouteLink to="/README.md?query=1#hash">text</RouteLink>
 - <RouteLink to="/README.md?query=1&query=2#hash">text</RouteLink>
 - <RouteLink to="/README.md#hash?query=1&query=2">text</RouteLink>
+- <RouteLink to="/#hash">text</RouteLink>
+- <RouteLink to="/?query">text</RouteLink>
+- <RouteLink to="/?query#hash">text</RouteLink>
+- <RouteLink to="/?query=1#hash">text</RouteLink>
+- <RouteLink to="/?query=1&query=2#hash">text</RouteLink>
+- <RouteLink to="/#hash?query=1&query=2">text</RouteLink>
 - <RouteLink to="#hash">text</RouteLink>
 - <RouteLink to="?query">text</RouteLink>
 - <RouteLink to="?query#hash">text</RouteLink>
 - <RouteLink to="?query=1#hash">text</RouteLink>
 - <RouteLink to="?query=1&query=2#hash">text</RouteLink>
 - <RouteLink to="#hash?query=1&query=2">text</RouteLink>
+
+### Relative
+
+- <RouteLink to="../README.md">text</RouteLink>
+- <RouteLink to="../404.md">text</RouteLink>
+- <RouteLink to="not-exist.md">text</RouteLink>
+- <RouteLink to="../">text</RouteLink>
+- <RouteLink to="../404.html">text</RouteLink>
+- <RouteLink to="not-exist.html">text</RouteLink>

e2e/tests/components/auto-link.spec.ts

@@ -0,0 +1,30 @@
+import { expect, test } from '@playwright/test'
+import { BASE } from '../../utils/env'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('components/auto-link.html')
+})
+
+test('should render route-link correctly', async ({ page }) => {
+  for (const el of await page
+    .locator('.e2e-theme-content #route-link a')
+    .all()) {
+    await expect(el).toHaveAttribute('class', /route-link/)
+  }
+})
+
+test('should render anchor-link correctly', async ({ page }) => {
+  for (const el of await page
+    .locator('.e2e-theme-content #anchor-link a')
+    .all()) {
+    await expect(el).toHaveAttribute('class', /anchor-link/)
+  }
+})
+
+test('should render config correctly', async ({ page }) => {
+  const locator = page.locator('.e2e-theme-content #config a')
+
+  await expect(locator).toHaveText('text')
+  await expect(locator).toHaveAttribute('href', BASE)
+  await expect(locator).toHaveAttribute('aria-label', 'label')
+})

e2e/tests/components/route-link.spec.ts

@@ -38,6 +38,10 @@ test('should render active status correctly', async ({ page }) => {
   const CONFIGS = [
     'route-link route-link-active',
     'route-link route-link-active',
+    'route-link route-link-active',
+    'route-link route-link-active',
+    'route-link',
+    'route-link',
     'route-link',
     'route-link',
   ]
@@ -53,6 +57,8 @@ test('should render class correctly', async ({ page }) => {
   const CONFIGS = [
     'route-link custom-class',
     'route-link route-link-active custom-class',
+    'route-link custom-class',
+    'route-link route-link-active custom-class',
   ]
 
   for (const [index, className] of CONFIGS.entries()) {
@@ -80,6 +86,22 @@ test('should render attributes correctly', async ({ page }) => {
       attrName: 'aria-label',
       attrValue: 'test',
     },
+    {
+      attrName: 'title',
+      attrValue: 'Title',
+    },
+    {
+      attrName: 'target',
+      attrValue: '_blank',
+    },
+    {
+      attrName: 'rel',
+      attrValue: 'noopener',
+    },
+    {
+      attrName: 'aria-label',
+      attrValue: 'test',
+    },
   ]
 
   for (const [index, { attrName, attrValue }] of CONFIGS.entries()) {
@@ -99,6 +121,14 @@ test('should render slots correctly', async ({ page }) => {
       spansCount: 2,
       spansText: ['text', 'text2'],
     },
+    {
+      spansCount: 1,
+      spansText: ['text'],
+    },
+    {
+      spansCount: 2,
+      spansText: ['text', 'text2'],
+    },
   ]
   for (const [index, { spansCount, spansText }] of CONFIGS.entries()) {
     const children = await page
@@ -114,6 +144,12 @@ test('should render slots correctly', async ({ page }) => {
 
 test('should render hash and query correctly', async ({ page }) => {
   const CONFIGS = [
+    `${BASE}#hash`,
+    `${BASE}?query`,
+    `${BASE}?query#hash`,
+    `${BASE}?query=1#hash`,
+    `${BASE}?query=1&query=2#hash`,
+    `${BASE}#hash?query=1&query=2`,
     `${BASE}#hash`,
     `${BASE}?query`,
     `${BASE}?query#hash`,
@@ -134,3 +170,20 @@ test('should render hash and query correctly', async ({ page }) => {
     ).toHaveAttribute('href', href)
   }
 })
+
+test('should render relative links correctly', async ({ page }) => {
+  const CONFIGS = [
+    BASE,
+    `${BASE}404.html`,
+    `${BASE}components/not-exist.html`,
+    BASE,
+    `${BASE}404.html`,
+    `${BASE}components/not-exist.html`,
+  ]
+
+  for (const [index, href] of CONFIGS.entries()) {
+    await expect(
+      page.locator('.e2e-theme-content #relative + ul > li a').nth(index),
+    ).toHaveAttribute('href', href)
+  }
+})