feat(storage): handle ssr

Author: posva

src/shared.ts

@@ -8,6 +8,7 @@ import {
   QuerySnapshot,
   Timestamp,
 } from 'firebase/firestore'
+import { StorageReference } from 'firebase/storage'
 import type { Ref, ShallowRef } from 'vue-demi'
 
 export const noop = () => {}
@@ -156,6 +157,10 @@ export function isDatabaseReference(
   return isObject(source) && 'ref' in source
 }
 
+export function isStorageReference(source: any): source is StorageReference {
+  return isObject(source) && typeof source.bucket === 'string'
+}
+
 /**
  * Wraps a function so it gets called only once
  * @param fn Function to be called once

src/ssr/initialState.ts

@@ -5,12 +5,14 @@ import {
   DocumentReference,
   Query as FirestoreQuery,
 } from 'firebase/firestore'
+import { StorageReference } from 'firebase/storage'
 import { InjectionKey } from 'vue'
 import { useFirebaseApp } from '../app'
 import {
   isDatabaseReference,
   isFirestoreDataReference,
   isFirestoreQuery,
+  isStorageReference,
   _FirestoreDataSource,
   _Nullable,
 } from '../shared'
@@ -21,10 +23,10 @@ export interface SSRStore {
   // rtdb data
   r: Record<string, unknown>
 
-  // storage
-  s: Record<string, unknown>
+  // storage urls and metadata
+  s: Record<string, string>
 
-  // auth data
+  // auth user
   u: Record<string, unknown>
 }
 
@@ -55,7 +57,7 @@ export function useSSRInitialState(
 
 export function getInitialValue(
   dataSource: _Nullable<
-    _FirestoreDataSource | DatabaseReference | DatabaseQuery
+    _FirestoreDataSource | DatabaseReference | DatabaseQuery | StorageReference
   >,
   ssrKey: string | undefined,
   fallbackValue: unknown
@@ -77,7 +79,7 @@ export function getInitialValue(
 
 export function deferInitialValueSetup(
   dataSource: _Nullable<
-    _FirestoreDataSource | DatabaseReference | DatabaseQuery
+    _FirestoreDataSource | DatabaseReference | DatabaseQuery | StorageReference
   >,
   ssrKey: string | undefined | null,
   promise: Promise<unknown>
@@ -99,11 +101,17 @@ export function deferInitialValueSetup(
 }
 
 function getDataSourceInfo(
-  dataSource: _FirestoreDataSource | DatabaseReference | DatabaseQuery
+  dataSource:
+    | _FirestoreDataSource
+    | DatabaseReference
+    | DatabaseQuery
+    | StorageReference
 ) {
   return isFirestoreDataReference(dataSource) || isFirestoreQuery(dataSource)
     ? (['f', dataSource.path] as const)
     : isDatabaseReference(dataSource)
     ? (['r', dataSource.toString()] as const)
+    : isStorageReference(dataSource)
+    ? (['s', dataSource.toString()] as const)
     : []
 }

src/ssr/plugin.ts

@@ -5,6 +5,7 @@ import {
   DocumentReference,
   Query as FirestoreQuery,
 } from 'firebase/firestore'
+import { StorageReference } from 'firebase/storage'
 import { useFirebaseApp, _FirebaseAppInjectionKey } from '../app'
 import { getDataSourcePath, noop } from '../shared'
 import { deferInitialValueSetup } from './initialState'
@@ -24,7 +25,8 @@ export function addPendingPromise(
     | DocumentReference<unknown>
     | FirestoreQuery<unknown>
     | CollectionReference<unknown>
-    | DatabaseQuery,
+    | DatabaseQuery
+    | StorageReference,
   ssrKey?: string | null | undefined
 ) {
   const app = useFirebaseApp()

src/storage/index.ts

@@ -11,6 +11,7 @@ import {
   UploadTaskSnapshot,
   StorageError,
   SettableMetadata,
+  FullMetadata,
 } from 'firebase/storage'
 import {
   computed,
@@ -26,6 +27,8 @@ import {
 } from 'vue'
 import { useFirebaseApp } from '../app'
 import { noop, _MaybeRef, _Nullable } from '../shared'
+import { getInitialValue } from '../ssr/initialState'
+import { addPendingPromise } from '../ssr/plugin'
 
 /**
  * Retrieves the Storage instance.
@@ -45,8 +48,15 @@ export function useStorage(name?: string) {
 export function useStorageUrl(
   storageRef: _MaybeRef<_Nullable<StorageReference>>
 ) {
+  const initialSourceValue = unref(storageRef)
   const url = ref<string | null>()
+  url.value = getInitialValue(
+    initialSourceValue,
+    undefined,
+    url.value
+  ) as string
   const promise = ref<Promise<string | null>>(Promise.resolve(null))
+  let removePendingPromise = noop
 
   function refresh() {
     const storageSource = unref(storageRef)
@@ -65,9 +75,15 @@ export function useStorageUrl(
     watch(storageRef, refresh)
   }
 
+  // SSR
+  if (initialSourceValue) {
+    removePendingPromise = addPendingPromise(promise.value, initialSourceValue)
+  }
+
+  if (getCurrentScope()) {
+    onScopeDispose(removePendingPromise)
+  }
   if (getCurrentInstance()) {
-    // TODO: rework API to allow adding with a custom group key and key
-    // addPendingPromise(promise)
     onServerPrefetch(() => promise.value)
   }
 
@@ -83,11 +99,20 @@ export function useStorageUrl(
 export function useStorageMetadata(
   storageRef: _MaybeRef<_Nullable<StorageReference>>
 ) {
-  // TODO: retrieve global data from  local store
-  const metadata = shallowRef<UploadMetadata | null>()
-  const promise = shallowRef<Promise<UploadMetadata | null>>(
+  const initialSourceValue = unref(storageRef)
+  const metadata = shallowRef<FullMetadata | null>()
+  if (initialSourceValue) {
+    metadata.value = getInitialValue(
+      initialSourceValue,
+      // 'm ' is a prefix to differentiate from urls since both are stored in the same object
+      'm ' + initialSourceValue.toString(),
+      metadata.value
+    ) as FullMetadata
+  }
+  const promise = shallowRef<Promise<FullMetadata | null>>(
     Promise.resolve(null)
   )
+  let removePendingPromise = noop
 
   function refresh() {
     const storageSource = unref(storageRef)
@@ -120,9 +145,15 @@ export function useStorageMetadata(
     watch(storageRef, refresh)
   }
 
+  // SSR
+  if (initialSourceValue) {
+    removePendingPromise = addPendingPromise(promise.value, initialSourceValue)
+  }
+
+  if (getCurrentScope()) {
+    onScopeDispose(removePendingPromise)
+  }
   if (getCurrentInstance()) {
-    // TODO: rework API to allow adding with a custom group key and key
-    // addPendingPromise(promise)
     onServerPrefetch(() => promise.value)
   }