mirror of https://github.com/vuejs/vitepress
Achord Chan
5 days ago
commit
c87875acb2
@ -0,0 +1,21 @@
|
||||
<script lang="ts">
|
||||
if (typeof window === 'undefined') {
|
||||
throw new Error('This component can only be imported in the browser')
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{ message?: string }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="client-component">
|
||||
<header>
|
||||
<slot name="header" :message="message || 'scoped value'">
|
||||
header fallback
|
||||
</slot>
|
||||
</header>
|
||||
<div class="default-slot"><slot>default fallback</slot></div>
|
||||
<footer><slot name="footer" /></footer>
|
||||
</section>
|
||||
</template>
|
||||
@ -0,0 +1,78 @@
|
||||
describe('client components', () => {
|
||||
beforeEach(async () => {
|
||||
await goto('/client-component/')
|
||||
await page.waitForSelector('#forwarded.client-component')
|
||||
})
|
||||
|
||||
test('forwards default and scoped slots and keeps them reactive', async () => {
|
||||
const header = page.locator('#forwarded header')
|
||||
const content = page.locator('#forwarded .default-slot')
|
||||
|
||||
expect(await header.textContent()).toBe('scoped value 0')
|
||||
expect((await content.textContent())?.trim()).toBe('default content 0')
|
||||
expect(await page.locator('#forwarded footer').textContent()).toBe('')
|
||||
|
||||
await page.locator('#increment').click()
|
||||
|
||||
await expect.poll(() => header.textContent()).toBe('scoped value 1')
|
||||
expect((await content.textContent())?.trim()).toBe('default content 1')
|
||||
expect(await page.locator('#forwarded footer').textContent()).toBe(
|
||||
'conditional slot'
|
||||
)
|
||||
|
||||
await page.locator('#increment').click()
|
||||
|
||||
await expect.poll(() => header.textContent()).toBe('scoped value 2')
|
||||
expect(await page.locator('#forwarded footer').textContent()).toBe('')
|
||||
})
|
||||
|
||||
test('forwards slots when args only provide props', async () => {
|
||||
expect(await page.locator('#with-props header').textContent()).toBe(
|
||||
'from args'
|
||||
)
|
||||
expect(
|
||||
(await page.locator('#with-props .default-slot').textContent())?.trim()
|
||||
).toBe('content with props')
|
||||
expect(await page.locator('#empty-args .default-slot').textContent()).toBe(
|
||||
'content with empty args'
|
||||
)
|
||||
expect(await page.locator('#null-props .default-slot').textContent()).toBe(
|
||||
'content with null props'
|
||||
)
|
||||
})
|
||||
|
||||
test('preserves explicitly provided slots and shorthand children', async () => {
|
||||
expect(await page.locator('#explicit header').textContent()).toBe(
|
||||
'explicit header'
|
||||
)
|
||||
expect(await page.locator('#explicit .default-slot').textContent()).toBe(
|
||||
'explicit default'
|
||||
)
|
||||
|
||||
for (const [id, content] of [
|
||||
['string', 'string child'],
|
||||
['array', 'array child'],
|
||||
['vnode', 'vnode child'],
|
||||
['function', 'function child'],
|
||||
['number', '42'],
|
||||
['null', 'default fallback'],
|
||||
['undefined', 'default fallback'],
|
||||
['multiple', 'firstsecond']
|
||||
]) {
|
||||
expect(
|
||||
await page.locator(`#legacy-${id} .default-slot`).textContent()
|
||||
).toBe(content)
|
||||
}
|
||||
})
|
||||
|
||||
test.runIf(!!process.env.VITE_TEST_BUILD)(
|
||||
'does not render the component or its slots on the server',
|
||||
async () => {
|
||||
const response = await page.request.get(page.url())
|
||||
const html = await response.text()
|
||||
|
||||
expect(html).not.toContain('class="client-component"')
|
||||
expect(html).not.toContain('default content 0')
|
||||
}
|
||||
)
|
||||
})
|
||||
@ -0,0 +1,57 @@
|
||||
<script setup>
|
||||
import { h, ref } from 'vue'
|
||||
import { defineClientComponent } from 'vitepress'
|
||||
|
||||
const load = () => import('./Slots.vue')
|
||||
const ClientComponent = defineClientComponent(load)
|
||||
const WithProps = defineClientComponent(load, [{ message: 'from args' }])
|
||||
const WithEmptyArgs = defineClientComponent(load, [])
|
||||
const WithNullProps = defineClientComponent(load, [null])
|
||||
const WithExplicitSlots = defineClientComponent(load, [null, {
|
||||
default: () => 'explicit default',
|
||||
header: () => 'explicit header'
|
||||
}])
|
||||
const legacyChildren = [
|
||||
['string', ['string child']],
|
||||
['array', [[h('span', 'array child')]]],
|
||||
['vnode', [h('span', 'vnode child')]],
|
||||
['function', [() => 'function child']],
|
||||
['number', [42]],
|
||||
['null', [null, null]],
|
||||
['undefined', [null, undefined]],
|
||||
['multiple', [null, 'first', 'second']]
|
||||
].map(([id, args]) => ({ id, component: defineClientComponent(load, args) }))
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
# Client Components
|
||||
|
||||
<button id="increment" @click="count++">Increment</button>
|
||||
|
||||
<ClientComponent id="forwarded">
|
||||
<template #header="{ message }">{{ message }} {{ count }}</template>
|
||||
<template v-if="count % 2" #footer>conditional slot</template>
|
||||
default content {{ count }}
|
||||
</ClientComponent>
|
||||
|
||||
<WithProps id="with-props">
|
||||
<template #header="{ message }">{{ message }}</template>
|
||||
content with props
|
||||
</WithProps>
|
||||
|
||||
<WithEmptyArgs id="empty-args">content with empty args</WithEmptyArgs>
|
||||
|
||||
<WithNullProps id="null-props">content with null props</WithNullProps>
|
||||
|
||||
<WithExplicitSlots id="explicit">
|
||||
<template #header>ignored header</template>
|
||||
ignored default
|
||||
</WithExplicitSlots>
|
||||
|
||||
<component
|
||||
v-for="{ id, component } in legacyChildren"
|
||||
:is="component"
|
||||
:id="`legacy-${id}`"
|
||||
>
|
||||
ignored content
|
||||
</component>
|
||||
@ -0,0 +1,38 @@
|
||||
describe('themeable image alt overrides', () => {
|
||||
beforeEach(async () => {
|
||||
await goto('/theme-image/')
|
||||
})
|
||||
|
||||
test.each(['light', 'dark'])('uses the alt prop in %s mode', async (mode) => {
|
||||
await page.evaluate((mode) => {
|
||||
document.documentElement.classList.toggle('dark', mode === 'dark')
|
||||
}, mode)
|
||||
|
||||
expect(
|
||||
await page.locator('.image-override img:visible').getAttribute('alt')
|
||||
).toBe('Override description')
|
||||
expect(
|
||||
await page.locator('.image-decorative img:visible').getAttribute('alt')
|
||||
).toBe('')
|
||||
expect(
|
||||
await page.locator('.image-fallback img:visible').getAttribute('alt')
|
||||
).toBe('Image description')
|
||||
})
|
||||
|
||||
test('updates both images when the alt prop changes', async () => {
|
||||
const descriptions = () =>
|
||||
page
|
||||
.locator('.image-override img')
|
||||
.evaluateAll((images) =>
|
||||
images.map((image) => image.getAttribute('alt'))
|
||||
)
|
||||
|
||||
await page.getByRole('button', { name: 'Update description' }).click()
|
||||
await expect
|
||||
.poll(descriptions)
|
||||
.toEqual(['Updated description', 'Updated description'])
|
||||
|
||||
await page.getByRole('button', { name: 'Clear description' }).click()
|
||||
await expect.poll(descriptions).toEqual(['', ''])
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,28 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { VPImage } from 'vitepress/theme'
|
||||
|
||||
const description = ref('Override description')
|
||||
const image = {
|
||||
light: '/pwa_light.svg',
|
||||
dark: '/pwa_dark.svg',
|
||||
alt: 'Image description'
|
||||
}
|
||||
</script>
|
||||
|
||||
# Themeable image descriptions
|
||||
|
||||
<div class="image-override">
|
||||
<VPImage :image :alt="description" />
|
||||
</div>
|
||||
|
||||
<div class="image-decorative">
|
||||
<VPImage :image alt="" />
|
||||
</div>
|
||||
|
||||
<div class="image-fallback">
|
||||
<VPImage :image />
|
||||
</div>
|
||||
|
||||
<button @click="description = 'Updated description'">Update description</button>
|
||||
<button @click="description = ''">Clear description</button>
|
||||
@ -0,0 +1,41 @@
|
||||
// @ts-expect-error the unit typecheck uses tsc; Vite compiles this SFC at runtime
|
||||
import VPImage from 'client/theme-default/components/VPImage.vue'
|
||||
import { createSSRApp } from 'vue'
|
||||
import { renderToString } from 'vue/server-renderer'
|
||||
|
||||
vi.mock('vitepress', () => ({ withBase: (path: string) => path }))
|
||||
|
||||
const images = [
|
||||
{ name: 'string', image: 'logo.svg', fallback: '', count: 1 },
|
||||
{
|
||||
name: 'single source',
|
||||
image: { src: 'logo.svg', alt: 'Image description' },
|
||||
fallback: 'Image description',
|
||||
count: 1
|
||||
},
|
||||
{
|
||||
name: 'themed sources',
|
||||
image: { light: 'light.svg', dark: 'dark.svg', alt: 'Image description' },
|
||||
fallback: 'Image description',
|
||||
count: 2
|
||||
},
|
||||
{
|
||||
name: 'themed sources without alt',
|
||||
image: { light: 'light.svg', dark: 'dark.svg' },
|
||||
fallback: '',
|
||||
count: 2
|
||||
}
|
||||
]
|
||||
|
||||
describe.each(images)('VPImage with $name', ({ image, fallback, count }) => {
|
||||
test.each(['Override description', '', undefined])(
|
||||
'respects the alt prop %j',
|
||||
async (alt) => {
|
||||
const html = await renderToString(createSSRApp(VPImage, { image, alt }))
|
||||
const descriptions = [...html.matchAll(/ alt(?:="([^"]*)")?/g)].map(
|
||||
([, value]) => value ?? ''
|
||||
)
|
||||
expect(descriptions).toEqual(Array(count).fill(alt ?? fallback))
|
||||
}
|
||||
)
|
||||
})
|
||||
@ -0,0 +1,70 @@
|
||||
import { mkdtemp, rm, writeFile } from 'node:fs/promises'
|
||||
import { tmpdir } from 'node:os'
|
||||
import path from 'node:path'
|
||||
|
||||
import { resolveConfig } from 'node/config'
|
||||
import { disposeMdItInstance } from 'node/markdown/markdown'
|
||||
import { clearCache, createMarkdownToVueRenderFn } from 'node/markdownToVue'
|
||||
|
||||
describe('node/markdownToVue cache invalidation', () => {
|
||||
let root: string
|
||||
|
||||
beforeEach(async () => {
|
||||
clearCache()
|
||||
disposeMdItInstance()
|
||||
root = await mkdtemp(path.join(tmpdir(), 'vitepress-md-cache-'))
|
||||
})
|
||||
|
||||
afterEach(async () => {
|
||||
clearCache()
|
||||
disposeMdItInstance()
|
||||
await rm(root, { recursive: true, force: true })
|
||||
})
|
||||
|
||||
test.each([
|
||||
['include', '<!-- @include: ./shared.md -->'],
|
||||
['snippet', '<<< ./shared.md{txt}']
|
||||
])(
|
||||
'invalidates every source version when its %s changes',
|
||||
async (_, importSrc) => {
|
||||
const file = path.join(root, 'page.md')
|
||||
const otherFile = path.join(root, 'other-page.md')
|
||||
const sharedFile = path.join(root, 'shared.md')
|
||||
const sources = ['First', 'Second', 'Third'].map(
|
||||
(title) => `# ${title}\n\n${importSrc}\n`
|
||||
)
|
||||
await writeFile(file, sources[0])
|
||||
await writeFile(otherFile, '# Other page')
|
||||
await writeFile(sharedFile, 'old shared content')
|
||||
|
||||
const config = await resolveConfig(root, 'serve', 'development')
|
||||
const render = await createMarkdownToVueRenderFn(
|
||||
config.srcDir,
|
||||
{ highlight: (code) => code },
|
||||
'/',
|
||||
false,
|
||||
false,
|
||||
config
|
||||
)
|
||||
|
||||
// Editing the page creates several cached versions of the same path.
|
||||
const first = await render(sources[0], file)
|
||||
expect(await render(sources[0], file)).toBe(first)
|
||||
await render(sources[1], file)
|
||||
const other = await render('# Other page', otherFile)
|
||||
await render(sources[2], file)
|
||||
|
||||
await writeFile(sharedFile, 'updated shared content')
|
||||
// The include/snippet HMR handler invalidates each importing page by path.
|
||||
clearCache('page.md')
|
||||
|
||||
// Undoing a page edit must not revive a stale version of the dependency.
|
||||
for (const src of [...sources].reverse()) {
|
||||
const result = await render(src, file)
|
||||
expect(result.vueSrc).toContain('updated shared content')
|
||||
expect(result.vueSrc).not.toContain('old shared content')
|
||||
}
|
||||
expect(await render('# Other page', otherFile)).toBe(other)
|
||||
}
|
||||
)
|
||||
})
|
||||
Loading…
Reference in new issue