mirror of https://github.com/vuejs/vitepress
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