- Created a download link component

- Created a storage list component

Author: JeremyVoisin

firebase.json

@@ -6,6 +6,9 @@
     "firestore": {
       "port": 8080
     },
+    "storage": {
+      "port": 9199
+    },
     "hosting": {
       "port": 5000
     },
@@ -14,6 +17,9 @@
     },
     "singleProjectMode": true
   },
+  "storage": {
+    "rules": "storage.rules"
+  },
   "hosting": {
     "public": "docs/dist",
     "ignore": [

package-lock.json

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { downloadUrlStore } from '$lib/stores/storage.js';
+    import { getFirebaseContext } from '$lib/stores/sdk.js';
+    import type { FirebaseStorage, StorageReference } from 'firebase/storage';
+
+    export let ref: string | StorageReference;
+
+    const { storage } = getFirebaseContext();
+    const store = downloadUrlStore(storage!, ref);
+
+    interface $$Slots {
+        default: { link: string | null; ref: StorageReference | null; storage?: FirebaseStorage },
+        loading: {},
+    }
+</script>
+
+{#if $store !== undefined}
+    <slot link={$store} ref={store.reference} {storage}/>
+{:else}
+    <slot name="loading" />
+{/if}
+

src/lib/components/DownloadLink.svelte

@@ -2,11 +2,13 @@
   import { setFirebaseContext } from "$lib/stores/sdk.js";
   import type { Auth } from "firebase/auth";
   import type { Firestore } from "firebase/firestore";
+  import type { FirebaseStorage } from "firebase/storage";
 
   export let firestore: Firestore;
   export let auth: Auth;
+  export let storage: FirebaseStorage;
 
-  setFirebaseContext({ firestore, auth });
+  setFirebaseContext({ firestore, auth, storage });
 </script>
 
 <slot />

src/lib/components/FirebaseApp.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { storageListStore } from '$lib/stores/storage.js';
+    import { getFirebaseContext } from '$lib/stores/sdk.js';
+    import type { FirebaseStorage, ListResult, StorageReference } from 'firebase/storage';
+
+    export let ref: string | StorageReference;
+
+    const { storage } = getFirebaseContext();
+    const listStore = storageListStore(storage!, ref);
+
+    interface $$Slots {
+        default: { list: ListResult | null; ref: StorageReference | null; storage?: FirebaseStorage },
+        loading: {},
+    }
+</script>
+
+{#if $listStore !== undefined}
+    <slot list={$listStore} ref={listStore.reference} {storage} />
+{:else}
+    <slot name="loading" />
+{/if}
+

src/lib/components/StorageList.svelte

@@ -2,11 +2,13 @@ import { writable } from "svelte/store";
 import type { Firestore } from "firebase/firestore";
 import type { Auth } from "firebase/auth";
 import { getContext, setContext } from "svelte";
+import type { FirebaseStorage } from "firebase/storage";
 
 
 export interface FirebaseSDKContext {
   auth?: Auth;
   firestore?: Firestore;
+  storage?: FirebaseStorage;
 }
 
 export const contextKey = "firebase";

src/lib/stores/sdk.ts

@@ -0,0 +1,118 @@
+import { writable } from "svelte/store";
+import { getDownloadURL, list, ref } from "firebase/storage";
+
+import type { 
+  StorageReference,
+  FirebaseStorage,
+  ListResult,
+} from "firebase/storage";
+
+const defaultListResult: ListResult = {
+  prefixes: [],
+  items: [],
+};
+
+interface StorageListStore {
+  subscribe: (cb: (value: ListResult) => void) => void | (() => void);
+  reference: StorageReference | null;
+}
+
+/**
+ * @param  {FirebaseStorage} storage firebase storage instance
+ * @param  {string|StorageReference} reference file or storage item path or reference
+ * @param  {{prefixes:[], items:[]}} startWith optional default data
+ * @returns a store with the list result
+ */
+export function storageListStore(
+  storage: FirebaseStorage,
+  reference: string | StorageReference,
+  startWith: ListResult = defaultListResult
+): StorageListStore {
+
+  // Fallback for SSR
+  if (!globalThis.window) {
+    const { subscribe } = writable(startWith);
+    return {
+      subscribe,
+      reference: null,
+    };
+  }
+
+  // Fallback for missing SDK
+  if (!storage) {
+    console.warn(
+      "Cloud Storage is not initialized. Are you missing FirebaseApp as a parent component?"
+    );
+    const { subscribe } = writable(defaultListResult);
+    return {
+      subscribe,
+      reference: null,
+    };
+  }
+
+  const storageRef = typeof reference === "string" ? ref(storage, reference) : reference;
+
+  const { subscribe } = writable(startWith, (set) => {
+    list(storageRef).then((snapshot) => {
+      set(snapshot);
+    });
+  });
+
+  return {
+    subscribe,
+    reference: storageRef,
+  };
+}
+
+interface DownloadUrlStore {
+  subscribe: (cb: (value: string | null) => void) => void | (() => void);
+  reference: StorageReference | null;
+}
+
+/**
+ * @param  {FirebaseStorage} storage firebase storage instance
+ * @param  {string|StorageReference} reference file or storage item path or reference
+ * @param  {null} startWith optional default data
+ * @returns a store with the list result
+ */
+export function downloadUrlStore(
+  storage: FirebaseStorage,
+  reference: string | StorageReference,
+  startWith: string | null = null
+): DownloadUrlStore {
+
+  // Fallback for SSR
+  if (!globalThis.window) {
+    const { subscribe } = writable(startWith);
+    return {
+      subscribe,
+      reference: null,
+    };
+  }
+
+  // Fallback for missing SDK
+  if (!storage) {
+    console.warn(
+      "Cloud Storage is not initialized. Are you missing FirebaseApp as a parent component?"
+    );
+    const { subscribe } = writable(null);
+    return {
+      subscribe,
+      reference: null,
+    };
+  }
+
+  const storageRef = typeof reference === "string" ? ref(storage, reference) : reference;
+
+  const { subscribe } = writable(startWith, (set) => {
+    getDownloadURL(storageRef).then((snapshot) => {
+      set(snapshot);
+    });
+  });
+
+  return {
+    subscribe,
+    reference: storageRef,
+  };
+}
+

src/lib/stores/storage.ts

@@ -1,10 +1,9 @@
 <script lang="ts">
     import FirebaseApp from '$lib/components/FirebaseApp.svelte';
-    import { db as firestore, auth } from './firebase.js';
+    import { db as firestore, auth, storage } from './firebase.js';
 
 </script>
 
-<FirebaseApp {auth} {firestore}>
-
+<FirebaseApp {auth} {firestore} {storage}>
     <slot />
 </FirebaseApp>

src/routes/+layout.svelte

@@ -12,8 +12,10 @@
   <li><a href="/auth-test">Auth Test</a></li>
   <li><a href="/firestore-test">Firestore Test</a></li>
   <li><a href="/ssr-test">SSR Test</a></li>
+  <li><a href="/storage-test">Storage Test</a></li>
 </ul>
 <ul>
   <li data-testid="auth">Auth Context: {!!ctx.auth}</li>
   <li data-testid="firestore">Firestore Context: {!!ctx.firestore}</li>
+  <li data-testid="firestore">Storage Context: {!!ctx.storage}</li>
 </ul>

src/routes/+page.svelte

@@ -2,8 +2,6 @@
   import SignedIn from '$lib/components/SignedIn.svelte';
   import SignedOut from '$lib/components/SignedOut.svelte';
   import { signInAnonymously } from "firebase/auth";
-
-
 </script>
 
 <h1>Auth Test</h1>