Skip to content

Commit

Permalink
Merge 7297db5 into 8b1ab67
Browse files Browse the repository at this point in the history
  • Loading branch information
Mister-Hope committed Apr 17, 2024
2 parents 8b1ab67 + 7297db5 commit b541e2f
Show file tree
Hide file tree
Showing 10 changed files with 420 additions and 118 deletions.
27 changes: 27 additions & 0 deletions e2e/docs/components/route-link.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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>
53 changes: 53 additions & 0 deletions e2e/tests/components/route-link.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
]
Expand All @@ -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()) {
Expand Down Expand Up @@ -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()) {
Expand All @@ -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
Expand All @@ -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`,
Expand All @@ -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)
}
})
98 changes: 58 additions & 40 deletions packages/client/src/components/RouteLink.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { h } from 'vue'
import type { FunctionalComponent, HTMLAttributes, VNode } from 'vue'
import { useRouter } from 'vue-router'
import { computed, defineComponent, h } from 'vue'
import type { SlotsType, VNode } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { resolveRoutePath } from '../router/index.js'
import { withBase } from '../utils/index.js'

/**
* Forked from https://github.com/vuejs/router/blob/941b2131e80550009e5221d4db9f366b1fea3fd5/packages/router/src/RouterLink.ts#L293
Expand All @@ -23,7 +22,7 @@ const guardEvent = (event: MouseEvent): boolean | void => {
return true
}

export interface RouteLinkProps extends HTMLAttributes {
export interface RouteLinkProps {
/**
* Whether the link is active to have an active class
*
Expand Down Expand Up @@ -53,42 +52,61 @@ export interface RouteLinkProps extends HTMLAttributes {
*
* It's recommended to use `RouteLink` in VuePress.
*/
export const RouteLink: FunctionalComponent<
RouteLinkProps,
Record<never, never>,
{
default: () => string | VNode | (string | VNode)[]
}
> = (
{ active = false, activeClass = 'route-link-active', to, ...attrs },
{ slots },
) => {
const router = useRouter()
const resolvedPath = resolveRoutePath(to)
export const RouteLink = defineComponent({
name: 'RouteLink',

const path =
// only anchor or query
resolvedPath.startsWith('#') || resolvedPath.startsWith('?')
? resolvedPath
: withBase(resolvedPath)
props: {
/**
* The route path to link to
*/
to: {
type: String,
required: true,
},

return h(
'a',
{
...attrs,
class: ['route-link', { [activeClass]: active }],
href: path,
onClick: (event: MouseEvent = {} as MouseEvent) => {
guardEvent(event) ? router.push(to).catch() : Promise.resolve()
},
/**
* Whether the link is active to have an active class
*
* Notice that the active status is not automatically determined according to the current route.
*/
active: Boolean,

/**
* The class to add when the link is active
*/
activeClass: {
type: String,
default: 'route-link-active',
},
slots.default?.(),
)
}
},

RouteLink.displayName = 'RouteLink'
RouteLink.props = {
active: Boolean,
activeClass: String,
to: String,
}
slots: Object as SlotsType<{
default: () => string | VNode | (string | VNode)[]
}>,

setup(props, { slots }) {
const router = useRouter()
const route = useRoute()

const path = computed(() =>
props.to.startsWith('#') || props.to.startsWith('?')
? props.to
: `${__VUEPRESS_BASE__}${resolveRoutePath(props.to, route.path).substring(1)}`,
)

return () =>
h(
'a',
{
class: ['route-link', { [props.activeClass]: props.active }],
href: path.value,
onClick: (event: MouseEvent = {} as MouseEvent) => {
if (guardEvent(event)) {
router.push(props.to).catch()
}
},
},
slots.default?.(),
)
},
})
3 changes: 2 additions & 1 deletion packages/client/src/router/resolveRoute.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,9 @@ export interface ResolvedRoute<T extends RouteMeta = RouteMeta>
*/
export const resolveRoute = <T extends RouteMeta = RouteMeta>(
path: string,
current?: string,
): ResolvedRoute<T> => {
const routePath = resolveRoutePath(path)
const routePath = resolveRoutePath(path, current)
const route = routes.value[routePath] ?? {
...routes.value['/404.html'],
notFound: true,
Expand Down
4 changes: 2 additions & 2 deletions packages/client/src/router/resolveRoutePath.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import { redirects, routes } from '../internal/routes.js'
/**
* Resolve route path with given raw path
*/
export const resolveRoutePath = (path: string): string => {
export const resolveRoutePath = (path: string, current?: string): string => {
// normalized path
const normalizedPath = normalizeRoutePath(path)
const normalizedPath = normalizeRoutePath(path, current)
if (routes.value[normalizedPath]) return normalizedPath

// encoded path
Expand Down
1 change: 1 addition & 0 deletions packages/shared/src/utils/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export * from './isLinkExternal.js'
export * from './isLinkHttp.js'
export * from './isLinkWithProtocol.js'
export * from './isPlainObject.js'
export * from './inferRoutePath.js'
export * from './normalizeRoutePath.js'
export * from './omit.js'
export * from './removeEndingSlash.js'
Expand Down
23 changes: 23 additions & 0 deletions packages/shared/src/utils/inferRoutePath.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
export const inferRoutePath = (path: string): string => {
// if the pathname is empty or ends with `/`, return as is
if (!path || path.endsWith('/')) return path

// convert README.md to index.html
let routePath = path.replace(/(^|\/)README.md$/i, '$1index.html')

// convert /foo/bar.md to /foo/bar.html
if (routePath.endsWith('.md')) {
routePath = routePath.substring(0, routePath.length - 3) + '.html'
}
// convert /foo/bar to /foo/bar.html
else if (!routePath.endsWith('.html')) {
routePath = routePath + '.html'
}

// convert /foo/index.html to /foo/
if (routePath.endsWith('/index.html')) {
routePath = routePath.substring(0, routePath.length - 10)
}

return routePath
}
33 changes: 12 additions & 21 deletions packages/shared/src/utils/normalizeRoutePath.ts
Original file line number Diff line number Diff line change
@@ -1,30 +1,21 @@
import { inferRoutePath } from './inferRoutePath.js'

const FAKE_HOST = 'http://.'

/**
* Normalize the given path to the final route path
*/
export const normalizeRoutePath = (path: string): string => {
// split pathname and query/hash
const [pathname, ...queryAndHash] = path.split(/(\?|#)/)

// if the pathname is empty or ends with `/`, return as is
if (!pathname || pathname.endsWith('/')) return path
export const normalizeRoutePath = (path: string, current?: string): string => {
if (!path.startsWith('/') && current) {
// the relative path should be resolved against the current path
const loc = current.slice(0, current.lastIndexOf('/'))

// convert README.md to index.html
let routePath = pathname.replace(/(^|\/)README.md$/i, '$1index.html')
const { pathname, search, hash } = new URL(`${loc}/${path}`, FAKE_HOST)

// convert /foo/bar.md to /foo/bar.html
if (routePath.endsWith('.md')) {
routePath = routePath.substring(0, routePath.length - 3) + '.html'
}
// convert /foo/bar to /foo/bar.html
else if (!routePath.endsWith('.html')) {
routePath = routePath + '.html'
return inferRoutePath(pathname) + search + hash
}

// convert /foo/index.html to /foo/
if (routePath.endsWith('/index.html')) {
routePath = routePath.substring(0, routePath.length - 10)
}
const [pathname, ...queryAndHash] = path.split(/(\?|#)/)

// add query and hash back
return routePath + queryAndHash.join('')
return inferRoutePath(pathname) + queryAndHash.join('')
}
Loading

0 comments on commit b541e2f

Please sign in to comment.