@vitest/browser 2.0.0-beta.3 → 2.0.0-beta.6

package/dist/index.js

@@ -3,11 +3,11 @@ import { readFile as readFile$1 } from 'node:fs/promises';
 import sirv from 'sirv';
 import { coverageConfigDefaults } from 'vitest/config';
 import { slash } from '@vitest/utils';
-import MagicString from 'magic-string';
-import { esmWalker } from '@vitest/utils/ast';
 import fs, { promises } from 'node:fs';
 import { resolve as resolve$1, dirname } from 'node:path';
 import { isFileServingAllowed } from 'vitest/node';
+import MagicString from 'magic-string';
+import { esmWalker } from '@vitest/utils/ast';
 
 const _DRIVE_LETTER_START_RE = /^[A-Za-z]:\//;
 function normalizeWindowsPath(input = "") {
@@ -159,248 +159,6 @@ const basename = function(p, extension) {
   return extension && lastSegment.endsWith(extension) ? lastSegment.slice(0, -extension.length) : lastSegment;
 };
 
-/**
- * @param {import('estree').Node} param
- * @returns {string[]}
- */
-function extract_names(param) {
-	return extract_identifiers(param).map((node) => node.name);
-}
-
-/**
- * @param {import('estree').Node} param
- * @param {import('estree').Identifier[]} nodes
- * @returns {import('estree').Identifier[]}
- */
-function extract_identifiers(param, nodes = []) {
-	switch (param.type) {
-		case 'Identifier':
-			nodes.push(param);
-			break;
-
-		case 'MemberExpression':
-			let object = param;
-			while (object.type === 'MemberExpression') {
-				object = /** @type {any} */ (object.object);
-			}
-			nodes.push(/** @type {any} */ (object));
-			break;
-
-		case 'ObjectPattern':
-			for (const prop of param.properties) {
-				if (prop.type === 'RestElement') {
-					extract_identifiers(prop.argument, nodes);
-				} else {
-					extract_identifiers(prop.value, nodes);
-				}
-			}
-
-			break;
-
-		case 'ArrayPattern':
-			for (const element of param.elements) {
-				if (element) extract_identifiers(element, nodes);
-			}
-
-			break;
-
-		case 'RestElement':
-			extract_identifiers(param.argument, nodes);
-			break;
-
-		case 'AssignmentPattern':
-			extract_identifiers(param.left, nodes);
-			break;
-	}
-
-	return nodes;
-}
-
-const viInjectedKey = "__vi_inject__";
-const viExportAllHelper = "__vitest_browser_runner__.exportAll";
-const skipHijack = [
-  "/@vite/client",
-  "/@vite/env",
-  /vite\/dist\/client/
-];
-function injectVitestModule(code, id, parse) {
-  if (skipHijack.some((skip) => id.match(skip)))
-    return;
-  const s = new MagicString(code);
-  let ast;
-  try {
-    ast = parse(code);
-  } catch (err) {
-    console.error(`Cannot parse ${id}:
-${err.message}`);
-    return;
-  }
-  let uid = 0;
-  const idToImportMap = /* @__PURE__ */ new Map();
-  const declaredConst = /* @__PURE__ */ new Set();
-  const hoistIndex = 0;
-  const transformImportDeclaration = (node) => {
-    const source = node.source.value;
-    if (skipHijack.some((skip) => source.match(skip)))
-      return null;
-    const importId = `__vi_esm_${uid++}__`;
-    const hasSpecifiers = node.specifiers.length > 0;
-    const code2 = hasSpecifiers ? `import { ${viInjectedKey} as ${importId} } from '${source}'
-` : `import '${source}'
-`;
-    return {
-      code: code2,
-      id: importId
-    };
-  };
-  function defineImport(node) {
-    const declaration = transformImportDeclaration(node);
-    if (!declaration)
-      return null;
-    s.appendLeft(hoistIndex, declaration.code);
-    return declaration.id;
-  }
-  function defineImportAll(source) {
-    const importId = `__vi_esm_${uid++}__`;
-    s.appendLeft(hoistIndex, `const { ${viInjectedKey}: ${importId} } = await import(${JSON.stringify(source)});
-`);
-    return importId;
-  }
-  function defineExport(position, name, local = name) {
-    s.appendLeft(
-      position,
-      `
-Object.defineProperty(${viInjectedKey}, "${name}", { enumerable: true, configurable: true, get(){ return ${local} }});`
-    );
-  }
-  for (const node of ast.body) {
-    if (node.type === "ImportDeclaration") {
-      const importId = defineImport(node);
-      if (!importId)
-        continue;
-      s.remove(node.start, node.end);
-      for (const spec of node.specifiers) {
-        if (spec.type === "ImportSpecifier") {
-          idToImportMap.set(
-            spec.local.name,
-            `${importId}.${spec.imported.name}`
-          );
-        } else if (spec.type === "ImportDefaultSpecifier") {
-          idToImportMap.set(spec.local.name, `${importId}.default`);
-        } else {
-          idToImportMap.set(spec.local.name, importId);
-        }
-      }
-    }
-  }
-  for (const node of ast.body) {
-    if (node.type === "ExportNamedDeclaration") {
-      if (node.declaration) {
-        if (node.declaration.type === "FunctionDeclaration" || node.declaration.type === "ClassDeclaration") {
-          defineExport(node.end, node.declaration.id.name);
-        } else {
-          for (const declaration of node.declaration.declarations) {
-            const names = extract_names(declaration.id);
-            for (const name of names)
-              defineExport(node.end, name);
-          }
-        }
-        s.remove(node.start, node.declaration.start);
-      } else {
-        s.remove(node.start, node.end);
-        if (node.source) {
-          const importId = defineImportAll(node.source.value);
-          for (const spec of node.specifiers) {
-            defineExport(
-              hoistIndex,
-              spec.exported.name,
-              `${importId}.${spec.local.name}`
-            );
-          }
-        } else {
-          for (const spec of node.specifiers) {
-            const local = spec.local.name;
-            const binding = idToImportMap.get(local);
-            defineExport(node.end, spec.exported.name, binding || local);
-          }
-        }
-      }
-    }
-    if (node.type === "ExportDefaultDeclaration") {
-      const expressionTypes = ["FunctionExpression", "ClassExpression"];
-      if ("id" in node.declaration && node.declaration.id && !expressionTypes.includes(node.declaration.type)) {
-        const { name } = node.declaration.id;
-        s.remove(
-          node.start,
-          node.start + 15
-          /* 'export default '.length */
-        );
-        s.append(
-          `
-Object.defineProperty(${viInjectedKey}, "default", { enumerable: true, configurable: true, value: ${name} });`
-        );
-      } else {
-        s.update(
-          node.start,
-          node.start + 14,
-          `${viInjectedKey}.default =`
-        );
-        s.append(`
-export default { ${viInjectedKey}: ${viInjectedKey}.default };
-`);
-      }
-    }
-    if (node.type === "ExportAllDeclaration") {
-      s.remove(node.start, node.end);
-      const importId = defineImportAll(node.source.value);
-      if (node.exported)
-        defineExport(hoistIndex, node.exported.name, `${importId}`);
-      else
-        s.appendLeft(hoistIndex, `${viExportAllHelper}(${viInjectedKey}, ${importId});
-`);
-    }
-  }
-  esmWalker(ast, {
-    onIdentifier(id2, info, parentStack) {
-      const binding = idToImportMap.get(id2.name);
-      if (!binding)
-        return;
-      if (info.hasBindingShortcut) {
-        s.appendLeft(id2.end, `: ${binding}`);
-      } else if (info.classDeclaration) {
-        if (!declaredConst.has(id2.name)) {
-          declaredConst.add(id2.name);
-          const topNode = parentStack[parentStack.length - 2];
-          s.prependRight(topNode.start, `const ${id2.name} = ${binding};
-`);
-        }
-      } else if (
-        // don't transform class name identifier
-        !info.classExpression
-      ) {
-        s.update(id2.start, id2.end, binding);
-      }
-    },
-    // TODO: make env updatable
-    onImportMeta() {
-    },
-    onDynamicImport(node) {
-      const replace = "__vitest_browser_runner__.wrapModule(import(";
-      s.overwrite(node.start, node.source.start, replace);
-      s.overwrite(node.end - 1, node.end, "))");
-    }
-  });
-  s.prepend(`const ${viInjectedKey} = { [Symbol.toStringTag]: "Module" };
-`);
-  s.append(`
-export { ${viInjectedKey} }`);
-  return {
-    ast,
-    code: s.toString(),
-    map: s.generateMap({ hires: "boundary", source: id })
-  };
-}
-
 function assertFileAccess(path, project) {
   if (!isFileServingAllowed(path, project.server) && !isFileServingAllowed(path, project.ctx.server))
     throw new Error(`Access denied to "${path}". See Vite config documentation for "server.fs": https://vitejs.dev/config/server-options.html#server-fs-strict.`);
@@ -531,11 +289,13 @@ function generateContextFile(project) {
   }).join("\n");
   return `
 const rpc = () => __vitest_worker__.rpc
+const channel = new BroadcastChannel('vitest')
 
 export const server = {
   platform: ${JSON.stringify(process.platform)},
   version: ${JSON.stringify(process.version)},
   provider: ${JSON.stringify(project.browserProvider.name)},
+  browser: ${JSON.stringify(project.config.browser.name)},
   commands: {
     ${commandsCode}
   }
@@ -544,15 +304,227 @@ export const commands = server.commands
 export const page = {
   get config() {
     return __vitest_browser_runner__.config
+  },
+  viewport(width, height) {
+    const id = __vitest_browser_runner__.iframeId
+    channel.postMessage({ type: 'viewport', width, height, id })
+    return new Promise((resolve, reject) => {
+      channel.addEventListener('message', function handler(e) {
+        if (e.data.type === 'viewport:done' && e.data.id === id) {
+          channel.removeEventListener('message', handler)
+          resolve()
+        }
+        if (e.data.type === 'viewport:fail' && e.data.id === id) {
+          channel.removeEventListener('message', handler)
+          reject(new Error(e.data.error))
+        }
+      })
+    })
   }
 }
 `;
 }
 
