Skip to content

Commit 837bbb2

Browse files
ItsAlexousdItsAlexousd
committed
feat(rtdb): resolved merge conflicts
2 parents 999332c + 3732913 commit 837bbb2

File tree

13 files changed

+471
-185
lines changed

13 files changed

+471
-185
lines changed

‎README.md‎

Lines changed: 112 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,32 @@ A minimal, yet powerful library that puts realtime Firebase data into Svelte sto
88
<!-- 1. 🔥 Firebase App -->
99
<FirebaseApp {auth} {firestore} {rtdb}>
1010
11-
<!-- 2. 👤 Get the current user -->
12-
<SignedIn let:user>
11+
<!-- 2. 👤 Get the current user -->
12+
<SignedIn let:user>
1313
14-
<p>Howdy, {user.uid}</p>
14+
<p>Howdy, {user.uid}</p>
1515
16-
<!-- 3 (a). 📜 Get a Firestore document owned by a user -->
17-
<Doc ref={`posts/${user.uid}`} let:data={post} let:ref={postRef}>
16+
<!-- 3 (a). 📜 Get a Firestore document owned by a user -->
17+
<Doc ref={`posts/${user.uid}`} let:data={post} let:ref={postRef}>
1818
19-
<h2>{post.title}</h2>
19+
<h2>{post.title}</h2>
2020
21-
<!-- 4 (a). 💬 Get all the comments in its subcollection -->
22-
<Collection ref={postRef.path + '/comments'} let:data={comments}>
23-
{#each comments as comment}
21+
<!-- 4 (a). 💬 Get all the comments in its subcollection -->
22+
<Collection ref={postRef.path + '/comments'} let:data={comments}>
23+
{#each comments as comment}
2424
25-
{/each}
25+
{/each}
2626
27-
<!-- 3 (b). 📜 Get a Realtime Database node owned by a user -->
28-
<Node path={`posts/${user.uid}`} let:data={post} let:ref={postRef}>
27+
<!-- 3 (b). 📜 Get a Realtime Database node owned by a user -->
28+
<Node path={`posts/${user.uid}`} let:data={post} let:ref={postRef}>
2929
30-
<h2>{post.title}</h2>
30+
<h2>{post.title}</h2>
3131
32-
<!-- 4 (b). 💬 Get all the comments in its subnodes -->
33-
<NodeList path={postRef.path + '/comments'} let:data={comments}>
34-
{#each comments as comment}
32+
<!-- 4 (b). 💬 Get all the comments in its subnodes -->
33+
<NodeList path={postRef.path + '/comments'} let:data={comments}>
34+
{#each comments as comment}
3535
36-
{/each}
36+
{/each}
3737
...
3838
```
3939

@@ -114,9 +114,9 @@ Listen to the current user. Render UI conditionally based on the auth state:
114114
</script>
115115
116116
{#if $user}
117-
<p>Hi {$user.uid}</p>
117+
<p>Hi {$user.uid}</p>
118118
{:else}
119-
<p>Sign in...</p>
119+
<p>Sign in...</p>
120120
{/if}
121121
```
122122

@@ -198,11 +198,11 @@ First, fetch data from a load function like so:
198198
import { doc, getDoc } from 'firebase/firestore';
199199

200200
export const load = (async () => {
201-
const ref = doc(firestore, 'posts', 'first-post');
202-
const snapshot = await getDoc(ref);
203-
return {
204-
post: snapshot.data();
205-
};
201+
const ref = doc(firestore, 'posts', 'first-post');
202+
const snapshot = await getDoc(ref);
203+
return {
204+
post: snapshot.data();
205+
};
206206
});
207207
```
208208

@@ -235,8 +235,8 @@ The `FirebaseApp` component puts the FirebaseSDK into Svelte context. This avoid
235235
236236
<FirebaseApp {auth} {firestore} {rtdb} >
237237
238-
<User let:user></User>
239-
<!-- other sveltefire components here -->
238+
<User let:user></User>
239+
<!-- other sveltefire components here -->
240240
241241
</FirebaseApp>
242242
```
@@ -256,11 +256,11 @@ Get the current user.
256256

257257
```svelte
258258
<SignedIn let:user>
259-
Hello {user.uid}
259+
Hello {user.uid}
260260
</SignedIn>
261261
262262
<SignedOut>
263-
You need to sign in!
263+
You need to sign in!
264264
</SignedOut>
265265
```
266266

@@ -270,26 +270,26 @@ Fetch a single document and listen to data in realtime. The `data` slot prop pro
270270

271271
```svelte
272272
<Doc ref="posts/test" let:data let:ref>
273-
{data.content}
274-
{ref.path}
273+
{data.content}
274+
{ref.path}
275275
</Doc>
276276
```
277277

278278
Slot props can be renamed:
279279

280280
```svelte
281281
<Doc ref="posts/test" let:data={post} let:ref={postRef}>
282-
{post.content}
283-
{postRef.path}
282+
{post.content}
283+
{postRef.path}
284284
</Doc>
285285
```
286286

287287
Firestore components can also handle loading states:
288288

289289
```svelte
290290
<Doc path="posts/test">
291-
<!-- data renders here in the default slot -->
292-
<div slot="loading">Loading.... This will disappear when data is defined</div>
291+
<!-- data renders here in the default slot -->
292+
<div slot="loading">Loading.... This will disappear when data is defined</div>
293293
</Doc>
294294
```
295295

@@ -318,40 +318,39 @@ Collections can also take a Firestore Query instead of a path:
318318

319319
```svelte
320320
<script>
321-
const myQuery = query(collection(firestore, 'posts'), where('test', '==', 'test'));
321+
const myQuery = query(collection(firestore, 'posts'), where('test', '==', 'test'));
322322
</script>
323323
324324
<Collection ref={myQuery} let:data>
325325
</Collection>
326326
```
327327

328-
<<<<<<< HEAD
329328
### Node
330329

331330
Fetch a single node from the Realtime Database and listen to its data in realtime. The `data` slot prop gives you access to the fetched data, and the `ref` provides the Realtime Database reference.
332331

333332
```svelte
334333
<Node path="posts/test" let:data let:ref>
335-
{data.content}
336-
{ref.key}
334+
{data.content}
335+
{ref.key}
337336
</Node>
338337
```
339338

340339
Slot props can be renamed:
341340

342341
```svelte
343342
<Node path="posts/test" let:data={post} let:ref={postRef}>
344-
{post.content}
345-
{postRef.key}
343+
{post.content}
344+
{postRef.key}
346345
</Node>
347346
```
348347

349348
Realtime Database components can also handle loading states:
350349

351350
```svelte
352351
<Node path="posts/test">
353-
<!-- data renders here in the default slot -->
354-
<div slot="loading">Loading.... This will disappear when data is defined</div>
352+
<!-- data renders here in the default slot -->
353+
<div slot="loading">Loading.... This will disappear when data is defined</div>
355354
</Node>
356355
```
357356

@@ -374,15 +373,15 @@ Fetch lists of nodes from the Realtime Database and listen to their data in real
374373
{/each}
375374
</NodeList>
376375
```
377-
=======
378-
### DownloadLink
379376

380-
DownloadLink provides a `link` to download a file from Firebase Storage and its `reference`.
377+
### DownloadURL
378+
379+
DownloadURL provides a `link` to download a file from Firebase Storage and its `reference`.
381380

382381
```svelte
383-
<DownloadLink ref={item} let:link let:ref>
384-
<a href="{link}" download>Download {ref?.name}</a>
385-
</DownloadLink>
382+
<DownloadURL ref={item} let:link let:ref>
383+
<a href={link} download>Download {ref?.name}</a>
384+
</DownloadURL>
386385
```
387386

388387
### StorageList
@@ -391,31 +390,46 @@ StorageList provides a list of `items` and `prefixes` corresponding to the list
391390

392391
```svelte
393392
<StorageList ref="/" let:list>
394-
<ul>
395-
{#if list === null}
396-
<li>Loading...</li>
397-
{:else if list.prefixes.length === 0 && list.items.length === 0}
398-
<li>Empty</li>
399-
{:else}
400-
<!-- Listing the prefixes -->
401-
{#each list.prefixes as prefix}
402-
<li>
403-
{prefix.name}
404-
</li>
405-
{/each}
406-
<!-- Listing the objects in the given folder -->
407-
{#each list.items as item}
408-
<li>
409-
{item.name}
410-
</li>
411-
{/each}
412-
{/if}
413-
</ul>
393+
<ul>
394+
{#if list === null}
395+
<li>Loading...</li>
396+
{:else if list.prefixes.length === 0 && list.items.length === 0}
397+
<li>Empty</li>
398+
{:else}
399+
<!-- Listing the prefixes -->
400+
{#each list.prefixes as prefix}
401+
<li>
402+
{prefix.name}
403+
</li>
404+
{/each}
405+
<!-- Listing the objects in the given folder -->
406+
{#each list.items as item}
407+
<li>
408+
{item.name}
409+
</li>
410+
{/each}
411+
{/if}
412+
</ul>
414413
</StorageList>
415414
```
416415

417-
You can combine
418-
>>>>>>> upstream/master
416+
### UploadTask
417+
418+
Upload a file with progress tracking
419+
420+
```svelte
421+
<UploadTask ref="filename.txt" data={someBlob} let:progress let:snapshot>
422+
{#if snapshot?.state === "running"}
423+
{progress}% uploaded
424+
{/if}
425+
426+
{#if snapshot?.state === "success"}
427+
<DownloadURL ref={snapshot?.ref} let:link>
428+
<a href={link} download>Download</a>
429+
</DownloadURL>
430+
{/if}
431+
</UploadTask>
432+
```
419433

420434
### Using Components Together
421435

@@ -424,54 +438,54 @@ These components can be combined to build complex realtime apps. It's especially
424438
```svelte
425439
<FirebaseApp {auth} {firestore}>
426440
<SignedIn let:user>
427-
<p>UID: {user.uid}</p>
441+
<p>UID: {user.uid}</p>
428442
429-
<h3>Profile</h3>
443+
<h3>Profile</h3>
430444
431-
<!-- 📜 Fetch data using Firestore -->
432-
<Doc ref={`posts/${user.uid}`} let:data={profile} let:ref={profileRef}>
445+
<!-- 📜 Fetch data using Firestore -->
446+
<Doc ref={`posts/${user.uid}`} let:data={profile} let:ref={profileRef}>
433447
434-
{profile.content}
448+
{profile.content}
435449
436-
<h4>Comments</h4>
437-
<Collection ref={profileRef.path + '/comments'} let:data={comments}>
438-
{#each comments as comment}
439-
<strong>{comment.content}</strong>
440-
{/each}
450+
<h4>Comments</h4>
451+
<Collection ref={profileRef.path + '/comments'} let:data={comments}>
452+
{#each comments as comment}
453+
<strong>{comment.content}</strong>
454+
{/each}
441455
442-
<div slot="loading">Loading Comments...</div>
443-
</Collection>
456+
<div slot="loading">Loading Comments...</div>
457+
</Collection>
444458
445-
<div slot="loading">Loading Profile...</div>
446-
</Doc>
459+
<div slot="loading">Loading Profile...</div>
460+
</Doc>
447461
448-
<!-- 📜 Fetch data using Realtime Database -->
449-
<Node path={`posts/${user.uid}`} let:data={profile} let:ref={profileRef}>
462+
<!-- 📜 Fetch data using Realtime Database -->
463+
<Node path={`posts/${user.uid}`} let:data={profile} let:ref={profileRef}>
450464
451-
{profile.content}
465+
{profile.content}
452466
453-
<h4>Comments</h4>
454-
<NodeList path={profileRef.path + '/comments'} let:data={comments}>
455-
{#each comments as comment}
456-
<strong>{comment.content}</strong>
457-
{/each}
467+
<h4>Comments</h4>
468+
<NodeList path={profileRef.path + '/comments'} let:data={comments}>
469+
{#each comments as comment}
470+
<strong>{comment.content}</strong>
471+
{/each}
458472
459-
<div slot="loading">Loading Comments...</div>
460-
</NodeList>
473+
<div slot="loading">Loading Comments...</div>
474+
</NodeList>
461475
462-
<div slot="loading">Loading Profile...</div>
463-
</Node>
476+
<div slot="loading">Loading Profile...</div>
477+
</Node>
464478
</SignedIn>
465479
466480
<SignedOut>
467-
<p>Sign in to see your profile</p>
481+
<p>Sign in to see your profile</p>
468482
</SignedOut>
469483
</FirebaseApp>
470484
```
471485

472486
## Roadmap
473487

474-
- Add support for Firebase Storage
488+
- ~~Add support for Firebase Storage~~ (Added in latest release!)
475489
- ~~Add support for Firebase RTDB~~ (Added in latest release!)
476490
- Add support for Firebase Analytics in SvelteKit
477491
- Find a way to make TS generics with with Doc/Collection components

‎docs/src/components/SideNav.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@
1818
<li><a href="/firestore/doc-component">&ltDoc&gt</a></li>
1919
<li><a href="/firestore/collection-component">&ltCollection&gt</a></li>
2020
<li class="heading">storage</li>
21-
<li><a href="/guide/todo">uploadTaskStore</a></li>
22-
<li><a href="/guide/todo">&ltFileUploader&gt</a></li>
23-
<li><a href="/guide/todo">&ltDownloadURL&gt</a></li>
21+
<li><a href="/storage/upload-task">&ltUploadTask&gt</a></li>
22+
<li><a href="/storage/download-url">&ltDownloadURL&gt</a></li>
23+
<li><a href="/storage/storage-list">&ltStorageList&gt</a></li>
2424
<li class="heading">analytics</li>
2525
<li><a href="/guide/todo">&ltPageView&gt</a></li>
2626
</ul>

0 commit comments

Comments
 (0)