Skip to content

Commit 91ddb90

Browse files
posvaposva
committed
refactor(nuxt): tests and template plugin
1 parent 0f4649f commit 91ddb90

File tree

10 files changed

+177
-96
lines changed

10 files changed

+177
-96
lines changed

‎.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
./playground/typed-router.d.ts
2+
./packages/nuxt/templates

‎packages/nuxt/.nuxtrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
imports.autoImport=false
2+
typescript.includeWorkspace=true

‎packages/nuxt/package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
".": {
99
"import": "./dist/module.mjs",
1010
"require": "./dist/module.cjs"
11-
}
11+
},
12+
"./templates/*": "./templates/*"
1213
},
1314
"main": "./dist/module.cjs",
1415
"module": "./dist/module.mjs",
@@ -28,7 +29,7 @@
2829
"dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
2930
},
3031
"dependencies": {
31-
"@nuxt/kit": "^3.0.0-rc.14"
32+
"@nuxt/kit": "^3.0.0"
3233
},
3334
"peerDependencies": {
3435
"@firebase/app-types": ">=0.8.1",
@@ -38,11 +39,11 @@
3839
"devDependencies": {
3940
"@firebase/app-types": "^0.8.1",
4041
"@nuxt/module-builder": "^0.2.1",
41-
"@nuxt/schema": "^3.0.0-rc.14",
42+
"@nuxt/schema": "^3.0.0",
4243
"@nuxtjs/eslint-config-typescript": "^11.0.0",
4344
"eslint": "^8.27.0",
4445
"firebase": "^9.14.0",
45-
"nuxt": "^3.0.0-rc.14",
46+
"nuxt": "^3.0.0",
4647
"vuefire": "workspace:*"
4748
}
4849
}

‎packages/nuxt/playground/nuxt.config.ts‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,35 @@ import { defineNuxtConfig } from 'nuxt/config'
33
import VueFire from '../'
44

55
export default defineNuxtConfig({
6-
pageTransition: null,
7-
layoutTransition: null,
6+
app: {
7+
pageTransition: false,
8+
layoutTransition: false,
9+
},
10+
811
alias: {
912
vuefire: fileURLToPath(new URL('../../../src/index.ts', import.meta.url)),
1013
'nuxt-vuefire': fileURLToPath(new URL('../src/module.ts', import.meta.url)),
1114
},
15+
1216
modules: [
1317
//
14-
[VueFire, {}],
18+
[
19+
VueFire,
20+
{
21+
services: {
22+
auth: true,
23+
},
24+
config: {
25+
apiKey: 'AIzaSyAkUKe36TPWL2eZTshgk-Xl4bY_R5SB97U',
26+
authDomain: 'vue-fire-store.firebaseapp.com',
27+
databaseURL: 'https://vue-fire-store.firebaseio.com',
28+
projectId: 'vue-fire-store',
29+
storageBucket: 'vue-fire-store.appspot.com',
30+
messagingSenderId: '998674887640',
31+
appId: '1:998674887640:web:1e2bb2cc3e5eb2fc3478ad',
32+
measurementId: 'G-RL4BTWXKJ7',
33+
},
34+
},
35+
],
1536
],
1637
})

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

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
1+
<script lang="ts">
2+
import {} from 'firebase/firestore'
3+
// import { listAll, ref as storageRef } from 'firebase/storage'
4+
// import { useFirebaseApp, useStorage } from 'vuefire'
5+
6+
console.log('initializing pages/index.vue')
7+
// console.log('firebaseApp', !!useFirebaseApp())
8+
9+
// listAll(storageRef(useStorage(), 'demo')).then((data) => {
10+
// console.log('data', data)
11+
// })
12+
</script>
13+
114
<template>
215
<div>
316
<ul>
417
<li>
5-
<NuxtLink to="/database">
6-
Database
7-
</NuxtLink>
18+
<NuxtLink to="/database"> Database </NuxtLink>
819
</li>
920
<li>
10-
<NuxtLink to="/firestore">
11-
Firestore
12-
</NuxtLink>
21+
<NuxtLink to="/firestore"> Firestore </NuxtLink>
1322
</li>
1423
</ul>
1524
</div>

