vite 3.0.0-alpha.9 → 3.0.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite",
-  "version": "3.0.0-alpha.9",
+  "version": "3.0.0-beta.10",
   "type": "module",
   "license": "MIT",
   "author": "Evan You",
@@ -21,9 +21,7 @@
       "types": "./client.d.ts"
     },
     "./dist/client/*": "./dist/client/*",
-    "./terser": {
-      "require": "./dist/node-cjs/terser.cjs"
-    }
+    "./package.json": "./package.json"
   },
   "files": [
     "bin",
@@ -34,7 +32,7 @@
     "types"
   ],
   "engines": {
-    "node": ">=14.6.0"
+    "node": ">=14.18.0"
   },
   "repository": {
     "type": "git",
@@ -51,41 +49,41 @@
     "build-bundle": "rollup --config rollup.config.ts --configPlugin typescript",
     "build-types": "run-s build-temp-types patch-types roll-types check-dist-types",
     "build-temp-types": "tsc --emitDeclarationOnly --outDir temp/node -p src/node",
-    "patch-types": "esno scripts/patchTypes.ts",
+    "patch-types": "tsx scripts/patchTypes.ts",
     "roll-types": "api-extractor run && rimraf temp",
     "check-dist-types": "tsc --project tsconfig.check.json",
-    "lint": "eslint --ext .ts src/**",
-    "format": "prettier --write --parser typescript \"src/**/*.ts\"",
+    "lint": "eslint --cache --ext .ts src/**",
+    "format": "prettier --write --cache --parser typescript \"src/**/*.ts\"",
     "prepublishOnly": "npm run build"
   },
   "//": "READ CONTRIBUTING.md to understand what to put under deps vs. devDeps!",
   "dependencies": {
-    "esbuild": "^0.14.38",
+    "esbuild": "^0.14.47",
     "postcss": "^8.4.14",
-    "resolve": "^1.22.0",
-    "rollup": "^2.72.1"
+    "resolve": "^1.22.1",
+    "rollup": "^2.75.6"
   },
   "optionalDependencies": {
     "fsevents": "~2.3.2"
   },
   "devDependencies": {
     "@ampproject/remapping": "^2.2.0",
-    "@babel/parser": "^7.18.4",
-    "@babel/types": "^7.18.4",
-    "@jridgewell/trace-mapping": "^0.3.13",
+    "@babel/parser": "^7.18.8",
+    "@babel/types": "^7.18.8",
+    "@jridgewell/trace-mapping": "^0.3.14",
     "@rollup/plugin-alias": "^3.1.9",
-    "@rollup/plugin-commonjs": "^21.1.0",
+    "@rollup/plugin-commonjs": "^22.0.1",
     "@rollup/plugin-dynamic-import-vars": "^1.4.3",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "13.3.0",
-    "@rollup/plugin-typescript": "^8.3.2",
+    "@rollup/plugin-typescript": "^8.3.3",
     "@rollup/pluginutils": "^4.2.1",
-    "@vue/compiler-dom": "^3.2.36",
+    "@vue/compiler-dom": "^3.2.37",
     "acorn": "^8.7.1",
-    "cac": "6.7.9",
+    "cac": "^6.7.12",
     "chokidar": "^3.5.3",
     "connect": "^3.7.0",
-    "connect-history-api-fallback": "^1.6.0",
+    "connect-history-api-fallback": "^2.0.0",
     "convert-source-map": "^1.8.0",
     "cors": "^2.8.5",
     "cross-spawn": "^7.0.3",
@@ -93,8 +91,7 @@
     "dotenv": "^14.3.2",
     "dotenv-expand": "^5.1.0",
     "es-module-lexer": "^0.10.5",
-    "esno": "^0.16.3",
-    "estree-walker": "^2.0.2",
+    "estree-walker": "^3.0.1",
     "etag": "^1.8.1",
     "fast-glob": "^3.2.11",
     "http-proxy": "^1.18.1",
@@ -102,33 +99,33 @@
     "launch-editor-middleware": "^2.4.0",
     "magic-string": "^0.26.2",
     "micromatch": "^4.0.5",
-    "mrmime": "^1.0.0",
-    "node-forge": "^1.3.1",
+    "mlly": "^0.5.4",
+    "mrmime": "^1.0.1",
     "okie": "^1.0.1",
     "open": "^8.4.0",
-    "periscopic": "^2.0.3",
+    "periscopic": "^3.0.4",
     "picocolors": "^1.0.0",
     "postcss-import": "^14.1.0",
-    "postcss-load-config": "^3.1.4",
+    "postcss-load-config": "^4.0.1",
     "postcss-modules": "^4.3.1",
     "resolve.exports": "^1.1.0",
-    "rollup-plugin-license": "^2.8.0",
+    "rollup-plugin-license": "^2.8.1",
     "sirv": "^2.0.2",
     "source-map-js": "^1.0.2",
     "source-map-support": "^0.5.21",
-    "strip-ansi": "^6.0.1",
-    "strip-literal": "^0.3.0",
-    "terser": "^5.14.0",
+    "strip-ansi": "^7.0.1",
+    "strip-literal": "^0.4.0",
     "tsconfck": "^2.0.1",
     "tslib": "^2.4.0",
     "types": "link:./types",
-    "ufo": "^0.8.4",
-    "ws": "^8.7.0"
+    "ufo": "^0.8.5",
+    "ws": "^8.8.0"
   },
   "peerDependencies": {
     "less": "*",
     "sass": "*",
-    "stylus": "*"
+    "stylus": "*",
+    "terser": "^5.4.0"
   },
   "peerDependenciesMeta": {
     "sass": {
@@ -139,6 +136,9 @@
     },
     "less": {
       "optional": true
+    },
+    "terser": {
+      "optional": true
     }
   }
 }

