vite 2.9.0-beta.7 → 2.9.0

package/dist/node/chunks/{dep-5633cdf8.js → dep-bcc0af00.js}

@@ -39,6 +39,14 @@ var joinMedia$1 = function (parentMedia, childMedia) {
   return media
 };
 
+var joinLayer$1 = function (parentLayer, childLayer) {
+  if (!parentLayer.length && childLayer.length) return childLayer
+  if (parentLayer.length && !childLayer.length) return parentLayer
+  if (!parentLayer.length && !childLayer.length) return []
+
+  return parentLayer.concat(childLayer)
+};
+
 // external tooling
 const resolve$1 = resolve__default;
 
@@ -330,6 +338,7 @@ var parseStatements$1 = function (result, styles) {
           type: "nodes",
           nodes,
           media: [],
+          layer: [],
         });
         nodes = [];
       }
@@ -342,6 +351,7 @@ var parseStatements$1 = function (result, styles) {
       type: "nodes",
       nodes,
       media: [],
+      layer: [],
     });
   }
 
@@ -354,6 +364,7 @@ function parseMedia(result, atRule) {
     type: "media",
     node: atRule,
     media: split(params, 0),
+    layer: [],
   }
 }
 
@@ -367,6 +378,7 @@ function parseCharset(result, atRule) {
     type: "charset",
     node: atRule,
     media: [],
+    layer: [],
   }
 }
 
@@ -377,10 +389,12 @@ function parseImport(result, atRule) {
       if (
         prev.type !== "comment" &&
         (prev.type !== "atrule" ||
-          (prev.name !== "import" && prev.name !== "charset"))
+          (prev.name !== "import" &&
+            prev.name !== "charset" &&
+            !(prev.name === "layer" && !prev.nodes)))
       ) {
         return result.warn(
-          "@import must precede all other statements (besides @charset)",
+          "@import must precede all other statements (besides @charset or empty @layer)",
           { node: atRule }
         )
       }
@@ -401,6 +415,7 @@ function parseImport(result, atRule) {
     type: "import",
     node: atRule,
     media: [],
+    layer: [],
   };
 
   // prettier-ignore
