refactor(playground): move to ESM module and add type check for config (#12131)

playground/alias/vite.config.js

@@ -1,9 +1,7 @@
-const path = require('node:path')
+import path from 'node:path'
+import { defineConfig } from 'vite'
 
-/**
- * @type {import('vite').UserConfig}
- */
-module.exports = {
+export default defineConfig({
   resolve: {
     alias: [
       { find: 'fs', replacement: path.resolve(__dirname, 'test.js') },
@@ -39,4 +37,4 @@ module.exports = {
     __VUE_OPTIONS_API__: true,
     __VUE_PROD_DEVTOOLS__: true,
   },
-}
+})

playground/assets-sanitize/vite.config.js

@@ -1,6 +1,6 @@
-const { defineConfig } = require('vite')
+import { defineConfig } from 'vite'
 
-module.exports = defineConfig({
+export default defineConfig({
   build: {
     //speed up build
     minify: false,

playground/assets/__tests__/relative-base/vite.config.js

@@ -1 +1 @@
-module.exports = require('../../vite.config-relative-base')
+export { default } from '../../vite.config-relative-base'

playground/assets/__tests__/runtime-base/vite.config.js

@@ -1 +1 @@
-module.exports = require('../../vite.config-runtime-base')
+export { default } from '../../vite.config-runtime-base'

playground/assets/vite.config-relative-base.js

@@ -1,15 +1,13 @@
-/**
- * @type {import('vite').UserConfig}
- */
+import { defineConfig } from 'vite'
+import baseConfig from './vite.config.js'
 
-const baseConfig = require('./vite.config.js')
-module.exports = {
+export default defineConfig({
   ...baseConfig,
   base: './', // relative base to make dist portable
   build: {
     ...baseConfig.build,
     outDir: 'dist/relative-base',
-    watch: false,
+    watch: null,
     minify: false,
     assetsInlineLimit: 0,
     rollupOptions: {
@@ -23,4 +21,4 @@ module.exports = {
   testConfig: {
     baseRoute: '/relative-base/',
   },
-}
+})

playground/assets/vite.config-runtime-base.js

@@ -1,22 +1,18 @@
-const path = require('node:path')
+import { defineConfig } from 'vite'
+import baseConfig from './vite.config.js'
 
 const dynamicBaseAssetsCode = `
 globalThis.__toAssetUrl = url => '/' + url
 globalThis.__publicBase = '/'
 `
 
-const baseConfig = require('./vite.config.js')
-
-/**
- * @type {import('vite').UserConfig}
- */
-module.exports = {
+export default defineConfig({
   ...baseConfig,
   base: './', // overwrite the original base: '/foo/'
   build: {
     ...baseConfig.build,
     outDir: 'dist',
-    watch: false,
+    watch: null,
     minify: false,
     assetsInlineLimit: 0,
     rollupOptions: {
@@ -61,4 +57,4 @@ module.exports = {
       }
     },
   },
-}
+})

playground/assets/vite.config.js

@@ -1,9 +1,9 @@
-const path = require('node:path')
+import path from 'node:path'
+import { defineConfig } from 'vite'
 
-/**
- * @type {import('vite').UserConfig}
- */
-module.exports = {
+/** @type {import('vite').UserConfig} */
+// @ts-expect-error typecast
+export default defineConfig({
   base: '/foo',
   publicDir: 'static',
   resolve: {
@@ -18,4 +18,4 @@ module.exports = {
     manifest: true,
     watch: {},
   },
-}
+})

playground/backend-integration/vite.config.js

@@ -1,6 +1,6 @@
-const path = require('node:path')
-const glob = require('fast-glob')
-const normalizePath = require('vite').normalizePath
+import path from 'node:path'
+import glob from 'fast-glob'
+import { defineConfig, normalizePath } from 'vite'
 
 /**
  * @returns {import('vite').Plugin}
@@ -40,10 +40,7 @@ function BackendIntegrationExample() {
   }
 }
 
-/**
- * @returns {import('vite').UserConfig}
- */
-module.exports = {
+export default defineConfig({
   base: '/dev/',
   plugins: [BackendIntegrationExample()],
-}
+})

playground/cli/vite.config.js

@@ -1,6 +1,6 @@
-const { defineConfig } = require('vite')
+import { defineConfig } from 'vite'
 
-module.exports = defineConfig({
+export default defineConfig({
   server: {
     host: 'localhost',
     headers: {

playground/css-codesplit-cjs/vite.config.js

@@ -1,6 +1,7 @@
-const { resolve } = require('node:path')
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
 
-module.exports = {
+export default defineConfig({
   build: {
     outDir: './dist',
     manifest: true,
@@ -17,4 +18,4 @@ module.exports = {
       },
     },
   },
-}
+})

playground/css-codesplit/vite.config.js

@@ -1,6 +1,7 @@
-const { resolve } = require('node:path')
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
 
-module.exports = {
+export default defineConfig({
   build: {
     manifest: true,
     rollupOptions: {
@@ -18,4 +19,4 @@ module.exports = {
       },
     },
   },
-}
+})

playground/css-sourcemap/vite.config.js

@@ -1,9 +1,7 @@
-const MagicString = require('magic-string')
+import { defineConfig } from 'vite'
+import MagicString from 'magic-string'
 
-/**
- * @type {import('vite').UserConfig}
- */
-module.exports = {
+export default defineConfig({
   resolve: {
     alias: {
       '@': __dirname,
@@ -58,4 +56,4 @@ module.exports = {
       },
     },
   ],
-}
+})

playground/css/vite.config-relative-base.js

@@ -1,15 +1,13 @@
-/**
- * @type {import('vite').UserConfig}
- */
+import { defineConfig } from 'vite'
+import baseConfig from './vite.config.js'
 
-const baseConfig = require('./vite.config.js')
-module.exports = {
+export default defineConfig({
   ...baseConfig,
   base: './', // relative base to make dist portable
   build: {
     ...baseConfig.build,
     outDir: 'dist/relative-base',
-    watch: false,
+    watch: null,
     minify: false,
     assetsInlineLimit: 0,
     rollupOptions: {
@@ -23,4 +21,4 @@ module.exports = {
   testConfig: {
     baseRoute: '/relative-base/',
   },
-}
+})

playground/css/vite.config.js

@@ -1,14 +1,16 @@
-const path = require('node:path')
+import path from 'node:path'
+import { defineConfig } from 'vite'
 
 // trigger scss bug: https://github.com/sass/dart-sass/issues/710
 // make sure Vite handles safely
+// @ts-expect-error refer to https://github.com/vitejs/vite/pull/11079
 globalThis.window = {}
+// @ts-expect-error refer to https://github.com/vitejs/vite/pull/11079
 globalThis.location = new URL('http://localhost/')
 
-/**
- * @type {import('vite').UserConfig}
- */
-module.exports = {
+/** @type {import('vite').UserConfig} */
+// @ts-expect-error typecast
+export default defineConfig({
   build: {
     cssTarget: 'chrome61',
   },
@@ -69,4 +71,4 @@ module.exports = {
       },
     },
   },
-}
+})

playground/define/vite.config.js

@@ -1,4 +1,8 @@
-module.exports = {
+import { defineConfig } from 'vite'
+
+/** @type {import('vite').UserConfig} */
+// @ts-expect-error typecast
+export default defineConfig({
   define: {
     __EXP__: 'false',
     __STRING__: '"hello"',
@@ -22,4 +26,4 @@ module.exports = {
     __VAR_NAME__: false,
     __STRINGIFIED_OBJ__: JSON.stringify({ foo: true }),
   },
-}
+})

playground/dynamic-import/vite.config.js

@@ -1,8 +1,8 @@
-const fs = require('node:fs')
-const path = require('node:path')
-const vite = require('vite')
+import fs from 'node:fs'
+import path from 'node:path'
+import vite from 'vite'
 
-module.exports = vite.defineConfig({
+export default vite.defineConfig({
   plugins: [
     {
       name: 'copy',

playground/env-nested/vite.config.js

@@ -1,5 +1,5 @@
-const { defineConfig } = require('vite')
+import { defineConfig } from 'vite'
 
-module.exports = defineConfig({
+export default defineConfig({
   envDir: './envs',
 })

playground/env/vite.config.js

@@ -1,8 +1,8 @@
-const { defineConfig } = require('vite')
+import { defineConfig } from 'vite'
 
 process.env.EXPAND = 'expand'
 
-module.exports = defineConfig({
+export default defineConfig({
   base: '/env/',
   envPrefix: ['VITE_', 'CUSTOM_PREFIX_'],
   build: {

playground/extensions/vite.config.js

@@ -1,6 +1,8 @@
-module.exports = {
+import { defineConfig } from 'vite'
+
+export default defineConfig({
   resolve: {
     alias: [{ find: 'vue', replacement: 'vue/dist/vue.esm-bundler.js' }],
     extensions: ['.js'],
   },
-}
+})

playground/fs-serve/root/vite.config.js

@@ -1,9 +1,7 @@
-const path = require('node:path')
+import path from 'node:path'
+import { defineConfig } from 'vite'
 
-/**
- * @type {import('vite').UserConfig}
- */
-module.exports = {
+export default defineConfig({
   build: {
     rollupOptions: {
       input: {
@@ -31,4 +29,4 @@ module.exports = {
   define: {
     ROOT: JSON.stringify(path.dirname(__dirname).replace(/\\/g, '/')),
   },
-}
+})

playground/hmr/optional-chaining/parent.js

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import { foo } from './child'
 
 import.meta.hot?.accept('./child', ({ foo }) => {

playground/html/vite.config.js

@@ -1,9 +1,7 @@
-const { resolve } = require('node:path')
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
 
-/**
- * @type {import('vite').UserConfig}
- */
-module.exports = {
+export default defineConfig({
   base: './',
   build: {
     rollupOptions: {
@@ -189,4 +187,4 @@ ${
       },
     },
   ],
-}
+})

playground/js-sourcemap/vite.config.js

@@ -1,8 +1,7 @@
-/**
- * @type {import('vite').UserConfig}
- */
-module.exports = {
+import { defineConfig } from 'vite'
+
+export default defineConfig({
   build: {
     sourcemap: true,
   },
-}
+})

playground/legacy/vite.config-custom-filename.js

@@ -1,6 +1,7 @@
-const legacy = require('@vitejs/plugin-legacy').default
+import { defineConfig } from 'vite'
+import legacy from '@vitejs/plugin-legacy'
 
-module.exports = {
+export default defineConfig({
   plugins: [legacy({ modernPolyfills: true })],
   build: {
     manifest: true,
@@ -12,4 +13,4 @@ module.exports = {
       },
     },
   },
-}
+})

playground/legacy/vite.config-multiple-output.js

@@ -1,5 +1,5 @@
-import legacy from '@vitejs/plugin-legacy'
 import { defineConfig } from 'vite'
+import legacy from '@vitejs/plugin-legacy'
 
 export default defineConfig({
   plugins: [legacy({ modernPolyfills: true })],

playground/legacy/vite.config.js

@@ -1,8 +1,9 @@
-const fs = require('node:fs')
-const path = require('node:path')
-const legacy = require('@vitejs/plugin-legacy').default
+import fs from 'node:fs'
+import path from 'node:path'
+import legacy from '@vitejs/plugin-legacy'
+import { defineConfig } from 'vite'
 
-module.exports = {
+export default defineConfig({
   base: './',
   plugins: [
     legacy({
@@ -41,4 +42,4 @@ module.exports = {
       .replace(/<script nomodule/g, '<script')
     fs.writeFileSync(indexPath, index)
   },
-}
+})

playground/lib/vite.config.js

@@ -1,10 +1,10 @@
-const fs = require('node:fs')
-const path = require('node:path')
+import fs from 'node:fs'
+import path from 'node:path'
+import { defineConfig } from 'vite'
 
-/**
- * @type {import('vite').UserConfig}
- */
-module.exports = {
+/** @type {import('vite').UserConfig} */
+// @ts-expect-error typecast
+export default defineConfig({
   esbuild: {
     supported: {
       // Force esbuild inject helpers to test regex
@@ -39,4 +39,4 @@ module.exports = {
       },
     },
   ],
-}
+})

playground/lib/vite.dyimport.config.js

@@ -1,10 +1,7 @@
-const fs = require('node:fs')
-const path = require('node:path')
+import path from 'node:path'
+import { defineConfig } from 'vite'
 
-/**
- * @type {import('vite').UserConfig}
- */
-module.exports = {
+export default defineConfig({
   build: {
     lib: {
       entry: path.resolve(__dirname, 'src/main2.js'),
@@ -14,4 +11,4 @@ module.exports = {
     },
     outDir: 'dist/lib',
   },
-}
+})

playground/lib/vite.nominify.config.js

@@ -1,6 +1,7 @@
-const baseConfig = require('./vite.config')
+import { defineConfig } from 'vite'
+import baseConfig from './vite.config'
 
-module.exports = {
+export default defineConfig({
   ...baseConfig,
   build: {
     ...baseConfig.build,
@@ -8,4 +9,4 @@ module.exports = {
     outDir: 'dist/nominify',
   },
   plugins: [],
-}
+})

playground/multiple-entrypoints/vite.config.js

@@ -1,7 +1,7 @@
-const { resolve } = require('node:path')
-const fs = require('node:fs')
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
 
-module.exports = {
+export default defineConfig({
   build: {
     outDir: './dist',
     emptyOutDir: true,
@@ -37,4 +37,4 @@ module.exports = {
       },
     },
   },
-}
+})

playground/nested-deps/vite.config.js

@@ -1,7 +1,6 @@
-/**
- * @type {import('vite').UserConfig}
- */
-module.exports = {
+import { defineConfig } from 'vite'
+
+export default defineConfig({
   optimizeDeps: {
     include: [
       '@vitejs/test-package-a',
@@ -13,4 +12,4 @@ module.exports = {
     ],
     exclude: ['@vitejs/test-package-d', '@vitejs/test-package-e-excluded'],
   },
-}
+})

playground/optimize-deps/vite.config.js

@@ -1,12 +1,10 @@
-const fs = require('node:fs')
+import fs from 'node:fs'
+import { defineConfig } from 'vite'
 
 // Overriding the NODE_ENV set by vitest
 process.env.NODE_ENV = ''
 
-/**
- * @type {import('vite').UserConfig}
- */
-module.exports = {
+export default defineConfig({
   resolve: {
     dedupe: ['react'],
     alias: {
@@ -95,7 +93,7 @@ module.exports = {
       },
     },
   ],
-}
+})
 
 // Handles Test.vue in dep-linked-include package
 function testVue() {

playground/preload/__tests__/preload-disabled/vite.config.js

@@ -1 +1 @@
-module.exports = require('../../vite.config-preload-disabled')
+export { default } from '../../vite.config-preload-disabled'

playground/preload/__tests__/resolve-deps/vite.config.js

@@ -1 +1 @@
-module.exports = require('../../vite.config-resolve-deps')
+export { default } from '../../vite.config-resolve-deps'

playground/resolve-config/root/vite.config.ts

@@ -1,5 +1,7 @@
+import { defineConfig } from 'vite'
+
 const __CONFIG_LOADED__: boolean = true
-export default {
+export default defineConfig({
   define: { __CONFIG_LOADED__ },
   logLevel: 'silent',
   build: {
@@ -7,4 +9,4 @@ export default {
     sourcemap: false,
     lib: { entry: 'index.js', fileName: 'index', formats: ['es'] },
   },
-}
+})

playground/resolve/vite.config.js

@@ -1,5 +1,6 @@
-const path = require('node:path')
-const { normalizePath } = require('vite')
+import path from 'node:path'
+import { defineConfig, normalizePath } from 'vite'
+import { a } from './config-dep'
 
 const virtualFile = '@virtual-file'
 const virtualId = '\0' + virtualFile
@@ -8,7 +9,6 @@ const virtualFile9036 = 'virtual:file-9036.js'
 const virtualId9036 = '\0' + virtualFile9036
 
 const customVirtualFile = '@custom-virtual-file'
-const { a } = require('./config-dep')
 
 const generatedContentVirtualFile = '@generated-content-virtual-file'
 const generatedContentImports = [
@@ -24,7 +24,7 @@ const generatedContentImports = [
   },
 ]
 
-module.exports = {
+export default defineConfig({
   resolve: {
     extensions: ['.mjs', '.js', '.es', '.ts'],
     mainFields: ['custom', 'module'],
@@ -103,4 +103,4 @@ module.exports = {
   optimizeDeps: {
     include: ['@vitejs/test-require-pkg-with-module-field'],
   },
-}
+})

playground/ssr-noexternal/vite.config.js

@@ -1,4 +1,3 @@
-import module from 'node:module'
 import { defineConfig } from 'vite'
 
 export default defineConfig({

playground/ssr-webworker/vite.config.js

@@ -13,6 +13,7 @@ export default defineConfig({
   },
   plugins: [
     {
+      name: '@vitejs/test-ssr-webworker/no-external',
       config() {
         return {
           ssr: {
@@ -22,6 +23,7 @@ export default defineConfig({
       },
     },
     {
+      name: '@vitejs/test-ssr-webworker/no-external-array',
       config() {
         return {
           ssr: {

playground/tailwind-sourcemap/vite.config.js

@@ -1,11 +1,10 @@
-/**
- * @type {import('vite').UserConfig}
- */
-module.exports = {
+import { defineConfig } from 'vite'
+
+export default defineConfig({
   css: {
     devSourcemap: true,
   },
   build: {
     sourcemap: true,
   },
-}
+})

playground/transform-plugin/vite.config.js

@@ -1,5 +1,5 @@
-const { resolve } = require('node:path')
-const { normalizePath } = require('vite')
+import { resolve } from 'node:path'
+import { defineConfig, normalizePath } from 'vite'
 
 let transformCount = 1
 
@@ -20,6 +20,6 @@ const transformPlugin = {
   },
 }
 
-module.exports = {
+export default defineConfig({
   plugins: [transformPlugin],
-}
+})

playground/tsconfig.json

@@ -1,7 +1,8 @@
 {
-  "include": ["."],
+  "include": ["**/vite*config*", "**/*.ts"],
   "exclude": ["**/dist/**"],
   "compilerOptions": {
+    "checkJs": true,
     "target": "ES2020",
     "module": "ESNext",
     "outDir": "dist",

playground/vitestSetup.ts

@@ -86,6 +86,12 @@ declare module 'vite' {
       baseRoute: string
     }
   }
+
+  interface UserConfig {
+    testConfig?: {
+      baseRoute: string
+    }
+  }
 }
 
 export function setViteUrl(url: string): void {

playground/worker/__tests__/es/vite.config.js

@@ -1 +1 @@
-module.exports = require('../../vite.config-es')
+export { default } from '../../vite.config-es'

playground/worker/__tests__/iife/vite.config.js

@@ -1 +1 @@
-module.exports = require('../../vite.config-iife')
+export { default } from '../../vite.config-iife'

playground/worker/__tests__/relative-base/vite.config.js

@@ -1 +1 @@
-module.exports = require('../../vite.config-relative-base')
+export { default } from '../../vite.config-relative-base'

playground/worker/__tests__/sourcemap-hidden/vite.config.js

@@ -1 +1,2 @@
-module.exports = require('../../vite.config-sourcemap')('hidden')
+import sourcemap from '../../vite.config-sourcemap'
+export default sourcemap('hidden')

playground/worker/__tests__/sourcemap-inline/vite.config.js

@@ -1 +1,2 @@
-module.exports = require('../../vite.config-sourcemap')('inline')
+import sourcemap from '../../vite.config-sourcemap'
+export default sourcemap('inline')

playground/worker/__tests__/sourcemap/vite.config.js

@@ -1 +1,2 @@
-module.exports = require('../../vite.config-sourcemap')(true)
+import sourcemap from '../../vite.config-sourcemap'
+export default sourcemap(true)

playground/worker/vite.config-es.js

@@ -1,9 +1,8 @@
-const vite = require('vite')
-const workerPluginTestPlugin = require('./worker-plugin-test-plugin')
+import vite from 'vite'
+import workerPluginTestPlugin from './worker-plugin-test-plugin'
 
-module.exports = vite.defineConfig({
+export default vite.defineConfig({
   base: '/es/',
-  enforce: 'pre',
   resolve: {
     alias: {
       '@': __dirname,

playground/worker/vite.config-iife.js

@@ -1,7 +1,7 @@
-const vite = require('vite')
-const workerPluginTestPlugin = require('./worker-plugin-test-plugin')
+import vite from 'vite'
+import workerPluginTestPlugin from './worker-plugin-test-plugin'
 
-module.exports = vite.defineConfig({
+export default vite.defineConfig({
   base: '/iife/',
   resolve: {
     alias: {

playground/worker/vite.config-relative-base.js

@@ -1,8 +1,7 @@
-const path = require('node:path')
-const vite = require('vite')
-const workerPluginTestPlugin = require('./worker-plugin-test-plugin')
+import vite from 'vite'
+import workerPluginTestPlugin from './worker-plugin-test-plugin'
 
-module.exports = vite.defineConfig({
+export default vite.defineConfig({
   base: './',
   resolve: {
     alias: {

playground/worker/vite.config-sourcemap.js

@@ -1,12 +1,18 @@
-const vite = require('vite')
-const workerPluginTestPlugin = require('./worker-plugin-test-plugin')
+import vite from 'vite'
+import workerPluginTestPlugin from './worker-plugin-test-plugin'
+
+/** @param {boolean | 'inline' | 'hidden' | 'sourcemap'} sourcemap */
+export default (sourcemap) => {
+  sourcemap =
+    /** @type {'inline' | 'hidden' | 'sourcemap'} */ (
+      process.env.WORKER_MODE
+    ) || sourcemap
 
-module.exports = vite.defineConfig((sourcemap) => {
-  sourcemap = process.env.WORKER_MODE || sourcemap
   if (sourcemap === 'sourcemap') {
     sourcemap = true
   }
-  return {
+
+  return vite.defineConfig({
     base: `/iife-${
       typeof sourcemap === 'boolean' ? 'sourcemap' : 'sourcemap-' + sourcemap
     }/`,
@@ -40,5 +46,5 @@ module.exports = vite.defineConfig((sourcemap) => {
       },
     },
     plugins: [workerPluginTestPlugin()],
-  }
-})
+  })
+}