feat: experimental vite support

src/babel.ts

@@ -34,6 +34,7 @@ export default function ssrRefPlugin({ loadOptions, getEnv, types: t }: Babel) {
           method = 'hex'
           break
 
+        case 'getCompositionApiKey':
         case 'shallowSsrRef':
         case 'ssrPromise':
         case 'ssrRef':

src/entrypoint.ts

@@ -15,6 +15,8 @@ export { useStatic } from './static'
 export * from './defineHelpers'
 export * from './wrappers'
 
+export const getCompositionApiKey = (key?: string) => key
+
 export type {
   App,
   ComponentInstance,

src/index.ts

@@ -2,9 +2,11 @@ import { resolve, join } from 'upath'
 import { withTrailingSlash } from 'ufo'
 import { readdirSync, copyFileSync, existsSync, mkdirpSync } from 'fs-extra'
 
+import type { Module, NuxtConfig } from '@nuxt/types'
+
 import { name, version } from '../package.json'
 
-import type { Module, NuxtConfig } from '@nuxt/types'
+import { compositionApiPlugin } from './vite'
 
 function isFullStatic(options: NuxtConfig) {
   return (
@@ -95,6 +97,24 @@ const compositionApiModule: Module<any> = function compositionApiModule() {
     },
   })
 
+  const entryFile = resolve(this.options.buildDir || '', entryDst)
+
+  this.options.build.transpile = this.options.build.transpile || []
+  this.options.build.transpile.push(/@nuxtjs[\\/]composition-api/)
+  this.options.build.transpile.push(entryFile)
+
+  // Fake alias to prevent shadowing actual node_module
+  const aliases = ['@nuxtjs/composition-api', '@nuxtjs/vite-composition-api']
+
+  for (const alias of aliases) {
+    this.options.alias[alias] = entryFile
+  }
+
+  this.nuxt.hook('vite:extend', (ctx: any) => {
+    ctx.config.plugins.push(compositionApiPlugin())
+    ctx.config.optimizeDeps.exclude.push('@vue/composition-api')
+  })
+
   this.options.build = this.options.build || {}
   this.options.build.babel = this.options.build.babel || {}
 
@@ -107,9 +127,6 @@ const compositionApiModule: Module<any> = function compositionApiModule() {
     this.options.build.babel.plugins.push(join(__dirname, 'babel'))
   }
 
-  this.options.build.transpile = this.options.build.transpile || []
-  this.options.build.transpile.push(/@nuxtjs[\\/]composition-api/)
-
   const actualPresets = this.options.build.babel.presets
 
   this.options.build.babel.presets = (
@@ -131,11 +148,6 @@ const compositionApiModule: Module<any> = function compositionApiModule() {
     return [[defaultPreset, newOptions]]
   }
 
-  this.options.alias['@nuxtjs/composition-api'] = resolve(
-    this.options.buildDir || '',
-    entryDst
-  )
-
   this.options.plugins = this.options.plugins || []
   this.options.plugins.unshift(resolve(this.options.buildDir || '', pluginDst))
   if (

src/vite.ts

@@ -0,0 +1,34 @@
+import crypto from 'crypto'
+
+function createKey(
+  source: string,
+  method: crypto.BinaryToTextEncoding = 'base64'
+) {
+  const hash = crypto.createHash('md5')
+  hash.update(source)
+  return hash.digest(method).toString()
+}
+
+export function compositionApiPlugin() {
+  return {
+    name: 'composition-api',
+    enforce: 'pre',
+    transform(code: string, id: string) {
+      code = code.replace(
+        /@nuxtjs[\\/]composition-api/g,
+        '@nuxtjs/vite-composition-api'
+      )
+      code = code.replace(
+        /getCompositionApiKey\(\)/g,
+        (_match, _p1, offset) => {
+          const key = createKey(`${id}-${offset}`)
+          return `"${key}"`
+        }
+      )
+      return {
+        code,
+        map: null,
+      }
+    },
+  }
+}