svelte-appwrite
Advanced tools
Easy to use [Appwrite](https://appwrite.io/) components for Svelte. Install it:
Easy to use Appwrite components for Svelte. Install it:
npm install svelte-appwrite
# or
yarn svelte-appwrite
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}
...
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>
| Name | Description |
|---|---|
endpoint | Your Appwrite endpoint |
project | Your project ID |
locale | Optional The users locale |
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>
let:actions object
Object with function.
| Name | Description |
|---|---|
create(email, password, name) | Registers a new user. |
on:success
Triggers on successful register.
| Name | Description |
|---|---|
response | Response |
on:failure
Triggers on failed register.
| Name | Description |
|---|---|
response | Response |
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>
let:authorize function
Initiates login.
| Name | Description |
|---|---|
email | |
password | Password |
on:success
Triggers on successful login.
| Name | Description |
|---|---|
email |
on:failure
Triggers on failed login.
| Name | Description |
|---|---|
error | Error object. |
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>
| Name | Description |
|---|---|
provider | OAuth2 provider |
success | Success url |
failure | Failure url |
let:authorize function
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>
let:user object
Get currently logged in user data.
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>
| Name | Description |
|---|---|
collection | Collection unique ID. |
| additional | same as here |
let:documents array
Array of documents.
let:actions object
Object with function.
| Name | Description |
|---|---|
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 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>
| Name | Description |
|---|---|
id | Document unique ID |
collection | Collection unique ID |
| or | |
document | Document passed from <Collection /> |
let:document object
A JSON object with the document data.
let:actions object
Object with function.
| Name | Description |
|---|---|
update(data) | Update the document. |
remove() | Deletes the document. |
reload() | Re-fetch document. |
on:change
Triggers on update or remove login.
The Account components allow you to manage a user account.
<User />let:actions
| Name | Description |
|---|---|
reload() | Reload. |
logout() | Logout current session. |
logoutAll() | Logout from all session. |
logoutFrom(session) | Logout from specific session. |
logout success.logout failure.logoutFrom success.logoutFrom failure.logoutAll success.logoutAll failure.<Create />let:actions
| Name | Description |
|---|---|
create(email, password, name) | Creates a user. |
create success.create failure.<Delete />let:actions
| Name | Description |
|---|---|
delete() | Deletes currently logged in user. |
delete success.delete failure.<Preferences />let:actions
| Name | Description |
|---|---|
reload() | Reloads preferences. |
update(prefs) | Update preferences. |
reload success.reload failure.update success.update failure.<RecoverPassword />let:actions
| Name | Description |
|---|---|
recover(email, url) | Recover password. |
complete(user, secret, password, passwordAgain) | Complete password recovery. |
reload success.reload failure.update success.update failure.<Update />let:actions
| Name | Description |
|---|---|
name(name) | Update name. |
email(email, password) | Update email. |
password(password, oldPassword) | Update password. |
name success.name failure.email success.email failure.password success.password failure.<Verification />let:actions
| Name | Description |
|---|---|
create(url) | Create Verification. |
complete(user, secret) | Complete Verification. |
create success.create failure.complete success.complete failure.The Auth components allow you to authenticate a user account.
<AuthEmail />authorize success.authorize failure.<AuthOAuth2 />| Name | Description |
|---|---|
provider | OAuth2 provider |
success | Success url |
failure | Failure url |
let:authorize()
The Avatar components aim to help you complete everyday tasks related to your app image, icons, and avatars.
<Browser /><CreditCard /><Favicon /><Flag /><Image /><QR />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 />let:actions
| Name | Description |
|---|---|
reload() | Reload. |
create(data, read, write) | Creates a Document. |
<Document />let:actions
| Name | Description |
|---|---|
reload() | Reload. |
update(data) | Updates a Document. |
remove() | Removes a Document. |
The Storage components allow you to manage your project files. You can upload, view, download, and query all your project files.
<Storage />let:actions
| Name | Description |
|---|---|
create(file, read, write) | Uploads a file. |
<FileList />let:actions
| Name | Description |
|---|---|
reload() | Reload. |
<File />let:actions
| Name | Description |
|---|---|
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. |
The Locale components allow you to customize your app based on your users' location.
<Continents />let:actions
| Name | Description |
|---|---|
reload() | Reload. |
<Countries />let:actions
| Name | Description |
|---|---|
reload() | Reload. |
<Currencies />let:actions
| Name | Description |
|---|---|
reload() | Reload. |
<Locale />let:actions
| Name | Description |
|---|---|
reload() | Reload. |
<PhoneCodes />let:actions
| Name | Description |
|---|---|
reload() | Reload. |
FAQs
Easy to use [Appwrite](https://appwrite.io/) components for Svelte. Install it:
The npm package svelte-appwrite receives a total of 3 weekly downloads. As such, svelte-appwrite popularity was classified as not popular.
We found that svelte-appwrite demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Research
/Security News
GitHub account BufferZoneCorp published sleeper packages that later added credential theft, GitHub Actions tampering, fake go wrappers, and SSH persistence.
Research
/Security News
Socket found a malicious Intercom PHP package on Packagist using Composer plugin execution to steal credentials and spread across ecosystems.
Research
/Security News
Compromised intercom-client@7.0.4 npm package is tied to the ongoing Mini Shai-Hulud worm attack targeting developer and CI/CD secrets.