diff --git a/e2e/docs/components/auto-link.md b/e2e/docs/components/auto-link.md new file mode 100644 index 0000000000..8f424db566 --- /dev/null +++ b/e2e/docs/components/auto-link.md @@ -0,0 +1,60 @@ +# AutoLink + + + + + +
+ +
+ + diff --git a/e2e/docs/components/route-link.md b/e2e/docs/components/route-link.md index ec2656aa50..48dd4e0010 100644 --- a/e2e/docs/components/route-link.md +++ b/e2e/docs/components/route-link.md @@ -28,13 +28,19 @@ - text - text +- text +- text - text - text +- text +- text ### Class - text - text +- text +- text ### Attrs @@ -42,11 +48,17 @@ - text - text - text +- text +- text +- text +- text ### Slots - text - texttext2 +- text +- texttext2 ### Hash and query @@ -56,9 +68,24 @@ - text - text - text +- text +- text +- text +- text +- text +- text - text - text - text - text - text - text + +### Relative + +- text +- text +- text +- text +- text +- text diff --git a/e2e/tests/components/auto-link.spec.ts b/e2e/tests/components/auto-link.spec.ts new file mode 100644 index 0000000000..efe10528a7 --- /dev/null +++ b/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') +}) diff --git a/e2e/tests/components/route-link.spec.ts b/e2e/tests/components/route-link.spec.ts index c72e932ff2..e555744cac 100644 --- a/e2e/tests/components/route-link.spec.ts +++ b/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) + } +}) diff --git a/packages/client/src/components/AutoLink.ts b/packages/client/src/components/AutoLink.ts new file mode 100644 index 0000000000..7c556aca12 --- /dev/null +++ b/packages/client/src/components/AutoLink.ts @@ -0,0 +1,170 @@ +import { isLinkWithProtocol } from '@vuepress/shared' +import type { PropType, SlotsType, VNode } from 'vue' +import { computed, defineComponent, h, toRef } from 'vue' +import { useRoute } from 'vue-router' +import { useSiteData } from '../composables/index.js' +import { RouteLink } from './RouteLink.js' + +export interface AutoLinkProps { + /** + * Text of item + * + * 项目文字 + */ + text: string + + /** + * Aria label of item + * + * 项目无障碍标签 + */ + ariaLabel?: string + + /** + * Link of item + * + * 当前页面链接 + */ + link: string + + /** + * Rel of `` tag + * + * `` 标签的 `rel` 属性 + */ + rel?: string + + /** + * Target of `` tag + * + * `` 标签的 `target` 属性 + */ + target?: string + + /** + * Regexp mode to be active + * + * 匹配激活的正则表达式 + */ + activeMatch?: string +} + +export const AutoLink = defineComponent({ + name: 'AutoLink', + + props: { + /** + * @description Autolink config + */ + config: { + type: Object as PropType, + required: true, + }, + + /** + * @description Whether it's active only when exact match + */ + exact: Boolean, + }, + + slots: Object as SlotsType<{ + default?: () => VNode[] | VNode + before?: () => VNode[] | VNode | null + after?: () => VNode[] | VNode | null + }>, + + setup(props, { slots }) { + const route = useRoute() + const siteData = useSiteData() + + const config = toRef(props, 'config') + + // If the link has non-http protocol + const withProtocol = computed(() => isLinkWithProtocol(config.value.link)) + + // Resolve the `target` attr + const linkTarget = computed( + () => config.value.target || (withProtocol.value ? '_blank' : undefined), + ) + + // If the `target` attr is "_blank" + const isBlankTarget = computed(() => linkTarget.value === '_blank') + + // Whether the link is internal + const isInternal = computed( + () => !withProtocol.value && !isBlankTarget.value, + ) + + // Resolve the `rel` attr + const linkRel = computed( + () => + config.value.rel || + (isBlankTarget.value ? 'noopener noreferrer' : null), + ) + + // Resolve the `aria-label` attr + const linkAriaLabel = computed( + () => config.value.ariaLabel || config.value.text, + ) + + // Should be active when current route is a subpath of this link + const shouldBeActiveInSubpath = computed(() => { + // Should not be active in `exact` mode + if (props.exact) return false + + const localeKeys = Object.keys(siteData.value.locales) + + return localeKeys.length + ? // Check all the locales + localeKeys.every((key) => key !== config.value.link) + : // Check root + config.value.link !== '/' + }) + + // If this link is active + 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), + ) + + return (): VNode => { + const { text, link } = config.value + const { before, after, default: defaultSlot } = slots + + const content = defaultSlot?.() || [ + before ? before() : null, + text, + after?.(), + ] + + return isInternal.value + ? h( + RouteLink, + { + 'class': 'auto-link', + 'to': link, + 'active': isActive.value, + 'aria-label': linkAriaLabel.value, + }, + () => content, + ) + : h( + 'a', + { + 'class': 'auto-link anchor-link', + 'href': link, + 'rel': linkRel.value, + 'target': linkTarget.value, + 'aria-label': linkAriaLabel.value, + }, + content, + ) + } + }, +}) diff --git a/packages/client/src/components/RouteLink.ts b/packages/client/src/components/RouteLink.ts index a246bba061..e4b9fb9ea2 100644 --- a/packages/client/src/components/RouteLink.ts +++ b/packages/client/src/components/RouteLink.ts @@ -1,6 +1,6 @@ -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' @@ -23,7 +23,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 * @@ -53,42 +53,61 @@ export interface RouteLinkProps extends HTMLAttributes { * * It's recommended to use `RouteLink` in VuePress. */ -export const RouteLink: FunctionalComponent< - RouteLinkProps, - Record, - { - 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 + : withBase(resolveRoutePath(props.to, route.path)), + ) + + 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?.(), + ) + }, +}) diff --git a/packages/client/src/components/index.ts b/packages/client/src/components/index.ts index f4bc111a81..72d5746a89 100644 --- a/packages/client/src/components/index.ts +++ b/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' diff --git a/packages/client/src/router/resolveRoute.ts b/packages/client/src/router/resolveRoute.ts index ebfe486855..3f4a3ca541 100644 --- a/packages/client/src/router/resolveRoute.ts +++ b/packages/client/src/router/resolveRoute.ts @@ -13,8 +13,9 @@ export interface ResolvedRoute */ export const resolveRoute = ( path: string, + current?: string, ): ResolvedRoute => { - const routePath = resolveRoutePath(path) + const routePath = resolveRoutePath(path, current) const route = routes.value[routePath] ?? { ...routes.value['/404.html'], notFound: true, diff --git a/packages/client/src/router/resolveRoutePath.ts b/packages/client/src/router/resolveRoutePath.ts index b820df8778..2a9f2d2ef8 100644 --- a/packages/client/src/router/resolveRoutePath.ts +++ b/packages/client/src/router/resolveRoutePath.ts @@ -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 diff --git a/packages/shared/src/utils/isLinkExternal.ts b/packages/shared/src/utils/isLinkExternal.ts index 4c75a56407..1271cfc2f8 100644 --- a/packages/shared/src/utils/isLinkExternal.ts +++ b/packages/shared/src/utils/isLinkExternal.ts @@ -1,23 +1,13 @@ -import { isLinkHttp } from './isLinkHttp.js' +import { isLinkWithProtocol } from './isLinkWithProtocol.js' const markdownLinkRegexp = /.md((\?|#).*)?$/ /** * Determine a link is external or not */ -export const isLinkExternal = (link: string, base = '/'): boolean => { - if (isLinkHttp(link)) { - return true - } - +export const isLinkExternal = (link: string, base = '/'): boolean => + isLinkWithProtocol(link) || // absolute link that does not start with `base` and does not end with `.md` - if ( - link.startsWith('/') && + (link.startsWith('/') && !link.startsWith(base) && - !markdownLinkRegexp.test(link) - ) { - return true - } - - return false -} + !markdownLinkRegexp.test(link)) diff --git a/packages/shared/src/utils/isLinkWithProtocol.ts b/packages/shared/src/utils/isLinkWithProtocol.ts index e6f66e9741..d6f404c165 100644 --- a/packages/shared/src/utils/isLinkWithProtocol.ts +++ b/packages/shared/src/utils/isLinkWithProtocol.ts @@ -2,4 +2,4 @@ * Determine a link has protocol or not */ export const isLinkWithProtocol = (link: string): boolean => - /^[a-z][a-z0-9+.-]*:/.test(link) + /^[a-z][a-z0-9+.-]*:/.test(link) || link.startsWith('//') diff --git a/packages/shared/src/utils/normalizeRoutePath.ts b/packages/shared/src/utils/normalizeRoutePath.ts index db2e72837d..e398e44416 100644 --- a/packages/shared/src/utils/normalizeRoutePath.ts +++ b/packages/shared/src/utils/normalizeRoutePath.ts @@ -1,15 +1,11 @@ -/** - * 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(/(\?|#)/) +const FAKE_HOST = 'http://.' +export const inferRoutePath = (path: string): string => { // if the pathname is empty or ends with `/`, return as is - if (!pathname || pathname.endsWith('/')) return path + if (!path || path.endsWith('/')) return path // convert README.md to index.html - let routePath = pathname.replace(/(^|\/)README.md$/i, '$1index.html') + let routePath = path.replace(/(^|\/)README.md$/i, '$1index.html') // convert /foo/bar.md to /foo/bar.html if (routePath.endsWith('.md')) { @@ -25,6 +21,23 @@ export const normalizeRoutePath = (path: string): string => { routePath = routePath.substring(0, routePath.length - 10) } - // add query and hash back - return routePath + queryAndHash.join('') + return routePath +} + +/** + * Normalize the given path to the final route 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('/')) + + const { pathname, search, hash } = new URL(`${loc}/${path}`, FAKE_HOST) + + return inferRoutePath(pathname) + search + hash + } + + const [pathname, ...queryAndHash] = path.split(/(\?|#)/) + + return inferRoutePath(pathname) + queryAndHash.join('') } diff --git a/packages/shared/tests/isLinkExternal.spec.ts b/packages/shared/tests/isLinkExternal.spec.ts index 27341d51d9..40ca463e70 100644 --- a/packages/shared/tests/isLinkExternal.spec.ts +++ b/packages/shared/tests/isLinkExternal.spec.ts @@ -20,13 +20,13 @@ const testCases: [ [['//foobar.com/base/README.md', '/base/'], true], // links with other protocols - [['mailto:foobar', '/base/'], false], - [['tel:foobar', '/base/'], false], - [['ftp://foobar.com'], false], - [['ftp://foobar.com', '/base/'], false], - [['ftp://foobar.com/base/README.md'], false], - [['ftp://foobar.com/base/README.md', '/base/'], false], - [['ms-windows-store://home', '/base/'], false], + [['mailto:foobar', '/base/'], true], + [['tel:foobar', '/base/'], true], + [['ftp://foobar.com'], true], + [['ftp://foobar.com', '/base/'], true], + [['ftp://foobar.com/base/README.md'], true], + [['ftp://foobar.com/base/README.md', '/base/'], true], + [['ms-windows-store://home', '/base/'], true], // absolute links [['/foo/bar'], false], diff --git a/packages/shared/tests/isLinkWithProtocol.spec.ts b/packages/shared/tests/isLinkWithProtocol.spec.ts index da2abf977a..a8563351c6 100644 --- a/packages/shared/tests/isLinkWithProtocol.spec.ts +++ b/packages/shared/tests/isLinkWithProtocol.spec.ts @@ -2,16 +2,25 @@ import { expect, it } from 'vitest' import { isLinkWithProtocol } from '../src/index.js' const testCases: [string, ReturnType][] = [ + // with protocol ['ftp://foobar.com', true], ['ms-windows-store://home', true], ['mailto:foobar', true], ['tel:foobar', true], ['https://foobar.com', true], ['http://foobar.com', true], + ['//foobar.com', true], + + // hostname ['foobar.com', false], + + // pathname ['/foo/bar', false], + + // relative path ['../foo/bar', false], - ['//foobar.com', false], + ['./foo/bar', false], + ['foo/bar', false], ] testCases.forEach(([source, expected]) => { diff --git a/packages/shared/tests/normalizeRoutePath.spec.ts b/packages/shared/tests/normalizeRoutePath.spec.ts index e19287705d..fc4301cc81 100644 --- a/packages/shared/tests/normalizeRoutePath.spec.ts +++ b/packages/shared/tests/normalizeRoutePath.spec.ts @@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest' import { normalizeRoutePath } from '../src/index.js' const testCases = [ - // index + // absolute index ['/', '/'], ['/README.md', '/'], ['/readme.md', '/'], @@ -15,26 +15,29 @@ const testCases = [ ['/foo/index.md', '/foo/'], ['/foo/index.html', '/foo/'], ['/foo/index', '/foo/'], - ['', ''], ['README.md', 'index.html'], ['readme.md', 'index.html'], ['index.md', 'index.html'], ['index.html', 'index.html'], ['index', 'index.html'], - ['foo/', 'foo/'], - ['foo/README.md', 'foo/'], - ['foo/readme.md', 'foo/'], - ['foo/index.md', 'foo/'], - ['foo/index.html', 'foo/'], - ['foo/index', 'foo/'], - // non-index + // absolute non-index ['/foo', '/foo.html'], ['/foo.md', '/foo.html'], ['/foo.html', '/foo.html'], ['/foo/bar', '/foo/bar.html'], ['/foo/bar.md', '/foo/bar.html'], ['/foo/bar.html', '/foo/bar.html'], + + // relative index without current + ['foo/', 'foo/'], + ['foo/README.md', 'foo/'], + ['foo/readme.md', 'foo/'], + ['foo/index.md', 'foo/'], + ['foo/index.html', 'foo/'], + ['foo/index', 'foo/'], + + // relative non index without current ['foo', 'foo.html'], ['foo.md', 'foo.html'], ['foo.html', 'foo.html'], @@ -42,28 +45,138 @@ const testCases = [ ['foo/bar.md', 'foo/bar.html'], ['foo/bar.html', 'foo/bar.html'], - // hash and query - ['/foo#bar', '/foo.html#bar'], - ['/foo.md#bar', '/foo.html#bar'], - ['/foo.html#bar', '/foo.html#bar'], - ['/foo?bar=baz', '/foo.html?bar=baz'], - ['/foo.md?bar=baz', '/foo.html?bar=baz'], - ['/foo.html?bar=baz', '/foo.html?bar=baz'], - ['/foo?bar=baz#qux', '/foo.html?bar=baz#qux'], - ['/foo.md?bar=baz#qux', '/foo.html?bar=baz#qux'], - ['/foo.html?bar=baz#qux', '/foo.html?bar=baz#qux'], - ['foo#bar', 'foo.html#bar'], - ['foo.md#bar', 'foo.html#bar'], - ['foo.html#bar', 'foo.html#bar'], - ['foo?bar=baz', 'foo.html?bar=baz'], - ['foo.md?bar=baz', 'foo.html?bar=baz'], - ['foo.html?bar=baz', 'foo.html?bar=baz'], - ['foo?bar=baz#qux', 'foo.html?bar=baz#qux'], - ['foo.md?bar=baz#qux', 'foo.html?bar=baz#qux'], - ['foo.html?bar=baz#qux', 'foo.html?bar=baz#qux'], - ['#bar', '#bar'], - ['?bar=baz', '?bar=baz'], - ['?bar=baz#qux', '?bar=baz#qux'], + // relative non index with current + ['foo', '/foo.html', '/'], + ['foo', '/foo.html', '/a.html'], + ['foo', '/foo.html', '/index.html'], + ['foo', '/a/foo.html', '/a/'], + ['foo', '/a/foo.html', '/a/index.html'], + ['foo', '/a/foo.html', '/a/b.html'], + ['foo.md', '/foo.html', '/'], + ['foo.md', '/foo.html', '/a.html'], + ['foo.md', '/foo.html', '/index.html'], + ['foo.md', '/a/foo.html', '/a/'], + ['foo.md', '/a/foo.html', '/a/index.html'], + ['foo.md', '/a/foo.html', '/a/b.html'], + ['foo.html', '/foo.html', '/'], + ['foo.html', '/foo.html', '/a.html'], + ['foo.html', '/foo.html', '/index.html'], + ['foo.html', '/a/foo.html', '/a/'], + ['foo.html', '/a/foo.html', '/a/index.html'], + ['foo.html', '/a/foo.html', '/a/b.html'], + ['foo/bar', '/foo/bar.html', '/'], + ['foo/bar', '/foo/bar.html', '/a.html'], + ['foo/bar', '/foo/bar.html', '/index.html'], + ['foo/bar', '/a/foo/bar.html', '/a/'], + ['foo/bar', '/a/foo/bar.html', '/a/index.html'], + ['foo/bar', '/a/foo/bar.html', '/a/b.html'], + ['foo/bar.md', '/foo/bar.html', '/'], + ['foo/bar.md', '/foo/bar.html', '/a.html'], + ['foo/bar.md', '/foo/bar.html', '/index.html'], + ['foo/bar.md', '/a/foo/bar.html', '/a/'], + ['foo/bar.md', '/a/foo/bar.html', '/a/index.html'], + ['foo/bar.md', '/a/foo/bar.html', '/a/b.html'], + ['foo/bar.html', '/foo/bar.html', '/'], + ['foo/bar.html', '/foo/bar.html', '/a.html'], + ['foo/bar.html', '/foo/bar.html', '/index.html'], + ['foo/bar.html', '/a/foo/bar.html', '/a/'], + ['foo/bar.html', '/a/foo/bar.html', '/a/index.html'], + ['foo/bar.html', '/a/foo/bar.html', '/a/b.html'], + ['./foo', '/foo.html', '/'], + ['./foo', '/foo.html', '/a.html'], + ['./foo', '/foo.html', '/index.html'], + ['./foo', '/a/foo.html', '/a/'], + ['./foo', '/a/foo.html', '/a/index.html'], + ['./foo', '/a/foo.html', '/a/b.html'], + ['./foo.md', '/foo.html', '/'], + ['./foo.md', '/foo.html', '/a.html'], + ['./foo.md', '/foo.html', '/index.html'], + ['./foo.md', '/a/foo.html', '/a/'], + ['./foo.md', '/a/foo.html', '/a/index.html'], + ['./foo.md', '/a/foo.html', '/a/b.html'], + ['./foo.html', '/foo.html', '/'], + ['./foo.html', '/foo.html', '/a.html'], + ['./foo.html', '/foo.html', '/index.html'], + ['./foo.html', '/a/foo.html', '/a/'], + ['./foo.html', '/a/foo.html', '/a/index.html'], + ['./foo.html', '/a/foo.html', '/a/b.html'], + ['./foo/bar', '/foo/bar.html', '/'], + ['./foo/bar', '/foo/bar.html', '/a.html'], + ['./foo/bar', '/foo/bar.html', '/index.html'], + ['./foo/bar', '/a/foo/bar.html', '/a/'], + ['./foo/bar', '/a/foo/bar.html', '/a/index.html'], + ['./foo/bar', '/a/foo/bar.html', '/a/b.html'], + ['./foo/bar.md', '/foo/bar.html', '/'], + ['./foo/bar.md', '/foo/bar.html', '/a.html'], + ['./foo/bar.md', '/foo/bar.html', '/index.html'], + ['./foo/bar.md', '/a/foo/bar.html', '/a/'], + ['./foo/bar.md', '/a/foo/bar.html', '/a/index.html'], + ['./foo/bar.md', '/a/foo/bar.html', '/a/b.html'], + ['./foo/bar.html', '/foo/bar.html', '/'], + ['./foo/bar.html', '/foo/bar.html', '/a.html'], + ['./foo/bar.html', '/foo/bar.html', '/index.html'], + ['./foo/bar.html', '/a/foo/bar.html', '/a/'], + ['./foo/bar.html', '/a/foo/bar.html', '/a/index.html'], + ['./foo/bar.html', '/a/foo/bar.html', '/a/b.html'], + ['../foo', '/foo.html', '/a/'], + ['../foo', '/foo.html', '/a/index.html'], + ['../foo', '/foo.html', '/a/b.html'], + ['../foo.md', '/foo.html', '/a/'], + ['../foo.md', '/foo.html', '/a/index.html'], + ['../foo.md', '/foo.html', '/a/b.html'], + ['../foo.html', '/foo.html', '/a/'], + ['../foo.html', '/foo.html', '/a/index.html'], + ['../foo.html', '/foo.html', '/a/b.html'], + ['../foo/bar', '/foo/bar.html', '/a/'], + ['../foo/bar', '/foo/bar.html', '/a/index.html'], + ['../foo/bar', '/foo/bar.html', '/a/b.html'], + ['../foo/bar.md', '/foo/bar.html', '/a/'], + ['../foo/bar.md', '/foo/bar.html', '/a/index.html'], + ['../foo/bar.md', '/foo/bar.html', '/a/b.html'], + ['../foo/bar.html', '/foo/bar.html', '/a/'], + ['../foo/bar.html', '/foo/bar.html', '/a/index.html'], + ['../foo/bar.html', '/foo/bar.html', '/a/b.html'], + + // absolute non index with current + ['/foo', '/foo.html', '/'], + ['/foo', '/foo.html', '/a.html'], + ['/foo', '/foo.html', '/index.html'], + ['/foo', '/foo.html', '/a/'], + ['/foo', '/foo.html', '/a/index.html'], + ['/foo', '/foo.html', '/a/b.html'], + ['/foo.md', '/foo.html', '/'], + ['/foo.md', '/foo.html', '/a.html'], + ['/foo.md', '/foo.html', '/index.html'], + ['/foo.md', '/foo.html', '/a/'], + ['/foo.md', '/foo.html', '/a/index.html'], + ['/foo.md', '/foo.html', '/a/b.html'], + ['/foo.html', '/foo.html', '/'], + ['/foo.html', '/foo.html', '/a.html'], + ['/foo.html', '/foo.html', '/index.html'], + ['/foo.html', '/foo.html', '/a/'], + ['/foo.html', '/foo.html', '/a/index.html'], + ['/foo.html', '/foo.html', '/a/b.html'], + ['/foo/bar', '/foo/bar.html', '/'], + ['/foo/bar', '/foo/bar.html', '/a.html'], + ['/foo/bar', '/foo/bar.html', '/index.html'], + ['/foo/bar', '/foo/bar.html', '/a/'], + ['/foo/bar', '/foo/bar.html', '/a/index.html'], + ['/foo/bar', '/foo/bar.html', '/a/b.html'], + ['/foo/bar.md', '/foo/bar.html', '/'], + ['/foo/bar.md', '/foo/bar.html', '/a.html'], + ['/foo/bar.md', '/foo/bar.html', '/index.html'], + ['/foo/bar.md', '/foo/bar.html', '/a/'], + ['/foo/bar.md', '/foo/bar.html', '/a/index.html'], + ['/foo/bar.md', '/foo/bar.html', '/a/b.html'], + ['/foo/bar.html', '/foo/bar.html', '/'], + ['/foo/bar.html', '/foo/bar.html', '/a.html'], + ['/foo/bar.html', '/foo/bar.html', '/index.html'], + ['/foo/bar.html', '/foo/bar.html', '/a/'], + ['/foo/bar.html', '/foo/bar.html', '/a/index.html'], + ['/foo/bar.html', '/foo/bar.html', '/a/b.html'], + + // only hash and query + ['', ''], // unexpected corner cases ['.md', '.html'], @@ -72,39 +185,52 @@ const testCases = [ ['/foo/.md', '/foo/.html'], ] -describe('should normalize clean paths correctly', () => - testCases.forEach(([path, expected]) => - it(`"${path}" -> "${expected}"`, () => { - expect(normalizeRoutePath(path)).toBe(expected) +describe('should normalize clean paths correctly', () => { + testCases.forEach(([path, expected, current]) => + it(`${current ? `"${current}"-` : ''}"${path}" -> "${expected}"`, () => { + expect(normalizeRoutePath(path, current)).toBe(expected) }), - )) + ) +}) -describe('should normalize paths with query correctly', () => +describe('should normalize paths with query correctly', () => { testCases - .map(([path, expected]) => [`${path}?foo=bar`, `${expected}?foo=bar`]) - .forEach(([path, expected]) => - it(`"${path}" -> "${expected}"`, () => { - expect(normalizeRoutePath(path)).toBe(expected) + .map(([path, expected, current]) => [ + `${path}?foo=bar`, + `${expected}?foo=bar`, + current, + ]) + .forEach(([path, expected, current]) => + it(`${current ? `"${current}"-` : ''}"${path}" -> "${expected}"`, () => { + expect(normalizeRoutePath(path, current)).toBe(expected) }), - )) + ) +}) -describe('should normalize paths with hash correctly', () => +describe('should normalize paths with hash correctly', () => { testCases - .map(([path, expected]) => [`${path}#foobar`, `${expected}#foobar`]) - .forEach(([path, expected]) => - it(`"${path}" -> "${expected}"`, () => { - expect(normalizeRoutePath(path)).toBe(expected) + .map(([path, expected, current]) => [ + `${path}#foobar`, + `${expected}#foobar`, + current, + ]) + .forEach(([path, expected, current]) => + it(`${current ? `"${current}"-` : ''}"${path}" -> "${expected}"`, () => { + expect(normalizeRoutePath(path, current)).toBe(expected) }), - )) + ) +}) -describe('should normalize paths with query and hash correctly', () => +describe('should normalize paths with query and hash correctly', () => { testCases - .map(([path, expected]) => [ + .map(([path, expected, current]) => [ `${path}?foo=1&bar=2#foobar`, `${expected}?foo=1&bar=2#foobar`, + current, ]) - .forEach(([path, expected]) => - it(`"${path}" -> "${expected}"`, () => { - expect(normalizeRoutePath(path)).toBe(expected) + .forEach(([path, expected, current]) => + it(`${current ? `"${current}"-` : ''}"${path}" -> "${expected}"`, () => { + expect(normalizeRoutePath(path, current)).toBe(expected) }), - )) + ) +})