Skip to content

Commit

Permalink
docs: add docs for RealtimeDB
Browse files Browse the repository at this point in the history
  • Loading branch information
codediodeio committed Dec 17, 2023
1 parent d0f59a8 commit 1232da0
Show file tree
Hide file tree
Showing 5 changed files with 151 additions and 0 deletions.
5 changes: 5 additions & 0 deletions docs/src/components/SideNav.astro
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,11 @@
<li><a href="/storage/upload-task">&ltUploadTask&gt</a></li>
<li><a href="/storage/download-url">&ltDownloadURL&gt</a></li>
<li><a href="/storage/storage-list">&ltStorageList&gt</a></li>
<li class="heading">realtime db</li>
<li><a href="/rtdb/node-store">nodeStore</a></li>
<li><a href="/rtdb/node-list-store">nodeListStore</a></li>
<li><a href="/rtdb/node-component">&ltNode&gt</a></li>
<li><a href="/rtdb/node-list-component">&ltNodeList&gt</a></li>
<li class="heading">analytics</li>
<li><a href="/guide/todo">&ltPageView&gt</a></li>
</ul>
Expand Down
40 changes: 40 additions & 0 deletions docs/src/pages/rtdb/node-component.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
title: Node Component
pubDate: 2023-07-23
description: SvelteFire Node Component API reference
layout: ../../layouts/MainLayout.astro
---

# Node

The `Node` component is a wrapper around the `nodeStore`. It renders the node data and handles the loading state.

### Props

- `path` - RealtimeDB path string (e.g. `posts/hi-mom`)
- `startWith` - (optional) initial value to use before the data is fetched

### Slots

- `default` - The node data
- `loading` - Loading state

### Slot Props

- `data` - The node data
- `path` - The Database reference
- `rtdb` - The Database instance

### Example

```svelte
<script>
import { Node } from 'sveltefire';
</script>
<Node path={'posts/id'} let:data>
<p>{data?.title}</p>
<p slot="loading">Loading...</p>
</Node>
```
46 changes: 46 additions & 0 deletions docs/src/pages/rtdb/node-list-component.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
---
title: NodeList Component
pubDate: 2023-07-23
description: SvelteFire NodeList Component API reference
layout: ../../layouts/MainLayout.astro
---

# NodeList

The `NodeList` component is a wrapper around the `nodeListStore`. It renders the node list data and handles the loading state.

### Props

- `path` - RealtimeDB reference
- `startWith` - (optional) initial value to use before the collection is fetched

### Slots

- `default` - The node list data
- `loading` - Loading state

### Slot Props

- `data` - An array of nodes
- `ref` - The Database node reference
- `rtdb` - The Database instance
- `count` - The number of nodes returned by the query

### Example

```svelte
<script>
import { NodeList } from 'sveltefire';
</script>
<NodeList path={'posts'} let:data let:count>
<p>Found {count} posts</p>
{#each data as post}
<p>{post.title}</p>
{/each}
<p slot="loading">Loading...</p>
</NodeList>
```
31 changes: 31 additions & 0 deletions docs/src/pages/rtdb/node-list-store.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
---
title: nodeListStore
pubDate: 2023-11-23
description: SvelteFire nodeStore API reference
layout: ../../layouts/MainLayout.astro
---

# nodeListStore

Subscribes to RealtimeDB node list data and listens to real-time updates.

### Parameters

- `rtdb` - RealtimeDB instance
- `path` - A RealtimeDB path string (e.g. `posts`)
- `startWith` - (optional) initial value to use before the data is fetched

### Example

```svelte
<script>
import { nodeListStore } from 'sveltefire';
import { rtdb } from '$lib/firebase'; // your rtdb instance
const posts = nodeListStore(rtdb, 'posts');
</script>
{#each $posts as post}
<p>{post.title}</p>
{/each}
```
29 changes: 29 additions & 0 deletions docs/src/pages/rtdb/node-store.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
title: nodeStore
pubDate: 2023-11-23
description: SvelteFire nodeStore API reference
layout: ../../layouts/MainLayout.astro
---

# nodeStore

Subscribes to RealtimeDB node and listens to realtime updates.

### Parameters

- `rtdb` - RealtimeDB instance
- `path` - A RealtimeDB path string (e.g. `posts/hi-mom`)
- `startWith` - (optional) initial value to use before the data is fetched

### Example

```svelte
<script>
import { nodeStore } from 'sveltefire';
import { rtdb } from '$lib/rtdb'; // your RealtimeDB instance
const post = nodeStore(rtdb, 'posts/id');
</script>
{$post?.title}
```

0 comments on commit 1232da0

Please sign in to comment.