https://github.com/brennerm/sveltepocket
Svelte stores and components to query data (with realtime updates) from PocketBase
https://github.com/brennerm/sveltepocket
pocketbase pocketbase-realtime svelte svelte-components svelte5 sveltekit
Last synced: 4 months ago
JSON representation
Svelte stores and components to query data (with realtime updates) from PocketBase
- Host: GitHub
- URL: https://github.com/brennerm/sveltepocket
- Owner: brennerm
- License: mit
- Created: 2025-02-21T13:09:06.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-24T16:23:15.000Z (4 months ago)
- Last Synced: 2025-02-24T16:33:22.885Z (4 months ago)
- Topics: pocketbase, pocketbase-realtime, svelte, svelte-components, svelte5, sveltekit
- Language: TypeScript
- Homepage:
- Size: 132 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SveltePocket
Svelte 5-ready stores and components to bring data from any Pocketbase instance into your Svelte application (even with realtime updates 🤫).
## Installation
```bash
npm install @shipitdev/sveltepocket
```
## Setup
Call the init method to pass your Pocketbase client SDK instance. This will be used by all stores and components so make sure it's authenticated according to your needs.
```svelte
import { init } from '@shipitdev/sveltepocket';
import Pocketbase from 'pocketbase';
const pb = new Pocketbase(POCKETBASE_URL);
init(pb);
```
## Stores
The stores provide an low level API to query data from your Pocketbase instance and are the best choice when you need to pre/postprocess the data instead of just rendering it onto the page.
### auth
A readable store that holds the current user's authentication status and user record.
```svelte
import { auth } from '@shipitdev/sveltepocket';
{#if $auth.isAuthenticated}
Welcome, {$auth.user.email}!
{/if}
```
### createRecordStore
Creates a readable store that fetches a single record identified by id or filter from a Pocketbase collection.
```svelte
import { createRecordStore } from '@shipitdev/sveltepocket';
const post = createRecordStore('posts', { id: 'YOUR_RECORD_ID' });
{#if $post.record}
{$post.record.title}
{/if}
```
### createRecordsStore
Creates a readable store that fetches multiple records from a Pocketbase collection.
```svelte
import { createRecordsStore } from '@shipitdev/sveltepocket';
const posts = createRecordsStore('posts');
{#if $posts.records}
- {post.title}
{#each $posts.records as post}
{/each}
{/if}
```
## Components
If you only care about rendering the queried data, these components are the way to go.
You can pass snippets that will be rendered during different states, e.g. when loading the data, when data is not found or when an error occurs.
### \
A component that fetches a single record either by ID or filter from a Pocketbase collection and renders it.
```svelte
{#snippet render(post)}
{post.title}
by {post.expand.author.name}
{/snippet}
{#snippet render(post)}
{post.title}
{/snippet}
```
### \
A component that fetches multiple records from a Pocketbase collection and renders them.
```svelte
{#snippet render(posts)}
- {post.title} by {post.expand.author.name}
{#each posts as post}
{/each}
{/snippet}
```
## Realtime Updates
All stores and components support the `realtime` parameter. If set to `true`, SveltePocket will setup a subscription to PocketBase's realtime updates and keep the data up to date.
Combined with Svelte's reactivity, your app will rerender automatically when the data changes.
```svelte
{#snippet render(posts)}
- {post.title}
{#each posts as post}
{/each}
{/snippet}
```
## Type Safety
All stores and components take an optional record type, e.g. generated by [pocketbase-typegen](https://github.com/patmood/pocketbase-typegen).
This gives you full type safety on the returned records.
### Store
```svelte
import { createRecordsStore } from '@shipitdev/sveltepocket';
import type { PostRecord } from './pocketbase-types.d.ts';
const posts = createRecordsStore<PostRecord>('posts');
```
### Components
```svelte
{#snippet render(records: PostRecord[])}
...
{/snippet}
```