Skip to content

Add Vue integration test with 1000 components #20055

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
RobinMalfait merged 3 commits into from
May 14, 2026
Merged

Add Vue integration test with 1000 components #20055

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4b251ae
add integration test with 1000 components using `@reference`
RobinMalfait May 14, 2026
fc39a89
ignore output in integration test
RobinMalfait May 14, 2026
778406d
Update integrations/vite/vue.test.ts
RobinMalfait May 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 106 additions & 2 deletions integrations/vite/vue.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { stripVTControlCharacters } from 'node:util'
import { candidate, html, json, test, ts } from '../utils'
import { candidate, css, html, json, test, ts } from '../utils'

test(
'production build',
Expand Down Expand Up @@ -73,6 +73,110 @@ test(
},
)

{
const VUE_COMPONENT_COUNT = 1_000

let vueComponentsWithReferences = Object.fromEntries(
Array.from({ length: VUE_COMPONENT_COUNT }, (_, idx) => [
`src/components/Component${idx}.vue`,
html`
<template>
<div class="content-['component-${idx}']">Component ${idx}</div>
</template>

<style>
@reference '../main.css';

.component-${idx} {
@apply text-red-500;
}
</style>
`,
]),
)

let vueComponentImports = Array.from(
{ length: VUE_COMPONENT_COUNT },
(_, idx) => `import Component${idx} from './components/Component${idx}.vue'`,
).join('\n')

let vueComponentUsages = Array.from(
{ length: VUE_COMPONENT_COUNT },
(_, idx) => `<Component${idx} class="component-${idx}" />`,
).join('\n')

test(
'production build with many Vue style blocks referencing the main stylesheet',
{
fs: {
'package.json': json`
{
"type": "module",
"dependencies": {
"vue": "^3.4.37",
"tailwindcss": "workspace:^"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.1.2",
"@tailwindcss/vite": "workspace:^",
"vite": "^7"
}
}
`,
'vite.config.ts': ts`
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
plugins: [vue(), tailwindcss()],
})
`,
'index.html': html`
<!doctype html>
<html>
<body>
<div id="app"></div>
<script type="module" src="./src/main.ts"></script>
</body>
</html>
`,
'src/main.css': css`@import 'tailwindcss';`,
'src/main.ts': ts`
import { createApp } from 'vue'
import './main.css'
import App from './App.vue'

createApp(App).mount('#app')
`,
'src/App.vue': html`
<script setup>
${vueComponentImports}
</script>

<template>${vueComponentUsages}</template>
`,
...vueComponentsWithReferences,
},
},
async ({ fs, exec, expect }) => {
await exec('pnpm vite build')

let files = await fs.glob('dist/**/*.css')
expect(files).toHaveLength(1)

await fs.expectFileToContain(files[0][0], [
candidate`content-['component-0']`,
candidate`component-0`,
candidate`content-['component-99']`,
candidate`component-99`,
candidate`content-['component-999']`,
candidate`component-999`,
])
Comment thread
RobinMalfait marked this conversation as resolved.
},
)
}

test(
'error when using `@apply` without `@reference`',
{
Expand Down Expand Up @@ -132,7 +236,7 @@ test(
expect.assertions(1)

try {
await exec('pnpm vite build')
await exec('pnpm vite build', {}, { ignoreStdErr: true })
} catch (error) {
let [, message] =
/error during build:([\s\S]*?)file:/g.exec(
Expand Down
Loading