@@ -426,11 +441,31 @@ function parseImport(result, atRule) {
   else stmt.uri = params[0].nodes[0].value;
   stmt.fullUri = stringify(params[0]);
 
-  if (params.length > 2) {
-    if (params[1].type !== "space") {
+  let remainder = params;
+  if (remainder.length > 2) {
+    if (
+      (remainder[2].type === "word" || remainder[2].type === "function") &&
+      remainder[2].value === "layer"
+    ) {
+      if (remainder[1].type !== "space") {
+        return result.warn("Invalid import layer statement", { node: atRule })
+      }
+
+      if (remainder[2].nodes) {
+        stmt.layer = [stringify(remainder[2].nodes)];
+      } else {
+        stmt.layer = [""];
+      }
+      remainder = remainder.slice(2);
+    }
+  }
+
+  if (remainder.length > 2) {
+    if (remainder[1].type !== "space") {
       return result.warn("Invalid import media statement", { node: atRule })
     }
-    stmt.media = split(params, 2);
+
+    stmt.media = split(remainder, 2);
   }
 
   return stmt
@@ -441,6 +476,7 @@ const path = path__default;
 
 // internal tooling
 const joinMedia = joinMedia$1;
+const joinLayer = joinLayer$1;
 const resolveId = resolveId$1;
 const loadContent = loadContent$1;
 const processContent = processContent$1;
@@ -483,11 +519,13 @@ function AtImport(options) {
         throw new Error("plugins option must be an array")
       }
 
-      return parseStyles(result, styles, options, state, []).then(bundle => {
-        applyRaws(bundle);
-        applyMedia(bundle);
-        applyStyles(bundle, styles);
-      })
+      return parseStyles(result, styles, options, state, [], []).then(
+        bundle => {
+          applyRaws(bundle);
+          applyMedia(bundle);
+          applyStyles(bundle, styles);
+        }
+      )
 
       function applyRaws(bundle) {
         bundle.forEach((stmt, index) => {
@@ -505,21 +543,60 @@ function AtImport(options) {
 
       function applyMedia(bundle) {
         bundle.forEach(stmt => {
-          if (!stmt.media.length || stmt.type === "charset") return
+          if (
+            (!stmt.media.length && !stmt.layer.length) ||
+            stmt.type === "charset"
+          ) {
+            return
+          }
+
           if (stmt.type === "import") {
             stmt.node.params = `${stmt.fullUri} ${stmt.media.join(", ")}`;
-          } else if (stmt.type === "media")
+          } else if (stmt.type === "media") {
             stmt.node.params = stmt.media.join(", ");
-          else {
+          } else {
             const { nodes } = stmt;
             const { parent } = nodes[0];
-            const mediaNode = atRule({
-              name: "media",
-              params: stmt.media.join(", "),
-              source: parent.source,
-            });
 
-            parent.insertBefore(nodes[0], mediaNode);
+            let outerAtRule;
+            let innerAtRule;
+            if (stmt.media.length && stmt.layer.length) {
+              const mediaNode = atRule({
+                name: "media",
+                params: stmt.media.join(", "),
+                source: parent.source,
+              });
+
+              const layerNode = atRule({
+                name: "layer",
+                params: stmt.layer.filter(layer => layer !== "").join("."),
+                source: parent.source,
+              });
+
+              mediaNode.append(layerNode);
+              innerAtRule = layerNode;
+              outerAtRule = mediaNode;
+            } else if (stmt.media.length) {
+              const mediaNode = atRule({
+                name: "media",
+                params: stmt.media.join(", "),
+                source: parent.source,
+              });
+
+              innerAtRule = mediaNode;
+              outerAtRule = mediaNode;
+            } else if (stmt.layer.length) {
+              const layerNode = atRule({
+                name: "layer",
+                params: stmt.layer.filter(layer => layer !== "").join("."),
+                source: parent.source,
+              });
+
+              innerAtRule = layerNode;
+              outerAtRule = layerNode;
+            }
+
+            parent.insertBefore(nodes[0], outerAtRule);
 
             // remove nodes
             nodes.forEach(node => {
@@ -529,11 +606,11 @@ function AtImport(options) {
             // better output
             nodes[0].raws.before = nodes[0].raws.before || "\n";
 
-            // wrap new rules with media query
-            mediaNode.append(nodes);
+            // wrap new rules with media query and/or layer at rule
+            innerAtRule.append(nodes);
 
             stmt.type = "media";
-            stmt.node = mediaNode;
+            stmt.node = outerAtRule;
             delete stmt.nodes;
           }
         });
@@ -556,7 +633,7 @@ function AtImport(options) {
         });
       }
 
-      function parseStyles(result, styles, options, state, media) {
+      function parseStyles(result, styles, options, state, media, layer) {
         const statements = parseStatements(result, styles);
 
         return Promise.resolve(statements)
@@ -565,6 +642,7 @@ function AtImport(options) {
             return stmts.reduce((promise, stmt) => {
               return promise.then(() => {
                 stmt.media = joinMedia(media, stmt.media || []);
+                stmt.layer = joinLayer(layer, stmt.layer || []);
 
                 // skip protocol base uri (protocol://url) or protocol-relative
                 if (
@@ -676,7 +754,7 @@ function AtImport(options) {
 
       function loadImportContent(result, stmt, filename, options, state) {
         const atRule = stmt.node;
-        const { media } = stmt;
+        const { media, layer } = stmt;
         if (options.skipDuplicates) {
           // skip files already imported at the same scope
           if (
@@ -724,7 +802,7 @@ function AtImport(options) {
               }
 
               // recursion: import @import from imported file
-              return parseStyles(result, styles, options, state, media)
+              return parseStyles(result, styles, options, state, media, layer)
             })
           }
         )

package/dist/node/chunks/{dep-d52558aa.js → dep-e67ca846.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var require$$0 = require('postcss');
-var index$1 = require('./dep-0e100549.js');
+var index$1 = require('./dep-8db0e223.js');
 var path$2 = require('path');
 var require$$1 = require('crypto');
 var fs = require('fs');

package/dist/node/cli.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var require$$0 = require('events');
-var index = require('./chunks/dep-0e100549.js');
+var index = require('./chunks/dep-8db0e223.js');
 var perf_hooks = require('perf_hooks');
 require('fs');
 require('path');
@@ -19,9 +19,9 @@ require('zlib');
 require('crypto');
 require('tls');
 require('assert');
+require('esbuild');
 require('buffer');
 require('querystring');
-require('esbuild');
 require('child_process');
 require('worker_threads');
 require('readline');
@@ -683,7 +683,7 @@ cli
     .action(async (root, options) => {
     // output structure is preserved even after bundling so require()
     // is ok here
-    const { createServer } = await Promise.resolve().then(function () { return require('./chunks/dep-0e100549.js'); }).then(function (n) { return n.index$1; });
+    const { createServer } = await Promise.resolve().then(function () { return require('./chunks/dep-8db0e223.js'); }).then(function (n) { return n.index$1; });
     try {
         const server = await createServer({
             root,
@@ -732,7 +732,7 @@ cli
     .option('--emptyOutDir', `[boolean] force empty outDir when it's outside of root`)
     .option('-w, --watch', `[boolean] rebuilds when modules have changed on disk`)
     .action(async (root, options) => {
-    const { build } = await Promise.resolve().then(function () { return require('./chunks/dep-0e100549.js'); }).then(function (n) { return n.build$1; });
+    const { build } = await Promise.resolve().then(function () { return require('./chunks/dep-8db0e223.js'); }).then(function (n) { return n.build$1; });
     const buildOptions = cleanOptions(options);
     try {
         await build({
@@ -755,7 +755,7 @@ cli
     .command('optimize [root]', 'pre-bundle dependencies')
     .option('--force', `[boolean] force the optimizer to ignore the cache and re-bundle`)
     .action(async (root, options) => {
-    const { optimizeDeps } = await Promise.resolve().then(function () { return require('./chunks/dep-0e100549.js'); }).then(function (n) { return n.index; });
+    const { optimizeDeps } = await Promise.resolve().then(function () { return require('./chunks/dep-8db0e223.js'); }).then(function (n) { return n.index; });
     try {
         const config = await index.resolveConfig({
             root,
@@ -778,7 +778,7 @@ cli
     .option('--https', `[boolean] use TLS + HTTP/2`)
     .option('--open [path]', `[boolean | string] open browser on startup`)
     .action(async (root, options) => {
-    const { preview } = await Promise.resolve().then(function () { return require('./chunks/dep-0e100549.js'); }).then(function (n) { return n.preview$1; });
+    const { preview } = await Promise.resolve().then(function () { return require('./chunks/dep-8db0e223.js'); }).then(function (n) { return n.preview$1; });
     try {
         const server = await preview({
             root,

package/dist/node/index.d.ts

@@ -35,8 +35,8 @@ import type { RollupOutput } from 'rollup';
 import type { RollupWatcher } from 'rollup';
 import type { SecureContextOptions } from 'tls';
 import type { Server } from 'http';
-import type { Server as Server_2 } from 'https';
-import type { Server as Server_3 } from 'net';
+import type { Server as Server_2 } from 'net';
+import type { Server as Server_3 } from 'https';
 import type { ServerOptions as ServerOptions_2 } from 'https';
 import type { ServerResponse } from 'http';
 import type { SourceDescription } from 'rollup';
@@ -48,6 +48,8 @@ import type { TransformResult as TransformResult_3 } from 'rollup';
 import type * as url from 'url';
 import type { URL as URL_2 } from 'url';
 import type { WatcherOptions } from 'rollup';
+import type { WebSocket as WebSocket_2 } from 'ws';
+import { WebSocketServer as WebSocketServer_2 } from 'ws';
 import type { ZlibOptions } from 'zlib';
 
 export declare interface Alias {
@@ -485,6 +487,19 @@ export declare interface CSSOptions {
     postcss?: string | (Postcss.ProcessOptions & {
         plugins?: Postcss.Plugin[];
     });
+    /**
+     * Enables css sourcemaps during dev
+     * @default false
+     * @experimental
+     */
+    devSourcemap?: boolean;
+}
+
+export declare interface CustomEventMap {
+    'vite:beforeUpdate': UpdatePayload
+    'vite:beforePrune': PrunePayload
+    'vite:beforeFullReload': FullReloadPayload
+    'vite:error': ErrorPayload
 }
 
 export declare interface CustomPayload {
@@ -747,7 +762,7 @@ export declare interface HmrContext {
 export declare interface HmrOptions {
     protocol?: string;
     host?: string;
-    port?: number | false;
+    port?: number;
     clientPort?: number;
     path?: string;
     timeout?: number;
@@ -1022,6 +1037,9 @@ export declare type IndexHtmlTransformResult = string | HtmlTagDescriptor[] | {
     tags: HtmlTagDescriptor[];
 };
 
+export declare type InferCustomEventPayload<T extends string> =
+T extends keyof CustomEventMap ? CustomEventMap[T] : any
+
 export declare interface InlineConfig extends UserConfig {
     configFile?: string | false;
     envFile?: false;
@@ -1384,7 +1402,7 @@ export declare interface PreviewServer {
 /**
  * @deprecated Use `server.printUrls()` instead
  */
-export declare function printHttpServerUrls(server: Server_3, config: ResolvedConfig): void;
+export declare function printHttpServerUrls(server: Server_2, config: ResolvedConfig): void;
 
 export declare interface ProxyOptions extends HttpProxy.ServerOptions {
     /**
@@ -1420,6 +1438,7 @@ export declare type ResolvedConfig = Readonly<Omit<UserConfig, 'plugins' | 'alia
     cacheDir: string;
     command: 'build' | 'serve';
     mode: string;
+    isWorker: boolean;
     isProduction: boolean;
     env: Record<string, any>;
     resolve: ResolveOptions & {
@@ -2699,7 +2718,7 @@ export declare namespace WebSocket {
         host?: string | undefined
         port?: number | undefined
         backlog?: number | undefined
-        server?: Server | Server_2 | undefined
+        server?: Server | Server_3 | undefined
         verifyClient?:
         | VerifyClientCallbackAsync
         | VerifyClientCallbackSync
@@ -2831,11 +2850,53 @@ export declare const WebSocketAlias: typeof WebSocket;
 
 export declare interface WebSocketAlias extends WebSocket {}
 
+export declare interface WebSocketClient {
+    /**
+     * Send event to the client
+     */
+    send(payload: HMRPayload): void;
+    /**
+     * Send custom event
+     */
+    send(event: string, payload?: CustomPayload['data']): void;
+    /**
+     * The raw WebSocket instance
+     * @advanced
+     */
+    socket: WebSocket_2;
+}
+
+export declare type WebSocketCustomListener<T> = (data: T, client: WebSocketClient) => void;
+
 export declare interface WebSocketServer {
-    on: WebSocket.Server['on'];
-    off: WebSocket.Server['off'];
+    /**
+     * Get all connected clients.
+     */
+    clients: Set<WebSocketClient>;
+    /**
+     * Boardcast events to all clients
+     */
     send(payload: HMRPayload): void;
+    /**
+     * Send custom event
+     */
+    send<T extends string>(event: T, payload?: InferCustomEventPayload<T>): void;
+    /**
+     * Disconnect all clients and terminate the server.
+     */
     close(): Promise<void>;
+    /**
+     * Handle custom event emitted by `import.meta.hot.send`
+     */
+    on: WebSocketServer_2['on'] & {
+        <T extends string>(event: T, listener: WebSocketCustomListener<InferCustomEventPayload<T>>): void;
+    };
+    /**
+     * Unregister event listener.
+     */
+    off: WebSocketServer_2['off'] & {
+        (event: string, listener: Function): void;
+    };
 }
 
 export { }

package/dist/node/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./chunks/dep-0e100549.js');
+var index = require('./chunks/dep-8db0e223.js');
 require('fs');
 require('path');
 require('tty');
@@ -21,9 +21,9 @@ require('zlib');
 require('crypto');
 require('tls');
 require('assert');
+require('esbuild');
 require('buffer');
 require('querystring');
-require('esbuild');
 require('child_process');
 require('worker_threads');
 require('readline');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite",
-  "version": "2.9.0-beta.7",
+  "version": "2.9.0",
   "license": "MIT",
   "author": "Evan You",
   "description": "Native-ESM powered web dev build tool",
@@ -57,7 +57,7 @@
     "@babel/types": "^7.17.0",
     "@jridgewell/trace-mapping": "^0.3.4",
     "@rollup/plugin-alias": "^3.1.9",
-    "@rollup/plugin-commonjs": "^21.0.2",
+    "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-dynamic-import-vars": "^1.4.2",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "13.1.3",
@@ -96,14 +96,14 @@
     "json5": "^2.2.1",
     "launch-editor-middleware": "^2.3.0",
     "magic-string": "^0.26.1",
-    "micromatch": "^4.0.4",
+    "micromatch": "^4.0.5",
     "mrmime": "^1.0.0",
     "node-forge": "^1.3.0",
     "okie": "^1.0.1",
     "open": "^8.4.0",
     "periscopic": "^2.0.3",
     "picocolors": "^1.0.0",
-    "postcss-import": "^14.0.2",
+    "postcss-import": "^14.1.0",
     "postcss-load-config": "^3.1.3",
     "postcss-modules": "^4.3.1",
     "resolve.exports": "^1.1.0",
@@ -113,7 +113,7 @@
     "source-map-support": "^0.5.21",
     "strip-ansi": "^6.0.1",
     "terser": "^5.12.1",
-    "tsconfck": "^1.2.0",
+    "tsconfck": "^1.2.1",
     "tslib": "^2.3.1",
     "types": "link:./types",
     "ws": "^8.5.0"

package/src/client/client.ts

@@ -1,12 +1,6 @@
-import type {
-  ErrorPayload,
-  FullReloadPayload,
-  HMRPayload,
-  PrunePayload,
-  Update,
-  UpdatePayload
-} from 'types/hmrPayload'
-import type { CustomEventName } from 'types/customEvent'
+import type { ErrorPayload, HMRPayload, Update } from 'types/hmrPayload'
+import type { ViteHotContext } from 'types/hot'
+import type { InferCustomEventPayload } from 'types/customEvent'
 import { ErrorOverlay, overlayId } from './overlay'
 // eslint-disable-next-line node/no-missing-import
 import '@vite/env'
@@ -15,7 +9,7 @@ import '@vite/env'
 declare const __BASE__: string
 declare const __HMR_PROTOCOL__: string
 declare const __HMR_HOSTNAME__: string
-declare const __HMR_PORT__: string | false
+declare const __HMR_PORT__: string
 declare const __HMR_TIMEOUT__: number
 declare const __HMR_ENABLE_OVERLAY__: boolean
 
@@ -24,12 +18,10 @@ console.log('[vite] connecting...')
 // use server configuration, then fallback to inference
 const socketProtocol =
   __HMR_PROTOCOL__ || (location.protocol === 'https:' ? 'wss' : 'ws')
-const socketHost = __HMR_PORT__
-  ? `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`
-  : `${__HMR_HOSTNAME__ || location.hostname}`
-
+const socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`
 const socket = new WebSocket(`${socketProtocol}://${socketHost}`, 'vite-hmr')
 const base = __BASE__ || '/'
+const messageBuffer: string[] = []
 
 function warnFailedFetch(err: Error, path: string | string[]) {
   if (!err.message.match('fetch')) {
@@ -59,9 +51,10 @@ async function handleMessage(payload: HMRPayload) {
   switch (payload.type) {
     case 'connected':
       console.log(`[vite] connected.`)
+      sendMessageBuffer()
       // proxy(nginx, docker) hmr ws maybe caused timeout,
       // so send ping package let ws keep alive.
-      setInterval(() => socket.send('ping'), __HMR_TIMEOUT__)
+      setInterval(() => socket.send('{"type":"ping"}'), __HMR_TIMEOUT__)
       break
     case 'update':
       notifyListeners('vite:beforeUpdate', payload)
@@ -101,7 +94,7 @@ async function handleMessage(payload: HMRPayload) {
       })
       break
     case 'custom': {
-      notifyListeners(payload.event as CustomEventName<any>, payload.data)
+      notifyListeners(payload.event, payload.data)
       break
     }
     case 'full-reload':
@@ -154,19 +147,9 @@ async function handleMessage(payload: HMRPayload) {
   }
 }
 
-function notifyListeners(
-  event: 'vite:beforeUpdate',
-  payload: UpdatePayload
-): void
-function notifyListeners(event: 'vite:beforePrune', payload: PrunePayload): void
-function notifyListeners(
-  event: 'vite:beforeFullReload',
-  payload: FullReloadPayload
-): void
-function notifyListeners(event: 'vite:error', payload: ErrorPayload): void
 function notifyListeners<T extends string>(
-  event: CustomEventName<T>,
-  data: any
+  event: T,
+  data: InferCustomEventPayload<T>
 ): void
 function notifyListeners(event: string, data: any): void {
   const cbs = customListenersMap.get(event)
@@ -361,6 +344,13 @@ async function fetchUpdate({ path, acceptedPath, timestamp }: Update) {
   }
 }
 
+function sendMessageBuffer() {
+  if (socket.readyState === 1) {
+    messageBuffer.forEach((msg) => socket.send(msg))
+    messageBuffer.length = 0
+  }
+}
+
 interface HotModule {
   id: string
   callbacks: HotCallback[]
@@ -382,9 +372,7 @@ const ctxToListenersMap = new Map<
   Map<string, ((data: any) => void)[]>
 >()
 
-// Just infer the return type for now
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const createHotContext = (ownerPath: string) => {
+export function createHotContext(ownerPath: string): ViteHotContext {
   if (!dataMap.has(ownerPath)) {
     dataMap.set(ownerPath, {})
   }
@@ -425,12 +413,12 @@ export const createHotContext = (ownerPath: string) => {
     hotModulesMap.set(ownerPath, mod)
   }
 
-  const hot = {
+  const hot: ViteHotContext = {
     get data() {
       return dataMap.get(ownerPath)
     },
 
-    accept(deps: any, callback?: any) {
+    accept(deps?: any, callback?: any) {
       if (typeof deps === 'function' || !deps) {
         // self-accept: hot.accept(() => {})
         acceptDeps([ownerPath], ([mod]) => deps && deps(mod))
@@ -451,10 +439,11 @@ export const createHotContext = (ownerPath: string) => {
       )
     },
 
-    dispose(cb: (data: any) => void) {
+    dispose(cb) {
       disposeMap.set(ownerPath, cb)
     },
 
+    // @ts-expect-error untyped
     prune(cb: (data: any) => void) {
       pruneMap.set(ownerPath, cb)
     },
@@ -470,7 +459,7 @@ export const createHotContext = (ownerPath: string) => {
     },
 
     // custom events
-    on: (event: string, cb: (data: any) => void) => {
+    on(event, cb) {
       const addToMap = (map: Map<string, any[]>) => {
         const existing = map.get(event) || []
         existing.push(cb)
@@ -478,6 +467,11 @@ export const createHotContext = (ownerPath: string) => {
       }
       addToMap(customListenersMap)
       addToMap(newListeners)
+    },
+
+    send(event, data) {
+      messageBuffer.push(JSON.stringify({ type: 'custom', event, data }))
+      sendMessageBuffer()
     }
   }
 

package/types/customEvent.d.ts

@@ -1,5 +1,16 @@
-// See https://stackoverflow.com/a/63549561.
-export type CustomEventName<T extends string> = (T extends `vite:${T}`
-  ? never
-  : T) &
-  (`vite:${T}` extends T ? never : T)
+import type {
+  ErrorPayload,
+  FullReloadPayload,
+  PrunePayload,
+  UpdatePayload
+} from './hmrPayload'
+
+export interface CustomEventMap {
+  'vite:beforeUpdate': UpdatePayload
+  'vite:beforePrune': PrunePayload
+  'vite:beforeFullReload': FullReloadPayload
+  'vite:error': ErrorPayload
+}
+
+export type InferCustomEventPayload<T extends string> =
+  T extends keyof CustomEventMap ? CustomEventMap[T] : any