Sveltewrite

A wrapper for Appwrite collections, buckets, and authentication with realtime updates.

SvelteWrite

import * as SW from '@theofficialurban/sveltewrite';

Classes:

• SvelteWrite - Top Class
  • new SvelteWrite(client: Client) - Pass in your Appwrite client instance.

Utilities

• AppwriteChannels - Includes functions to fill and create channels
  • i.e AppwriteChannels.file("bucketId", "fileId") => "buckets.bucketId.files.fileId"
• AppwriteEvents - An object containing event strings based on CRUD events for buckets and documents

Types:

• BucketReturn - The slot prop type for Bucket component `let:bucket
• CollectionReturn - The slot prop type for Collection component let:collection
• DocumentReturn - Slot prop type for Document , let:document
• RealtimeCallback - Callback type for the <Realtime> component prop callback
• AppwriteEvent - See section on events and channels
• AppwriteChannel - See section on events and channels

Components (see below for more on each component)

• AccountProvider - Component, Account Provider
• Collection - Collection, Component
• Bucket - Bucket, Component
• Login - Login Component
• Document - Doc Component
• Realtime - Realtime Component
• File - Single bucket file

Quick Start

Example

First you should create an Appwrite client in +layout.ts

// on +layout.ts
import { Client } from 'appwrite';
import { SvelteWrite } from '@theofficialurban/sveltewrite';
export const load = async () => {
    const client = new Client().setEndpoint('...').setProject('...');
    const sveltewrite = new SvelteWrite(client);
    return {
        sveltewrite
    };
};

SW.Collection

The SvelteWrite.Collection component gives you access to a collection that will have a maintained state with realtime updates (live create / update / delete)

Props

• sveltewrite - SvelteWrite instance
• dbId - Database ID
• colId - Collection ID
• queries? - Queries array

Slots / Props

• default - Main Slot
  • collection - type CollectionReturn
• loading - Loading Slot

Example

<script lang="ts">
    import * as SW from '@theofficialurban/sveltewrite';
    import { page } from '$app/stores';
    const sveltewrite = $page.data.sveltewrite;
</script>

<SW.Collection {sveltewrite} dbId="123" colId="321" let:collection>
    <svelte:fragment slot="loading">Loading.....</svelte:fragment>
    {#each collection.documents as doc}
    <span>{doc.$id}</span>
    {/each}
    <SW.Collection> </SW.Collection
></SW.Collection>

SW.Bucket

Realtime Access to Storage Buckets

Props

• sveltewrite - SvelteWrite instance
• bucketId - Bucket ID
• queries? - Array of optional queries

Slots / Props

• default - Default Slot
  • bucket - type BucketReturn
• loading - Loading Slot

Example

<script lang="ts">
    import * as SW from '@theofficialurban/sveltewrite';
    import { page } from '$app/stores';
    const sveltewrite = $page.data.sveltewrite;
</script>

<SW.Bucket {sveltewrite} bucketId="123" let:bucket>
    <svelte:fragment slot="loading">Loading.....</svelte:fragment>
    {#each bucket.files as file}
    <span>{file.$id}</span>
    {/each}
    <SW.Bucket> </SW.Bucket
></SW.Bucket>

SW.AccountProvider

Props sveltewrite - SvelteWrite instance

Slots / Props

No Default Slot

• loggedIn - Logged in User
  • currentUser - Models.User<..>
• loggedOut - Logged out User

Example

<script lang="ts">
    import * as SW from '@theofficialurban/sveltewrite';
    import { page } from '$app/stores';
    const sveltewrite = $page.data.sveltewrite;
</script>

<!-- Can use the login component too -->

<SW.AccountProvider {sveltewrite}>
    <svelte:fragment slot="loggedIn" let:currentUser>
        Logged in as {currentUser.name}
    </svelte:fragment>

    <svelte:fragment slot="loggedOut">
        <SW.Login {sveltewrite} />
    </svelte:fragment>
    <SW.AccountProvider></SW.AccountProvider
></SW.AccountProvider>

SW.Document

A document with realtime updates

Props

• sveltewrite - SvelteWrite instance
• dbId - Database ID
• colId - Collection ID
• docId - Document ID
• queries? - Array of optional queries

Slots / Props

• default - Document
  • document - type DocumentReturn
• loading - Loading State

Example

<script lang="ts">
    import * as SW from '@theofficialurban/sveltewrite';
    import { page } from '$app/stores';
    const sveltewrite = $page.data.sveltewrite;
</script>

<SW.Document {sveltewrite} dbId="123" colId="123" docId="123" let:document>
    {document.item.$id}
    <SW.Document> </SW.Document
></SW.Document>

SW.Realtime

Types & Enums

const AppwriteChannels: AppwriteChannel = {
    account: () => 'account',
    collectionDocuments: (dbId: string, colId: string) =>
        `databases.${dbId}.collections.${colId}.documents`,
    documents: () => 'documents',
    document: (dbId: string, colId: string, itemId: string) =>
        `databases.${dbId}.collections.${colId}.documents.${itemId}`,
    files: () => 'files',
    file: (bucketId: string, itemId: string) => `buckets.${bucketId}.files.${itemId}`,
    bucket: (bucketId: string) => `buckets.${bucketId}.files`,
    teams: () => 'teams',
    team: (teamId: string) => `teams.${teamId}`,
    memberships: () => 'memberships',
    membership: (memId: string) => `memberships.${memId}`,
    executions: () => 'executions',
    execution: (exeId: string) => `executions.${exeId}`,
    function: (fnId: string) => `functions.${fnId}`
};
/**
 * Mapping of Events to the Event Strings
 * AppwriteEvent => string
 */
export const AppwriteEvents: AppwriteEvent = {
    DOCUMENT_DELETE: 'databases.*.collections.*.documents.*.delete',
    DOCUMENT_CREATE: 'databases.*.collections.*.documents.*.create',
    DOCUMENT_UPDATE: 'databases.*.collections.*.documents.*.update',
    BUCKET_CREATE: 'buckets.*.files.*.create',
    BUCKET_DELETE: 'buckets.*.files.*.delete',
    BUCKET_UPDATE: 'buckets.*.files.*.update'
};

Getting a Channel /w Information

For instance, to listen to the channel for a file id 123 in storage bucket "exampleBucket"

AppwriteChannels.file('exampleBucket', '123');
// Returns: `buckets.exampleBucket.files.123`
// Listening for changes on file #123 in exampleBucket

Props

• sveltewrite - SvelteWrite instance
• channels - AppwriteChannel[]
• callback - RealtimeCallback

Slots / Props

• default
  • history - A store that stores the history of the current realtime stream.
    • type RealtimeResponseEvent<Record<string, unknown>>[]

Example

<script lang="ts">
    import type { PageData } from './$types.js';
    import * as SW from '../../../dist/index.js';
    import type { RealtimeCallback } from '../../../dist/index.js';
    let { data } = $props<{ data: PageData }>();

    const sveltewrite = data.sveltewrite;
    const AppwriteChannels = SW.AppwriteChannels;
    const channels = [
        // Listening for changes on this document
        AppwriteChannels.document('main', 'posts', '6595c652e8c81dbcf4f9')
    ];

    const callback: RealtimeCallback = (e) => {
        console.log(e);
    };
</script>

<SW.Realtime {callback} {channels} {sveltewrite} let:history>
        {@html JSON.stringify(history)}
</SW.Realtime>

SW.File

Gets a single file from a storage bucket and returns that file as a Blob

Props

• bucketId - The ID of the bucket
• fileId - The ID of the file to get

Slots/Props

• No Slots
  • let:file - Gives you the Blob with the fetched file
  • let:url - Gives you the URL to download the file.

Example

<SW.File {sveltewrite} bucketId="packages" fileId="658a453cd423c1621471" let:file let:url>
        {url}
</SW.File>