Skip to content

whitventures/sveltefire

 
 

Repository files navigation

SvelteFire

npm Discord License
Cybernetically Enhanced Firebase Apps

A minimal, yet powerful library that puts realtime Firebase data into Svelte stores.

Build Complex Apps Faster

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!

Gaze in awe at the example below where we fetch multiple levels of realtime user data with just a few lines of Svelte code:

<!-- 1. 🔥 Firebase App -->
<FirebaseApp {auth} {firestore}>

  <!-- 2. 👤 Get the current user -->
  <SignedIn let:user>

    <p>Howdy, {user.uid}</p>

    <!-- 3 (a). 📜 Get a Firestore document owned by a user -->
    <Doc ref={`posts/${user.uid}`} let:data={post} let:ref={postRef}>

      <h2>{post.title}</h2>

      <!-- 4 (a). 💬 Get all the comments in its subcollection -->
      <Collection ref={postRef.path + '/comments'} let:data={comments}>
        {#each comments as comment}

        {/each}
...

Each component in this example above is underpinned by a Svelte store. These custom stores can be used for fine-grained control and to implement your own custom patterns.

Use stores to access Firebase data with Svelte's reactive $ syntax:

<script>
    import { docStore } from 'sveltefire';
    import { firestore } from '$lib/firebase'; // your firestore instance

    const post = docStore(firestore, 'posts/id');
</script>

{$post?.title}

About

Cybernetically enhanced Firebase apps

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 50.0%
  • Svelte 44.5%
  • JavaScript 4.6%
  • HTML 0.9%