refactor(nuxt): types, ssr

Author: posva

packages/nuxt/.eslintrc

@@ -15,6 +15,7 @@
     "comma-dangle": [
       "error",
       "always-multiline"
-    ]
+    ],
+    "vue/require-v-for-key": "off",
   }
 }

packages/nuxt/package.json

@@ -10,7 +10,7 @@
       "require": "./dist/module.cjs"
     }
   },
-  "main": "./dist/module.cjs",
+  "main": "./dist/module.mjs",
   "types": "./dist/types.d.ts",
   "files": [
     "dist"
@@ -27,16 +27,16 @@
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
   },
   "dependencies": {
-    "@nuxt/kit": "3.0.0-rc.13"
+    "@nuxt/kit": "^3.0.0-rc.13"
   },
   "devDependencies": {
     "@firebase/app-types": "^0.8.1",
     "@nuxt/module-builder": "^0.2.0",
-    "@nuxt/schema": "3.0.0-rc.13",
+    "@nuxt/schema": "^3.0.0-rc.13",
     "@nuxtjs/eslint-config-typescript": "^11.0.0",
     "eslint": "^8.27.0",
     "firebase": "^9.14.0",
-    "nuxt": "^3.0.0-rc.12",
+    "nuxt": "^^3.0.0-rc.12",
     "vuefire": "workspace:*"
   }
 }

packages/nuxt/playground/pages/database/index.vue

@@ -3,7 +3,7 @@ const router = useRouter()
 
 const routes = router
   .getRoutes()
-  .filter((record) => record.path.startsWith('/database/'))
+  .filter(record => record.path.startsWith('/database/'))
   .map((record) => {
     return {
       name: record.name,
@@ -14,10 +14,14 @@ const routes = router
 
 <template>
   <div>
-    <NuxtLink to="/">&lt;&lt; Back Home</NuxtLink>
+    <NuxtLink to="/">
+      &lt;&lt; Back Home
+    </NuxtLink>
     <ul>
       <li v-for="link in routes">
-        <NuxtLink :to="link">{{ link.path }}</NuxtLink>
+        <NuxtLink :to="link">
+          {{ link.path }}
+        </NuxtLink>
       </li>
     </ul>
   </div>

packages/nuxt/playground/pages/firestore/config.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { doc, getDoc } from 'firebase/firestore'
+import { useDocument, useFirestore, usePendingPromises } from 'vuefire'
+import { ref } from 'vue'
+
+const db = useFirestore()
+const configRef = doc(db, 'configs', 'jORwjIykFo2NmkdzTkhU')
+// const itemRef = doc(db, 'tests', 'item')
+const isDoneFetching = ref(false)
+const isAllDoneFetching = ref(false)
+
+getDoc(configRef).then((data) => {
+  console.log('got data once', data)
+})
+
+const { data: config, promise } = useDocument(configRef, { wait: true })
+// const { data: hey } = useDocument(configRef)
+
+promise.value.then((data) => {
+  console.log('one', data)
+  isDoneFetching.value = true
+})
+
+usePendingPromises().then((data) => {
+  console.log(data)
+  isAllDoneFetching.value = true
+})
+</script>
+
+<template>
+  <div>
+    <p>config:</p>
+    <p>finished: {{ isDoneFetching }}</p>
+    <p>All finished: {{ isAllDoneFetching }}</p>
+    <pre>{{ config }}</pre>
+  </div>
+</template>

packages/nuxt/playground/pages/firestore/index.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+const router = useRouter()
+
+const routes = router
+  .getRoutes()
+  .filter(record => record.path.startsWith('/firestore/'))
+  .map((record) => {
+    return {
+      name: record.name,
+      path: record.path,
+    }
+  })
+</script>
+
+<template>
+  <div>
+    <NuxtLink to="/">
+      &lt;&lt; Back Home
+    </NuxtLink>
+    <ul>
+      <li v-for="link in routes">
+        <NuxtLink :to="link">
+          {{ link.path }}
+        </NuxtLink>
+      </li>
+    </ul>
+  </div>
+</template>

packages/nuxt/playground/pages/index.vue

@@ -2,7 +2,14 @@
   <div>
     <ul>
       <li>
-        <NuxtLink to="/database">Database</NuxtLink>
+        <NuxtLink to="/database">
+          Database
+        </NuxtLink>
+      </li>
+      <li>
+        <NuxtLink to="/firestore">
+          Firestore
+        </NuxtLink>
       </li>
     </ul>
   </div>

packages/nuxt/src/module.ts

@@ -1,7 +1,7 @@
 import { fileURLToPath } from 'node:url'
 import { resolve } from 'path'
 import { addPlugin, defineNuxtModule } from '@nuxt/kit'
-import { FirebaseOptions } from '@firebase/app-types'
+import { type FirebaseOptions } from '@firebase/app-types'
 
 export interface VueFireNuxtModuleOptions {
   optionsApiPlugin: boolean

packages/nuxt/src/runtime/plugin.ts

@@ -1,14 +1,26 @@
-import { defineNuxtPlugin } from '#app'
+import { usePendingPromises, VueFire, useSSRInitialState } from 'vuefire'
+import { initializeApp } from 'firebase/app'
+import { defineNuxtPlugin } from '#imports'
 
 export default defineNuxtPlugin(async (nuxtApp) => {
-  // TODO: create the plugin that stores the promises with data
+  // TODO: initialize firebase app from config
+  const firebaseApp = initializeApp()
 
-  if (process.server) {
-    await 2 // TODO: wait for promises to resolve
+  nuxtApp.vueApp.use(
+    // @ts-expect-error: nuxt type bug?
+    VueFire,
+    {
+      firebaseApp,
+    }
+  )
 
-    // nuxtApp.payload.firebaseState = ...
-  } else {
-    // hydrate the plugin state from nuxtApp.payload.firebaseState
+  if (process.server) {
+    await usePendingPromises()
+    // TODO: pass the firebaseApp
+    nuxtApp.payload.vuefire = useSSRInitialState()
+  } else if (nuxtApp.payload?.vuefire) {
+    // hydrate the plugin state from nuxtApp.payload.vuefire
+    useSSRInitialState(nuxtApp.payload.vuefire)
   }
 
   return {

packages/nuxt/tsconfig.json

@@ -1,3 +1,8 @@
 {
-  "extends": "./playground/.nuxt/tsconfig.json"
+  "extends": "./playground/.nuxt/tsconfig.json",
+  "include": [
+    // missing in the playground
+    "./src"
+    , "./playground"
+  ]
 }