package/src/client/client.ts

@@ -1,5 +1,5 @@
 import type { ErrorPayload, HMRPayload, Update } from 'types/hmrPayload'
-import type { ViteHotContext } from 'types/hot'
+import type { ModuleNamespace, ViteHotContext } from 'types/hot'
 import type { InferCustomEventPayload } from 'types/customEvent'
 import { ErrorOverlay, overlayId } from './overlay'
 // eslint-disable-next-line node/no-missing-import
@@ -7,24 +7,84 @@ import '@vite/env'
 
 // injected by the hmr plugin when served
 declare const __BASE__: string
-declare const __HMR_PROTOCOL__: string
-declare const __HMR_HOSTNAME__: string
-declare const __HMR_PORT__: string
+declare const __SERVER_HOST__: string
+declare const __HMR_PROTOCOL__: string | null
+declare const __HMR_HOSTNAME__: string | null
+declare const __HMR_PORT__: number | null
+declare const __HMR_DIRECT_TARGET__: string
+declare const __HMR_BASE__: string
 declare const __HMR_TIMEOUT__: number
 declare const __HMR_ENABLE_OVERLAY__: boolean
 
 console.debug('[vite] connecting...')
 
+const importMetaUrl = new URL(import.meta.url)
+
 // use server configuration, then fallback to inference
+const serverHost = __SERVER_HOST__
 const socketProtocol =
   __HMR_PROTOCOL__ || (location.protocol === 'https:' ? 'wss' : 'ws')
