chore: tweaks

Author: Mister-Hope

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="aria-label">
+  <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/tests/components/auto-link.cy.ts

@@ -0,0 +1,19 @@
+it('AutoLink', () => {
+  cy.visit('/components/auto-link.html')
+
+  cy.get(`.e2e-theme-content #route-link a`).each((el) => {
+    cy.wrap(el)
+      .should('have.attr', 'class')
+      .and('match', /route-link/)
+  })
+
+  cy.get(`.e2e-theme-content #anchor-link a`).each((el) => {
+    cy.wrap(el)
+      .should('have.attr', 'class')
+      .and('match', /anchor-link/)
+  })
+
+  cy.get(`.e2e-theme-content #aria-label a`).each((el) => {
+    cy.wrap(el).should('have.attr', 'aria-label').and('eq', 'label')
+  })
+})

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

@@ -78,7 +78,7 @@ it('RouteLink', () => {
     cy.wrap(el).within(() => {
       cy.get('a')
         .children()
-        .should('have.lengthOf', index + 1)
+        .should('have.lengthOf', (index + 1) % 2)
         .each((el) => {
           cy.wrap(el).contains('span', 'text')
         })

packages/client/src/components/AutoLink.ts

@@ -90,8 +90,8 @@ export const AutoLink = defineComponent({
     // If the `target` attr is "_blank"
     const isBlankTarget = computed(() => linkTarget.value === '_blank')
 
-    // Render `<RouteLink>` or not
-    const renderRouteLink = computed(
+    // Whether the link is internal
+    const isInternal = computed(
       () => !withProtocol.value && !isBlankTarget.value,
     )
 
@@ -122,15 +122,15 @@ export const AutoLink = defineComponent({
     })
 
     // If this link is active
-    const isActive = computed(() =>
-      renderRouteLink.value
-        ? config.value.activeMatch
+    const isActive = computed(
+      () =>
+        isInternal.value &&
+        (config.value.activeMatch
           ? new RegExp(config.value.activeMatch, 'u').test(route.path)
           : // If this link is active in subpath
             shouldBeActiveInSubpath.value
             ? route.path.startsWith(config.value.link)
-            : route.path === config.value.link
-        : false,
+            : route.path === config.value.link),
     )
 
     return (): VNode => {
@@ -143,15 +143,14 @@ export const AutoLink = defineComponent({
         after?.(),
       ]
 
-      return renderRouteLink.value
+      return isInternal.value
         ? h(
             RouteLink,
             {
               'class': 'auto-link',
               'to': link,
               'active': isActive.value,
               'aria-label': linkAriaLabel.value,
-              // Class needs to be merged manually
             },
             () => content,
           )

packages/client/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './AutoLink.js'
 export * from './ClientOnly.js'
 export * from './Content.js'
 export * from './RouteLink.js'

packages/shared/src/utils/normalizeRoutePath.ts

@@ -1,6 +1,6 @@
 const FAKE_HOST = 'http://.'
 
-const inferRoutePath = (path: string): string => {
+export const inferRoutePath = (path: string): string => {
   // if the pathname is empty or ends with `/`, return as is
   if (!path || path.endsWith('/')) return path