Metawrite

Appwrite SDK with ready to go components for Svelte / SvelteKit

#svelte #sveltekit #appwrite #library #components #sdk #collaborate #github #learn

Demo Download

Support Us

Get free $100 credits on DigitalOcean:

Join our Discord:

Metawrite is Appwrite SDK with ready to go components for Svelte / SvelteKit

This package is maintained by Increasio.

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.

versions n.x.x might include some major breaking changes. See Release Notes.

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 that uses Metawrite and could be also used as Docker image like described here.

Please consider using template, this is temporary

Documentation

Installation

Using NPM:

npm install metawrite

Using Yarn:

yarn add metawrite

Support Us
- Important info
Documentation - Installation
Table of contents
Usage
- Initialize
  - Properties
- Create user
  - Directives
    - Arguments
  - Events
    - Arguments
    - Arguments
- Login via Email
  - Directives
    - Arguments
  - Events
    - Arguments
    - Arguments
- Login via OAuth2
  - Properties
  - Directives
- Get user
  - Directives
- Get Collection
  - Properties
  - Directives
    - Arguments
- Get Document
API
- Account
  - <User />
    - Slots
    - Directives
    - Events
    - Example
  - <Create />
  - <Preferences />
    - Slots
    - Directives
    - Events
    - Example
  - <RecoverPassword />
  - <Update />
  - <Verification />
- Auth
- Avatars
  - <Browser />
  - <CreditCard />
  - <Favicon />
    - Arguments
    - Directives
  - <Flag />
  - <Image />
  - <QR />
- Database
  - <Collection />
    - Arguments
    - Slots
    - Directives
    - Example
  - <Document />
    - Arguments
    - Slots
    - Directives
    - Example
- Realtime - Arguments - Directives - Example
- Storage
  - <Storage />
    - Directives
    - Example
  - <FileList />
    - Arguments
    - Slots
    - Directives
    - Example
  - <File />
- Functions
  - <Function />
    - Directives
    - Slots
    - Example
- Locale
  - <Continents />
    - Directives
    - Slots
    - Example
  - <Countries />
    - Arguments
    - Slots
    - Directives
    - Example
  - <Currencies />
    - Slots
    - Directives
    - Example
  - <Languages />
    - Slots
    - Directives
    - Example
  - <Locale />
    - Slots
    - Directives
    - Example
  - <PhoneCodes />
    - Slots
    - Directives
    - Example
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.

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

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

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

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

            {#each documents as document}

                <!-- 4. 📜 Get a document -->
                <Document collectionId="5f56a3035a01f" documentId={document.$id} {document}>
                    Title: {document.title}
                    Text: {document.text}
...

Initialize

Must be initialised and wrap every metawrite component.

<script>
    import { Appwrite } from 'metawrite';

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

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

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.

<script>
    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
    };
</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

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

<script>
    import { AuthEmail } from 'metawrite';

    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

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.

<script>
    import { AuthOAuth2 } from 'metawrite';
</script>

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

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.

<script>
    import { User } from 'metawrite';
</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 'metawrite';
</script>

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

Properties

Name	Description
`collectionId`	Collection unique ID. `@type - {string}`
additional	same as here

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.

<script>
    import { Document } from 'metawrite';
</script>

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

Properties

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

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.

`<User />`

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

<script>
    import { User } from 'metawrite';
</script>

<User let:actions let:user>
    <button on:click={actions.reload()}>Reload user data</button>
    <button on:click={actions.get()}>Get logged in user data</button>
    <button on:click={actions.logout()}>Log out from current session</button>
    <button on:click={actions.logoutFrom('sessionId')}>Log out from specific session</button>
    <button on:click={actions.logoutAll()}>Log out from all sessions</button>

    <!-- If logged in -->
    <p>Hi, {user.name}</p>
</User>

`<Create />`

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

<script>
    import { Create } from 'metawrite';

    let name,
        email,
        password = '';

    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" name="name" placeholder="name" bind:value={name} />
    <input type="text" name="email" placeholder="email" bind:value={email} />
    <input type="password" name="password" placeholder="password" bind:value={password} />
    <button on:click={actions.create(name, email, password)}>Create Account</button>
</Create>

`<Preferences />`

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

<script>
    import { Preferences } from 'metawrite';

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

<Preferences let:actions>
    <button
        on:click={() => {
            actions.update(prefs);
            actions.reload();
        }}>Update Preferences</button
    >
</Preferences>

`<RecoverPassword />`

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

<script>
    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
  }
</script>

<!-- localhost/forgot-password -->
<RecoverPassword let:actions on:successRecover on:failureRecover>
    <input name="email" type="text" bind:value={email, url} placeholder="Email" />
    <button on:click{actions.recover(email)}>Recover Password</button>
</RecoverPassword>

<!-- Then on localhost/reset-password  -->
<script>
    import { RecoverPassword } from "metawrite";

    let password, passwordAgain = '';

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

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