-const socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`
+const hmrPort = __HMR_PORT__
+const socketHost = `${__HMR_HOSTNAME__ || importMetaUrl.hostname}:${
+  hmrPort || importMetaUrl.port
+}${__HMR_BASE__}`
+const directSocketHost = __HMR_DIRECT_TARGET__
 const base = __BASE__ || '/'
 const messageBuffer: string[] = []
 
 let socket: WebSocket
 try {
-  socket = new WebSocket(`${socketProtocol}://${socketHost}`, 'vite-hmr')
+  let fallback: (() => void) | undefined
+  // only use fallback when port is inferred to prevent confusion
+  if (!hmrPort) {
+    fallback = () => {
+      // fallback to connecting directly to the hmr server
+      // for servers which does not support proxying websocket
+      socket = setupWebSocket(socketProtocol, directSocketHost, () => {
+        const currentScriptHostURL = new URL(import.meta.url)
+        const currentScriptHost =
+          currentScriptHostURL.host +
+          currentScriptHostURL.pathname.replace(/@vite\/client$/, '')
+        console.error(
+          '[vite] failed to connect to websocket.\n' +
+            'your current setup:\n' +
+            `  (browser) ${currentScriptHost} <--[HTTP]--> ${serverHost} (server)\n` +
+            `  (browser) ${socketHost} <--[WebSocket (failing)]--> ${directSocketHost} (server)\n` +
+            'Check out your Vite / network configuration and https://vitejs.dev/config/server-options.html#server-hmr .'
+        )
+      })
+      socket.addEventListener(
+        'open',
+        () => {
+          console.info(
+            '[vite] Direct websocket connection fallback. Check out https://vitejs.dev/config/server-options.html#server-hmr to remove the previous connection error.'
+          )
+        },
+        { once: true }
+      )
+    }
+  }
+
+  socket = setupWebSocket(socketProtocol, socketHost, fallback)
+} catch (error) {
+  console.error(`[vite] failed to connect to websocket (${error}). `)
+}
+
+function setupWebSocket(
+  protocol: string,
+  hostAndPath: string,
+  onCloseWithoutOpen?: () => void
+) {
+  const socket = new WebSocket(`${protocol}://${hostAndPath}`, 'vite-hmr')
+  let isOpened = false
+
+  socket.addEventListener(
+    'open',
+    () => {
+      isOpened = true
+    },
+    { once: true }
+  )
 
   // Listen for messages
   socket.addEventListener('message', async ({ data }) => {
@@ -34,12 +94,18 @@ try {
   // ping server
   socket.addEventListener('close', async ({ wasClean }) => {
     if (wasClean) return
+
+    if (!isOpened && onCloseWithoutOpen) {
+      onCloseWithoutOpen()
+      return
+    }
+
     console.log(`[vite] server connection lost. polling for restart...`)
-    await waitForSuccessfulPing()
+    await waitForSuccessfulPing(hostAndPath)
     location.reload()
   })
-} catch (error) {
-  console.error(`[vite] failed to connect to websocket (${error}). `)
+
+  return socket
 }
 
 function warnFailedFetch(err: Error, path: string | string[]) {
@@ -101,7 +167,18 @@ async function handleMessage(payload: HMRPayload) {
             const newPath = `${base}${searchUrl.slice(1)}${
               searchUrl.includes('?') ? '&' : '?'
             }t=${timestamp}`
-            el.href = new URL(newPath, el.href).href
+
+            // rather than swapping the href on the existing tag, we will
+            // create a new link tag. Once the new stylesheet has loaded we
+            // will remove the existing link tag. This removes a Flash Of
+            // Unstyled Content that can occur when swapping out the tag href
+            // directly, as the new stylesheet has not yet been loaded.
+            const newLinkTag = el.cloneNode() as HTMLLinkElement
+            newLinkTag.href = new URL(newPath, el.href).href
+            const removeOldEl = () => el.remove()
+            newLinkTag.addEventListener('load', removeOldEl)
+            newLinkTag.addEventListener('error', removeOldEl)
+            el.after(newLinkTag)
           }
           console.log(`[vite] css hot updated: ${searchUrl}`)
         }
@@ -211,13 +288,13 @@ async function queueUpdate(p: Promise<(() => void) | undefined>) {
   }
 }
 
-async function waitForSuccessfulPing(ms = 1000) {
+async function waitForSuccessfulPing(hostAndPath: string, ms = 1000) {
   // eslint-disable-next-line no-constant-condition
   while (true) {
     try {
       // A fetch on a websocket URL will return a successful promise with status 400,
       // but will reject a networking error.
-      await fetch(`${location.protocol}//${socketHost}`)
+      await fetch(`${location.protocol}//${hostAndPath}`)
       break
     } catch (e) {
       // wait ms before attempting to ping again
@@ -237,7 +314,10 @@ const supportsConstructedSheet = (() => {
   return false
 })()
 
-const sheetsMap = new Map()
+const sheetsMap = new Map<
+  string,
+  HTMLStyleElement | CSSStyleSheet | undefined
+>()
 
 export function updateStyle(id: string, content: string): void {
   let style = sheetsMap.get(id)
@@ -249,10 +329,12 @@ export function updateStyle(id: string, content: string): void {
 
     if (!style) {
       style = new CSSStyleSheet()
+      // @ts-expect-error: using experimental API
       style.replaceSync(content)
       // @ts-expect-error: using experimental API
       document.adoptedStyleSheets = [...document.adoptedStyleSheets, style]
     } else {
+      // @ts-expect-error: using experimental API
       style.replaceSync(content)
     }
   } else {
@@ -297,7 +379,7 @@ async function fetchUpdate({ path, acceptedPath, timestamp }: Update) {
     return
   }
 
-  const moduleMap = new Map()
+  const moduleMap = new Map<string, ModuleNamespace>()
   const isSelfUpdate = path === acceptedPath
 
   // make sure we only import each dep once
@@ -327,7 +409,7 @@ async function fetchUpdate({ path, acceptedPath, timestamp }: Update) {
       if (disposer) await disposer(dataMap.get(dep))
       const [path, query] = dep.split(`?`)
       try {
-        const newMod = await import(
+        const newMod: ModuleNamespace = await import(
           /* @vite-ignore */
           base +
             path.slice(1) +
@@ -364,18 +446,17 @@ interface HotModule {
 interface HotCallback {
   // the dependencies must be fetchable paths
   deps: string[]
-  fn: (modules: object[]) => void
+  fn: (modules: Array<ModuleNamespace | undefined>) => void
 }
 
+type CustomListenersMap = Map<string, ((data: any) => void)[]>
+
 const hotModulesMap = new Map<string, HotModule>()
 const disposeMap = new Map<string, (data: any) => void | Promise<void>>()
 const pruneMap = new Map<string, (data: any) => void | Promise<void>>()
 const dataMap = new Map<string, any>()
-const customListenersMap = new Map<string, ((data: any) => void)[]>()
-const ctxToListenersMap = new Map<
-  string,
-  Map<string, ((data: any) => void)[]>
->()
+const customListenersMap: CustomListenersMap = new Map()
+const ctxToListenersMap = new Map<string, CustomListenersMap>()
 
 export function createHotContext(ownerPath: string): ViteHotContext {
   if (!dataMap.has(ownerPath)) {
@@ -403,7 +484,7 @@ export function createHotContext(ownerPath: string): ViteHotContext {
     }
   }
 
-  const newListeners = new Map()
+  const newListeners: CustomListenersMap = new Map()
   ctxToListenersMap.set(ownerPath, newListeners)
 
   function acceptDeps(deps: string[], callback: HotCallback['fn'] = () => {}) {
@@ -437,6 +518,12 @@ export function createHotContext(ownerPath: string): ViteHotContext {
       }
     },
 
+    // export names (first arg) are irrelevant on the client side, they're
+    // extracted in the server for propagation
+    acceptExports(_: string | readonly string[], callback?: any) {
+      acceptDeps([ownerPath], callback && (([mod]) => callback(mod)))
+    },
+
     dispose(cb) {
       disposeMap.set(ownerPath, cb)
     },

package/src/client/tsconfig.json

@@ -2,8 +2,6 @@
   "extends": "../../tsconfig.base.json",
   "include": ["./", "../../types"],
   "compilerOptions": {
-    "outDir": "../../dist/client",
-    "module": "ESNext",
     "types": [],
     "lib": ["ESNext", "DOM"],
     "declaration": false

package/types/chokidar.d.ts

@@ -28,8 +28,8 @@ THE SOFTWARE.
 */
 /// <reference types="node" />
 
-import type * as fs from 'fs'
-import { EventEmitter } from 'events'
+import type * as fs from 'node:fs'
+import { EventEmitter } from 'node:events'
 import type { Matcher } from './anymatch'
 
 export class FSWatcher extends EventEmitter implements fs.FSWatcher {

package/types/connect.d.ts

@@ -8,7 +8,7 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 
 /// <reference types="node" />
-import * as http from 'http'
+import * as http from 'node:http'
 
 export namespace Connect {
   export type ServerHandle = HandleFunction | http.Server

package/types/hot.d.ts

@@ -1,12 +1,26 @@
 import type { InferCustomEventPayload } from './customEvent'
 
+export type ModuleNamespace = Record<string, any> & {
+  [Symbol.toStringTag]: 'Module'
+}
+
 export interface ViteHotContext {
   readonly data: any
 
   accept(): void
-  accept(cb: (mod: any) => void): void
-  accept(dep: string, cb: (mod: any) => void): void
-  accept(deps: readonly string[], cb: (mods: any[]) => void): void
+  accept(cb: (mod: ModuleNamespace | undefined) => void): void
+  accept(dep: string, cb: (mod: ModuleNamespace | undefined) => void): void
+  accept(
+    deps: readonly string[],
+    cb: (mods: Array<ModuleNamespace | undefined>) => void
+  ): void
+
+  acceptExports(exportNames: string | readonly string[]): void
+  acceptExports(
+    exportNames: string | readonly string[],
+    cb: (mod: ModuleNamespace | undefined) => void
+  ): void
+
   dispose(cb: (data: any) => void): void
   decline(): void
   invalidate(): void

package/types/http-proxy.d.ts

@@ -13,11 +13,11 @@
 
 /// <reference types="node" />
 
-import type * as net from 'net'
-import type * as http from 'http'
-import * as events from 'events'
-import type * as url from 'url'
-import type * as stream from 'stream'
+import type * as net from 'node:net'
+import type * as http from 'node:http'
+import * as events from 'node:events'
+import type * as url from 'node:url'
+import type * as stream from 'node:stream'
 
 export namespace HttpProxy {
   export type ProxyTarget = ProxyTargetUrl | ProxyTargetDetailed

package/types/ws.d.ts

@@ -15,7 +15,7 @@
 
 /// <reference types="node" />
 
-import { EventEmitter } from 'events'
+import { EventEmitter } from 'node:events'
 import type {
   Agent,
   ClientRequest,
@@ -23,12 +23,12 @@ import type {
   Server as HTTPServer,
   IncomingMessage,
   OutgoingHttpHeaders
-} from 'http'
-import type { Server as HTTPSServer } from 'https'
-import type { Duplex, DuplexOptions } from 'stream'
+} from 'node:http'
+import type { Server as HTTPSServer } from 'node:https'
+import type { Duplex, DuplexOptions } from 'node:stream'
 import type { SecureContextOptions } from 'tls'
-import type { URL } from 'url'
-import type { ZlibOptions } from 'zlib'
+import type { URL } from 'node:url'
+import type { ZlibOptions } from 'node:zlib'
 
 // WebSocket socket.
 declare class WebSocket extends EventEmitter {