feat: rtdb-test uses posts as example

Author: ItsAlexousd

src/lib/components/DataList.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-  import { listStore } from "../stores/realtimeDatabase.js";
+  import { listStore } from "../stores/rtdb.js";
   import { getFirebaseContext } from "../stores/sdk.js";
   import type { DatabaseReference, Database } from "firebase/database";
 
-  export let path: string;
+  export let ref: string;
   export let startWith: any[] = [];
 
   const { rtdb } = getFirebaseContext();
-  let store = listStore(rtdb!, path, startWith);
+  let store = listStore(rtdb!, ref, startWith);
 
   interface $$Slots {
     default: {

src/lib/components/DataRef.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-  import { refStore } from "../stores/realtimeDatabase.js";
+  import { refStore } from "../stores/rtdb.js";
   import { getFirebaseContext } from "../stores/sdk.js";
   import type { DatabaseReference, Database } from "firebase/database";
 
-  export let path: string;
+  export let ref: string;
   export let startWith: any = undefined;
 
   const { rtdb } = getFirebaseContext();
-  let store = refStore(rtdb!, path, startWith);
+  let store = refStore(rtdb!, ref, startWith);
 
   interface $$Slots {
     default: { data: any; ref: DatabaseReference | null; rtdb?: Database };

src/lib/index.js

@@ -9,7 +9,7 @@ import SignedIn from "./components/SignedIn.svelte";
 import SignedOut from "./components/SignedOut.svelte";
 import { userStore } from "./stores/auth.js";
 import { docStore, collectionStore } from "./stores/firestore.js";
-import { refStore, listStore } from './stores/realtimeDatabase.js';
+import { refStore, listStore } from './stores/rtdb.js';
 import { getFirebaseContext } from "./stores/sdk.js";
 
 export {

src/lib/stores/realtimeDatabase.ts src/lib/stores/rtdb.tssrc/lib/stores/realtimeDatabase.ts renamed to src/lib/stores/rtdb.ts

@@ -4,12 +4,12 @@ import type { Database } from "firebase/database";
 
 /**
  * @param {Database} rtdb - Firebase Realtime Database instance.
- * @param {string} path - Path to the database reference.
+ * @param {string} ref - Database path or reference.
  * @param {T | undefined} startWith - Optional default data.
  * @returns a store with realtime updates on individual database reference data.
  */
-export function refStore<T = any>(rtdb: Database, path: string, startWith?: T) {
-  const dataRef = dbRef(rtdb, path);
+export function refStore<T = any>(rtdb: Database, ref: string, startWith?: T) {
+  const dataRef = dbRef(rtdb, ref);
 
   const { subscribe } = writable<T | null>(startWith, (set) => {
     const unsubscribe = onValue(dataRef, (snapshot) => {
@@ -27,25 +27,25 @@ export function refStore<T = any>(rtdb: Database, path: string, startWith?: T) {
 
 /**
  * @param {Database} rtdb - Firebase Realtime Database instance.
- * @param {string} path - Path to the database reference.
+ * @param {string} ref - Database path or reference.
  * @param {T[]} startWith - Optional default data.
  * @returns a store with realtime updates on lists of data.
  */
 export function listStore<T = any>(
   rtdb: Database,
-  path: string,
+  ref: string,
   startWith: T[] = []
 ) {
-  const listRef = dbRef(rtdb, path);
+  const listRef = dbRef(rtdb, ref);
 
   const { subscribe } = writable<T[]>(startWith, (set) => {
     const unsubscribe = onValue(listRef, (snapshot) => {
       const dataArr: T[] = [];
       snapshot.forEach((childSnapshot) => {
         dataArr.push({
-          key: childSnapshot.ref.key,
-          ...(childSnapshot.val() as T),
-        });
+          ref: childSnapshot.ref,
+          ...childSnapshot.val(),
+        } as T);
       });
       set(dataArr);
     });

src/routes/+layout.svelte

@@ -3,6 +3,6 @@
   import { db as firestore, auth, rtdb } from "./firebase.js";
 </script>
 
-<FirebaseApp {auth} {firestore} {rtdb}>
+<FirebaseApp {auth} {firestore} {rtdb} >
   <slot />
 </FirebaseApp>

src/routes/firebase.ts

@@ -5,7 +5,12 @@ import {
   getFirestore,
   setDoc,
 } from "firebase/firestore";
-import { connectDatabaseEmulator, getDatabase, ref, set } from "firebase/database";
+import {
+  connectDatabaseEmulator,
+  getDatabase,
+  ref,
+  set,
+} from "firebase/database";
 import { connectAuthEmulator, getAuth } from "firebase/auth";
 import { dev } from "$app/environment";
 
@@ -37,5 +42,8 @@ if (dev) {
   });
 
   // Seed Realtime Database
-  set(ref(rtdb, "test"), { key: "value" });
+  set(ref(rtdb, "posts/test"), {
+    title: "Hi Mom",
+    content: "this is a test",
+  });
 }

src/routes/rtdb-test/+page.svelte

@@ -9,9 +9,9 @@
 
   const rtdb = getFirebaseContext().rtdb!;
 
-  async function addData(uid: string) {
-    const dataRef = ref(rtdb, `users/${uid}/data`);
-    await push(dataRef, {
+  async function addPost(uid: string) {
+    const postsRef = ref(rtdb, `users/${uid}/posts`);
+    await push(postsRef, {
       content: "RTDB item " + (Math.random() + 1).toString(36).substring(7),
       created: Date.now(),
     });
@@ -22,8 +22,8 @@
 
 <h2>Single Data Reference</h2>
 
-<DataRef path="test" let:data>
-  <p data-testid="ref-data">{data.key}</p>
+<DataRef ref="posts/test" let:data={post}>
+  <p data-testid="ref-data">{post?.title}</p>
   <div slot="loading">
     <p data-testid="loading">Loading...</p>
   </div>
@@ -38,15 +38,20 @@
 
 <SignedIn let:user>
   <h2>Data List</h2>
-  <DataList path={`users/${user.uid}/data`} startWith={[]} let:data let:count>
-    <p data-testid="count">You've {count} items</p>
+  <DataList
+    ref={`users/${user.uid}/posts`}
+    startWith={[]}
+    let:data={posts}
+    let:count
+  >
+    <p data-testid="count">You've made {count} posts</p>
 
     <ul>
-      {#each data as item (item.key)}
-        <li>{item.content} ... {item.key}</li>
+      {#each posts as post (post.ref.key)}
+        <li>{post?.content} ... {post.ref.key}</li>
       {/each}
     </ul>
 
-    <button on:click={() => addData(user.uid)}>Add Data</button>
+    <button on:click={() => addPost(user.uid)}>Add Data</button>
   </DataList>
 </SignedIn>