<RecoverPassword let:actions on:successComplete on:failureComplete>
    <input type="password" name="password" bind:value{password} placeholder="Password" />
    <input type="password" name="password" bind:value{passwordAgain} placeholder="Confirm Password" />
    <button on:click{actions.complete(password, passwordAgain)}>Set New Password</button>
</RecoverPassword>

`<Update />`

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

<script>
    import { Update } from 'metawrite';

    let name,
        email,
        password,
        newPassword,
        oldPassword = '';
</script>

<Update let:actions>
    <button on:click={actions.name(name)}>This updates name</button>
    <button on:click={actions.email(email, password)}>This updates email</button>
    <button on:click={actions.password(newPassword, oldPassword)}>This updates password</button>
</Update>

`<Verification />`

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

<script>
    import { Verification } from 'metawrite';

    const url = window.location.href;
</script>

<Verification let:actions>
    <button on:click={actions.create(url)} />
    <button on:click={actions.update()}>Update email verification status</button>
</Verification>

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.

Example

<script>
    import { AuthEmail } from 'metawrite';

    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>

`<AuthOAuth2 />`

Properties

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

let:authorize()

Example

<script>
    import { AuthOAuth2 } from 'metawrite';
</script>

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

`<CreateAnonymousSession />`

Directives

let:actions

Name	Description
`create()`	Creates anonymous session.

Example

<script>
    import { CreateAnonymousSession } from 'metawrite';
</script>

<CreateAnonymousSession let:actions>
    <button on:click={actions.create}>Create Anonymous Session</button>
</CreateAnonymousSession>

`<CreateJWT />`

Creates JWT token.

Directives

let:actions

Name	Description
`create()`	Creates JWT token.

Example

<script>
    import { CreateJWT } from 'metawrite';
</script>

<CreateJWT let:actions>
    <button on:click={actions.create}>Create JWT token</button>
</CreateJWT>

`<MagicURL />`

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

<script>
    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)
    }
</script>

<MagicURL let:actions on:successCreate on:successComplete on:failureCreate on:failureComplete>
        <input type="email" name="email" placeholder="Email" bind:value={email} />
        <button on:click={actions.create(email, url)}>Send login link</button>
        <button on:click={actions.complete()}>Confirm Login</button>
</MagicURL>

Avatars

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

