fix: add firebaseSDK to store args

Author: codediodeio

README.md

@@ -38,28 +38,21 @@ Svelte makes it possible to dramatically simplify the way developers work with F
 
 ## Quick Start
 
-1. Install Firebase `npm i firebase` v9+ and initialize it in a layout `+layout.svelte`:
+1. Install Firebase npm i firebase v9+ and initialize it in a file like lib/firebase.js:
 
 ```
 npm i sveltefire firebase
 ```
 
-```svelte
-<script lang="ts">
-    import { FirebaseApp } from 'sveltefire';
-    import { initializeApp } from 'firebase/app';
-    import { getFirestore } from 'firebase/firestore';
-    import { getAuth } from 'firebase/auth';
-
-    // Initialize Firebase
-    const app = initializeApp(/* your firebase config */);
-    const db = getFirestore(app);
-    const auth = getAuth(app);
-</script>
-
-<FirebaseApp {auth} {firestore}>
-    <slot />
-</FirebaseApp>
+```ts
+import { initializeApp } from 'firebase/app';
+import { getFirestore } from 'firebase/firestore';
+import { getAuth } from 'firebase/auth';
+
+// Initialize Firebase
+const app = initializeApp(/* your firebase config */);
+export const db = getFirestore(app);
+export const auth = getAuth(app);
 ```
 
 2. Get the Current user
@@ -68,7 +61,7 @@ npm i sveltefire firebase
 <script>
   import { auth } from '$lib/firebase';
   import { userStore } from 'sveltefire';
-  const user = userStore();
+  const user = userStore(auth);
 </script>
 
 Hello {$user?.uid}
@@ -83,7 +76,7 @@ Use the `$` as much as you want - it will only result in one Firebase read reque
   import { firestore } from '$lib/firebase';
   import { docStore } from 'sveltefire';
 
-  const post = docStore('posts/test');
+  const post = docStore(firestore, 'posts/test');
 </script>
 
 {$post?.content}
@@ -105,7 +98,7 @@ Listen to the current user. Render UI conditionally based on the auth state:
 <script>
   import { userStore } from 'sveltefire';
 
-  const user = userStore();
+  const user = userStore(auth);
 </script>
 
 {#if $user}
@@ -123,11 +116,11 @@ Subscribe to realtime data. The store will unsubscribe automatically to avoid un
 <script>
   import { docStore, collectionStore } from 'sveltefire';
 
-  const post = docStore('posts/test');
+  const post = docStore(firestore, 'posts/test');
 
   // OR 
 
-  const posts = collectionStore('posts');
+  const posts = collectionStore(firestore, 'posts');
 </script>
 
 {$post?.content}
@@ -145,8 +138,8 @@ interface Post {
     title: string;
     content: string;
 }
-const post = docStore<Post>('posts/test');
-const posts = collectionStore<Post>('posts'); 
+const post = docStore<Post>(firestore, 'posts/test');
+const posts = collectionStore<Post>(firestore, 'posts'); 
 ```
 
 ## SSR
@@ -174,7 +167,7 @@ Second, pass the server data as the `startWith` value to a store. This will bypa
 export let data: PageData;
 
 // Just give the store a startWith value 
-const post = docStore('posts/test', data.post);
+const post = docStore(firestore, 'posts/test', data.post);
 ```
 
 ## Realtime Components
@@ -183,9 +176,10 @@ In addition to stores, SvelteFire provides a set of components that can build co
 
 ### FirebaseApp
 
-The `FirebaseApp` component puts the FirebaseSDK into Svelte context. This avoids the need to pass `auth` and `firestore` down to every component/store. It is typically placed in root layout.
+The `FirebaseApp` component puts the FirebaseSDK into Svelte context. This avoids the need to pass `auth` and `firestore` down to every component. It is typically placed in root layout.
 
 ```svelte
+<!-- +layout.svelte -->
 <script>
   // Initialize Firebase...
   const db = getFirestore(app);
@@ -200,7 +194,7 @@ The `FirebaseApp` component puts the FirebaseSDK into Svelte context. This avoid
 </FirebaseApp>
 ```
 
-You can easily access the Firebase SDK in any component via context. This is useful when using the Firebase SDK directly, which requires the SDK as an argument.
+You can use Svelte's context API to access the Firebase SDK in any component.
 
 ```svelte
 <script>
