Merge branch 'master' into feature/emulator-tests

Author: codediodeio

.github/workflows/run-tests.yml

@@ -16,7 +16,7 @@ jobs:
         with:
           node-version: 18
       - run: npm ci
-      - run: npx playwright install --with-deps
+      - run: npx playwright install --with-deps chromium
       - run: npx playwright test
       - uses: actions/upload-artifact@v3
         if: always()

README.md

@@ -279,6 +279,47 @@ Collections can also take a Firestore Query instead of a path:
 </Collection>
 ```
 
+### DownloadLink
+
+DownloadLink provides a `link` to download a file from Firebase Storage and its `reference`. 
+
+```svelte
+<DownloadLink ref={item} let:link let:ref>
+    <a href="{link}" download>Download {ref?.name}</a>
+</DownloadLink>
+```
+
+### StorageList
+
+StorageList provides a list of `items` and `prefixes` corresponding to the list of objects and sub-folders at a given Firebase Storage path. 
+
+```svelte
+<StorageList ref="/" let:list>
+    <ul>
+        {#if list === null}
+            <li>Loading...</li>
+        {:else if list.prefixes.length === 0 && list.items.length === 0}
+            <li>Empty</li>
+        {:else}
+          <!-- Listing the prefixes -->
+          {#each list.prefixes as prefix}
+              <li>
+                  {prefix.name}
+              </li>
+          {/each}
+          <!-- Listing the objects in the given folder -->
+          {#each list.items as item}
+              <li>
+                  {item.name}
+              </li>
+          {/each}
+        {/if}
+    </ul>
+</StorageList>
+```
+
+You can combine 
+
 ### Using Components Together
 
 These components can be combined to build complex realtime apps. It's especially powerful when fetching data that requires the current user's UID or a related document's path.

dist/components/Collection.svelte

@@ -1,4 +1,4 @@
-<script>import { collectionStore } from "../stores/firestore.js";
+<script generics="Data extends DocumentData">import { collectionStore } from "../stores/firestore.js";
 import { getFirebaseContext } from "../stores/sdk.js";
 export let ref;
 export let startWith = void 0;

dist/components/Collection.svelte.d.ts

@@ -1,26 +1,26 @@
 import { SvelteComponent } from "svelte";
-import type { CollectionReference, Firestore, Query } from 'firebase/firestore';
-declare const __propDef: {
-    props: {
-        ref: string | CollectionReference | Query;
-        startWith?: any;
+import type { CollectionReference, DocumentData, Firestore, Query } from "firebase/firestore";
+declare class __sveltets_Render<Data extends DocumentData> {
+    props(): {
+        ref: string | CollectionReference<Data> | Query<Data>;
+        startWith?: Data[] | undefined;
     };
-    events: {
+    events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
+    slots(): {
         default: {
-            data: any[];
-            ref: CollectionReference | Query | null;
+            data: Data[];
+            ref: CollectionReference<Data[]> | Query<Data[]> | null;
             count: number;
             firestore?: Firestore | undefined;
         };
         loading: {};
     };
-};
-export type CollectionProps = typeof __propDef.props;
-export type CollectionEvents = typeof __propDef.events;
-export type CollectionSlots = typeof __propDef.slots;
-export default class Collection extends SvelteComponent<CollectionProps, CollectionEvents, CollectionSlots> {
+}
+export type CollectionProps<Data extends DocumentData> = ReturnType<__sveltets_Render<Data>['props']>;
+export type CollectionEvents<Data extends DocumentData> = ReturnType<__sveltets_Render<Data>['events']>;
+export type CollectionSlots<Data extends DocumentData> = ReturnType<__sveltets_Render<Data>['slots']>;
+export default class Collection<Data extends DocumentData> extends SvelteComponent<CollectionProps<Data>, CollectionEvents<Data>, CollectionSlots<Data>> {
 }
 export {};

dist/components/Doc.svelte

@@ -1,12 +1,12 @@
-<script>import { docStore } from "../stores/firestore.js";
+<script generics="Data extends DocumentData">import { docStore } from "../stores/firestore.js";
 import { getFirebaseContext } from "../stores/sdk.js";
 export let ref;
 export let startWith = void 0;
 const { firestore } = getFirebaseContext();
 let store = docStore(firestore, ref, startWith);
 </script>
 
-{#if $store !== undefined}
+{#if $store !== undefined && $store !== null}
   <slot data={$store} ref={store.ref} {firestore} />
 {:else}
   <slot name="loading" />

dist/components/Doc.svelte.d.ts

@@ -1,25 +1,25 @@
 import { SvelteComponent } from "svelte";
-import type { DocumentReference, Firestore } from 'firebase/firestore';
-declare const __propDef: {
-    props: {
-        ref: string | DocumentReference;
-        startWith?: any;
+import type { DocumentData, DocumentReference, Firestore } from "firebase/firestore";
+declare class __sveltets_Render<Data extends DocumentData> {
+    props(): {
+        ref: string | DocumentReference<Data>;
+        startWith?: Data | undefined;
     };
-    events: {
+    events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
+    slots(): {
         default: {
-            data: any;
-            ref: DocumentReference | null;
+            data: Data;
+            ref: DocumentReference<Data> | null;
             firestore?: Firestore | undefined;
         };
         loading: {};
     };
-};
-export type DocProps = typeof __propDef.props;
-export type DocEvents = typeof __propDef.events;
-export type DocSlots = typeof __propDef.slots;
-export default class Doc extends SvelteComponent<DocProps, DocEvents, DocSlots> {
+}
+export type DocProps<Data extends DocumentData> = ReturnType<__sveltets_Render<Data>['props']>;
+export type DocEvents<Data extends DocumentData> = ReturnType<__sveltets_Render<Data>['events']>;
+export type DocSlots<Data extends DocumentData> = ReturnType<__sveltets_Render<Data>['slots']>;
+export default class Doc<Data extends DocumentData> extends SvelteComponent<DocProps<Data>, DocEvents<Data>, DocSlots<Data>> {
 }
 export {};

dist/components/FirebaseApp.svelte

@@ -1,7 +1,8 @@
 <script>import { setFirebaseContext } from "../stores/sdk.js";
 export let firestore;
 export let auth;
-setFirebaseContext({ firestore, auth });
+export let storage;
+setFirebaseContext({ firestore, auth, storage });
 </script>
 
 <slot />

dist/components/FirebaseApp.svelte.d.ts

@@ -1,10 +1,12 @@
 import { SvelteComponent } from "svelte";
 import type { Auth } from "firebase/auth";
 import type { Firestore } from "firebase/firestore";
+import type { FirebaseStorage } from "firebase/storage";
 declare const __propDef: {
     props: {
         firestore: Firestore;
         auth: Auth;
+        storage: FirebaseStorage;
     };
     events: {
         [evt: string]: CustomEvent<any>;

dist/stores/firestore.d.ts

@@ -13,13 +13,13 @@ interface DocStore<T> {
 export declare function docStore<T = any>(firestore: Firestore, ref: string | DocumentReference<T>, startWith?: T): DocStore<T>;
 interface CollectionStore<T> {
     subscribe: (cb: (value: T | []) => void) => void | (() => void);
-    ref: CollectionReference | Query | null;
+    ref: CollectionReference<T> | Query<T> | null;
 }
 /**
  * @param  {Firestore} firestore firebase firestore instance
  * @param  {string|Query|CollectionReference} ref collection path, reference, or query
  * @param  {[]} startWith optional default data
  * @returns a store with realtime updates on collection data
  */
-export declare function collectionStore<T>(firestore: Firestore, ref: string | Query | CollectionReference, startWith?: T[]): CollectionStore<T[]>;
+export declare function collectionStore<T>(firestore: Firestore, ref: string | Query<T> | CollectionReference<T>, startWith?: T[]): CollectionStore<T[]>;
 export {};

dist/stores/firestore.js

@@ -27,7 +27,9 @@ export function docStore(firestore, ref, startWith) {
             id: "",
         };
     }
-    const docRef = typeof ref === 'string' ? doc(firestore, ref) : ref;
+    const docRef = typeof ref === "string"
+        ? doc(firestore, ref)
+        : ref;
     const { subscribe } = writable(startWith, (set) => {
         unsubscribe = onSnapshot(docRef, (snapshot) => {
             set(snapshot.data() ?? null);