+function automockModule(code, parse) {
+  const ast = parse(code);
+  const m = new MagicString(code);
+  const allSpecifiers = [];
+  let importIndex = 0;
+  for (const _node of ast.body) {
+    if (_node.type === "ExportAllDeclaration") {
+      throw new Error(
+        `automocking files with \`export *\` is not supported in browser mode because it cannot be statically analysed`
+      );
+    }
+    if (_node.type === "ExportNamedDeclaration") {
+      let traversePattern2 = function(expression) {
+        if (expression.type === "Identifier") {
+          allSpecifiers.push({ name: expression.name });
+        } else if (expression.type === "ArrayPattern") {
+          expression.elements.forEach((element) => {
+            if (!element)
+              return;
+            traversePattern2(element);
+          });
+        } else if (expression.type === "ObjectPattern") {
+          expression.properties.forEach((property) => {
+            if (property.type === "RestElement")
+              traversePattern2(property);
+            else if (property.type === "Property")
+              traversePattern2(property.value);
+            else
+              ;
+          });
+        } else if (expression.type === "RestElement") {
+          traversePattern2(expression.argument);
+        } else if (expression.type === "AssignmentPattern") {
+          throw new Error(`AssignmentPattern is not supported. Please open a new bug report.`);
+        } else if (expression.type === "MemberExpression") {
+          throw new Error(`MemberExpression is not supported. Please open a new bug report.`);
+        } else ;
+      };
+      const node = _node;
+      const declaration = node.declaration;
+      if (declaration) {
+        if (declaration.type === "FunctionDeclaration") {
+          allSpecifiers.push({ name: declaration.id.name });
+        } else if (declaration.type === "VariableDeclaration") {
+          declaration.declarations.forEach((declaration2) => {
+            traversePattern2(declaration2.id);
+          });
+        } else if (declaration.type === "ClassDeclaration") {
+          allSpecifiers.push({ name: declaration.id.name });
+        } else ;
+        m.remove(node.start, declaration.start);
+      }
+      const specifiers = node.specifiers || [];
+      const source = node.source;
+      if (!source && specifiers.length) {
+        specifiers.forEach((specifier) => {
+          const exported = specifier.exported;
+          allSpecifiers.push({
+            alias: exported.type === "Literal" ? exported.raw : exported.name,
+            name: specifier.local.name
+          });
+        });
+        m.remove(node.start, node.end);
+      } else if (source && specifiers.length) {
+        const importNames = [];
+        specifiers.forEach((specifier) => {
+          const importedName = `__vitest_imported_${importIndex++}__`;
+          const exported = specifier.exported;
+          importNames.push([specifier.local.name, importedName]);
+          allSpecifiers.push({
+            name: importedName,
+            alias: exported.type === "Literal" ? exported.raw : exported.name
+          });
+        });
+        const importString = `import { ${importNames.map(([name, alias]) => `${name} as ${alias}`).join(", ")} } from '${source.value}'`;
+        m.overwrite(node.start, node.end, importString);
+      }
+    }
+    if (_node.type === "ExportDefaultDeclaration") {
+      const node = _node;
+      const declaration = node.declaration;
+      allSpecifiers.push({ name: "__vitest_default", alias: "default" });
+      m.overwrite(node.start, declaration.start, `const __vitest_default = `);
+    }
+  }
+  const moduleObject = `
+const __vitest_es_current_module__ = {
+  __esModule: true,
+  ${allSpecifiers.map(({ name }) => `["${name}"]: ${name},`).join("\n  ")}
+}
+const __vitest_mocked_module__ = __vitest_mocker__.mockObject(__vitest_es_current_module__)
+`;
+  const assigning = allSpecifiers.map(({ name }, index) => {
+    return `const __vitest_mocked_${index}__ = __vitest_mocked_module__["${name}"]`;
+  }).join("\n");
+  const redeclarations = allSpecifiers.map(({ name, alias }, index) => {
+    return `  __vitest_mocked_${index}__ as ${alias || name},`;
+  }).join("\n");
+  const specifiersExports = `
+export {
+${redeclarations}
+}
+`;
+  m.append(moduleObject + assigning + specifiersExports);
+  return m;
+}
+
+var BrowserMocker = (project) => {
+  return [
+    {
+      name: "vitest:browser:mocker",
+      enforce: "pre",
+      async load(id) {
+        const data = project.browserMocker.mocks.get(id);
+        if (!data)
+          return;
+        const { mock, sessionId } = data;
+        if (mock === void 0) {
+          const rpc = project.browserRpc.testers.get(sessionId);
+          if (!rpc)
+            throw new Error(`WebSocket rpc was destroyed for session ${sessionId}`);
+          const exports = await rpc.startMocking(id);
+          const module = `const module = __vitest_mocker__.get('${id}');`;
+          const keys = exports.map((name) => {
+            if (name === "default")
+              return `export default module['default'];`;
+            return `export const ${name} = module['${name}'];`;
+          }).join("\n");
+          return `${module}
+${keys}`;
+        }
+        if (mock === null)
+          return;
+        return readFile$1(mock, "utf-8");
+      }
+    },
+    {
+      name: "vitest:browser:automocker",
+      enforce: "post",
+      transform(code, id) {
+        const data = project.browserMocker.mocks.get(id);
+        if (!data)
+          return;
+        if (data.mock === null) {
+          const m = automockModule(code, this.parse);
+          return {
+            code: m.toString(),
+            map: m.generateMap({ hires: "boundary", source: id })
+          };
+        }
+      }
+    }
+  ];
+};
+
+function injectDynamicImport(code, id, parse) {
+  const s = new MagicString(code);
+  let ast;
+  try {
+    ast = parse(code);
+  } catch (err) {
+    console.error(`Cannot parse ${id}:
+${err.message}`);
+    return;
+  }
+  esmWalker(ast, {
+    // TODO: make env updatable
+    onImportMeta() {
+    },
+    onDynamicImport(node) {
+      const replace = "__vitest_browser_runner__.wrapModule(() => import(";
+      s.overwrite(node.start, node.source.start, replace);
+      s.overwrite(node.end - 1, node.end, "))");
+    }
+  });
+  return {
+    ast,
+    code: s.toString(),
+    map: s.generateMap({ hires: "boundary", source: id })
+  };
+}
+
+const regexDynamicImport = /import\s*\(/;
+var DynamicImport = () => {
+  return {
+    name: "vitest:browser:esm-injector",
+    enforce: "post",
+    transform(source, id) {
+      if (!regexDynamicImport.test(source))
+        return;
+      return injectDynamicImport(source, id, this.parse);
+    }
+  };
+};
+
 var index = (project, base = "/") => {
   const pkgRoot = resolve(fileURLToPath(import.meta.url), "../..");
   const distRoot = resolve(pkgRoot, "dist");
   return [
+    ...BrowserMocker(project),
     {
       enforce: "pre",
       name: "vitest:browser",
@@ -565,8 +537,11 @@ var index = (project, base = "/") => {
       },
       async configureServer(server) {
         const testerHtml = readFile$1(resolve(distRoot, "client/tester.html"), "utf8");
-        const runnerHtml = readFile$1(resolve(distRoot, "client/index.html"), "utf8");
+        const orchestratorHtml = project.config.browser.ui ? readFile$1(resolve(distRoot, "client/__vitest__/index.html"), "utf8") : readFile$1(resolve(distRoot, "client/orchestrator.html"), "utf8");
         const injectorJs = readFile$1(resolve(distRoot, "client/esm-client-injector.js"), "utf8");
+        const manifest = (async () => {
+          return JSON.parse(await readFile$1(`${distRoot}/client/.vite/manifest.json`, "utf8"));
+        })();
         const favicon = `${base}favicon.svg`;
         const testerPrefix = `${base}__vitest_test__/__test__/`;
         server.middlewares.use((_req, res, next) => {
@@ -593,12 +568,26 @@ var index = (project, base = "/") => {
           config.env.VITEST_BROWSER_DEBUG = process.env.VITEST_BROWSER_DEBUG || "";
           const injector = replacer(await injectorJs, {
             __VITEST_CONFIG__: JSON.stringify(config),
-            __VITEST_FILES__: JSON.stringify(files)
+            __VITEST_FILES__: JSON.stringify(files),
+            __VITEST_TYPE__: url.pathname === base ? '"orchestrator"' : '"tester"'
           });
           if (url.pathname === base) {
             if (!indexScripts)
               indexScripts = await formatScripts(project.config.browser.indexScripts, server);
-            const html2 = replacer(await runnerHtml, {
+            let baseHtml = await orchestratorHtml;
+            if (project.config.browser.ui) {
+              const manifestContent = await manifest;
+              const jsEntry = manifestContent["orchestrator.html"].file;
+              baseHtml = baseHtml.replaceAll("./assets/", `${base}__vitest__/assets/`).replace(
+                "<!-- !LOAD_METADATA! -->",
+                [
+                  "<script>{__VITEST_INJECTOR__}<\/script>",
+                  "{__VITEST_SCRIPTS__}",
+                  `<script type="module" crossorigin src="${jsEntry}"><\/script>`
+                ].join("\n")
+              );
+            }
+            const html2 = replacer(baseHtml, {
               __VITEST_FAVICON__: favicon,
               __VITEST_TITLE__: "Vitest Browser Runner",
               __VITEST_SCRIPTS__: indexScripts,
@@ -610,6 +599,7 @@ var index = (project, base = "/") => {
           }
           const decodedTestFile = decodeURIComponent(url.pathname.slice(testerPrefix.length));
           const tests = decodedTestFile === "__vitest_all__" || !files.includes(decodedTestFile) ? "__vitest_browser_runner__.files" : JSON.stringify([decodedTestFile]);
+          const iframeId = decodedTestFile === "__vitest_all__" ? '"__vitest_all__"' : JSON.stringify(decodedTestFile);
           if (!testerScripts)
             testerScripts = await formatScripts(project.config.browser.testerScripts, server);
           const html = replacer(await testerHtml, {
@@ -621,6 +611,7 @@ var index = (project, base = "/") => {
               // TODO: have only a single global variable to not pollute the global scope
               `<script type="module">
   __vitest_browser_runner__.runningFiles = ${tests}
+  __vitest_browser_runner__.iframeId = ${iframeId}
   __vitest_browser_runner__.runTests(__vitest_browser_runner__.runningFiles)
 <\/script>`
             )
@@ -677,6 +668,9 @@ var index = (project, base = "/") => {
               "vitest/browser",
               "vitest/runners",
               "@vitest/utils",
+              "std-env",
+              "tinybench",
+              "tinyspy",
               // loupe is manually transformed
               "loupe"
             ],
@@ -714,16 +708,7 @@ export default globalThis.loupe`;
       }
     },
     BrowserContext(project),
-    {
-      name: "vitest:browser:esm-injector",
-      enforce: "post",
-      transform(source, id) {
-        const hijackESM = project.config.browser.slowHijackESM ?? false;
-        if (!hijackESM)
-          return;
-        return injectVitestModule(source, id, this.parse);
-      }
-    }
+    DynamicImport()
   ];
 };
 function resolveCoverageFolder(project) {
@@ -736,7 +721,7 @@ function resolveCoverageFolder(project) {
   if (!htmlReporter)
     return void 0;
   const root = resolve(
-    options.root || options.root || process.cwd(),
+    options.root || process.cwd(),
     options.coverage.reportsDirectory || coverageConfigDefaults.reportsDirectory
   );
   const subdir = Array.isArray(htmlReporter) && htmlReporter.length > 1 && "subdir" in htmlReporter[1] ? htmlReporter[1].subdir : void 0;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vitest/browser",
   "type": "module",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.6",
   "description": "Browser running for Vitest",
   "license": "MIT",
   "funding": "https://opencollective.com/vitest",
@@ -47,7 +47,7 @@
   "peerDependencies": {
     "playwright": "*",
     "webdriverio": "*",
-    "vitest": "2.0.0-beta.3"
+    "vitest": "2.0.0-beta.6"
   },
   "peerDependenciesMeta": {
     "playwright": {
@@ -63,20 +63,22 @@
   "dependencies": {
     "magic-string": "^0.30.10",
     "sirv": "^2.0.4",
-    "@vitest/utils": "2.0.0-beta.3"
+    "@vitest/utils": "2.0.0-beta.6"
   },
   "devDependencies": {
     "@types/ws": "^8.5.10",
     "@wdio/protocols": "^8.32.0",
+    "birpc": "0.2.17",
+    "flatted": "^3.3.1",
     "periscopic": "^4.0.2",
     "playwright": "^1.44.0",
     "playwright-core": "^1.44.0",
     "safaridriver": "^0.1.2",
     "webdriverio": "^8.36.1",
-    "@vitest/runner": "2.0.0-beta.3",
-    "@vitest/ui": "2.0.0-beta.3",
-    "@vitest/ws-client": "2.0.0-beta.3",
-    "vitest": "2.0.0-beta.3"
+    "@vitest/ui": "2.0.0-beta.6",
+    "@vitest/runner": "2.0.0-beta.6",
+    "@vitest/ws-client": "2.0.0-beta.6",
+    "vitest": "2.0.0-beta.6"
   },
   "scripts": {
     "build": "rimraf dist && pnpm build:node && pnpm build:client",