fix: address ssr edge cases and rm context api

Author: codediodeio

README.md

@@ -2,6 +2,8 @@
 
 A minimal, yet powerful library that puts realtime Firebase data into Svelte stores. 
 
+Experimental! Do not use in production.
+
 ```svelte
 <!-- 1. 🔥 Firebase App -->
 <FirebaseApp {auth} {firestore}>
@@ -301,3 +303,4 @@ These components can be combined to build complex realtime apps. It's especially
 - This library should only run the the client, it is not for server-side data fetching. 
 - Requires Firebase v9 or greater. 
 - I've have not been able to get TS generics to work right in the components yet, so no intellisense on the `data` slot prop. 
+- How should we bundle it properly?

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltefire",
-	"version": "0.2.1",
+	"version": "0.2.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "svelte-kit sync && svelte-package",
@@ -20,10 +20,8 @@
 		"tslib": "^2.4.1",
 		"typescript": "^4.9.3",
 		"vite": "^4.0.0",
-		"vitest": "^0.25.3"
-	},
-	"type": "module",
-	"dependencies": {
+		"vitest": "^0.25.3",
 		"firebase": "^9.15.0"
-	}
+	},
+	"type": "module"
 }

src/lib/Collection.svelte

@@ -4,8 +4,7 @@
     Firestore,
     Query,
   } from 'firebase/firestore';
-  import { getContext } from 'svelte';
-  import { collectionStore, key } from './stores';
+  import { collectionStore, sdk } from './stores';
 
   // TODO figure out how to make generics work
   // current setup will not work without mandatory startWith value
@@ -16,14 +15,12 @@
   // }
 
   interface $$Slots {
-    default: { data: any[]; ref: CollectionReference | Query; count: number },
+    default: { data: any[]; ref: CollectionReference | Query | null; count: number },
     loading: {},
   }
 
-  const config = getContext<any>(key);
-
   export let ref: string | CollectionReference | Query;
-  export let firestore: Firestore = config.getFirestore();
+  export let firestore: Firestore = $sdk?.firestore;
   export let startWith: any = undefined;
 
   let store = collectionStore(firestore, ref, startWith);

src/lib/Doc.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { DocumentReference, Firestore } from 'firebase/firestore';
-  import { getContext } from 'svelte';
-  import { docStore, key } from './stores';
+  import { docStore, sdk } from './stores';
 
   // TODO figure out how to make generics work
   // code below will not work without mandatory startWith value
@@ -13,14 +12,12 @@
   // }
 
   interface $$Slots {
-    default: { data: any; ref: DocumentReference },
+    default: { data: any; ref: DocumentReference | null },
     loading: {},
   }
 
-  const config = getContext<any>(key);
-
   export let ref: string | DocumentReference;
-  export let firestore: Firestore = config?.getFirestore();
+  export let firestore: Firestore = $sdk?.firestore;
   export let startWith: any = undefined;
 
   let store = docStore(firestore, ref, startWith);

src/lib/FirebaseApp.svelte

@@ -1,21 +1,12 @@
 <script lang="ts">
     import type { Auth } from 'firebase/auth';
     import type { Firestore } from 'firebase/firestore';
-    import { onDestroy, setContext } from 'svelte';
-    import { key } from './stores';
+    import { sdk } from './stores';
 
     export let firestore: Firestore;
     export let auth: Auth;
-
-    setContext(key, {
-	    getFirestore: () => firestore,
-        getAuth: () => auth,
-    });
-    
-    onDestroy(() => {
-        setContext(key, null);
-    });
-
+    sdk.set({ firestore, auth });
 </script>
 
-<slot />
+
+<slot />

src/lib/User.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
   import type { Auth, User } from "firebase/auth";
-  import { getContext } from "svelte";
-  import { key, userStore } from "./stores";
+  import { sdk, userStore } from "./stores";
 
   interface $$Slots {
     default: { user: User }
     signedOut: {}
   }
-  const config = getContext<any>(key);
-  export let auth: Auth = config?.getAuth();
+
+  export let auth: Auth = $sdk?.auth;
 
   const user = userStore(auth);
 </script>

src/lib/stores.ts

@@ -21,6 +21,17 @@ export function docStore<T>(
 ) {
   let unsubscribe: () => void;
 
+  // Fallback for SSR
+  if (!firestore || !globalThis.window) {
+    console.warn('Firestore is not initialized or not in browser');
+    const { subscribe } = writable(startWith);
+    return {
+      subscribe,
+      ref: null,
+      id: '',
+    }
+  }
+
   const docRef = typeof ref === 'string' ? doc(firestore, ref) : ref;
 
   const { subscribe } = writable<T | null>(startWith, (set) => {
@@ -51,6 +62,16 @@ export function collectionStore<T>(
 ) {
   let unsubscribe: () => void;
 
+  // Fallback for SSR
+  if (!firestore || !globalThis.window) {
+    console.warn('Firestore is not initialized or not in browser');
+    const { subscribe } = writable(startWith);
+    return {
+      subscribe,
+      ref: null,
+    }
+  }
+
   const colRef = typeof ref === 'string' ? collection(firestore, ref) : ref;
 
   const { subscribe } = writable(startWith, (set) => {
@@ -76,7 +97,15 @@ export function collectionStore<T>(
 export function userStore(auth: Auth) {
   let unsubscribe: () => void;
 
-  const { subscribe } = writable(auth.currentUser, (set) => {
+  if (!auth || !globalThis.window) {
+    console.warn('Auth is not initialized on not in browser');
+    const { subscribe } = writable(null);
+    return {
+      subscribe,
+    }
+  }
+
+  const { subscribe } = writable(auth?.currentUser ?? null, (set) => {
     unsubscribe = onAuthStateChanged(auth, (user) => {
       set(user);
     });
@@ -89,5 +118,5 @@ export function userStore(auth: Auth) {
   };
 }
 
-// Key for context
-export const key = Symbol();
+// SDK store for FirebaseApp comopnent
+export const sdk = writable<{ auth: Auth; firestore: Firestore }>();

src/routes/+page.svelte

@@ -27,6 +27,13 @@
 
 <FirebaseApp {auth} {firestore}>
 
+  <Doc ref="posts/test" startWith={{ content: 'sup'}} let:data={post}>
+    <p>{post.content}</p>
+    <div slot="loading">
+      <p>Loading...</p>
+    </div>
+  </Doc>
+
   <User let:user>
 
     <p>Hello {user?.uid}</p>  
@@ -40,7 +47,7 @@
 
     <h1>Your Posts</h1>
 
-    <Collection ref={makeQuery(user.uid)} let:data={posts} let:count>
+    <Collection ref={makeQuery(user.uid)} startWith={[]} let:data={posts} let:count>
 
       <p>You've made {count} posts</p>
 

src/routes/firebase.ts

@@ -4,7 +4,12 @@ import { getAuth } from "firebase/auth";
 
 
 const firebaseConfig = {
-
+    apiKey: "AIzaSyBOL3Y80Y6JASfwgvyq8IL6FlnrBQBN_0E",
+    authDomain: "testing-proj-b7c60.firebaseapp.com",
+    projectId: "testing-proj-b7c60",
+    storageBucket: "testing-proj-b7c60.appspot.com",
+    messagingSenderId: "665240273060",
+    appId: "1:665240273060:web:b81550e114a46af9116631"
 };
 
 // Initialize Firebase