feat(bridge): enable automatic global imports for nuxt2 (#609)

docs/content/7.bridge/1.intro.md

@@ -28,8 +28,8 @@ ESM support            | 🌙 Partial     | 👍 Better        | ✅
 Typescript             | ☑️ Opt-in      | 🚧 Faster        | ✅
 Composition API        | ⚠️ Deprecated  | ✅               | ✅
 Components Auto Import | ✅             | ✅               | ✅
-Auto Imports           | ❌             | 🚧               | ✅
+Auto Imports           | ❌             | ✅               | ✅
-Webpack                | 4              | 4                 | 5
+Webpack                | 4              | 4                | 5
 Vite                   | ⚠️ Partial     | 🚧 Partial       | 🚧 Experimental
 Nuxi CLI               | ❌ Old         | ✅               | ✅
 

packages/bridge/src/global-imports.ts

@@ -0,0 +1,77 @@
+import { installModule, useNuxt } from '@nuxt/kit'
+import globalImports from 'nuxt3/src/global-imports/module'
+
+// TODO: implement these: https://github.com/nuxt/framework/issues/549
+const disabled = [
+  'useMeta',
+  'useAsyncData',
+  'asyncData'
+]
+
+const identifiers = {
+  '#app': [
+    'defineNuxtComponent',
+    'useNuxtApp',
+    'defineNuxtPlugin',
+    'useRoute',
+    'useRouter'
+  ],
+  '@vue/composition-api': [
+    // lifecycle
+    'onActivated',
+    'onBeforeMount',
+    'onBeforeUnmount',
+    'onBeforeUpdate',
+    'onDeactivated',
+    'onErrorCaptured',
+    'onMounted',
+    'onServerPrefetch',
+    'onUnmounted',
+    'onUpdated',
+
+    // reactivity,
+    'computed',
+    'customRef',
+    'isReadonly',
+    'isRef',
+    'markRaw',
+    'reactive',
+    'readonly',
+    'ref',
+    'shallowReactive',
+    'shallowReadonly',
+    'shallowRef',
+    'toRaw',
+    'toRef',
+    'toRefs',
+    'triggerRef',
+    'unref',
+    'watch',
+    'watchEffect',
+
+    // component
+    'defineComponent',
+    'defineAsyncComponent',
+    'getCurrentInstance',
+    'h',
+    'inject',
+    'nextTick',
+    'provide',
+    'useCssModule'
+  ]
+}
+
+const defaultIdentifiers = {}
+for (const pkg in identifiers) {
+  for (const id of identifiers[pkg]) {
+    defaultIdentifiers[id] = pkg
+  }
+}
+
+export async function setupGlobalImports () {
+  const nuxt = useNuxt()
+  nuxt.options.globalImports = nuxt.options.globalImports || {}
+  nuxt.options.globalImports.disabled = nuxt.options.globalImports.disabled || disabled
+  nuxt.options.globalImports.identifiers = Object.assign({}, defaultIdentifiers, nuxt.options.globalImports.identifiers)
+  await installModule(nuxt, globalImports)
+}

packages/bridge/src/module.ts

@@ -4,6 +4,7 @@ import { setupNitroBridge } from './nitro'
 import { setupAppBridge } from './app'
 import { setupCAPIBridge } from './capi'
 import { setupBetterResolve } from './resolve'
+import { setupGlobalImports } from './global-imports'
 
 export default defineNuxtModule({
   name: 'nuxt-bridge',
@@ -13,12 +14,15 @@ export default defineNuxtModule({
     vite: false,
     app: {},
     capi: {},
+    globalImports: true,
     // TODO: Remove from 2.16
     postcss8: true,
     swc: true,
     resolve: true
   },
   async setup (opts, nuxt) {
+    const _require = createRequire(import.meta.url)
+
     if (opts.nitro) {
       await setupNitroBridge()
     }
@@ -31,7 +35,9 @@ export default defineNuxtModule({
       }
       await setupCAPIBridge(opts.capi)
     }
-    const _require = createRequire(import.meta.url)
+    if (opts.globalImports) {
+      await setupGlobalImports()
+    }
     if (opts.vite) {
       await installModule(nuxt, _require.resolve('nuxt-vite'))
     }

packages/nuxt3/src/global-imports/module.ts

@@ -8,7 +8,10 @@ export default defineNuxtModule<GlobalImportsOptions>({
   name: 'global-imports',
   configKey: 'globalImports',
   defaults: { identifiers: defaultIdentifiers },
-  setup ({ identifiers }, nuxt) {
+  setup ({ disabled = [], identifiers }, nuxt) {
+    for (const key of disabled) {
+      delete identifiers[key]
+    }
     if (nuxt.options.dev) {
       // Add all imports to globalThis in development mode
       addPluginTemplate({

packages/nuxt3/src/global-imports/transform.ts

@@ -8,11 +8,11 @@ const excludeRE = [
   // defined as function
   /\bfunction\s*([\s\S]+?)\s*\(/g,
   // defined as local variable
-  /\b(?:const|let|var)\s*([\w\d_$]+?)\b/g
+  /\b(?:const|let|var)\s*(\{([\s\S]*?)\}|[\w\d_$]+?\b)/g
 ]
 
 const multilineCommentsRE = /\/\*(.|[\r\n])*?\*\//gm
-const singlelineCommentsRE = /\/\/.*/g
+const singlelineCommentsRE = /^\s*\/\/.*$/gm
 
 function stripeComments (code: string) {
   return code
@@ -73,10 +73,17 @@ export const TransformPlugin = createUnplugin((map: IdentifierMap) => {
         modules[moduleName].push(name)
       })
 
+      // Needed for webpack4/bridge support
+      const isCJSContext = code.includes('require(')
+
       // stringify import
-      const imports = Object.entries(modules)
+      const imports = !isCJSContext
-        .map(([moduleName, names]) => `import { ${names.join(',')} } from '${moduleName}';`)
+        ? Object.entries(modules)
-        .join('')
+          .map(([moduleName, names]) => `import { ${names.join(',')} } from '${moduleName}';`)
+          .join('')
+        : Object.entries(modules)
+          .map(([moduleName, names]) => `const { ${names.join(',')} } = require('${moduleName}');`)
+          .join('')
 
       return imports + code
     }

packages/nuxt3/src/global-imports/types.ts

@@ -3,4 +3,5 @@ export type Identifiers = [string, string][]
 
 export interface GlobalImportsOptions {
   identifiers?: IdentifierMap
+  disabled?: string[]
 }

test/fixtures/bridge/layouts/default.vue

@@ -6,7 +6,6 @@
 </template>
 
 <script>
-import { useRoute } from '#app'
 export default {
   setup () {
     const route = useRoute()

test/fixtures/bridge/pages/index.vue

@@ -3,8 +3,6 @@
 </template>
 
 <script>
-import { defineComponent, ref } from '#app'
-
 export default defineComponent({
   setup () {
     return {

test/fixtures/bridge/pages/legacy-capi.vue

@@ -21,7 +21,7 @@
       <tr><td><b>onMounted</b></td><td> {{ mounted }}</td></tr>
       <!-- Wrappers -->
       <tr><td><b>useStore</b></td><td> {{ store.state.test }}</td></tr>
-      <tr><td><b>useRoute</b></td><td> {{ route.path === '/legacy' ? '✅' : '❌' }}</td></tr>
+      <tr><td><b>useRoute</b></td><td> {{ route.path === '/legacy-capi' ? '✅' : '❌' }}</td></tr>
       <tr><td><b>useContext</b></td><td> {{ Object.keys(context).length ? '✅' : '❌' }}</td></tr>
       <!-- Helpers -->
       <tr><td><b>useAsync</b></td><td> {{ async }}</td></tr>
@@ -45,7 +45,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref, useRoute, useContext, useStore, useAsync, ssrRef, shallowSsrRef, ssrPromise, useMeta } from '@nuxtjs/composition-api'
+import { useRoute, useContext, useStore, useAsync, ssrRef, shallowSsrRef, ssrPromise, useMeta } from '@nuxtjs/composition-api'
 
 export default defineComponent({
   setup () {