`<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

<script>
    import { Browser } from 'metawrite';
</script>

<Browser code="firefox" let:src>
    <img src={String(src)} alt="Browser" />
</Browser>

`<CreditCard />`

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

<script>
    import { CreditCard } from 'metawrite';
</script>

<CreditCard code="amex" let:src>
    <img src={String(src)} alt="card" />
</CreditCard>

`<Favicon />`

Arguments

url - required @type - {string}

Directives

let:src Image link @type - {URL}

<script>
    import { Favicon } from 'metawrite';
    const url = window.location.href;
</script>

<Favicon {url} let:src>
    <img src={String(src)} alt="favicon" />
</Favicon>

`<Flag />`

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

<script>
    import { Flag } from 'metawrite';
</script>

<Flag code="canada" let:src>
    <img src={String(src)} alt="flag" />
</Flag>

`<Image />`

Arguments

url - required @type - {string}
width - optional @type - {number}
height - optional @type - {number}

Directives

let:src Image link @type - {URL}

Example

<script>
    import { Image } from 'metawrite';

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

<Image {url} {width} {height} let:src>
    <img src={String(src)} alt="someImage" />
</Image>

`<QR />`

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

<script>
    import { QR } from 'metawrite';

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

<QR {text} {size} {margin} {download} let:src>
    <img src={String(src)} alt="QR Code" />
</QR>

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

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

<script>
  import { Collection } from "metawrite";
</script>

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

`<Document />`

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

<script>
    import { Collection, Document } from 'metawrite';

    const collectionId = '5f56a3035a01f';
</script>

<Collection {collectionId} let:documents>
    You have {documents.length} documents:
    {#each documents as document}
        <Document {collectionId} documentId={document.$id} let:document let:actions>
            Title: {document.title}
            Text: {document.text}
            <button on:click={() => {actions.remove()}}>Delete</button>
        </Document>
    {/each}
</Collection>

Realtime

For more information about using Realtime in Appwrite see Realtime documentation.

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.

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

<script>
    import { Realtime } from 'metawrite';
</script>

<Realtime channels="account" let:actions let:payload>
    <h1>{payload.timestamp}</h1>
    <button on:click={actions.subscribe()}>Subscribe to Account channel</button>
    <button on:click={actions.unsubscribe()}>Unsubscribe from Account channel</button>
</Realtime>

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

<script lang="ts">
    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[];
</script>

<Storage {file} let:actions>
    <button on:click={actions.create(bucketId, fileId, file, read, write)}>Upload File</button>
</Storage>

`<FileList />`

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

<script>
    import { FileList } from "metawrite"

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

<FileList {bucketId} {search} {limit} {offset} {orderType}let:actions let:files>
    {#each files as file}
        <p>File: {file.name}</p>
    {/each}
    <button on:click={actions.reload()}>Reload</button>
</FileList>

`<File />`

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

<script lang="ts">
    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;
</script>

<File {bucketId} {fileId} let:actions>
    <button on:click={actions.download()}>Download File</button>
    <button on:click={actions.view()}>File View</button>
    <button on:click={actions.preview()}>Preview File</button>
    <button on:click={actions.update(read, write)}>Update File</button>
    <button on:click={actions.delete()}>Delete File</button>
</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.

`<Function />`

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

<script>
    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
</script>

<Function {functionId} {data} let:actions let:executions>
    {#each executions as execution}
        <p>
            Execution ID: {execution.$id}, Function ID: {execution.functionId}, Date Created: {execution.dateCreated}
        </p>
    {/each}
    <input type="text" name="functionId" placeholder="Function ID" bind:value={newFunctionId} />
    <button on:click={actions.create(newFunctionId, data)}>Create Execution</button>
</Function>

Locale

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

`<Continents />`

Directives

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

let:continents

Slots

loading
error

Example

<script>
    import { Continents } from 'metawrite';
</script>

<Continents let:actions let:continents>
    <button on:click={actions.reload()}>Reload</button>
    <p>There are {continents.sum} continents:</p>
    {#each continents.continents as continent}
        <p>{continent.name}, {continent.code}</p>
    {/each}
</Continents>

`<Countries />`

Arguments

Slots

loading
error

Directives

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

let:countries

Example

<script>
    import { Countries } from 'metawrite';

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

<Countries let:actions let:countries>
    <button on:click={actions.reload()}>Reload</button>
    <p>There are {countries.sum} countries in the world:</p>
    {#each countries.countries as country}
        <p>{country.name}, {country.code}</p>
    {/each}
</Countries>

<Countries {eu} let:actions let:countries>
    <button on:click={actions.reload()}>Reload</button>
    <p>There are {countries.sum} countries in EU:</p>
    {#each countries.countries as country}
        <p>{country.name}, {country.code}</p>
    {/each}
</Countries>

`<Currencies />`

Slots

loading
error

Directives

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

let:currencies

Example

<script>
    import { Currencies } from 'metawrite';
</script>

<Currencies let:actions let:currencies>
    <button on:click={actions.reload()}>Reload</button>
    <p>There are {currencies.sum} currencies:</p>
    {#each currencies.currencies as currency}
        <p>{currency.symbol} - {currency.name} ({currency.code})</p>
    {/each}
</Currencies>

`<Languages />`

Slots

loading
error

Directives

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

let:languages

Example

<script>
    import { Languages } from 'metawrite';
</script>

<Languages let:actions let:languages>
    <button on:click={actions.reload()}>Reload</button>
    <p>There are {languages.sum} languages:</p>
    {#each languages.languages as language}
        <p>{language.name}, {language.code}></p>
    {/each}
</Languages>

`<Locale />`

Slots

loading
error

Directives

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

let:code object

Example

<script>
    import { Locale } from 'metawrite';
</script>

<Locale let:actions let:code>
    <h1>Active Session</h1>
    <button on:click={actions.reload()}>Reload</button>
    <p>Location: {code.country}, {code.continentCode}</p>
    <p>IP: {code.ip}</p>
</Locale>

`<PhoneCodes />`

Slots

loading
error

Directives

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

let:codes

Example

<script>
    import { PhoneCodes } from 'metawrite';
</script>

<PhoneCodes let:actions let:codes>
    <button on:click={actions.reload()}>Reload</button>
    <p>There are {codes.sum} phone codes:</p>
    {#each codes.phones as phone}
        <p>{phone.code} - {phone.countyName}></p>
    {/each}
</PhoneCodes>

Stack

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing

Metawrite

Support Us

Important info

Documentation

Installation

Table of contents

Usage

Initialize

Properties

Create user

Directives

Arguments

Events

Arguments

Arguments

Login via Email

Directives

Arguments

Events

Arguments

Arguments

Login via OAuth2

Properties

Directives

Get user

Directives

Get Collection

Properties

Directives

Arguments

Get Document

Properties

Directives

Arguments

Events

API

Account

<User />

Slots

Directives

Events

Example

<Create />

Directives

Events

Example

<Preferences />

Slots

Directives

Events

Example

<RecoverPassword />

Directives

Events

Example

<Update />

Directives

Events

Example

<Verification />

Directives

Events

Example

Auth

<AuthEmail />

Slots

Directives

Events

Example

<AuthOAuth2 />

Properties

Example

<CreateAnonymousSession />

Directives

Example

<CreateJWT />

Directives

Example

<MagicURL />

Directives

`<User />`

`<Create />`

`<Preferences />`

`<RecoverPassword />`

`<Update />`

`<Verification />`

`<AuthEmail />`

`<AuthOAuth2 />`

`<CreateAnonymousSession />`

`<CreateJWT />`

`<MagicURL />`

`<Browser />`

`<CreditCard />`

`<Favicon />`

`<Flag />`

`<Image />`

`<QR />`

`<Collection />`

`<Document />`

`<Storage />`

`<FileList />`

`<File />`

`<Function />`

`<Continents />`

`<Countries />`

`<Currencies />`