Introduction

Overview

Svelte-Firekit is a powerful Firebase integration library designed specifically for Svelte applications. It leverages Svelte’s reactivity system to provide a seamless, type-safe interface to Firebase services with minimal boilerplate code.

Features

Svelte-Native Reactivity

• Built using Svelte’s $state and $derived for true Svelte reactivity
• Automatic subscription management
• SSR-friendly with browser-only execution
• Zero-config reactive state management

Authentication

• Complete Firebase Authentication integration with Svelte stores
• Built-in user state management and persistence
• Support for multiple authentication providers (Google, Email/Password)
• Reactive user state with automatic updates
• User profile management utilities
• Presence system with real-time user status tracking

Firestore Integration

• Reactive document and collection stores
• Real-time updates with Svelte’s reactivity system
• Efficient data mutations with optimistic updates
• Support for complex queries and filtering
• Automatic timestamp handling for document creation and updates
• Built-in offline persistence and caching

Realtime Database

• Real-time data synchronization with Svelte stores
• Reactive state management
• Support for lists and single value references
• Automatic data transformation and formatting

Storage

• File upload management with progress tracking
• Download URL generation and caching
• Storage browser with folder support
• Upload task management (pause, resume, cancel)

Advanced Features

• Singleton pattern implementation for consistent state management
• Automatic error handling and loading states
• TypeScript support with full type inference
• Browser-only execution for better SSR compatibility
• Multi-tab synchronization support

Example Usage

Here’s a quick example of how to use Svelte-Firekit in your Svelte application:

<script lang="ts">
  import { 
    firekitAuth, 
    firekitUser, 
    firekitDoc, 
    firekitCollection 
  } from 'svelte-firekit';

  // Reactive document store
  const userProfile = firekitDoc<UserProfile>(`users/${userId}`);


  // Reactive collection
  const posts = firekitCollection<Post>('posts');

  // Handle sign in
  async function signIn() {
    await firekitAuth.signInWithGoogle();
  }
</script>

{#if $firekitUser.isLoggedIn}
  <h1>Welcome, {$firekitUser.displayName}</h1>
  
  {#if $userProfile.loading}
    <p>Loading profile...</p>
  {:else if $userProfile.data}
    <UserProfileComponent profile={$userProfile.data} />
  {/if}
  
  {#if $posts.data}
    {#each $posts.data as post}
      <PostComponent {post} />
    {/each}
  {/if}
{:else}
  <button onclick={signIn}>Sign in with Google</button>
{/if}

Key Benefits

1. Native Svelte Integration: Seamlessly integrates with Svelte’s reactivity system and component lifecycle.

2. Reactive by Design: All Firebase operations automatically update your Svelte stores, eliminating the need for manual state management.

3. Type Safety: Full TypeScript support ensures type safety across your application.

4. Simplified API: Complex Firebase operations are wrapped in a simple, Svelte-friendly API.

5. Performance Optimized: Built-in caching and offline support for better performance.

6. SSR Friendly: Automatic browser-only execution makes it compatible with SvelteKit’s server-side rendering.

7. Real-time by Default: All data is real-time and reactive without additional configuration.

8. Svelte-Centric Error Handling: Built-in error handling and loading states designed for Svelte’s templating system.

9. Lightweight: Minimal overhead on top of Firebase SDK, keeping your application bundle size small.