refactor(nuxt): tests and template plugin

Author: posva

Diff for: .prettierignore

@@ -1 +1,2 @@
 ./playground/typed-router.d.ts
+./packages/nuxt/templates

Diff for: packages/nuxt/.nuxtrc

@@ -1 +1,2 @@
 imports.autoImport=false
+typescript.includeWorkspace=true

Diff for: packages/nuxt/package.json

@@ -8,7 +8,8 @@
     ".": {
       "import": "./dist/module.mjs",
       "require": "./dist/module.cjs"
-    }
+    },
+    "./templates/*": "./templates/*"
   },
   "main": "./dist/module.cjs",
   "module": "./dist/module.mjs",
@@ -28,7 +29,7 @@
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.0.0-rc.14"
+    "@nuxt/kit": "^3.0.0"
   },
   "peerDependencies": {
     "@firebase/app-types": ">=0.8.1",
@@ -38,11 +39,11 @@
   "devDependencies": {
     "@firebase/app-types": "^0.8.1",
     "@nuxt/module-builder": "^0.2.1",
-    "@nuxt/schema": "^3.0.0-rc.14",
+    "@nuxt/schema": "^3.0.0",
     "@nuxtjs/eslint-config-typescript": "^11.0.0",
     "eslint": "^8.27.0",
     "firebase": "^9.14.0",
-    "nuxt": "^3.0.0-rc.14",
+    "nuxt": "^3.0.0",
     "vuefire": "workspace:*"
   }
 }

Diff for: packages/nuxt/playground/nuxt.config.ts

@@ -3,14 +3,35 @@ import { defineNuxtConfig } from 'nuxt/config'
 import VueFire from '../'
 
 export default defineNuxtConfig({
-  pageTransition: null,
-  layoutTransition: null,
+  app: {
+    pageTransition: false,
+    layoutTransition: false,
+  },
+
   alias: {
     vuefire: fileURLToPath(new URL('../../../src/index.ts', import.meta.url)),
     'nuxt-vuefire': fileURLToPath(new URL('../src/module.ts', import.meta.url)),
   },
+
   modules: [
     //
-    [VueFire, {}],
+    [
+      VueFire,
+      {
+        services: {
+          auth: true,
+        },
+        config: {
+          apiKey: 'AIzaSyAkUKe36TPWL2eZTshgk-Xl4bY_R5SB97U',
+          authDomain: 'vue-fire-store.firebaseapp.com',
+          databaseURL: 'https://vue-fire-store.firebaseio.com',
+          projectId: 'vue-fire-store',
+          storageBucket: 'vue-fire-store.appspot.com',
+          messagingSenderId: '998674887640',
+          appId: '1:998674887640:web:1e2bb2cc3e5eb2fc3478ad',
+          measurementId: 'G-RL4BTWXKJ7',
+        },
+      },
+    ],
   ],
 })

Diff for: packages/nuxt/playground/pages/index.vue

@@ -1,15 +1,24 @@
+<script lang="ts">
+import {} from 'firebase/firestore'
+// import { listAll, ref as storageRef } from 'firebase/storage'
+// import { useFirebaseApp, useStorage } from 'vuefire'
+
+console.log('initializing pages/index.vue')
+// console.log('firebaseApp', !!useFirebaseApp())
+
+// listAll(storageRef(useStorage(), 'demo')).then((data) => {
+//   console.log('data', data)
+// })
+</script>
+
 <template>
   <div>
     <ul>
       <li>
-        <NuxtLink to="/database">
-          Database
-        </NuxtLink>
+        <NuxtLink to="/database"> Database </NuxtLink>
       </li>
       <li>
-        <NuxtLink to="/firestore">
-          Firestore
-        </NuxtLink>
+        <NuxtLink to="/firestore"> Firestore </NuxtLink>
       </li>
     </ul>
   </div>

Diff for: packages/nuxt/src/module.ts

@@ -1,7 +1,12 @@
 import { fileURLToPath } from 'node:url'
