Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/koodeau/metawrite

Appwrite SDK with ready to go components for Svelte / SvelteKit
https://github.com/koodeau/metawrite

appwrite collaborate components github learn library sdk svelte sveltekit

Last synced: 4 months ago
JSON representation

Appwrite SDK with ready to go components for Svelte / SvelteKit

Lists

README

        


Metawrite





# Support Us

**Get free $100 credits on DigitalOcean:**



**Join our Discord:**



---

[![npm Package](https://github.com/koodeau/metawrite/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/koodeau/metawrite/actions/workflows/npm-publish.yml)

Metawrite is [Appwrite](https://appwrite.io/) SDK with ready to go components for `Svelte` / `SvelteKit`

This package is maintained by [Increasio](https://increas.io).

> Note: versions `x.x.n` means some minor changes to package documentation or typings.
>
> versions `x.n.x` might include some minor breaking changes. See [Release Notes](https://github.com/koodeau/metawrite/blob/main/CHANGELOG.md).
>
> versions `n.x.x` might include some major breaking changes. See [Release Notes](https://github.com/koodeau/metawrite/blob/main/CHANGELOG.md).

## Important info

The package is fully working and compatible with Appwrite Server 0.12, Web SDK 6, and SvelteKit. But people are currently facing difficulties with `npm install metawrite`. We have ready and configured [**SvelteKit template**](https://github.com/koodeau/sveltekit-metawrite) that uses Metawrite and could be also used as Docker image like described [here](https://github.com/koodeau/sveltekit-metawrite#appwrite-and-sveltekit-combo).

> Please consider using [template](https://github.com/koodeau/sveltekit-metawrite), this is temporary

# Documentation

### Installation

Using NPM:

```bash
npm install metawrite
```

Using Yarn:

```bash
yarn add metawrite
```

# Table of contents

- [Support Us](#support-us)
- [Important info](#important-info)
- [Documentation](#documentation)
- [Installation](#installation)
- [Table of contents](#table-of-contents)
- [Usage](#usage)
- [Initialize](#initialize)
- [Properties](#properties)
- [Create user](#create-user)
- [Directives](#directives)
- [Arguments](#arguments)
- [Events](#events)
- [Arguments](#arguments-1)
- [Arguments](#arguments-2)
- [Login via Email](#login-via-email)
- [Directives](#directives-1)
- [Arguments](#arguments-3)
- [Events](#events-1)
- [Arguments](#arguments-4)
- [Arguments](#arguments-5)
- [Login via OAuth2](#login-via-oauth2)
- [Properties](#properties-1)
- [Directives](#directives-2)
- [Get user](#get-user)
- [Directives](#directives-3)
- [Get Collection](#get-collection)
- [Properties](#properties-2)
- [Directives](#directives-4)
- [Arguments](#arguments-6)
- [Get Document](#get-document)
- [Properties](#properties-3)
- [Directives](#directives-5)
- [Arguments](#arguments-7)
- [Events](#events-2)
- [API](#api)
- [Account](#account)
- [``](#user-)
- [Slots](#slots)
- [Directives](#directives-6)
- [Events](#events-3)
- [Example](#example)
- [``](#create-)
- [Directives](#directives-7)
- [Events](#events-4)
- [Example](#example-1)
- [``](#preferences-)
- [Slots](#slots-1)
- [Directives](#directives-8)
- [Events](#events-5)
- [Example](#example-2)
- [``](#recoverpassword-)
- [Directives](#directives-9)
- [Events](#events-6)
- [Example](#example-3)
- [``](#update-)
- [Directives](#directives-10)
- [Events](#events-7)
- [Example](#example-4)
- [``](#verification-)
- [Directives](#directives-11)
- [Events](#events-8)
- [Example](#example-5)
- [Auth](#auth)
- [``](#authemail-)
- [Slots](#slots-2)
- [Directives](#directives-12)
- [Events](#events-9)
- [Example](#example-6)
- [``](#authoauth2-)
- [Properties](#properties-4)
- [Example](#example-7)
- [``](#createanonymoussession-)
- [Directives](#directives-13)
- [Example](#example-8)
- [``](#createjwt-)
- [Directives](#directives-14)
- [Example](#example-9)
- [``](#magicurl-)
- [Directives](#directives-15)
- [Example](#example-10)
- [Avatars](#avatars)
- [``](#browser-)
- [Arguments](#arguments-8)
- [Directives](#directives-16)
- [Example](#example-11)
- [``](#creditcard-)
- [Arguments](#arguments-9)
- [Directives](#directives-17)
- [Example](#example-12)
- [``](#favicon-)
- [Arguments](#arguments-10)
- [Directives](#directives-18)
- [``](#flag-)
- [Arguments](#arguments-11)
- [Directives](#directives-19)
- [Example](#example-13)
- [``](#image-)
- [Arguments](#arguments-12)
- [Directives](#directives-20)
- [Example](#example-14)
- [``](#qr-)
- [Arguments](#arguments-13)
- [Directives](#directives-21)
- [Example](#example-15)
- [Database](#database)
- [``](#collection-)
- [Arguments](#arguments-14)
- [Slots](#slots-3)
- [Directives](#directives-22)
- [Example](#example-16)
- [``](#document-)
- [Arguments](#arguments-15)
- [Slots](#slots-4)
- [Directives](#directives-23)
- [Example](#example-17)
- [Realtime](#realtime)
- [Arguments](#arguments-16)
- [Directives](#directives-24)
- [Example](#example-18)
- [Storage](#storage)
- [``](#storage-)
- [Directives](#directives-25)
- [Example](#example-19)
- [``](#filelist-)
- [Arguments](#arguments-17)
- [Slots](#slots-5)
- [Directives](#directives-26)
- [Example](#example-20)
- [``](#file-)
- [Arguments](#arguments-18)
- [Directives](#directives-27)
- [Example](#example-21)
- [Functions](#functions)
- [``](#function-)
- [Directives](#directives-28)
- [Slots](#slots-6)
- [Example](#example-22)
- [Locale](#locale)
- [``](#continents-)
- [Directives](#directives-29)
- [Slots](#slots-7)
- [Example](#example-23)
- [``](#countries-)
- [Arguments](#arguments-19)
- [Slots](#slots-8)
- [Directives](#directives-30)
- [Example](#example-24)
- [``](#currencies-)
- [Slots](#slots-9)
- [Directives](#directives-31)
- [Example](#example-25)
- [``](#languages-)
- [Slots](#slots-10)
- [Directives](#directives-32)
- [Example](#example-26)
- [``](#locale-)
- [Slots](#slots-11)
- [Directives](#directives-33)
- [Example](#example-27)
- [``](#phonecodes-)
- [Slots](#slots-12)
- [Directives](#directives-34)
- [Example](#example-28)
- [Stack](#stack)

# 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 markup.

```svelte


Hello {user.name}!



You have {documents.length} documents.

{#each documents as document}



Title: {document.title}
Text: {document.text}
...
```

## Initialize

Must be initialised and wrap every `metawrite` component.

```svelte

import { Appwrite } from 'metawrite';

const config = {
endpoint: 'http://localhost/v1',
project: 'demo',
locale: 'fr'
};

...
```

### Properties

| Name | Description |
| ---------- | ----------------------------------------------- |
| `endpoint` | Your Appwrite endpoint. `@type - {string}` |
| `project` | Your project ID. `@type - {string}` |
| `locale` | _Optional_ The users locale. `@type - {string}` |
| `realtime` | _Optional_ Set Custom realtime endpoint. By default the same as `endpoint`. `@type - {string}` |

## Create user

Registers a new account.

```svelte

import { Create } from 'metawrite';

let email = '';
let password = '';
let name = '';

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

const failure = (e) => {
//failure callback
};




Register

```

### Directives

**let:actions** `object`

Object with function.

#### Arguments

| Name | Description |
| ------------------------------- | ---------------------------------------- |
| `create(email, password, name)` | Registers a new user. `@type - {string}` |

### Events

**on:success**

Triggers on successful register.

#### Arguments

| Name | Description |
| ---------- | ----------- |
| `response` | Response |

**on:failure**

Triggers on failed register.

#### Arguments

| Name | Description |
| ---------- | ----------- |
| `response` | Response |

## Login via Email

Login via email and password.

```svelte

import { AuthEmail } from 'metawrite';

let email = '';
let password = '';

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

const failure = (e) => {
//failure callback
};



Login

```

### Directives

**let:authorize** `function`

Initiates login.

#### Arguments

| Name | Description |
| ---------- | ---------------------------- |
| `email` | E-Mail. `@type - {string}` |
| `password` | Password. `@type - {string}` |

### Events

**on:success**

Triggers on successful login.

#### Arguments

| Name | Description |
| ------- | -------------------------- |
| `email` | E-Mail. `@type - {string}` |

**on:failure**

Triggers on failed login.

#### Arguments

| Name | Description |
| ------- | ------------- |
| `error` | Error object. |

## Login via OAuth2

Login via an OAuth2 provider.

```svelte

import { AuthOAuth2 } from 'metawrite';

Login Google

```

### Properties

| Name | Description |
| ---------- | ----------------------------------- |
| `authProvider` | OAuth2 provider. `@type - {string}` |
| `success` | Success url. `@type - {string}` |
| `failure` | Failure url. `@type - {string}` |

### Directives

**let:authorize** `function`

## Get user

Requests current user to check if logged in.

```svelte

import { User } from 'metawrite';

Hello {user.name}!


{user.email}

You are not logged in!

```

### Directives

**let:user** `object`

Get currently logged in user data.

## Get Collection

Get a list of all the documents from a collection.

```svelte

import { Collection } from 'metawrite';

You have {documents.length} documents.

```

### Properties

| Name | Description |
| -------------- | ---------------------------------------------------------------------- |
| `collectionId` | Collection unique ID. `@type - {string}` |
| _additional_ | same as [here](https://appwrite.io/docs/client/database#listDocuments) |

### Directives

**let:documents** `array`

Array of documents.

**let:actions** `object`

Object with function.

#### Arguments

| 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 `@type - {string[]}`. `data` is `@type - {string}` |

## Get Document

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

```svelte

import { Document } from 'metawrite';

Title: {document.title}
Text: {document.text}

```

### Properties

| Name | Description |
| -------------- | ---------------------------------------- |
| `documentId` | Document unique ID. `@type - {string}` |
| `collectionId` | Collection unique ID. `@type - {string}` |
| or | |
| `document` | Document passed from `` |

### Directives

**let:document** `object`

A JSON object with the document data.

**let:actions** `object`

Object with function.

#### Arguments

| Name | Description |
| -------------- | ------------------------------------------------- |
| `update(data)` | Update the document. `data` is `@type - {string}` |
| `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.

### ``

#### Slots

- **loading**
- **error**

#### Directives

**let:actions**
| Name | Description |
| --- | --- |
| `reload()` | Reload. |
| `logout()` | Logout current session. |
| `logoutAll()` | Logout from all session. |
| `logoutFrom(session)` | Logout from specific session. `session` is `@type - {string}` |

- **let:user** `object`
- **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.

#### Example

```svelte

import { User } from 'metawrite';

Reload user data
Get logged in user data
Log out from current session
Log out from specific session
Log out from all sessions


Hi, {user.name}

```

### ``

#### Directives

**let:actions**
| Name | Description |
| --- | --- |
| `create(email, password, name)` | Creates a user. `email` and `password` are required - `@type - {string}`. `name` is _optional_ - `@type - {string}` |

#### Events

- **on:success** On `create` success.
- **on:failure** On `create` failure.

#### Example

```svelte

import { Create } from 'metawrite';

let name,
email,
password = '';

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

const failure = (e) => {
// failure callback
};




Create Account

```

### ``

#### Slots

- **loading**
- **error**

#### Directives

**let:actions**
| Name | Description |
| --- | --- |
| `reload()` | Reloads preferences. |
| `update(prefs)` | Update preferences. `prefs` - `@type - {object}` |

#### 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.

#### Example

```svelte

import { Preferences } from 'metawrite';

let prefs = {
// You can pass only the specific settings you wish to update.
};

{
actions.update(prefs);
actions.reload();
}}>Update Preferences

```

### ``

#### Directives

**let:actions**
| Name | Description |
| --- | --- |
| `recover(email, url)` | Recover password. `email` and `url` is required and `@type - {string}`. `url` is your page where you will handle `secret` with `complete` function. |
| `complete(user, secret, password, passwordAgain)` | Complete password recovery. `user` and `secret` are set automatically by `metawrite`, so you don’t have to set them. `password` and `passwordAgain` are required - `@type - {string}`. |

#### 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.

#### Example

```svelte

import { RecoverPassword } from "metawrite";

const url = "http://localhost:3000/reset-password"; // URL that will point to the next step.
let email = '';

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

const failureRecover = e => {
//failure callback
}


Recover Password

import { RecoverPassword } from "metawrite";

let password, passwordAgain = '';

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

const failureComplete = e => {
//failure callback
}



Set New Password

```

### ``

#### Directives

**let:actions**
| Name | Description |
| --- | --- |
| `name(name)` | Update name. All fields are required. `@type - {string}` |
| `email(email, password)` | Update email. All fields are required. `@type - {string}` |
| `password(password, oldPassword)` | Update password. All fields are required. `@type - {string}` |

#### 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.

#### Example

```svelte

import { Update } from 'metawrite';

let name,
email,
password,
newPassword,
oldPassword = '';

This updates name
This updates email
This updates password

```

### ``

Creates and automatically validates user email verification.

- `url` of type string for action `create` should be where your app is hosted or `localhost`.
- For `update` action you don't need to pass anything, the process is automated.

#### Directives

**let:actions**
| Name | Description |
| --- | --- |
| `create(url)` | Create Verification. `url` is what URL used to create verification link sent to your email inbox. `@type - {string}` |
| `update(user, secret)` | Complete Verification. `user` and `secret` are set automatically by `metawrite`. |

#### Events

- **on:successCreate** On `create` success.
- **on:failureCreate** On `create` failure.
- **on:successComplete** On `complete` success.
- **on:failureComplete** On `complete` failure.

#### Example

```svelte

import { Verification } from 'metawrite';

const url = window.location.href;


Update email verification status

```

## Auth

The Auth components allow you to authenticate a user account.

### ``

#### Slots

- **loading**
- **success**
- **error**

#### Directives

- **let:authorize(email, password)**
- **let:user**
- **let:error**

#### Events

- **on:success** On `authorize` success.
- **on:failure** On `authorize` failure.

#### Example

```svelte

import { AuthEmail } from 'metawrite';

let email = '';
let password = '';

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

const failure = (e) => {
//failure callback
};



Login

```

### ``

#### Properties

| Name | Description |
| --------------- | ----------------------------------- |
| `authProvider` | OAuth2 provider. `@type - {string}` |
| `success` | Success url. `@type - {string}` |
| `failure` | Failure url. `@type - {string}` |
| #### Directives | |

**let:authorize()**

#### Example

```svelte

import { AuthOAuth2 } from 'metawrite';

Login Google

```

### ``

#### Directives

**let:actions**

| Name | Description |
| ---------- | -------------------------- |
| `create()` | Creates anonymous session. |

#### Example

```svelte

import { CreateAnonymousSession } from 'metawrite';

Create Anonymous Session

```

### ``

Creates JWT token.

#### Directives

**let:actions**

| Name | Description |
| ---------- | ------------------ |
| `create()` | Creates JWT token. |

#### Example

```svelte

import { CreateJWT } from 'metawrite';

Create JWT token

```

### ``

#### Directives

**let:actions**

| Name | Description |
| --------------------------- | ------------------------------------------------------------ |
| `create(sessionId, email, url)` | Creates Magic URL Session. email is required, url is to point on complete step `string`, `sessionId` is not required |
| `complete()` | Validates and completes Magic URL Session. |

#### Example

```svelte

import { MagicURL } from "metawrite";

let email = ""
const url = "http://localhost:3000/page-to-complete"

const successCreate = (e) => {
console.log(e)
}
const failureCreate = (e) => {
console.log(e)
}
const successComplete = (e) => {
console.log(e)
}
const failureComplete = (e) => {
console.log(e)
}


Send login link
Confirm Login

```

## Avatars

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

### ``

#### Arguments

- code - _required_ `@type - {string}`
- width - _optional_ `@type - {number}`
- height - _optional_ `@type - {string}`
- quality - _optional_ `@type - {string}`

#### Directives

- **let:src** Image link `@type - {URL}`

#### Example

```svelte

import { Browser } from 'metawrite';

Browser

```

### ``

#### Arguments

- code - _required_ `@type - {string}`
- width - _optional_ `@type - {number}`
- height - _optional_ `@type - {string}`
- quality - _optional_ `@type - {string}`

#### Directives

- **let:src** Image link `@type - {URL}`

#### Example

```svelte

import { CreditCard } from 'metawrite';

card

```

### ``

#### Arguments

- url - _required_ `@type - {string}`

#### Directives

- **let:src** Image link `@type - {URL}`

```svelte

import { Favicon } from 'metawrite';
const url = window.location.href;

favicon

```

### ``

#### Arguments

- code - _required_ `@type - {string}`
- width - _optional_ `@type - {number}`
- height - _optional_ `@type - {string}`
- quality - _optional_ `@type - {string}`

#### Directives

- **let:src** Image link `@type - {URL}`

#### Example

```svelte

import { Flag } from 'metawrite';

flag

```

### ``

#### Arguments

- url - _required_ `@type - {string}`
- width - _optional_ `@type - {number}`
- height - _optional_ `@type - {number}`

#### Directives

- **let:src** Image link `@type - {URL}`

#### Example

```svelte

import { Image } from 'metawrite';

let url = 'https://increas.io/';
let width,
height = 100;

someImage

```

### ``

#### Arguments

- text - _required_ `@type - {string}`
- size - _optional_ `@type - {optional}`
- margin - _optional_ `@type - {number}`
- download - _optional_ `@type - {boolean}`

#### Directives

- **let:src** Image link `@type - {URL}`

#### Example

```svelte

import { QR } from 'metawrite';

let text = 'https://increas.io/'; // could be any text
let size = 500;
let margin = 1;
let download = false;

QR Code

```

## 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.

### ``

#### Arguments

- collectionId - *required* `@type - {string}`

- cache - *optional*, by default set to false `@type - {boolean}`

**query: `@type - {object}`**

- queries - *optional* `@type - {string[]}`

- limit - *optional* `@type - {number}`

- offset - *optional* `@type - {number}`

- cursor - *optional* `@type - {string}`

- cursorDirection - *optional* `@type - {string}`

- orderAttributes - *optional* `@type - {string[]}`

- orderTypes - *optional* `@type - {string[]}`

#### Slots

- **loading**
- **error**

#### Directives

**let:actions**
| Name | Description |
| --- | --- |
| `reload()` | Reload. |
| `create(documentId, data, read, write)` | Creates a Document. `data` - `@type - {string}`.
`read`/`write` is optional `@type - {string[]}`.
`documentId` is optional, by default generates unique `@type - {string}`. |

- **let:documents**
- **let:error**

#### Example

```svelte

import { Collection } from "metawrite";

You have {documents.length} documents.

```

### ``

#### Arguments

- documentId - *required* `@type - {string}`
- collectionId - *required* `@type - {string}`

#### Slots

- **loading**
- **error**

#### Directives

**let:actions**
| Name | Description |
| --- | --- |
| `reload()` | Reload. |
| `update(data)` | Updates a Document. `data` - `@type - {object}` |
| `remove()` | Removes a Document. |

- **let:document**
- **let:error**

#### Example

```svelte

import { Collection, Document } from 'metawrite';

const collectionId = '5f56a3035a01f';

You have {documents.length} documents:
{#each documents as document}

Title: {document.title}
Text: {document.text}
{actions.remove()}}>Delete

{/each}

```

## Realtime

For more information about using Realtime in Appwrite see [Realtime documentation](https://appwrite.io/docs/realtime).

Realtime allows you to listen to any events on the server-side in realtime using the subscribe method.

Instead of requesting new data via HTTP, the subscription will receive new data every time it changes, any connected client receives that update within milliseconds via a WebSocket connection.

This lets you build an interactive and responsive user experience by providing information from all of Appwrite's services in realtime.

#### Arguments

- channels - *required* `string | string[]`

#### Directives

**let:payload** - The payload from the subscription will contain [following properties](https://appwrite.io/docs/realtime#payload).

**let:actions**
| Name | Description |
| --- | --- |
| `subscribe()` | Subscribing to all updates related to one or more channels. |
| `unsubscribe()` | If you no longer want to receive updates from a subscription, you can unsubscribe so that your callbacks are no longer called. |

#### Example

```svelte

import { Realtime } from 'metawrite';

{payload.timestamp}


Subscribe to Account channel
Unsubscribe from Account channel

```

## Storage

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

### ``

#### Directives

**let:actions**
| Name | Description |
| --- | --- |
| `create(bucketId, fileId, file, read, write)` | Uploads a file.
`fileId` is required `@type - {string}`, `"unique()"` will generate random unique id, but you can use custom.
`file` is `@type - {File}` and required.
`read`/`write` is `@type - {string[]}` and *optional* |

#### Example

```svelte

import { Storage } from "metawrite"

// Required
let bucketId = "default"
let file: File;
let fileId = "unique()"; // this will generate random unique id, but you can use custom

// Optional
let read: string[];
let write: string[];

Upload File

```

### ``

#### Arguments

- bucketId - *required* `@type - {string}`
- search - *optional* `@type - {string}`
- limit - *optional* `@type - {number}`
- offset - *optional* `@type - {number}`
- cursor - *optional* `@type - {string}`
- cursorDirection - *optional* `@type - {string}`
- orderType - *optional* `@type - {string} ` => write `"ASC"` or `"DESC"`

#### Slots

- **loading**
- **error**

#### Directives

**let:actions**
| Name | Description |
| --- | --- |
| `reload()` | Reload. |

- **let:files**
- **let:error**

#### Example

```svelte

import { FileList } from "metawrite"

// Optional
let bucketId = 'default';
let search = '';
let limit = 10;
let offset = 0;
let orderType = 'ASC';

{#each files as file}

File: {file.name}


{/each}
Reload

```

### ``

#### Arguments

- bucketId - it is your Bucket ID `@type - {string}`
- fileId - it is File ID `@type - {string}`

#### Directives

**let:actions**
| Name | Description |
| --- | --- |
| `download()` | Downloads file. |
| `view()` | Get file for View. |
| `preview(width, height, quality, background, output)` | Get file for preview. |
| `update(read, write)` | Updates a file. |
| `delete()` | Deletes a file. |

#### Example

```svelte

import { File } from 'metawrite';

// Required
let bucketId: string;
let fileId: string;

// OPTIONAL
/** @type {number} */ let width;
/** @type {number} */ let height;
/** @type {string} */ let gravity;
/** @type {number} */ let quality;
/** @type {number} */ let borderWidth;
/** @type {string} */ let borderColor;
/** @type {number} */ let borderRadius;
/** @type {number} */ let opacity;
/** @type {number} */ let rotation;
/** @type {string} */ let background;
/** @type {string} */ let output;
/** @type {string[]} */ let read;
/** @type {string[]} */ let write;

Download File
File View
Preview File
Update File
Delete File

```

## Functions

The Functions service allows you to create custom behaviour that can be triggered by any supported Appwrite system events or by a predefined schedule.

Appwrite Cloud Functions lets you automatically run backend code in response to events triggered by Appwrite or by setting it to be executed in a predefined schedule. Your code is stored in a secure way on your Appwrite instance and is executed in an isolated environment.

You can learn more by following Appwrite's [Cloud Functions tutorial](https://appwrite.io/docs/functions).

### ``

#### Directives

**let:actions**
| Name | Description |
| --- | --- |
| `reload()` | Reload. |
| `create(functionId, data)` | Creates Execution. `functionId` is _required_, `data` could be empty string because _optional_. `@type {string}`|
| `create(functionId, executionId)` | Get Execution. Both parameters are required. `@type {string}` |

- **let:executions**

#### Slots

- **error**

#### Example

```svelte

import { Function } from 'metawrite';
let functionId = 'someExecution'; // required
let newFunctionId = '';
let data = 'String of custom data to send to function.'; // could be empty string because optional

{#each executions as execution}


Execution ID: {execution.$id}, Function ID: {execution.functionId}, Date Created: {execution.dateCreated}


{/each}

Create Execution

```

## Locale

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

### ``

#### Directives

**let:actions**
| Name | Description |
| --- | --- |
| `reload()` | Reload. |

- **let:continents**

#### Slots

- **loading**
- **error**

#### Example

```svelte

import { Continents } from 'metawrite';

Reload

There are {continents.sum} continents:


{#each continents.continents as continent}

{continent.name}, {continent.code}


{/each}

```

### ``

#### Arguments

- eu

#### Slots

- **loading**
- **error**

#### Directives

**let:actions**
| Name | Description |
| --- | --- |
| `reload()` | Reload. |

- **let:countries**

#### Example

```svelte

import { Countries } from 'metawrite';

let eu = true; // if you want to list only EU countries

Reload

There are {countries.sum} countries in the world:


{#each countries.countries as country}

{country.name}, {country.code}


{/each}

Reload

There are {countries.sum} countries in EU:


{#each countries.countries as country}

{country.name}, {country.code}


{/each}

```

### ``

#### Slots

- **loading**
- **error**

#### Directives

**let:actions**
| Name | Description |
| --- | --- |
| `reload()` | Reload. |

- **let:currencies**

#### Example

```svelte

import { Currencies } from 'metawrite';

Reload

There are {currencies.sum} currencies:


{#each currencies.currencies as currency}

{currency.symbol} - {currency.name} ({currency.code})


{/each}

```

### ``

#### Slots

- **loading**
- **error**

#### Directives

**let:actions**
| Name | Description |
| --- | --- |
| `reload()` | Reload. |

- **let:languages**

#### Example

```svelte

import { Languages } from 'metawrite';

Reload

There are {languages.sum} languages:


{#each languages.languages as language}

{language.name}, {language.code}>


{/each}

```

### ``

#### Slots

- **loading**
- **error**

#### Directives

**let:actions**
| Name | Description |
| --- | --- |
| `reload()` | Reload. |

- **let:code** `object`

#### Example

```svelte

import { Locale } from 'metawrite';

Active Session


Reload

Location: {code.country}, {code.continentCode}


IP: {code.ip}

```

### ``

#### Slots

- **loading**
- **error**

#### Directives

**let:actions**
| Name | Description |
| --- | --- |
| `reload()` | Reload. |

- **let:codes**

#### Example

```svelte

import { PhoneCodes } from 'metawrite';

Reload

There are {codes.sum} phone codes:


{#each codes.phones as phone}

{phone.code} - {phone.countyName}>


{/each}

```

# Stack