Socket
Book a DemoInstallSign in
Socket

svelte-appwrite

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

svelte-appwrite

Easy to use [Appwrite](https://appwrite.io/) components for Svelte. Install it:

latest
npmnpm
Version
0.2.3-beta
Version published
Maintainers
1
Created
Source

svelte-appwrite (Beta)

Easy to use Appwrite components for Svelte. Install it:

npm install svelte-appwrite
# or 
yarn svelte-appwrite

Table of contents

Usage

You need a running instance of Appwrite to use this library. Go to https://appwrite.io/docs/installation for more instructions.

Psuedo Example

Handle multiple levels of async relational data (and their loading & fallback states) entirely from the Svelte HTML.

<!-- 1. 💪 Appwrite App -->
<Appwrite {...config}>

    <!-- 2. 😀 Get the current user -->
    <User let:user>

        <h1>Hello {user.name}!</h1>

        <!-- 3. 📚 Get all the documents from a collection -->
        <Collection collection="5f56a3035a01f" let:documents>
            You have {documents.length} documents.
            
            {#each documents as document}

                <!-- 4. 📜 Get a document -->
                <Document {document}>
                    Title: {document.title}
                    Text: {document.text}
...

Initialize

Must be initialised and wrap every svelte-appwrite component.

<script>
  import { Appwrite } from "svelte-appwrite";

  const config = {
    endpoint: "http://localhost/v1",
    project: "5f4938898667e",
    locale: "de",
  };
</script>

<Appwrite {...config}>
  ...
</Appwrite>

Properties

NameDescription
endpointYour Appwrite endpoint
projectYour project ID
localeOptional The users locale

Create user

Registers a new account.

<script>
  import { Create } from "svelte-appwrite";

  let email = "";
  let password = "";
  let name = "";

  const success = e => {
    //success callback
    // `e` contains the user object
  };

  const failure = e => {
    //failure callback
  }
</script>

<Create let:actions on:success on:failure>
  <input type="text" bind:value={email}>
  <input type="password" bind:value={password}>
  <input type="text" bind:value={name}>
  <button on:click={actions.create(email,password, name)}>Register</button>
</Create>

Directives

let:actions object

Object with function.

Arguments

NameDescription
create(email, password, name)Registers a new user.

Events

on:success

Triggers on successful register.

Arguments

NameDescription
responseResponse

on:failure

Triggers on failed register.

Arguments

NameDescription
responseResponse

Login via Email

Login via email and password.

<script>
  import { AuthEmail } from "svelte-appwrite";

  let email = "";
  let password = "";

  const success = e => {
    //success callback
    // `e` contains the user object
  };

  const failure = e => {
    //failure callback
  }
</script>

<AuthEmail let:authorize on:success on:failure>
  <input type="text" bind:value={email}>
  <input type="text" bind:value={password}>
  <button on:click={authorize(email,password)}>Login</button>
</AuthEmail>

Directives

let:authorize function

Initiates login.

Arguments

NameDescription
emailE-Mail
passwordPassword

Events

on:success

Triggers on successful login.

Arguments

NameDescription
emailE-Mail

on:failure

Triggers on failed login.

Arguments

NameDescription
errorError object.

Login via OAuth2

Login via an OAuth2 provider.

<script>
  import { AuthOAuth2 } from "svelte-appwrite";
</script>

<AuthOAuth2
  provider="google"
  success="http://localhost:5000?success"
  failure="http://localhost:5000?failure"
  let:authorize>
  <button on:click={authorize}>Login Google</button>
</AuthOAuth2>

Properties

NameDescription
providerOAuth2 provider
successSuccess url
failureFailure url

Directives

let:authorize function

Get user

Requests current user to check if logged in.

<script>
  import { User } from "svelte-appwrite";
</script>

<User let:user>
  <h1>Hello {user.name}!</h1>
  <div>{user.email}</div>

  <div slot="error">
    You are not logged in!
  </div>
</User>

Directives

let:user object

Get currently logged in user data.

Get Collection

Get a list of all the documents from a collection.

<script>
  import { Collection } from "svelte-appwrite";
</script>

<Collection collection="5f56a3035a01f" let:documents>
  You have {documents.length} documents.
</Collection>

Properties

NameDescription
collectionCollection unique ID.
additionalsame as here

Directives

let:documents array

Array of documents.

let:actions object

Object with function.

Arguments

NameDescription
reload()Re-fetch collection.
create(data, read, write)Create a new Document in the collection. read/write is optional and current user by default.

Get Document

Get a document. If you pass the document property with data from , there wont be any data requested.

<script>
  import { Document } from "svelte-appwrite";
</script>

<Document id="5f56a3asda01f" let:document>
  Title: {document.title}
  Text: {document.text}
</Document>

Properties

NameDescription
idDocument unique ID
collectionCollection unique ID
or
documentDocument passed from <Collection />

Directives

let:document object

A JSON object with the document data.

let:actions object

Object with function.

Arguments

NameDescription
update(data)Update the document.
remove()Deletes the document.
reload()Re-fetch document.

Events

on:change

Triggers on update or remove login.

API

Account

The Account components allow you to manage a user account.

<User />

Slots

  • loading
  • error

Directives

let:actions

NameDescription
reload()Reload.
logout()Logout current session.
logoutAll()Logout from all session.
logoutFrom(session)Logout from specific session.
  • let:user
  • let:error

Events

  • on:success On user fetch success.
  • on:failure On user fetch failure.
  • on:successLogout On logout success.
  • on:failureLogout On logout failure.
  • on:successLogoutFrom On logoutFrom success.
  • on:failureLogoutFrom On logoutFrom failure.
  • on:successLogoutAll On logoutAll success.
  • on:failureLogoutAll On logoutAll failure.

<Create />

Directives

let:actions

NameDescription
create(email, password, name)Creates a user.

Events

  • on:success On create success.
  • on:failure On create failure.

<Delete />

Directives

let:actions

NameDescription
delete()Deletes currently logged in user.

Events

  • on:success On delete success.
  • on:failure On delete failure.

<Preferences />

Slots

  • loading
  • error

Directives

let:actions

NameDescription
reload()Reloads preferences.
update(prefs)Update preferences.

Events

  • on:success On init and reload success.
  • on:failure On init and reload failure.
  • on:successUpdate On update success.
  • on:failureUpdate On update failure.

<RecoverPassword />

Directives

let:actions

NameDescription
recover(email, url)Recover password.
complete(user, secret, password, passwordAgain)Complete password recovery.

Events

  • on:successRecover On init and reload success.
  • on:failureRecover On init and reload failure.
  • on:successComplete On update success.
  • on:failureComplete On update failure.

<Update />

Directives

let:actions

NameDescription
name(name)Update name.
email(email, password)Update email.
password(password, oldPassword)Update password.

Events

  • on:successName On name success.
  • on:failureName On name failure.
  • on:successEmail On email success.
  • on:failureEmail On email failure.
  • on:successPassword On password success.
  • on:failurePassword On password failure.

<Verification />

Directives

let:actions

NameDescription
create(url)Create Verification.
complete(user, secret)Complete Verification.

Events

  • on:successCreate On create success.
  • on:failureCreate On create failure.
  • on:successComplete On complete success.
  • on:failureComplete On complete failure.

Auth

The Auth components allow you to authenticate a user account.

<AuthEmail />

Slots

  • loading
  • success
  • error

Directives

  • let:authorize(email, password)
  • let:user
  • let:error

Events

  • on:success On authorize success.
  • on:failure On authorize failure.

<AuthOAuth2 />

Properties

NameDescription
providerOAuth2 provider
successSuccess url
failureFailure url

Directives

let:authorize()

Avatars

The Avatar components aim to help you complete everyday tasks related to your app image, icons, and avatars.

<Browser />

Arguments

  • code
  • width
  • height
  • quality

Directives

  • let:src Image link

<CreditCard />

Arguments

  • code
  • width
  • height
  • quality

Directives

  • let:src Image link

<Favicon />

Arguments

  • url

Directives

  • let:src Image link

<Flag />

Arguments

  • code
  • width
  • height
  • quality

Directives

  • let:src Image link

<Image />

Arguments

  • url
  • width
  • height

Directives

  • let:src Image link

<QR />

Arguments

  • text
  • size
  • margin
  • download

Directives

  • let:src Image link

Database

The Database components allow you to create structured collections of documents, query and filter lists of documents, and manage an advanced set of read and write access permissions.

<Collection />

Arguments

  • id
  • filters
  • offset
  • limit
  • orderField
  • orderType
  • orderCast
  • search
  • first
  • last

Slots

  • loading
  • error

Directives

let:actions

NameDescription
reload()Reload.
create(data, read, write)Creates a Document.
  • let:documents
  • let:error

<Document />

Arguments

  • id
  • collection
  • document

Slots

  • loading
  • error

Directives

let:actions

NameDescription
reload()Reload.
update(data)Updates a Document.
remove()Removes a Document.
  • let:document
  • let:error

Storage

The Storage components allow you to manage your project files. You can upload, view, download, and query all your project files.

<Storage />

Directives

let:actions

NameDescription
create(file, read, write)Uploads a file.
  • let:files

<FileList />

Arguments

  • search
  • limit
  • offset
  • orderType

Slots

  • loading
  • error

Directives

let:actions

NameDescription
reload()Reload.
  • let:files
  • let:error

<File />

Arguments

  • file

Directives

let:actions

NameDescription
download()Downloads file.
view(as)Get file for View.
preview(width, height, quality, background, output)Get file for preview.
update(read, write)Updates a file.
delete()Deletes a file.

Locale

The Locale components allow you to customize your app based on your users' location.

<Continents />

Directives

let:actions

NameDescription
reload()Reload.
  • let:continents

Slots

  • loading
  • error

<Countries />

Arguments

  • eu

Slots

  • loading
  • error

Directives

let:actions

NameDescription
reload()Reload.
  • let:countries

<Currencies />

Slots

  • loading
  • error

Directives

let:actions

NameDescription
reload()Reload.
  • let:currencies

<Locale />

Slots

  • loading
  • error

Directives

let:actions

NameDescription
reload()Reload.
  • let:code

<PhoneCodes />

Slots

  • loading
  • error

Directives

let:actions

NameDescription
reload()Reload.
  • let:codes

Keywords

svelte

FAQs

Package last updated on 13 May 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts