CSS
@import from SASS _partial: This should be orchid
url starts with variable
++ url starts with function call +
Imported SASS string:
@@ -143,6 +146,10 @@
CSS
@import dependency that @import another dependency: this should be purple
++ @import dependency that has @import with a css extension pointing to another + dependency: this should be purple +
PostCSS dir-dependency: this should be grey
@@ -178,6 +185,8 @@
CSS
+URL Support
+Raw Support
diff --git a/playground/css/main.js b/playground/css/main.js index b0b405a96a7baf..204d95768e88d4 100644 --- a/playground/css/main.js +++ b/playground/css/main.js @@ -6,6 +6,9 @@ import './less.less' import './stylus.styl' import './manual-chunk.css' +import urlCss from './url-imported.css?url' +appendLinkStylesheet(urlCss) + import rawCss from './raw-imported.css?raw' text('.raw-imported-css', rawCss) @@ -43,7 +46,7 @@ import './layered/index.css' import './dep.css' import './glob-dep.css' -// eslint-disable-next-line import/order +// eslint-disable-next-line i/order import { barModuleClasses } from '@vitejs/test-css-js-dep' document .querySelector('.css-js-dep-module') @@ -53,6 +56,13 @@ function text(el, text) { document.querySelector(el).textContent = text } +function appendLinkStylesheet(href) { + const link = document.createElement('link') + link.rel = 'stylesheet' + link.href = href + document.head.appendChild(link) +} + if (import.meta.hot) { import.meta.hot.accept('./mod.module.css', (newMod) => { const list = document.querySelector('.modules').classList diff --git a/playground/css/nested/_index.scss b/playground/css/nested/_index.scss index fee2eb88b168f2..7a0f23ec27f6eb 100644 --- a/playground/css/nested/_index.scss +++ b/playground/css/nested/_index.scss @@ -1,3 +1,5 @@ +@use 'sass:string'; + @import './css-in-scss.css'; .sass-at-import { @@ -15,3 +17,9 @@ $var: '/ok.png'; background: url($var); background-position: center; } + +$var2: '/OK.PNG'; +.sass-url-starts-with-function-call { + background: url(to-lower-case($var2)); + background-position: center; +} diff --git a/playground/css/package.json b/playground/css/package.json index f80acbf572675e..1a74ea49a1f1a2 100644 --- a/playground/css/package.json +++ b/playground/css/package.json @@ -20,10 +20,11 @@ "@vitejs/test-css-dep-exports": "link:./css-dep-exports", "@vitejs/test-css-js-dep": "file:./css-js-dep", "@vitejs/test-css-proxy-dep": "file:./css-proxy-dep", + "@vitejs/test-scss-proxy-dep": "file:./scss-proxy-dep", "fast-glob": "^3.3.2", "less": "^4.2.0", "postcss-nested": "^6.0.1", - "sass": "^1.69.5", + "sass": "^1.70.0", "stylus": "^0.62.0", "sugarss": "^4.0.1" } diff --git a/playground/css/raw-imported.css b/playground/css/raw-imported.css index ac0aee96390c33..ee681e650b0b47 100644 --- a/playground/css/raw-imported.css +++ b/playground/css/raw-imported.css @@ -1,3 +1,6 @@ -.raw-imported { - color: yellow; +.raw { + /* should not be transformed by postcss */ + &-imported { + color: yellow; + } } diff --git a/playground/css/sass.scss b/playground/css/sass.scss index 4105e1aefa9c55..f2f9e685630597 100644 --- a/playground/css/sass.scss +++ b/playground/css/sass.scss @@ -2,6 +2,7 @@ @import '=/nested/partial'; // sass convention: omitting leading _ for partials @import '@vitejs/test-css-dep'; // package w/ sass entry points @import '@vitejs/test-css-dep-exports'; // package with a sass export mapping +@import '@vitejs/test-scss-proxy-dep'; // package with a sass proxy import @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/scss-proxy-dep-nested/index.css b/playground/css/scss-proxy-dep-nested/index.css new file mode 100644 index 00000000000000..4c7e3b16e62597 --- /dev/null +++ b/playground/css/scss-proxy-dep-nested/index.css @@ -0,0 +1,3 @@ +.scss-proxy-dep { + color: purple; +} diff --git a/playground/css/scss-proxy-dep-nested/package.json b/playground/css/scss-proxy-dep-nested/package.json new file mode 100644 index 00000000000000..4f7a99bb559207 --- /dev/null +++ b/playground/css/scss-proxy-dep-nested/package.json @@ -0,0 +1,5 @@ +{ + "name": "@vitejs/test-scss-proxy-dep-nested", + "private": true, + "version": "1.0.0" +} diff --git a/playground/css/scss-proxy-dep/index.scss b/playground/css/scss-proxy-dep/index.scss new file mode 100644 index 00000000000000..2b1a7a543cd776 --- /dev/null +++ b/playground/css/scss-proxy-dep/index.scss @@ -0,0 +1 @@ +@import '@vitejs/test-scss-proxy-dep-nested/index.css'; diff --git a/playground/css/scss-proxy-dep/package.json b/playground/css/scss-proxy-dep/package.json new file mode 100644 index 00000000000000..a2749e7ae3e957 --- /dev/null +++ b/playground/css/scss-proxy-dep/package.json @@ -0,0 +1,9 @@ +{ + "name": "@vitejs/test-scss-proxy-dep", + "private": true, + "version": "1.0.0", + "sass": "index.scss", + "dependencies": { + "@vitejs/test-scss-proxy-dep-nested": "file:../scss-proxy-dep-nested" + } +} diff --git a/playground/css/url-imported.css b/playground/css/url-imported.css new file mode 100644 index 00000000000000..95fec50ab2c554 --- /dev/null +++ b/playground/css/url-imported.css @@ -0,0 +1,6 @@ +.url { + /* should be transformed by postcss */ + &-imported-css { + color: yellow; + } +} diff --git a/playground/css/vite.config.js b/playground/css/vite.config.js index 3d301ae03bec3e..5ac9d448a2734a 100644 --- a/playground/css/vite.config.js +++ b/playground/css/vite.config.js @@ -82,5 +82,6 @@ export default defineConfig({ }, }, }, + preprocessorMaxWorkers: true, }, }) diff --git a/playground/data-uri/__tests__/data-uri.spec.ts b/playground/data-uri/__tests__/data-uri.spec.ts index 7d9ab64594c663..b18012e59d380c 100644 --- a/playground/data-uri/__tests__/data-uri.spec.ts +++ b/playground/data-uri/__tests__/data-uri.spec.ts @@ -9,6 +9,18 @@ test('base64', async () => { expect(await page.textContent('.base64')).toBe('hi') }) +test('svg data uri minify', async () => { + const sqdqs = await page.getByTestId('sqdqs').boundingBox() + const sqsdqs = await page.getByTestId('sqsdqs').boundingBox() + const dqsqs = await page.getByTestId('dqsqs').boundingBox() + const dqssqs = await page.getByTestId('dqssqs').boundingBox() + + expect(sqdqs.height).toBe(100) + expect(sqsdqs.height).toBe(100) + expect(dqsqs.height).toBe(100) + expect(dqssqs.height).toBe(100) +}) + test.runIf(isBuild)('should compile away the import for build', async () => { const file = findAssetFile('index') expect(file).not.toMatch('import') diff --git a/playground/data-uri/double-quote-in-single-quotes.svg b/playground/data-uri/double-quote-in-single-quotes.svg new file mode 100644 index 00000000000000..d3a5ffc19e3701 --- /dev/null +++ b/playground/data-uri/double-quote-in-single-quotes.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/playground/data-uri/double-quotes-in-single-quotes.svg b/playground/data-uri/double-quotes-in-single-quotes.svg new file mode 100644 index 00000000000000..fb8f151a23a598 --- /dev/null +++ b/playground/data-uri/double-quotes-in-single-quotes.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/playground/data-uri/index.html b/playground/data-uri/index.html index 32cc458940e60c..597c3a204f36c9 100644 --- a/playground/data-uri/index.html +++ b/playground/data-uri/index.html @@ -12,3 +12,10 @@ document.querySelector(el).textContent = text } + + + + + + + diff --git a/playground/data-uri/main.js b/playground/data-uri/main.js new file mode 100644 index 00000000000000..63326fdb1b4781 --- /dev/null +++ b/playground/data-uri/main.js @@ -0,0 +1,18 @@ +import sqdqs from './single-quote-in-double-quotes.svg' +import sqsdqs from './single-quotes-in-double-quotes.svg' +import dqsqs from './double-quote-in-single-quotes.svg' +import dqssqs from './double-quotes-in-single-quotes.svg' + +document.querySelector('#sqdqs').innerHTML = ` +Nested Entry
Denied
+ + + diff --git a/playground/hmr-ssr/accept-exports/main-accepted/callback.ts b/playground/hmr-ssr/accept-exports/main-accepted/callback.ts new file mode 100644 index 00000000000000..8dc4c42a24db99 --- /dev/null +++ b/playground/hmr-ssr/accept-exports/main-accepted/callback.ts @@ -0,0 +1,7 @@ +export const x = 'X' + +if (import.meta.hot) { + import.meta.hot.acceptExports(['x'], (m) => { + log(`reloaded >>> ${m.x}`) + }) +} diff --git a/playground/hmr-ssr/accept-exports/main-accepted/dep.ts b/playground/hmr-ssr/accept-exports/main-accepted/dep.ts new file mode 100644 index 00000000000000..b9f67fd33a75f8 --- /dev/null +++ b/playground/hmr-ssr/accept-exports/main-accepted/dep.ts @@ -0,0 +1 @@ +export default 'dep0' diff --git a/playground/hmr-ssr/accept-exports/main-accepted/index.ts b/playground/hmr-ssr/accept-exports/main-accepted/index.ts new file mode 100644 index 00000000000000..2e798337101607 --- /dev/null +++ b/playground/hmr-ssr/accept-exports/main-accepted/index.ts @@ -0,0 +1 @@ +import './main-accepted' diff --git a/playground/hmr-ssr/accept-exports/main-accepted/main-accepted.ts b/playground/hmr-ssr/accept-exports/main-accepted/main-accepted.ts new file mode 100644 index 00000000000000..74afdbfa7e378c --- /dev/null +++ b/playground/hmr-ssr/accept-exports/main-accepted/main-accepted.ts @@ -0,0 +1,7 @@ +import def, { a } from './target' +import { x } from './callback' + +// we don't want to pollute other checks' logs... +if (0 > 1) log(x) + +log(`>>>>>> ${a} ${def}`) diff --git a/playground/hmr-ssr/accept-exports/main-accepted/target.ts b/playground/hmr-ssr/accept-exports/main-accepted/target.ts new file mode 100644 index 00000000000000..c4826524c3c83d --- /dev/null +++ b/playground/hmr-ssr/accept-exports/main-accepted/target.ts @@ -0,0 +1,16 @@ +import dep from './dep' + +export const a = 'A0' + +const bValue = 'B0' +export { bValue as b } + +const def = 'D0' + +export default def + +log(`<<<<<< ${a} ${bValue} ${def} ; ${dep}`) + +if (import.meta.hot) { + import.meta.hot.acceptExports(['a', 'default']) +} diff --git a/playground/hmr-ssr/accept-exports/main-non-accepted/default.ts b/playground/hmr-ssr/accept-exports/main-non-accepted/default.ts new file mode 100644 index 00000000000000..6ffaecaf43c588 --- /dev/null +++ b/playground/hmr-ssr/accept-exports/main-non-accepted/default.ts @@ -0,0 +1,11 @@ +export const x = 'y' + +const def = 'def0' + +export default def + +log(`<<< default: ${def}`) + +if (import.meta.hot) { + import.meta.hot.acceptExports(['x']) +} diff --git a/playground/hmr-ssr/accept-exports/main-non-accepted/dep.ts b/playground/hmr-ssr/accept-exports/main-non-accepted/dep.ts new file mode 100644 index 00000000000000..b9f67fd33a75f8 --- /dev/null +++ b/playground/hmr-ssr/accept-exports/main-non-accepted/dep.ts @@ -0,0 +1 @@ +export default 'dep0' diff --git a/playground/hmr-ssr/accept-exports/main-non-accepted/index.ts b/playground/hmr-ssr/accept-exports/main-non-accepted/index.ts new file mode 100644 index 00000000000000..3841d7997c4c26 --- /dev/null +++ b/playground/hmr-ssr/accept-exports/main-non-accepted/index.ts @@ -0,0 +1 @@ +import './main-non-accepted.ts' diff --git a/playground/hmr-ssr/accept-exports/main-non-accepted/main-non-accepted.ts b/playground/hmr-ssr/accept-exports/main-non-accepted/main-non-accepted.ts new file mode 100644 index 00000000000000..a159ced50a7f50 --- /dev/null +++ b/playground/hmr-ssr/accept-exports/main-non-accepted/main-non-accepted.ts @@ -0,0 +1,4 @@ +import { a } from './named' +import def from './default' + +log(`>>>>>> ${a} ${def}`) diff --git a/playground/hmr-ssr/accept-exports/main-non-accepted/named.ts b/playground/hmr-ssr/accept-exports/main-non-accepted/named.ts new file mode 100644 index 00000000000000..435d3c8cb50ae8 --- /dev/null +++ b/playground/hmr-ssr/accept-exports/main-non-accepted/named.ts @@ -0,0 +1,11 @@ +import dep from './dep' + +export const a = 'A0' + +export const b = 'B0' + +log(`<<< named: ${a} ; ${dep}`) + +if (import.meta.hot) { + import.meta.hot.acceptExports(['b']) +} diff --git a/playground/hmr-ssr/accept-exports/reexports.bak/accept-named.ts b/playground/hmr-ssr/accept-exports/reexports.bak/accept-named.ts new file mode 100644 index 00000000000000..1c45a7c358452e --- /dev/null +++ b/playground/hmr-ssr/accept-exports/reexports.bak/accept-named.ts @@ -0,0 +1,10 @@ +export { a, b } from './source' + +if (import.meta.hot) { + // import.meta.hot.accept('./source', (m) => { + // log(`accept-named reexport:${m.a},${m.b}`) + // }) + import.meta.hot.acceptExports('a', (m) => { + log(`accept-named reexport:${m.a},${m.b}`) + }) +} diff --git a/playground/hmr-ssr/accept-exports/reexports.bak/index.html b/playground/hmr-ssr/accept-exports/reexports.bak/index.html new file mode 100644 index 00000000000000..241054bca8256f --- /dev/null +++ b/playground/hmr-ssr/accept-exports/reexports.bak/index.html @@ -0,0 +1 @@ + diff --git a/playground/hmr-ssr/accept-exports/reexports.bak/reexports.ts b/playground/hmr-ssr/accept-exports/reexports.bak/reexports.ts new file mode 100644 index 00000000000000..659901c42c7149 --- /dev/null +++ b/playground/hmr-ssr/accept-exports/reexports.bak/reexports.ts @@ -0,0 +1,5 @@ +import { a } from './accept-named' + +log('accept-named:' + a) + +log('>>> ready') diff --git a/playground/hmr-ssr/accept-exports/reexports.bak/source.ts b/playground/hmr-ssr/accept-exports/reexports.bak/source.ts new file mode 100644 index 00000000000000..7f736004a8e9fa --- /dev/null +++ b/playground/hmr-ssr/accept-exports/reexports.bak/source.ts @@ -0,0 +1,2 @@ +export const a = 'a0' +export const b = 'b0' diff --git a/playground/hmr-ssr/accept-exports/side-effects/index.ts b/playground/hmr-ssr/accept-exports/side-effects/index.ts new file mode 100644 index 00000000000000..8a44ded37ba337 --- /dev/null +++ b/playground/hmr-ssr/accept-exports/side-effects/index.ts @@ -0,0 +1 @@ +import './side-effects.ts' diff --git a/playground/hmr-ssr/accept-exports/side-effects/side-effects.ts b/playground/hmr-ssr/accept-exports/side-effects/side-effects.ts new file mode 100644 index 00000000000000..f4abb02fb2b47e --- /dev/null +++ b/playground/hmr-ssr/accept-exports/side-effects/side-effects.ts @@ -0,0 +1,13 @@ +export const x = 'x' + +export const y = 'y' + +export default 'z' + +log('>>> side FX') + +globalThis.__HMR__['.app'] = 'hey' + +if (import.meta.hot) { + import.meta.hot.acceptExports(['default']) +} diff --git a/playground/hmr-ssr/accept-exports/star-imports/deps-all-accepted.ts b/playground/hmr-ssr/accept-exports/star-imports/deps-all-accepted.ts new file mode 100644 index 00000000000000..bf935ebc878609 --- /dev/null +++ b/playground/hmr-ssr/accept-exports/star-imports/deps-all-accepted.ts @@ -0,0 +1,14 @@ +export const a = 'a0' + +export const b = 'b0' + +const aliased = 'c0' +export { aliased as c } + +export default 'default0' + +log(`all >>>>>> ${a}, ${b}, ${aliased}`) + +if (import.meta.hot) { + import.meta.hot.acceptExports(['a', 'b', 'c', 'default']) +} diff --git a/playground/hmr-ssr/accept-exports/star-imports/deps-some-accepted.ts b/playground/hmr-ssr/accept-exports/star-imports/deps-some-accepted.ts new file mode 100644 index 00000000000000..04469868392dc3 --- /dev/null +++ b/playground/hmr-ssr/accept-exports/star-imports/deps-some-accepted.ts @@ -0,0 +1,14 @@ +export const a = 'a0' + +export const b = 'b0' + +const aliased = 'c0' +export { aliased as c } + +export default 'default0' + +log(`some >>>>>> ${a}, ${b}, ${aliased}`) + +if (import.meta.hot) { + import.meta.hot.acceptExports(['a', 'b', 'default']) +} diff --git a/playground/hmr-ssr/accept-exports/star-imports/index.ts b/playground/hmr-ssr/accept-exports/star-imports/index.ts new file mode 100644 index 00000000000000..d98700b239a3df --- /dev/null +++ b/playground/hmr-ssr/accept-exports/star-imports/index.ts @@ -0,0 +1 @@ +import './star-imports.ts' diff --git a/playground/hmr-ssr/accept-exports/star-imports/star-imports.ts b/playground/hmr-ssr/accept-exports/star-imports/star-imports.ts new file mode 100644 index 00000000000000..228622f9ab85b3 --- /dev/null +++ b/playground/hmr-ssr/accept-exports/star-imports/star-imports.ts @@ -0,0 +1,6 @@ +import * as all from './deps-all-accepted' +import * as some from './deps-some-accepted' + +log('loaded:all:' + all.a + all.b + all.c + all.default) +log('loaded:some:' + some.a + some.b + some.c + some.default) +log('>>> ready <<<') diff --git a/playground/hmr-ssr/accept-exports/unused-exports/index.html b/playground/hmr-ssr/accept-exports/unused-exports/index.html new file mode 100644 index 00000000000000..8998d3ce4581ee --- /dev/null +++ b/playground/hmr-ssr/accept-exports/unused-exports/index.html @@ -0,0 +1 @@ + diff --git a/playground/hmr-ssr/accept-exports/unused-exports/index.ts b/playground/hmr-ssr/accept-exports/unused-exports/index.ts new file mode 100644 index 00000000000000..ffd430893843fd --- /dev/null +++ b/playground/hmr-ssr/accept-exports/unused-exports/index.ts @@ -0,0 +1,4 @@ +import './unused' +import { foo } from './used' + +log('used:' + foo) diff --git a/playground/hmr-ssr/accept-exports/unused-exports/unused.ts b/playground/hmr-ssr/accept-exports/unused-exports/unused.ts new file mode 100644 index 00000000000000..1462ed6101bba6 --- /dev/null +++ b/playground/hmr-ssr/accept-exports/unused-exports/unused.ts @@ -0,0 +1,11 @@ +export const x = 'x' + +export const y = 'y' + +export default 'z' + +log('-- unused --') + +if (import.meta.hot) { + import.meta.hot.acceptExports([]) +} diff --git a/playground/hmr-ssr/accept-exports/unused-exports/used.ts b/playground/hmr-ssr/accept-exports/unused-exports/used.ts new file mode 100644 index 00000000000000..a4a093f726e325 --- /dev/null +++ b/playground/hmr-ssr/accept-exports/unused-exports/used.ts @@ -0,0 +1,9 @@ +export const foo = 'foo0' + +export const bar = 'bar0' + +log('-- used --') + +if (import.meta.hot) { + import.meta.hot.acceptExports([]) +} diff --git a/playground/hmr-ssr/circular/index.js b/playground/hmr-ssr/circular/index.js new file mode 100644 index 00000000000000..a78188ea88f93c --- /dev/null +++ b/playground/hmr-ssr/circular/index.js @@ -0,0 +1,7 @@ +import { msg } from './mod-a' + +globalThis.__HMR__['.circular'] = msg + +if (import.meta.hot) { + import.meta.hot.accept() +} diff --git a/playground/hmr-ssr/circular/mod-a.js b/playground/hmr-ssr/circular/mod-a.js new file mode 100644 index 00000000000000..def8466da2e489 --- /dev/null +++ b/playground/hmr-ssr/circular/mod-a.js @@ -0,0 +1,5 @@ +export const value = 'mod-a' + +import { value as _value } from './mod-b' + +export const msg = `mod-a -> ${_value}` diff --git a/playground/hmr-ssr/circular/mod-b.js b/playground/hmr-ssr/circular/mod-b.js new file mode 100644 index 00000000000000..fe0125f33787b7 --- /dev/null +++ b/playground/hmr-ssr/circular/mod-b.js @@ -0,0 +1,3 @@ +import { value as _value } from './mod-c' + +export const value = `mod-b -> ${_value}` diff --git a/playground/hmr-ssr/circular/mod-c.js b/playground/hmr-ssr/circular/mod-c.js new file mode 100644 index 00000000000000..4f9de5b0efcc29 --- /dev/null +++ b/playground/hmr-ssr/circular/mod-c.js @@ -0,0 +1,11 @@ +import { value as _value } from './mod-a' + +// Should error as `_value` is not defined yet within the circular imports +let __value +try { + __value = `${_value} (expected no error)` +} catch { + __value = 'mod-a (unexpected error)' +} + +export const value = `mod-c -> ${__value}` diff --git a/playground/hmr-ssr/counter/dep.ts b/playground/hmr-ssr/counter/dep.ts new file mode 100644 index 00000000000000..e15e77f4e4743f --- /dev/null +++ b/playground/hmr-ssr/counter/dep.ts @@ -0,0 +1,4 @@ +// This file is never loaded +if (import.meta.hot) { + import.meta.hot.accept(() => {}) +} diff --git a/playground/hmr-ssr/counter/index.ts b/playground/hmr-ssr/counter/index.ts new file mode 100644 index 00000000000000..66edcdbe737ed1 --- /dev/null +++ b/playground/hmr-ssr/counter/index.ts @@ -0,0 +1,11 @@ +let count = 0 +export function increment() { + count++ +} +export function getCount() { + return count +} +// @ts-expect-error not used but this is to test that it works +function neverCalled() { + import('./dep') +} diff --git a/playground/hmr-ssr/customFile.js b/playground/hmr-ssr/customFile.js new file mode 100644 index 00000000000000..7c9069974578e0 --- /dev/null +++ b/playground/hmr-ssr/customFile.js @@ -0,0 +1 @@ +export const msg = 'custom' diff --git a/playground/hmr-ssr/event.d.ts b/playground/hmr-ssr/event.d.ts new file mode 100644 index 00000000000000..1920d1e7aff076 --- /dev/null +++ b/playground/hmr-ssr/event.d.ts @@ -0,0 +1,17 @@ +import 'vite/types/customEvent' + +declare module 'vite/types/customEvent' { + interface CustomEventMap { + 'custom:foo': { msg: string } + 'custom:remote-add': { a: number; b: number } + 'custom:remote-add-result': { result: string } + } +} + +declare global { + let log: (...msg: unknown[]) => void + let logger: { + error: (msg: string | Error) => void + debug: (...msg: unknown[]) => void + } +} diff --git a/playground/hmr-ssr/file-delete-restore/child.js b/playground/hmr-ssr/file-delete-restore/child.js new file mode 100644 index 00000000000000..704c7d8c7e98cc --- /dev/null +++ b/playground/hmr-ssr/file-delete-restore/child.js @@ -0,0 +1,11 @@ +import { rerender } from './runtime' + +export const value = 'child' + +if (import.meta.hot) { + import.meta.hot.accept((newMod) => { + if (!newMod) return + + rerender({ child: newMod.value }) + }) +} diff --git a/playground/hmr-ssr/file-delete-restore/index.js b/playground/hmr-ssr/file-delete-restore/index.js new file mode 100644 index 00000000000000..fa4908a32662ac --- /dev/null +++ b/playground/hmr-ssr/file-delete-restore/index.js @@ -0,0 +1,4 @@ +import { render } from './runtime' +import { childValue, parentValue } from './parent' + +render({ parent: parentValue, child: childValue }) diff --git a/playground/hmr-ssr/file-delete-restore/parent.js b/playground/hmr-ssr/file-delete-restore/parent.js new file mode 100644 index 00000000000000..050bfa6d49b4c0 --- /dev/null +++ b/playground/hmr-ssr/file-delete-restore/parent.js @@ -0,0 +1,12 @@ +import { rerender } from './runtime' + +export const parentValue = 'parent' +export { value as childValue } from './child' + +if (import.meta.hot) { + import.meta.hot.accept((newMod) => { + if (!newMod) return + + rerender({ child: newMod.childValue, parent: newMod.parentValue }) + }) +} diff --git a/playground/hmr-ssr/file-delete-restore/runtime.js b/playground/hmr-ssr/file-delete-restore/runtime.js new file mode 100644 index 00000000000000..a3383fcf8ed777 --- /dev/null +++ b/playground/hmr-ssr/file-delete-restore/runtime.js @@ -0,0 +1,15 @@ +let state = {} + +export const render = (newState) => { + state = newState + apply() +} + +export const rerender = (updates) => { + state = { ...state, ...updates } + apply() +} + +const apply = () => { + globalThis.__HMR__['.file-delete-restore'] = Object.values(state).join(':') +} diff --git a/playground/hmr-ssr/hmr.ts b/playground/hmr-ssr/hmr.ts new file mode 100644 index 00000000000000..cd88dbd47bb6c6 --- /dev/null +++ b/playground/hmr-ssr/hmr.ts @@ -0,0 +1,112 @@ +import { virtual } from 'virtual:file' +import { foo as depFoo, nestedFoo } from './hmrDep' +import './importing-updated' +import './invalidation/parent' +import './file-delete-restore' +import './optional-chaining/parent' +import './intermediate-file-delete' +import './circular' +import './queries' +import logo from './logo.svg' +import { msg as softInvalidationMsg } from './soft-invalidation' + +export const foo = 1 +text('.app', foo) +text('.dep', depFoo) +text('.nested', nestedFoo) +text('.virtual', virtual) +text('.soft-invalidation', softInvalidationMsg) +setLogo(logo) + +globalThis.__HMR__['virtual:increment'] = () => { + if (import.meta.hot) { + import.meta.hot.send('virtual:increment') + } +} + +if (import.meta.hot) { + import.meta.hot.accept(({ foo }) => { + log('(self-accepting 1) foo is now:', foo) + }) + + import.meta.hot.accept(({ foo }) => { + log('(self-accepting 2) foo is now:', foo) + }) + + const handleDep = (type, newFoo, newNestedFoo) => { + log(`(${type}) foo is now: ${newFoo}`) + log(`(${type}) nested foo is now: ${newNestedFoo}`) + text('.dep', newFoo) + text('.nested', newNestedFoo) + } + + import.meta.hot.accept('./logo.svg', (newUrl) => { + setLogo(newUrl.default) + log('Logo updated', newUrl.default) + }) + + import.meta.hot.accept('./hmrDep', ({ foo, nestedFoo }) => { + handleDep('single dep', foo, nestedFoo) + }) + + import.meta.hot.accept(['./hmrDep'], ([{ foo, nestedFoo }]) => { + handleDep('multi deps', foo, nestedFoo) + }) + + import.meta.hot.dispose(() => { + log(`foo was:`, foo) + }) + + import.meta.hot.on('vite:afterUpdate', (event) => { + log(`>>> vite:afterUpdate -- ${event.type}`) + }) + + import.meta.hot.on('vite:beforeUpdate', (event) => { + log(`>>> vite:beforeUpdate -- ${event.type}`) + + const cssUpdate = event.updates.find( + (update) => + update.type === 'css-update' && update.path.includes('global.css'), + ) + if (cssUpdate) { + log('CSS updates are not supported in SSR') + } + }) + + import.meta.hot.on('vite:error', (event) => { + log(`>>> vite:error -- ${event.err.message}`) + }) + + import.meta.hot.on('vite:invalidate', ({ path }) => { + log(`>>> vite:invalidate -- ${path}`) + }) + + import.meta.hot.on('custom:foo', ({ msg }) => { + text('.custom', msg) + }) + + import.meta.hot.on('custom:remove', removeCb) + + // send custom event to server to calculate 1 + 2 + import.meta.hot.send('custom:remote-add', { a: 1, b: 2 }) + import.meta.hot.on('custom:remote-add-result', ({ result }) => { + text('.custom-communication', result) + }) +} + +function text(el, text) { + hmr(el, text) +} + +function setLogo(src) { + hmr('#logo', src) +} + +function removeCb({ msg }) { + text('.toRemove', msg) + import.meta.hot.off('custom:remove', removeCb) +} + +function hmr(key: string, value: unknown) { + ;(globalThis.__HMR__ as any)[key] = String(value) +} diff --git a/playground/hmr-ssr/hmrDep.js b/playground/hmr-ssr/hmrDep.js new file mode 100644 index 00000000000000..c4c434146afc41 --- /dev/null +++ b/playground/hmr-ssr/hmrDep.js @@ -0,0 +1,14 @@ +export const foo = 1 +export { foo as nestedFoo } from './hmrNestedDep' + +if (import.meta.hot) { + const data = import.meta.hot.data + if ('fromDispose' in data) { + log(`(dep) foo from dispose: ${data.fromDispose}`) + } + + import.meta.hot.dispose((data) => { + log(`(dep) foo was: ${foo}`) + data.fromDispose = foo + }) +} diff --git a/playground/hmr-ssr/hmrNestedDep.js b/playground/hmr-ssr/hmrNestedDep.js new file mode 100644 index 00000000000000..766766a6260612 --- /dev/null +++ b/playground/hmr-ssr/hmrNestedDep.js @@ -0,0 +1 @@ +export const foo = 1 diff --git a/playground/hmr-ssr/importedVirtual.js b/playground/hmr-ssr/importedVirtual.js new file mode 100644 index 00000000000000..8b0b417bc3113d --- /dev/null +++ b/playground/hmr-ssr/importedVirtual.js @@ -0,0 +1 @@ +export const virtual = '[success]' diff --git a/playground/hmr-ssr/importing-updated/a.js b/playground/hmr-ssr/importing-updated/a.js new file mode 100644 index 00000000000000..e52ef8d3dce2d7 --- /dev/null +++ b/playground/hmr-ssr/importing-updated/a.js @@ -0,0 +1,9 @@ +const val = 'a0' +globalThis.__HMR__['.importing-reloaded'] ??= '' +globalThis.__HMR__['.importing-reloaded'] += `a.js: ${val}` + +export default val + +if (import.meta.hot) { + import.meta.hot.accept() +} diff --git a/playground/hmr-ssr/importing-updated/b.js b/playground/hmr-ssr/importing-updated/b.js new file mode 100644 index 00000000000000..d309a396a3c56d --- /dev/null +++ b/playground/hmr-ssr/importing-updated/b.js @@ -0,0 +1,10 @@ +import a from './a.js' + +const val = `b0,${a}` + +globalThis.__HMR__['.importing-reloaded'] ??= '' +globalThis.__HMR__['.importing-reloaded'] += `b.js: ${val}
` + +if (import.meta.hot) { + import.meta.hot.accept() +} diff --git a/playground/hmr-ssr/importing-updated/index.js b/playground/hmr-ssr/importing-updated/index.js new file mode 100644 index 00000000000000..0cc74268d385de --- /dev/null +++ b/playground/hmr-ssr/importing-updated/index.js @@ -0,0 +1,2 @@ +import './a' +import './b' diff --git a/playground/hmr-ssr/intermediate-file-delete/display.js b/playground/hmr-ssr/intermediate-file-delete/display.js new file mode 100644 index 00000000000000..3ab1936b0c9009 --- /dev/null +++ b/playground/hmr-ssr/intermediate-file-delete/display.js @@ -0,0 +1 @@ +export const displayCount = (count) => `count is ${count}` diff --git a/playground/hmr-ssr/intermediate-file-delete/index.js b/playground/hmr-ssr/intermediate-file-delete/index.js new file mode 100644 index 00000000000000..30435b7606e273 --- /dev/null +++ b/playground/hmr-ssr/intermediate-file-delete/index.js @@ -0,0 +1,21 @@ +import { displayCount } from './re-export.js' + +const incrementValue = () => + globalThis.__HMR__['.intermediate-file-delete-increment'] + +const render = () => { + globalThis.__HMR__['.intermediate-file-delete-display'] = displayCount( + Number(incrementValue()), + ) +} + +render() + +globalThis.__HMR__['.delete-intermediate-file'] = () => { + globalThis.__HMR__['.intermediate-file-delete-increment'] = `${ + Number(incrementValue()) + 1 + }` + render() +} + +if (import.meta.hot) import.meta.hot.accept() diff --git a/playground/hmr-ssr/intermediate-file-delete/re-export.js b/playground/hmr-ssr/intermediate-file-delete/re-export.js new file mode 100644 index 00000000000000..b2dade525c0675 --- /dev/null +++ b/playground/hmr-ssr/intermediate-file-delete/re-export.js @@ -0,0 +1 @@ +export * from './display.js' diff --git a/playground/hmr-ssr/invalidation/child.js b/playground/hmr-ssr/invalidation/child.js new file mode 100644 index 00000000000000..b424e2f83c3233 --- /dev/null +++ b/playground/hmr-ssr/invalidation/child.js @@ -0,0 +1,9 @@ +if (import.meta.hot) { + // Need to accept, to register a callback for HMR + import.meta.hot.accept(() => { + // Trigger HMR in importers + import.meta.hot.invalidate() + }) +} + +export const value = 'child' diff --git a/playground/hmr-ssr/invalidation/parent.js b/playground/hmr-ssr/invalidation/parent.js new file mode 100644 index 00000000000000..80f80e58348da8 --- /dev/null +++ b/playground/hmr-ssr/invalidation/parent.js @@ -0,0 +1,9 @@ +import { value } from './child' + +if (import.meta.hot) { + import.meta.hot.accept() +} + +log('(invalidation) parent is executing') + +globalThis.__HMR__['.invalidation'] = value diff --git a/playground/hmr-ssr/logo.svg b/playground/hmr-ssr/logo.svg new file mode 100644 index 00000000000000..a85344da4790b2 --- /dev/null +++ b/playground/hmr-ssr/logo.svg @@ -0,0 +1,3 @@ + diff --git a/playground/hmr-ssr/missing-import/a.js b/playground/hmr-ssr/missing-import/a.js new file mode 100644 index 00000000000000..fff5559cec149d --- /dev/null +++ b/playground/hmr-ssr/missing-import/a.js @@ -0,0 +1,3 @@ +import 'missing-modules' + +log('missing test') diff --git a/playground/hmr-ssr/missing-import/index.js b/playground/hmr-ssr/missing-import/index.js new file mode 100644 index 00000000000000..5ad5ba12cc8619 --- /dev/null +++ b/playground/hmr-ssr/missing-import/index.js @@ -0,0 +1 @@ +import './main.js' diff --git a/playground/hmr-ssr/missing-import/main.js b/playground/hmr-ssr/missing-import/main.js new file mode 100644 index 00000000000000..999801e4dd1061 --- /dev/null +++ b/playground/hmr-ssr/missing-import/main.js @@ -0,0 +1 @@ +import './a.js' diff --git a/playground/hmr-ssr/modules.d.ts b/playground/hmr-ssr/modules.d.ts new file mode 100644 index 00000000000000..815c25568d5119 --- /dev/null +++ b/playground/hmr-ssr/modules.d.ts @@ -0,0 +1,11 @@ +declare module 'virtual:file' { + export const virtual: string +} +declare module '*?query1' { + const string: string + export default string +} +declare module '*?query2' { + const string: string + export default string +} diff --git a/playground/hmr-ssr/optional-chaining/child.js b/playground/hmr-ssr/optional-chaining/child.js new file mode 100644 index 00000000000000..766766a6260612 --- /dev/null +++ b/playground/hmr-ssr/optional-chaining/child.js @@ -0,0 +1 @@ +export const foo = 1 diff --git a/playground/hmr-ssr/optional-chaining/parent.js b/playground/hmr-ssr/optional-chaining/parent.js new file mode 100644 index 00000000000000..c4d9468bf67907 --- /dev/null +++ b/playground/hmr-ssr/optional-chaining/parent.js @@ -0,0 +1,8 @@ +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +import { foo } from './child' + +import.meta.hot?.accept('./child', ({ foo }) => { + log('(optional-chaining) child update') + globalThis.__HMR__['.optional-chaining'] = foo +}) diff --git a/playground/hmr-ssr/package.json b/playground/hmr-ssr/package.json new file mode 100644 index 00000000000000..52a5646e2da7a4 --- /dev/null +++ b/playground/hmr-ssr/package.json @@ -0,0 +1,12 @@ +{ + "name": "@vitejs/test-hmr-ssr", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "debug": "node --inspect-brk ../../packages/vite/bin/vite", + "preview": "vite preview" + } +} diff --git a/playground/hmr-ssr/queries/index.js b/playground/hmr-ssr/queries/index.js new file mode 100644 index 00000000000000..113eb1a079af40 --- /dev/null +++ b/playground/hmr-ssr/queries/index.js @@ -0,0 +1,9 @@ +import query1 from './multi-query?query1' +import query2 from './multi-query?query2' + +hmr('query1', query1) +hmr('query2', query2) + +function hmr(key, value) { + globalThis.__HMR__[key] = String(value) +} diff --git a/playground/hmr-ssr/queries/multi-query.js b/playground/hmr-ssr/queries/multi-query.js new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/playground/hmr-ssr/self-accept-within-circular/a.js b/playground/hmr-ssr/self-accept-within-circular/a.js new file mode 100644 index 00000000000000..a559b739d9f253 --- /dev/null +++ b/playground/hmr-ssr/self-accept-within-circular/a.js @@ -0,0 +1,5 @@ +import { b } from './b' + +export const a = { + b, +} diff --git a/playground/hmr-ssr/self-accept-within-circular/b.js b/playground/hmr-ssr/self-accept-within-circular/b.js new file mode 100644 index 00000000000000..4f5a135418728c --- /dev/null +++ b/playground/hmr-ssr/self-accept-within-circular/b.js @@ -0,0 +1,7 @@ +import { c } from './c' + +const b = { + c, +} + +export { b } diff --git a/playground/hmr-ssr/self-accept-within-circular/c.js b/playground/hmr-ssr/self-accept-within-circular/c.js new file mode 100644 index 00000000000000..47b6d494969917 --- /dev/null +++ b/playground/hmr-ssr/self-accept-within-circular/c.js @@ -0,0 +1,12 @@ +import './b' + +export const c = 'c' + +function render(content) { + globalThis.__HMR__['.self-accept-within-circular'] = content +} +render(c) + +import.meta.hot?.accept((nextExports) => { + render(nextExports.c) +}) diff --git a/playground/hmr-ssr/self-accept-within-circular/index.js b/playground/hmr-ssr/self-accept-within-circular/index.js new file mode 100644 index 00000000000000..d826a1226a5e66 --- /dev/null +++ b/playground/hmr-ssr/self-accept-within-circular/index.js @@ -0,0 +1,3 @@ +import { a } from './a' + +log(a) diff --git a/playground/hmr-ssr/soft-invalidation/child.js b/playground/hmr-ssr/soft-invalidation/child.js new file mode 100644 index 00000000000000..21ec276fc7f825 --- /dev/null +++ b/playground/hmr-ssr/soft-invalidation/child.js @@ -0,0 +1 @@ +export const foo = 'bar' diff --git a/playground/hmr-ssr/soft-invalidation/index.js b/playground/hmr-ssr/soft-invalidation/index.js new file mode 100644 index 00000000000000..f236a2579b0c24 --- /dev/null +++ b/playground/hmr-ssr/soft-invalidation/index.js @@ -0,0 +1,4 @@ +import { foo } from './child' + +// @ts-expect-error global +export const msg = `soft-invalidation/index.js is transformed ${__TRANSFORM_COUNT__} times. child is ${foo}` diff --git a/playground/hmr-ssr/vite.config.ts b/playground/hmr-ssr/vite.config.ts new file mode 100644 index 00000000000000..5b4a7c17fe27cb --- /dev/null +++ b/playground/hmr-ssr/vite.config.ts @@ -0,0 +1,84 @@ +import { defineConfig } from 'vite' +import type { Plugin } from 'vite' + +export default defineConfig({ + experimental: { + hmrPartialAccept: true, + }, + plugins: [ + { + name: 'mock-custom', + async handleHotUpdate({ file, read, server }) { + if (file.endsWith('customFile.js')) { + const content = await read() + const msg = content.match(/export const msg = '(\w+)'/)[1] + server.hot.send('custom:foo', { msg }) + server.hot.send('custom:remove', { msg }) + } + }, + configureServer(server) { + server.hot.on('custom:remote-add', ({ a, b }, client) => { + client.send('custom:remote-add-result', { result: a + b }) + }) + }, + }, + virtualPlugin(), + transformCountPlugin(), + queryPlugin(), + ], +}) + +function virtualPlugin(): Plugin { + let num = 0 + return { + name: 'virtual-file', + resolveId(id, importer) { + if (id === 'virtual:file' || id === '\0virtual:file') { + return '\0virtual:file' + } + }, + load(id) { + if (id === '\0virtual:file') { + return `\ +import { virtual as _virtual } from "/importedVirtual.js"; +export const virtual = _virtual + '${num}';` + } + }, + configureServer(server) { + server.hot.on('virtual:increment', async () => { + const mod = await server.moduleGraph.getModuleByUrl('\0virtual:file') + if (mod) { + num++ + server.reloadModule(mod) + } + }) + }, + } +} + +function queryPlugin(): Plugin { + return { + name: 'query-resolver', + transform(code, id) { + if (id.includes('?query1')) { + return `export default ${JSON.stringify(code + 'query1')}` + } + + if (id.includes('?query2')) { + return `export default ${JSON.stringify(code + 'query2')}` + } + }, + } +} + +function transformCountPlugin(): Plugin { + let num = 0 + return { + name: 'transform-count', + transform(code) { + if (code.includes('__TRANSFORM_COUNT__')) { + return code.replace('__TRANSFORM_COUNT__', String(++num)) + } + }, + } +} diff --git a/playground/hmr/__tests__/hmr.spec.ts b/playground/hmr/__tests__/hmr.spec.ts index e4c7825c5a5d2e..0d95557aa65fb3 100644 --- a/playground/hmr/__tests__/hmr.spec.ts +++ b/playground/hmr/__tests__/hmr.spec.ts @@ -5,6 +5,7 @@ import { browserLogs, editFile, getBg, + getColor, isBuild, page, removeFile, @@ -185,6 +186,17 @@ if (!isBuild) { () => el.textContent(), 'soft-invalidation/index.js is transformed 1 times. child is updated', ) + + editFile('soft-invalidation/index.js', (code) => + code.replace('child is', 'child is now'), + ) + editFile('soft-invalidation/child.js', (code) => + code.replace('updated', 'updated?'), + ) + await untilUpdated( + () => el.textContent(), + 'soft-invalidation/index.js is transformed 2 times. child is now updated?', + ) }) test('plugin hmr handler + custom event', async () => { @@ -887,9 +899,9 @@ if (import.meta.hot) { 'cc', ) expect(serverLogs.length).greaterThanOrEqual(1) + // Should still keep hmr update, but it'll error on the browser-side and will refresh itself. // Match on full log not possible because of color markers - expect(serverLogs.at(-1)!).toContain('page reload') - expect(serverLogs.at(-1)!).toContain('(circular imports)') + expect(serverLogs.at(-1)!).toContain('hmr update') }) test('hmr should not reload if no accepted within circular imported files', async () => { @@ -919,4 +931,11 @@ if (import.meta.hot) { ) await untilUpdated(() => el.evaluate((it) => `${it.clientHeight}`), '40') }) + + test('CSS HMR with this.addWatchFile', async () => { + await page.goto(viteTestUrl + '/css-deps/index.html') + expect(await getColor('.css-deps')).toMatch('red') + editFile('css-deps/dep.js', (code) => code.replace(`red`, `green`)) + await untilUpdated(() => getColor('.css-deps'), 'green') + }) } diff --git a/playground/hmr/css-deps/dep.js b/playground/hmr/css-deps/dep.js new file mode 100644 index 00000000000000..07f62c4241209d --- /dev/null +++ b/playground/hmr/css-deps/dep.js @@ -0,0 +1,8 @@ +// This file is depended by main.css via this.addWatchFile +export const color = 'red' + +// Self-accept so that updating this file would not trigger a page reload. +// We only want to observe main.css updating itself. +if (import.meta.hot) { + import.meta.hot.accept() +} diff --git a/playground/hmr/css-deps/index.html b/playground/hmr/css-deps/index.html new file mode 100644 index 00000000000000..6ff27f56556e00 --- /dev/null +++ b/playground/hmr/css-deps/index.html @@ -0,0 +1,8 @@ +
should be red
+
+
diff --git a/playground/hmr/css-deps/main.css b/playground/hmr/css-deps/main.css
new file mode 100644
index 00000000000000..65cea880bd580e
--- /dev/null
+++ b/playground/hmr/css-deps/main.css
@@ -0,0 +1,3 @@
+.css-deps {
+ color: replaced;
+}
diff --git a/playground/hmr/vite.config.ts b/playground/hmr/vite.config.ts
index 9ae2186d1b8b5e..b290ff60a3140d 100644
--- a/playground/hmr/vite.config.ts
+++ b/playground/hmr/vite.config.ts
@@ -1,3 +1,5 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
import { defineConfig } from 'vite'
import type { Plugin } from 'vite'
@@ -12,18 +14,19 @@ export default defineConfig({
if (file.endsWith('customFile.js')) {
const content = await read()
const msg = content.match(/export const msg = '(\w+)'/)[1]
- server.ws.send('custom:foo', { msg })
- server.ws.send('custom:remove', { msg })
+ server.hot.send('custom:foo', { msg })
+ server.hot.send('custom:remove', { msg })
}
},
configureServer(server) {
- server.ws.on('custom:remote-add', ({ a, b }, client) => {
+ server.hot.on('custom:remote-add', ({ a, b }, client) => {
client.send('custom:remote-add-result', { result: a + b })
})
},
},
virtualPlugin(),
transformCountPlugin(),
+ watchCssDepsPlugin(),
],
})
@@ -44,7 +47,7 @@ export const virtual = _virtual + '${num}';`
}
},
configureServer(server) {
- server.ws.on('virtual:increment', async () => {
+ server.hot.on('virtual:increment', async () => {
const mod = await server.moduleGraph.getModuleByUrl('\0virtual:file')
if (mod) {
num++
@@ -66,3 +69,20 @@ function transformCountPlugin(): Plugin {
},
}
}
+
+function watchCssDepsPlugin(): Plugin {
+ return {
+ name: 'watch-css-deps',
+ async transform(code, id) {
+ // replace the `replaced` identifier in the CSS file with the adjacent
+ // `dep.js` file's `color` variable.
+ if (id.includes('css-deps/main.css')) {
+ const depPath = path.resolve(__dirname, './css-deps/dep.js')
+ const dep = await fs.readFile(depPath, 'utf-8')
+ const color = dep.match(/color = '(.+?)'/)[1]
+ this.addWatchFile(depPath)
+ return code.replace('replaced', color)
+ }
+ },
+ }
+}
diff --git a/playground/html/vite.config.js b/playground/html/vite.config.js
index a7f3964cb165bc..003a591def4c1d 100644
--- a/playground/html/vite.config.js
+++ b/playground/html/vite.config.js
@@ -39,13 +39,14 @@ export default defineConfig({
serveFolder: resolve(__dirname, 'serve/folder/index.html'),
serveBothFile: resolve(__dirname, 'serve/both.html'),
serveBothFolder: resolve(__dirname, 'serve/both/index.html'),
+ write: resolve(__dirname, 'write.html'),
},
},
},
server: {
fs: {
- cachedChecks: true,
+ cachedChecks: false,
},
warmup: {
clientFiles: ['./warmup/*'],
diff --git a/playground/html/write.html b/playground/html/write.html
new file mode 100644
index 00000000000000..f85ce49c08dc8c
--- /dev/null
+++ b/playground/html/write.html
@@ -0,0 +1,3 @@
+
+
diff --git a/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts b/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts
index d4e6888ab5edd8..7c22274b2a3a66 100644
--- a/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts
+++ b/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts
@@ -31,6 +31,27 @@ if (!isBuild) {
`)
})
+ test('plugin return sourcemap with `sources: [""]`', async () => {
+ const res = await page.request.get(new URL('./zoo.js', page.url()).href)
+ const js = await res.text()
+ expect(js).toContain('// add comment')
+
+ const map = extractSourcemap(js)
+ expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
+ {
+ "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;",
+ "sources": [
+ "zoo.js",
+ ],
+ "sourcesContent": [
+ "export const zoo = 'zoo'
+ ",
+ ],
+ "version": 3,
+ }
+ `)
+ })
+
test('js with inline sourcemap injected by a plugin', async () => {
const res = await page.request.get(
new URL('./foo-with-sourcemap.js', page.url()).href,
@@ -129,5 +150,10 @@ describe.runIf(isBuild)('build tests', () => {
"version": 3,
}
`)
+ //
+ const js = findAssetFile(/after-preload-dynamic.*\.js$/)
+ expect(js.trim().split('\n').at(-1)).toMatch(
+ /^\/\/# sourceMappingURL=after-preload-dynamic.*\.js\.map$/,
+ )
})
})
diff --git a/playground/js-sourcemap/importee-pkg/index.js b/playground/js-sourcemap/importee-pkg/index.js
index a96b15202fba44..d101d3b2599e8d 100644
--- a/playground/js-sourcemap/importee-pkg/index.js
+++ b/playground/js-sourcemap/importee-pkg/index.js
@@ -1,2 +1,2 @@
-// eslint-disable-next-line import/no-commonjs
+// eslint-disable-next-line i/no-commonjs
exports.foo = 'foo'
diff --git a/playground/js-sourcemap/index.html b/playground/js-sourcemap/index.html
index f669bf4fc102aa..80ee729d99ce90 100644
--- a/playground/js-sourcemap/index.html
+++ b/playground/js-sourcemap/index.html
@@ -7,3 +7,4 @@ JS Sourcemap
+ diff --git a/playground/js-sourcemap/package.json b/playground/js-sourcemap/package.json index b002697756a24c..9cb0e2febb402b 100644 --- a/playground/js-sourcemap/package.json +++ b/playground/js-sourcemap/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { - "@vitejs/test-importee-pkg": "file:importee-pkg" + "@vitejs/test-importee-pkg": "file:importee-pkg", + "magic-string": "^0.30.7" } } diff --git a/playground/js-sourcemap/plugin-foo.js b/playground/js-sourcemap/plugin-foo.js new file mode 100644 index 00000000000000..cb356468240d50 --- /dev/null +++ b/playground/js-sourcemap/plugin-foo.js @@ -0,0 +1 @@ +export const foo = 'foo' diff --git a/playground/js-sourcemap/vite.config.js b/playground/js-sourcemap/vite.config.js index efebbc5ca00dee..41484f2c99d0f3 100644 --- a/playground/js-sourcemap/vite.config.js +++ b/playground/js-sourcemap/vite.config.js @@ -1,8 +1,12 @@ import { defineConfig } from 'vite' import transformFooWithInlineSourceMap from './foo-with-sourcemap-plugin' +import { transformZooWithSourcemapPlugin } from './zoo-with-sourcemap-plugin' export default defineConfig({ - plugins: [transformFooWithInlineSourceMap()], + plugins: [ + transformFooWithInlineSourceMap(), + transformZooWithSourcemapPlugin(), + ], build: { sourcemap: true, rollupOptions: { diff --git a/playground/js-sourcemap/zoo-with-sourcemap-plugin.ts b/playground/js-sourcemap/zoo-with-sourcemap-plugin.ts new file mode 100644 index 00000000000000..6c493278d166c8 --- /dev/null +++ b/playground/js-sourcemap/zoo-with-sourcemap-plugin.ts @@ -0,0 +1,18 @@ +import MagicString from 'magic-string' +import type { Plugin } from 'vite' + +export const transformZooWithSourcemapPlugin: () => Plugin = () => ({ + name: 'sourcemap', + transform(code, id) { + if (id.includes('zoo.js')) { + const ms = new MagicString(code) + ms.append('// add comment') + return { + code: ms.toString(), + // NOTE: MagicString without `filename` option generates + // a sourcemap with `sources: ['']` or `sources: [null]` + map: ms.generateMap({ hires: true }), + } + } + }, +}) diff --git a/playground/js-sourcemap/zoo.js b/playground/js-sourcemap/zoo.js new file mode 100644 index 00000000000000..286343f930d3c3 --- /dev/null +++ b/playground/js-sourcemap/zoo.js @@ -0,0 +1 @@ +export const zoo = 'zoo' diff --git a/playground/json/__tests__/csr/json.spec.ts b/playground/json/__tests__/csr/json-csr.spec.ts similarity index 100% rename from playground/json/__tests__/csr/json.spec.ts rename to playground/json/__tests__/csr/json-csr.spec.ts diff --git a/playground/json/__tests__/ssr/json.spec.ts b/playground/json/__tests__/ssr/json-ssr.spec.ts similarity index 100% rename from playground/json/__tests__/ssr/json.spec.ts rename to playground/json/__tests__/ssr/json-ssr.spec.ts diff --git a/playground/json/package.json b/playground/json/package.json index e993a6b4075eba..8361d8deea98b9 100644 --- a/playground/json/package.json +++ b/playground/json/package.json @@ -15,6 +15,6 @@ "devDependencies": { "@vitejs/test-json-module": "file:./json-module", "express": "^4.18.2", - "vue": "^3.3.11" + "vue": "^3.4.15" } } diff --git a/playground/legacy/__tests__/client-and-ssr/client-legacy-ssr-sequential-builds.spec.ts b/playground/legacy/__tests__/client-and-ssr/legacy-client-legacy-ssr-sequential-builds.spec.ts similarity index 100% rename from playground/legacy/__tests__/client-and-ssr/client-legacy-ssr-sequential-builds.spec.ts rename to playground/legacy/__tests__/client-and-ssr/legacy-client-legacy-ssr-sequential-builds.spec.ts diff --git a/playground/legacy/__tests__/legacy.spec.ts b/playground/legacy/__tests__/legacy.spec.ts index b0cc061b289d6c..cc747761588ca5 100644 --- a/playground/legacy/__tests__/legacy.spec.ts +++ b/playground/legacy/__tests__/legacy.spec.ts @@ -56,8 +56,8 @@ test('generates assets', async () => { 'index-legacy: text/html', 'chunk-async: text/html', 'chunk-async-legacy: text/html', - 'immutable-chunk: application/javascript', - 'immutable-chunk-legacy: application/javascript', + 'immutable-chunk: text/javascript', + 'immutable-chunk-legacy: text/javascript', 'polyfills-legacy: text/html', ].join('\n') : [ diff --git a/playground/legacy/__tests__/no-polyfills-no-systemjs/no-polyfills-no-systemjs.spec.ts b/playground/legacy/__tests__/no-polyfills-no-systemjs/legacy-no-polyfills-no-systemjs.spec.ts similarity index 100% rename from playground/legacy/__tests__/no-polyfills-no-systemjs/no-polyfills-no-systemjs.spec.ts rename to playground/legacy/__tests__/no-polyfills-no-systemjs/legacy-no-polyfills-no-systemjs.spec.ts diff --git a/playground/legacy/__tests__/no-polyfills/no-polyfills.spec.ts b/playground/legacy/__tests__/no-polyfills/legacy-no-polyfills.spec.ts similarity index 100% rename from playground/legacy/__tests__/no-polyfills/no-polyfills.spec.ts rename to playground/legacy/__tests__/no-polyfills/legacy-no-polyfills.spec.ts diff --git a/playground/legacy/__tests__/watch/styles-only-entry-watch.spec.ts b/playground/legacy/__tests__/watch/legacy-styles-only-entry-watch.spec.ts similarity index 100% rename from playground/legacy/__tests__/watch/styles-only-entry-watch.spec.ts rename to playground/legacy/__tests__/watch/legacy-styles-only-entry-watch.spec.ts diff --git a/playground/legacy/package.json b/playground/legacy/package.json index c978521651f66b..6b9c1a285a978a 100644 --- a/playground/legacy/package.json +++ b/playground/legacy/package.json @@ -17,6 +17,6 @@ "devDependencies": { "@vitejs/plugin-legacy": "workspace:*", "express": "^4.18.2", - "terser": "^5.26.0" + "terser": "^5.27.0" } } diff --git a/playground/lib/__tests__/serve.ts b/playground/lib/__tests__/serve.ts index 249bc7de4fec43..009bc3711825a6 100644 --- a/playground/lib/__tests__/serve.ts +++ b/playground/lib/__tests__/serve.ts @@ -27,6 +27,8 @@ export async function serve(): Promise<{ close(): Promise- + diff --git a/playground/proxy-bypass/vite.config.js b/playground/proxy-bypass/vite.config.js index 13f7a6b42eaafb..0873583a5bfa56 100644 --- a/playground/proxy-bypass/vite.config.js +++ b/playground/proxy-bypass/vite.config.js @@ -4,7 +4,7 @@ export default defineConfig({ server: { port: 9606, proxy: { - '/anotherApp': { + '/nonExistentApp': { target: 'http://localhost:9607', bypass: () => { return false diff --git a/playground/proxy-hmr/other-app/vite.config.js b/playground/proxy-hmr/other-app/vite.config.js index 6e79541a31d806..9fb3ece5eb9c3c 100644 --- a/playground/proxy-hmr/other-app/vite.config.js +++ b/playground/proxy-hmr/other-app/vite.config.js @@ -3,7 +3,7 @@ import { defineConfig } from 'vite' export default defineConfig({ base: '/anotherApp', server: { - port: 9607, + port: 9617, strictPort: true, }, }) diff --git a/playground/proxy-hmr/vite.config.js b/playground/proxy-hmr/vite.config.js index cd418eacdb5d35..ef57a85757a82a 100644 --- a/playground/proxy-hmr/vite.config.js +++ b/playground/proxy-hmr/vite.config.js @@ -2,10 +2,10 @@ import { defineConfig } from 'vite' export default defineConfig({ server: { - port: 9606, + port: 9616, proxy: { '/anotherApp': { - target: 'http://localhost:9607', + target: 'http://localhost:9617', ws: true, }, }, diff --git a/playground/resolve/browser-field/relative.js b/playground/resolve/browser-field/relative.js index 492be3e96738eb..4629659ee6f843 100644 --- a/playground/resolve/browser-field/relative.js +++ b/playground/resolve/browser-field/relative.js @@ -1,4 +1,4 @@ -/* eslint-disable import/no-duplicates */ +/* eslint-disable i/no-duplicates */ import ra from './no-ext' import rb from './no-ext.js' // no substitution import rc from './ext' diff --git a/playground/resolve/exports-with-module-condition/index.js b/playground/resolve/exports-with-module-condition/index.js index 6465a8c55084c3..53b7bb50be4e8b 100644 --- a/playground/resolve/exports-with-module-condition/index.js +++ b/playground/resolve/exports-with-module-condition/index.js @@ -1,2 +1,2 @@ -/* eslint-disable import/no-commonjs */ +/* eslint-disable i/no-commonjs */ module.exports.msg = '[fail] exports with module condition (index.js)' diff --git a/playground/resolve/package.json b/playground/resolve/package.json index 612da0e816602a..ba67bcbc27adbb 100644 --- a/playground/resolve/package.json +++ b/playground/resolve/package.json @@ -18,7 +18,7 @@ "#other-pkg-slash/": "@vitejs/test-resolve-imports-pkg/nest/" }, "dependencies": { - "@babel/runtime": "^7.23.6", + "@babel/runtime": "^7.23.9", "es5-ext": "0.10.62", "normalize.css": "^8.0.1", "@vitejs/test-require-pkg-with-module-field": "link:./require-pkg-with-module-field", diff --git a/playground/ssr-deps/server.js b/playground/ssr-deps/server.js index 05e86a863ea744..52134ea162a4ea 100644 --- a/playground/ssr-deps/server.js +++ b/playground/ssr-deps/server.js @@ -8,6 +8,13 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url)) const isTest = process.env.VITEST +const noExternal = [ + '@vitejs/test-no-external-cjs', + '@vitejs/test-import-builtin-cjs', + '@vitejs/test-no-external-css', + '@vitejs/test-external-entry', +] + export async function createServer(root = process.cwd(), hmrPort) { const resolve = (p) => path.resolve(__dirname, p) @@ -35,18 +42,13 @@ export async function createServer(root = process.cwd(), hmrPort) { }, appType: 'custom', ssr: { - noExternal: [ - '@vitejs/test-no-external-cjs', - '@vitejs/test-import-builtin-cjs', - '@vitejs/test-no-external-css', - '@vitejs/test-external-entry', - ], + noExternal, external: [ '@vitejs/test-nested-external', '@vitejs/test-external-entry/entry', ], optimizeDeps: { - disabled: 'build', + include: noExternal, }, }, plugins: [ diff --git a/playground/ssr-html/__tests__/ssr-html.spec.ts b/playground/ssr-html/__tests__/ssr-html.spec.ts index 50b6e9540426bc..fa9d12c7f6da41 100644 --- a/playground/ssr-html/__tests__/ssr-html.spec.ts +++ b/playground/ssr-html/__tests__/ssr-html.spec.ts @@ -1,6 +1,7 @@ import { execFile } from 'node:child_process' import { promisify } from 'node:util' import path from 'node:path' +import { fileURLToPath } from 'node:url' import fetch from 'node-fetch' import { describe, expect, test } from 'vitest' import { port } from './serve' @@ -62,9 +63,9 @@ describe.runIf(isServe)('hmr', () => { }) }) -describe.runIf(isServe)('stacktrace', () => { - const execFileAsync = promisify(execFile) +const execFileAsync = promisify(execFile) +describe.runIf(isServe)('stacktrace', () => { for (const ext of ['js', 'ts']) { for (const sourcemapsEnabled of [false, true]) { test(`stacktrace of ${ext} is correct when sourcemaps is${ @@ -98,3 +99,29 @@ describe.runIf(isServe)('stacktrace', () => { } } }) + +describe.runIf(isServe)('network-imports', () => { + test('with Vite SSR', async () => { + await execFileAsync( + 'node', + ['--experimental-network-imports', 'test-network-imports.js'], + { + cwd: fileURLToPath(new URL('..', import.meta.url)), + }, + ) + }) + + test('with Vite runtime', async () => { + await execFileAsync( + 'node', + [ + '--experimental-network-imports', + 'test-network-imports.js', + '--runtime', + ], + { + cwd: fileURLToPath(new URL('..', import.meta.url)), + }, + ) + }) +}) diff --git a/playground/ssr-html/public/slash@3.0.0.js b/playground/ssr-html/public/slash@3.0.0.js new file mode 100644 index 00000000000000..754082e97c4f82 --- /dev/null +++ b/playground/ssr-html/public/slash@3.0.0.js @@ -0,0 +1,5 @@ +/* eslint-disable */ +// copied from https://esm.sh/v133/slash@3.0.0/es2022/slash.mjs to reduce network issues in CI + +/* esm.sh - esbuild bundle(slash@3.0.0) es2022 production */ +var a=Object.create;var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var A=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),E=(e,t)=>{for(var r in t)d(e,r,{get:t[r],enumerable:!0})},u=(e,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of x(t))!p.call(e,n)&&n!==r&&d(e,n,{get:()=>t[n],enumerable:!(i=m(t,n))||i.enumerable});return e},o=(e,t,r)=>(u(e,t,"default"),r&&u(r,t,"default")),c=(e,t,r)=>(r=e!=null?a(g(e)):{},u(t||!e||!e.__esModule?d(r,"default",{value:e,enumerable:!0}):r,e));var f=A((h,_)=>{"use strict";_.exports=e=>{let t=/^\\\\\?\\/.test(e),r=/[^\u0000-\u0080]+/.test(e);return t||r?e:e.replace(/\\/g,"/")}});var s={};E(s,{default:()=>P});var L=c(f());o(s,c(f()));var{default:l,...N}=L,P=l!==void 0?l:N;export{P as default}; diff --git a/playground/ssr-html/src/network-imports.js b/playground/ssr-html/src/network-imports.js new file mode 100644 index 00000000000000..770fb6e57b610d --- /dev/null +++ b/playground/ssr-html/src/network-imports.js @@ -0,0 +1,7 @@ +// same port as `ports["ssr-html"]` in playground/test-utils.ts +import slash from 'http://localhost:9602/slash@3.0.0.js' + +// or test without local server +// import slash from 'https://esm.sh/slash@3.0.0' + +export { slash } diff --git a/playground/ssr-html/test-network-imports.js b/playground/ssr-html/test-network-imports.js new file mode 100644 index 00000000000000..91f84f6a3b3ea3 --- /dev/null +++ b/playground/ssr-html/test-network-imports.js @@ -0,0 +1,24 @@ +import assert from 'node:assert' +import { fileURLToPath } from 'node:url' +import { createServer, createViteRuntime } from 'vite' + +async function runTest(useRuntime) { + const server = await createServer({ + configFile: false, + root: fileURLToPath(new URL('.', import.meta.url)), + server: { + middlewareMode: true, + }, + }) + let mod + if (useRuntime) { + const runtime = await createViteRuntime(server, { hmr: false }) + mod = await runtime.executeUrl('/src/network-imports.js') + } else { + mod = await server.ssrLoadModule('/src/network-imports.js') + } + assert.equal(mod.slash('foo\\bar'), 'foo/bar') + await server.close() +} + +runTest(process.argv.includes('--runtime')) diff --git a/playground/ssr-noexternal/__tests__/ssr-noexternal.spec.ts b/playground/ssr-noexternal/__tests__/ssr-noexternal.spec.ts index 2143c7524a0e41..ab41f0a4602454 100644 --- a/playground/ssr-noexternal/__tests__/ssr-noexternal.spec.ts +++ b/playground/ssr-noexternal/__tests__/ssr-noexternal.spec.ts @@ -1,10 +1,10 @@ import { expect, test } from 'vitest' import { port } from './serve' -import { page } from '~utils' +import { isBuild, page } from '~utils' const url = `http://localhost:${port}` -test('message from require-external-cjs', async () => { +test.runIf(!isBuild)('message from require-external-cjs', async () => { await page.goto(url) expect(await page.textContent('.require-external-cjs')).toMatch('foo') }) diff --git a/playground/ssr-noexternal/vite.config.js b/playground/ssr-noexternal/vite.config.js index 76da96a7d018ed..1109bddd187001 100644 --- a/playground/ssr-noexternal/vite.config.js +++ b/playground/ssr-noexternal/vite.config.js @@ -1,11 +1,12 @@ import { defineConfig } from 'vite' +const noExternal = ['@vitejs/test-require-external-cjs'] export default defineConfig({ ssr: { - noExternal: ['@vitejs/test-require-external-cjs'], + noExternal, external: ['@vitejs/test-external-cjs'], optimizeDeps: { - disabled: false, + include: noExternal, }, }, build: { @@ -14,8 +15,5 @@ export default defineConfig({ rollupOptions: { external: ['@vitejs/test-external-cjs'], }, - commonjsOptions: { - include: [], - }, }, }) diff --git a/playground/ssr-resolve/__tests__/ssr-resolve.spec.ts b/playground/ssr-resolve/__tests__/ssr-resolve.spec.ts index f3842838c59542..3920d4ccbd052e 100644 --- a/playground/ssr-resolve/__tests__/ssr-resolve.spec.ts +++ b/playground/ssr-resolve/__tests__/ssr-resolve.spec.ts @@ -25,3 +25,11 @@ test.runIf(isBuild)('correctly resolve entrypoints', async () => { await expect(import(`${testDir}/dist/main.mjs`)).resolves.toBeTruthy() }) + +test.runIf(isBuild)( + 'node builtins should not be bundled if not used', + async () => { + const contents = readFile('dist/main.mjs') + expect(contents).not.include(`node:url`) + }, +) diff --git a/playground/ssr-resolve/main.js b/playground/ssr-resolve/main.js index 2357458b50bc8c..699ca580034a28 100644 --- a/playground/ssr-resolve/main.js +++ b/playground/ssr-resolve/main.js @@ -6,6 +6,7 @@ import fileEntry from '@vitejs/test-entries/file' import pkgExportsEntry from '@vitejs/test-resolve-pkg-exports/entry' import deepFoo from '@vitejs/test-deep-import/foo' import deepBar from '@vitejs/test-deep-import/bar' +import { used } from './util' export default ` entries/dir: ${dirEntry} @@ -13,4 +14,5 @@ export default ` pkg-exports/entry: ${pkgExportsEntry} deep-import/foo: ${deepFoo} deep-import/bar: ${deepBar} + util: ${used(['[success]'])} ` diff --git a/playground/ssr-resolve/util.js b/playground/ssr-resolve/util.js new file mode 100644 index 00000000000000..c3234a470328cf --- /dev/null +++ b/playground/ssr-resolve/util.js @@ -0,0 +1,10 @@ +import { pathToFileURL } from 'node:url' + +export function used(s) { + return s +} + +// This is not used, so `node:url` should not be bundled +export function treeshaken(s) { + return pathToFileURL(s) +} diff --git a/playground/ssr-webworker/__tests__/ssr-webworker.spec.ts b/playground/ssr-webworker/__tests__/ssr-webworker.spec.ts index c58847d6729fe5..65a01f196df295 100644 --- a/playground/ssr-webworker/__tests__/ssr-webworker.spec.ts +++ b/playground/ssr-webworker/__tests__/ssr-webworker.spec.ts @@ -23,6 +23,13 @@ test('respects browser export', async () => { ) }) +test('supports nodejs_compat', async () => { + await page.goto(url) + expect(await page.textContent('.nodejs-compat')).toMatch( + '[success] nodejs compat', + ) +}) + test.runIf(isBuild)('inlineDynamicImports', () => { const dynamicJsContent = findAssetFile(/dynamic-[-\w]+\.js/, 'worker') expect(dynamicJsContent).toBe('') diff --git a/playground/ssr-webworker/package.json b/playground/ssr-webworker/package.json index 3895a3d89ce5ff..d37e3563dc6d0c 100644 --- a/playground/ssr-webworker/package.json +++ b/playground/ssr-webworker/package.json @@ -13,7 +13,7 @@ "@vitejs/test-worker-exports": "file:./worker-exports" }, "devDependencies": { - "miniflare": "^3.20231030.3", + "miniflare": "^3.20240129.1", "@vitejs/test-resolve-linked": "workspace:*" } } diff --git a/playground/ssr-webworker/src/entry-worker.jsx b/playground/ssr-webworker/src/entry-worker.jsx index 2b58c6f17a6e0c..5068c796481df2 100644 --- a/playground/ssr-webworker/src/entry-worker.jsx +++ b/playground/ssr-webworker/src/entry-worker.jsx @@ -1,3 +1,4 @@ +import { equal } from 'node:assert' import { msg as linkedMsg } from '@vitejs/test-resolve-linked' import browserExportsMessage from '@vitejs/test-browser-exports' import workerExportsMessage from '@vitejs/test-worker-exports' @@ -18,6 +19,7 @@ addEventListener('fetch', function (event) {
dynamic: ${loaded}
${browserExportsMessage}
${workerExportsMessage}
+${equal('a', 'a') || '[success] nodejs compat'}
`, { headers: { diff --git a/playground/ssr-webworker/vite.config.js b/playground/ssr-webworker/vite.config.js index b0b922d7d1b97e..3c10b035b550a2 100644 --- a/playground/ssr-webworker/vite.config.js +++ b/playground/ssr-webworker/vite.config.js @@ -11,6 +11,9 @@ export default defineConfig({ ssr: { target: 'webworker', noExternal: ['this-should-be-replaced-by-the-boolean'], + // Some webworker builds may choose to externalize node builtins as they may be implemented + // in the runtime, and so we can externalize it when bundling. + external: ['node:assert'], }, plugins: [ { diff --git a/playground/ssr-webworker/worker.js b/playground/ssr-webworker/worker.js index 9c93d3b754c706..a910cfc02907e7 100644 --- a/playground/ssr-webworker/worker.js +++ b/playground/ssr-webworker/worker.js @@ -10,6 +10,8 @@ export async function createServer(port) { const mf = new Miniflare({ scriptPath: path.resolve(__dirname, 'dist/worker/entry-worker.js'), port, + modules: true, + compatibilityFlags: ['nodejs_compat'], }) await mf.ready return { mf } diff --git a/playground/ssr/__tests__/ssr.spec.ts b/playground/ssr/__tests__/ssr.spec.ts index 8c29c2169f0343..812e9323aad289 100644 --- a/playground/ssr/__tests__/ssr.spec.ts +++ b/playground/ssr/__tests__/ssr.spec.ts @@ -31,9 +31,21 @@ test('should restart ssr', async () => { }) test.runIf(isServe)('html proxy is encoded', async () => { - await page.goto( - `${url}?%22%3E%3C/script%3E%3Cscript%3Econsole.log(%27html proxy is not encoded%27)%3C/script%3E`, - ) + try { + await page.goto( + `${url}?%22%3E%3C/script%3E%3Cscript%3Econsole.log(%27html%20proxy%20is%20not%20encoded%27)%3C/script%3E`, + ) - expect(browserLogs).not.toContain('html proxy is not encoded') + expect(browserLogs).not.toContain('html proxy is not encoded') + } catch (e) { + // Ignore net::ERR_ABORTED, which is causing flakiness in this test + if ( + !( + e.message.includes('net::ERR_ABORTED') || + e.message.includes('interrupted') + ) + ) { + throw e + } + } }) diff --git a/playground/tailwind-sourcemap/package.json b/playground/tailwind-sourcemap/package.json index 8a4a7aa251c8e1..c4b72dee9dd770 100644 --- a/playground/tailwind-sourcemap/package.json +++ b/playground/tailwind-sourcemap/package.json @@ -10,6 +10,6 @@ "preview": "vite preview" }, "dependencies": { - "tailwindcss": "^3.3.6" + "tailwindcss": "^3.4.1" } } diff --git a/playground/tailwind/package.json b/playground/tailwind/package.json index c10a7444c401ff..0934b4990ab241 100644 --- a/playground/tailwind/package.json +++ b/playground/tailwind/package.json @@ -9,9 +9,9 @@ "preview": "vite preview" }, "dependencies": { - "autoprefixer": "^10.4.16", - "tailwindcss": "^3.3.6", - "vue": "^3.3.11", + "autoprefixer": "^10.4.17", + "tailwindcss": "^3.4.1", + "vue": "^3.4.15", "vue-router": "^4.2.5" }, "devDependencies": { diff --git a/playground/test-utils.ts b/playground/test-utils.ts index 741a11386078b7..92123f08900896 100644 --- a/playground/test-utils.ts +++ b/playground/test-utils.ts @@ -32,12 +32,15 @@ export const ports = { ssr: 9600, 'ssr-deps': 9601, 'ssr-html': 9602, + 'ssr-hmr': 9609, // not imported but used in `ssr-hmr/vite.config.js` 'ssr-noexternal': 9603, 'ssr-pug': 9604, 'ssr-webworker': 9605, - 'proxy-hmr': 9606, // not imported but used in `proxy-hmr/vite.config.js` - 'proxy-hmr/other-app': 9607, // not imported but used in `proxy-hmr/other-app/vite.config.js` - 'ssr-conditions': 9608, + 'proxy-bypass': 9606, // not imported but used in `proxy-hmr/vite.config.js` + 'proxy-bypass/non-existent-app': 9607, // not imported but used in `proxy-hmr/other-app/vite.config.js` + 'proxy-hmr': 9616, // not imported but used in `proxy-hmr/vite.config.js` + 'proxy-hmr/other-app': 9617, // not imported but used in `proxy-hmr/other-app/vite.config.js` + 'ssr-conditions': 9620, 'css/postcss-caching': 5005, 'css/postcss-plugins-different-dir': 5006, 'css/dynamic-import': 5007, 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 b2a3fde698e806..e14a151ad80e2d 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 @@ -11,7 +11,7 @@ import { } from '~utils' const unexpectedTokenSyntaxErrorRE = - /^parsing .* failed: SyntaxError: Unexpected token.*\}.*/ + /(\[vite:esbuild\] )*parsing .* failed: SyntaxError: Unexpected token.*\}.*/ describe.runIf(isBuild)('build', () => { test('should throw an error on build', () => { diff --git a/playground/vitestGlobalSetup.ts b/playground/vitestGlobalSetup.ts index d62edca8f23daf..7f85d9d12748bf 100644 --- a/playground/vitestGlobalSetup.ts +++ b/playground/vitestGlobalSetup.ts @@ -1,15 +1,13 @@ -import os from 'node:os' import path from 'node:path' import fs from 'fs-extra' +import type { GlobalSetupContext } from 'vitest/node' import type { BrowserServer } from 'playwright-chromium' import { chromium } from 'playwright-chromium' import { hasWindowsUnicodeFsBug } from './hasWindowsUnicodeFsBug' -const DIR = path.join(os.tmpdir(), 'vitest_playwright_global_setup') - let browserServer: BrowserServer | undefined -export async function setup(): Promise