Merge branch 'main' into refactor-resolve-from

vitejs · Mar 21, 2023 · ff02c9a · ff02c9a
2 parents a8c3869 + 8d2931b
commit ff02c9a
Show file tree

Hide file tree

Showing 56 changed files with 509 additions and 324 deletions.
diff --git a/docs/config/worker-options.md b/docs/config/worker-options.md
@@ -5,7 +5,7 @@ Options related to Web Workers.
 ## worker.format
 
 - **Type:** `'es' | 'iife'`
-- **Default:** `iife`
+- **Default:** `'iife'`
 
 Output format for worker bundle.
 

diff --git a/docs/guide/features.md b/docs/guide/features.md
@@ -248,10 +248,14 @@ You can also use CSS modules combined with pre-processors by prepending `.module
 The automatic injection of CSS contents can be turned off via the `?inline` query parameter. In this case, the processed CSS string is returned as the module's default export as usual, but the styles aren't injected to the page.
 
 ```js
-import styles from './foo.css' // will be injected into the page
+import './foo.css' // will be injected into the page
 import otherStyles from './bar.css?inline' // will not be injected
 ```
 
+::: tip NOTE
+Default and named imports from CSS files (e.g `import style from './foo.css'`) are deprecated since Vite 4. Use the `?inline` query instead.
+:::
+
 ## Static Assets
 
 Importing a static asset will return the resolved public URL when it is served:

diff --git a/package.json b/package.json
@@ -79,7 +79,7 @@
     "prompts": "^2.4.2",
     "resolve": "^1.22.1",
     "rimraf": "^4.1.2",
-    "rollup": "^3.18.0",
+    "rollup": "^3.20.0",
     "semver": "^7.3.8",
     "simple-git-hooks": "^2.8.1",
     "tslib": "^2.5.0",

diff --git a/packages/create-vite/template-lit-ts/package.json b/packages/create-vite/template-lit-ts/package.json
@@ -21,6 +21,6 @@
   },
   "devDependencies": {
     "typescript": "^4.9.3",
-    "vite": "^4.1.0"
+    "vite": "^4.2.0"
   }
 }
diff --git a/packages/create-vite/template-lit/package.json b/packages/create-vite/template-lit/package.json
@@ -18,6 +18,6 @@
     "lit": "^2.6.1"
   },
   "devDependencies": {
-    "vite": "^4.1.0"
+    "vite": "^4.2.0"
   }
 }
diff --git a/packages/create-vite/template-preact-ts/package.json b/packages/create-vite/template-preact-ts/package.json
@@ -14,6 +14,6 @@
   "devDependencies": {
     "@preact/preset-vite": "^2.5.0",
     "typescript": "^4.9.3",
-    "vite": "^4.1.0"
+    "vite": "^4.2.0"
   }
 }
diff --git a/packages/create-vite/template-preact/package.json b/packages/create-vite/template-preact/package.json
@@ -13,6 +13,6 @@
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.5.0",
-    "vite": "^4.1.0"
+    "vite": "^4.2.0"
   }
 }
diff --git a/packages/create-vite/template-react-ts/package.json b/packages/create-vite/template-react-ts/package.json
@@ -17,6 +17,6 @@
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^3.1.0",
     "typescript": "^4.9.3",
-    "vite": "^4.1.0"
+    "vite": "^4.2.0"
   }
 }
diff --git a/packages/create-vite/template-react-ts/src/App.tsx b/packages/create-vite/template-react-ts/src/App.tsx
@@ -12,7 +12,7 @@ function App() {
         <a href="https://vitejs.dev" target="_blank">
           <img src={viteLogo} className="logo" alt="Vite logo" />
         </a>
-        <a href="https://reactjs.org" target="_blank">
+        <a href="https://react.dev" target="_blank">
           <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
       </div>

diff --git a/packages/create-vite/template-react/package.json b/packages/create-vite/template-react/package.json
@@ -16,6 +16,6 @@
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^3.1.0",
-    "vite": "^4.1.0"
+    "vite": "^4.2.0"
   }
 }
diff --git a/packages/create-vite/template-react/src/App.jsx b/packages/create-vite/template-react/src/App.jsx
@@ -12,7 +12,7 @@ function App() {
         <a href="https://vitejs.dev" target="_blank">
           <img src={viteLogo} className="logo" alt="Vite logo" />
         </a>
-        <a href="https://reactjs.org" target="_blank">
+        <a href="https://react.dev" target="_blank">
           <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
       </div>

diff --git a/packages/create-vite/template-svelte-ts/package.json b/packages/create-vite/template-svelte-ts/package.json
@@ -16,6 +16,6 @@
     "svelte-check": "^2.10.3",
     "tslib": "^2.5.0",
     "typescript": "^4.9.3",
-    "vite": "^4.1.0"
+    "vite": "^4.2.0"
   }
 }
diff --git a/packages/create-vite/template-svelte/package.json b/packages/create-vite/template-svelte/package.json
@@ -11,6 +11,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.0.3",
     "svelte": "^3.55.1",
-    "vite": "^4.1.0"
+    "vite": "^4.2.0"
   }
 }
diff --git a/packages/create-vite/template-vanilla-ts/package.json b/packages/create-vite/template-vanilla-ts/package.json
@@ -10,6 +10,6 @@
   },
   "devDependencies": {
     "typescript": "^4.9.3",
-    "vite": "^4.1.0"
+    "vite": "^4.2.0"
   }
 }
diff --git a/packages/create-vite/template-vanilla/package.json b/packages/create-vite/template-vanilla/package.json
@@ -9,6 +9,6 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^4.1.0"
+    "vite": "^4.2.0"
   }
 }
diff --git a/packages/create-vite/template-vue-ts/package.json b/packages/create-vite/template-vue-ts/package.json
@@ -12,9 +12,9 @@
     "vue": "^3.2.47"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^4.1.0",
     "typescript": "^4.9.3",
-    "vite": "^4.1.0",
+    "vite": "^4.2.0",
     "vue-tsc": "^1.2.0"
   }
 }
diff --git a/packages/create-vite/template-vue/package.json b/packages/create-vite/template-vue/package.json
@@ -13,6 +13,6 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.1.0",
-    "vite": "^4.1.0"
+    "vite": "^4.2.0"
   }
 }
diff --git a/packages/vite/CHANGELOG.md b/packages/vite/CHANGELOG.md
diff --git a/packages/vite/package.json b/packages/vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vite",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "type": "module",
   "license": "MIT",
   "author": "Evan You",
@@ -69,7 +69,7 @@
     "esbuild": "^0.17.5",
     "postcss": "^8.4.21",
     "resolve": "^1.22.1",
-    "rollup": "^3.18.0"
+    "rollup": "^3.20.0"
   },
   "optionalDependencies": {
     "fsevents": "~2.3.2"

diff --git a/packages/vite/rollup.config.ts b/packages/vite/rollup.config.ts
@@ -300,7 +300,7 @@ const __require = require;
 
       return {
         code: s.toString(),
-        map: s.generateMap(),
+        map: s.generateMap({ hires: true }),
       }
     },
   }

diff --git a/packages/vite/src/node/plugins/clientInjections.ts b/packages/vite/src/node/plugins/clientInjections.ts
@@ -13,54 +13,74 @@ const normalizedEnvEntry = normalizePath(ENV_ENTRY)
  * @server-only
  */
 export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
+  let injectConfigValues: (code: string) => string
+
   return {
     name: 'vite:client-inject',
-    async transform(code, id, options) {
-      if (id === normalizedClientEntry || id === normalizedEnvEntry) {
-        const resolvedServerHostname = (
-          await resolveHostname(config.server.host)
-        ).name
-        const resolvedServerPort = config.server.port!
-        const devBase = config.base
+    async buildStart() {
+      const resolvedServerHostname = (await resolveHostname(config.server.host))
+        .name
+      const resolvedServerPort = config.server.port!
+      const devBase = config.base
+
+      const serverHost = `${resolvedServerHostname}:${resolvedServerPort}${devBase}`
 
-        const serverHost = `${resolvedServerHostname}:${resolvedServerPort}${devBase}`
+      let hmrConfig = config.server.hmr
+      hmrConfig = isObject(hmrConfig) ? hmrConfig : undefined
+      const host = hmrConfig?.host || null
+      const protocol = hmrConfig?.protocol || null
+      const timeout = hmrConfig?.timeout || 30000
+      const overlay = hmrConfig?.overlay !== false
+      const isHmrServerSpecified = !!hmrConfig?.server
 
-        let hmrConfig = config.server.hmr
-        hmrConfig = isObject(hmrConfig) ? hmrConfig : undefined
-        const host = hmrConfig?.host || null
-        const protocol = hmrConfig?.protocol || null
-        const timeout = hmrConfig?.timeout || 30000
-        const overlay = hmrConfig?.overlay !== false
-        const isHmrServerSpecified = !!hmrConfig?.server
+      // hmr.clientPort -> hmr.port
+      // -> (24678 if middleware mode and HMR server is not specified) -> new URL(import.meta.url).port
+      let port = hmrConfig?.clientPort || hmrConfig?.port || null
+      if (config.server.middlewareMode && !isHmrServerSpecified) {
+        port ||= 24678
+      }
+
+      let directTarget = hmrConfig?.host || resolvedServerHostname
+      directTarget += `:${hmrConfig?.port || resolvedServerPort}`
+      directTarget += devBase
 
-        // hmr.clientPort -> hmr.port
-        // -> (24678 if middleware mode and HMR server is not specified) -> new URL(import.meta.url).port
-        let port = hmrConfig?.clientPort || hmrConfig?.port || null
-        if (config.server.middlewareMode && !isHmrServerSpecified) {
-          port ||= 24678
-        }
+      let hmrBase = devBase
+      if (hmrConfig?.path) {
+        hmrBase = path.posix.join(hmrBase, hmrConfig.path)
+      }
 
-        let directTarget = hmrConfig?.host || resolvedServerHostname
-        directTarget += `:${hmrConfig?.port || resolvedServerPort}`
-        directTarget += devBase
+      const serializedDefines = serializeDefine(config.define || {})
 
-        let hmrBase = devBase
-        if (hmrConfig?.path) {
-          hmrBase = path.posix.join(hmrBase, hmrConfig.path)
-        }
+      const modeReplacement = escapeReplacement(config.mode)
+      const baseReplacement = escapeReplacement(devBase)
+      const definesReplacement = () => serializedDefines
+      const serverHostReplacement = escapeReplacement(serverHost)
+      const hmrProtocolReplacement = escapeReplacement(protocol)
+      const hmrHostnameReplacement = escapeReplacement(host)
+      const hmrPortReplacement = escapeReplacement(port)
+      const hmrDirectTargetReplacement = escapeReplacement(directTarget)
+      const hmrBaseReplacement = escapeReplacement(hmrBase)
+      const hmrTimeoutReplacement = escapeReplacement(timeout)
+      const hmrEnableOverlayReplacement = escapeReplacement(overlay)
 
+      injectConfigValues = (code: string) => {
         return code
-          .replace(`__MODE__`, JSON.stringify(config.mode))
-          .replace(/__BASE__/g, JSON.stringify(devBase))
-          .replace(`__DEFINES__`, serializeDefine(config.define || {}))
-          .replace(`__SERVER_HOST__`, JSON.stringify(serverHost))
-          .replace(`__HMR_PROTOCOL__`, JSON.stringify(protocol))
-          .replace(`__HMR_HOSTNAME__`, JSON.stringify(host))
-          .replace(`__HMR_PORT__`, JSON.stringify(port))
-          .replace(`__HMR_DIRECT_TARGET__`, JSON.stringify(directTarget))
-          .replace(`__HMR_BASE__`, JSON.stringify(hmrBase))
-          .replace(`__HMR_TIMEOUT__`, JSON.stringify(timeout))
-          .replace(`__HMR_ENABLE_OVERLAY__`, JSON.stringify(overlay))
+          .replace(`__MODE__`, modeReplacement)
+          .replace(/__BASE__/g, baseReplacement)
+          .replace(`__DEFINES__`, definesReplacement)
+          .replace(`__SERVER_HOST__`, serverHostReplacement)
+          .replace(`__HMR_PROTOCOL__`, hmrProtocolReplacement)
+          .replace(`__HMR_HOSTNAME__`, hmrHostnameReplacement)
+          .replace(`__HMR_PORT__`, hmrPortReplacement)
+          .replace(`__HMR_DIRECT_TARGET__`, hmrDirectTargetReplacement)
+          .replace(`__HMR_BASE__`, hmrBaseReplacement)
+          .replace(`__HMR_TIMEOUT__`, hmrTimeoutReplacement)
+          .replace(`__HMR_ENABLE_OVERLAY__`, hmrEnableOverlayReplacement)
+      }
+    },
+    transform(code, id, options) {
+      if (id === normalizedClientEntry || id === normalizedEnvEntry) {
+        return injectConfigValues(code)
       } else if (!options?.ssr && code.includes('process.env.NODE_ENV')) {
         // replace process.env.NODE_ENV instead of defining a global
         // for it to avoid shimming a `process` object during dev,
@@ -75,6 +95,11 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
   }
 }
 
+function escapeReplacement(value: string | number | boolean | null) {
+  const jsonValue = JSON.stringify(value)
+  return () => jsonValue
+}
+
 function serializeDefine(define: Record<string, any>): string {
   let res = `{`
   for (const key in define) {