feat(vite): support build.transpile as function (#7767)

Co-authored-by: Daniel Roe <daniel@roe.dev>

packages/schema/src/config/build.ts

@@ -53,7 +53,7 @@ export default defineUntypedSchema({
      * ```js
       transpile: [({ isLegacy }) => isLegacy && 'ky']
      * ```
-     * @type {Array<string | RegExp | Function>}
+     * @type {Array<string | RegExp | ((ctx: { isClient?: boolean; isServer?: boolean; isDev: boolean }) => string | RegExp | false)>}
      */
     transpile: {
       $resolve: val => [].concat(val).filter(Boolean)

packages/vite/src/server.ts

@@ -9,6 +9,7 @@ import { cacheDirPlugin } from './plugins/cache-dir'
 import { initViteNodeServer } from './vite-node'
 import { ssrStylesPlugin } from './plugins/ssr-styles'
 import { writeManifest } from './manifest'
+import { transpile } from './utils/transpile'
 
 export async function buildServer (ctx: ViteBuildContext) {
   const _resolve = (id: string) => resolveModule(id, { paths: ctx.nuxt.options.modulesDir })
@@ -65,7 +66,7 @@ export async function buildServer (ctx: ViteBuildContext) {
         ? ['#internal/nitro', '#internal/nitro/utils', 'vue', 'vue-router']
         : ['#internal/nitro', '#internal/nitro/utils'],
       noExternal: [
-        ...ctx.nuxt.options.build.transpile,
+        ...transpile({ isServer: true, isDev: ctx.nuxt.options.dev }),
         // TODO: Use externality for production (rollup) build
         /\/esm\/.*\.js$/,
         /\.(es|esm|esm-browser|esm-bundler).js$/,

packages/vite/src/utils/transpile.ts

@@ -0,0 +1,28 @@
+import { useNuxt } from '@nuxt/kit'
+import escapeRegExp from 'escape-string-regexp'
+import { normalize } from 'pathe'
+
+interface Envs {
+  isDev: boolean
+  isClient?: boolean
+  isServer?: boolean
+}
+
+export function transpile (envs: Envs): Array<string | RegExp> {
+  const nuxt = useNuxt()
+  const transpile = []
+
+  for (let pattern of nuxt.options.build.transpile) {
+    if (typeof pattern === 'function') {
+      const result = pattern(envs)
+      if (result) { pattern = result }
+    }
+    if (typeof pattern === 'string') {
+      transpile.push(new RegExp(escapeRegExp(normalize(pattern))))
+    } else if (pattern instanceof RegExp) {
+      transpile.push(pattern)
+    }
+  }
+
+  return transpile
+}

packages/vite/src/vite-node.ts

@@ -11,6 +11,7 @@ import { distDir } from './dirs'
 import type { ViteBuildContext } from './vite'
 import { isCSS } from './utils'
 import { createIsExternal } from './utils/external'
+import { transpile } from './utils/transpile'
 
 // TODO: Remove this in favor of registerViteNodeMiddleware
 // after Nitropack or h3 fixed for adding middlewares after setup
@@ -99,7 +100,7 @@ function createViteNodeApp (ctx: ViteBuildContext, invalidates: Set<string> = ne
         inline: [
           /\/(nuxt|nuxt3)\//,
           /^#/,
-          ...ctx.nuxt.options.build.transpile as string[]
+          ...transpile({ isServer: true, isDev: ctx.nuxt.options.dev })
         ]
       },
       transformMode: {

packages/webpack/src/presets/base.ts

@@ -161,7 +161,8 @@ export function baseTranspile (ctx: WebpackConfigContext) {
 
   for (let pattern of options.build.transpile) {
     if (typeof pattern === 'function') {
-      pattern = pattern(ctx)
+      const result = pattern(ctx)
+      if (result) { pattern = result }
     }
     if (typeof pattern === 'string') {
       transpile.push(new RegExp(escapeRegExp(normalize(pattern))))

test/fixtures/basic/nuxt.config.ts

@@ -22,6 +22,14 @@ export default defineNuxtConfig({
   },
   buildDir: process.env.NITRO_BUILD_DIR,
   builder: process.env.TEST_WITH_WEBPACK ? 'webpack' : 'vite',
+  build: {
+    transpile: [
+      (ctx) => {
+        if (typeof ctx.isDev !== 'boolean') { throw new TypeError('context not passed') }
+        return false
+      }
+    ]
+  },
   theme: './extends/bar',
   css: ['~/assets/global.css'],
   extends: [