@@ -295,7 +289,6 @@ These components can be combined to build complex realtime apps. It's especially
   <SignedIn let:user>
       <p>UID: {user.uid}</p>
       
-
       <h3>Profile</h3>
       <Doc ref={`posts/${user.uid}`} let:data={profile} let:ref={profileRef}>
 
@@ -313,9 +306,11 @@ These components can be combined to build complex realtime apps. It's especially
 
         <div slot="loading">Loading Profile...</div>
       </Doc>
-
-      <div slot="signedOut">Signed out</div>
   </SignedIn>
+
+  <SignedOut>
+      <p>Sign in to see your profile</p>
+  </SignedOut>
 </FirebaseApp>
 ```
 

dist/components/Collection.svelte

@@ -1,11 +1,13 @@
 <script>import { collectionStore } from "../stores/firestore.js";
+import { getFirebaseContext } from "../stores/sdk.js";
 export let ref;
 export let startWith = void 0;
-let store = collectionStore(ref, startWith);
+const { firestore } = getFirebaseContext();
+let store = collectionStore(firestore, ref, startWith);
 </script>
 
 {#if $store !== undefined}
-  <slot data={$store} ref={store.ref} count={$store?.length ?? 0} />
+  <slot data={$store} ref={store.ref} count={$store?.length ?? 0} {firestore} />
 {:else}
   <slot name="loading" />
 {/if}

dist/components/Collection.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { CollectionReference, Query } from 'firebase/firestore';
+import type { CollectionReference, Firestore, Query } from 'firebase/firestore';
 declare const __propDef: {
     props: {
         ref: string | CollectionReference | Query;
@@ -13,6 +13,7 @@ declare const __propDef: {
             data: any[];
             ref: CollectionReference | Query | null;
             count: number;
+            firestore?: Firestore | undefined;
         };
         loading: {};
     };

dist/components/Doc.svelte

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

dist/components/Doc.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { DocumentReference } from 'firebase/firestore';
+import type { DocumentReference, Firestore } from 'firebase/firestore';
 declare const __propDef: {
     props: {
         ref: string | DocumentReference;
@@ -12,6 +12,7 @@ declare const __propDef: {
         default: {
             data: any;
             ref: DocumentReference | null;
+            firestore?: Firestore | undefined;
         };
         loading: {};
     };

dist/components/FirebaseApp.svelte

@@ -4,5 +4,4 @@ export let auth;
 setFirebaseContext({ firestore, auth });
 </script>
 
-
 <slot />

dist/components/FirebaseApp.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
-import type { Auth } from 'firebase/auth';
-import type { Firestore } from 'firebase/firestore';
+import type { Auth } from "firebase/auth";
+import type { Firestore } from "firebase/firestore";
 declare const __propDef: {
     props: {
         firestore: Firestore;

dist/components/SignedIn.svelte

@@ -2,7 +2,7 @@
 import { getFirebaseContext } from "../stores/sdk.js";
 import { signOut } from "firebase/auth";
 const auth = getFirebaseContext().auth;
-const user = userStore();
+const user = userStore(auth);
 </script>
 
   {#if $user}

dist/components/SignedOut.svelte

@@ -1,8 +1,7 @@
 <script>import { getFirebaseContext } from "../stores/sdk.js";
 import { userStore } from "../stores/auth.js";
-getFirebaseContext;
 const auth = getFirebaseContext().auth;
-const user = userStore();
+const user = userStore(auth);
 </script>
 
   {#if !$user}

dist/components/User.svelte

@@ -1,5 +1,7 @@
 <script>import { userStore } from "../stores/auth.js";
-const user = userStore();
+import { getFirebaseContext } from "../index.js";
+const auth = getFirebaseContext().auth;
+const user = userStore(auth);
 </script>
 
 {#if $user}

dist/stores/auth.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="svelte" />
+import { type Auth } from "firebase/auth";
 /**
+ * @param  {Auth} auth firebase auth instance
  * @param  {any} startWith optional default data. Useful for server-side cookie-based auth
  * @returns a store with the current firebase user
  */
-export declare function userStore(startWith?: null): {
+export declare function userStore(auth: Auth, startWith?: null): {
     subscribe: (this: void, run: import("svelte/store").Subscriber<import("@firebase/auth").User | null>, invalidate?: import("svelte/store").Invalidator<import("@firebase/auth").User | null> | undefined) => import("svelte/store").Unsubscriber;
 };

dist/stores/auth.js

@@ -2,12 +2,12 @@ import { writable } from "svelte/store";
 import { getFirebaseContext } from "./sdk.js";
 import { onAuthStateChanged } from "firebase/auth";
 /**
+ * @param  {Auth} auth firebase auth instance
  * @param  {any} startWith optional default data. Useful for server-side cookie-based auth
  * @returns a store with the current firebase user
  */
-export function userStore(startWith = null) {
+export function userStore(auth, startWith = null) {
     let unsubscribe;
-    const { auth } = getFirebaseContext();
     // Fallback for SSR
     if (!globalThis.window) {
         const { subscribe } = writable(startWith);

dist/stores/firestore.d.ts

@@ -1,28 +1,25 @@
-import type { Query, CollectionReference, DocumentReference, DocumentData } from "firebase/firestore";
-import type { Readable } from "svelte/motion";
+import type { Query, CollectionReference, DocumentReference, Firestore } from "firebase/firestore";
 interface DocStore<T> {
     subscribe: (cb: (value: T | null) => void) => void | (() => void);
-    ref: DocumentReference | null;
+    ref: DocumentReference<T> | null;
     id: string;
 }
 /**
+ * @param  {Firestore} firestore firebase firestore instance
  * @param  {string|DocumentReference} ref document path or reference
  * @param  {T} startWith optional default data
  * @returns a store with realtime updates on document data
  */
-export declare function docStore<T>(ref: string | DocumentReference, startWith?: T): 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;
 }
 /**
+ * @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>(ref: string | Query | CollectionReference, startWith?: T[]): CollectionStore<T[]>;
-/**
- * experimental, fetch document based on curret user
- */
-export declare function userDataStore<T = DocumentData>(collectionPath?: string): Readable<T | null>;
+export declare function collectionStore<T>(firestore: Firestore, ref: string | Query | CollectionReference, startWith?: T[]): CollectionStore<T[]>;
 export {};

dist/stores/firestore.js

@@ -1,15 +1,12 @@
-import { derived, writable } from "svelte/store";
-import { doc, collection, onSnapshot, query, where } from "firebase/firestore";
-import { onAuthStateChanged } from "firebase/auth";
-import { getFirebaseContext } from "./sdk.js";
-import { userStore } from "./auth.js";
+import { writable } from "svelte/store";
+import { doc, collection, onSnapshot } from "firebase/firestore";
 /**
+ * @param  {Firestore} firestore firebase firestore instance
  * @param  {string|DocumentReference} ref document path or reference
  * @param  {T} startWith optional default data
  * @returns a store with realtime updates on document data
  */
-export function docStore(ref, startWith) {
-    const { firestore } = getFirebaseContext();
+export function docStore(firestore, ref, startWith) {
     let unsubscribe;
     // Fallback for SSR
     if (!globalThis.window) {
@@ -30,7 +27,7 @@ export function docStore(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);
@@ -44,12 +41,12 @@ export function docStore(ref, startWith) {
     };
 }
 /**
+ * @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 function collectionStore(ref, startWith = []) {
-    const { firestore } = getFirebaseContext();
+export function collectionStore(firestore, ref, startWith = []) {
     let unsubscribe;
     // Fallback for SSR
     if (!globalThis.window) {
@@ -83,15 +80,3 @@ export function collectionStore(ref, startWith = []) {
         ref: colRef,
     };
 }
-/**
- * experimental, fetch document based on curret user
- */
-export function userDataStore(collectionPath = "users") {
-    const user = userStore();
-    return derived(user, ($user, set) => {
-        if (!$user)
-            return set(null);
-        const fullPath = `${collectionPath}/${$user.uid}`;
-        return docStore(fullPath).subscribe(set);
-    });
-}