Merge branch 'main' into perf-stat

netlify.toml

@@ -1,6 +1,7 @@
 [build.environment]
   NODE_VERSION = "16"
+  NPM_FLAGS = "--version" # prevent Netlify npm install
 [build]
   publish = "docs/.vitepress/dist"
-  command = "pnpm ci-docs"
+  command = "npx pnpm i --store=node_modules/.pnpm-store --frozen-lockfile && npm run ci-docs"
   ignore = "./scripts/docs-check.sh"

packages/vite/CHANGELOG.md

@@ -1,3 +1,12 @@
+## <small>4.0.3 (2022-12-21)</small>
+
+* chore(deps): update dependency @rollup/plugin-commonjs to v24 (#11420) ([241db16](https://github.com/vitejs/vite/commit/241db16)), closes [#11420](https://github.com/vitejs/vite/issues/11420)
+* chore(typo): fix typo (#11445) ([ed80ea5](https://github.com/vitejs/vite/commit/ed80ea5)), closes [#11445](https://github.com/vitejs/vite/issues/11445)
+* fix(ssr): ignore module exports condition (#11409) ([d3c9c0b](https://github.com/vitejs/vite/commit/d3c9c0b)), closes [#11409](https://github.com/vitejs/vite/issues/11409)
+* feat: allow import.meta.hot define override (#8944) ([857d578](https://github.com/vitejs/vite/commit/857d578)), closes [#8944](https://github.com/vitejs/vite/issues/8944)
+
+
+
 ## <small>4.0.2 (2022-12-18)</small>
 
 * fix: fix the error message in the `toOutputFilePathWithoutRuntime` function (#11367) ([8820f75](https://github.com/vitejs/vite/commit/8820f75)), closes [#11367](https://github.com/vitejs/vite/issues/11367)

packages/vite/LICENSE.md

@@ -2933,35 +2933,6 @@ Repository: lukeed/sirv
 
 ---------------------------------------
 
-## sourcemap-codec
-License: MIT
-By: Rich Harris
-Repository: https://github.com/Rich-Harris/sourcemap-codec
-
-> The MIT License
-> 
-> Copyright (c) 2015 Rich Harris
-> 
-> Permission is hereby granted, free of charge, to any person obtaining a copy
-> of this software and associated documentation files (the "Software"), to deal
-> in the Software without restriction, including without limitation the rights
-> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-> copies of the Software, and to permit persons to whom the Software is
-> furnished to do so, subject to the following conditions:
-> 
-> The above copyright notice and this permission notice shall be included in
-> all copies or substantial portions of the Software.
-> 
-> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-> THE SOFTWARE.
-
----------------------------------------
-
 ## statuses
 License: MIT
 By: Douglas Christopher Wilson, Jonathan Ong
@@ -3163,7 +3134,7 @@ Repository: unjs/ufo
 
 > MIT License
 > 
-> Copyright (c) 2020 Nuxt Contrib
+> Copyright (c) Pooya Parsa <pooya@pi0.io>
 > 
 > Permission is hereby granted, free of charge, to any person obtaining a copy
 > of this software and associated documentation files (the "Software"), to deal

packages/vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "type": "module",
   "license": "MIT",
   "author": "Evan You",

packages/vite/src/node/__tests__/build.spec.ts

@@ -3,14 +3,107 @@ import { fileURLToPath } from 'node:url'
 import colors from 'picocolors'
 import type { Logger } from 'vite'
 import { describe, expect, test, vi } from 'vitest'
-import type { OutputOptions } from 'rollup'
+import type { OutputChunk, OutputOptions, RollupOutput } from 'rollup'
 import type { LibraryFormats, LibraryOptions } from '../build'
-import { resolveBuildOutputs, resolveLibFilename } from '../build'
+import { build, resolveBuildOutputs, resolveLibFilename } from '../build'
 import { createLogger } from '../logger'
 
 const __dirname = resolve(fileURLToPath(import.meta.url), '..')
 
 type FormatsToFileNames = [LibraryFormats, string][]
+
+describe('build', () => {
+  test('file hash should change when css changes for dynamic entries', async () => {
+    const buildProject = async (cssColor: string) => {
+      return (await build({
+        root: resolve(__dirname, 'packages/build-project'),
+        logLevel: 'silent',
+        build: {
+          write: false,
+        },
+        plugins: [
+          {
+            name: 'test',
+            resolveId(id) {
+              if (
+                id === 'entry.js' ||
+                id === 'subentry.js' ||
+                id === 'foo.css'
+              ) {
+                return '\0' + id
+              }
+            },
+            load(id) {
+              if (id === '\0entry.js') {
+                return `window.addEventListener('click', () => { import('subentry.js') });`
+              }
+              if (id === '\0subentry.js') {
+                return `import 'foo.css'`
+              }
+              if (id === '\0foo.css') {
+                return `.foo { color: ${cssColor} }`
+              }
+            },
+          },
+        ],
+      })) as RollupOutput
+    }
+    const result = await Promise.all([
+      buildProject('red'),
+      buildProject('blue'),
+    ])
+    assertOutputHashContentChange(result[0], result[1])
+  })
+
+  test('file hash should change when pure css chunk changes', async () => {
+    const buildProject = async (cssColor: string) => {
+      return (await build({
+        root: resolve(__dirname, 'packages/build-project'),
+        logLevel: 'silent',
+        build: {
+          write: false,
+        },
+        plugins: [
+          {
+            name: 'test',
+            resolveId(id) {
+              if (
+                id === 'entry.js' ||
+                id === 'foo.js' ||
+                id === 'bar.js' ||
+                id === 'baz.js' ||
+                id === 'foo.css' ||
+                id === 'bar.css' ||
+                id === 'baz.css'
+              ) {
+                return '\0' + id
+              }
+            },
+            load(id) {
+              if (id === '\0entry.js') {
+                return `
+                  window.addEventListener('click', () => { import('foo.js') });
+                  window.addEventListener('click', () => { import('bar.js') });`
+              }
+              if (id === '\0foo.js') return `import 'foo.css'; import 'baz.js'`
+              if (id === '\0bar.js') return `import 'bar.css'; import 'baz.js'`
+              if (id === '\0baz.js') return `import 'baz.css'`
+              if (id === '\0foo.css') return `.foo { color: red }`
+              if (id === '\0bar.css') return `.foo { color: green }`
+              if (id === '\0baz.css') return `.foo { color: ${cssColor} }`
+            },
+          },
+        ],
+      })) as RollupOutput
+    }
+    const result = await Promise.all([
+      buildProject('yellow'),
+      buildProject('blue'),
+    ])
+    assertOutputHashContentChange(result[0], result[1])
+  })
+})
+
 const baseLibOptions: LibraryOptions = {
   fileName: 'my-lib',
   entry: 'mylib.js',
@@ -439,3 +532,26 @@ describe('resolveBuildOutputs', () => {
     )
   })
 })
+
+/**
+ * for each chunks in output1, if there's a chunk in output2 with the same fileName,
+ * ensure that the chunk code is the same. if not, the chunk hash should have changed.
+ */
+function assertOutputHashContentChange(
+  output1: RollupOutput,
+  output2: RollupOutput,
+) {
+  for (const chunk of output1.output) {
+    if (chunk.type === 'chunk') {
+      const chunk2 = output2.output.find(
+        (c) => c.type === 'chunk' && c.fileName === chunk.fileName,
+      ) as OutputChunk | undefined
+      if (chunk2) {
+        expect(
+          chunk.code,
+          `the ${chunk.fileName} chunk has the same hash but different contents between builds`,
+        ).toEqual(chunk2.code)
+      }
+    }
+  }
+}

packages/vite/src/node/__tests__/packages/build-project/index.html

@@ -0,0 +1,3 @@
+<h1>Hello world</h1>
+
+<script type="module" src="entry.js"></script>

packages/vite/src/node/plugins/asset.ts

@@ -210,6 +210,10 @@ export function checkPublicFile(
     return
   }
   const publicFile = path.join(publicDir, cleanUrl(url))
+  if (!publicFile.startsWith(publicDir)) {
+    // can happen if URL starts with '../'
+    return
+  }
   if (fs.existsSync(publicFile)) {
     return publicFile
   } else {

packages/vite/src/node/plugins/css.ts

@@ -622,6 +622,16 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
       return null
     },
 
+    augmentChunkHash(chunk) {
+      if (chunk.viteMetadata?.importedCss.size) {
+        let hash = ''
+        for (const id of chunk.viteMetadata.importedCss) {
+          hash += id
+        }
+        return hash
+      }
+    },
+
     async generateBundle(opts, bundle) {
       // @ts-expect-error asset emits are skipped in legacy bundle
       if (opts.__vite_skip_asset_emit__) {

packages/vite/src/node/ssr/ssrModuleLoader.ts

@@ -8,7 +8,7 @@ import {
   usingDynamicImport,
 } from '../utils'
 import { transformRequest } from '../server/transformRequest'
-import type { InternalResolveOptions } from '../plugins/resolve'
+import type { InternalResolveOptionsWithOverrideConditions } from '../plugins/resolve'
 import { tryNodeResolve } from '../plugins/resolve'
 import {
   ssrDynamicImportKey,
@@ -112,10 +112,11 @@ async function instantiateModule(
     root,
   } = server.config
 
-  const resolveOptions: InternalResolveOptions = {
+  const resolveOptions: InternalResolveOptionsWithOverrideConditions = {
     mainFields: ['main'],
     browserField: true,
     conditions: [],
+    overrideConditions: ['production', 'development'],
     extensions: ['.js', '.cjs', '.json'],
     dedupe,
     preserveSymlinks,
@@ -223,7 +224,7 @@ async function instantiateModule(
 async function nodeImport(
   id: string,
   importer: string,
-  resolveOptions: InternalResolveOptions,
+  resolveOptions: InternalResolveOptionsWithOverrideConditions,
 ) {
   let url: string
   if (id.startsWith('node:') || isBuiltin(id)) {

packages/vite/src/types/chokidar.d.ts

@@ -158,7 +158,7 @@ export interface WatchOptions {
 
   /**
    * Whether to use the `fsevents` watching interface if available. When set to `true` explicitly
-   * and `fsevents` is available this supercedes the `usePolling` setting. When set to `false` on
+   * and `fsevents` is available this supersedes the `usePolling` setting. When set to `false` on
    * OS X, `usePolling: true` becomes the default.
    */
   useFsEvents?: boolean

playground/optimize-deps/__tests__/optimize-deps.spec.ts

@@ -113,8 +113,10 @@ test('CJS dep with css import', async () => {
   expect(await getColor('.cjs-with-assets')).toBe('blue')
 })
 
-test('dep w/ non-js files handled via plugin', async () => {
-  expect(await page.textContent('.plugin')).toMatch(`[success]`)
+test('externalize known non-js files in optimize included dep', async () => {
+  expect(await page.textContent('.externalize-known-non-js')).toMatch(
+    `[success]`,
+  )
 })
 
 test('vue + vuex', async () => {

playground/optimize-deps/index.html

@@ -65,8 +65,8 @@ <h2>Import from dependency with dynamic import</h2>
 <h2>Import from dependency with optional peer dep</h2>
 <div class="dep-with-optional-peer-dep"></div>
 
-<h2>Dep w/ special file format supported via plugins</h2>
-<div class="plugin"></div>
+<h2>Externalize known non-js files in optimize included dep</h2>
+<div class="externalize-known-non-js"></div>
 
 <h2>Vue & Vuex</h2>
 <div class="vue"></div>
@@ -111,7 +111,7 @@ <h2>Non Optimized Module isn't duplicated</h2>
 
   import { msg, VueSFC } from '@vitejs/test-dep-linked-include'
   text('.force-include', msg)
-  text('.plugin', VueSFC.render())
+  text('.externalize-known-non-js', VueSFC.render())
 
   import * as linked from '@vitejs/test-dep-linked-include'
   const keys = Object.keys(linked)

playground/optimize-deps/package.json

@@ -38,8 +38,5 @@
     "vuex": "^4.1.0",
     "lodash": "^4.17.21",
     "lodash.clonedeep": "^4.5.0"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^4.0.0"
   }
 }

playground/optimize-deps/vite.config.js

@@ -1,5 +1,4 @@
 const fs = require('node:fs')
-const vue = require('@vitejs/plugin-vue')
 
 // Overriding the NODE_ENV set by vitest
 process.env.NODE_ENV = ''
@@ -52,7 +51,7 @@ module.exports = {
   },
 
   plugins: [
-    vue(),
+    testVue(),
     notjs(),
     // for axios request test
     {
@@ -95,6 +94,29 @@ module.exports = {
   ],
 }
 
+// Handles Test.vue in dep-linked-include package
+function testVue() {
+  return {
+    name: 'testvue',
+    transform(code, id) {
+      if (id.includes('dep-linked-include/Test.vue')) {
+        return {
+          code: `
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Test',
+  render() {
+    return '[success] rendered from Vue'
+  }
+})
+`.trim(),
+        }
+      }
+    },
+  }
+}
+
 // Handles .notjs file, basically remove wrapping <notjs> and </notjs> tags
 function notjs() {
   return {

playground/preload/__tests__/preload-disabled/preload-disabled.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'vitest'
-import { browserLogs, isBuild, page, viteTestUrl } from '~utils'
+import { browserLogs, isBuild, page } from '~utils'
 
 test('should have no 404s', () => {
   browserLogs.forEach((msg) => {
@@ -9,12 +9,14 @@ test('should have no 404s', () => {
 
 describe.runIf(isBuild)('build', () => {
   test('dynamic import', async () => {
-    const appHtml = await page.content()
-    expect(appHtml).toMatch('This is <b>home</b> page.')
+    await page.waitForSelector('#done')
+    expect(await page.textContent('#done')).toBe('ran js')
   })
 
   test('dynamic import with comments', async () => {
-    await page.goto(viteTestUrl + '/#/hello')
+    await page.click('#hello .load')
+    await page.waitForSelector('#hello output')
+
     const html = await page.content()
     expect(html).not.toMatch(/link rel="modulepreload"/)
     expect(html).not.toMatch(/link rel="stylesheet"/)