website·Indexed 30 days ago
https://firebase-svelte.vercel.appA collection of stores and components for integrating real-time Firebase services into Svelte and SvelteKit applications. It provides specialized components and stores for Firestore (e.g., <Collection>, <Doc>), Realtime Database (<Node>, <NodeList>), Firebase Storage (<StorageList>, <DownloadUrl>), Firebase Auth (<User>), and Remote Config.
<Doc> component creates a store from a Firestore document reference and manages the data fetching lifecycle. It provides specific slots for handling the loading state, the successful data retrieval, and the fallback state when data is not found.<User> component provides a declarative way to render different UI states based on the Firebase authentication status. It utilizes named slots to handle loading, signed-in, and signed-out states.<StorageList> component is used to fetch and display a list of files from a specific Firebase Storage reference. It provides dedicated slots for handling the loading state, the successful data retrieval, and fallback scenarios when data is not found.<DownloadUrl> component fetches the download URL for a specified file in Firebase Storage. It provides different slots for handling the loading state, the successful retrieval of the link, and fallback scenarios when data is not found.<CollectionGroup> component creates a store from a Firestore collection reference. It handles the data fetching lifecycle and provides specific slots for loading, data display, and fallback states. If the <FirebaseApp> component is placed at the root of the application, providing the firestore instance explicitly is optional.<FirebaseApp> component serves as the root of a Firebase application. It provides the necessary Firebase SDK instances to all child components, eliminating the need to import the SDKs repeatedly throughout the component tree. You only need to pass the specific Firebase service instances (e.g., auth, firestore) that your application requires.<script>
import { FirebaseApp } from 'firebase-svelte';
// Import only the SDK instances you need from your firebase config file
import {
auth,
firestore,
realtimeDb,
remoteConfig,
storage
} from '$lib/firebase';
</script>
<FirebaseApp
{auth}
{firestore}
{realtimeDb}
{remoteConfig}
{storage}
>
<slot />
</FirebaseApp>npm install firebase-svelte firebase<Node> component creates a reactive store from a Firebase Realtime Database reference. It manages the data fetching lifecycle, providing specific slots for loading, success (data found), and fallback (data not found) states.FirebaseApp, User, Doc, Collection) that wrap stores to make data fetching more modular. These components use the let: directive to expose data to their slots, allowing for easy nesting of dependent data (e.g., fetching a user, then their document, then a sub-collection of comments).<script>
import { FirebaseApp, Collection, Doc, User } from 'firebase-svelte';
import { firestore, auth } from '$lib/firebase';
</script>
<!-- 1. Provide Firebase instances -->
<FirebaseApp {auth} {firestore}>
<!-- 2. Access User data -->
<User let:user>
<p>Hello, {user.displayName}</p>
<!-- 3. Access a Document based on User UID -->
<Doc ref={`posts/${user.uid}`} let:data={post} let:ref={postRef}>
<h2>{post.title}</h2>
<!-- 4. Access a Collection based on Document path -->
<Collection ref={`${postRef.path}/comments`} let:data={comments}>
{#each comments as comment}
<p>{comment.content}</p>
{/each}
</Collection>
</Doc>
</User>
</FirebaseApp>Use the User, Doc, and Collection components to reactively fetch data from Firebase. These components use the let: directive to expose the fetched data to their slot content.
<User>: Provides the current authenticated user object.<Doc>: Fetches a single document based on the provided ref path.<Collection>: Fetches a collection of documents based on the provided ref path.<script>
import { Collection, Doc, User } from 'firebase-svelte';
</script>
<User let:user>
<p>Hello, {user.displayName}</p>
<Doc
ref={`posts/${user.uid}`}
let:data={post}
let:ref={postRef}
>
<h2>{post.title}</h2>
<Collection
ref={`${postRef.path}/comments`}
let:data={comments}
>
{#each comments as comment}
<p>{comment.content}</p>
{/each}
</Collection>
</Doc>
</User>createDownloadUrlStore(storage, ref, options) creates a Svelte store that automatically manages the download URL for a specified Firebase Storage file. It provides the URL value, a loading state, and any potential errors.// Example usage
const downloadUrlStore = createDownloadUrlStore(storage, 'path/to/file.jpg');
// In a Svelte component:
// $downloadUrlStore will contain the URL string or null