Merge branch 'main' into feat-pre-bundle-new-url

vitejs · Aug 14, 2024 · 321b213 · 321b213
2 parents b3f5dfe + 6700594
commit 321b213
Show file tree

Hide file tree

Showing 47 changed files with 815 additions and 493 deletions.
diff --git a/docs/config/build-options.md b/docs/config/build-options.md
@@ -41,12 +41,13 @@ type ResolveModulePreloadDependenciesFn = (
   url: string,
   deps: string[],
   context: {
-    importer: string
+    hostId: string
+    hostType: 'html' | 'js'
   },
 ) => string[]
 ```
 
-The `resolveDependencies` function will be called for each dynamic import with a list of the chunks it depends on, and it will also be called for each chunk imported in entry HTML files. A new dependencies array can be returned with these filtered or more dependencies injected, and their paths modified. The `deps` paths are relative to the `build.outDir`. Returning a relative path to the `hostId` for `hostType === 'js'` is allowed, in which case `new URL(dep, import.meta.url)` is used to get an absolute path when injecting this module preload in the HTML head.
+The `resolveDependencies` function will be called for each dynamic import with a list of the chunks it depends on, and it will also be called for each chunk imported in entry HTML files. A new dependencies array can be returned with these filtered or more dependencies injected, and their paths modified. The `deps` paths are relative to the `build.outDir`. The return value should be a relative path to the `build.outDir`.
 
 ```js twoslash
 /** @type {import('vite').UserConfig} */

diff --git a/docs/guide/api-plugin.md b/docs/guide/api-plugin.md
@@ -432,7 +432,6 @@ Vite plugins can also provide hooks that serve Vite-specific purposes. These hoo
 
     ```js
     handleHotUpdate({ server, modules, timestamp }) {
-      server.ws.send({ type: 'full-reload' })
       // Invalidate modules manually
       const invalidatedModules = new Set()
       for (const mod of modules) {
@@ -443,6 +442,7 @@ Vite plugins can also provide hooks that serve Vite-specific purposes. These hoo
           true
         )
       }
+      server.ws.send({ type: 'full-reload' })
       return []
     }
     ```

diff --git a/docs/package.json b/docs/package.json
@@ -11,7 +11,7 @@
     "@shikijs/vitepress-twoslash": "^1.12.1",
     "@types/express": "^4.17.21",
     "feed": "^4.2.2",
-    "vitepress": "1.3.1",
-    "vue": "^3.4.35"
+    "vitepress": "1.3.2",
+    "vue": "^3.4.37"
   }
 }
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "ci-docs": "run-s build docs-build"
   },
   "devDependencies": {
-    "@eslint/js": "^9.8.0",
+    "@eslint/js": "^9.9.0",
     "@types/babel__core": "^7.20.5",
     "@types/babel__preset-env": "^7.9.7",
     "@types/convert-source-map": "^2.0.3",
@@ -50,13 +50,13 @@
     "@types/etag": "^1.8.3",
     "@types/less": "^3.0.6",
     "@types/micromatch": "^4.0.9",
-    "@types/node": "^20.14.14",
-    "@types/picomatch": "^3.0.0",
+    "@types/node": "^20.14.15",
+    "@types/picomatch": "^3.0.1",
     "@types/stylus": "^0.48.42",
     "@types/ws": "^8.5.12",
     "@vitejs/release-scripts": "^1.3.2",
     "conventional-changelog-cli": "^5.0.0",
-    "eslint": "^9.8.0",
+    "eslint": "^9.9.0",
     "eslint-plugin-import-x": "^3.1.0",
     "eslint-plugin-n": "^17.10.2",
     "eslint-plugin-regexp": "^2.6.0",
@@ -65,16 +65,16 @@
     "lint-staged": "^15.2.8",
     "npm-run-all2": "^6.2.2",
     "picocolors": "^1.0.1",
-    "playwright-chromium": "^1.45.3",
+    "playwright-chromium": "^1.46.0",
     "prettier": "3.3.3",
     "rimraf": "^5.0.10",
     "rollup": "^4.13.0",
     "rollup-plugin-esbuild": "^6.1.1",
     "simple-git-hooks": "^2.11.1",
     "tslib": "^2.6.3",
-    "tsx": "^4.16.5",
+    "tsx": "^4.17.0",
     "typescript": "^5.5.3",
-    "typescript-eslint": "^8.0.0",
+    "typescript-eslint": "^8.0.1",
     "vite": "workspace:*",
     "vitest": "^2.0.5"
   },
