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);

dist/stores/sdk.d.ts

@@ -1,8 +1,10 @@
 import type { Firestore } from "firebase/firestore";
 import type { Auth } from "firebase/auth";
+import type { FirebaseStorage } from "firebase/storage";
 export interface FirebaseSDKContext {
     auth?: Auth;
     firestore?: Firestore;
+    storage?: FirebaseStorage;
 }
 export declare const contextKey = "firebase";
 export declare function setFirebaseContext(sdks: FirebaseSDKContext): void;

docs/src/pages/firestore/collection-store.md

@@ -7,7 +7,7 @@ layout: ../../layouts/MainLayout.astro
 
 # collectionStore
 
-Subscribes to Firestore collection data and listens to realtime updates. 
+Subscribes to Firestore collection data and listens to real-time updates. 
 
 ### Parameters
 
@@ -22,10 +22,10 @@ Subscribes to Firestore collection data and listens to realtime updates.
     import { collectionStore } from 'sveltefire';
     import { firestore } from '$lib/firebase'; // your firestore instance
 
-    const post = collectionStore(firestore, 'posts');
+    const posts = collectionStore(firestore, 'posts');
 </script>
 
-{#each $post as post}
+{#each $posts as post}
     <p>{post.title}</p>
 {/each}
 ```
@@ -56,8 +56,10 @@ With TypeScript:
         content?: string;
     }
 
-    const post = collectionStore<Post>(firestore, 'posts');
+    const posts = collectionStore<Post[]>(firestore, 'posts');
 </script>
 
-{$post?.title}
-```
+{#each $posts as post}
+    <p>{post.title}</p>
+{/each}
+```

docs/src/pages/guide/start.md

@@ -18,7 +18,7 @@ npm i sveltefire firebase
 
 ### 2. Initialize
 
-Initialize Firebase and add the `FirebaseApp` component to the component tree. Typically, this is done in the root `+layout.svelte` file to access Firebase in all pages. 
+Initialize Firebase and add the `FirebaseApp` component to the component tree. Typically, this is done in the root `+layout.svelte` file to access Firebase on all pages. 
 
 #### +layout.svelte
 ```svelte
@@ -30,7 +30,7 @@ Initialize Firebase and add the `FirebaseApp` component to the component tree. T
 
     // Initialize Firebase
     const app = initializeApp(/* your firebase config */);
-    const db = getFirestore(app);
+    const firestore = getFirestore(app);
     const auth = getAuth(app);
 </script>
 

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

@@ -1,12 +1,10 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
+import { defineConfig } from '@playwright/test';
 
-const config: PlaywrightTestConfig = {
+export default defineConfig({
 	webServer: {
 		command: 'NODE_ENV=ci npm run build && npm run preview',
 		port: 4173
 	},
 	testDir: 'tests',
 	testMatch: /(.+\.)?(test|spec)\.[jt]s/
-};
-
-export default config;
+});

playwright.config.ts

@@ -1,32 +1,29 @@
-<script lang="ts">
+<script lang="ts" generics="Data extends DocumentData">
   import type {
     CollectionReference,
+    DocumentData,
     Firestore,
     Query,
-  } from 'firebase/firestore';
-  import { collectionStore } from '../stores/firestore.js';
-  import { getFirebaseContext } from '../stores/sdk.js';
+  } from "firebase/firestore";
+  import { collectionStore } from "../stores/firestore.js";
+  import { getFirebaseContext } from "../stores/sdk.js";
 
-  // TODO figure out how to make generics work
-  // current setup will not work without mandatory startWith value
-  // type T = $$Generic;
-
-  // interface $$Slots {
-  //   default: { data: T[], ref: CollectionReference | Query, count: number }
-  // }
-
-  export let ref: string | CollectionReference | Query;
-  export let startWith: any = undefined;
+  export let ref: string | CollectionReference<Data> | Query<Data>;
+  export let startWith: Data[] | undefined = undefined;
 
   const { firestore } = getFirebaseContext();
 
-  let store = collectionStore(firestore!, ref, startWith);
+  let store = collectionStore<Data>(firestore!, ref, startWith);
 
   interface $$Slots {
-    default: { data: any[]; ref: CollectionReference | Query | null; count: number; firestore?: Firestore },
-    loading: {},
+    default: {
+      data: Data[];
+      ref: CollectionReference<Data[]> | Query<Data[]> | null;
+      count: number;
+      firestore?: Firestore;
+    };
+    loading: {};
   }
-
 </script>
 
 {#if $store !== undefined}