A minimal, yet powerful library that puts realtime Firebase data into Svelte stores.
<!-- 1. 🔥 Firebase App -->
<FirebaseApp {auth} {firestore}>
<!-- 2. 👤 Get the current user -->
<SignedIn let:user>
<p>Howdy, {user.uid}</p>
<!-- 3. 📜 Get a Firestore document owned by a user -->
<Doc ref={`posts/${user.uid}`} let:data={post} let:ref={postRef}>
<h2>{post.title}</h2>
<!-- 4. 💬 Get all the comments in its subcollection -->
<Collection ref={postRef.path + '/comments'} let:data={comments}>
{#each comments as comment}
{/each}
...Svelte makes it possible to dramatically simplify the way developers work with Firebase. Here are some problems the project solves:
- Access users and realtime Firestore data as Svelte stores
- Automatic subscription disposal to prevent memory/cost leaks
- Better TypeScript experience for Firebase
- Handle complex relational data between Auth and Firestore
- Easily hydrate SvelteKit server data into a realtime Firebase stream
- Install Firebase npm i firebase v9+ and initialize it in a file like lib/firebase.js:
npm i sveltefire firebase
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';
// Initialize Firebase
const app = initializeApp(/* your firebase config */);
export const db = getFirestore(app);
export const auth = getAuth(app);- Get the Current user
<script>
import { auth } from '$lib/firebase';
import { userStore } from 'sveltefire';
const user = userStore(auth);
</script>
Hello {$user?.uid}- Listen to realtime data.
Use the $ as much as you want - it will only result in one Firebase read request. When all the subscriptions are removed, it will automatically unsubscribe.
<script>
import { firestore } from '$lib/firebase';
import { docStore } from 'sveltefire';
const post = docStore(firestore, 'posts/test');
</script>
{$post?.content}
{$post?.title}Or better yet, use the built in Doc and Collection components. See below.
Stores are the building blocks of SvelteFire.
Listen to the current user. Render UI conditionally based on the auth state:
<script>
import { userStore } from 'sveltefire';
const user = userStore(auth);
</script>
{#if $user}
<p>Hi {$user.uid}</p>
{:else}
<p>Sign in...</p>
{/if}Subscribe to realtime data. The store will unsubscribe automatically to avoid unnecessary Firestore reads.
<script>
import { docStore, collectionStore } from 'sveltefire';
const post = docStore(firestore, 'posts/test');
// OR
const posts = collectionStore(firestore, 'posts');
</script>
{$post?.content}
{#each $posts as post}
{/each}Cast Firebase data to a TS interface:
interface Post {
id: string;
title: string;
content: string;
}
const post = docStore<Post>(firestore, 'posts/test');
const posts = collectionStore<Post>(firestore, 'posts'); SvelteFire is a client-side library, but allows you to hydrate server data into a realtime stream.
First, fetch data from a load function like so:
import { doc, getDoc } from 'firebase/firestore';
export const load = (async () => {
const ref = doc(firestore, 'posts', 'first-post');
const snapshot = await getDoc(ref);
return {
post: snapshot.data();
};
});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.
// Data fetched via server
export let data: PageData;
// Just give the store a startWith value
const post = docStore(firestore, 'posts/test', data.post);In addition to stores, SvelteFire provides a set of components that can build complex realtime apps without leaving the HTML.
The FirebaseApp component puts the FirebaseSDK into Svelte context. This avoids the need to pass auth and firestore down to every component. It is typically placed in root layout.
<!-- +layout.svelte -->
<script>
// Initialize Firebase...
const db = getFirestore(app);
const auth = getAuth(app);
</script>
<FirebaseApp {auth} {firestore}>
<User let:user></User>
<!-- other sveltefire components here -->
</FirebaseApp>You can use Svelte's context API to access the Firebase SDK in any component.
<script>
import { getFirebaseContext } from "sveltefire";
const { auth, firestore } = getFirebaseContext();
</script>Get the current user.
<SignedIn let:user>
Hello {user.uid}
</SignedIn>
<SignedOut>
You need to sign in!
</SignedOut>Fetch a single document and listen to data in realtime. The data slot prop provides access to the fetched data, while ref is the Firestore document reference.
<Doc ref="posts/test" let:data let:ref>
{data.content}
{ref.path}
</Doc>Slot props can be renamed:
<Doc ref="posts/test" let:data={post} let:ref={postRef}>
{post.content}
{postRef.path}
</Doc>Firestore components can also handle loading states:
<Doc path="posts/test">
<!-- data renders here in the default slot -->
<div slot="loading">Loading.... This will disappear when data is defined</div>
</Doc>Pass a startWith value to bypass the loading state. This is useful in SvelteKit when you need to hydrate server data into a realtime stream:
<Doc ref="posts/test" startWith={dataFromServer}>Collections provides array of objects containing the document data, as well as the id and ref for each result. It also provides a count slot prop for number of docs in the query.
<Collection ref="posts" let:data let:count>
<p>Fetched {count} documents</p>
{#each data as post}
{post.id}
{post.ref.path}
{post.content}
{/each}
</Collection>Collections can also take a Firestore Query instead of a path:
<script>
const myQuery = query(collection(firestore, 'posts'), where('test', '==', 'test'));
</script>
<Collection ref={myQuery} let:data>
</Collection>These components can be combined to build complex realtime apps. It's especially powerful when fetching data that requires the current user's UID or a related document's path.
<FirebaseApp {auth} {firestore}>
<SignedIn let:user>
<p>UID: {user.uid}</p>
<h3>Profile</h3>
<Doc ref={`posts/${user.uid}`} let:data={profile} let:ref={profileRef}>
{profile.content}
<h4>Comments</h4>
<Collection ref={profileRef.path + '/comments'} let:data={comments}>
{#each comments as comment}
<strong>{comment.content}</strong>
{/each}
<div slot="loading">Loading Comments...</div>
</Collection>
<div slot="loading">Loading Profile...</div>
</Doc>
</SignedIn>
<SignedOut>
<p>Sign in to see your profile</p>
</SignedOut>
</FirebaseApp>- Add support for Firebase Storage
- Add support for Firebase RTDB
- Add support for Firebase Analytics in SvelteKit
- Find a way to make TS generics with with Doc/Collection components