{"id":25823348,"url":"https://github.com/brennerm/sveltepocket","last_synced_at":"2025-02-28T11:53:03.507Z","repository":{"id":279250775,"uuid":"936655674","full_name":"brennerm/sveltepocket","owner":"brennerm","description":"Svelte stores and components to query data (with realtime updates) from PocketBase","archived":false,"fork":false,"pushed_at":"2025-02-24T16:23:15.000Z","size":135,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-24T16:33:22.885Z","etag":null,"topics":["pocketbase","pocketbase-realtime","svelte","svelte-components","svelte5","sveltekit"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brennerm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-21T13:09:06.000Z","updated_at":"2025-02-24T16:25:14.000Z","dependencies_parsed_at":"2025-02-24T16:33:26.351Z","dependency_job_id":"2d840e77-217d-45d4-a209-7b8b67b3e7df","html_url":"https://github.com/brennerm/sveltepocket","commit_stats":null,"previous_names":["brennerm/sveltepocket"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brennerm%2Fsveltepocket","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brennerm%2Fsveltepocket/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brennerm%2Fsveltepocket/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brennerm%2Fsveltepocket/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brennerm","download_url":"https://codeload.github.com/brennerm/sveltepocket/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241145844,"owners_count":19917525,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pocketbase","pocketbase-realtime","svelte","svelte-components","svelte5","sveltekit"],"created_at":"2025-02-28T11:53:02.841Z","updated_at":"2025-02-28T11:53:03.496Z","avatar_url":"https://github.com/brennerm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SveltePocket\n\n![The Svelte and Pocketbase logo shaking hands](https://github.com/brennerm/sveltepocket/blob/main/logo.png?raw=true)\n\nSvelte 5-ready stores and components to bring data from any Pocketbase instance into your Svelte application (even with realtime updates 🤫).\n\n## Installation\n\n```bash\nnpm install @shipitdev/sveltepocket\n```\n\n## Setup\n\nCall 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.\n\n```svelte\n\u003cscript\u003e\n  import { init } from '@shipitdev/sveltepocket';\n  import Pocketbase from 'pocketbase';\n\n  const pb = new Pocketbase(POCKETBASE_URL);\n  init(pb);\n\u003c/script\u003e\n```\n\n## Stores\n\nThe 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.\n\n### auth\n\nA readable store that holds the current user's authentication status and user record.\n\n```svelte\n\u003cscript\u003e\n  import { auth } from '@shipitdev/sveltepocket';\n\u003c/script\u003e\n\n{#if $auth.isAuthenticated}\n  \u003cp\u003eWelcome, {$auth.user.email}!\u003c/p\u003e\n{/if}\n```\n\n### createRecordStore\n\nCreates a readable store that fetches a single record identified by id or filter from a Pocketbase collection.\n\n```svelte\n\u003cscript\u003e\n  import { createRecordStore } from '@shipitdev/sveltepocket';\n\n  const post = createRecordStore('posts', { id: 'YOUR_RECORD_ID' });\n\u003c/script\u003e\n\n{#if $post.record}\n  \u003ch1\u003e{$post.record.title}\u003c/h1\u003e\n{/if}\n```\n\n### createRecordsStore\n\nCreates a readable store that fetches multiple records from a Pocketbase collection.\n\n```svelte\n\u003cscript\u003e\n  import { createRecordsStore } from '@shipitdev/sveltepocket';\n\n  const posts = createRecordsStore('posts');\n\u003c/script\u003e\n\n{#if $posts.records}\n  \u003cul\u003e\n    {#each $posts.records as post}\n      \u003cli\u003e{post.title}\u003c/li\u003e\n    {/each}\n  \u003c/ul\u003e\n{/if}\n```\n\n## Components\n\nIf you only care about rendering the queried data, these components are the way to go.\n\nYou 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.\n\n### \\\u003cRecord\u003e\n\nA component that fetches a single record either by ID or filter from a Pocketbase collection and renders it.\n\n```svelte\n\u003c!-- by ID --\u003e\n\u003cRecord collection=\"posts\" id=\"YOUR_RECORD_ID\" expand=\"author\"\u003e\n  {#snippet render(post)}\n    \u003ch1\u003e{post.title}\u003c/h1\u003e\n    \u003cspan\u003e by {post.expand.author.name}\u003c/span\u003e\n  {/snippet}\n\u003c/Record\u003e\n\n\u003c!-- by filter --\u003e\n\u003cRecord collection=\"posts\" filter=\"published = true\"\u003e\n  {#snippet render(post)}\n    \u003ch1\u003e{post.title}\u003c/h1\u003e\n  {/snippet}\n\u003c/Record\u003e\n```\n\n### \\\u003cRecords\u003e\n\nA component that fetches multiple records from a Pocketbase collection and renders them.\n\n```svelte\n\u003cRecords collection=\"posts\" expand=\"author\" sort=\"-publishedAt\" filter=\"published = true\"\u003e\n  {#snippet render(posts)}\n    \u003cul\u003e\n      {#each posts as post}\n        \u003cli\u003e{post.title} by {post.expand.author.name}\u003c/li\u003e\n      {/each}\n    \u003c/ul\u003e\n  {/snippet}\n\u003c/Records\u003e\n```\n\n## Realtime Updates\n\nAll 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.\n\nCombined with Svelte's reactivity, your app will rerender automatically when the data changes.\n\n```svelte\n\u003c!-- this will always show the latest data --\u003e\n\u003cRecords collection=\"posts\" realtime\u003e\n  {#snippet render(posts)}\n    \u003cul\u003e\n      {#each posts as post}\n        \u003cli\u003e{post.title}\u003c/li\u003e\n      {/each}\n    \u003c/ul\u003e\n  {/snippet}\n\u003c/Records\u003e\n```\n\n## Type Safety\n\nAll stores and components take an optional record type, e.g. generated by [pocketbase-typegen](https://github.com/patmood/pocketbase-typegen).\nThis gives you full type safety on the returned records.\n\n### Store\n\n```svelte\n\u003cscript\u003e\n  import { createRecordsStore } from '@shipitdev/sveltepocket';\n  import type { PostRecord } from './pocketbase-types.d.ts';\n\n  const posts = createRecordsStore\u003cPostRecord\u003e('posts');\n\u003c/script\u003e\n```\n\n### Components\n\n```svelte\n\u003cRecords collection=\"posts\"\u003e\n  {#snippet render(records: PostRecord[])}\n    ...\n  {/snippet}\n\u003c/Records\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrennerm%2Fsveltepocket","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrennerm%2Fsveltepocket","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrennerm%2Fsveltepocket/lists"}