@@ -95,7 +95,7 @@
       "eslint --cache --fix"
     ]
   },
-  "packageManager": "pnpm@9.6.0",
+  "packageManager": "pnpm@9.7.0",
   "pnpm": {
     "overrides": {
       "vite": "workspace:*"

diff --git a/packages/create-vite/template-lit-ts/package.json b/packages/create-vite/template-lit-ts/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "lit": "^3.1.4"
+    "lit": "^3.2.0"
   },
   "devDependencies": {
     "typescript": "^5.5.3",

diff --git a/packages/create-vite/template-lit/package.json b/packages/create-vite/template-lit/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "lit": "^3.1.4"
+    "lit": "^3.2.0"
   },
   "devDependencies": {
     "vite": "^5.4.0"

diff --git a/packages/create-vite/template-qwik-ts/package.json b/packages/create-vite/template-qwik-ts/package.json
@@ -14,6 +14,6 @@
     "vite": "^5.4.0"
   },
   "dependencies": {
-    "@builder.io/qwik": "^1.7.3"
+    "@builder.io/qwik": "^1.8.0"
   }
 }
diff --git a/packages/create-vite/template-qwik/package.json b/packages/create-vite/template-qwik/package.json
@@ -13,6 +13,6 @@
     "vite": "^5.4.0"
   },
   "dependencies": {
-    "@builder.io/qwik": "^1.7.3"
+    "@builder.io/qwik": "^1.8.0"
   }
 }
diff --git a/packages/create-vite/template-react-ts/package.json b/packages/create-vite/template-react-ts/package.json
@@ -14,16 +14,16 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.8.0",
+    "@eslint/js": "^9.9.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^9.8.0",
+    "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
     "typescript": "^5.5.3",
-    "typescript-eslint": "^8.0.0",
+    "typescript-eslint": "^8.0.1",
     "vite": "^5.4.0"
   }
 }
diff --git a/packages/create-vite/template-react/package.json b/packages/create-vite/template-react/package.json
@@ -14,11 +14,11 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.8.0",
+    "@eslint/js": "^9.9.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^9.8.0",
+    "eslint": "^9.9.0",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",