‎packages/nuxt/src/module.ts‎

Lines changed: 49 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { fileURLToPath } from 'node:url'
2-
import { resolve } from 'path'
3-
import { addPlugin, defineNuxtModule } from '@nuxt/kit'
4-
import { type NuxtModule } from '@nuxt/schema'
2+
import { normalize } from 'node:path'
3+
import {
4+
addPlugin,
5+
addPluginTemplate,
6+
createResolver,
7+
defineNuxtModule,
8+
} from '@nuxt/kit'
9+
import type { NuxtModule } from '@nuxt/schema'
510
import { type FirebaseOptions } from '@firebase/app-types'
611

712
export interface VueFireNuxtModuleOptions {
@@ -13,26 +18,28 @@ export interface VueFireNuxtModuleOptions {
1318
optionsApiPlugin?: boolean | 'firestore' | 'database'
1419

1520
config: FirebaseOptions
21+
1622
/**
1723
* Optional name passed to `firebase.initializeApp(config, name)`
1824
*/
1925
appName?: string
2026

21-
services: {
27+
services?: {
2228
auth?: boolean
2329
firestore?: boolean
2430
database?: boolean
2531
storage?: boolean
2632
}
2733
}
2834

29-
const VueFireModule: NuxtModule<VueFireNuxtModuleOptions> =
35+
// Manual to avoid build error
36+
const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
3037
defineNuxtModule<VueFireNuxtModuleOptions>({
3138
meta: {
3239
name: 'vuefire',
3340
configKey: 'vuefire',
3441
compatibility: {
35-
nuxt: '^3.0.0-0',
42+
nuxt: '^3.0.0',
3643
},
3744
},
3845

@@ -43,12 +50,45 @@ const VueFireModule: NuxtModule<VueFireNuxtModuleOptions> =
4350
},
4451

4552
setup(options, nuxt) {
53+
const { resolve } = createResolver(import.meta.url)
4654
const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
47-
console.log('TOEHUNTOEUHNTUEHoT')
55+
const templatesDir = fileURLToPath(
56+
new URL('../templates', import.meta.url)
57+
)
58+
59+
// Let plugins and the user access the firebase config within the app
60+
nuxt.options.appConfig.firebaseConfig = options.config
61+
62+
if (Object.keys(options.config).length === 0) {
63+
throw new Error(
64+
'[VueFire]: Missing firebase config. Provide it to the VueFire module options.'
65+
)
66+
}
67+
68+
// nuxt.options.build.transpile.push(templatesDir)
4869
nuxt.options.build.transpile.push(runtimeDir)
49-
// TODO: check for individual options
70+
5071
addPlugin(resolve(runtimeDir, 'plugin'))
72+
73+
// const p = normalize(resolve(templatesDir, 'plugin.js'))
74+
// console.log('[VueFire]: adding', p)
75+
// addPluginTemplate({
76+
// src: normalize(resolve(templatesDir, 'plugin.js')),
77+
78+
// options: {
79+
// ...options,
80+
// },
81+
// })
5182
},
5283
})
5384

54-
export default VueFireModule
85+
export default VueFire
86+
87+
declare module '@nuxt/schema' {
88+
export interface AppConfig {
89+
/**
90+
* Firebase config to initialize the app.
91+
*/
92+
firebaseConfig: FirebaseOptions
93+
}
94+
}

‎packages/nuxt/src/runtime/plugin.ts‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,34 @@
11
import { usePendingPromises, VueFire, useSSRInitialState } from 'vuefire'
22
import { initializeApp } from 'firebase/app'
33
import { defineNuxtPlugin, useAppConfig } from '#imports'
4+
import { connectFirestoreEmulator, getFirestore } from 'firebase/firestore'
5+
import { connectDatabaseEmulator, getDatabase } from 'firebase/database'
46

5-
export default defineNuxtPlugin(async (nuxtApp) => {
7+
export default defineNuxtPlugin((nuxtApp) => {
68
// TODO: initialize firebase app from config
7-
console.log('appconfig', useAppConfig())
8-
const firebaseApp = initializeApp()
99

10-
nuxtApp.vueApp.use(
11-
// @ts-expect-error: nuxt type bug?
12-
VueFire,
13-
{
14-
firebaseApp,
15-
}
16-
)
10+
console.log('initializing firebase app')
11+
12+
const firebaseApp = initializeApp({
13+
// FIXME: hard coded until the templates are fixed in nuxt
14+
apiKey: 'AIzaSyAkUKe36TPWL2eZTshgk-Xl4bY_R5SB97U',
15+
authDomain: 'vue-fire-store.firebaseapp.com',
16+
databaseURL: 'https://vue-fire-store.firebaseio.com',
17+
projectId: 'vue-fire-store',
18+
storageBucket: 'vue-fire-store.appspot.com',
19+
messagingSenderId: '998674887640',
20+
appId: '1:998674887640:web:1e2bb2cc3e5eb2fc3478ad',
21+
measurementId: 'G-RL4BTWXKJ7',
22+
})
23+
24+
console.log('initialized app')
25+
26+
// connectFirestoreEmulator(getFirestore(firebaseApp), 'localhost', 8080)
27+
// connectDatabaseEmulator(getDatabase(firebaseApp), 'localhost', 8081)
28+
29+
nuxtApp.vueApp.use(VueFire, {
30+
firebaseApp,
31+
})
1732

1833
if (process.server) {
1934
// TODO: pass the firebaseApp
@@ -22,6 +37,4 @@ export default defineNuxtPlugin(async (nuxtApp) => {
2237
// hydrate the plugin state from nuxtApp.payload.vuefire
2338
useSSRInitialState(nuxtApp.payload.vuefire, firebaseApp)
2439
}
25-
26-
return {}
2740
})

‎packages/nuxt/templates/plugin.ejs‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// @ts-check import { usePendingPromises, VueFire, useSSRInitialState } from
2+
'vuefire' import { initializeApp } from 'firebase/app' import {
3+
defineNuxtPlugin, toRaw, useAppConfig, useRuntimeConfig } from '#imports' import
4+
{ connectFirestoreEmulator, getFirestore } from 'firebase/firestore' import {
5+
connectDatabaseEmulator, getDatabase } from 'firebase/database' export default
6+
defineNuxtPlugin((nuxtApp) => { const appConfig = useAppConfig() const
7+
firebaseConfig = toRaw(appConfig).firebaseConfig console.log('Initializing
8+
Firebase app...', firebaseConfig) const firebaseApp =
9+
initializeApp(firebaseConfig) console.log('initialized firebase app',
10+
!!firebaseApp) // connectFirestoreEmulator(getFirestore(firebaseApp),
11+
'localhost', 8080) // connectDatabaseEmulator(getDatabase(firebaseApp),
12+
'localhost', 8081) nuxtApp.vueApp.use(VueFire, { firebaseApp, services: [ <%
13+
if(options.services.auth) { %> // Auth <% } %> ] }) if (process.server) { //
14+
TODO: pass the firebaseApp nuxtApp.payload.vuefire =
15+
useSSRInitialState(undefined, firebaseApp) } else if (nuxtApp.payload?.vuefire)
16+
{ // hydrate the plugin state from nuxtApp.payload.vuefire
17+
useSSRInitialState(nuxtApp.payload.vuefire, firebaseApp) } return {} })

‎packages/nuxt/tsconfig.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
"extends": "./playground/.nuxt/tsconfig.json",
33
"include": [
44
// missing in the playground
5-
"./src"
6-
, "./playground"
5+
"./src",
6+
"./playground",
7+
"./templates"
78
]
89
}

0 commit comments

Comments
 (0)