Main.vue
-
- {{ css }}
-
- 
-
- Free Online Conference
-ViteConf - Oct 11
-Get your ticket now!
- -
-
- Free Online Conference
-ViteConf - Oct 11
-Get your ticket now!
- -
-```
-
-Is the same as:
-
-```vue
-
-
-virtual html
' + 'virtual html
', ) res.setHeader('Content-Type', 'text/html') res.statusCode = 200 @@ -55,7 +55,7 @@ module.exports = { } next() }) - } - } - ] + }, + }, + ], } diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts index e2f41d893021c3..3f058e24768c07 100644 --- a/playground/css/__tests__/css.spec.ts +++ b/playground/css/__tests__/css.spec.ts @@ -11,24 +11,26 @@ import { serverLogs, untilUpdated, viteTestUrl, - withRetry + withRetry, } from '~utils' // note: tests should retrieve the element at the beginning of test and reuse it // in later assertions to ensure CSS HMR doesn't reload the page test('imported css', async () => { - const css = await page.textContent('.imported-css') - expect(css).toMatch(/\.imported ?{/) - if (isBuild) { - expect(css.trim()).not.toContain('\n') // check minified - } - const glob = await page.textContent('.imported-css-glob') expect(glob).toContain('.dir-import') const globEager = await page.textContent('.imported-css-globEager') expect(globEager).toContain('.dir-import') }) +test('inline imported css', async () => { + const css = await page.textContent('.imported-css') + expect(css).toMatch(/\.imported ?\{/) + if (isBuild) { + expect(css.trim()).not.toContain('\n') // check minified + } +}) + test('linked css', async () => { const linked = await page.$('.linked') const atImport = await page.$('.linked-at-import') @@ -40,7 +42,7 @@ test('linked css', async () => { await untilUpdated(() => getColor(linked), 'red') editFile('linked-at-import.css', (code) => - code.replace('color: red', 'color: blue') + code.replace('color: red', 'color: blue'), ) await untilUpdated(() => getColor(atImport), 'blue') }) @@ -56,7 +58,7 @@ test('css import from js', async () => { await untilUpdated(() => getColor(imported), 'red') editFile('imported-at-import.css', (code) => - code.replace('color: purple', 'color: blue') + code.replace('color: purple', 'color: blue'), ) await untilUpdated(() => getColor(atImport), 'blue') }) @@ -64,7 +66,7 @@ test('css import from js', async () => { test('css import asset with space', async () => { const importedWithSpace = await page.$('.import-with-space') - expect(await getBg(importedWithSpace)).toMatch(/.*ok\..*png/) + expect(await getBg(importedWithSpace)).toMatch(/.*\/ok.*\.png/) }) test('postcss config', async () => { @@ -87,25 +89,25 @@ test('sass', async () => { expect(await getBg(atImport)).toMatch(isBuild ? /base64/ : '/nested/icon.png') expect(await getColor(atImportAlias)).toBe('olive') expect(await getBg(atImportAlias)).toMatch( - isBuild ? /base64/ : '/nested/icon.png' + isBuild ? /base64/ : '/nested/icon.png', ) expect(await getBg(urlStartsWithVariable)).toMatch( - isBuild ? /ok\.\w+\.png/ : `${viteTestUrl}/ok.png` + isBuild ? /ok-\w+\.png/ : `${viteTestUrl}/ok.png`, ) expect(await getColor(partialImport)).toBe('orchid') editFile('sass.scss', (code) => - code.replace('color: $injectedColor', 'color: red') + code.replace('color: $injectedColor', 'color: red'), ) await untilUpdated(() => getColor(imported), 'red') editFile('nested/_index.scss', (code) => - code.replace('color: olive', 'color: blue') + code.replace('color: olive', 'color: blue'), ) await untilUpdated(() => getColor(atImport), 'blue') editFile('nested/_partial.scss', (code) => - code.replace('color: orchid', 'color: green') + code.replace('color: orchid', 'color: green'), ) await untilUpdated(() => getColor(partialImport), 'green') }) @@ -121,17 +123,17 @@ test('less', async () => { expect(await getBg(atImport)).toMatch(isBuild ? /base64/ : '/nested/icon.png') expect(await getColor(atImportAlias)).toBe('darkslateblue') expect(await getBg(atImportAlias)).toMatch( - isBuild ? /base64/ : '/nested/icon.png' + isBuild ? /base64/ : '/nested/icon.png', ) expect(await getBg(urlStartsWithVariable)).toMatch( - isBuild ? /ok\.\w+\.png/ : `${viteTestUrl}/ok.png` + isBuild ? /ok-\w+\.png/ : `${viteTestUrl}/ok.png`, ) editFile('less.less', (code) => code.replace('@color: blue', '@color: red')) await untilUpdated(() => getColor(imported), 'red') editFile('nested/nested.less', (code) => - code.replace('color: darkslateblue', 'color: blue') + code.replace('color: darkslateblue', 'color: blue'), ) await untilUpdated(() => getColor(atImport), 'blue') }) @@ -149,18 +151,18 @@ test('stylus', async () => { expect(await getColor(relativeImport)).toBe('darkslateblue') expect(await getColor(relativeImportAlias)).toBe('darkslateblue') expect(await getBg(relativeImportAlias)).toMatch( - isBuild ? /base64/ : '/nested/icon.png' + isBuild ? /base64/ : '/nested/icon.png', ) expect(await getColor(optionsRelativeImport)).toBe('green') expect(await getColor(optionsAbsoluteImport)).toBe('red') editFile('stylus.styl', (code) => - code.replace('$color ?= blue', '$color ?= red') + code.replace('$color ?= blue', '$color ?= red'), ) await untilUpdated(() => getColor(imported), 'red') editFile('nested/nested.styl', (code) => - code.replace('color: darkslateblue', 'color: blue') + code.replace('color: darkslateblue', 'color: blue'), ) await untilUpdated(() => getColor(relativeImport), 'blue') }) @@ -172,11 +174,11 @@ test('css modules', async () => { // check if the generated CSS module class name is indeed using the // format specified in vite.config.js expect(await imported.getAttribute('class')).toMatch( - /.mod-module__apply-color___[\w-]{5}/ + /.mod-module__apply-color___[\w-]{5}/, ) editFile('mod.module.css', (code) => - code.replace('color: turquoise', 'color: red') + code.replace('color: turquoise', 'color: red'), ) await untilUpdated(() => getColor(imported), 'red') }) @@ -188,11 +190,11 @@ test('css modules composes/from path resolving', async () => { // check if the generated CSS module class name is indeed using the // format specified in vite.config.js expect(await imported.getAttribute('class')).toMatch( - /.composed-module__apply-color___[\w-]{5}/ + /.composed-module__apply-color___[\w-]{5}/, ) expect(await imported.getAttribute('class')).toMatch( - /.composes-path-resolving-module__path-resolving-css___[\w-]{5}/ + /.composes-path-resolving-module__path-resolving-css___[\w-]{5}/, ) // @todo HMR is not working on this situation. @@ -209,11 +211,11 @@ test('sass modules composes/from path resolving', async () => { // check if the generated CSS module class name is indeed using the // format specified in vite.config.js expect(await imported.getAttribute('class')).toMatch( - /.composed-module__apply-color___[\w-]{5}/ + /.composed-module__apply-color___[\w-]{5}/, ) expect(await imported.getAttribute('class')).toMatch( - /.composes-path-resolving-module__path-resolving-sass___[\w-]{5}/ + /.composes-path-resolving-module__path-resolving-sass___[\w-]{5}/, ) // @todo HMR is not working on this situation. @@ -230,11 +232,11 @@ test('less modules composes/from path resolving', async () => { // check if the generated CSS module class name is indeed using the // format specified in vite.config.js expect(await imported.getAttribute('class')).toMatch( - /.composed-module__apply-color___[\w-]{5}/ + /.composed-module__apply-color___[\w-]{5}/, ) expect(await imported.getAttribute('class')).toMatch( - /.composes-path-resolving-module__path-resolving-less___[\w-]{5}/ + /.composes-path-resolving-module__path-resolving-less___[\w-]{5}/, ) // @todo HMR is not working on this situation. @@ -248,11 +250,11 @@ test('css modules w/ sass', async () => { const imported = await page.$('.modules-sass') expect(await getColor(imported)).toBe('orangered') expect(await imported.getAttribute('class')).toMatch( - /.mod-module__apply-color___[\w-]{5}/ + /.mod-module__apply-color___[\w-]{5}/, ) editFile('mod.module.scss', (code) => - code.replace('color: orangered', 'color: blue') + code.replace('color: orangered', 'color: blue'), ) await untilUpdated(() => getColor(imported), 'blue') }) @@ -282,10 +284,6 @@ test('@import dependency w/ sass entry', async () => { expect(await getColor('.css-dep-sass')).toBe('orange') }) -test('@import dependency w/ stylus entry', async () => { - expect(await getColor('.css-dep-stylus')).toBe('red') -}) - test('@import dependency w/out package scss', async () => { expect(await getColor('.sass-dep')).toBe('lavender') }) @@ -297,8 +295,8 @@ test('async chunk', async () => { if (isBuild) { // assert that the css is extracted into its own file instead of in the // main css file - expect(findAssetFile(/index\.\w+\.css$/)).not.toMatch('teal') - expect(findAssetFile(/async\.\w+\.css$/)).toMatch('.async{color:teal}') + expect(findAssetFile(/index-\w+\.css$/)).not.toMatch('teal') + expect(findAssetFile(/async-\w+\.css$/)).toMatch('.async{color:teal}') } else { // test hmr editFile('async.css', (code) => code.replace('color: teal', 'color: blue')) @@ -312,19 +310,19 @@ test('treeshaken async chunk', async () => { expect( await page.evaluate(() => { return document.querySelector('.async-treeshaken') - }) + }), ).toBeNull() // assert that the css is not present anywhere expect(findAssetFile(/\.css$/)).not.toMatch('plum') - expect(findAssetFile(/index\.\w+\.js$/)).not.toMatch('.async{color:plum}') - expect(findAssetFile(/async\.\w+\.js$/)).not.toMatch('.async{color:plum}') + expect(findAssetFile(/index-\w+\.js$/)).not.toMatch('.async{color:plum}') + expect(findAssetFile(/async-\w+\.js$/)).not.toMatch('.async{color:plum}') // should have no chunk! expect(findAssetFile(/async-treeshaken/)).toBe('') } else { // should be present in dev const el = await page.$('.async-treeshaken') editFile('async-treeshaken.css', (code) => - code.replace('color: plum', 'color: blue') + code.replace('color: plum', 'color: blue'), ) await untilUpdated(() => getColor(el), 'blue') } @@ -341,19 +339,19 @@ test('PostCSS dir-dependency', async () => { if (!isBuild) { editFile('glob-dep/foo.css', (code) => - code.replace('color: grey', 'color: blue') + code.replace('color: grey', 'color: blue'), ) await untilUpdated(() => getColor(el1), 'blue') expect(await getColor(el2)).toBe('grey') editFile('glob-dep/bar.css', (code) => - code.replace('color: grey', 'color: red') + code.replace('color: grey', 'color: red'), ) await untilUpdated(() => getColor(el2), 'red') expect(await getColor(el1)).toBe('blue') editFile('glob-dep/nested (dir)/baz.css', (code) => - code.replace('color: grey', 'color: green') + code.replace('color: grey', 'color: green'), ) await untilUpdated(() => getColor(el3), 'green') expect(await getColor(el1)).toBe('blue') @@ -377,8 +375,9 @@ test('URL separation', async () => { .fill('') .flatMap((_, i) => [',', ' ,', ', ', ' , '].map( - (sep) => `background-image:${new Array(i + 1).fill(baseUrl).join(sep)};` - ) + (sep) => + `background-image:${new Array(i + 1).fill(baseUrl).join(sep)};`, + ), ) // Insert the base case @@ -389,7 +388,7 @@ test('URL separation', async () => { if (i > 0) editFile('imported.css', (code) => code.replace(cases[i - 1], c)) expect(await getBg(urlSeparated)).toMatch( - /^url\(.+\)(?:\s*,\s*url\(.+\))*$/ + /^url\(.+\)(?:\s*,\s*url\(.+\))*$/, ) } }) @@ -416,7 +415,7 @@ test('minify css', async () => { } // should keep the rgba() syntax - const cssFile = findAssetFile(/index\.\w+\.css$/) + const cssFile = findAssetFile(/index-\w+\.css$/) expect(cssFile).toMatch('rgba(') expect(cssFile).not.toMatch('#ffff00b3') }) @@ -425,7 +424,7 @@ test('?raw', async () => { const rawImportCss = await page.$('.raw-imported-css') expect(await rawImportCss.textContent()).toBe( - readFileSync(require.resolve('../raw-imported.css'), 'utf-8') + readFileSync(require.resolve('../raw-imported.css'), 'utf-8'), ) }) @@ -438,7 +437,7 @@ test("relative path rewritten in Less's data-uri", async () => { // relative path passed to Less's data-uri is rewritten to absolute, // the Less inlines it expect(await getBg('.form-box-data-uri')).toMatch( - /^url\("data:image\/svg\+xml,%3Csvg/ + /^url\("data:image\/svg\+xml,%3Csvg/, ) }) @@ -448,7 +447,7 @@ test('PostCSS source.input.from includes query', async () => { expect(code).toContain( isBuild ? '/postcss-source-input.css?used&query=foo' - : '/postcss-source-input.css?query=foo' + : '/postcss-source-input.css?query=foo', ) }) @@ -476,14 +475,14 @@ test('sugarss', async () => { expect(await getBg(atImport)).toMatch(isBuild ? /base64/ : '/nested/icon.png') expect(await getColor(atImportAlias)).toBe('darkslateblue') expect(await getBg(atImportAlias)).toMatch( - isBuild ? /base64/ : '/nested/icon.png' + isBuild ? /base64/ : '/nested/icon.png', ) editFile('sugarss.sss', (code) => code.replace('color: blue', 'color: coral')) await untilUpdated(() => getColor(imported), 'coral') editFile('nested/nested.sss', (code) => - code.replace('color: darkslateblue', 'color: blue') + code.replace('color: darkslateblue', 'color: blue'), ) await untilUpdated(() => getColor(atImport), 'blue') }) diff --git a/playground/css/__tests__/postcss-plugins-different-dir/postcss-plugins-different-dir.spec.ts b/playground/css/__tests__/postcss-plugins-different-dir/postcss-plugins-different-dir.spec.ts index fabf24da3dae99..f897d0fad2e234 100644 --- a/playground/css/__tests__/postcss-plugins-different-dir/postcss-plugins-different-dir.spec.ts +++ b/playground/css/__tests__/postcss-plugins-different-dir/postcss-plugins-different-dir.spec.ts @@ -11,12 +11,12 @@ test('postcss plugins in different dir', async () => { logLevel: 'silent', server: { port, - strictPort: true + strictPort: true, }, build: { // skip transpilation during tests to make it faster - target: 'esnext' - } + target: 'esnext', + }, }) await server.listen() try { diff --git a/playground/css/__tests__/postcss-plugins-different-dir/serve.ts b/playground/css/__tests__/postcss-plugins-different-dir/serve.ts index 16e7d655f5ec15..195bb47d8520c7 100644 --- a/playground/css/__tests__/postcss-plugins-different-dir/serve.ts +++ b/playground/css/__tests__/postcss-plugins-different-dir/serve.ts @@ -5,6 +5,6 @@ // function or a default server will be created export async function serve(): Promise<{ close(): Promise@import dependency w/ sass entrypoints: this should be orange
-- @import dependency w/ styl entrypoints: this should be red -
PostCSS dir-dependency: this should be grey
diff --git a/playground/css/main.js b/playground/css/main.js
index 68299638b78369..e38ff356315879 100644
--- a/playground/css/main.js
+++ b/playground/css/main.js
@@ -1,20 +1,13 @@
import './minify.css'
+import './imported.css'
+import './sugarss.sss'
+import './sass.scss'
+import './less.less'
+import './stylus.styl'
-import css from './imported.css'
+import css from './imported-inline.css?inline'
text('.imported-css', css)
-import sugarss from './sugarss.sss'
-text('.imported-sugarss', sugarss)
-
-import sass from './sass.scss'
-text('.imported-sass', sass)
-
-import less from './less.less'
-text('.imported-less', less)
-
-import stylus from './stylus.styl'
-text('.imported-stylus', stylus)
-
import rawCss from './raw-imported.css?raw'
text('.raw-imported-css', rawCss)
@@ -38,13 +31,13 @@ document
.classList.add(...composesPathResolvingMod['path-resolving-less'].split(' '))
text(
'.path-resolved-modules-code',
- JSON.stringify(composesPathResolvingMod, null, 2)
+ JSON.stringify(composesPathResolvingMod, null, 2),
)
import inlineMod from './inline.module.css?inline'
text('.modules-inline', inlineMod)
-import charset from './charset.css'
+import charset from './charset.css?inline'
text('.charset-css', charset)
import './layered/index.css'
@@ -53,7 +46,7 @@ import './dep.css'
import './glob-dep.css'
// eslint-disable-next-line import/order
-import { barModuleClasses } from 'css-js-dep'
+import { barModuleClasses } from '@vitejs/test-css-js-dep'
document
.querySelector('.css-js-dep-module')
.classList.add(barModuleClasses.cssJsDepModule)
@@ -90,15 +83,18 @@ import inlined from './inlined.css?inline'
text('.inlined-code', inlined)
// glob
-const glob = import.meta.glob('./glob-import/*.css')
+const glob = import.meta.glob('./glob-import/*.css', { query: '?inline' })
Promise.all(
- Object.keys(glob).map((key) => glob[key]().then((i) => i.default))
+ Object.keys(glob).map((key) => glob[key]().then((i) => i.default)),
).then((res) => {
text('.imported-css-glob', JSON.stringify(res, null, 2))
})
// globEager
-const globEager = import.meta.glob('./glob-import/*.css', { eager: true })
+const globEager = import.meta.glob('./glob-import/*.css', {
+ eager: true,
+ query: '?inline',
+})
text('.imported-css-globEager', JSON.stringify(globEager, null, 2))
import postcssSourceInput from './postcss-source-input.css?query=foo'
diff --git a/playground/css/package.json b/playground/css/package.json
index 5081b5462c2fa4..3504ce9bce2745 100644
--- a/playground/css/package.json
+++ b/playground/css/package.json
@@ -1,5 +1,5 @@
{
- "name": "test-css",
+ "name": "@vitejs/test-css",
"private": true,
"version": "0.0.0",
"scripts": {
@@ -12,12 +12,12 @@
"preview:relative-base": "vite --config ./vite.config-relative-base.js preview"
},
"devDependencies": {
- "css-dep": "link:./css-dep",
- "css-js-dep": "file:./css-js-dep",
+ "@vitejs/test-css-dep": "link:./css-dep",
+ "@vitejs/test-css-js-dep": "file:./css-js-dep",
"fast-glob": "^3.2.12",
"less": "^4.1.3",
"postcss-nested": "^5.0.6",
- "sass": "^1.55.0",
+ "sass": "^1.56.1",
"stylus": "^0.59.0",
"sugarss": "^4.0.1"
}
diff --git a/playground/css/postcss-caching/blue-app/postcss.config.js b/playground/css/postcss-caching/blue-app/postcss.config.js
index 2506cd535feef7..50764f3ff8f21a 100644
--- a/playground/css/postcss-caching/blue-app/postcss.config.js
+++ b/playground/css/postcss-caching/blue-app/postcss.config.js
@@ -1,5 +1,5 @@
module.exports = {
- plugins: [replacePinkWithBlue]
+ plugins: [replacePinkWithBlue],
}
function replacePinkWithBlue() {
@@ -9,7 +9,7 @@ function replacePinkWithBlue() {
if (decl.value === 'pink') {
decl.value = 'blue'
}
- }
+ },
}
}
replacePinkWithBlue.postcss = true
diff --git a/playground/css/postcss-caching/css.spec.ts b/playground/css/postcss-caching/css.spec.ts
index c32bf6b6251d2d..5f2893f0873e44 100644
--- a/playground/css/postcss-caching/css.spec.ts
+++ b/playground/css/postcss-caching/css.spec.ts
@@ -1,9 +1,9 @@
import path from 'node:path'
import { createServer } from 'vite'
import { expect, test } from 'vitest'
-import { getColor, page, ports } from '~utils'
+import { getColor, isServe, page, ports } from '~utils'
-test('postcss config', async () => {
+test.runIf(isServe)('postcss config', async () => {
const port = ports['css/postcss-caching']
const startServer = async (root) => {
const server = await createServer({
@@ -11,21 +11,26 @@ test('postcss config', async () => {
logLevel: 'silent',
server: {
port,
- strictPort: true
+ strictPort: true,
},
build: {
// skip transpilation during tests to make it faster
- target: 'esnext'
- }
+ target: 'esnext',
+ },
})
await server.listen()
return server
}
+
const blueAppDir = path.join(__dirname, 'blue-app')
const greenAppDir = path.join(__dirname, 'green-app')
let blueApp
let greenApp
try {
+ const hmrConnectionPromise = page.waitForEvent('console', (msg) =>
+ msg.text().includes('connected'),
+ )
+
blueApp = await startServer(blueAppDir)
await page.goto(`http://localhost:${port}`)
@@ -33,11 +38,16 @@ test('postcss config', async () => {
expect(await getColor(blueA)).toBe('blue')
const blueB = await page.$('.postcss-b')
expect(await getColor(blueB)).toBe('black')
+
+ // wait for hmr connection because: if server stops before connection, auto reload does not happen
+ await hmrConnectionPromise
await blueApp.close()
blueApp = null
+ const navigationPromise = page.waitForNavigation() // wait for server restart auto reload
greenApp = await startServer(greenAppDir)
- await page.reload() // hmr reloads it automatically but reload here for consistency
+ await navigationPromise
+
const greenA = await page.$('.postcss-a')
expect(await getColor(greenA)).toBe('black')
const greenB = await page.$('.postcss-b')
diff --git a/playground/css/postcss-caching/green-app/postcss.config.js b/playground/css/postcss-caching/green-app/postcss.config.js
index 1367dfc1d27c7b..7d9d8818540e09 100644
--- a/playground/css/postcss-caching/green-app/postcss.config.js
+++ b/playground/css/postcss-caching/green-app/postcss.config.js
@@ -1,5 +1,5 @@
module.exports = {
- plugins: [replacePinkWithGreen]
+ plugins: [replacePinkWithGreen],
}
function replacePinkWithGreen() {
@@ -9,7 +9,7 @@ function replacePinkWithGreen() {
if (decl.value === 'pink') {
decl.value = 'green'
}
- }
+ },
}
}
replacePinkWithGreen.postcss = true
diff --git a/playground/css/postcss-caching/serve.ts b/playground/css/postcss-caching/serve.ts
index 16e7d655f5ec15..195bb47d8520c7 100644
--- a/playground/css/postcss-caching/serve.ts
+++ b/playground/css/postcss-caching/serve.ts
@@ -5,6 +5,6 @@
// function or a default server will be created
export async function serve(): Promise<{ close(): Promise define variable in html: import json: define in dep:
+ import.meta.env.UNDEFINED: process.env.UNDEFINED: import type should be removed without side-effect
- msg from virtual module: {{ foo.msg }} this will be styled with a font-face {{ state.protocol }} msg from nested virtual module: {{ virtualMsg }}Define
__EXP__
+from JSX
- }
-})
diff --git a/playground/ssr-vue/src/components/ImportType.vue b/playground/ssr-vue/src/components/ImportType.vue
deleted file mode 100644
index 144d36bc34e7ec..00000000000000
--- a/playground/ssr-vue/src/components/ImportType.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-
- {{ msg }}
-
-
-
-
-
-
-
diff --git a/playground/ssr-vue/src/pages/External.vue b/playground/ssr-vue/src/pages/External.vue
deleted file mode 100644
index ffdcd03b85be84..00000000000000
--- a/playground/ssr-vue/src/pages/External.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-
- Home
- 
-
- encrypted message:
-
-
-
- {{ fooStore.foo }}
-
-
-
-
-
diff --git a/playground/ssr-vue/src/router.js b/playground/ssr-vue/src/router.js
deleted file mode 100644
index 814098102d7899..00000000000000
--- a/playground/ssr-vue/src/router.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import {
- createRouter as _createRouter,
- createMemoryHistory,
- createWebHistory
-} from 'vue-router'
-
-// Auto generates routes from vue files under ./pages
-// https://vitejs.dev/guide/features.html#glob-import
-const pages = import.meta.glob('./pages/*.vue')
-
-const routes = Object.keys(pages).map((path) => {
- const name = path.match(/\.\/pages(.*)\.vue$/)[1].toLowerCase()
- return {
- path: name === '/home' ? '/' : name,
- component: pages[path] // () => import('./pages/*.vue')
- }
-})
-
-export function createRouter() {
- return _createRouter({
- // use appropriate history implementation for server/client
- // import.meta.env.SSR is injected by Vite.
- history: import.meta.env.SSR
- ? createMemoryHistory('/test/')
- : createWebHistory('/test/'),
- routes
- })
-}
diff --git a/playground/ssr-vue/vite.config.js b/playground/ssr-vue/vite.config.js
deleted file mode 100644
index c8be7320c8a9b0..00000000000000
--- a/playground/ssr-vue/vite.config.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import path from 'node:path'
-import { defineConfig } from 'vite'
-import vuePlugin from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
-
-const virtualFile = '@virtual-file'
-const virtualId = '\0' + virtualFile
-const nestedVirtualFile = '@nested-virtual-file'
-const nestedVirtualId = '\0' + nestedVirtualFile
-
-const base = '/test/'
-
-// preserve this to test loading __filename & __dirname in ESM as Vite polyfills them.
-// if Vite incorrectly load this file, node.js would error out.
-globalThis.__vite_test_filename = __filename
-globalThis.__vite_test_dirname = __dirname
-
-export default defineConfig(({ command, ssrBuild }) => ({
- base,
- plugins: [
- vuePlugin(),
- vueJsx(),
- {
- name: 'virtual',
- resolveId(id) {
- if (id === '@foo') {
- return id
- }
- },
- load(id, options) {
- const ssrFromOptions = options?.ssr ?? false
- if (id === '@foo') {
- // Force a mismatch error if ssrBuild is different from ssrFromOptions
- return `export default { msg: '${
- command === 'build' && !!ssrBuild !== ssrFromOptions
- ? `defineConfig ssrBuild !== ssr from load options`
- : 'hi'
- }' }`
- }
- }
- },
- {
- name: 'virtual-module',
- resolveId(id) {
- if (id === virtualFile) {
- return virtualId
- } else if (id === nestedVirtualFile) {
- return nestedVirtualId
- }
- },
- load(id) {
- if (id === virtualId) {
- return `export { msg } from "@nested-virtual-file";`
- } else if (id === nestedVirtualId) {
- return `export const msg = "[success] from conventional virtual file"`
- }
- }
- },
- // Example of a plugin that injects a helper from a virtual module that can
- // be used in renderBuiltUrl
- (function () {
- const queryRE = /\?.*$/s
- const hashRE = /#.*$/s
- const cleanUrl = (url) => url.replace(hashRE, '').replace(queryRE, '')
- let config
-
- const virtualId = '\0virtual:ssr-vue-built-url'
- return {
- name: 'built-url',
- enforce: 'post',
- configResolved(_config) {
- config = _config
- },
- resolveId(id) {
- if (id === virtualId) {
- return id
- }
- },
- load(id) {
- if (id === virtualId) {
- return {
- code: `export const __ssr_vue_processAssetPath = (url) => '${base}' + url`,
- moduleSideEffects: 'no-treeshake'
- }
- }
- },
- transform(code, id) {
- const cleanId = cleanUrl(id)
- if (
- config.build.ssr &&
- (cleanId.endsWith('.js') || cleanId.endsWith('.vue')) &&
- !code.includes('__ssr_vue_processAssetPath')
- ) {
- return {
- code:
- `import { __ssr_vue_processAssetPath } from '${virtualId}';__ssr_vue_processAssetPath;` +
- code,
- sourcemap: null // no sourcemap support to speed up CI
- }
- }
- }
- }
- })()
- ],
- experimental: {
- renderBuiltUrl(filename, { hostType, type, ssr }) {
- if (ssr && type === 'asset' && hostType === 'js') {
- return {
- runtime: `__ssr_vue_processAssetPath(${JSON.stringify(filename)})`
- }
- }
- }
- },
- build: {
- minify: false
- },
- ssr: {
- noExternal: [
- // this package has uncompiled .vue files
- 'example-external-component'
- ]
- },
- optimizeDeps: {
- exclude: ['example-external-component']
- }
-}))
diff --git a/playground/ssr-vue/vite.config.noexternal.js b/playground/ssr-vue/vite.config.noexternal.js
deleted file mode 100644
index 48a740c16cb1bf..00000000000000
--- a/playground/ssr-vue/vite.config.noexternal.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import config from './vite.config.js'
-/**
- * @type {import('vite').UserConfig}
- */
-export default Object.assign(config, {
- ssr: {
- noExternal: /./
- },
- resolve: {
- // necessary because vue.ssrUtils is only exported on cjs modules
- alias: [
- {
- find: '@vue/runtime-dom',
- replacement: '@vue/runtime-dom/dist/runtime-dom.cjs.js'
- },
- {
- find: '@vue/runtime-core',
- replacement: '@vue/runtime-core/dist/runtime-core.cjs.js'
- }
- ]
- },
- optimizeDeps: {
- exclude: ['example-external-component']
- }
-})
diff --git a/playground/ssr-webworker/__tests__/serve.ts b/playground/ssr-webworker/__tests__/serve.ts
index 0013d19769c299..8159cf39734510 100644
--- a/playground/ssr-webworker/__tests__/serve.ts
+++ b/playground/ssr-webworker/__tests__/serve.ts
@@ -21,8 +21,8 @@ export async function serve(): Promise<{ close(): Promise
Other Ext
- ) -}) - -export default Default diff --git a/playground/vue-jsx/Query.jsx b/playground/vue-jsx/Query.jsx deleted file mode 100644 index 60de93eafb7b1c..00000000000000 --- a/playground/vue-jsx/Query.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent, ref } from 'vue' - -export default defineComponent(() => { - const count = ref(6) - const inc = () => count.value++ - - return () => ( - - ) -}) diff --git a/playground/vue-jsx/Script.vue b/playground/vue-jsx/Script.vue deleted file mode 100644 index 2689ed2dfe6ffb..00000000000000 --- a/playground/vue-jsx/Script.vue +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/playground/vue-jsx/SrcImport.jsx b/playground/vue-jsx/SrcImport.jsx deleted file mode 100644 index dc775be205af73..00000000000000 --- a/playground/vue-jsx/SrcImport.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent, ref } from 'vue' - -export default defineComponent(() => { - const count = ref(5) - const inc = () => count.value++ - - return () => ( - - ) -}) diff --git a/playground/vue-jsx/SrcImport.vue b/playground/vue-jsx/SrcImport.vue deleted file mode 100644 index 89f6fb3eb77e2b..00000000000000 --- a/playground/vue-jsx/SrcImport.vue +++ /dev/null @@ -1 +0,0 @@ - diff --git a/playground/vue-jsx/TsImport.vue b/playground/vue-jsx/TsImport.vue deleted file mode 100644 index c63923d51947fa..00000000000000 --- a/playground/vue-jsx/TsImport.vue +++ /dev/null @@ -1,8 +0,0 @@ - -{{ foo }}
- - - diff --git a/playground/vue-jsx/TsImportFile.ts b/playground/vue-jsx/TsImportFile.ts deleted file mode 100644 index 62761d5733b432..00000000000000 --- a/playground/vue-jsx/TsImportFile.ts +++ /dev/null @@ -1 +0,0 @@ -export const foo = 'success' diff --git a/playground/vue-jsx/__tests__/vue-jsx.spec.ts b/playground/vue-jsx/__tests__/vue-jsx.spec.ts deleted file mode 100644 index 7518f4bddd7c71..00000000000000 --- a/playground/vue-jsx/__tests__/vue-jsx.spec.ts +++ /dev/null @@ -1,117 +0,0 @@ -import { describe, expect, test } from 'vitest' -import { editFile, isServe, page, untilUpdated } from '~utils' - -test('should render', async () => { - expect(await page.textContent('.named')).toMatch('0') - expect(await page.textContent('.named-specifier')).toMatch('1') - expect(await page.textContent('.default')).toMatch('2') - expect(await page.textContent('.default-tsx')).toMatch('3') - expect(await page.textContent('.script')).toMatch('4') - expect(await page.textContent('.src-import')).toMatch('5') - expect(await page.textContent('.jsx-with-query')).toMatch('6') - expect(await page.textContent('.other-ext')).toMatch('Other Ext') - expect(await page.textContent('.ts-import')).toMatch('success') -}) - -test('should update', async () => { - await page.click('.named') - expect(await page.textContent('.named')).toMatch('1') - await page.click('.named-specifier') - expect(await page.textContent('.named-specifier')).toMatch('2') - await page.click('.default') - expect(await page.textContent('.default')).toMatch('3') - await page.click('.default-tsx') - expect(await page.textContent('.default-tsx')).toMatch('4') - await page.click('.script') - expect(await page.textContent('.script')).toMatch('5') - await page.click('.src-import') - expect(await page.textContent('.src-import')).toMatch('6') - await page.click('.jsx-with-query') - expect(await page.textContent('.jsx-with-query')).toMatch('7') -}) - -describe.runIf(isServe)('vue-jsx server', () => { - test('hmr: named export', async () => { - editFile('Comps.jsx', (code) => - code.replace('named {count', 'named updated {count') - ) - await untilUpdated(() => page.textContent('.named'), 'named updated 0') - - // affect all components in same file - expect(await page.textContent('.named-specifier')).toMatch('1') - expect(await page.textContent('.default')).toMatch('2') - // should not affect other components from different file - expect(await page.textContent('.default-tsx')).toMatch('4') - }) - - test('hmr: named export via specifier', async () => { - editFile('Comps.jsx', (code) => - code.replace('named specifier {count', 'named specifier updated {count') - ) - await untilUpdated( - () => page.textContent('.named-specifier'), - 'named specifier updated 1' - ) - - // affect all components in same file - expect(await page.textContent('.default')).toMatch('2') - // should not affect other components on the page - expect(await page.textContent('.default-tsx')).toMatch('4') - }) - - test('hmr: default export', async () => { - editFile('Comps.jsx', (code) => - code.replace('default {count', 'default updated {count') - ) - await untilUpdated(() => page.textContent('.default'), 'default updated 2') - - // should not affect other components on the page - expect(await page.textContent('.default-tsx')).toMatch('4') - }) - - test('hmr: named export via specifier', async () => { - // update another component - await page.click('.named') - expect(await page.textContent('.named')).toMatch('1') - - editFile('Comp.tsx', (code) => - code.replace('default tsx {count', 'default tsx updated {count') - ) - await untilUpdated( - () => page.textContent('.default-tsx'), - 'default tsx updated 3' - ) - - // should not affect other components on the page - expect(await page.textContent('.named')).toMatch('1') - }) - - test('hmr: script in .vue', async () => { - editFile('Script.vue', (code) => - code.replace('script {count', 'script updated {count') - ) - await untilUpdated(() => page.textContent('.script'), 'script updated 4') - - expect(await page.textContent('.src-import')).toMatch('6') - }) - - test('hmr: src import in .vue', async () => { - await page.click('.script') - editFile('SrcImport.jsx', (code) => - code.replace('src import {count', 'src import updated {count') - ) - await untilUpdated( - () => page.textContent('.src-import'), - 'src import updated 5' - ) - - expect(await page.textContent('.script')).toMatch('5') - }) - - test('hmr: setup jsx in .vue', async () => { - editFile('setup-syntax-jsx.vue', (code) => - code.replace('let count = ref(100)', 'let count = ref(1000)') - ) - await untilUpdated(() => page.textContent('.setup-jsx'), '1000') - }) -}) diff --git a/playground/vue-jsx/index.html b/playground/vue-jsx/index.html deleted file mode 100644 index a285a008c13a9e..00000000000000 --- a/playground/vue-jsx/index.html +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/playground/vue-jsx/main.jsx b/playground/vue-jsx/main.jsx deleted file mode 100644 index f13e60c45367c0..00000000000000 --- a/playground/vue-jsx/main.jsx +++ /dev/null @@ -1,29 +0,0 @@ -import { createApp } from 'vue' -import { Named, NamedSpec, default as Default } from './Comps' -import { default as TsxDefault } from './Comp' -import OtherExt from './OtherExt.tesx' -import JsxScript from './Script.vue' -import JsxSrcImport from './SrcImport.vue' -import JsxSetupSyntax from './setup-syntax-jsx.vue' -// eslint-disable-next-line -import JsxWithQuery from './Query.jsx?query=true' -import TsImport from './TsImport.vue' - -function App() { - return ( - <> -{{ count }}
-Main.vue
-
- {{ css }}
-
- module.vue
-