}> {
return {
- close: () => Promise.resolve()
+ close: () => Promise.resolve(),
}
}
diff --git a/playground/css/css-dep/package.json b/playground/css/css-dep/package.json
index 451510a672485f..204e8c71b0ebba 100644
--- a/playground/css/css-dep/package.json
+++ b/playground/css/css-dep/package.json
@@ -1,5 +1,5 @@
{
- "name": "css-dep",
+ "name": "@vitejs/test-css-dep",
"private": true,
"version": "1.0.0",
"main": "index.js",
diff --git a/playground/css/css-js-dep/package.json b/playground/css/css-js-dep/package.json
index d762f6566fdbdc..ce96e1e3c2b3f9 100644
--- a/playground/css/css-js-dep/package.json
+++ b/playground/css/css-js-dep/package.json
@@ -1,5 +1,5 @@
{
- "name": "css-js-dep",
+ "name": "@vitejs/test-css-js-dep",
"private": true,
"type": "module",
"version": "1.0.0",
diff --git a/playground/css/dep.css b/playground/css/dep.css
index 8d5b62847cd70e..ad3e1bcd12480c 100644
--- a/playground/css/dep.css
+++ b/playground/css/dep.css
@@ -1 +1 @@
-@import 'css-dep';
+@import '@vitejs/test-css-dep';
diff --git a/playground/css/imported-inline.css b/playground/css/imported-inline.css
new file mode 100644
index 00000000000000..65af30a2064c86
--- /dev/null
+++ b/playground/css/imported-inline.css
@@ -0,0 +1,3 @@
+.imported {
+ color: green;
+}
diff --git a/playground/css/index.html b/playground/css/index.html
index 93f77dfa2eb970..486c927832bce8 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -124,9 +124,6 @@ CSS
@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 14971a77f73166..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,8 +12,8 @@
"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",
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 }> {
return {
- close: () => Promise.resolve()
+ close: () => Promise.resolve(),
}
}
diff --git a/playground/css/postcss.config.js b/playground/css/postcss.config.js
index a9bbd0f2b4e09e..955878ac216f53 100644
--- a/playground/css/postcss.config.js
+++ b/playground/css/postcss.config.js
@@ -1,5 +1,5 @@
module.exports = {
- plugins: [require('postcss-nested'), testDirDep, testSourceInput]
+ plugins: [require('postcss-nested'), testDirDep, testSourceInput],
}
const fs = require('node:fs')
@@ -16,7 +16,7 @@ function testDirDep() {
AtRule(atRule, { result, Comment }) {
if (atRule.name === 'test') {
const pattern = normalizePath(
- path.resolve(path.dirname(result.opts.from), './glob-dep/**/*.css')
+ path.resolve(path.dirname(result.opts.from), './glob-dep/**/*.css'),
)
const files = glob.sync(pattern)
const text = files.map((f) => fs.readFileSync(f, 'utf-8')).join('\n')
@@ -28,7 +28,7 @@ function testDirDep() {
plugin: 'dir-dep',
dir: './glob-dep',
glob: '*.css',
- parent: result.opts.from
+ parent: result.opts.from,
})
result.messages.push({
@@ -36,10 +36,10 @@ function testDirDep() {
plugin: 'dir-dep',
dir: './glob-dep/nested (dir)', // includes special characters in glob
glob: '*.css',
- parent: result.opts.from
+ parent: result.opts.from,
})
}
- }
+ },
}
}
testDirDep.postcss = true
@@ -51,12 +51,12 @@ function testSourceInput() {
if (atRule.name === 'source-input') {
atRule.after(
`.source-input::before { content: ${JSON.stringify(
- atRule.source.input.from
- )}; }`
+ atRule.source.input.from,
+ )}; }`,
)
atRule.remove()
}
- }
+ },
}
}
testSourceInput.postcss = true
diff --git a/playground/css/sass.scss b/playground/css/sass.scss
index 721e6b9bfbca6c..796d9ba68b0c05 100644
--- a/playground/css/sass.scss
+++ b/playground/css/sass.scss
@@ -1,6 +1,6 @@
@import '=/nested'; // alias + custom index resolving -> /nested/_index.scss
@import '=/nested/partial'; // sass convention: omitting leading _ for partials
-@import 'css-dep'; // package w/ sass entry points
+@import '@vitejs/test-css-dep'; // package w/ sass entry points
@import 'virtual-dep'; // virtual file added through importer
@import '=/pkg-dep'; // package w/out sass field
@import '=/weapp.wxss'; // wxss file
diff --git a/playground/css/stylus.styl b/playground/css/stylus.styl
index 7b77ca36531be8..d43ba92d7a99ce 100644
--- a/playground/css/stylus.styl
+++ b/playground/css/stylus.styl
@@ -1,5 +1,4 @@
@import './nested/nested'
-@import 'css-dep'; // package w/ styl entry points
$color ?= blue
diff --git a/playground/css/vite.config-relative-base.js b/playground/css/vite.config-relative-base.js
index 7b54a149bcd987..7edbaf07c95c29 100644
--- a/playground/css/vite.config-relative-base.js
+++ b/playground/css/vite.config-relative-base.js
@@ -16,11 +16,11 @@ module.exports = {
output: {
entryFileNames: 'entries/[name].js',
chunkFileNames: 'chunks/[name]-[hash].js',
- assetFileNames: 'other-assets/[name]-[hash][extname]'
- }
- }
+ assetFileNames: 'other-assets/[name]-[hash][extname]',
+ },
+ },
},
testConfig: {
- baseRoute: '/relative-base/'
- }
+ baseRoute: '/relative-base/',
+ },
}
diff --git a/playground/css/vite.config.js b/playground/css/vite.config.js
index 40ca1a186e58da..489752655c828f 100644
--- a/playground/css/vite.config.js
+++ b/playground/css/vite.config.js
@@ -1,28 +1,33 @@
const path = require('node:path')
+// trigger scss bug: https://github.com/sass/dart-sass/issues/710
+// make sure Vite handles safely
+globalThis.window = {}
+globalThis.location = new URL('http://localhost/')
+
/**
* @type {import('vite').UserConfig}
*/
module.exports = {
build: {
- cssTarget: 'chrome61'
+ cssTarget: 'chrome61',
},
esbuild: {
logOverride: {
- 'unsupported-css-property': 'silent'
- }
+ 'unsupported-css-property': 'silent',
+ },
},
resolve: {
alias: {
'=': __dirname,
spacefolder: __dirname + '/folder with space',
'#alias': __dirname + '/aliased/foo.css',
- '#alias-module': __dirname + '/aliased/bar.module.css'
- }
+ '#alias-module': __dirname + '/aliased/bar.module.css',
+ },
},
css: {
modules: {
- generateScopedName: '[name]__[local]___[hash:base64:5]'
+ generateScopedName: '[name]__[local]___[hash:base64:5]',
// example of how getJSON can be used to generate
// typescript typings for css modules class names
@@ -51,16 +56,16 @@ module.exports = {
},
function (url) {
return url.endsWith('.wxss') ? { contents: '' } : null
- }
- ]
+ },
+ ],
},
styl: {
additionalData: `$injectedColor ?= orange`,
imports: [
'./options/relative-import.styl',
- path.join(__dirname, 'options/absolute-import.styl')
- ]
- }
- }
- }
+ path.join(__dirname, 'options/absolute-import.styl'),
+ ],
+ },
+ },
+ },
}
diff --git a/playground/data-uri/package.json b/playground/data-uri/package.json
index 4d30ad97b9acbb..c19befed0bca09 100644
--- a/playground/data-uri/package.json
+++ b/playground/data-uri/package.json
@@ -1,5 +1,5 @@
{
- "name": "test-data-uri",
+ "name": "@vitejs/test-data-uri",
"private": true,
"version": "0.0.0",
"scripts": {
diff --git a/playground/define/__tests__/define.spec.ts b/playground/define/__tests__/define.spec.ts
index 43787ef0adb112..7b1e306d973341 100644
--- a/playground/define/__tests__/define.spec.ts
+++ b/playground/define/__tests__/define.spec.ts
@@ -1,40 +1,40 @@
import { expect, test } from 'vitest'
import viteConfig from '../vite.config'
-import { page } from '~utils'
+import { isBuild, page } from '~utils'
test('string', async () => {
const defines = viteConfig.define
expect(await page.textContent('.exp')).toBe(
- String(typeof eval(defines.__EXP__))
+ String(typeof eval(defines.__EXP__)),
)
expect(await page.textContent('.string')).toBe(JSON.parse(defines.__STRING__))
expect(await page.textContent('.number')).toBe(String(defines.__NUMBER__))
expect(await page.textContent('.boolean')).toBe(String(defines.__BOOLEAN__))
expect(await page.textContent('.object')).toBe(
- JSON.stringify(defines.__OBJ__, null, 2)
+ JSON.stringify(defines.__OBJ__, null, 2),
)
expect(await page.textContent('.process-node-env')).toBe(
- JSON.parse(defines['process.env.NODE_ENV'])
+ JSON.parse(defines['process.env.NODE_ENV']),
)
expect(await page.textContent('.env-var')).toBe(
- JSON.parse(defines['process.env.SOMEVAR'])
+ JSON.parse(defines['process.env.SOMEVAR']),
)
expect(await page.textContent('.process-as-property')).toBe(
- defines.__OBJ__.process.env.SOMEVAR
+ defines.__OBJ__.process.env.SOMEVAR,
)
expect(await page.textContent('.spread-object')).toBe(
- JSON.stringify({ SOMEVAR: defines['process.env.SOMEVAR'] })
+ JSON.stringify({ SOMEVAR: defines['process.env.SOMEVAR'] }),
)
expect(await page.textContent('.spread-array')).toBe(
- JSON.stringify([...defines.__STRING__])
+ JSON.stringify([...defines.__STRING__]),
)
expect(await page.textContent('.dollar-identifier')).toBe(
- String(defines.$DOLLAR)
+ String(defines.$DOLLAR),
)
expect(await page.textContent('.unicode-identifier')).toBe(
- String(defines.ÖUNICODE_LETTERɵ)
+ String(defines.ÖUNICODE_LETTERɵ),
)
expect(await page.textContent('.no-identifier-substring')).toBe(String(true))
expect(await page.textContent('.no-property')).toBe(String(true))
@@ -42,6 +42,12 @@ test('string', async () => {
expect(await page.textContent('.exp-define')).toBe('__EXP__')
expect(await page.textContent('.import-json')).toBe('__EXP__')
expect(await page.textContent('.define-in-dep')).toBe(
- defines.__STRINGIFIED_OBJ__
+ defines.__STRINGIFIED_OBJ__,
+ )
+ expect(await page.textContent('.import-meta-env-undefined')).toBe(
+ isBuild ? '({}).UNDEFINED' : 'import.meta.env.UNDEFINED',
+ )
+ expect(await page.textContent('.process-env-undefined')).toBe(
+ isBuild ? '({}).UNDEFINED' : 'process.env.UNDEFINED',
)
})
diff --git a/playground/define/commonjs-dep/index.js b/playground/define/commonjs-dep/index.js
index 23e0bf1b32e32f..ba630bf28ff6d5 100644
--- a/playground/define/commonjs-dep/index.js
+++ b/playground/define/commonjs-dep/index.js
@@ -1 +1,5 @@
-module.exports = { defined: __STRINGIFIED_OBJ__ }
+module.exports = {
+ defined: __STRINGIFIED_OBJ__,
+ importMetaEnvUndefined: 'import.meta.env.UNDEFINED',
+ processEnvUndefined: 'process.env.UNDEFINED',
+}
diff --git a/playground/define/commonjs-dep/package.json b/playground/define/commonjs-dep/package.json
index 3047ae68c9f75a..f8ac503baaf9a9 100644
--- a/playground/define/commonjs-dep/package.json
+++ b/playground/define/commonjs-dep/package.json
@@ -1,5 +1,5 @@
{
- "name": "commonjs-dep",
+ "name": "@vitejs/test-commonjs-dep",
"private": true,
"version": "1.0.0",
"type": "commonjs"
diff --git a/playground/define/index.html b/playground/define/index.html
index c4f4c598aba563..da1fa0fc5f3a23 100644
--- a/playground/define/index.html
+++ b/playground/define/index.html
@@ -17,6 +17,10 @@ Define
define variable in html: __EXP__
import json:
define in dep:
+
+ import.meta.env.UNDEFINED:
+process.env.UNDEFINED:
diff --git a/playground/ssr-vue/src/assets/button.css b/playground/ssr-vue/src/assets/button.css
deleted file mode 100644
index 8e1ebc58c0891f..00000000000000
--- a/playground/ssr-vue/src/assets/button.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.btn {
- background-color: #65b587;
- border-radius: 8px;
- border-style: none;
- box-sizing: border-box;
- cursor: pointer;
- display: inline-block;
- font-size: 14px;
- font-weight: 500;
- height: 40px;
- line-height: 20px;
- list-style: none;
- outline: none;
- padding: 10px 16px;
-}
diff --git a/playground/ssr-vue/src/assets/fonts/Inter-Italic.woff b/playground/ssr-vue/src/assets/fonts/Inter-Italic.woff
deleted file mode 100644
index e7da6663fe5e47..00000000000000
Binary files a/playground/ssr-vue/src/assets/fonts/Inter-Italic.woff and /dev/null differ
diff --git a/playground/ssr-vue/src/assets/fonts/Inter-Italic.woff2 b/playground/ssr-vue/src/assets/fonts/Inter-Italic.woff2
deleted file mode 100644
index 8559dfde38986e..00000000000000
Binary files a/playground/ssr-vue/src/assets/fonts/Inter-Italic.woff2 and /dev/null differ
diff --git a/playground/ssr-vue/src/assets/logo.png b/playground/ssr-vue/src/assets/logo.png
deleted file mode 100644
index f3d2503fc2a44b..00000000000000
Binary files a/playground/ssr-vue/src/assets/logo.png and /dev/null differ
diff --git a/playground/ssr-vue/src/components/Foo.jsx b/playground/ssr-vue/src/components/Foo.jsx
deleted file mode 100644
index 427815b2d252d2..00000000000000
--- a/playground/ssr-vue/src/components/Foo.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { defineComponent } from 'vue'
-import './foo.css'
-
-// named exports w/ variable declaration: ok
-export const Foo = defineComponent({
- name: 'foo',
- setup() {
- return () => 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 @@
-
- import type should be removed without side-effect
-
-
-
diff --git a/playground/ssr-vue/src/components/button.js b/playground/ssr-vue/src/components/button.js
deleted file mode 100644
index 3b39f53fd96c47..00000000000000
--- a/playground/ssr-vue/src/components/button.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { createVNode, defineComponent } from 'vue'
-import '../assets/button.css'
-
-export default defineComponent({
- setup() {
- return () => {
- return createVNode(
- 'div',
- {
- class: 'btn'
- },
- 'dynamicBtn'
- )
- }
- }
-})
diff --git a/playground/ssr-vue/src/components/foo.css b/playground/ssr-vue/src/components/foo.css
deleted file mode 100644
index f8baa0d15b90d3..00000000000000
--- a/playground/ssr-vue/src/components/foo.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.jsx {
- color: blue;
-}
diff --git a/playground/ssr-vue/src/entry-client.js b/playground/ssr-vue/src/entry-client.js
deleted file mode 100644
index 842acce7dc685b..00000000000000
--- a/playground/ssr-vue/src/entry-client.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { createApp } from './main'
-
-const { app, router } = createApp()
-
-// wait until router is ready before mounting to ensure hydration match
-router.isReady().then(() => {
- app.mount('#app')
-})
diff --git a/playground/ssr-vue/src/entry-server.js b/playground/ssr-vue/src/entry-server.js
deleted file mode 100644
index e44c9abd3eb114..00000000000000
--- a/playground/ssr-vue/src/entry-server.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { basename } from 'node:path'
-import { renderToString } from 'vue/server-renderer'
-import { createApp } from './main'
-
-export async function render(url, manifest) {
- const { app, router } = createApp()
-
- // set the router to the desired URL before rendering
- await router.push(url)
- await router.isReady()
-
- // passing SSR context object which will be available via useSSRContext()
- // @vitejs/plugin-vue injects code into a component's setup() that registers
- // itself on ctx.modules. After the render, ctx.modules would contain all the
- // components that have been instantiated during this render call.
- const ctx = {}
- const html = await renderToString(app, ctx)
-
- // the SSR manifest generated by Vite contains module -> chunk/asset mapping
- // which we can then use to determine what files need to be preloaded for this
- // request.
- const preloadLinks = renderPreloadLinks(ctx.modules, manifest)
- return [html, preloadLinks]
-}
-
-function renderPreloadLinks(modules, manifest) {
- let links = ''
- const seen = new Set()
- modules.forEach((id) => {
- const files = manifest[id]
- if (files) {
- files.forEach((file) => {
- if (!seen.has(file)) {
- seen.add(file)
- const filename = basename(file)
- if (manifest[filename]) {
- for (const depFile of manifest[filename]) {
- links += renderPreloadLink(depFile)
- seen.add(depFile)
- }
- }
- links += renderPreloadLink(file)
- }
- })
- }
- })
- return links
-}
-
-function renderPreloadLink(file) {
- if (file.endsWith('.js')) {
- return ``
- } else if (file.endsWith('.css')) {
- return ``
- } else if (file.endsWith('.woff')) {
- return ` `
- } else if (file.endsWith('.woff2')) {
- return ` `
- } else if (file.endsWith('.gif')) {
- return ` `
- } else if (file.endsWith('.jpg') || file.endsWith('.jpeg')) {
- return ` `
- } else if (file.endsWith('.png')) {
- return ` `
- } else {
- // TODO
- return ''
- }
-}
diff --git a/playground/ssr-vue/src/main.js b/playground/ssr-vue/src/main.js
deleted file mode 100644
index d2dd1e002147fe..00000000000000
--- a/playground/ssr-vue/src/main.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { createPinia } from 'pinia'
-import { createSSRApp } from 'vue'
-import App from './App.vue'
-import { createRouter } from './router'
-
-// SSR requires a fresh app instance per request, therefore we export a function
-// that creates a fresh app instance. If using Vuex, we'd also be creating a
-// fresh store here.
-export function createApp() {
- const app = createSSRApp(App)
- const pinia = createPinia()
- app.use(pinia)
- const router = createRouter()
- app.use(router)
- return { app, router }
-}
diff --git a/playground/ssr-vue/src/pages/About.vue b/playground/ssr-vue/src/pages/About.vue
deleted file mode 100644
index ea6510808fd943..00000000000000
--- a/playground/ssr-vue/src/pages/About.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-
- {{ msg }}
- {{ url }}
-
-
-
-
-
-
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 @@
-
-
-
-
-
diff --git a/playground/ssr-vue/src/pages/Home.vue b/playground/ssr-vue/src/pages/Home.vue
deleted file mode 100644
index 7f595e7437e600..00000000000000
--- a/playground/ssr-vue/src/pages/Home.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-
- Home
-
- 
-
-
-
- msg from virtual module: {{ foo.msg }}
- this will be styled with a font-face
- {{ state.url }}
- {{ state.protocol }}
- msg from nested virtual module: {{ virtualMsg }}
-
-
-
-
-
-
-
-
-
diff --git a/playground/ssr-vue/src/pages/Store.vue b/playground/ssr-vue/src/pages/Store.vue
deleted file mode 100644
index 60a19217e55645..00000000000000
--- a/playground/ssr-vue/src/pages/Store.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-
- {{ 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 }> {
build: {
target: 'esnext',
ssr: 'src/entry-worker.jsx',
- outDir: 'dist/worker'
- }
+ outDir: 'dist/worker',
+ },
})
const { createServer } = await import(path.resolve(rootDir, 'worker.js'))
@@ -37,7 +37,7 @@ export async function serve(): Promise<{ close(): Promise }> {
await new Promise((resolve) => {
server.close(resolve)
})
- }
+ },
})
})
} catch (e) {
diff --git a/playground/ssr-webworker/package.json b/playground/ssr-webworker/package.json
index 66fdc8b7afaa99..6be45e0d653668 100644
--- a/playground/ssr-webworker/package.json
+++ b/playground/ssr-webworker/package.json
@@ -1,5 +1,5 @@
{
- "name": "test-ssr-webworker",
+ "name": "@vitejs/test-ssr-webworker",
"private": true,
"version": "0.0.0",
"type": "module",
@@ -12,6 +12,6 @@
},
"devDependencies": {
"miniflare": "^1.4.1",
- "resolve-linked": "workspace:*"
+ "@vitejs/test-resolve-linked": "workspace:*"
}
}
diff --git a/playground/ssr-webworker/src/entry-worker.jsx b/playground/ssr-webworker/src/entry-worker.jsx
index 750926653f9e31..9210d7e708e0d7 100644
--- a/playground/ssr-webworker/src/entry-worker.jsx
+++ b/playground/ssr-webworker/src/entry-worker.jsx
@@ -1,4 +1,4 @@
-import { msg as linkedMsg } from 'resolve-linked'
+import { msg as linkedMsg } from '@vitejs/test-resolve-linked'
import React from 'react'
let loaded = false
@@ -17,9 +17,9 @@ addEventListener('fetch', function (event) {
`,
{
headers: {
- 'content-type': 'text/html'
- }
- }
- )
+ 'content-type': 'text/html',
+ },
+ },
+ ),
)
})
diff --git a/playground/ssr-webworker/vite.config.js b/playground/ssr-webworker/vite.config.js
index 3a476198813c35..af2b208bd4f3c2 100644
--- a/playground/ssr-webworker/vite.config.js
+++ b/playground/ssr-webworker/vite.config.js
@@ -2,33 +2,33 @@ import { defineConfig } from 'vite'
export default defineConfig({
build: {
- minify: false
+ minify: false,
},
resolve: {
- dedupe: ['react']
+ dedupe: ['react'],
},
ssr: {
target: 'webworker',
- noExternal: ['this-should-be-replaced-by-the-boolean']
+ noExternal: ['this-should-be-replaced-by-the-boolean'],
},
plugins: [
{
config() {
return {
ssr: {
- noExternal: true
- }
+ noExternal: true,
+ },
}
- }
+ },
},
{
config() {
return {
ssr: {
- noExternal: ['this-should-not-replace-the-boolean']
- }
+ noExternal: ['this-should-not-replace-the-boolean'],
+ },
}
- }
- }
- ]
+ },
+ },
+ ],
})
diff --git a/playground/ssr-webworker/worker.js b/playground/ssr-webworker/worker.js
index d353688b0575eb..0f4d723a32c454 100644
--- a/playground/ssr-webworker/worker.js
+++ b/playground/ssr-webworker/worker.js
@@ -8,7 +8,7 @@ const isTest = !!process.env.TEST
export async function createServer() {
const mf = new Miniflare({
- scriptPath: path.resolve(__dirname, 'dist/worker/entry-worker.js')
+ scriptPath: path.resolve(__dirname, 'dist/worker/entry-worker.js'),
})
const app = mf.createServer()
@@ -20,6 +20,6 @@ if (!isTest) {
createServer().then(({ app }) =>
app.listen(5173, () => {
console.log('http://localhost:5173')
- })
+ }),
)
}
diff --git a/playground/tailwind-sourcemap/package.json b/playground/tailwind-sourcemap/package.json
index b78bfa043c38a3..00bcf91867c848 100644
--- a/playground/tailwind-sourcemap/package.json
+++ b/playground/tailwind-sourcemap/package.json
@@ -1,5 +1,5 @@
{
- "name": "test-tailwind-sourcemap",
+ "name": "@vitejs/test-tailwind-sourcemap",
"private": true,
"version": "0.0.0",
"scripts": {
diff --git a/playground/tailwind-sourcemap/postcss.config.js b/playground/tailwind-sourcemap/postcss.config.js
index ad6adc688915c1..1f45e3e358ac0b 100644
--- a/playground/tailwind-sourcemap/postcss.config.js
+++ b/playground/tailwind-sourcemap/postcss.config.js
@@ -2,6 +2,6 @@ console.log(__dirname + '/tailwind.config.js')
module.exports = {
plugins: {
- tailwindcss: { config: __dirname + '/tailwind.config.js' }
- }
+ tailwindcss: { config: __dirname + '/tailwind.config.js' },
+ },
}
diff --git a/playground/tailwind-sourcemap/tailwind.config.js b/playground/tailwind-sourcemap/tailwind.config.js
index f89a536ccd742f..dd95de6c830d45 100644
--- a/playground/tailwind-sourcemap/tailwind.config.js
+++ b/playground/tailwind-sourcemap/tailwind.config.js
@@ -1,7 +1,7 @@
module.exports = {
content: ['./index.html'],
theme: {
- extend: {}
+ extend: {},
},
- plugins: []
+ plugins: [],
}
diff --git a/playground/tailwind-sourcemap/vite.config.js b/playground/tailwind-sourcemap/vite.config.js
index 70fea77247bcd4..36815996e19f3d 100644
--- a/playground/tailwind-sourcemap/vite.config.js
+++ b/playground/tailwind-sourcemap/vite.config.js
@@ -3,9 +3,9 @@
*/
module.exports = {
css: {
- devSourcemap: true
+ devSourcemap: true,
},
build: {
- sourcemap: true
- }
+ sourcemap: true,
+ },
}
diff --git a/playground/tailwind/__test__/tailwind.spec.ts b/playground/tailwind/__test__/tailwind.spec.ts
index 444110de59bd37..a95fd347cd75eb 100644
--- a/playground/tailwind/__test__/tailwind.spec.ts
+++ b/playground/tailwind/__test__/tailwind.spec.ts
@@ -1,12 +1,12 @@
import { expect, test } from 'vitest'
import {
- browserLogs,
editFile,
getBgColor,
getColor,
isBuild,
page,
- untilUpdated
+ untilBrowserLogAfter,
+ untilUpdated,
} from '~utils'
test('should render', async () => {
@@ -15,75 +15,69 @@ test('should render', async () => {
if (!isBuild) {
test('regenerate CSS and HMR (glob pattern)', async () => {
- browserLogs.length = 0
const el = await page.$('#pagetitle')
const el2 = await page.$('#helloroot')
-
expect(await getColor(el)).toBe('rgb(11, 22, 33)')
- editFile('src/views/Page.vue', (code) =>
- code.replace('|Page title|', '|Page title updated|')
+ await untilBrowserLogAfter(
+ () =>
+ editFile('src/views/Page.vue', (code) =>
+ code.replace('|Page title|', '|Page title updated|'),
+ ),
+ [
+ '[vite] css hot updated: /index.css',
+ '[vite] hot updated: /src/views/Page.vue',
+ ],
+ true,
)
await untilUpdated(() => el.textContent(), '|Page title updated|')
- expect(browserLogs).toMatchObject([
- '[vite] css hot updated: /index.css',
- '[vite] hot updated: /src/views/Page.vue'
- ])
-
- browserLogs.length = 0
-
- editFile('src/components/HelloWorld.vue', (code) =>
- code.replace('text-gray-800', 'text-[rgb(10,20,30)]')
+ await untilBrowserLogAfter(
+ () =>
+ editFile('src/components/HelloWorld.vue', (code) =>
+ code.replace('text-gray-800', 'text-[rgb(10,20,30)]'),
+ ),
+ [
+ '[vite] css hot updated: /index.css',
+ '[vite] hot updated: /src/components/HelloWorld.vue',
+ ],
+ true,
)
-
await untilUpdated(() => getColor(el2), 'rgb(10, 20, 30)')
-
- expect(browserLogs).toMatchObject([
- '[vite] css hot updated: /index.css',
- '[vite] hot updated: /src/components/HelloWorld.vue'
- ])
-
- browserLogs.length = 0
})
test('regenerate CSS and HMR (relative path)', async () => {
- browserLogs.length = 0
const el = await page.$('h1')
-
expect(await getColor(el)).toBe('black')
- editFile('src/App.vue', (code) =>
- code.replace('text-black', 'text-[rgb(11,22,33)]')
+ await untilBrowserLogAfter(
+ () =>
+ editFile('src/App.vue', (code) =>
+ code.replace('text-black', 'text-[rgb(11,22,33)]'),
+ ),
+ [
+ '[vite] css hot updated: /index.css',
+ '[vite] hot updated: /src/App.vue',
+ ],
+ true,
)
-
await untilUpdated(() => getColor(el), 'rgb(11, 22, 33)')
-
- expect(browserLogs).toMatchObject([
- '[vite] css hot updated: /index.css',
- '[vite] hot updated: /src/App.vue'
- ])
-
- browserLogs.length = 0
})
test('regenerate CSS and HMR (pug template)', async () => {
- browserLogs.length = 0
const el = await page.$('.pug')
-
expect(await getBgColor(el)).toBe('rgb(248, 113, 113)')
- editFile('src/components/PugTemplate.vue', (code) =>
- code.replace('bg-red-400', 'bg-red-600')
+ await untilBrowserLogAfter(
+ () =>
+ editFile('src/components/PugTemplate.vue', (code) =>
+ code.replace('bg-red-400', 'bg-red-600'),
+ ),
+ [
+ '[vite] css hot updated: /index.css',
+ '[vite] hot updated: /src/components/PugTemplate.vue?vue&type=template&lang.js',
+ ],
)
-
await untilUpdated(() => getBgColor(el), 'rgb(220, 38, 38)')
-
- expect(browserLogs).toContain('[vite] css hot updated: /index.css')
- expect(browserLogs).toContain(
- '[vite] hot updated: /src/components/PugTemplate.vue?vue&type=template&lang.js'
- )
-
- browserLogs.length = 0
})
}
diff --git a/playground/tailwind/package.json b/playground/tailwind/package.json
index ec823d2016ef3b..5751b22553ad6a 100644
--- a/playground/tailwind/package.json
+++ b/playground/tailwind/package.json
@@ -1,5 +1,5 @@
{
- "name": "test-tailwind",
+ "name": "@vitejs/test-tailwind",
"private": true,
"version": "0.0.0",
"scripts": {
@@ -15,7 +15,7 @@
"vue-router": "^4.1.6"
},
"devDependencies": {
- "@vitejs/plugin-vue": "workspace:*",
+ "@vitejs/plugin-vue": "^4.0.0-alpha.2",
"ts-node": "^10.9.1"
}
}
diff --git a/playground/tailwind/postcss.config.ts b/playground/tailwind/postcss.config.ts
index 381d8cbd107f81..065645ac26db0c 100644
--- a/playground/tailwind/postcss.config.ts
+++ b/playground/tailwind/postcss.config.ts
@@ -2,6 +2,6 @@
module.exports = {
plugins: {
tailwindcss: { config: __dirname + '/tailwind.config.js' },
- autoprefixer: {}
- }
+ autoprefixer: {},
+ },
}
diff --git a/playground/tailwind/src/router.ts b/playground/tailwind/src/router.ts
index 2a8c3cd0dd966f..10e3980cb07cb8 100644
--- a/playground/tailwind/src/router.ts
+++ b/playground/tailwind/src/router.ts
@@ -8,9 +8,9 @@ const router = createRouter({
routes: [
{
path: '/',
- component: Page
- }
- ]
+ component: Page,
+ },
+ ],
})
export default router
diff --git a/playground/tailwind/src/views/Page.vue b/playground/tailwind/src/views/Page.vue
index 12fc2605339f1d..76f8aabf13d7d3 100644
--- a/playground/tailwind/src/views/Page.vue
+++ b/playground/tailwind/src/views/Page.vue
@@ -26,8 +26,8 @@ export default defineComponent({
return {
name,
- val
+ val,
}
- }
+ },
})
diff --git a/playground/tailwind/tailwind.config.js b/playground/tailwind/tailwind.config.js
index d346b0549e2b35..5b9644f4f646d5 100644
--- a/playground/tailwind/tailwind.config.js
+++ b/playground/tailwind/tailwind.config.js
@@ -3,13 +3,13 @@ module.exports = {
// Before editing this section, make sure no paths are matching with `/src/App.vue`
// Look https://github.com/vitejs/vite/pull/6959 for more details
__dirname + '/src/{components,views}/**/*.vue',
- __dirname + '/src/App.vue'
+ __dirname + '/src/App.vue',
],
theme: {
- extend: {}
+ extend: {},
},
variants: {
- extend: {}
+ extend: {},
},
- plugins: []
+ plugins: [],
}
diff --git a/playground/tailwind/vite.config.ts b/playground/tailwind/vite.config.ts
index ea895225460d48..d3680f6c39c3e3 100644
--- a/playground/tailwind/vite.config.ts
+++ b/playground/tailwind/vite.config.ts
@@ -4,17 +4,17 @@ import vue from '@vitejs/plugin-vue'
export default defineConfig({
resolve: {
alias: {
- '/@': __dirname
- }
+ '/@': __dirname,
+ },
},
plugins: [vue()],
build: {
// to make tests faster
- minify: false
+ minify: false,
},
server: {
// This option caused issues with HMR,
// although it should not affect the build
- origin: 'http://localhost:8080'
- }
+ origin: 'http://localhost:8080',
+ },
})
diff --git a/playground/test-utils.ts b/playground/test-utils.ts
index c27e8ffe8285df..d2aafaff4b2aca 100644
--- a/playground/test-utils.ts
+++ b/playground/test-utils.ts
@@ -24,21 +24,19 @@ export const ports = {
'legacy/client-and-ssr': 9523,
'ssr-deps': 9600,
'ssr-html': 9601,
- 'ssr-pug': 9602,
- 'ssr-react': 9603,
- 'ssr-vue': 9604,
- 'ssr-webworker': 9605,
+ 'ssr-noexternal': 9602,
+ 'ssr-pug': 9603,
+ 'ssr-webworker': 9606,
'css/postcss-caching': 5005,
'css/postcss-plugins-different-dir': 5006,
- 'css/dynamic-import': 5007
+ 'css/dynamic-import': 5007,
}
export const hmrPorts = {
'optimize-missing-deps': 24680,
'ssr-deps': 24681,
'ssr-html': 24682,
- 'ssr-pug': 24683,
- 'ssr-react': 24684,
- 'ssr-vue': 24685
+ 'ssr-noexternal': 24683,
+ 'ssr-pug': 24684,
}
const hexToNameMap: Record = {}
@@ -98,7 +96,7 @@ export function readFile(filename: string): string {
export function editFile(
filename: string,
replacer: (str: string) => string,
- runInBuild: boolean = false
+ runInBuild: boolean = false,
): void {
if (isBuild && !runInBuild) return
filename = path.resolve(testDir, filename)
@@ -123,7 +121,7 @@ export function listAssets(base = ''): string[] {
export function findAssetFile(
match: string | RegExp,
base = '',
- assets = 'assets'
+ assets = 'assets',
): string {
const assetsDir = path.join(testDir, 'dist', base, assets)
let files: string[]
@@ -143,7 +141,7 @@ export function findAssetFile(
export function readManifest(base = ''): Manifest {
return JSON.parse(
- fs.readFileSync(path.join(testDir, 'dist', base, 'manifest.json'), 'utf-8')
+ fs.readFileSync(path.join(testDir, 'dist', base, 'manifest.json'), 'utf-8'),
)
}
@@ -153,7 +151,7 @@ export function readManifest(base = ''): Manifest {
export async function untilUpdated(
poll: () => string | Promise,
expected: string,
- runInBuild = false
+ runInBuild = false,
): Promise {
if (isBuild && !runInBuild) return
const maxTries = process.env.CI ? 200 : 50
@@ -173,7 +171,7 @@ export async function untilUpdated(
*/
export async function withRetry(
func: () => Promise,
- runInBuild = false
+ runInBuild = false,
): Promise {
if (isBuild && !runInBuild) return
const maxTries = process.env.CI ? 200 : 50
@@ -187,12 +185,29 @@ export async function withRetry(
await func()
}
+type UntilBrowserLogAfterCallback = (logs: string[]) => PromiseLike | void
+
+export async function untilBrowserLogAfter(
+ operation: () => any,
+ target: string | RegExp | Array,
+ expectOrder?: boolean,
+ callback?: UntilBrowserLogAfterCallback,
+): Promise
export async function untilBrowserLogAfter(
operation: () => any,
target: string | RegExp | Array,
- callback?: (logs: string[]) => PromiseLike | void
+ callback?: UntilBrowserLogAfterCallback,
+): Promise
+export async function untilBrowserLogAfter(
+ operation: () => any,
+ target: string | RegExp | Array,
+ arg3?: boolean | UntilBrowserLogAfterCallback,
+ arg4?: UntilBrowserLogAfterCallback,
): Promise {
- const promise = untilBrowserLog(target, false)
+ const expectOrder = typeof arg3 === 'boolean' ? arg3 : false
+ const callback = typeof arg3 === 'boolean' ? arg4 : arg3
+
+ const promise = untilBrowserLog(target, expectOrder)
await operation()
const logs = await promise
if (callback) {
@@ -203,7 +218,7 @@ export async function untilBrowserLogAfter(
async function untilBrowserLog(
target?: string | RegExp | Array,
- expectOrder = true
+ expectOrder = true,
): Promise {
let resolve: () => void
let reject: (reason: any) => void
@@ -234,7 +249,7 @@ async function untilBrowserLog(
const remainingMatchers = target.map(isMatch)
processMsg = (text: string) => {
const nextIndex = remainingMatchers.findIndex((matcher) =>
- matcher(text)
+ matcher(text),
)
if (nextIndex >= 0) {
remainingMatchers.splice(nextIndex, 1)
@@ -285,7 +300,7 @@ export const formatSourcemapForSnapshot = (map: any): any => {
// helper function to kill process, uses taskkill on windows to ensure child process is killed too
export async function killProcess(
- serverProcess: ExecaChildProcess
+ serverProcess: ExecaChildProcess,
): Promise {
if (isWindows) {
try {
diff --git a/playground/transform-plugin/package.json b/playground/transform-plugin/package.json
index a1e12d4aa62a26..dfe4f9637b7a52 100644
--- a/playground/transform-plugin/package.json
+++ b/playground/transform-plugin/package.json
@@ -1,5 +1,5 @@
{
- "name": "test-transform-plugin",
+ "name": "@vitejs/test-transform-plugin",
"private": true,
"version": "0.0.0",
"scripts": {
diff --git a/playground/transform-plugin/vite.config.js b/playground/transform-plugin/vite.config.js
index 0b9ddb97c34304..b451ca77d6a398 100644
--- a/playground/transform-plugin/vite.config.js
+++ b/playground/transform-plugin/vite.config.js
@@ -17,9 +17,9 @@ const transformPlugin = {
${code}
`
}
- }
+ },
}
module.exports = {
- plugins: [transformPlugin]
+ plugins: [transformPlugin],
}
diff --git a/playground/tsconfig-json-load-error/__tests__/tsconfig-json-load-error.spec.ts b/playground/tsconfig-json-load-error/__tests__/tsconfig-json-load-error.spec.ts
index 3ccc857c1f8a5b..5b3a0dfcd98138 100644
--- a/playground/tsconfig-json-load-error/__tests__/tsconfig-json-load-error.spec.ts
+++ b/playground/tsconfig-json-load-error/__tests__/tsconfig-json-load-error.spec.ts
@@ -7,14 +7,14 @@ import {
isServe,
page,
readFile,
- untilUpdated
+ untilUpdated,
} from '~utils'
describe.runIf(isBuild)('build', () => {
test('should throw an error on build', () => {
expect(serveError).toBeTruthy()
expect(serveError.message).toMatch(
- /^parsing .* failed: SyntaxError: Unexpected token \} in JSON at position \d+$/
+ /^parsing .* failed: SyntaxError: Unexpected token \} in JSON at position \d+$/,
)
clearServeError() // got expected error, null it here so testsuite does not fail from rethrow in afterAll
})
@@ -46,7 +46,7 @@ describe.runIf(isServe)('server', () => {
})
// use regex with variable filename and position values because they are different on win
expect(message).toMatch(
- /^parsing .* failed: SyntaxError: Unexpected token \} in JSON at position \d+$/
+ /^parsing .* failed: SyntaxError: Unexpected token \} in JSON at position \d+$/,
)
})
diff --git a/playground/tsconfig-json-load-error/package.json b/playground/tsconfig-json-load-error/package.json
index b518a721d9ee62..e970c3920977ac 100644
--- a/playground/tsconfig-json-load-error/package.json
+++ b/playground/tsconfig-json-load-error/package.json
@@ -1,5 +1,5 @@
{
- "name": "tsconfig-json-load-error",
+ "name": "@vitejs/test-tsconfig-json-load-error",
"private": true,
"version": "0.0.0",
"scripts": {
diff --git a/playground/tsconfig-json/__tests__/tsconfig-json.spec.ts b/playground/tsconfig-json/__tests__/tsconfig-json.spec.ts
index f447174cf43f23..a5e2dd47d191cd 100644
--- a/playground/tsconfig-json/__tests__/tsconfig-json.spec.ts
+++ b/playground/tsconfig-json/__tests__/tsconfig-json.spec.ts
@@ -28,9 +28,9 @@ describe('transformWithEsbuild', () => {
const result = await transformWithEsbuild(mainContent, main, {
tsconfigRaw: {
compilerOptions: {
- useDefineForClassFields: false
- }
- }
+ useDefineForClassFields: false,
+ },
+ },
})
// "importsNotUsedAsValues": "preserve" from tsconfig.json should still work
expect(result.code).toContain('import "./not-used-type";')
@@ -44,7 +44,7 @@ describe('transformWithEsbuild', () => {
"compilerOptions": {
"useDefineForClassFields": false
}
- }`
+ }`,
})
// "importsNotUsedAsValues": "preserve" from tsconfig.json should not be read
// and defaults to "remove"
@@ -58,13 +58,13 @@ describe('transformWithEsbuild', () => {
tsconfigRaw: {
compilerOptions: {
useDefineForClassFields: false,
- preserveValueImports: true
- }
- }
+ preserveValueImports: true,
+ },
+ },
})
// "importsNotUsedAsValues": "preserve" from tsconfig.json should still work
expect(result.code).toContain(
- 'import { MainTypeOnlyClass } from "./not-used-type";'
+ 'import { MainTypeOnlyClass } from "./not-used-type";',
)
})
})
diff --git a/playground/tsconfig-json/package.json b/playground/tsconfig-json/package.json
index f236dbdc5fe77c..db1807dbe92723 100644
--- a/playground/tsconfig-json/package.json
+++ b/playground/tsconfig-json/package.json
@@ -1,5 +1,5 @@
{
- "name": "tsconfig-json",
+ "name": "@vitejs/test-tsconfig-json",
"private": true,
"version": "0.0.0",
"scripts": {
diff --git a/playground/vitestGlobalSetup.ts b/playground/vitestGlobalSetup.ts
index 69430aaf3c3b38..7a63d6d12cc7ee 100644
--- a/playground/vitestGlobalSetup.ts
+++ b/playground/vitestGlobalSetup.ts
@@ -17,7 +17,7 @@ export async function setup(): Promise {
headless: !process.env.VITE_DEBUG_SERVE,
args: process.env.CI
? ['--no-sandbox', '--disable-setuid-sandbox']
- : undefined
+ : undefined,
})
await fs.mkdirp(DIR)
@@ -32,12 +32,12 @@ export async function setup(): Promise {
filter(file) {
file = file.replace(/\\/g, '/')
return !file.includes('__tests__') && !file.match(/dist(\/|$)/)
- }
+ },
})
.catch(async (error) => {
if (error.code === 'EPERM' && error.syscall === 'symlink') {
throw new Error(
- 'Could not create symlinks. On Windows, consider activating Developer Mode to allow non-admin users to create symlinks by following the instructions at https://docs.microsoft.com/en-us/windows/apps/get-started/enable-your-device-for-development.'
+ 'Could not create symlinks. On Windows, consider activating Developer Mode to allow non-admin users to create symlinks by following the instructions at https://docs.microsoft.com/en-us/windows/apps/get-started/enable-your-device-for-development.',
)
} else {
throw error
diff --git a/playground/vitestSetup.ts b/playground/vitestSetup.ts
index e768f898caf58e..4a43252a0e251b 100644
--- a/playground/vitestSetup.ts
+++ b/playground/vitestSetup.ts
@@ -9,14 +9,14 @@ import type {
PluginOption,
ResolvedConfig,
UserConfig,
- ViteDevServer
+ ViteDevServer,
} from 'vite'
import {
build,
createServer,
loadConfigFromFile,
mergeConfig,
- preview
+ preview,
} from 'vite'
import type { Browser, Page } from 'playwright-chromium'
import type { RollupError, RollupWatcher, RollupWatcherEvent } from 'rollup'
@@ -32,7 +32,7 @@ export const isServe = !isBuild
export const isWindows = process.platform === 'win32'
export const viteBinPath = path.posix.join(
workspaceRoot,
- 'packages/vite/bin/vite.js'
+ 'packages/vite/bin/vite.js',
)
// #endregion
@@ -151,7 +151,7 @@ beforeAll(async (s) => {
const testCustomServe = [
resolve(dirname(testPath), 'serve.ts'),
- resolve(dirname(testPath), 'serve.js')
+ resolve(dirname(testPath), 'serve.js'),
].find((i) => fs.existsSync(i))
if (testCustomServe) {
@@ -196,10 +196,10 @@ function loadConfigFromDir(dir: string) {
return loadConfigFromFile(
{
command: isBuild ? 'build' : 'serve',
- mode: isBuild ? 'production' : 'development'
+ mode: isBuild ? 'production' : 'development',
},
undefined,
- dir
+ dir,
)
}
@@ -227,21 +227,21 @@ export async function startDefaultServe(): Promise {
// During tests we edit the files too fast and sometimes chokidar
// misses change events, so enforce polling for consistency
usePolling: true,
- interval: 100
+ interval: 100,
},
host: true,
fs: {
- strict: !isBuild
- }
+ strict: !isBuild,
+ },
},
build: {
// esbuild do not minify ES lib output since that would remove pure annotations and break tree-shaking
// skip transpilation during tests to make it faster
target: 'esnext',
// tests are flaky when `emptyOutDir` is `true`
- emptyOutDir: false
+ emptyOutDir: false,
},
- customLogger: createInMemoryLogger(serverLogs)
+ customLogger: createInMemoryLogger(serverLogs),
}
setupConsoleWarnCollector(serverLogs)
@@ -264,7 +264,7 @@ export async function startDefaultServe(): Promise {
name: 'vite-plugin-watcher',
configResolved(config) {
resolvedConfig = config
- }
+ },
})
options.plugins = [resolvedPlugin()]
const testConfig = mergeConfig(options, config || {})
@@ -294,7 +294,7 @@ export async function startDefaultServe(): Promise {
* Send the rebuild complete message in build watch
*/
export async function notifyRebuildComplete(
- watcher: RollupWatcher
+ watcher: RollupWatcher,
): Promise {
let resolveFn: undefined | (() => void)
const callback = (event: RollupWatcherEvent): void => {
@@ -335,7 +335,7 @@ function createInMemoryLogger(logs: string[]): Logger {
if (opts?.error) {
loggedErrors.add(opts.error)
}
- }
+ },
}
return logger
diff --git a/playground/vue-jsx/Comp.tsx b/playground/vue-jsx/Comp.tsx
deleted file mode 100644
index fe8add4d428a2c..00000000000000
--- a/playground/vue-jsx/Comp.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { defineComponent, ref } from 'vue'
-
-const Default = defineComponent(() => {
- const count = ref(3)
- const inc = () => count.value++
-
- return () => (
-
- )
-})
-
-export default Default
diff --git a/playground/vue-jsx/Comps.jsx b/playground/vue-jsx/Comps.jsx
deleted file mode 100644
index e5cc405a77581b..00000000000000
--- a/playground/vue-jsx/Comps.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { defineComponent, ref } from 'vue'
-
-export const Named = defineComponent(() => {
- const count = ref(0)
- const inc = () => count.value++
-
- return () => (
-
- )
-})
-
-const NamedSpec = defineComponent(() => {
- const count = ref(1)
- const inc = () => count.value++
-
- return () => (
-
- )
-})
-export { NamedSpec }
-
-export default defineComponent(() => {
- const count = ref(2)
- const inc = () => count.value++
-
- return () => (
-
- )
-})
diff --git a/playground/vue-jsx/OtherExt.tesx b/playground/vue-jsx/OtherExt.tesx
deleted file mode 100644
index 7ae585a014c566..00000000000000
--- a/playground/vue-jsx/OtherExt.tesx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { defineComponent } from 'vue'
-
-const Default = defineComponent(() => {
- return () => (
- 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 @@
-
- Ts Import
- {{ 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 (
- <>
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-createApp(App).mount('#app')
diff --git a/playground/vue-jsx/package.json b/playground/vue-jsx/package.json
deleted file mode 100644
index 93cc7b3ece32d8..00000000000000
--- a/playground/vue-jsx/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "name": "test-vue-jsx",
- "private": true,
- "version": "0.0.0",
- "scripts": {
- "dev": "vite",
- "build": "vite build",
- "debug": "node --inspect-brk ../../packages/vite/bin/vite",
- "preview": "vite preview"
- },
- "dependencies": {
- "vue": "^3.2.45"
- },
- "devDependencies": {
- "@vitejs/plugin-vue": "workspace:*",
- "@vitejs/plugin-vue-jsx": "workspace:*"
- }
-}
diff --git a/playground/vue-jsx/setup-syntax-jsx.vue b/playground/vue-jsx/setup-syntax-jsx.vue
deleted file mode 100644
index 0b16be7e773280..00000000000000
--- a/playground/vue-jsx/setup-syntax-jsx.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-
- {{ count }}
-
-
diff --git a/playground/vue-jsx/vite.config.js b/playground/vue-jsx/vite.config.js
deleted file mode 100644
index 2f4ea255c95094..00000000000000
--- a/playground/vue-jsx/vite.config.js
+++ /dev/null
@@ -1,42 +0,0 @@
-const vueJsxPlugin = require('@vitejs/plugin-vue-jsx')
-const vuePlugin = require('@vitejs/plugin-vue')
-
-/**
- * @type {import('vite').UserConfig}
- */
-module.exports = {
- plugins: [
- vueJsxPlugin({
- include: [/\.tesx$/, /\.[jt]sx$/]
- }),
- vuePlugin(),
- {
- name: 'jsx-query-plugin',
- transform(code, id) {
- if (id.includes('?query=true')) {
- return `
-import { createVNode as _createVNode } from "vue";
-import { defineComponent, ref } from 'vue';
-export default defineComponent(() => {
- const count = ref(6);
-
- const inc = () => count.value++;
-
- return () => _createVNode("button", {
- "class": "jsx-with-query",
- "onClick": inc
- }, [count.value]);
-});
-`
- }
- }
- }
- ],
- build: {
- // to make tests faster
- minify: false
- },
- optimizeDeps: {
- disabled: true
- }
-}
diff --git a/playground/vue-legacy/Main.vue b/playground/vue-legacy/Main.vue
deleted file mode 100644
index a582c2e6aa6d62..00000000000000
--- a/playground/vue-legacy/Main.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-
-
Main.vue
-
-
- {{ css }}
-
-
-
- 
-```
-
-Is the same as:
-
-```vue
-
-
-