mirror of https://github.com/vuejs/vitepress
bluwy
2 weeks ago
commit
7f1052d72b
@ -0,0 +1,239 @@
|
||||
const ariaCurrent = (selector: string) =>
|
||||
page.locator(selector).getAttribute('aria-current')
|
||||
|
||||
describe('navigation accessibility', () => {
|
||||
beforeEach(async () => {
|
||||
await page.setViewportSize({ width: 1280, height: 720 })
|
||||
})
|
||||
|
||||
test('marks direct nav links to the current page', async () => {
|
||||
await goto('/')
|
||||
|
||||
expect(await ariaCurrent('.VPNavBarMenuLink[href="/"]')).toBe('page')
|
||||
|
||||
await page.setViewportSize({ width: 375, height: 667 })
|
||||
await page.locator('.VPNavBarHamburger').click()
|
||||
|
||||
expect(await ariaCurrent('.VPNavScreenMenuLink[href="/"]')).toBe('page')
|
||||
})
|
||||
|
||||
test('marks nested nav links to the current page', async () => {
|
||||
await goto('/home')
|
||||
|
||||
expect(await ariaCurrent('.VPMenuLink a[href="/home.html"]')).toBe('page')
|
||||
expect(await ariaCurrent('.VPNavBarMenuLink[href="/"]')).toBeNull()
|
||||
|
||||
await page.setViewportSize({ width: 375, height: 667 })
|
||||
await page.locator('.VPNavBarHamburger').click()
|
||||
|
||||
expect(
|
||||
await ariaCurrent('.VPNavScreenMenuGroupLink[href="/home.html"]')
|
||||
).toBe('page')
|
||||
})
|
||||
|
||||
test('does not mark broad activeMatch links as current', async () => {
|
||||
await goto('/home')
|
||||
|
||||
const sectionLink = page.locator(
|
||||
'.VPNavBarMenuLink[href="/markdown-extensions/"]'
|
||||
)
|
||||
|
||||
expect(await sectionLink.getAttribute('class')).toContain('active')
|
||||
expect(await sectionLink.getAttribute('aria-current')).toBeNull()
|
||||
})
|
||||
|
||||
test('marks only exact sidebar links, including fragments', async () => {
|
||||
const overview = '.VPSidebarItem .link[href="/sidebar-hash/"]'
|
||||
const sectionOne = '.VPSidebarItem .link[href="/sidebar-hash/#section-one"]'
|
||||
const sectionTwo = '.VPSidebarItem .link[href="/sidebar-hash/#section-two"]'
|
||||
|
||||
await goto('/sidebar-hash/')
|
||||
|
||||
// wait for hydration to replace the hash-agnostic server-rendered state
|
||||
await page.waitForFunction(
|
||||
() => document.querySelectorAll('.VPSidebarItem.is-active').length === 1
|
||||
)
|
||||
|
||||
expect(await ariaCurrent(overview)).toBe('page')
|
||||
expect(await ariaCurrent(sectionOne)).toBeNull()
|
||||
expect(await ariaCurrent(sectionTwo)).toBeNull()
|
||||
|
||||
await page.locator(sectionTwo).click()
|
||||
await page.waitForSelector(`${sectionTwo}[aria-current="page"]`)
|
||||
expect(await ariaCurrent(sectionOne)).toBeNull()
|
||||
|
||||
await page.locator(sectionOne).click()
|
||||
await page.waitForSelector(`${sectionOne}[aria-current="page"]`)
|
||||
expect(await ariaCurrent(sectionTwo)).toBeNull()
|
||||
})
|
||||
|
||||
test('nav landmarks and controls have accessible names', async () => {
|
||||
await goto('/')
|
||||
|
||||
expect(await page.locator('.VPNavBarMenu').getAttribute('aria-label')).toBe(
|
||||
'Main Navigation'
|
||||
)
|
||||
|
||||
await page.setViewportSize({ width: 375, height: 667 })
|
||||
expect(
|
||||
await page.locator('.VPNavBarHamburger').getAttribute('aria-label')
|
||||
).toBe('Menu')
|
||||
})
|
||||
|
||||
test('dropdown group is a keyboard-dismissible disclosure', async () => {
|
||||
await goto('/')
|
||||
|
||||
const button = page.locator('.VPNavBarMenuGroup').first().locator('button')
|
||||
expect(await button.getAttribute('aria-expanded')).toBe('false')
|
||||
|
||||
await button.click()
|
||||
expect(await button.getAttribute('aria-expanded')).toBe('true')
|
||||
|
||||
await page.keyboard.press('Escape')
|
||||
expect(await button.getAttribute('aria-expanded')).toBe('false')
|
||||
|
||||
// focus returned to the trigger
|
||||
expect(
|
||||
await page.evaluate(() => document.activeElement?.textContent)
|
||||
).toContain('API Reference')
|
||||
})
|
||||
|
||||
test('dropdown closes after navigating via a menu item', async () => {
|
||||
await goto('/')
|
||||
|
||||
const group = page.locator('.VPNavBarMenuGroup').first()
|
||||
await group.locator('button').click()
|
||||
await group.locator('a[href="/home.html"]').click()
|
||||
await page.waitForFunction(() => location.pathname.endsWith('/home.html'))
|
||||
|
||||
// the route watcher closes it on the post-navigation tick
|
||||
await page.waitForSelector(
|
||||
'.VPNavBarMenuGroup button[aria-expanded="false"]'
|
||||
)
|
||||
})
|
||||
|
||||
test('overflowing nav items move into the extra menu instead of clipping', async () => {
|
||||
await goto('/')
|
||||
|
||||
// everything fits at 1280, so the ⋯ menu isn't rendered at all
|
||||
expect(await page.locator('.VPNavBarExtra').count()).toBe(0)
|
||||
|
||||
// inflate the items so none of them can possibly fit
|
||||
const style = await page.addStyleTag({
|
||||
content: '.VPNavBarMenu .list > li > * { padding: 0 500px !important }'
|
||||
})
|
||||
await page.waitForSelector('.VPNavBarExtra')
|
||||
|
||||
// every control that stays in the bar remains fully within the viewport
|
||||
// (no clipped/unreachable items — the failure mode of #2842)
|
||||
expect(
|
||||
await page.evaluate(() => {
|
||||
const targets = [
|
||||
...document.querySelectorAll('.VPNavBarMenu .list > li'),
|
||||
document.querySelector('.VPNavBarSearch button'),
|
||||
document.querySelector('.VPNavBarExtra > button')
|
||||
].filter((el): el is HTMLElement => !!el)
|
||||
return targets.every((el) => {
|
||||
const rect = el.getBoundingClientRect()
|
||||
return rect.left >= -1 && rect.right <= innerWidth + 1
|
||||
})
|
||||
})
|
||||
).toBe(true)
|
||||
|
||||
// collapsed items and social links are reachable through the ⋯ menu
|
||||
// (the scoped selector targets the moved "Home" item itself — the
|
||||
// version-switcher component in the menu also links to "/")
|
||||
await page.locator('.VPNavBarExtra > button').click()
|
||||
await page.waitForSelector(
|
||||
'.VPNavBarExtra .overflow-items > .VPMenuLink a[href="/"]'
|
||||
)
|
||||
await page.waitForSelector('.VPNavBarExtra .social-links')
|
||||
|
||||
// component items render menu-native: a titled group whose links are
|
||||
// visible in place, not the screen accordion or a nested flyout
|
||||
await page.waitForSelector(
|
||||
'.VPNavBarExtra .overflow-items > .VPNavVersion .title'
|
||||
)
|
||||
expect(
|
||||
await page.locator('.VPNavBarExtra .VPNavScreenMenuGroup').count()
|
||||
).toBe(0)
|
||||
|
||||
// widening back restores the inline items and removes the ⋯ menu
|
||||
await style.evaluate((el) => (el as HTMLStyleElement).remove())
|
||||
await page.waitForSelector('.VPNavBarExtra', { state: 'detached' })
|
||||
await page.waitForSelector('.VPNavBarMenuLink[href="/"]')
|
||||
})
|
||||
|
||||
test('nav screen manages focus and inert state', async () => {
|
||||
await page.setViewportSize({ width: 375, height: 667 })
|
||||
await goto('/')
|
||||
|
||||
const hamburger = page.locator('.VPNavBarHamburger')
|
||||
expect(await hamburger.getAttribute('aria-expanded')).toBe('false')
|
||||
|
||||
await hamburger.click()
|
||||
await page.waitForSelector('#VPNavScreen')
|
||||
expect(await hamburger.getAttribute('aria-expanded')).toBe('true')
|
||||
|
||||
// the covered page content is inert while the screen is open
|
||||
expect(
|
||||
await page.evaluate(() =>
|
||||
document.getElementById('VPContent')!.hasAttribute('inert')
|
||||
)
|
||||
).toBe(true)
|
||||
|
||||
await page.keyboard.press('Escape')
|
||||
await page.waitForSelector('#VPNavScreen', { state: 'detached' })
|
||||
|
||||
expect(
|
||||
await page.evaluate(() =>
|
||||
document.getElementById('VPContent')!.hasAttribute('inert')
|
||||
)
|
||||
).toBe(false)
|
||||
|
||||
// focus returned to the hamburger
|
||||
expect(
|
||||
await page.evaluate(() => document.activeElement?.className)
|
||||
).toContain('VPNavBarHamburger')
|
||||
})
|
||||
|
||||
test('screen menu group is a real disclosure', async () => {
|
||||
await page.setViewportSize({ width: 375, height: 667 })
|
||||
await goto('/')
|
||||
await page.locator('.VPNavBarHamburger').click()
|
||||
|
||||
const group = page.locator('.VPNavScreenMenuGroup').first()
|
||||
const button = group.locator('button').first()
|
||||
|
||||
expect(await button.getAttribute('aria-expanded')).toBe('false')
|
||||
// collapsed content is hidden from view and the tab order
|
||||
expect(await group.locator('a[href="/home.html"]').isVisible()).toBe(false)
|
||||
|
||||
await button.click()
|
||||
expect(await button.getAttribute('aria-expanded')).toBe('true')
|
||||
await page.waitForSelector('.VPNavScreenMenuGroup a[href="/home.html"]')
|
||||
|
||||
// aria-controls points at the panel it toggles
|
||||
const controls = await button.getAttribute('aria-controls')
|
||||
expect(await group.locator(`ul[id="${controls}"]`).count()).toBe(1)
|
||||
})
|
||||
|
||||
test.runIf(process.env.VITE_TEST_BUILD)(
|
||||
'omits aria-current for fragment links in server-rendered HTML',
|
||||
async () => {
|
||||
const response = await page.request.get(
|
||||
`http://localhost:${process.env['PORT']}/sidebar-hash/`
|
||||
)
|
||||
const anchors = (
|
||||
(await response.text()).match(/<a\b[^>]*>/g) ?? []
|
||||
).filter((anchor) => anchor.includes('/sidebar-hash/'))
|
||||
|
||||
expect(
|
||||
anchors.filter((anchor) => anchor.includes('#section-')).length
|
||||
).toBeGreaterThanOrEqual(2)
|
||||
expect(
|
||||
anchors.filter((anchor) => anchor.includes('aria-current'))
|
||||
).toEqual([expect.stringContaining('href="/sidebar-hash/"')])
|
||||
}
|
||||
)
|
||||
})
|
||||
|
After Width: | Height: | Size: 258 B |
|
After Width: | Height: | Size: 221 B |
|
After Width: | Height: | Size: 283 B |
@ -0,0 +1,11 @@
|
||||
# Sidebar Hash
|
||||
|
||||
A page whose sidebar entries point at fragments of the same page.
|
||||
|
||||
## Section One
|
||||
|
||||
Content for the first section.
|
||||
|
||||
## Section Two
|
||||
|
||||
Content for the second section.
|
||||
@ -0,0 +1,36 @@
|
||||
describe('sidebar', () => {
|
||||
beforeAll(async () => {
|
||||
await goto('/frontmatter/multiple-levels-outline')
|
||||
})
|
||||
|
||||
test('collapsible group renders a heading and a single toggle button', async () => {
|
||||
const group = page.locator('.VPSidebarItem.level-0.collapsible').first()
|
||||
const caret = group.locator('.caret').first()
|
||||
|
||||
expect(await page.locator('.VPSidebarItem [role="button"]').count()).toBe(0)
|
||||
expect(await caret.evaluate((el) => el.tagName)).toBe('BUTTON')
|
||||
expect(await caret.getAttribute('aria-expanded')).toBe('true')
|
||||
})
|
||||
|
||||
test('group toggles with keyboard, caret and heading', async () => {
|
||||
const group = page.locator('.VPSidebarItem.level-0.collapsible').first()
|
||||
const caret = group.locator('.caret').first()
|
||||
const isCollapsed = () =>
|
||||
group.evaluate((el) => el.classList.contains('collapsed'))
|
||||
|
||||
await caret.focus()
|
||||
await page.keyboard.press('Enter')
|
||||
expect(await isCollapsed()).toBe(true)
|
||||
expect(await caret.getAttribute('aria-expanded')).toBe('false')
|
||||
|
||||
await page.keyboard.press('Space')
|
||||
expect(await isCollapsed()).toBe(false)
|
||||
expect(await caret.getAttribute('aria-expanded')).toBe('true')
|
||||
|
||||
await caret.click()
|
||||
expect(await isCollapsed()).toBe(true)
|
||||
|
||||
await group.locator('.text').first().click()
|
||||
expect(await isCollapsed()).toBe(false)
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,89 @@
|
||||
import type { DefaultTheme } from 'vitepress/theme'
|
||||
|
||||
export const members: DefaultTheme.TeamMember[] = [
|
||||
{
|
||||
// smaller than the rendered avatar, checks that it still fills the circle
|
||||
avatar: '/team-avatar-small.svg',
|
||||
name: 'Alice Example',
|
||||
title: 'Creator',
|
||||
org: 'Example Org',
|
||||
orgLink: 'https://example.com',
|
||||
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://example.com' },
|
||||
{ icon: 'x', link: 'https://example.com' }
|
||||
],
|
||||
sponsor: 'https://example.com'
|
||||
},
|
||||
{
|
||||
// non-square, checks object-fit (side stripes must stay cropped out)
|
||||
avatar: '/team-avatar-wide.svg',
|
||||
name: 'Bob Example',
|
||||
title: 'Maintainer',
|
||||
links: [{ icon: 'github', link: 'https://example.com' }]
|
||||
},
|
||||
{
|
||||
avatar: '/team-avatar-small.svg',
|
||||
name: 'Carol Example',
|
||||
title: 'Partner'
|
||||
}
|
||||
]
|
||||
|
||||
export const partners: DefaultTheme.TeamMember[] = [
|
||||
{
|
||||
avatar: '/team-avatar-wide.svg',
|
||||
name: 'Dave Example',
|
||||
title: 'Partner',
|
||||
links: [{ icon: 'github', link: 'https://example.com' }]
|
||||
},
|
||||
{
|
||||
avatar: '/team-avatar-small.svg',
|
||||
name: 'Eve Example',
|
||||
title: 'Partner'
|
||||
},
|
||||
{
|
||||
avatar: '/team-avatar-wide.svg',
|
||||
name: 'Frank Example',
|
||||
title: 'Partner'
|
||||
}
|
||||
]
|
||||
|
||||
interface Sponsor {
|
||||
name: string
|
||||
img: string
|
||||
url: string
|
||||
}
|
||||
|
||||
const sponsor = (name: string): Sponsor => ({
|
||||
name,
|
||||
img: '/sponsor-logo.svg',
|
||||
url: 'https://example.com'
|
||||
})
|
||||
|
||||
export const sponsors: {
|
||||
tier: string
|
||||
size?: 'medium' | 'big'
|
||||
items: Sponsor[]
|
||||
}[] = [
|
||||
{
|
||||
tier: 'Platinum Sponsors',
|
||||
size: 'big',
|
||||
items: [sponsor('Sponsor One'), sponsor('Sponsor Two')]
|
||||
},
|
||||
{
|
||||
tier: 'Gold Sponsors',
|
||||
size: 'medium',
|
||||
items: [
|
||||
sponsor('Sponsor Three'),
|
||||
sponsor('Sponsor Four'),
|
||||
sponsor('Sponsor Five'),
|
||||
sponsor('Sponsor Six')
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export const friends: Sponsor[] = [
|
||||
sponsor('Friend One'),
|
||||
sponsor('Friend Two'),
|
||||
sponsor('Friend Three')
|
||||
]
|
||||
@ -0,0 +1,3 @@
|
||||
# Team & Sponsors in Doc Layout
|
||||
|
||||
<!--@include: ./parts/doc-page-body.md-->
|
||||
@ -0,0 +1,30 @@
|
||||
---
|
||||
layout: home
|
||||
title: Team & Sponsors in Home Layout (no markdown styles)
|
||||
markdownStyles: false
|
||||
|
||||
hero:
|
||||
name: Team & Sponsors
|
||||
text: Home layout without markdown styles
|
||||
tagline: Reference rendering of the components
|
||||
actions:
|
||||
- theme: brand
|
||||
text: Doc Layout
|
||||
link: ./doc
|
||||
image:
|
||||
src: /vitepress.png
|
||||
alt: VitePress
|
||||
|
||||
features:
|
||||
- icon: 📝
|
||||
title: Feature A
|
||||
details: Some details about feature A.
|
||||
- icon: ⚡
|
||||
title: Feature B
|
||||
details: Some details about feature B.
|
||||
- icon: 🚀
|
||||
title: Feature C
|
||||
details: Some details about feature C.
|
||||
---
|
||||
|
||||
<!--@include: ./parts/home-body.md-->
|
||||
@ -0,0 +1,29 @@
|
||||
---
|
||||
layout: home
|
||||
title: Team & Sponsors in Home Layout
|
||||
|
||||
hero:
|
||||
name: Team & Sponsors
|
||||
text: Home layout with markdown styles
|
||||
tagline: Compare with the no-markdown-styles variant
|
||||
actions:
|
||||
- theme: brand
|
||||
text: Doc Layout
|
||||
link: ./doc
|
||||
image:
|
||||
src: /vitepress.png
|
||||
alt: VitePress
|
||||
|
||||
features:
|
||||
- icon: 📝
|
||||
title: Feature A
|
||||
details: Some details about feature A.
|
||||
- icon: ⚡
|
||||
title: Feature B
|
||||
details: Some details about feature B.
|
||||
- icon: 🚀
|
||||
title: Feature C
|
||||
details: Some details about feature C.
|
||||
---
|
||||
|
||||
<!--@include: ./parts/home-body.md-->
|
||||
@ -0,0 +1,8 @@
|
||||
---
|
||||
layout: page
|
||||
title: Team & Sponsors in Page Layout
|
||||
---
|
||||
|
||||
# Team & Sponsors in Page Layout
|
||||
|
||||
<!--@include: ./parts/doc-page-body.md-->
|
||||
@ -0,0 +1,42 @@
|
||||
<script setup>
|
||||
import { VPTeamMembers, VPSponsors } from 'vitepress/theme'
|
||||
import { members, friends, sponsors } from './data'
|
||||
</script>
|
||||
|
||||
Regular paragraph with a [link](https://example.com) and `inline code`.
|
||||
|
||||
## Small, One Member
|
||||
|
||||
<VPTeamMembers size="small" :members="members.slice(0, 1)" />
|
||||
|
||||
## Small, Two Members
|
||||
|
||||
<VPTeamMembers size="small" :members="members.slice(0, 2)" />
|
||||
|
||||
## Small, Three Members
|
||||
|
||||
<VPTeamMembers size="small" :members />
|
||||
|
||||
## Medium, One Member
|
||||
|
||||
<VPTeamMembers size="medium" :members="members.slice(0, 1)" />
|
||||
|
||||
## Medium, Two Members
|
||||
|
||||
<VPTeamMembers size="medium" :members="members.slice(0, 2)" />
|
||||
|
||||
## Medium, Three Members
|
||||
|
||||
<VPTeamMembers size="medium" :members />
|
||||
|
||||
## Sponsors, Tiered
|
||||
|
||||
<VPSponsors :data="sponsors" />
|
||||
|
||||
## Sponsors, Single Tier
|
||||
|
||||
<VPSponsors tier="Friends" size="mini" :data="friends" />
|
||||
|
||||
## After Components
|
||||
|
||||
Trailing markdown content after the components.
|
||||
@ -0,0 +1,47 @@
|
||||
<script setup>
|
||||
import {
|
||||
VPTeamPage,
|
||||
VPTeamPageTitle,
|
||||
VPTeamPageSection,
|
||||
VPTeamMembers,
|
||||
VPHomeSponsors
|
||||
} from 'vitepress/theme'
|
||||
import { members, partners, sponsors } from './data'
|
||||
</script>
|
||||
|
||||
## Markdown Section
|
||||
|
||||
Some paragraph text with a [link](https://example.com) and `inline code` to
|
||||
verify how markdown content is styled in this variant.
|
||||
|
||||
- List item one
|
||||
- List item two
|
||||
|
||||
<VPTeamPage>
|
||||
<VPTeamPageTitle>
|
||||
<template #title>Our Team</template>
|
||||
<template #lead>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
tempor incididunt.
|
||||
</template>
|
||||
</VPTeamPageTitle>
|
||||
<VPTeamMembers :members="members.slice(0, 2)" />
|
||||
<VPTeamPageSection>
|
||||
<template #title>Partners</template>
|
||||
<template #lead>Lorem ipsum dolor sit amet.</template>
|
||||
<template #members>
|
||||
<VPTeamMembers size="small" :members="partners" />
|
||||
</template>
|
||||
</VPTeamPageSection>
|
||||
</VPTeamPage>
|
||||
|
||||
<VPHomeSponsors
|
||||
message="Made possible by our generous sponsors"
|
||||
:data="sponsors"
|
||||
action-text="Become a sponsor"
|
||||
action-link="https://example.com"
|
||||
/>
|
||||
|
||||
## After Components
|
||||
|
||||
Trailing markdown content after the components.
|
||||
@ -0,0 +1,135 @@
|
||||
import {
|
||||
computeNavFit,
|
||||
type NavFitInput
|
||||
} from 'client/theme-default/composables/nav-overflow'
|
||||
|
||||
function fit(input: Partial<NavFitInput>) {
|
||||
return computeNavFit({
|
||||
itemWidths: [],
|
||||
translations: null,
|
||||
appearance: null,
|
||||
socialLinks: null,
|
||||
available: 0,
|
||||
extraWidth: 40,
|
||||
...input
|
||||
})
|
||||
}
|
||||
|
||||
describe('client/theme-default/composables/nav-overflow', () => {
|
||||
describe('computeNavFit', () => {
|
||||
test('keeps everything when it fits', () => {
|
||||
expect(
|
||||
fit({
|
||||
itemWidths: [100, 100],
|
||||
translations: 50,
|
||||
appearance: 60,
|
||||
socialLinks: 90,
|
||||
available: 400
|
||||
})
|
||||
).toEqual({
|
||||
visibleItemCount: Infinity,
|
||||
translations: true,
|
||||
appearance: true,
|
||||
socialLinks: true
|
||||
})
|
||||
})
|
||||
|
||||
test('collapses social links first', () => {
|
||||
expect(
|
||||
fit({
|
||||
itemWidths: [100, 100],
|
||||
translations: 50,
|
||||
appearance: 60,
|
||||
socialLinks: 90,
|
||||
available: 390
|
||||
})
|
||||
).toEqual({
|
||||
visibleItemCount: Infinity,
|
||||
translations: true,
|
||||
appearance: true,
|
||||
socialLinks: false
|
||||
})
|
||||
})
|
||||
|
||||
test('collapses the cluster cascade in order', () => {
|
||||
// items (200) + translations (50) fit in the 260 budget after
|
||||
// reserving the extra button, appearance (60) does not — social links
|
||||
// must follow appearance out even though they'd fit alone
|
||||
expect(
|
||||
fit({
|
||||
itemWidths: [100, 100],
|
||||
translations: 50,
|
||||
appearance: 60,
|
||||
socialLinks: 5,
|
||||
available: 300
|
||||
})
|
||||
).toEqual({
|
||||
visibleItemCount: Infinity,
|
||||
translations: true,
|
||||
appearance: false,
|
||||
socialLinks: false
|
||||
})
|
||||
})
|
||||
|
||||
test('collapses menu items right-to-left after the cluster', () => {
|
||||
expect(
|
||||
fit({
|
||||
itemWidths: [100, 100, 100],
|
||||
translations: 50,
|
||||
available: 250
|
||||
})
|
||||
).toEqual({
|
||||
visibleItemCount: 2,
|
||||
translations: false,
|
||||
appearance: true,
|
||||
socialLinks: true
|
||||
})
|
||||
})
|
||||
|
||||
test('ignores unconfigured cluster units', () => {
|
||||
expect(
|
||||
fit({
|
||||
itemWidths: [100],
|
||||
socialLinks: 90,
|
||||
available: 150
|
||||
})
|
||||
).toEqual({
|
||||
visibleItemCount: Infinity,
|
||||
translations: true,
|
||||
appearance: true,
|
||||
socialLinks: false
|
||||
})
|
||||
})
|
||||
|
||||
test('collapses everything when nothing fits', () => {
|
||||
expect(
|
||||
fit({
|
||||
itemWidths: [100, 100],
|
||||
translations: 50,
|
||||
available: 30
|
||||
})
|
||||
).toEqual({
|
||||
visibleItemCount: 0,
|
||||
translations: false,
|
||||
// unconfigured units just stay "not collapsed"
|
||||
appearance: true,
|
||||
socialLinks: true
|
||||
})
|
||||
})
|
||||
|
||||
test('a lone overwide item still collapses instead of clipping', () => {
|
||||
expect(fit({ itemWidths: [500], available: 400 }).visibleItemCount).toBe(
|
||||
0
|
||||
)
|
||||
})
|
||||
|
||||
test('handles an empty nav', () => {
|
||||
expect(fit({ socialLinks: 90, appearance: 60, available: 80 })).toEqual({
|
||||
visibleItemCount: Infinity,
|
||||
translations: true,
|
||||
appearance: false,
|
||||
socialLinks: false
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,56 @@
|
||||
import { mergeHead, type HeadConfig } from 'shared/shared'
|
||||
|
||||
describe('shared/shared', () => {
|
||||
describe('mergeHead', () => {
|
||||
test('replaces meta tags with the same key in place', () => {
|
||||
expect(
|
||||
mergeHead(
|
||||
[
|
||||
['meta', { property: 'og:image', content: '/site.png' }],
|
||||
['meta', { name: 'keywords', content: 'site' }]
|
||||
],
|
||||
[['meta', { content: '/page.png', property: 'og:image' }]]
|
||||
)
|
||||
).toEqual([
|
||||
['meta', { content: '/page.png', property: 'og:image' }],
|
||||
['meta', { name: 'keywords', content: 'site' }]
|
||||
])
|
||||
})
|
||||
|
||||
test('ignores content when keying meta tags', () => {
|
||||
const head: HeadConfig[] = [
|
||||
['meta', { content: 'a', name: 'name1' }],
|
||||
['meta', { content: 'a', name: 'name2' }]
|
||||
]
|
||||
expect(mergeHead(head)).toEqual(head)
|
||||
})
|
||||
|
||||
test('keys any element by id regardless of attribute order', () => {
|
||||
expect(
|
||||
mergeHead(
|
||||
[
|
||||
['meta', { name: 'author', content: 'a', id: 'author-a' }],
|
||||
['meta', { name: 'author', content: 'b', id: 'author-b' }],
|
||||
['script', { id: 'sw' }, 'old']
|
||||
],
|
||||
[
|
||||
['meta', { id: 'author-a', name: 'author', content: 'c' }],
|
||||
['script', { id: 'sw' }, 'new']
|
||||
]
|
||||
)
|
||||
).toEqual([
|
||||
['meta', { id: 'author-a', name: 'author', content: 'c' }],
|
||||
['meta', { name: 'author', content: 'b', id: 'author-b' }],
|
||||
['script', { id: 'sw' }, 'new']
|
||||
])
|
||||
})
|
||||
|
||||
test('appends elements without a key', () => {
|
||||
const head: HeadConfig[] = [
|
||||
['link', { rel: 'stylesheet', href: '/a.css' }],
|
||||
['link', { rel: 'stylesheet', href: '/a.css' }]
|
||||
]
|
||||
expect(mergeHead(head, head)).toEqual([...head, ...head])
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,18 @@
|
||||
diff --git a/dist/rolldown.mjs b/dist/rolldown.mjs
|
||||
index 7e04d96c703656b81220193b1f01426778b6a42f..26e96378fc0ad985237302e673ed0ab07674bf41 100644
|
||||
--- a/dist/rolldown.mjs
|
||||
+++ b/dist/rolldown.mjs
|
||||
@@ -196,10 +196,11 @@ function resolveCache(options) {
|
||||
async function transpileScript(code, filename = "__sfc.ts") {
|
||||
const result = await transform(filename, code, {
|
||||
lang: "ts",
|
||||
- sourcemap: false
|
||||
+ sourcemap: false,
|
||||
+ typescript: { onlyRemoveTypeImports: true }
|
||||
});
|
||||
if (result.errors.length) throw new AggregateError(result.errors, `[vue-sfc-transformer] failed to transpile script in ${filename}`);
|
||||
- return result.code ?? code;
|
||||
+ return (result.code ?? code).replace(/\n?export \{\};?[\s\n]*$/, "");
|
||||
}
|
||||
function vueSfcPlugin(pluginOptions) {
|
||||
const cwd = pluginOptions.cwd ?? process.cwd();
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,115 +0,0 @@
|
||||
import alias from '@rollup/plugin-alias'
|
||||
import commonjs from '@rollup/plugin-commonjs'
|
||||
import json from '@rollup/plugin-json'
|
||||
import { nodeResolve } from '@rollup/plugin-node-resolve'
|
||||
import replace from '@rollup/plugin-replace'
|
||||
import { rm } from 'node:fs/promises'
|
||||
import { builtinModules, createRequire } from 'node:module'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { type RollupOptions, defineConfig } from 'rollup'
|
||||
import dts from 'rollup-plugin-dts'
|
||||
import esbuild from 'rollup-plugin-esbuild'
|
||||
|
||||
const require = createRequire(import.meta.url)
|
||||
const pkg = require('./package.json')
|
||||
|
||||
const DEV = !!process.env.DEV
|
||||
const PROD = !DEV
|
||||
|
||||
const external = [
|
||||
...Object.keys(pkg.dependencies),
|
||||
...Object.keys(pkg.peerDependencies),
|
||||
...builtinModules.flatMap((m) =>
|
||||
m.includes('punycode') ? [] : [m, `node:${m}`]
|
||||
)
|
||||
]
|
||||
|
||||
const plugins = [
|
||||
alias({ entries: { 'readable-stream': 'stream' } }),
|
||||
replace({
|
||||
// polyfill broken browser check from bundled deps
|
||||
'navigator.userAgentData': 'undefined',
|
||||
'navigator.userAgent': 'undefined',
|
||||
preventAssignment: true
|
||||
}),
|
||||
commonjs(),
|
||||
nodeResolve({ preferBuiltins: false }),
|
||||
esbuild({ target: 'node22' }),
|
||||
json()
|
||||
]
|
||||
|
||||
const esmBuild: RollupOptions = {
|
||||
input: ['src/node/index.ts', 'src/node/cli.ts'],
|
||||
output: {
|
||||
format: 'esm',
|
||||
entryFileNames: `[name].js`,
|
||||
chunkFileNames: 'chunk-[hash].js',
|
||||
dir: 'dist/node',
|
||||
sourcemap: DEV
|
||||
},
|
||||
external,
|
||||
plugins,
|
||||
onwarn(warning, warn) {
|
||||
if (warning.code !== 'EVAL') warn(warning)
|
||||
}
|
||||
}
|
||||
|
||||
// keep .d.ts files under the repo root (e.g. types/*) external so module
|
||||
// augmentations in the bundle still target the same files users reference.
|
||||
// compared on normalized resolved paths so this works regardless of the
|
||||
// checkout location, path separators, or drive-letter casing.
|
||||
const normalizePath = (id: string): string => {
|
||||
const normalized = id.replaceAll('\\', '/')
|
||||
return process.platform === 'win32' ? normalized.toLowerCase() : normalized
|
||||
}
|
||||
|
||||
const root = normalizePath(fileURLToPath(new URL('.', import.meta.url)))
|
||||
|
||||
const typesExternal = (id: string): boolean => {
|
||||
if (external.includes(id) || /^markdown-it(?:\/|$)/.test(id)) return true
|
||||
const normalized = normalizePath(id)
|
||||
return (
|
||||
normalized.endsWith('.d.ts') &&
|
||||
normalized.startsWith(root) &&
|
||||
!normalized.startsWith(`${root}dist/`) &&
|
||||
!normalized.startsWith(`${root}node_modules/`)
|
||||
)
|
||||
}
|
||||
|
||||
const dtsNode = dts({
|
||||
respectExternal: true,
|
||||
tsconfig: 'src/node/tsconfig.json',
|
||||
compilerOptions: { preserveSymlinks: false }
|
||||
})
|
||||
|
||||
const nodeTypes: RollupOptions = {
|
||||
input: 'src/node/index.ts',
|
||||
output: {
|
||||
format: 'esm',
|
||||
file: 'dist/node/index.d.ts'
|
||||
},
|
||||
external: typesExternal,
|
||||
plugins: [dtsNode]
|
||||
}
|
||||
|
||||
const clientTypes: RollupOptions = {
|
||||
input: 'dist/client-types/index.d.ts',
|
||||
output: {
|
||||
format: 'esm',
|
||||
file: 'dist/client/index.d.ts'
|
||||
},
|
||||
external: typesExternal,
|
||||
plugins: [
|
||||
dts({ respectExternal: true }),
|
||||
{
|
||||
name: 'cleanup',
|
||||
async closeBundle() {
|
||||
if (PROD) {
|
||||
await rm('dist/client-types', { recursive: true })
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default defineConfig([esmBuild, nodeTypes, clientTypes])
|
||||
@ -1,11 +0,0 @@
|
||||
import { cp } from 'node:fs/promises'
|
||||
import { globSync } from 'tinyglobby'
|
||||
|
||||
function toDest(file: string) {
|
||||
return file.replace(/^src\//, 'dist/')
|
||||
}
|
||||
|
||||
globSync(['src/client/**']).forEach((file) => {
|
||||
if (/(\.ts|tsconfig\.json)$/.test(file)) return
|
||||
cp(file, toDest(file))
|
||||
})
|
||||
@ -1,9 +0,0 @@
|
||||
import { cp } from 'node:fs/promises'
|
||||
import { globSync } from 'tinyglobby'
|
||||
|
||||
globSync(['src/shared/**/*.ts']).forEach(async (file) => {
|
||||
await Promise.all([
|
||||
cp(file, file.replace(/^src\/shared\//, 'src/node/')),
|
||||
cp(file, file.replace(/^src\/shared\//, 'src/client/'))
|
||||
])
|
||||
})
|
||||
@ -1,37 +0,0 @@
|
||||
import { watch } from 'chokidar'
|
||||
import { cp, rm } from 'node:fs/promises'
|
||||
import { normalizePath } from 'vite'
|
||||
|
||||
function toClientAndNode(method: 'copy' | 'remove', file: string) {
|
||||
file = normalizePath(file)
|
||||
if (method === 'copy') {
|
||||
cp(file, file.replace(/^src\/shared\//, 'src/node/'))
|
||||
cp(file, file.replace(/^src\/shared\//, 'src/client/'))
|
||||
} else if (method === 'remove') {
|
||||
rm(file.replace(/^src\/shared\//, 'src/node/'), { force: true })
|
||||
rm(file.replace(/^src\/shared\//, 'src/client/'), { force: true })
|
||||
}
|
||||
}
|
||||
|
||||
function toDist(file: string) {
|
||||
return normalizePath(file).replace(/^src\//, 'dist/')
|
||||
}
|
||||
|
||||
// copy shared files to the client and node directory whenever they change.
|
||||
watch('src/shared', {
|
||||
ignored: (path, stats) => !!stats?.isFile() && !path.endsWith('.ts')
|
||||
})
|
||||
.on('change', (file) => toClientAndNode('copy', file))
|
||||
.on('add', (file) => toClientAndNode('copy', file))
|
||||
.on('unlink', (file) => toClientAndNode('remove', file))
|
||||
|
||||
// copy non ts files, such as an html or css, to the dist directory whenever
|
||||
// they change.
|
||||
watch('src/client', {
|
||||
ignored: (path, stats) =>
|
||||
!!stats?.isFile() &&
|
||||
(path.endsWith('.ts') || path.endsWith('tsconfig.json'))
|
||||
})
|
||||
.on('change', (file) => cp(file, toDist(file)))
|
||||
.on('add', (file) => cp(file, toDist(file)))
|
||||
.on('unlink', (file) => rm(toDist(file), { force: true }))
|
||||
@ -0,0 +1,13 @@
|
||||
// Cross-environment globals that environment-neutral code may use, declared
|
||||
// merge-compatibly with lib.dom and @types/node (interface merging plus an
|
||||
// identically named var). Loaded only by projects without a DOM lib; keep
|
||||
// members to what shared code actually touches.
|
||||
|
||||
interface Console {
|
||||
debug(...data: unknown[]): void
|
||||
warn(...data: unknown[]): void
|
||||
}
|
||||
declare var console: Console
|
||||
|
||||
interface Document {}
|
||||
declare var document: Document
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue