fix(browser): optimize build output and always prebundle vitest

Author: sheremet-va

packages/browser/src/client/client.ts

@@ -1,6 +1,6 @@
-import type { ModuleMocker } from '@vitest/mocker/browser'
 import type { CancelReason } from '@vitest/runner'
 import type { BirpcReturn } from 'birpc'
+import type { ModuleMocker } from 'vitest/internal/browser'
 import type { WebSocketBrowserEvents, WebSocketBrowserHandlers } from '../node/types'
 import type { IframeOrchestrator } from './orchestrator'
 import { createBirpc } from 'birpc'

packages/browser/src/client/orchestrator.ts

@@ -1,7 +1,6 @@
 import type { GlobalChannelIncomingEvent, IframeChannelIncomingEvent, IframeChannelOutgoingEvent, IframeViewportDoneEvent, IframeViewportFailEvent } from '@vitest/browser/client'
 import type { BrowserTesterOptions, SerializedConfig } from 'vitest'
 import { channel, client, globalChannel } from '@vitest/browser/client'
-import { generateHash } from '@vitest/runner/utils'
 import { relative } from 'pathe'
 import { getUiAPI } from './ui'
 import { getBrowserState, getConfig } from './utils'
@@ -297,6 +296,20 @@ function generateFileId(file: string) {
   return generateHash(`${path}${project}`)
 }
 
+// importing this from @vitest/runner bring it the whole runner
+function generateHash(str: string): string {
+  let hash = 0
+  if (str.length === 0) {
+    return `${hash}`
+  }
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i)
+    hash = (hash << 5) - hash + char
+    hash = hash & hash // Convert to 32bit integer
+  }
+  return `${hash}`
+}
+
 async function setIframeViewport(
   iframe: HTMLIFrameElement,
   width: number,

packages/browser/src/client/tester/mocker.ts

@@ -1,4 +1,4 @@
-import { ModuleMocker } from '@vitest/mocker/browser'
+import { ModuleMocker } from 'vitest/internal/browser'
 import { getBrowserState } from '../utils'
 
 export class VitestBrowserClientMocker extends ModuleMocker {

packages/browser/src/client/tester/runner.ts

@@ -5,14 +5,16 @@ import type { VitestBrowserClientMocker } from './mocker'
 import { globalChannel, onCancel } from '@vitest/browser/client'
 import { page, userEvent } from '@vitest/browser/context'
 import {
+  createStackString,
   loadDiffConfig,
   loadSnapshotSerializers,
+  NodeBenchmarkRunner,
   originalPositionFor,
+  parseStacktrace,
   takeCoverageInsideWorker,
   TraceMap,
+  VitestTestRunner,
 } from 'vitest/internal/browser'
-import { NodeBenchmarkRunner, VitestTestRunner } from 'vitest/runners'
-import { createStackString, parseStacktrace } from '../../../../utils/src/source-map'
 import { executor, getWorkerState } from '../utils'
 import { rpc } from './rpc'
 import { VitestBrowserSnapshotEnvironment } from './snapshot'

packages/browser/src/client/tester/tester.ts

@@ -19,9 +19,11 @@ import { createSafeRpc } from './rpc'
 import { browserHashMap, initiateRunner } from './runner'
 import { CommandsManager } from './utils'
 
+const now = performance.now.bind(performance)
+
 const debugVar = getConfig().env.VITEST_BROWSER_DEBUG
 const debug = debugVar && debugVar !== 'false'
-  ? (...args: unknown[]) => client.rpc.debug?.(...args.map(String))
+  ? (...args: unknown[]) => client.rpc.debug(...args.map(String))
   : undefined
 
 channel.addEventListener('message', async (e) => {
@@ -142,7 +144,7 @@ async function prepareTestEnvironment(options: PrepareOptions) {
     })
   }
 
-  state.durations.prepare = performance.now() - options.startTime
+  state.durations.prepare = options.startTime - now()
 
   return {
     runner,
@@ -194,15 +196,15 @@ interface PrepareOptions {
 }
 
 async function prepare(options: PrepareOptions) {
+  // fetch('file://non-existing-1').catch(() => {})
   preparedData = await prepareTestEnvironment(options)
+  // fetch('file://non-existing-2').catch(() => {})
 
   // page is reloading
   debug?.('runner resolved successfully')
 
   const { config, state } = preparedData
 
-  state.durations.prepare = performance.now() - state.durations.prepare
-
   debug?.('prepare time', state.durations.prepare, 'ms')
 
   await Promise.all([

packages/browser/src/node/plugin.ts

@@ -188,32 +188,12 @@ export default (parentServer: ParentBrowserProject, base = '/'): Plugin[] => {
           ...(project.config.snapshotSerializers || []),
         ]
 
-        const exclude = [
-          'vitest',
-          'vitest/internal/browser',
-          'vitest/runners',
-          '@vitest/browser',
-          '@vitest/browser/client',
-          '@vitest/utils',
-          '@vitest/utils/source-map',
-          '@vitest/runner',
-          '@vitest/spy',
-          '@vitest/utils/error',
-          '@vitest/snapshot',
-          '@vitest/expect',
-          'std-env',
-          'tinybench',
-          'tinyspy',
-          'tinyrainbow',
-          'pathe',
-          'msw',
-          'msw/browser',
-        ]
-
         if (typeof project.config.diff === 'string') {
           entries.push(project.config.diff)
         }
 
+        const exclude: string[] = []
+
         if (parentServer.vitest.coverageProvider) {
           const coverage = parentServer.vitest.config.coverage
           const provider = coverage.provider
@@ -237,6 +217,8 @@ export default (parentServer: ParentBrowserProject, base = '/'): Plugin[] => {
         }
 
         const include = [
+          'vitest',
+          'vitest/internal/browser',
           'vitest > expect-type',
           'vitest > @vitest/snapshot > magic-string',
           'vitest > chai',
@@ -275,7 +257,7 @@ export default (parentServer: ParentBrowserProject, base = '/'): Plugin[] => {
           },
           optimizeDeps: {
             entries,
-            exclude,
+            // exclude,
             include,
           },
         }

packages/mocker/package.json

@@ -67,6 +67,7 @@
   },
   "dependencies": {
     "@vitest/spy": "workspace:*",
+    "@vitest/utils": "workspace:*",
     "estree-walker": "^3.0.3",
     "magic-string": "catalog:"
   },

packages/mocker/rollup.config.js

@@ -23,6 +23,7 @@ const external = [
   ...Object.keys(pkg.dependencies || {}),
   ...Object.keys(pkg.peerDependencies || {}),
   /^msw/,
+  '@vitest/utils/source-map',
 ]
 
 const dtsUtils = createDtsUtils()

packages/mocker/src/node/index.ts

@@ -1,3 +1,6 @@
+import { fileURLToPath } from 'node:url'
+import { resolve } from 'pathe'
+
 export { createManualModuleSource } from '../utils'
 export { automockModule, automockPlugin } from './automockPlugin'
 export type { AutomockPluginOptions } from './automockPlugin'
@@ -15,3 +18,6 @@ export type {
   ServerMockResolution,
   ServerResolverOptions,
 } from './resolver'
+
+const pkgRoot = resolve(fileURLToPath(import.meta.url), '../..')
+export const distRoot: string = resolve(pkgRoot, 'dist')

packages/utils/package.json

@@ -24,10 +24,6 @@
       "types": "./dist/diff.d.ts",
       "default": "./dist/diff.js"
     },
-    "./ast": {
-      "types": "./dist/ast.d.ts",
-      "default": "./dist/ast.js"
-    },
     "./error": {
       "types": "./dist/error.d.ts",
       "default": "./dist/error.js"

packages/vitest/rollup.config.js

@@ -82,6 +82,7 @@ const external = [
   'vite-node/utils',
   '@vitest/mocker',
   '@vitest/mocker/node',
+  '@vitest/mocker/browser',
   '@vitest/utils/diff',
   '@vitest/utils/ast',
   '@vitest/utils/error',

packages/vitest/src/node/project.ts

@@ -536,7 +536,13 @@ export class TestProject {
       this.config.root,
       this.vitest.version,
     )
-    const { createBrowserServer, distRoot } = await import('@vitest/browser')
+    const [
+      { createBrowserServer, distRoot },
+      { distRoot: mockerDist },
+    ] = await Promise.all([
+      import('@vitest/browser'),
+      import('@vitest/mocker/node'),
+    ])
     let cacheDir: string
     const browser = await createBrowserServer(
       this,
@@ -550,7 +556,7 @@ export class TestProject {
         },
         ...MocksPlugins({
           filter(id) {
-            if (id.includes(distRoot) || id.includes(cacheDir)) {
+            if (id.includes(distRoot) || id.includes(mockerDist) || id.includes(cacheDir)) {
               return false
             }
             return true

packages/vitest/src/public/browser.ts

@@ -3,12 +3,14 @@ export {
   stopCoverageInsideWorker,
   takeCoverageInsideWorker,
 } from '../integrations/coverage'
-
 export {
   loadDiffConfig,
   loadSnapshotSerializers,
   setupCommonEnv,
 } from '../runtime/setup-common'
+
+export { NodeBenchmarkRunner, VitestTestRunner } from './runners'
+export { ModuleMocker } from '@vitest/mocker/browser'
 export { collectTests, processError, startTests } from '@vitest/runner'
 export * as SpyModule from '@vitest/spy'
 export {
@@ -19,6 +21,8 @@ export {
 } from '@vitest/utils'
 export type { LoupeOptions, ParsedStack, StringifyOptions } from '@vitest/utils'
 export {
+  createStackString,
   originalPositionFor,
+  parseStacktrace,
   TraceMap,
 } from '@vitest/utils/source-map'