fix(bridge): automatically transpile all modules (and sanitize transpiles) (#677)

packages/bridge/src/app.ts

@@ -9,9 +9,6 @@ export function setupAppBridge (_options: any) {
   nuxt.options.alias['#app'] = resolve(distDir, 'runtime/index.mjs')
   nuxt.options.alias['#build'] = nuxt.options.buildDir
 
-  // Transpile runtime/
-  nuxt.options.build.transpile.push(resolve(distDir, 'runtime'))
-
   // Alias vue to a vue3-compat version of vue2
   nuxt.options.alias['#vue'] = nuxt.options.alias.vue || resolveModule('vue/dist/vue.runtime.esm.js', { paths: nuxt.options.modulesDir })
   nuxt.options.alias['@vue/shared'] = 'vue'

packages/bridge/src/module.ts

@@ -8,6 +8,7 @@ import { setupBetterResolve } from './resolve'
 import { setupGlobalImports } from './global-imports'
 import { setupTypescript } from './typescript'
 import { setupMeta } from './meta'
+import { setupTranspile } from './transpile'
 
 export default defineNuxtModule({
   name: 'nuxt-bridge',
@@ -17,6 +18,7 @@ export default defineNuxtModule({
     vite: false,
     app: {},
     capi: {},
+    transpile: true,
     globalImports: true,
     constraints: true,
     meta: null,
@@ -55,6 +57,9 @@ export default defineNuxtModule({
     if (opts.resolve) {
       setupBetterResolve()
     }
+    if (opts.transpile) {
+      setupTranspile()
+    }
     if (opts.constraints) {
       nuxt.hook('modules:done', (moduleContainer: any) => {
         for (const [name, m] of Object.entries(moduleContainer.requiredModules || {})) {

packages/bridge/src/transpile.ts

@@ -0,0 +1,10 @@
+import { useNuxt } from '@nuxt/kit'
+import { addModuleTranspiles } from '../../nuxt3/src/core/modules'
+
+export const setupTranspile = () => {
+  const nuxt = useNuxt()
+
+  nuxt.hook('modules:done', () => {
+    addModuleTranspiles()
+  })
+}

packages/bridge/types.d.ts

@@ -6,6 +6,7 @@ export interface BridgeConfig {
   app: boolean | {}
   capi: boolean | {}
   globalImports: boolean
+  transpile: boolean
   constraints: boolean
   postcss8: boolean
   swc: boolean

packages/nuxt3/src/core/modules.ts

@@ -0,0 +1,29 @@
+import { useNuxt } from '@nuxt/kit'
+
+export const addModuleTranspiles = () => {
+  const nuxt = useNuxt()
+
+  const modules = [
+    ...nuxt.options.buildModules,
+    ...nuxt.options.modules,
+    ...nuxt.options._modules
+  ]
+    .map(m => typeof m === 'string' ? m : Array.isArray(m) ? m[0] : m.src)
+    .filter(m => typeof m === 'string')
+    .map(m => m.split('node_modules/').pop())
+
+  // Try to sanitize modules to better match imports
+  nuxt.options.build.transpile =
+    nuxt.options.build.transpile.map(m => typeof m === 'string' ? m.split('node_modules/').pop() : m)
+
+  function isTranspilePresent (mod: string) {
+    return nuxt.options.build.transpile.some(t => !(t instanceof Function) && (t instanceof RegExp ? t.test(mod) : new RegExp(t).test(mod)))
+  }
+
+  // Automatically add used modules to the transpile
+  for (const module of modules) {
+    if (!isTranspilePresent(module)) {
+      nuxt.options.build.transpile.push(module)
+    }
+  }
+}

packages/nuxt3/src/core/nuxt.ts

@@ -8,6 +8,7 @@ import globalImportsModule from '../global-imports/module'
 import { distDir, pkgDir } from '../dirs'
 import { version } from '../../package.json'
 import { initNitro } from './nitro'
+import { addModuleTranspiles } from './modules'
 
 export function createNuxt (options: NuxtOptions): Nuxt {
   const hooks = createHooks<NuxtHooks>()
@@ -52,6 +53,8 @@ async function initNuxt (nuxt: Nuxt) {
 
   await nuxt.callHook('modules:done', { nuxt } as ModuleContainer)
 
+  await addModuleTranspiles()
+
   await nuxt.callHook('ready', nuxt)
 }
 

packages/nuxt3/src/meta/module.ts

@@ -14,7 +14,7 @@ export default defineNuxtModule({
     const runtimeDir = nuxt.options.alias['#meta'] || resolve(distDir, 'meta/runtime')
 
     // Transpile @nuxt/meta and @vueuse/head
-    nuxt.options.build.transpile.push(runtimeDir, '@vueuse/head')
+    nuxt.options.build.transpile.push('nuxt3', '@vueuse/head')
 
     // Add #meta alias
     nuxt.options.alias['#meta'] = runtimeDir