-import { resolve } from 'path'
-import { addPlugin, defineNuxtModule } from '@nuxt/kit'
-import { type NuxtModule } from '@nuxt/schema'
+import { normalize } from 'node:path'
+import {
+  addPlugin,
+  addPluginTemplate,
+  createResolver,
+  defineNuxtModule,
+} from '@nuxt/kit'
+import type { NuxtModule } from '@nuxt/schema'
 import { type FirebaseOptions } from '@firebase/app-types'
 
 export interface VueFireNuxtModuleOptions {
@@ -13,26 +18,28 @@ export interface VueFireNuxtModuleOptions {
   optionsApiPlugin?: boolean | 'firestore' | 'database'
 
   config: FirebaseOptions
+
   /**
    * Optional name passed to `firebase.initializeApp(config, name)`
    */
   appName?: string
 
-  services: {
+  services?: {
     auth?: boolean
     firestore?: boolean
     database?: boolean
     storage?: boolean
   }
 }
 
-const VueFireModule: NuxtModule<VueFireNuxtModuleOptions> =
+// Manual to avoid build error
+const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
   defineNuxtModule<VueFireNuxtModuleOptions>({
     meta: {
       name: 'vuefire',
       configKey: 'vuefire',
       compatibility: {
-        nuxt: '^3.0.0-0',
+        nuxt: '^3.0.0',
       },
     },
 
@@ -43,12 +50,45 @@ const VueFireModule: NuxtModule<VueFireNuxtModuleOptions> =
     },
 
     setup(options, nuxt) {
+      const { resolve } = createResolver(import.meta.url)
       const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
-      console.log('TOEHUNTOEUHNTUEHoT')
+      const templatesDir = fileURLToPath(
+        new URL('../templates', import.meta.url)
+      )
+
+      // Let plugins and the user access the firebase config within the app
+      nuxt.options.appConfig.firebaseConfig = options.config
+
+      if (Object.keys(options.config).length === 0) {
+        throw new Error(
+          '[VueFire]: Missing firebase config. Provide it to the VueFire module options.'
+        )
+      }
+
+      // nuxt.options.build.transpile.push(templatesDir)
       nuxt.options.build.transpile.push(runtimeDir)
-      // TODO: check for individual options
+
       addPlugin(resolve(runtimeDir, 'plugin'))
+
+      // const p = normalize(resolve(templatesDir, 'plugin.js'))
+      // console.log('[VueFire]: adding', p)
+      // addPluginTemplate({
+      //   src: normalize(resolve(templatesDir, 'plugin.js')),
+
+      //   options: {
+      //     ...options,
+      //   },
+      // })
     },
   })
 
-export default VueFireModule
+export default VueFire
+
+declare module '@nuxt/schema' {
+  export interface AppConfig {
+    /**
+     * Firebase config to initialize the app.
+     */
+    firebaseConfig: FirebaseOptions
+  }
+}

Diff for: packages/nuxt/src/runtime/plugin.ts

@@ -1,19 +1,34 @@
 import { usePendingPromises, VueFire, useSSRInitialState } from 'vuefire'
 import { initializeApp } from 'firebase/app'
 import { defineNuxtPlugin, useAppConfig } from '#imports'
+import { connectFirestoreEmulator, getFirestore } from 'firebase/firestore'
+import { connectDatabaseEmulator, getDatabase } from 'firebase/database'
 
-export default defineNuxtPlugin(async (nuxtApp) => {
+export default defineNuxtPlugin((nuxtApp) => {
   // TODO: initialize firebase app from config
-  console.log('appconfig', useAppConfig())
-  const firebaseApp = initializeApp()
 
-  nuxtApp.vueApp.use(
-    // @ts-expect-error: nuxt type bug?
-    VueFire,
-    {
-      firebaseApp,
-    }
-  )
+  console.log('initializing firebase app')
+
+  const firebaseApp = initializeApp({
+    // FIXME: hard coded until the templates are fixed in nuxt
+    apiKey: 'AIzaSyAkUKe36TPWL2eZTshgk-Xl4bY_R5SB97U',
+    authDomain: 'vue-fire-store.firebaseapp.com',
+    databaseURL: 'https://vue-fire-store.firebaseio.com',
+    projectId: 'vue-fire-store',
+    storageBucket: 'vue-fire-store.appspot.com',
+    messagingSenderId: '998674887640',
+    appId: '1:998674887640:web:1e2bb2cc3e5eb2fc3478ad',
+    measurementId: 'G-RL4BTWXKJ7',
+  })
+
+  console.log('initialized app')
+
+  // connectFirestoreEmulator(getFirestore(firebaseApp), 'localhost', 8080)
+  // connectDatabaseEmulator(getDatabase(firebaseApp), 'localhost', 8081)
+
+  nuxtApp.vueApp.use(VueFire, {
+    firebaseApp,
+  })
 
   if (process.server) {
     // TODO: pass the firebaseApp
@@ -22,6 +37,4 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     // hydrate the plugin state from nuxtApp.payload.vuefire
     useSSRInitialState(nuxtApp.payload.vuefire, firebaseApp)
   }
-
-  return {}
 })

Diff for: packages/nuxt/templates/plugin.ejs

@@ -0,0 +1,17 @@
+// @ts-check import { usePendingPromises, VueFire, useSSRInitialState } from
+'vuefire' import { initializeApp } from 'firebase/app' import {
+defineNuxtPlugin, toRaw, useAppConfig, useRuntimeConfig } from '#imports' import
+{ connectFirestoreEmulator, getFirestore } from 'firebase/firestore' import {
+connectDatabaseEmulator, getDatabase } from 'firebase/database' export default
+defineNuxtPlugin((nuxtApp) => { const appConfig = useAppConfig() const
+firebaseConfig = toRaw(appConfig).firebaseConfig console.log('Initializing
+Firebase app...', firebaseConfig) const firebaseApp =
+initializeApp(firebaseConfig) console.log('initialized firebase app',
+!!firebaseApp) // connectFirestoreEmulator(getFirestore(firebaseApp),
+'localhost', 8080) // connectDatabaseEmulator(getDatabase(firebaseApp),
+'localhost', 8081) nuxtApp.vueApp.use(VueFire, { firebaseApp, services: [ <%
+if(options.services.auth) { %> // Auth <% } %> ] }) if (process.server) { //
+TODO: pass the firebaseApp nuxtApp.payload.vuefire =
+useSSRInitialState(undefined, firebaseApp) } else if (nuxtApp.payload?.vuefire)
+{ // hydrate the plugin state from nuxtApp.payload.vuefire
+useSSRInitialState(nuxtApp.payload.vuefire, firebaseApp) } return {} })

Diff for: packages/nuxt/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "./playground/.nuxt/tsconfig.json",
   "include": [
     // missing in the playground
-    "./src"
-    , "./playground"
+    "./src",
+    "./playground",
+    "./templates"
   ]
 }