├── .firebaserc
├── .github
└── workflows
│ ├── deploy-docs.yml
│ ├── npm-publish.yml
│ └── run-tests.yml
├── .gitignore
├── .npmrc
├── LICENSE
├── README.md
├── docs
├── .gitignore
├── .vscode
│ ├── extensions.json
│ └── launch.json
├── README.md
├── astro.config.mjs
├── package-lock.json
├── package.json
├── public
│ ├── favicon.svg
│ ├── logo.png
│ ├── logo.svg
│ ├── moon.svg
│ └── sun.svg
├── src
│ ├── components
│ │ ├── Footer.astro
│ │ ├── Search.astro
│ │ ├── SideNav.astro
│ │ └── TopNav.astro
│ ├── env.d.ts
│ ├── layouts
│ │ └── MainLayout.astro
│ └── pages
│ │ ├── analytics
│ │ └── page-view-component.md
│ │ ├── api
│ │ └── index.md
│ │ ├── app
│ │ ├── context.md
│ │ └── firebase-app.md
│ │ ├── auth
│ │ ├── signed-in.md
│ │ ├── signed-out.md
│ │ └── user-store.md
│ │ ├── firestore
│ │ ├── collection-component.md
│ │ ├── collection-store.md
│ │ ├── doc-component.md
│ │ └── doc-store.md
│ │ ├── guide
│ │ ├── patterns.md
│ │ ├── start.md
│ │ └── todo.md
│ │ ├── index.md
│ │ ├── rtdb
│ │ ├── node-component.md
│ │ ├── node-list-component.md
│ │ ├── node-list-store.md
│ │ └── node-store.md
│ │ └── storage
│ │ ├── download-url.md
│ │ ├── storage-list.md
│ │ └── upload-task.md
├── tailwind.config.cjs
└── tsconfig.json
├── firebase.json
├── package-lock.json
├── package.json
├── playwright.config.ts
├── src
├── app.d.ts
├── app.html
├── lib
│ ├── components
│ │ ├── Collection.svelte
│ │ ├── Doc.svelte
│ │ ├── DownloadURL.svelte
│ │ ├── FirebaseApp.svelte
│ │ ├── Node.svelte
│ │ ├── NodeList.svelte
│ │ ├── PageView.svelte
│ │ ├── SignedIn.svelte
│ │ ├── SignedOut.svelte
│ │ ├── StorageList.svelte
│ │ ├── UploadTask.svelte
│ │ └── User.svelte
│ ├── index.js
│ └── stores
│ │ ├── auth.ts
│ │ ├── firestore.ts
│ │ ├── rtdb.ts
│ │ ├── sdk.ts
│ │ └── storage.ts
└── routes
│ ├── +layout.svelte
│ ├── +page.svelte
│ ├── analytics-test
│ ├── +layout.svelte
│ ├── +page.server.ts
│ ├── +page.svelte
│ └── client-side
│ │ └── +page.svelte
│ ├── auth-test
│ └── +page.svelte
│ ├── firebase.ts
│ ├── firestore-test
│ └── +page.svelte
│ ├── rtdb-test
│ └── +page.svelte
│ ├── ssr-test
│ ├── +page.svelte
│ └── +page.ts
│ └── storage-test
│ └── +page.svelte
├── static
└── favicon.png
├── storage.rules
├── svelte.config.js
├── tests
├── auth.test.ts
├── firestore.test.ts
├── main.test.ts
├── rtdb.test.ts
└── storage.test.ts
├── tsconfig.json
└── vite.config.js
/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 | "projects": {
3 | "default": "sveltefire-testing"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/.github/workflows/deploy-docs.yml:
--------------------------------------------------------------------------------
1 | name: Deploy to Firebase Hosting
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 |
8 | defaults:
9 | run:
10 | working-directory: ./docs
11 |
12 | env:
13 | FIREBASE_TOKEN: ${{secrets.FIREBASE_TOKEN}}
14 |
15 | jobs:
16 | build:
17 | runs-on: ubuntu-latest
18 | steps:
19 | - uses: actions/checkout@v2
20 | - uses: actions/setup-node@v2
21 | with:
22 | node-version: "18.x"
23 | - run: npm ci
24 | - run: npm run build
25 | - run: npm run deploy
26 |
--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
1 | name: Publish to NPM
2 |
3 | on:
4 | release:
5 | types: [created]
6 |
7 | jobs:
8 | build:
9 | runs-on: ubuntu-latest
10 | steps:
11 | - uses: actions/checkout@v2
12 | - uses: actions/setup-node@v2
13 | with:
14 | node-version: "18.x"
15 | registry-url: "https://registry.npmjs.org"
16 | - run: npm ci
17 | - run: npm run build
18 | - name: Publish package to NPM
19 | run: npm publish
20 | env:
21 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
22 |
--------------------------------------------------------------------------------
/.github/workflows/run-tests.yml:
--------------------------------------------------------------------------------
1 | name: Run Playwright Tests
2 |
3 | on:
4 | push:
5 | branches: [master, main]
6 | pull_request:
7 | branches: [master, main]
8 |
9 | jobs:
10 | build:
11 | runs-on: ubuntu-latest
12 | env:
13 | NODE_ENV: ci
14 | steps:
15 | - uses: actions/checkout@v2
16 | - uses: actions/setup-node@v2
17 | with:
18 | node-version: 18
19 | - run: npm ci
20 | - run: npx playwright install --with-deps chromium
21 | - run: npx playwright test
22 | - uses: actions/upload-artifact@v3
23 | if: always()
24 | with:
25 | name: playwright-report
26 | path: playwright-report/
27 | retention-days: 30
28 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /.svelte-kit
5 | /package
6 | .env
7 | .env.*
8 | !.env.example
9 | vite.config.js.timestamp-*
10 | vite.config.ts.timestamp-*
11 | package
12 | /test-results
13 | *-debug.log
14 | /dist
15 | /.firebase
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020-2024 Fireship LLC
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
SvelteFire
4 |
5 |
6 |
7 |
Cybernetically Enhanced Firebase Apps
8 |
9 |
10 |
11 |
14 |
15 |
16 | A minimal, yet powerful library that puts realtime Firebase data into Svelte stores.
17 |
18 | - [Quick Start](https://sveltefire.fireship.io/guide/start)
19 | - [Documentation](https://sveltefire.fireship.io)
20 |
21 | ## Build Complex Apps Faster
22 |
23 | SvelteFire allows you to access Firebase Auth, Firestore, Storage, RealtimeDB, and Analytics with minimal complexity. It simplfies relational data with a declarative syntax, handles loading states, automatically disposes of realtime data subscriptions, and more!
24 |
25 | Gaze in awe at the example below where we fetch multiple levels of realtime user data with just a few lines of Svelte code:
26 |
27 | ```svelte
28 |
29 |
30 |
31 |
32 |
33 |
34 |
38 |
39 |
55 |
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/docs/src/pages/analytics/page-view-component.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: PageView Component
3 | pubDate: 2023-12-23
4 | description: SvelteFire PageView Component API reference
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | # PageView
9 |
10 | The `PageView` component logs a Google analytics `page_view` event when it is mounted.
11 |
12 | ### Slot Props
13 |
14 | - `eventName` - (default: 'page_view') Set the current user as the userId in Google Analytics
15 | - `setUser` - (default: true) Set the current user as the userId in Google Analytics
16 | - `customParams` - (optional) custom parameters to pass to the `signIn` function
17 |
18 | ### Layout Example (recommended)
19 |
20 | The most efficient way to integrate Firebase Analytics is to log events from a layout component. This will ensure that every route change is logged, both on the client and server. Make sure to `key` the `PageView` component so that it is re-mounted on every route change.
21 |
22 | ```svelte
23 |
24 |
28 |
29 |
30 |
31 | {#key $page.route.id}
32 |
33 | {/key}
34 | ```
35 |
36 | ### Page Example
37 |
38 | For fine-grained control, you can include `PageView` on a page-by-page basis. This is useful when sending custom parameters.
39 |
40 |
41 | ```svelte
42 |
43 |
49 |
50 |
51 |
52 | ```
--------------------------------------------------------------------------------
/docs/src/pages/api/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: API Docs
3 | pubDate: 2023-07-23
4 | description: SvelteFire API Docs
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | ## TODO
--------------------------------------------------------------------------------
/docs/src/pages/app/context.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: getFirebaseContext
3 | pubDate: 2023-07-23
4 | description: SvelteFire FirebaseApp Component API reference
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | # getFirebaseContext
9 |
10 | Get the Firebase SDK context from a component.
11 |
12 | ### Example
13 |
14 | ```svelte
15 |
19 | ```
--------------------------------------------------------------------------------
/docs/src/pages/app/firebase-app.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: FirebaseApp Component
3 | pubDate: 2023-07-23
4 | description: SvelteFire FirebaseApp Component API reference
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | # FirebaseApp
9 |
10 | Puts the Firebase app into Svelte's context. It should be used as a parent to all other SvelteFire components.
11 |
12 | ### Props
13 |
14 | - `firestore` - Firebase Auth instance
15 | - `auth` - Firestore instance
16 | - `storage` - Storage instance
17 | - `rtdb` - RealtimeDB instance
18 | - `analytics` - Firebase Analytics instance
19 |
20 |
21 |
22 | ### Example
23 |
24 | Initialize Firebase with the SDKs you need in your app, then pass them to `FirebaseApp` as props.
25 |
26 | ```svelte
27 |
38 |
39 |
40 |
41 |
42 | ```
--------------------------------------------------------------------------------
/docs/src/pages/auth/signed-in.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: SignedIn Component
3 | pubDate: 2023-07-23
4 | description: SvelteFire SignedIn Component API reference
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | # SignedIn
9 |
10 | The `SignedIn` component renders content for the current user. It is a wrapper around the `userStore`. If the user is not signed in, the children will not be rendered.
11 |
12 | ### Slot Props
13 |
14 | - `user` - The current Firebase user
15 | - `auth` - The current Firebase auth instance
16 | - `signOut` - A function to sign out the current user
17 |
18 | ### Example
19 |
20 | ```svelte
21 |
24 |
25 |
26 |
Howdy, {user.uid}
27 |
28 |
29 |
30 |
31 |
32 |
33 | ```
--------------------------------------------------------------------------------
/docs/src/pages/auth/signed-out.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: SignedOut Component
3 | pubDate: 2023-07-23
4 | description: SvelteFire SignedOut Component API reference
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | # SignedOut
9 |
10 | The `SignedOut` component renders content when the current user is `null`. It is a wrapper around the `userStore`. If the user is signed in, the children will not be rendered.
11 |
12 | ### Slot Props
13 |
14 | - `auth` - The current Firebase auth instance
15 |
16 | ### Example
17 |
18 | ```svelte
19 |
23 |
24 |
25 | You must be signed in to see this!
26 |
27 |
28 |
29 |
30 |
31 |
32 | ```
33 |
--------------------------------------------------------------------------------
/docs/src/pages/auth/user-store.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: userStore
3 | pubDate: 2023-07-23
4 | description: SvelteFire userStore API reference
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | # userStore
9 |
10 | Listens the current Firebase user.
11 |
12 | ### Parameters
13 |
14 | - `auth` - Firebase Auth instance
15 |
16 | ### Example
17 |
18 | ```svelte
19 |
25 |
26 | Hello {$user.uid}
27 | ```
--------------------------------------------------------------------------------
/docs/src/pages/firestore/collection-component.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Collection Component
3 | pubDate: 2023-07-23
4 | description: SvelteFire Collection Component API reference
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | # Collection
9 |
10 | The `Collection` component is a wrapper around the `collectionStore`. It renders the collection data and handles the loading state.
11 |
12 | ### Props
13 |
14 | - `ref` - A Firestore collection reference, query reference, or path string (e.g. `posts`)
15 | - `startWith` - (optional) initial value to use before the collection is fetched
16 |
17 | ### Slots
18 |
19 | - `default` - The collection data
20 | - `loading` - Loading state
21 |
22 | ### Slot Props
23 |
24 | - `data` - An array of document data
25 | - `ref` - The Firestore collection reference
26 | - `firestore` - The Firestore instance
27 | - `count` - The number of documents returned by the query
28 |
29 | ### Example
30 |
31 | ```svelte
32 |
35 |
36 |
37 |
38 |
Found {count} posts
39 |
40 | {#each data as post}
41 |
{post.title}
42 | {/each}
43 |
44 |
Loading...
45 |
46 | ```
--------------------------------------------------------------------------------
/docs/src/pages/firestore/collection-store.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: collectionStore
3 | pubDate: 2023-07-23
4 | description: SvelteFire collectionStore API reference
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | # collectionStore
9 |
10 | Subscribes to Firestore collection data and listens to real-time updates.
11 |
12 | ### Parameters
13 |
14 | - `firestore` - Firestore instance
15 | - `ref` - A Firestore collection reference, query reference, or path string (e.g. `posts`)
16 | - `startWith` - (optional) initial value to use before the document is fetched
17 |
18 | ### Example
19 |
20 | ```svelte
21 |
27 |
28 | {#each $posts as post}
29 |
64 | {/each}
65 | ```
66 |
--------------------------------------------------------------------------------
/docs/src/pages/firestore/doc-component.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Doc Component
3 | pubDate: 2023-07-23
4 | description: SvelteFire Doc Component API reference
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | # Doc
9 |
10 | The `Doc` component is a wrapper around the `docStore`. It renders the document data and handles the loading state.
11 |
12 | ### Props
13 |
14 | - `ref` - A Firestore document reference or path string (e.g. `posts/hi-mom`)
15 | - `startWith` - (optional) initial value to use before the document is fetched
16 |
17 | ### Slots
18 |
19 | - `default` - The document data
20 | - `loading` - Loading state
21 |
22 | ### Slot Props
23 |
24 | - `data` - The document data
25 | - `ref` - The Firestore document reference
26 | - `firestore` - The Firestore instance
27 |
28 | ### Example
29 |
30 | ```svelte
31 |
34 |
35 |
36 |
{data?.title}
37 |
38 |
Loading...
39 |
40 | ```
--------------------------------------------------------------------------------
/docs/src/pages/firestore/doc-store.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: docStore
3 | pubDate: 2023-07-23
4 | description: SvelteFire docStore API reference
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | # docStore
9 |
10 | Subscribes to Firestore document data and listens to realtime updates.
11 |
12 | ### Parameters
13 |
14 | - `firestore` - Firestore instance
15 | - `ref` - A Firestore document reference or path string (e.g. `posts/hi-mom`)
16 | - `startWith` - (optional) initial value to use before the document is fetched
17 |
18 | ### Example
19 |
20 | ```svelte
21 |
27 |
28 | {$post?.title}
29 | ```
30 |
31 | With a document reference:
32 |
33 | ```svelte
34 |
42 | ```
43 |
44 | With TypeScript:
45 |
46 | ```svelte
47 |
56 |
57 | {$post?.title}
58 | ```
--------------------------------------------------------------------------------
/docs/src/pages/guide/patterns.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Common SvelteFire Patterns
3 | pubDate: 2023-12-23
4 | description: How to implement common patters with Svelte and Firebase
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | # Common Patterns
9 |
10 | ## Fetch Data from Firestore for Authenticated Users
11 |
12 | First, Use the `SignedIn` component to access the UID of the current user. Second, pass that UID to the `Doc` or `Collection` component to fetch a Firestore document owned by that user.
13 |
14 | ```svelte
15 |
16 |
17 |
{post.title}
18 |
{post.content}
19 |
20 |
21 | ```
22 |
23 | ## SSR with SvelteKit
24 |
25 | SvelteFire is a client-side library, but allows you to hydrate server data into a realtime stream.
26 |
27 | First, fetch data from a load function like so:
28 |
29 | ```ts
30 | // +page.ts
31 | import { doc, getDoc } from 'firebase/firestore';
32 |
33 | export const load = (async () => {
34 | const ref = doc(firestore, 'posts', 'first-post');
35 | const snapshot = await getDoc(ref);
36 | return {
37 | post: snapshot.data();
38 | };
39 | });
40 | ```
41 |
42 | Second, pass the server data as the `startWith` value to a store. This will bypass the loading state and ensure the data is rendered in the server HTML, then realtime listeners will be attached afterwards.
43 |
44 | ```svelte
45 | // +page.svelte
46 |
49 |
50 |
51 |
52 |
{post.title}
53 |
{post.content}
54 |
55 | ```
56 |
57 | Note: This will result in 2 reads from Firestore on initial page load, so only use this pattern when true realtime data necessary.
58 |
59 | ## Dynamic Firestore Queries
60 |
61 | Imagine you have a collection of posts what a user can filter by category. Create a reactive declaration to re-run the query whenever the category changes.
62 |
63 | ```svelte
64 |
74 |
75 |
76 |
77 | {#each posts as post (post.id)}
78 |
{post.content}
79 | {/each}
80 |
81 |
82 |
83 |
84 | ```
85 | ## Handle File Uploads with Progress Bar
86 |
87 | The example below shows how to upload a file to Firebase Storage and display a progress bar. First, get a file from the user. Second, pass the file to the `UploadTask` component. Third, display the progress bar and download link.
88 |
89 |
90 | ```svelte
91 |
99 |
100 |
101 |
102 | {#if file}
103 |
104 | {#if snapshot?.state === "running" || snapshot?.state === "success"}
105 |
{progress}% uploaded
106 |
107 | {/if}
108 |
109 | {#if snapshot?.state === "error"}
110 | Upload failed
111 | {/if}
112 |
113 | {#if snapshot?.state === "success"}
114 |
115 | {ref?.name}
116 |
117 | {/if}
118 |
119 | {/if}
120 | ```
--------------------------------------------------------------------------------
/docs/src/pages/guide/start.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Install SvelteFire
3 | pubDate: 2023-07-23
4 | description: How to install SvelteFire
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | # QuickStart
9 |
10 | SvelteFire works in both SvelteKit and standalone Svelte apps. This guide assumes you're using SvelteKit.
11 |
12 |
13 | ### 1. Install
14 |
15 | ```
16 | npm i sveltefire firebase
17 | ```
18 |
19 | ### 2. Initialize
20 |
21 | Initialize Firebase and add the `FirebaseApp` component to the component tree. Typically, this is done in the root `+layout.svelte` file to access Firebase on all pages.
22 |
23 | #### +layout.svelte
24 | ```svelte
25 |
36 |
37 |
38 |
39 |
40 | ```
41 |
42 | ### 3. Use Firebase!
43 |
44 | You can use stores to access the current user and Firestore.
45 |
46 | ```svelte
47 |
54 |
55 | {$user?.displayName}
56 | {$post?.content}
57 | ```
58 |
59 | Or you can use components to more easily pass data around. Notice how slot props like `let:user` and `let:data` allow us to access data from the backend with minimal effort. Here are some common examples.
60 |
61 | ```svelte
62 |
66 |
67 |
68 |
Hello {user.uid}
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
{data.title}
78 |
{data.content}
79 |
80 |
81 |
82 | {#each posts as post}
83 |
{post.title}
84 |
{post.content}
85 | {/each}
86 |
87 | ```
88 |
--------------------------------------------------------------------------------
/docs/src/pages/guide/todo.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: TODO
3 | pubDate: 2023-07-23
4 | description: This feature is coming soon...
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | # Coming Soon
9 |
10 | This feature is under development. Please check back later.
--------------------------------------------------------------------------------
/docs/src/pages/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: SvelteFire?
3 | pubDate: 2023-07-23
4 | description: 'Why use SvelteFire over vanilla Firebase?'
5 | layout: ../layouts/MainLayout.astro
6 | ---
7 |
8 | # 🔥 SvelteFire
9 |
10 | SvelteFire is a minimal, yet powerful library that puts realtime Firebase data into Svelte stores.
11 |
12 | ## Why?
13 |
14 | Firebase realtime APIs are callback-based, but we can dramatically improve the developer experience by leveraging Svelte's reactive stores.
15 |
16 | - Access users and realtime Firestore data as Svelte stores
17 | - Automatic subscription disposal to prevent duplicate reads
18 | - Better TypeScript experience for Firebase
19 | - Handle complex relational data between Auth and Firestore
20 | - Easily hydrate SvelteKit server data into a realtime Firebase stream
21 | - Simple Google Analytics integration for SvelteKit
22 |
23 | ## Store Example
24 |
25 | Get the current user:
26 |
27 | ```svelte
28 |
31 |
32 | Hello {$user.uid}
33 | ```
34 |
35 | Get a Firestore document. Any changes to the document will be reflected instantly:
36 |
37 | ```svelte
38 |
41 |
42 | {$post.title}
43 | {$post.content}
44 | ```
45 |
46 | ## Component Example
47 |
48 | We can take this a step further with components and slot props. Under the hood, these components use the same stores as above, but make common patterns dead simple. The example below renders content for the signed-in user while fetching multiple levels of relational data `user->post->comments`.
49 |
50 | ```svelte
51 |
52 |
53 |
54 |
55 |
56 |
57 |
Howdy, {user.uid}
58 |
59 |
60 |
61 |
62 |
{post.title}
63 |
64 |
65 |
66 | {#each comments as comment}
67 |
68 | {/each}
69 | ...
70 | ```
--------------------------------------------------------------------------------
/docs/src/pages/rtdb/node-component.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Node Component
3 | pubDate: 2023-07-23
4 | description: SvelteFire Node Component API reference
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | # Node
9 |
10 | The `Node` component is a wrapper around the `nodeStore`. It renders the node data and handles the loading state.
11 |
12 | ### Props
13 |
14 | - `path` - RealtimeDB path string (e.g. `posts/hi-mom`)
15 | - `startWith` - (optional) initial value to use before the data is fetched
16 |
17 | ### Slots
18 |
19 | - `default` - The node data
20 | - `loading` - Loading state
21 |
22 | ### Slot Props
23 |
24 | - `data` - The node data
25 | - `path` - The Database reference
26 | - `rtdb` - The Database instance
27 |
28 | ### Example
29 |
30 | ```svelte
31 |
34 |
35 |
36 |
{data?.title}
37 |
38 |
Loading...
39 |
40 | ```
--------------------------------------------------------------------------------
/docs/src/pages/rtdb/node-list-component.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: NodeList Component
3 | pubDate: 2023-07-23
4 | description: SvelteFire NodeList Component API reference
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | # NodeList
9 |
10 | The `NodeList` component is a wrapper around the `nodeListStore`. It renders the node list data and handles the loading state.
11 |
12 | ### Props
13 |
14 | - `path` - RealtimeDB reference
15 | - `startWith` - (optional) initial value to use before the collection is fetched
16 |
17 | ### Slots
18 |
19 | - `default` - The node list data
20 | - `loading` - Loading state
21 |
22 | ### Slot Props
23 |
24 | - `data` - An array of nodes
25 | - `ref` - The Database node reference
26 | - `rtdb` - The Database instance
27 | - `count` - The number of nodes returned by the query
28 |
29 | ### Example
30 |
31 | ```svelte
32 |
35 |
36 |
37 |
38 |
Found {count} posts
39 |
40 | {#each data as post}
41 |
{post.title}
42 | {/each}
43 |
44 |
Loading...
45 |
46 | ```
--------------------------------------------------------------------------------
/docs/src/pages/rtdb/node-list-store.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: nodeListStore
3 | pubDate: 2023-11-23
4 | description: SvelteFire nodeStore API reference
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | # nodeListStore
9 |
10 | Subscribes to RealtimeDB node list data and listens to real-time updates.
11 |
12 | ### Parameters
13 |
14 | - `rtdb` - RealtimeDB instance
15 | - `path` - A RealtimeDB path string (e.g. `posts`)
16 | - `startWith` - (optional) initial value to use before the data is fetched
17 |
18 | ### Example
19 |
20 | ```svelte
21 |
27 |
28 | {#each $posts as post}
29 |
{post.title}
30 | {/each}
31 | ```
--------------------------------------------------------------------------------
/docs/src/pages/rtdb/node-store.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: nodeStore
3 | pubDate: 2023-11-23
4 | description: SvelteFire nodeStore API reference
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | # nodeStore
9 |
10 | Subscribes to RealtimeDB node and listens to realtime updates.
11 |
12 | ### Parameters
13 |
14 | - `rtdb` - RealtimeDB instance
15 | - `path` - A RealtimeDB path string (e.g. `posts/hi-mom`)
16 | - `startWith` - (optional) initial value to use before the data is fetched
17 |
18 | ### Example
19 |
20 | ```svelte
21 |
27 |
28 | {$post?.title}
29 | ```
--------------------------------------------------------------------------------
/docs/src/pages/storage/download-url.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: DownloadURL Component
3 | pubDate: 2023-07-23
4 | description: SvelteFire DownloadURL Component API reference
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | # DownloadURL
9 |
10 | Returns the download URL for a file in Firebase Storage.
11 |
12 | ### Props
13 |
14 | - `ref` - A Firebase Storage reference or path string (e.g. `files/hi-mom.txt`)
15 |
16 | ### Slots
17 |
18 | - `default` - Shown when the url is available
19 | - `loading` - Shown while the url is loading
20 |
21 | ### Slot Props
22 |
23 | - `link` - The download URL
24 | - `ref` - Storage reference
25 | - `storage` - The Firebase Storage instance
26 |
27 | ### Example
28 |
29 | ```svelte
30 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | {ref?.name}
41 |
42 | ```
--------------------------------------------------------------------------------
/docs/src/pages/storage/storage-list.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: StorageList Component
3 | pubDate: 2023-07-23
4 | description: SvelteFire StorageList Component API reference
5 | layout: ../../layouts/MainLayout.astro
6 | ---
7 |
8 | # StorageList
9 |
10 | Returns a list of files stored in Firebase Storage.
11 |
12 | ### Props
13 |
14 | - `ref` - A Firebase Storage reference or path string (e.g. `files/hi-mom.txt`)
15 |
16 | ### Slots
17 |
18 | - `default` - Shown when the list is available
19 | - `loading` - Shown while the list is loading
20 |
21 | ### Slot Props
22 |
23 | - `list` - The list of files and prefixes
24 | - `ref` - Storage reference
25 | - `storage` - The Firebase Storage instance
26 |
27 | ### Example
28 |
29 | ```svelte
30 |
33 |
34 |
35 |
36 |
3 | 
5 | 
6 | 
7 |