feat: rename components to Node & NodeList for RTDB

Author: ItsAlexousd

src/lib/components/DataRef.svelte renamed to src/lib/components/Node.svelte

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

src/lib/components/DataList.svelte renamed to src/lib/components/NodeList.svelte

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

src/lib/index.js

@@ -1,30 +1,30 @@
 // Reexport your entry components here
+import FirebaseApp from "./components/FirebaseApp.svelte";
 import User from "./components/User.svelte";
 import Collection from "./components/Collection.svelte";
 import Doc from "./components/Doc.svelte";
-import DataRef from './components/DataRef.svelte';
-import DataList from './components/DataList.svelte';
-import FirebaseApp from "./components/FirebaseApp.svelte";
+import NodeList from "./components/NodeList.svelte";
+import Node from "./components/Node.svelte";
 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/rtdb.js';
+import { nodeStore, nodeListStore } from './stores/rtdb.js';
 import { getFirebaseContext } from "./stores/sdk.js";
 
 export {
   Doc,
   User,
   Collection,
-  DataRef,
-  DataList,
+  Node,
+  NodeList,
   FirebaseApp,
   SignedOut,
   SignedIn,
   docStore,
   collectionStore,
-  refStore,
-  listStore,
+  nodeStore as refStore,
+  nodeListStore as listStore,
   userStore,
   getFirebaseContext,
 };

src/lib/stores/rtdb.ts

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

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import DataRef from "$lib/components/DataRef.svelte";
-  import DataList from "$lib/components/DataList.svelte";
-  import SignedOut from "$lib/components/SignedOut.svelte";
+  import Node from "$lib/components/Node.svelte";
+  import NodeList from "$lib/components/NodeList.svelte";
   import SignedIn from "$lib/components/SignedIn.svelte";
+  import SignedOut from "$lib/components/SignedOut.svelte";
   import { signInAnonymously } from "firebase/auth";
   import { push, ref } from "firebase/database";
   import { getFirebaseContext } from "$lib/stores/sdk.js";
@@ -22,12 +22,12 @@
 
 <h2>Single Data Reference</h2>
 
-<DataRef ref="posts/test" let:data={post}>
+<Node path="posts/test" let:data={post}>
   <p data-testid="ref-data">{post?.title}</p>
   <div slot="loading">
     <p data-testid="loading">Loading...</p>
   </div>
-</DataRef>
+</Node>
 
 <h2>User Owned Data</h2>
 
@@ -38,20 +38,20 @@
 
 <SignedIn let:user>
   <h2>Data List</h2>
-  <DataList
-    ref={`users/${user.uid}/posts`}
+  <NodeList
+    path={`users/${user.uid}/posts`}
     startWith={[]}
     let:data={posts}
     let:count
   >
     <p data-testid="count">You've made {count} posts</p>
 
     <ul>
-      {#each posts as post (post.ref.key)}
-        <li>{post?.content} ... {post.ref.key}</li>
+      {#each posts as post (post.nodeKey)}
+        <li>{post?.content} ... {post.nodeKey}</li>
       {/each}
     </ul>
 
     <button on:click={() => addPost(user.uid)}>Add Data</button>
-  </DataList>
+  </NodeList>
 </SignedIn>