Skip to content

Commit f5018ac

Browse files
lupaslupas
authored
Merge pull request #66 from lupas/reusePluginTemplating
Reuse plugin templating
2 parents 4a16241 + c20828e commit f5018ac

File tree

4 files changed

+194
-41
lines changed

4 files changed

+194
-41
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
},
1717
"devDependencies": {
1818
"vuepress": "^1.2.0",
19-
"eslint": "^6.6.0",
19+
"eslint": "^6.7.2",
2020
"eslint-config-prettier": "^6.7.0",
2121
"eslint-plugin-prettier": "^3.1.1",
2222
"prettier": "^1.19.1",

‎packages/docs/options/README.md‎

Lines changed: 51 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -99,11 +99,52 @@ services: {
9999
}
100100
```
101101

102+
### ALL SERVICES
103+
104+
All services mentioned below can have the following options:
105+
106+
```js
107+
[serviceName]: {
108+
static: false, // default
109+
preload: false, // default
110+
chunkName: process.env.NODE_ENV !== 'production' ? `firebase-${serviceName}` : '[id]' // default
111+
}
112+
```
113+
114+
#### static
115+
116+
By default, each service gets imported dynamically, which splits them into separate chunks. If `static = true` however, we import them statically, so the services are bundled into `vendors.app.js`.
117+
118+
```js
119+
// static: false (default)
120+
await import 'firebase/auth'
121+
// static: true
122+
import 'firebase/auth'
123+
```
124+
125+
#### preload
126+
127+
Preloads dynamically loaded services. More information [here](https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules).
128+
129+
::: warning Be aware
130+
Only applies if `static === false`.
131+
:::
132+
133+
134+
135+
#### chunkName
136+
137+
Be default, the dynamically imported services are named `vendors.firebase-${serviceName}.js` in development mode, and `[id]` in production mode (`process.env.NODE_ENV === 'production'`). If you want to change this behaviour, you can do so with this option.
138+
139+
::: warning Be aware
140+
Only applies if `static === false`.
141+
:::
142+
102143
### auth
103144

104145
Initializes Firebase Authentication and makes it available via `$fireAuth` and `$fireAuthObj`.
105146

106-
- Type: `Boolean`
147+
- Type: `Boolean` or `Object`
107148
- Default: `false`
108149

109150
```js
@@ -164,6 +205,9 @@ firestore: true
164205
// or
165206

166207
firestore: {
208+
static: false, // default
209+
preload: false, // default
210+
chunkName: process.env.NODE_ENV !== 'production' ? 'firebase-auth' : '[id]', // default
167211
enablePersistence: true
168212
}
169213
```
@@ -205,7 +249,7 @@ More information [here](https://firebase.google.com/docs/functions/locations).
205249

206250
Initializes Firebase Storage and makes it available via `$fireStorage` and `$fireStorageObj`.
207251

208-
- Type: `Boolean`
252+
- Type: `Boolean` or `Object`
209253
- Default: `false`
210254

211255
```js
@@ -216,7 +260,7 @@ storage: true
216260

217261
Initializes Firebase Realtime Database and makes it available via `$fireDb` and `$fireDbObj`.
218262

219-
- Type: `Boolean`
263+
- Type: `Boolean` or `Object`
220264
- Default: `false`
221265

222266
```js
@@ -243,7 +287,7 @@ messaging: {
243287

244288
#### createServiceWorker <Badge text="EXPERIMENTAL" type="warn"/>
245289

246-
- Type: `Boolean`
290+
- Type: `Boolean` or `Object`
247291
- Default: `false`
248292

249293
Setting the **createServiceWorker** flag to true automatically creates a service worker called `firebase-messaging-sw.js` in your static folder. The service worker is fully configured for FCM with the newest Firebase scripts.
@@ -264,7 +308,7 @@ notification: {
264308

265309
#### onFirebaseHosting
266310

267-
- Type: `Boolean`
311+
- Type: `Boolean` or `Object`
268312
- Default: `false`
269313

270314
If your application is hosted on Firebase hosting, you can enable this flag in order to load the newest Firebase scripts in the service worker directly from there instead of www.gstatic.com.
@@ -273,7 +317,7 @@ If your application is hosted on Firebase hosting, you can enable this flag in o
273317

274318
Initializes Firebase Performance and makes it available via `$firePerf` and `$firePerfObj`.
275319

276-
- Type: `Boolean`
320+
- Type: `Boolean` or `Object`
277321
- Default: `false`
278322

279323
```js
@@ -284,7 +328,7 @@ performance: true
284328

285329
Initializes Firebase Storage and makes it available via `$fireAnalytics` and `$fireAnalyticsObj`.
286330

287-
- Type: `Boolean`
331+
- Type: `Boolean` or `Object`
288332
- Default: `false`
289333

290334
```js

‎packages/nuxt-fire/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "nuxt-fire",
3-
"version": "3.1.0",
3+
"version": "3.2.0",
44
"license": "MIT",
55
"description": "Intergrate Firebase into your Nuxt project.",
66
"main": "src/index.js",

‎packages/nuxt-fire/src/plugins/main.js‎

Lines changed: 141 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,66 @@
11
import firebase from 'firebase/app'
2+
<%
3+
const serviceMapping = {
4+
auth: 'auth',
5+
realtimeDb: 'database',
6+
firestore: 'firestore',
7+
storage: 'storage',
8+
functions: 'functions',
9+
messaging: 'messaging',
10+
performance: 'performance',
11+
analytics: 'analytics',
12+
remoteConfig: 'remote-config'
13+
}
14+
15+
function writeStaticImports() {
16+
return Object.keys(serviceMapping)
17+
.map(service => writeImportStatement(service, true))
18+
.filter(Boolean)
19+
.join('\n')
20+
}
21+
22+
function writeImportStatement(service, staticImport = false) {
23+
const serviceOptions = options.services[service]
24+
const importStatically = serviceOptions && serviceOptions.static
25+
const importDynamically = serviceOptions && !importStatically
26+
27+
if (importStatically && staticImport) {
28+
return `import 'firebase/${serviceMapping[service]}'`
29+
}
30+
31+
if (!importDynamically || staticImport) {
32+
return
33+
}
34+
35+
const webpackComments = []
36+
37+
// Add Chunk Name Comment
38+
if (process.env.NODE_ENV !== 'production' && !serviceOptions.chunkName) {
39+
webpackComments.push(`webpackChunkName: 'firebase-${serviceMapping[service]}'`)
40+
}
41+
if (serviceOptions.chunkName) {
42+
webpackComments.push(`webpackChunkName: '${serviceOptions.chunkName}'`)
43+
}
44+
45+
// Add Preload Comment
46+
if (serviceOptions.preload) {
47+
webpackComments.push(`webpackPreload: true`)
48+
}
49+
50+
// Add strings surrounding the comment
51+
let webpackCommentsString = ''
52+
if (webpackComments.length) {
53+
webpackCommentsString = `/* ${webpackComments.join(', ')} */`
54+
}
55+
return `await import(${webpackCommentsString}'firebase/${serviceMapping[service]}')`
56+
}
57+
%>
58+
<%= writeStaticImports() %>
59+
60+
/** --------------------------------------------------------------------------------------------- **/
61+
/** -------------------------------------- END: Import Scripts ---------------------------------- **/
62+
/** --------------------------------------------------------------------------------------------- **/
63+
264

365
export default async (ctx, inject) => {
466

@@ -10,26 +72,38 @@ export default async (ctx, inject) => {
1072
firebase.initializeApp(firebaseConfig)
1173
}
1274

13-
if (options.services.auth) {
14-
await import('firebase/auth')
75+
/** --------------------------------------------------------------------------------------------- **/
76+
/** -------------------------------------- FIREBASE AUTH ---------------------------------------- **/
77+
/** --------------------------------------------------------------------------------------------- **/
78+
79+
<% if (options.services.auth) { %>
80+
<%= writeImportStatement('auth') %>
1581

1682
const fireAuth = firebase.auth()
1783
const fireAuthObj = firebase.auth
1884
inject('fireAuth', fireAuth)
1985
inject('fireAuthObj', fireAuthObj)
20-
}
86+
<% } %>
2187

22-
if (options.services.realtimeDb) {
23-
await import('firebase/database')
88+
/** --------------------------------------------------------------------------------------------- **/
89+
/** -------------------------------------- FIREBASE REALTIME DB --------------------------------- **/
90+
/** --------------------------------------------------------------------------------------------- **/
91+
<% if (options.services.realtimeDb) { %>
92+
<%= writeImportStatement('realtimeDb') %>
2493

2594
const fireDb = firebase.database()
2695
const fireDbObj = firebase.database
2796
inject('fireDb', fireDb)
2897
inject('fireDbObj', fireDbObj)
29-
}
3098

31-
if (options.services.firestore) {
32-
await import('firebase/firestore')
99+
<% } %>
100+
101+
/** --------------------------------------------------------------------------------------------- **/
102+
/** ---------------------------------------- FIREBASE FIRESTORE --------------------------------- **/
103+
/** --------------------------------------------------------------------------------------------- **/
104+
105+
<% if (options.services.firestore) { %>
106+
<%= writeImportStatement('firestore') %>
33107

34108
const fireStore = firebase.firestore()
35109
const fireStoreObj = firebase.firestore
@@ -47,30 +121,46 @@ export default async (ctx, inject) => {
47121
}
48122
}
49123
}
50-
}
51124

52-
if (options.services.storage) {
53-
await import('firebase/storage')
125+
<% } %>
126+
127+
/** --------------------------------------------------------------------------------------------- **/
128+
/** ------------------------------------------ FIREBASE STORAGE --------------------------------- **/
129+
/** --------------------------------------------------------------------------------------------- **/
130+
131+
<% if (options.services.storage) { %>
132+
<%= writeImportStatement('storage') %>
54133

55134
const fireStorage = firebase.storage()
56135
const fireStorageObj = firebase.storage
57136
inject('fireStorage', fireStorage)
58137
inject('fireStorageObj', fireStorageObj)
59-
}
60138

61-
if (options.services.functions) {
62-
await import('firebase/functions')
139+
<% } %>
140+
141+
/** --------------------------------------------------------------------------------------------- **/
142+
/** ---------------------------------------- FIREBASE FUNCTIONS --------------------------------- **/
143+
/** --------------------------------------------------------------------------------------------- **/
144+
145+
<% if (options.services.functions) { %>
146+
<%= writeImportStatement('functions') %>
63147

64148
// If .location is undefined, default will be "us-central1"
65149
const fireFunc = firebase.app().functions(options.services.functions.location)
66150
const fireFuncObj = firebase.functions
67151
inject('fireFunc', fireFunc)
68152
inject('fireFuncObj', fireFuncObj)
69-
}
70153

154+
<% } %>
155+
156+
/** --------------------------------------------------------------------------------------------- **/
157+
/** ---------------------------------------- FIREBASE MESSAGING --------------------------------- **/
158+
/** --------------------------------------------------------------------------------------------- **/
159+
160+
<% if (options.services.messaging) { %>
71161
// Firebase Messaging can only be initiated on client side
72-
if (process.browser && options.services.messaging) {
73-
await import('firebase/messaging')
162+
if (process.browser) {
163+
<%= writeImportStatement('messaging') %>
74164

75165
if (firebase.messaging.isSupported()) {
76166
const fireMess = firebase.messaging()
@@ -85,46 +175,65 @@ export default async (ctx, inject) => {
85175
}
86176
}
87177

178+
<% } %>
179+
180+
/** --------------------------------------------------------------------------------------------- **/
181+
/** -------------------------------------- FIREBASE REALTIME DB --------------------------------- **/
182+
/** --------------------------------------------------------------------------------------------- **/
183+
88184
// Firebase Performance can only be initiated on client side
89-
if(process.browser && options.services.performance){
90-
await import('firebase/performance')
185+
<% if (options.services.performance) { %>
186+
if(process.browser) {
187+
<%= writeImportStatement('performance') %>
91188

92189
const firePerf = firebase.performance()
93190
const firePerfObj = firebase.performance
94191
inject('firePerf', firePerf)
95192
inject('firePerfObj', firePerfObj)
96193
}
194+
<% } %>
195+
196+
/** --------------------------------------------------------------------------------------------- **/
197+
/** ---------------------------------------- FIREBASE ANALYTICS --------------------------------- **/
198+
/** --------------------------------------------------------------------------------------------- **/
97199

98200
// Firebase Analytics can only be initiated on the client side
99-
if(process.browser && options.services.analytics) {
100-
await import('firebase/analytics')
201+
<% if (options.services.analytics) { %>
202+
if (process.browser) {
203+
<%= writeImportStatement('analytics') %>
101204

102205
const fireAnalytics = firebase.analytics()
103206
const fireAnalyticsObj = firebase.analytics
104207
inject('fireAnalytics', fireAnalytics)
105208
inject('fireAnalyticsObj', fireAnalyticsObj)
209+
106210
}
211+
<% } %>
107212

213+
/** --------------------------------------------------------------------------------------------- **/
214+
/** --------------------------------- FIREBASE REMOTE CONFIG DB --------------------------------- **/
215+
/** --------------------------------------------------------------------------------------------- **/
216+
<% if (options.services.remoteConfig) { %>
108217
// Firebase Remote Config can only be initiated on the client side
109-
if(process.browser && options.services.remoteConfig) {
110-
await import('firebase/remote-config')
218+
if (process.browser) {
219+
<%= writeImportStatement('remoteConfig') %>
111220

112221
const fireConfig = firebase.remoteConfig()
113222
const fireConfigObj = firebase.remoteConfig
114223

115-
if (options.services.remoteConfig) {
116-
const { settings: remoteSettings, defaultConfig: remoteDefaultConfig } = options.services.remoteConfig
117-
if (remoteSettings) {
118-
const { minimumFetchIntervalMillis, fetchTimeoutMillis } = remoteSettings
119-
fireConfig.settings = {
120-
fetchTimeoutMillis: fetchTimeoutMillis ? fetchTimeoutMillis : 60000,
121-
minimumFetchIntervalMillis: minimumFetchIntervalMillis ? minimumFetchIntervalMillis : 43200000
122-
}
224+
const { settings: remoteSettings, defaultConfig: remoteDefaultConfig } = options.services.remoteConfig
225+
if (remoteSettings) {
226+
const { minimumFetchIntervalMillis, fetchTimeoutMillis } = remoteSettings
227+
fireConfig.settings = {
228+
fetchTimeoutMillis: fetchTimeoutMillis ? fetchTimeoutMillis : 60000,
229+
minimumFetchIntervalMillis: minimumFetchIntervalMillis ? minimumFetchIntervalMillis : 43200000
123230
}
124-
fireConfig.defaultConfig = (remoteDefaultConfig)
125231
}
232+
fireConfig.defaultConfig = (remoteDefaultConfig)
126233

127234
inject('fireConfig', fireConfig)
128235
inject('fireConfigObj', fireConfigObj)
236+
129237
}
238+
<% } %>
130239
}

0 commit comments

Comments
 (0)