diff --git a/packages/create-vite/template-solid-ts/package.json b/packages/create-vite/template-solid-ts/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "solid-js": "^1.8.19"
+    "solid-js": "^1.8.20"
   },
   "devDependencies": {
     "typescript": "^5.5.3",

diff --git a/packages/create-vite/template-solid/package.json b/packages/create-vite/template-solid/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "solid-js": "^1.8.19"
+    "solid-js": "^1.8.20"
   },
   "devDependencies": {
     "vite": "^5.4.0",

diff --git a/packages/create-vite/template-vue-ts/package.json b/packages/create-vite/template-vue-ts/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.4.35"
+    "vue": "^3.4.37"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.2",

diff --git a/packages/create-vite/template-vue/package.json b/packages/create-vite/template-vue/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.4.35"
+    "vue": "^3.4.37"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.2",

diff --git a/packages/vite/client.d.ts b/packages/vite/client.d.ts
@@ -251,15 +251,6 @@ declare interface VitePreloadErrorEvent extends Event {
   payload: Error
 }
 
-declare interface Window {
-  addEventListener(
-    type: 'vite:preloadError',
-    listener: (this: Window, ev: VitePreloadErrorEvent) => unknown,
-    options?: boolean | AddEventListenerOptions,
-  ): void
-  removeEventListener(
-    type: 'vite:preloadError',
-    listener: (this: Window, ev: VitePreloadErrorEvent) => unknown,
-    options?: boolean | EventListenerOptions,
-  ): void
+declare interface WindowEventMap {
+  'vite:preloadError': VitePreloadErrorEvent
 }
diff --git a/packages/vite/package.json b/packages/vite/package.json
@@ -86,7 +86,7 @@
   "//": "READ CONTRIBUTING.md to understand what to put under deps vs. devDeps!",
   "dependencies": {
     "esbuild": "^0.21.3",
-    "postcss": "^8.4.40",
+    "postcss": "^8.4.41",
     "rollup": "^4.13.0"
   },
   "optionalDependencies": {
@@ -123,7 +123,7 @@
     "fast-glob": "^3.3.2",
     "http-proxy": "^1.18.1",
     "launch-editor-middleware": "^2.8.1",
-    "lightningcss": "^1.25.1",
+    "lightningcss": "^1.26.0",
     "magic-string": "^0.30.11",
     "micromatch": "^4.0.7",
     "mlly": "^1.7.1",

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -3011,7 +3011,7 @@ async function compileLightningCSS(
         }
         deps.add(dep.url)
         if (urlReplacer) {
-          const replaceUrl = await urlReplacer(dep.url, id)
+          const replaceUrl = await urlReplacer(dep.url, dep.loc.filePath)
           css = css.replace(dep.placeholder, () => replaceUrl)
         } else {
           css = css.replace(dep.placeholder, () => dep.url)

diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -166,15 +166,9 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
   const isWorker = config.isWorker
   const insertPreload = !(ssr || !!config.build.lib || isWorker)
 
-  const resolveModulePreloadDependencies =
-    config.build.modulePreload && config.build.modulePreload.resolveDependencies
   const renderBuiltUrl = config.experimental.renderBuiltUrl
-  const customModulePreloadPaths = !!(
-    resolveModulePreloadDependencies || renderBuiltUrl
-  )
   const isRelativeBase = config.base === './' || config.base === ''
-  const optimizeModulePreloadRelativePaths =
-    isRelativeBase && !customModulePreloadPaths
+  const optimizeModulePreloadRelativePaths = isRelativeBase && !renderBuiltUrl
 
   const { modulePreload } = config.build
   const scriptRel =
@@ -189,10 +183,10 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
   // This is maintained to keep backwards compatibility as some users developed plugins
   // using regex over this list to workaround the fact that module preload wasn't
   // configurable.
-  const assetsURL = customModulePreloadPaths
-    ? // If `experimental.renderBuiltUrl` or `build.modulePreload.resolveDependencies` are used
-      // the dependencies are already resolved. To avoid the need for `new URL(dep, import.meta.url)`
-      // a helper `__vitePreloadRelativeDep` is used to resolve from relative paths which can be minimized.
+  const assetsURL = renderBuiltUrl
+    ? // If `experimental.renderBuiltUrl` is used, the dependencies are already resolved.
+      // To avoid the need for `new URL(dep, import.meta.url)`, a helper `__vitePreloadRelativeDep` is
+      // used to resolve from relative paths which can be minimized.
       `function(dep, importerUrl) { return dep[0] === '.' ? new URL(dep, importerUrl).href : dep }`
     : optimizeModulePreloadRelativePaths
       ? // If there isn't custom resolvers affecting the deps list, deps in the list are relative
@@ -353,7 +347,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
           str().appendRight(
             expEnd,
             `,${isModernFlag}?${preloadMarker}:void 0${
-              optimizeModulePreloadRelativePaths || customModulePreloadPaths
+              optimizeModulePreloadRelativePaths || renderBuiltUrl
                 ? ',import.meta.url'
                 : ''
             })`,
@@ -580,7 +574,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
 
               if (markerStartPos > 0) {
                 // the dep list includes the main chunk, so only need to reload when there are actual other deps.
-                const depsArray =
+                let depsArray =
                   deps.size > 1 ||
                   // main chunk is removed
                   (hasRemovedPureCssChunk && deps.size > 0)
@@ -591,33 +585,29 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                       : [...deps]
                     : []
 
-                let renderedDeps: number[]
-                if (normalizedFile && customModulePreloadPaths) {
-                  const { modulePreload } = config.build
-                  const resolveDependencies = modulePreload
-                    ? modulePreload.resolveDependencies
-                    : undefined
-                  let resolvedDeps: string[]
-                  if (resolveDependencies) {
-                    // We can't let the user remove css deps as these aren't really preloads, they are just using
-                    // the same mechanism as module preloads for this chunk
-                    const cssDeps: string[] = []
-                    const otherDeps: string[] = []
-                    for (const dep of depsArray) {
-                      ;(dep.endsWith('.css') ? cssDeps : otherDeps).push(dep)
-                    }
-                    resolvedDeps = [
-                      ...resolveDependencies(normalizedFile, otherDeps, {
-                        hostId: file,
-                        hostType: 'js',
-                      }),
-                      ...cssDeps,
-                    ]
-                  } else {
-                    resolvedDeps = depsArray
+                const resolveDependencies = modulePreload
+                  ? modulePreload.resolveDependencies
+                  : undefined
+                if (resolveDependencies && normalizedFile) {
+                  // We can't let the user remove css deps as these aren't really preloads, they are just using
+                  // the same mechanism as module preloads for this chunk
+                  const cssDeps: string[] = []
+                  const otherDeps: string[] = []
+                  for (const dep of depsArray) {
+                    ;(dep.endsWith('.css') ? cssDeps : otherDeps).push(dep)
                   }
+                  depsArray = [
+                    ...resolveDependencies(normalizedFile, otherDeps, {
+                      hostId: file,
+                      hostType: 'js',
+                    }),
+                    ...cssDeps,
+                  ]
+                }
 
-                  renderedDeps = resolvedDeps.map((dep) => {
+                let renderedDeps: number[]
+                if (renderBuiltUrl) {
+                  renderedDeps = depsArray.map((dep) => {
                     const replacement = toOutputFilePathInJS(
                       dep,
                       'asset',

diff --git a/playground/alias/package.json b/playground/alias/package.json
@@ -11,8 +11,8 @@
   },
   "dependencies": {
     "aliased-module": "file:./dir/module",
-    "vue": "^3.4.35",
-    "@vue/shared": "^3.4.35"
+    "vue": "^3.4.37",
+    "@vue/shared": "^3.4.37"
   },
   "devDependencies": {
     "@vitejs/test-resolve-linked": "workspace:*"

diff --git a/playground/backend-integration/package.json b/playground/backend-integration/package.json
@@ -11,7 +11,7 @@
   },
   "devDependencies": {
     "sass": "^1.77.8",
-    "tailwindcss": "^3.4.7",
+    "tailwindcss": "^3.4.9",
     "fast-glob": "^3.3.2"
   }
 }
diff --git a/playground/css-lightningcss-proxy/package.json b/playground/css-lightningcss-proxy/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "lightningcss": "^1.25.1",
+    "lightningcss": "^1.26.0",
     "express": "^4.19.2"
   }
 }
diff --git a/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts b/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts
@@ -7,6 +7,7 @@ import {
   isBuild,
   page,
   untilUpdated,
+  viteTestUrl,
 } from '~utils'
 
 // note: tests should retrieve the element at the beginning of test and reuse it
@@ -71,3 +72,10 @@ test('css with external url', async () => {
   const css = await page.$('.external')
   expect(await getBg(css)).toMatch('url("https://vitejs.dev/logo.svg")')
 })
+
+test('nested css with relative asset', async () => {
+  const css = await page.$('.nested-css-relative-asset')
+  expect(await getBg(css)).toMatch(
+    isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`,
+  )
+})