├── .npmrc
├── src
    ├── lib
    │   ├── _keys.ts
    │   ├── _stores.ts
    │   ├── _appwrite.ts
    │   ├── Avatars
    │   │   ├── Favicon.svelte
    │   │   ├── Flag.svelte
    │   │   ├── Image.svelte
    │   │   ├── Browser.svelte
    │   │   ├── CreditCard.svelte
    │   │   └── QR.svelte
    │   ├── stores
    │   │   ├── _user.ts
    │   │   └── _documents.ts
    │   ├── Auth
    │   │   ├── OAuth2.svelte
    │   │   └── Email.svelte
    │   ├── Locale
    │   │   ├── Locale.svelte
    │   │   ├── PhoneCodes.svelte
    │   │   ├── Languages.svelte
    │   │   ├── Continents.svelte
    │   │   ├── Currencies.svelte
    │   │   └── Countries.svelte
    │   ├── Account
    │   │   ├── CreateJWT.svelte
    │   │   ├── Preferences.svelte
    │   │   ├── Create.svelte
    │   │   ├── Verification.svelte
    │   │   ├── CreateAnonymousSession.svelte
    │   │   ├── Update.svelte
    │   │   ├── MagicURL.svelte
    │   │   ├── RecoverPassword.svelte
    │   │   └── User.svelte
    │   ├── Init.svelte
    │   ├── Realtime.svelte
    │   ├── Storage
    │   │   ├── Storage.svelte
    │   │   ├── FileList.svelte
    │   │   └── File.svelte
    │   ├── index.ts
    │   ├── Database
    │   │   ├── Document.svelte.d.ts
    │   │   ├── Document.svelte
    │   │   └── Collection.svelte
    │   └── Functions
    │   │   └── Function.svelte
    ├── app.html
    └── routes
    │   └── index.svelte
├── static
    ├── logo.png
    ├── favicon.png
    └── logo.svg
├── .prettierrc
├── .gitignore
├── examples
    ├── Avatars
    │   ├── Flag.svelte
    │   ├── Browser.svelte
    │   ├── CreditCard.svelte
    │   ├── Favicon.svelte
    │   ├── Image.svelte
    │   └── QR.svelte
    ├── Account
    │   ├── CreateJWT.svelte
    │   ├── CreateAnonymousSession.svelte
    │   ├── Verification.svelte
    │   ├── Preferences.svelte
    │   ├── Update.svelte
    │   ├── User.svelte
    │   ├── Create.svelte
    │   ├── MagicURL.svelte
    │   └── RecoverPassword.svelte
    ├── Database
    │   ├── Collection.svelte
    │   └── Document.svelte
    ├── Locale
    │   ├── Locale.svelte
    │   ├── PhoneCode.svelte
    │   ├── Languages.svelte
    │   ├── Continents.svelte
    │   ├── Currencies.svelte
    │   └── Countries.svelte
    ├── Auth
    │   ├── OAuth2.svelte
    │   └── Email.svelte
    ├── Realtime.svelte
    ├── Storage
    │   ├── FileList.svelte
    │   ├── Storage.svelte
    │   └── File.svelte
    └── Functions
    │   └── Function.svelte
├── .npmignore
├── .travis.yml
├── svelte.config.js
├── .eslintrc.cjs
├── .github
    ├── workflows
    │   └── npm-publish.yml
    └── ISSUE_TEMPLATE
    │   ├── documentation.yaml
    │   ├── feature.yaml
    │   └── bug.yaml
├── changelog.hbs
├── tsconfig.json
├── package.json
├── CODE_OF_CONDUCT.md
├── LICENSE
├── CHANGELOG.md
└── README.md


/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/src/lib/_keys.ts:
--------------------------------------------------------------------------------
1 | export const cacheKey = {};
2 | 


--------------------------------------------------------------------------------
/static/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/koodeau/metawrite/HEAD/static/logo.png


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/koodeau/metawrite/HEAD/static/favicon.png


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"useTabs": true,
3 | 	"singleQuote": true,
4 | 	"trailingComma": "none",
5 | 	"printWidth": 100
6 | }
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | appwrite
10 | 


--------------------------------------------------------------------------------
/examples/Avatars/Flag.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |     import { Flag } from "$lib"
3 | </script>
4 | 
5 | <Flag code="canada" let:src>
6 |     <img src={String(src)} alt="flag" />
7 | </Flag>
8 | 


--------------------------------------------------------------------------------
/examples/Avatars/Browser.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 | 	import { Browser } from '$lib';
3 | </script>
4 | 
5 | <Browser code="firefox" let:src>
6 | 	<img src={String(src)} alt="Browser" />
7 | </Browser>
8 | 


--------------------------------------------------------------------------------
/examples/Avatars/CreditCard.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |     import { CreditCard } from "$lib"
3 | </script>
4 | 
5 | <CreditCard code="amex" let:src>
6 |     <img src={String(src)} alt="card" />
7 | </CreditCard>
8 | 


--------------------------------------------------------------------------------
/examples/Account/CreateJWT.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |     import { CreateJWT } from "$lib";
3 | </script>
4 | 
5 | <CreateJWT let:actions>
6 |     <button on:click={actions.create}>Create JWT token</button>
7 | </CreateJWT>
8 | 


--------------------------------------------------------------------------------
/examples/Database/Collection.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 | 	import { Collection } from '$lib';
3 | </script>
4 | 
5 | <Collection collectionId="5f56a3035a01f" let:documents>
6 | 	You have {documents.length} documents.
7 | </Collection>
8 | 


--------------------------------------------------------------------------------
/examples/Avatars/Favicon.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |     import { Favicon } from "$lib"
3 |     const url = window.location.href;
4 | </script>
5 | 
6 | <Favicon {url} let:src>
7 |     <img src={String(src)} alt="favicon" />
8 | </Favicon>
9 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .git
 2 | CVS
 3 | .svn
 4 | .hg
 5 | .lock-wscript
 6 | .wafpickle-N
 7 | .*.swp
 8 | .DS_Store
 9 | ._*
10 | npm-debug.log
11 | .npmrc
12 | node_modules
13 | config.gypi
14 | *.orig
15 | package-lock.json
16 | src
17 | static
18 | examples


--------------------------------------------------------------------------------
/examples/Account/CreateAnonymousSession.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |     import { CreateAnonymousSession } from "$lib";
3 | </script>
4 | 
5 | <CreateAnonymousSession let:actions>
6 |     <button on:click={actions.create}>Create Anonymous Session</button>
7 | </CreateAnonymousSession>
8 | 


--------------------------------------------------------------------------------
/examples/Avatars/Image.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import { Image } from "$lib"
 3 | 
 4 |     let url = "https://increas.io/"
 5 |     let width, height = 100;
 6 | </script>
 7 | 
 8 | <Image {url} {width} {height} let:src>
 9 |     <img src={String(src)} alt="someImage" />
10 | </Image>
11 | 


--------------------------------------------------------------------------------
/src/lib/_stores.ts:
--------------------------------------------------------------------------------
1 | import { writable } from 'svelte/store';
2 | import { UserStore } from './stores/_user';
3 | import { DocumentsStore } from './stores/_documents';
4 | 
5 | export const active = writable(false);
6 | export const currentUser: any = new UserStore();
7 | export const documents = new DocumentsStore();
8 | 


--------------------------------------------------------------------------------
/examples/Locale/Locale.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { Locale } from '$lib';
 3 | </script>
 4 | 
 5 | <Locale let:actions let:code>
 6 | 	<h1>Active Session</h1>
 7 | 	<button on:click={actions.reload()}>Reload</button>
 8 | 	<p>Location: {code.country}, {code.continentCode}</p>
 9 | 	<p>IP: {code.ip}</p>
10 | </Locale>
11 | 


--------------------------------------------------------------------------------
/examples/Avatars/QR.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { QR } from '$lib';
 3 | 
 4 | 	let text = 'https://increas.io/'; // could be any text
 5 | 	let size = 500;
 6 | 	let margin = 1;
 7 | 	let download = false;
 8 | </script>
 9 | 
10 | <QR {text} {size} {margin} {download} let:src>
11 | 	<img src={String(src)} alt="QR Code" />
12 | </QR>
13 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - "14.18"
 4 | 
 5 | jobs:
 6 |   include:
 7 |     - stage: npm release
 8 |       node_js: "14.18"
 9 |       script: echo "Deploying to npm ..."
10 |       deploy:
11 |         provider: npm
12 |         email: $NPM_EMAIL
13 |         api_key: $NPM_API_KEY
14 |         on:
15 |           tags: true
16 | 


--------------------------------------------------------------------------------
/examples/Account/Verification.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import { Verification } from "$lib"
 3 | 
 4 |     const url = window.location.href;
 5 | </script>
 6 | 
 7 | <Verification let:actions>
 8 |     <button on:click={actions.create(url)}></button>
 9 |     <button on:click={actions.update()}>Update email verification status</button>
10 | </Verification>
11 | 


--------------------------------------------------------------------------------
/examples/Auth/OAuth2.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import { AuthOAuth2 } from "$lib";
 3 |   </script>
 4 |   
 5 |   <AuthOAuth2
 6 |     authProvider="google"
 7 |     success="http://localhost:3000?success"
 8 |     failure="http://localhost:3000?failure"
 9 |     let:authorize>
10 |     <button on:click={authorize}>Login Google</button>
11 |   </AuthOAuth2>
12 | 


--------------------------------------------------------------------------------
/examples/Locale/PhoneCode.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { PhoneCodes } from '$lib';
 3 | </script>
 4 | 
 5 | <PhoneCodes let:actions let:codes>
 6 | 	<button on:click={actions.reload()}>Reload</button>
 7 | 	<p>There are {codes.sum} phone codes:</p>
 8 | 	{#each codes.phones as phone}
 9 | 		<p>{phone.code} - {phone.countyName}></p>
10 | 	{/each}
11 | </PhoneCodes>
12 | 


--------------------------------------------------------------------------------
/src/lib/_appwrite.ts:
--------------------------------------------------------------------------------
1 | import { Appwrite } from 'appwrite';
2 | 
3 | export const SDK = {
4 | 	sdk: new Appwrite(),
5 | 	setConfig: (config: { endpoint: string; project: string; locale?: string; realtime?: string; }) => {
6 | 		SDK.sdk.setEndpoint(config.endpoint).setProject(config.project).setLocale(config.locale).setEndpointRealtime(config.realtime);
7 | 	}
8 | };
9 | 


--------------------------------------------------------------------------------
/examples/Locale/Languages.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { Languages } from '$lib';
 3 | </script>
 4 | 
 5 | <Languages let:actions let:languages>
 6 | 	<button on:click={actions.reload()}>Reload</button>
 7 | 	<p>There are {languages.sum} languages:</p>
 8 | 	{#each languages.languages as language}
 9 | 		<p>{language.name}, {language.code}></p>
10 |     {/each}
11 | </Languages>
12 | 


--------------------------------------------------------------------------------
/examples/Realtime.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { Realtime } from 'metawrite';
 3 | </script>
 4 | 
 5 | <Realtime channels="account" let:actions let:payload>
 6 | 	<h1>{payload.timestamp}</h1>
 7 | 	<button on:click={actions.subscribe()}>Subscribe to Account channel</button>
 8 | 	<button on:click={actions.unsubscribe()}>Unsubscribe from Account channel</button>
 9 | </Realtime>
10 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<meta name="description" content="" />
 6 | 		<link rel="icon" href="%svelte.assets%/favicon.png" />
 7 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 8 | 		%svelte.head%
 9 | 	</head>
10 | 	<body>
11 | 		<div>%svelte.body%</div>
12 | 	</body>
13 | </html>


--------------------------------------------------------------------------------
/examples/Account/Preferences.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { Preferences } from '$lib';
 3 | 
 4 | 	let prefs = {
 5 | 		// You can pass only the specific settings you wish to update.
 6 | 	};
 7 | </script>
 8 | 
 9 | <Preferences let:actions>
10 | 	<button
11 | 		on:click={() => {
12 | 			actions.update(prefs);
13 | 			actions.reload();
14 | 		}}>Update Preferences</button>
15 | </Preferences>
16 | 


--------------------------------------------------------------------------------
/examples/Locale/Continents.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import { Continents } from "$lib"
 3 | </script>
 4 | 
 5 | <Continents let:actions let:continents>
 6 |     <button on:click={actions.reload()}>Reload</button>
 7 |     <p>There are {continents.sum} continents:</p>
 8 |     {#each continents.continents as continent}
 9 |         <p>{continent.name}, {continent.code}</p>
10 |     {/each}
11 | </Continents>
12 | 


--------------------------------------------------------------------------------
/examples/Locale/Currencies.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import { Currencies } from "$lib"
 3 | </script>
 4 | 
 5 | <Currencies let:actions let:currencies>
 6 |     <button on:click={actions.reload()}>Reload</button>
 7 |     <p>There are {currencies.sum} currencies:</p>
 8 |     {#each currencies.currencies as currency}
 9 |         <p>{currency.symbol} - {currency.name} ({currency.code})</p>
10 |     {/each}
11 | </Currencies>
12 | 


--------------------------------------------------------------------------------
/examples/Account/Update.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import { Update } from "$lib"
 3 | 
 4 |     let name, email, password, newPassword, oldPassword = ""
 5 | </script>
 6 | 
 7 | <Update let:actions>
 8 |     <button on:click={actions.name(name)}>This updates name</button>
 9 |     <button on:click={actions.email(email, password)}>This updates email</button>
10 |     <button on:click={actions.password(newPassword, oldPassword)}>This updates password</button>
11 | </Update>
12 | 


--------------------------------------------------------------------------------
/examples/Storage/FileList.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import { FileList } from "$lib"
 3 | 
 4 |     // Optional
 5 |     let search = '';
 6 |     let limit = 10;
 7 |     let offset = 0;
 8 |     let orderType = 'ASC';
 9 | </script>
10 | 
11 | <FileList {search} {limit} {offset} {orderType}let:actions let:files>
12 |     {#each files as file}
13 |         <p>File: {file.name}</p>
14 |     {/each}
15 |     <button on:click={actions.reload()}>Reload</button>
16 | </FileList>
17 | 


--------------------------------------------------------------------------------
/examples/Storage/Storage.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import { Storage } from "$lib"
 3 | 
 4 |     // Required
 5 |     /**@type {File}*/ let file;
 6 |     /**@type {string}*/ let fileId = "unique()"; // this will generate random unique id, but you can use custom
 7 | 
 8 |     // Optional
 9 |     /**@type {string[]}*/ let read;
10 |     /**@type {string[]}*/ let write;
11 | </script>
12 | 
13 | <Storage {file} let:actions>
14 |     <button on:click={actions.create(fileId, file, read, write)}>Upload File</button>
15 | </Storage>
16 | 


--------------------------------------------------------------------------------
/examples/Database/Document.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { Collection, Document } from '$lib';
 3 | 
 4 | 	const collectionId = '5f56a3035a01f';
 5 | </script>
 6 | 
 7 | <Collection {collectionId} let:documents>
 8 | 	You have {documents.length} documents:
 9 | 	{#each documents as document}
10 | 		<Document {collectionId} documentId={document.$id} let:document let:actions>
11 | 			Title: {document.title}
12 | 			Text: {document.text}
13 | 			<button on:click={() => {actions.remove()}}>Delete</button>
14 | 		</Document>
15 | 	{/each}
16 | </Collection>
17 | 


--------------------------------------------------------------------------------
/examples/Auth/Email.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import { AuthEmail } from "$lib";
 3 |   
 4 |     let email = "";
 5 |     let password = "";
 6 |   
 7 |     const success = e => {
 8 |       //success callback
 9 |       // `e` contains the user object
10 |     };
11 |   
12 |     const failure = e => {
13 |       //failure callback
14 |     }
15 |   </script>
16 |   
17 |   <AuthEmail let:authorize on:success on:failure>
18 |     <input type="text" bind:value={email}>
19 |     <input type="text" bind:value={password}>
20 |     <button on:click={authorize(email,password)}>Login</button>
21 |   </AuthEmail>
22 | 


--------------------------------------------------------------------------------
/examples/Account/User.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import { User } from "$lib"
 3 | </script>
 4 | 
 5 | <User let:actions let:user>
 6 |     <button on:click={actions.reload()}>Reload user data</button>
 7 |     <button on:click={actions.get()}>Get logged in user data</button>
 8 |     <button on:click={actions.logout()}>Log out from current session</button>
 9 |     <button on:click={actions.logoutFrom("sessionId")}>Log out from specific session</button>
10 |     <button on:click={actions.logoutAll()}>Log out from all sessions</button>
11 | 
12 |     <!-- If logged in -->
13 |     <p>Hi, {user.name}</p>
14 | </User>
15 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-node';
 2 | import preprocess from 'svelte-preprocess';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | /** @type {@type {import('vite').UserConfig}} */
 6 | const config = {
 7 | 	// Consult https://github.com/sveltejs/svelte-preprocess
 8 | 	// for more information about preprocessors
 9 | 	preprocess: preprocess({
10 | 		typescript: true
11 | 	}),
12 | 	kit: {
13 | 		adapter: adapter({ 
14 | 			out: 'build',
15 | 			precompress: false
16 | 		}),
17 | 		package: {
18 | 			dir: 'package'
19 | 			// emitTypes: true
20 | 		},
21 | 	}
22 | };
23 | 
24 | export default config;
25 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	root: true,
 3 | 	parser: '@typescript-eslint/parser',
 4 | 	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
 5 | 	plugins: ['svelte3', '@typescript-eslint'],
 6 | 	ignorePatterns: ['*.cjs'],
 7 | 	overrides: [{ files: ['*.svelte', "**/*.svelte"], processor: 'svelte3/svelte3' }],
 8 | 	settings: {
 9 | 		'svelte3/typescript': () => require('typescript'),
10 | 		"svelte3/ignore-styles": () => true
11 | 	},
12 | 	parserOptions: {
13 | 		sourceType: 'module',
14 | 		ecmaVersion: 2020
15 | 	},
16 | 	env: {
17 | 		browser: true,
18 | 		amd: true,
19 |     	node: true,
20 |     	es6: true
21 | 	}
22 | };
23 | 


--------------------------------------------------------------------------------
/src/lib/Avatars/Favicon.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { SDK as Appwrite } from '../_appwrite';
 3 | 
 4 | 	export let url;
 5 | 
 6 | 	let src = Appwrite.sdk.avatars.getFavicon(url);
 7 | </script>
 8 | 
 9 | <slot {src} />
10 | 
11 | <!-- 
12 |   @component
13 |   
14 | ### `<Favicon />`
15 | 
16 | #### Arguments
17 | 
18 | - url - *required* `@type - {string}`
19 | 
20 | #### Directives
21 | 
22 | - **let:src** Image link `@type - {URL}`
23 | 
24 | ```svelte
25 | <script>
26 |     import { Favicon } from "metawrite"
27 |     const url = window.location.href;
28 | </script>
29 | 
30 | <Favicon {url} let:src>
31 |     <img src={String(src)} alt="favicon" />
32 | </Favicon>
33 | ```
34 |   
35 |  -->
36 | 


--------------------------------------------------------------------------------
/examples/Functions/Function.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { Function } from '$lib';
 3 | 	let functionId = 'someExecution'; // required
 4 | 	let newFunctionId = '';
 5 | 	let data = 'String of custom data to send to function.'; // could be empty string because optional
 6 | </script>
 7 | 
 8 | <Function {functionId} {data} let:actions let:executions>
 9 | 	{#each executions as execution}
10 | 		<p>
11 | 			Execution ID: {execution.$id}, Function ID: {execution.functionId}, Date Created: {execution.dateCreated}
12 | 		</p>
13 | 	{/each}
14 | 	<input type="text" name="functionId" placeholder="Function ID" bind:value={newFunctionId} />
15 | 	<button on:click={actions.create(newFunctionId, data)}>Create Execution</button>
16 | </Function>
17 | 


--------------------------------------------------------------------------------
/examples/Account/Create.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import { Create } from "$lib";
 3 | 
 4 |     let name, email, password = "";
 5 | 
 6 |     const success = e => {
 7 |     //success callback
 8 |     // `e` contains the user object
 9 |   };
10 | 
11 |   const failure = e => {
12 |     //failure callback
13 |   }
14 | </script>
15 | 
16 | <Create let:actions on:success on:failure>
17 |     <input type="text" name="name" placeholder="name" bind:value={name} />
18 |     <input type="text" name="email" placeholder="email" bind:value={email} />
19 |     <input type="password" name="password" placeholder="password" bind:value={password} />
20 |     <button on:click={actions.create(name, email, password)}>Create Account</button>
21 | </Create>
22 | 


--------------------------------------------------------------------------------
/examples/Locale/Countries.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import { Countries } from "$lib"
 3 | 
 4 |     let eu = true; // if you want to list only EU countries
 5 | </script>
 6 | 
 7 | <Countries let:actions let:countries>
 8 |     <button on:click={actions.reload()}>Reload</button>
 9 |     <p>There are {countries.sum} countries in the world:</p>
10 |     {#each countries.countries as country}
11 |         <p>{country.name}, {country.code}</p>
12 |     {/each}
13 | </Countries>
14 | 
15 | <Countries {eu} let:actions let:countries>
16 |     <button on:click={actions.reload()}>Reload</button>
17 |     <p>There are {countries.sum} countries in EU:</p>
18 |     {#each countries.countries as country}
19 |         <p>{country.name}, {country.code}</p>
20 |     {/each}
21 | </Countries>
22 | 


--------------------------------------------------------------------------------
/examples/Account/MagicURL.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import { MagicURL } from "metawrite";
 3 | 
 4 |     const userId = "32h2hj24h2"
 5 |     let email = ""
 6 |     const url = "http://localhost:3000/page-to-complete"
 7 | 
 8 | 	const successCreate = (e) => {
 9 | 		console.log(e)
10 | 	}
11 | 	const failureCreate = (e) => {
12 | 		console.log(e)
13 | 	}
14 | 	const successComplete = (e) => {
15 | 		console.log(e)
16 | 	}
17 | 	const failureComplete = (e) => {
18 | 		console.log(e)
19 | 	}
20 | </script>
21 | 
22 | <MagicURL let:actions on:successCreate on:successComplete on:failureCreate on:failureComplete>
23 | 		<input type="email" name="email" placeholder="Email" bind:value={email} />
24 | 		<button on:click={actions.create(userId, email, url)}>Send login link</button>
25 | 		<button on:click={actions.complete()}>Confirm Login</button>
26 | </MagicURL>
27 | 


--------------------------------------------------------------------------------
/src/lib/Avatars/Flag.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { SDK as Appwrite } from '../_appwrite';
 3 | 
 4 | 	export let code;
 5 | 	export let width = 100;
 6 | 	export let height = 100;
 7 | 	export let quality = 100;
 8 | 
 9 | 	let src = Appwrite.sdk.avatars.getFlag(code, width, height, quality);
10 | </script>
11 | 
12 | <slot {src} />
13 | 
14 | <!-- 
15 |   @component
16 | 
17 | ### `<Flag />`
18 | 
19 | #### Arguments
20 | 
21 | - code - *required* `@type - {string}`
22 | - width - *optional* `@type - {number}`
23 | - height - *optional* `@type - {string}`
24 | - quality - *optional* `@type - {string}`
25 | 
26 | #### Directives
27 | 
28 | - **let:src** Image link `@type - {URL}`
29 | 
30 | #### Example 
31 | 
32 | ```svelte
33 | <script>
34 |     import { Flag } from "metawrite"
35 | </script>
36 | 
37 | <Flag code="canada" let:src>
38 |     <img src={String(src)} alt="flag" />
39 | </Flag>
40 | ```
41 |  -->
42 | 


--------------------------------------------------------------------------------
/src/lib/Avatars/Image.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { SDK as Appwrite } from '../_appwrite';
 3 | 
 4 | 	export let url = '';
 5 | 	export let width;
 6 | 	export let height;
 7 | 
 8 | 	let src = Appwrite.sdk.avatars.getImage(url, width, height);
 9 | </script>
10 | 
11 | <slot {src} />
12 | 
13 | <!-- 
14 |   @component
15 | 
16 | ### `<Image />`
17 | 
18 | #### Arguments
19 | 
20 | - url - *required* `@type - {string}`
21 | - width - *optional* `@type - {number}`
22 | - height - *optional* `@type - {number}`
23 | 
24 | #### Directives
25 | 
26 | - **let:src** Image link `@type - {URL}`
27 | 
28 | #### Example
29 | 
30 | ```svelte
31 | <script>
32 |     import { Image } from "metawrite";
33 | 
34 |     let url = "https://increas.io/";
35 |     let width, height = 100;
36 | </script>
37 | 
38 | <Image {url} {width} {height} let:src>
39 |     <img src={String(src)} alt="someImage" />
40 | </Image>
41 | ```
42 |  -->
43 | 


--------------------------------------------------------------------------------
/src/lib/Avatars/Browser.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { SDK as Appwrite } from '../_appwrite';
 3 | 
 4 | 	export let code;
 5 | 	export let width = 100;
 6 | 	export let height = 100;
 7 | 	export let quality = 100;
 8 | 
 9 | 	let src = Appwrite.sdk.avatars.getBrowser(code, width, height, quality);
10 | </script>
11 | 
12 | <slot {src} />
13 | 
14 | <!-- 
15 |   @component 
16 | 
17 | ### `<Browser />`
18 | 
19 | #### Arguments
20 | 
21 | - code - *required* `@type - {string}`
22 | - width - *optional* `@type - {number}`
23 | - height - *optional* `@type - {string}`
24 | - quality - *optional* `@type - {string}`
25 | 
26 | #### Directives
27 | 
28 | - **let:src** Image link `@type - {URL}`
29 | 
30 | #### Example 
31 | 
32 | ```svelte
33 | <script>
34 |     import { Browser } from "metawrite"
35 | </script>
36 | 
37 | <Browser code="firefox" let:src>
38 |     <img src={String(src)} alt="Browser" />
39 | </Browser>
40 | ```
41 |  -->
42 | 


--------------------------------------------------------------------------------
/src/lib/Avatars/CreditCard.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { SDK as Appwrite } from '../_appwrite';
 3 | 
 4 | 	export let code;
 5 | 	export let width = 100;
 6 | 	export let height = 100;
 7 | 	export let quality = 100;
 8 | 
 9 | 	let src = Appwrite.sdk.avatars.getCreditCard(code, width, height, quality);
10 | </script>
11 | 
12 | <slot {src} />
13 | 
14 | <!-- 
15 |   @component
16 | 
17 | ### `<CreditCard />`
18 | 
19 | #### Arguments
20 | 
21 | - code - *required* `@type - {string}`
22 | - width - *optional* `@type - {number}`
23 | - height - *optional* `@type - {string}`
24 | - quality - *optional* `@type - {string}`
25 | 
26 | #### Directives
27 | 
28 | - **let:src** Image link `@type - {URL}`
29 | 
30 | #### Example 
31 | 
32 | ```svelte
33 | <script>
34 |     import { CreditCard } from "metawrite"
35 | </script>
36 | 
37 | <CreditCard code="amex" let:src>
38 |     <img src={String(src)} alt="card" />
39 | </CreditCard>
40 | ```
41 | 
42 |  -->
43 | 


--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
 3 | 
 4 | name: npm Package
 5 | 
 6 | on:
 7 |   release:
 8 |     types: [created]
 9 | 
10 | jobs:
11 |   build:
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - uses: actions/checkout@v2
15 |       - uses: actions/setup-node@v2
16 |         with:
17 |           node-version: 16
18 |       - run: npm ci
19 |       - run: npm test
20 |       - run: npm run package
21 | 
22 |   publish-npm:
23 |     needs: build
24 |     runs-on: ubuntu-latest
25 |     steps:
26 |       - uses: actions/checkout@v2
27 |       - uses: actions/setup-node@v2
28 |         with:
29 |           node-version: 16
30 |           registry-url: https://registry.npmjs.org/
31 |       - run: npm ci
32 |       - run: npm run release
33 |         env:
34 |           NODE_AUTH_TOKEN: ${{secrets.npm_token}}


--------------------------------------------------------------------------------
/src/lib/stores/_user.ts:
--------------------------------------------------------------------------------
 1 | import { SDK as Appwrite } from '../_appwrite';
 2 | import { writable } from 'svelte/store';
 3 | import type { Models } from 'appwrite';
 4 | 
 5 | export class UserStore {
 6 | 	subscribe: any;
 7 | 	set: (this: void, value: any) => void;
 8 | 	update: (this: void, updater: any) => void;
 9 | 	constructor() {
10 | 		const { subscribe, set, update } = writable(null);
11 | 		this.subscribe = subscribe;
12 | 		this.set = set;
13 | 		this.update = update;
14 | 	}
15 | 
16 | 	/**
17 | 	 * Reload the current User.
18 | 	 * @returns {Promise<Models.User<Models.Preferences>>}
19 | 	 */
20 | 	async reload(): Promise<Models.User<Models.Preferences>> {
21 | 		const response = await Appwrite.sdk.account.get();
22 | 		this.set(response);
23 | 		return response;
24 | 	}
25 | 
26 | 	/**
27 | 	 * Logout the current User.
28 | 	 * @returns {Promise<object>}
29 | 	 */
30 | 	async logout(): Promise<object> {
31 | 		const response = await Appwrite.sdk.account.deleteSession('current');
32 | 		this.set(null);
33 | 		return response;
34 | 	}
35 | }
36 | 


--------------------------------------------------------------------------------
/examples/Storage/File.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { File } from '$lib';
 3 | 
 4 | 	// Required
 5 | 	/**@type {File}*/ let file;
 6 | 
 7 | 	// OPTIONAL
 8 | 	/** @type {number} */ let width;
 9 | 	/** @type {number} */ let height;
10 | 	/** @type {string} */ let gravity;
11 | 	/** @type {number} */ let quality;
12 | 	/** @type {number} */ let borderWidth;
13 | 	/** @type {string} */ let borderColor;
14 | 	/** @type {number} */ let borderRadius;
15 | 	/** @type {number} */ let opacity;
16 | 	/** @type {number} */ let rotation;
17 | 	/** @type {string} */ let background;
18 | 	/** @type {string} */ let output;
19 | 	/** @type {string[]} */ let read;
20 | 	/** @type {string[]} */ let write;
21 | </script>
22 | 
23 | <File {file} let:actions>
24 | 	<button on:click={actions.download()}>Download File</button>
25 | 	<button on:click={actions.view()}>File View</button>
26 | 	<button on:click={actions.preview()}>Preview File</button>
27 | 	<button on:click={actions.update(read, write)}>Update File</button>
28 | 	<button on:click={actions.delete()}>Delete File</button>
29 | </File>
30 | 


--------------------------------------------------------------------------------
/src/lib/Avatars/QR.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import { SDK as Appwrite } from '../_appwrite';
 3 | 
 4 | 	export let text;
 5 | 	export let size = 400;
 6 | 	export let margin = 1;
 7 | 	export let download = false;
 8 | 
 9 | 	let src = Appwrite.sdk.avatars.getQR(text, size, margin, download ? true : false);
10 | </script>
11 | 
12 | <slot {src} />
13 | 
14 | <!-- 
15 |   @component
16 |   
17 | ### `<QR />`
18 | 
19 | #### Arguments
20 | 
21 | - text - *required* `@type - {string}`
22 | - size - *optional* `@type - {optional}`
23 | - margin - *optional* `@type - {number}`
24 | - download - *optional* `@type - {boolean}`
25 | 
26 | #### Directives
27 | 
28 | - **let:src** Image link `@type - {URL}`
29 | 
30 | #### Example 
31 | 
32 | ```svelte
33 | <script>
34 | 	import { QR } from 'metawrite';
35 | 
36 | 	let text = 'https://increas.io/'; // could be any text
37 | 	let size = 500;
38 | 	let margin = 1;
39 | 	let download = false;
40 | </script>
41 | 
42 | <QR {text} {size} {margin} {download} let:src>
43 | 	<img src={String(src)} alt="QR Code" />
44 | </QR>
45 | 
46 | ```
47 |   
48 |  -->
49 | 


--------------------------------------------------------------------------------
/src/lib/Auth/OAuth2.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	/**
 3 | 	 * @slot {{
 4 | 	 * authorize: (authProvider: string, success: string, failure: string) => Promise<object>;
 5 | 	 * }}
 6 | 	 */
 7 | 	import { SDK as Appwrite } from '../_appwrite';
 8 | 
 9 | 	export let authProvider;
10 | 	export let success;
11 | 	export let failure;
12 | 
13 | 	const authorize = () => Appwrite.sdk.account.createOAuth2Session(authProvider, success, failure);
14 | </script>
15 | 
16 | <slot {authorize} />
17 | 
18 | <!-- 
19 |   @component
20 | 
21 | ### `<AuthOAuth2 />`
22 | 
23 | #### Properties
24 | | Name | Description |
25 | | --- | --- |
26 | | `authProvider` | OAuth2 provider. `@type - {string}` |
27 | | `success` | Success url. `@type - {string}` |
28 | | `failure` | Failure url. `@type - {string}` |
29 | |#### Directives||
30 | 
31 | **let:authorize()**
32 | 
33 | #### Example 
34 | 
35 | ```svelte
36 | <script>
37 |     import { AuthOAuth2 } from "metawrite";
38 |   </script>
39 |   
40 |   <AuthOAuth2
41 |     authProvider="google"
42 |     success="http://localhost:3000?success"
43 |     failure="http://localhost:3000?failure"
44 |     let:authorize>
45 |     <button on:click={authorize}>Login Google</button>
46 |   </AuthOAuth2>
47 | ```
48 | 
49 |  -->
50 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/documentation.yaml:
--------------------------------------------------------------------------------
 1 | name: "📚 Documentation"
 2 | description: "Report an issue related to documentation"
 3 | title: "📚 Documentation: "
 4 | labels: [documentation]
 5 | body:
 6 |   - type: markdown
 7 |     attributes:
 8 |       value: |
 9 |         Thanks for taking the time to make our documentation better 🙏
10 |   - type: textarea
11 |     id: issue-description
12 |     validations:
13 |       required: true
14 |     attributes:
15 |       label: "💭 Description"
16 |       description: "A clear and concise description of what the issue is."
17 |       placeholder: "Documentation should not ..."
18 |   - type: checkboxes
19 |     id: no-duplicate-issues
20 |     attributes:
21 |       label: "👀 Have you spent some time to check if this issue has been raised before?"
22 |       description: "Have you Googled for a similar issue or checked our older issues for a similar bug?"
23 |       options:
24 |         - label: "I checked and didn't find similar issue"
25 |           required: true
26 |   - type: checkboxes
27 |     id: read-code-of-conduct
28 |     attributes:
29 |       label: "🏢 Have you read the Code of Conduct?"
30 |       options:
31 |         - label: "I have read the [Code of Conduct](https://github.com/koodeau/metawrite/blob/main/CODE_OF_CONDUCT.md)"
32 |           required: true


--------------------------------------------------------------------------------
/src/lib/Locale/Locale.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	/**
 3 | 	 * @slot {{
 4 | 	 * code: object;
 5 | 	 * actions: {
 6 | 	 *  reload: () => Promise<object>;
 7 | 	 * }}}
 8 | 	 * @slot {{ error: object }} error
 9 | 	 */
10 | 	import { SDK as Appwrite } from '../_appwrite';
11 | 
12 | 	const fetchUserLocale = () => Appwrite.sdk.locale.get();
13 | 
14 | 	const actions = {
15 | 		reload: () => (locale = fetchUserLocale())
16 | 	};
17 | 
18 | 	let locale = fetchUserLocale();
19 | </script>
20 | 
21 | {#await locale}
22 | 	<slot name="loading" />
23 | {:then response}
24 | 	<slot code={response} {actions} />
25 | {:catch error}
26 | 	<slot name="error" {error} />
27 | {/await}
28 | 
29 | <!-- 
30 |   @component
31 |   
32 | ### `<Locale />`
33 | 
34 | #### Slots
35 | 
36 | - **loading**
37 | - **error**
38 | 
39 | #### Directives
40 | 
41 | **let:actions**
42 | | Name | Description |
43 | | --- | --- |
44 | | `reload()` | Reload. |
45 | 
46 | - **let:code** `object`
47 | 
48 | #### Example 
49 | 
50 | ```svelte
51 | <script>
52 | 	import { Locale } from 'metawrite';
53 | </script>
54 | 
55 | <Locale let:actions let:code>
56 | 	<h1>Active Session</h1>
57 | 	<button on:click={actions.reload()}>Reload</button>
58 | 	<p>Location: {code.country}, {code.continentCode}</p>
59 | 	<p>IP: {code.ip}</p>
60 | </Locale>
61 | ```
62 |   
63 |  -->
64 | 


--------------------------------------------------------------------------------
/src/lib/Account/CreateJWT.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	/**
 3 | 	 * @slot {{
 4 | 	 * actions: {
 5 | 	 *  create: () => Promise<any>;
 6 | 	 * }
 7 | 	 * }}
 8 | 	 */
 9 | 	import { createEventDispatcher } from 'svelte';
10 | 	import { active } from '../_stores';
11 | 	import { SDK as Appwrite } from '../_appwrite';
12 | 
13 | 	const dispatch = createEventDispatcher();
14 | 	const actions = {
15 | 		create: async () => {
16 | 			try {
17 | 				const response = await Appwrite.sdk.account.createJWT();
18 | 				dispatch('success', response);
19 | 				return response;
20 | 			} catch (error) {
21 | 				dispatch('failure', error);
22 | 			}
23 | 		}
24 | 	};
25 | </script>
26 | 
27 | <!--
28 |   @component
29 | 
30 |   Creates JWT token.
31 | 
32 | ### `<CreateJWT />`
33 | 
34 | #### Directives
35 | 
36 | **let:actions**
37 | 
38 | | Name                        | Description                                                  |
39 | | --------------------------- | ------------------------------------------------------------ |
40 | | `create()` | Creates JWT token. |
41 | 
42 | #### Example
43 | 
44 | ```svelte
45 | <script>
46 |     import { CreateJWT } from "metawrite";
47 | </script>
48 | 
49 | <CreateJWT let:actions>
50 |     <button on:click={actions.create}>Create JWT token</button>
51 | </CreateJWT>
52 | ```
53 | 
54 |   -->
55 | 
56 | {#if $active}
57 | 	<slot {actions} />
58 | {/if}
59 | 


--------------------------------------------------------------------------------
/changelog.hbs:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <img alt="Metawrite" src="static/logo.svg" />
 3 | </p>
 4 | 
 5 | > Versions `x.x.n` neans some minor changes to package documentation or typings.
 6 | > Versions `x.n.x` might include some minor breaking changes.
 7 | > Versions `n.x.x` might include some major breaking changes.
 8 | 
 9 | ### Changelog
10 | 
11 | All notable changes to this project will be documented in this file. Dates are displayed in UTC.
12 | 
13 | {{#unless options.hideCredit}}
14 |   Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
15 | {{/unless}}
16 | 
17 | {{#each releases}}
18 |   {{#if href}}
19 |     ###{{#unless major}}#{{/unless}} [{{title}}]({{href}})
20 |   {{else}}
21 |     #### {{title}}
22 |   {{/if}}
23 | 
24 |   {{#if tag}}
25 |     > {{niceDate}}
26 |   {{/if}}
27 | 
28 |   {{#if summary}}
29 |     {{summary}}
30 |   {{/if}}
31 | 
32 |   {{#each merges}}
33 |     - {{#if commit.breaking}}**Breaking change:** {{/if}}{{message}}{{#if href}} [`#{{id}}`]({{href}}){{/if}}
34 |   {{/each}}
35 |   {{#each fixes}}
36 |     - {{#if commit.breaking}}**Breaking change:** {{/if}}{{commit.subject}}{{#each fixes}}{{#if href}} [`#{{id}}`]({{href}}){{/if}}{{/each}}
37 |   {{/each}}
38 |   {{#each commits}}
39 |     - {{#if breaking}}**Breaking change:** {{/if}}{{subject}}{{#if href}} [`{{shorthash}}`]({{href}}){{/if}}
40 |   {{/each}}
41 | 
42 | {{/each}}


--------------------------------------------------------------------------------
/src/lib/Locale/PhoneCodes.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	/**
 3 | 	 * @slot {{
 4 | 	 * codes: any;
 5 | 	 * actions: {
 6 | 	 *  reload: () => Promise<object>;
 7 | 	 * }}}
 8 | 	 * @slot {{ error: object }} error
 9 | 	 */
10 | 	import { SDK as Appwrite } from '../_appwrite';
11 | 
12 | 	const fetchPhoneCodes = () => Appwrite.sdk.locale.getCountriesPhones();
13 | 
14 | 	const actions = {
15 | 		reload: () => (phoneCodes = fetchPhoneCodes())
16 | 	};
17 | 
18 | 	let phoneCodes = fetchPhoneCodes();
19 | </script>
20 | 
21 | {#await phoneCodes}
22 | 	<slot name="loading" />
23 | {:then response}
24 | 	<slot codes={response} {actions} />
25 | {:catch error}
26 | 	<slot name="error" {error} />
27 | {/await}
28 | 
29 | <!-- 
30 |   @component
31 |   
32 | ### `<PhoneCodes />`
33 | 
34 | #### Slots
35 | 
36 | - **loading**
37 | - **error**
38 | 
39 | #### Directives
40 | 
41 | **let:actions**
42 | | Name | Description |
43 | | --- | --- |
44 | | `reload()` | Reload. |
45 | 
46 | - **let:codes**
47 | 
48 | #### Example 
49 | 
50 | ```svelte
51 | <script>
52 | 	import { PhoneCodes } from 'metawrite';
53 | </script>
54 | 
55 | <PhoneCodes let:actions let:codes>
56 | 	<button on:click={actions.reload()}>Reload</button>
57 | 	<p>There are {codes.total} phone codes:</p>
58 | 	{#each codes.phones as phone}
59 | 		<p>{phone.code} - {phone.countyName}></p>
60 | 	{/each}
61 | </PhoneCodes>
62 | ```
63 |   
64 |  -->
65 | 


--------------------------------------------------------------------------------
/src/lib/Locale/Languages.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	/**
 3 | 	 * @slot {{
 4 | 	 * languages: any;
 5 | 	 * actions: {
 6 | 	 *  reload: () => Promise<object>;
 7 | 	 * }}}
 8 | 	 * @slot {{ error: object }} error
 9 | 	 */
10 | 	import { SDK as Appwrite } from '../_appwrite';
11 | 
12 | 	const fetchLanguages = () => Appwrite.sdk.locale.getLanguages();
13 | 
14 | 	const actions = {
15 | 		reload: () => (languages = fetchLanguages())
16 | 	};
17 | 
18 | 	let languages = fetchLanguages();
19 | </script>
20 | 
21 | {#await languages}
22 | 	<slot name="loading" />
23 | {:then response}
24 | 	<slot languages={response} {actions} />
25 | {:catch error}
26 | 	<slot name="error" {error} />
27 | {/await}
28 | 
29 | <!-- 
30 |   @component
31 |   
32 | ### `<Languages />`
33 | 
34 | #### Slots
35 | 
36 | - **loading**
37 | - **error**
38 | 
39 | #### Directives
40 | 
41 | **let:actions**
42 | | Name | Description |
43 | | --- | --- |
44 | | `reload()` | Reload. |
45 | 
46 | - **let:languages**
47 | 
48 | #### Example 
49 | 
50 | ```svelte
51 | <script>
52 | 	import { Languages } from 'metawrite';
53 | </script>
54 | 
55 | <Languages let:actions let:languages>
56 | 	<button on:click={actions.reload()}>Reload</button>
57 | 	<p>There are {languages.total} languages:</p>
58 | 	{#each languages.languages as language}
59 | 		<p>{language.name}, {language.code}></p>
60 |     {/each}
61 | </Languages>
62 | ```
63 |   
64 |  -->
65 | 


--------------------------------------------------------------------------------
/src/lib/Init.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { onMount } from 'svelte';
 3 | 	import { active } from './_stores';
 4 | 	import { SDK as Appwrite } from './_appwrite';
 5 | 
 6 | 	export let endpoint: string;
 7 | 	export let project: string;
 8 | 	export let locale = 'en';
 9 | 	export let realtime = endpoint;
10 | 
11 | 	onMount(() => {
12 | 		if (endpoint == '') {
13 | 			console.error('Endpoint must be set.');
14 | 			return;
15 | 		}
16 | 		if (project == '') {
17 | 			console.error('Project ID must be set.');
18 | 			return;
19 | 		}
20 | 
21 | 		Appwrite.setConfig({ endpoint, project, locale, realtime });
22 | 		active.set(true);
23 | 	});
24 | </script>
25 | 
26 | {#if $active}
27 | 	<slot />
28 | {/if}
29 | 
30 | <!-- 
31 | 	@component
32 | 	
33 | ## Initialize
34 | 
35 | Must be initialised and wrap every `metawrite` component.
36 | 
37 | ```svelte
38 | <script>
39 |   import { Appwrite } from "metawrite";
40 | 
41 |   const config = {
42 |     endpoint: "http://localhost/v1",
43 |     project: "demo", 
44 |     locale: "fr",
45 |   };
46 | </script>
47 | 
48 | <Appwrite {...config}>
49 |   ...
50 | </Appwrite>
51 | ```
52 | 
53 | ### Properties
54 | | Name | Description |
55 | | --- | --- |
56 | | `endpoint` | Your Appwrite endpoint. `@type - {string}` |
57 | | `project` | Your project ID. `@type - {string}` |
58 | | `locale` | _Optional_ The users locale. `@type - {string}` |
59 | 	
60 |  -->
61 | 


--------------------------------------------------------------------------------
/src/lib/Locale/Continents.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	/**
 3 | 	 * @slot {{
 4 | 	 * continents: any;
 5 | 	 * actions: {
 6 | 	 *  reload: () => Promise<object>;
 7 | 	 * }}}
 8 | 	 * @slot {{ error: object }} error
 9 | 	 */
10 | 	import { SDK as Appwrite } from '../_appwrite';
11 | 
12 | 	const fetchContinents = () => Appwrite.sdk.locale.getContinents();
13 | 
14 | 	const actions = {
15 | 		reload: () => (continents = fetchContinents())
16 | 	};
17 | 
18 | 	let continents = fetchContinents();
19 | </script>
20 | 
21 | {#await continents}
22 | 	<slot name="loading" />
23 | {:then response}
24 | 	<slot continents={response} {actions} />
25 | {:catch error}
26 | 	<slot name="error" {error} />
27 | {/await}
28 | 
29 | <!-- 
30 |   @component
31 | 
32 | ### `<Continents />`
33 | 
34 | #### Directives
35 | 
36 | **let:actions**
37 | | Name | Description |
38 | | --- | --- |
39 | | `reload()` | Reload. |
40 | 
41 | - **let:continents**
42 | 
43 | #### Slots
44 | 
45 | - **loading**
46 | - **error**
47 | 
48 | #### Example 
49 | 
50 | ```svelte
51 | <script>
52 |     import { Continents } from "metawrite"
53 | </script>
54 | 
55 | <Continents let:actions let:continents>
56 |     <button on:click={actions.reload()}>Reload</button>
57 |     <p>There are {continents.total} continents:</p>
58 |     {#each continents.continents as continent}
59 |         <p>{continent.name}, {continent.code}</p>
60 |     {/each}
61 | </Continents>
62 | ```
63 | 
64 |  -->
65 | 


--------------------------------------------------------------------------------
/src/lib/Locale/Currencies.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	/**
 3 | 	 * @slot {{
 4 | 	 * currencies: any;
 5 | 	 * actions: {
 6 | 	 *  reload: () => Promise<object>;
 7 | 	 * }}}
 8 | 	 * @slot {{ error: object }} error
 9 | 	 */
10 | 	import { SDK as Appwrite } from '../_appwrite';
11 | 
12 | 	const fetchCurrencies = () => Appwrite.sdk.locale.getCurrencies();
13 | 
14 | 	const actions = {
15 | 		reload: () => (currencies = fetchCurrencies())
16 | 	};
17 | 
18 | 	let currencies = fetchCurrencies();
19 | </script>
20 | 
21 | {#await currencies}
22 | 	<slot name="loading" />
23 | {:then response}
24 | 	<slot currencies={response} {actions} />
25 | {:catch error}
26 | 	<slot name="error" {error} />
27 | {/await}
28 | 
29 | <!-- 
30 |   @component
31 |   
32 | ### `<Currencies />`
33 | 
34 | #### Slots
35 | 
36 | - **loading**
37 | - **error**
38 | 
39 | #### Directives
40 | 
41 | **let:actions**
42 | | Name | Description |
43 | | --- | --- |
44 | | `reload()` | Reload. |
45 | 
46 | - **let:currencies**
47 | 
48 | #### Example 
49 | 
50 | ```svelte
51 | <script>
52 |     import { Currencies } from "metawrite"
53 | </script>
54 | 
55 | <Currencies let:actions let:currencies>
56 |     <button on:click={actions.reload()}>Reload</button>
57 |     <p>There are {currencies.total} currencies:</p>
58 |     {#each currencies.currencies as currency}
59 |         <p>{currency.symbol} - {currency.name} ({currency.code})</p>
60 |     {/each}
61 | </Currencies>
62 | ```
63 |   
64 |  -->
65 | 


--------------------------------------------------------------------------------
/examples/Account/RecoverPassword.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import { RecoverPassword } from "$lib";
 3 | 
 4 |     const url = "http://localhost:3000/reset-password"; // URL that will point to the next step.
 5 |     let email = '';
 6 | 
 7 |     const successRecover = e => {
 8 |     //success callback
 9 |     // `e` contains the user object
10 |   };
11 | 
12 |   const failureRecover = e => {
13 |     //failure callback
14 |   }
15 | </script>
16 | 
17 | <!-- localhost/forgot-password -->
18 | <RecoverPassword let:actions on:successRecover on:failureRecover>
19 |     <input name="email" type="text" bind:value={email, url} placeholder="Email" />
20 |     <button on:click{actions.recover(email)}>Recover Password</button>
21 | </RecoverPassword>
22 | 
23 | <!-- Then on localhost/reset-password  -->
24 | <script>
25 |     import { RecoverPassword } from "$lib";
26 | 
27 |     let password, passwordAgain = '';
28 | 
29 |     const successComplete = e => {
30 |     //success callback
31 |     // `e` contains the user object
32 |   };
33 | 
34 |   const failureComplete = e => {
35 |     //failure callback
36 |   }
37 | </script>
38 | 
39 | <RecoverPassword let:actions on:successComplete on:failureComplete>
40 |     <input type="password" name="password" bind:value{password} placeholder="Password" />
41 |     <input type="password" name="password" bind:value{passwordAgain} placeholder="Confirm Password" />
42 |     <button on:click{actions.complete(password, passwordAgain)}>Set New Password</button>
43 | </RecoverPassword>
44 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature.yaml:
--------------------------------------------------------------------------------
 1 | name: 🚀 Feature
 2 | description: "Submit a proposal for a new feature"
 3 | title: "🚀 Feature: "
 4 | labels: [feature]
 5 | body:
 6 |   - type: markdown
 7 |     attributes:
 8 |       value: |
 9 |         Thanks for taking the time to fill out our feature request form 🙏
10 |   - type: textarea
11 |     id: feature-description
12 |     validations:
13 |       required: true
14 |     attributes:
15 |       label: "🔖 Feature description"
16 |       description: "A clear and concise description of what the feature is."
17 |       placeholder: "You should add ..."
18 |   - type: textarea
19 |     id: pitch
20 |     validations:
21 |       required: true
22 |     attributes:
23 |       label: "🎤 Pitch"
24 |       description: "Please explain why this feature should be implemented and how it would be used. Add examples, if applicable."
25 |       placeholder: "In my use-case, ..."
26 |   - type: checkboxes
27 |     id: no-duplicate-issues
28 |     attributes:
29 |       label: "👀 Have you spent some time to check if this issue has been raised before?"
30 |       description: "Have you Googled for a similar issue or checked our older issues for a similar bug?"
31 |       options:
32 |         - label: "I checked and didn't find similar issue"
33 |           required: true
34 |   - type: checkboxes
35 |     id: read-code-of-conduct
36 |     attributes:
37 |       label: "🏢 Have you read the Code of Conduct?"
38 |       options:
39 |         - label: "I have read the [Code of Conduct](https://github.com/koodeau/metawrite/blob/main/CODE_OF_CONDUCT.md)"
40 |           required: true


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"moduleResolution": "node",
 4 | 		"module": "esnext",
 5 | 		"lib": ["ES2020", "ESNext", "DOM", "ESNext.Array"],
 6 | 		"target": "es2019",
 7 | 		"types": [ "svelte" ],
 8 | 		// "allowSyntheticDefaultImports": true,
 9 | 		// "declaration": true,
10 | 		// "emitDeclarationOnly": true,
11 | 		/**
12 | 			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
13 | 			to enforce using \`import type\` instead of \`import\` for Types.
14 | 		*/
15 | 		"importsNotUsedAsValues": "error",
16 | 		/**
17 | 			TypeScript doesn't know about import usages in the template because it only sees the
18 | 			script of a Svelte file. Therefore preserve all value imports. Requires TS 4.5 or higher.
19 | 		*/
20 | 		"preserveValueImports": true,
21 | 		"isolatedModules": true,
22 | 		"resolveJsonModule": true,
23 | 		/**
24 | 			To have warnings/errors of the Svelte compiler at the correct position,
25 | 			enable source maps by default.
26 | 		*/
27 | 		"sourceMap": true,
28 | 		"esModuleInterop": true,
29 | 		"skipLibCheck": true,
30 | 		"forceConsistentCasingInFileNames": true,
31 | 		"allowSyntheticDefaultImports": true,
32 | 		"baseUrl": ".",
33 | 		"allowJs": true,
34 | 		"checkJs": true,
35 | 		"paths": {
36 | 			"$lib": ["src/lib"],
37 | 			"$lib/*": ["src/lib/*"]
38 | 		}
39 | 	},
40 | 	// "extends": "./.svelte-kit/tsconfig.json",
41 | 	"include": ["src/lib/*.d.ts", "src/lib/**/*.d.ts", "src/lib/**/*.js", "src/lib/*.js", "src/lib/**/*.ts", "src/lib/*.ts", "src/lib/**/*.svelte", "src/lib/*.svelte"], // "package"
42 | 	"exclude": ["examples/**/*.d.ts", "examples/**/*.js", "examples/**/*.ts", "examples/**/*.svelte"]
43 | }
44 | 


--------------------------------------------------------------------------------
/src/lib/Realtime.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { SDK as Appwrite } from './_appwrite';
 3 | 
 4 | 	export let channels: string | string[];
 5 | 
 6 | 	const subscription = Appwrite.sdk.subscribe(channels, callback);
 7 | 	const actions = {
 8 | 		subscribe: () => (payload = subscription()),
 9 |         unsubscribe: () => {
10 |             const unsubscribe = Appwrite.sdk.subscribe(channels, callback);
11 | 			return unsubscribe();
12 |         }
13 | 	};
14 | 	let payload = subscription();
15 | 
16 | 
17 | 
18 | function callback(payload: unknown) {
19 | 	// Callback will be executed on changes for documents A and all files.
20 | 	return payload;
21 | }
22 | </script>
23 | 
24 | <slot {payload} {actions} />
25 | 
26 | <!-- 
27 | 	@component
28 | 	
29 | ### `<Realtime />`
30 | 
31 | For more information about using Realtime in Appwrite see [Realtime documentation](https://appwrite.io/docs/realtime).
32 | 
33 | #### Arguments
34 | 
35 | - channels - *required* `string | string[]`
36 | 
37 | #### Directives
38 | 
39 | **let:payload** - The payload from the subscription will contain [following properties](https://appwrite.io/docs/realtime#payload).
40 | 
41 | **let:actions**
42 | | Name | Description |
43 | | --- | --- |
44 | | `subscribe()` | Subscribing to all updates related to one or more channels. |
45 | | `unsubscribe()` | If you no longer want to receive updates from a subscription, you can unsubscribe so that your callbacks are no longer called. |
46 | 
47 | #### Example 
48 | 
49 | ```svelte
50 | <script>
51 | 	import { Realtime } from 'metawrite';
52 | </script>
53 | 
54 | <Realtime channels="account" let:actions let:payload>
55 | 	<h1>{payload.timestamp}</h1>
56 | 	<button on:click={actions.subscribe()}>Subscribe to Account channel</button>
57 | 	<button on:click={actions.unsubscribe()}>Unsubscribe from Account channel</button>
58 | </Realtime>
59 | ```
60 | 	
61 |  -->
62 | 
63 | 


--------------------------------------------------------------------------------
/src/lib/Locale/Countries.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	/**
 3 | 	 * @slot {{
 4 | 	 * countries: any;
 5 | 	 * actions: {
 6 | 	 *  reload: () => Promise<object>;
 7 | 	 * }}}
 8 | 	 * @slot {{ error: object }} error
 9 | 	 */
10 | 	import { SDK as Appwrite } from '../_appwrite';
11 | 
12 | 	export let eu = false;
13 | 
14 | 	const fetchCountries = eu
15 | 		? () => Appwrite.sdk.locale.getCountriesEU()
16 | 		: () => Appwrite.sdk.locale.getCountries();
17 | 
18 | 	const actions = {
19 | 		reload: () => (countries = fetchCountries())
20 | 	};
21 | 
22 | 	let countries = fetchCountries();
23 | </script>
24 | 
25 | {#await countries}
26 | 	<slot name="loading" />
27 | {:then response}
28 | 	<slot countries={response} {actions} />
29 | {:catch error}
30 | 	<slot name="error" {error} />
31 | {/await}
32 | 
33 | <!-- 
34 |   @component
35 |   
36 | ### `<Countries />`
37 | 
38 | #### Arguments
39 | 
40 | - eu
41 | 
42 | #### Slots
43 | 
44 | - **loading**
45 | - **error**
46 | 
47 | #### Directives
48 | 
49 | **let:actions**
50 | | Name | Description |
51 | | --- | --- |
52 | | `reload()` | Reload. |
53 | 
54 | - **let:countries**
55 | 
56 | #### Example 
57 | 
58 | ```svelte
59 | <script>
60 |     import { Countries } from "metawrite"
61 | 
62 |     let eu = true; // if you want to list only EU countries
63 | </script>
64 | 
65 | <Countries let:actions let:countries>
66 |     <button on:click={actions.reload()}>Reload</button>
67 |     <p>There are {countries.total} countries in the world:</p>
68 |     {#each countries.countries as country}
69 |         <p>{country.name}, {country.code}</p>
70 |     {/each}
71 | </Countries>
72 | 
73 | <Countries {eu} let:actions let:countries>
74 |     <button on:click={actions.reload()}>Reload</button>
75 |     <p>There are {countries.total} countries in EU:</p>
76 |     {#each countries.countries as country}
77 |         <p>{country.name}, {country.code}</p>
78 |     {/each}
79 | </Countries>
80 | ```
81 |   
82 |  -->
83 | 


--------------------------------------------------------------------------------
/src/lib/Storage/Storage.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	/**
 3 | 	 * @slot {{
 4 | 	 * actions: {
 5 | 	 *  create: (bucketId: string, fileId: string, file: File, read?: string[], write?: string[]) => Promise<object>;
 6 | 	 * }}}
 7 | 	 * @slot {{ error: object }} error
 8 | 	 */
 9 | 	import { SDK as Appwrite } from '../_appwrite';
10 | 
11 | 	import { createEventDispatcher } from 'svelte';
12 | 	import { currentUser } from '../_stores';
13 | 
14 | 	const dispatch = createEventDispatcher();
15 | 
16 | 	const actions = {
17 | 		create: async (
18 | 			bucketId: string,
19 | 			fileId: string,
20 | 			file: File,
21 | 			read = [`user:${$currentUser.$id}`],
22 | 			write = [`user:${$currentUser.$id}`]
23 | 		) => {
24 | 			try {
25 | 				dispatch('upload');
26 | 				const response = await Appwrite.sdk.storage.createFile(bucketId, fileId, file, read, write);
27 | 				dispatch('success', response);
28 | 				return response;
29 | 			} catch (error) {
30 | 				dispatch('failure', error);
31 | 			}
32 | 		}
33 | 	};
34 | </script>
35 | 
36 | <slot {actions} />
37 | 
38 | <!-- 
39 |   @component
40 | 
41 | ### `<Storage />`
42 | 
43 | #### Directives
44 | 
45 | **let:actions**
46 | | Name | Description |
47 | | --- | --- |
48 | | `create(bucketId, fileId, file, read, write)` | Uploads a file. <br />`fileId` is required `@type - {string}`, `"unique()"` will generate random unique id, but you can use custom.<br />`file` is `@type - {File}` and required.<br />`read`/`write` is `@type - {string[]}` and *optional* |
49 | 
50 | #### Example
51 | 
52 | ```svelte
53 | <script lang="ts">
54 |     import { Storage } from "metawrite"
55 | 
56 |     // Required
57 | 	let bucketId = "default"
58 |     let file: File;
59 |     let fileId = "unique()"; // this will generate random unique id, but you can use custom
60 | 
61 |     // Optional
62 |     let read: string[];
63 |     let write: string[];
64 | </script>
65 | 
66 | <Storage {file} let:actions>
67 |     <button on:click={actions.create(bucketId, fileId, file, read, write)}>Upload File</button>
68 | </Storage>
69 | ```
70 |  -->
71 | 


--------------------------------------------------------------------------------
/src/routes/index.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { Appwrite, User, MagicURL, FileList, Collection } from '$lib';
 3 | 
 4 | 	const config = {
 5 | 		endpoint: 'http://localhost/v1',
 6 | 		project: 'metawrite'
 7 | 	};
 8 | 
 9 | 	const successCreate = (e) => {
10 | 		console.log(e)
11 | 	}
12 | 	const failureCreate = (e) => {
13 | 		console.log(e)
14 | 	}
15 | 	const successComplete = (e) => {
16 | 		console.log(e)
17 | 	}
18 | 	const failureComplete = (e) => {
19 | 		console.log(e)
20 | 	}
21 | 
22 | 	let email: string;
23 | 	let title = '';
24 | 	let description = '';
25 | </script>
26 | 
27 | <Appwrite {...config}>
28 | 	<h1>Welcome to Metawrite SvelteKit Demo</h1>
29 | 	<p>
30 | 		Visit <a href="https://github.com/koodeau/metawrite#readme">Github repository</a> to read the documentation
31 | 	</p>
32 | 
33 | 	<Collection collectionId="demo" let:actions let:documents>
34 | 		<h1>Create Note</h1>
35 | 		<input type="text" name="title" bind:value={title} placeholder="Title" />
36 | 		<textarea type="text" name="description" bind:value={description} placeholder="Desctiption" />
37 | 		<button on:click={() => actions.create("unique()", { title, description }, ["role:all"], ["role:all"])}>Create</button>
38 | 		{#if documents}
39 | 			<h1>Notes</h1>
40 | 			{#each documents as note}
41 | 				<h2>{note.title}</h2>
42 | 				<p>{note.description}</p>
43 | 			{/each}
44 | 		{/if}
45 | 	</Collection>
46 | 	<User let:user>
47 | 		<h1>User ID: {user.$id}</h1>
48 | 
49 | 		<h1>Using Metawrite with {`<MagicURL />`}</h1>
50 | 		<MagicURL let:actions on:successCreate on:successComplete on:failureCreate on:failureComplete>
51 | 			<input type="email" name="email" placeholder="Email" bind:value={email} />
52 | 			<button on:click={() => actions.create("someuserid", email, "http://localhost:3000/")}>Send login link</button>
53 | 			<button on:click={() => actions.complete()}>Confirm Login</button>
54 | 		</MagicURL>
55 | 	</User>
56 | 
57 | 	<FileList bucketId="default" let:files>
58 | 		{#each files as file}
59 | 			<p>{file.$id}</p>
60 | 		{/each}
61 | 	</FileList>
62 | </Appwrite>
63 | 


--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="svelte" />
 2 | export { default as Appwrite } from './Init.svelte';
 3 | 
 4 | export { default as Create } from './Account/Create.svelte';
 5 | export { default as CreateAnonymousSession } from './Account/CreateAnonymousSession.svelte';
 6 | export { default as CreateJWT } from './Account/CreateJWT.svelte';
 7 | export { default as MagicURL } from './Account/MagicURL.svelte';
 8 | export { default as Preferences } from './Account/Preferences.svelte';
 9 | export { default as RecoverPassword } from './Account/RecoverPassword.svelte';
10 | export { default as Update } from './Account/Update.svelte';
11 | export { default as User } from './Account/User.svelte';
12 | export { default as Verification } from './Account/Verification.svelte';
13 | 
14 | export { default as AuthEmail } from './Auth/Email.svelte';
15 | export { default as AuthOAuth2 } from './Auth/OAuth2.svelte';
16 | 
17 | export { default as Collection } from './Database/Collection.svelte';
18 | export { default as Document } from './Database/Document.svelte';
19 | 
20 | export { default as File } from './Storage/File.svelte';
21 | export { default as FileList } from './Storage/FileList.svelte';
22 | export { default as Storage } from './Storage/Storage.svelte';
23 | 
24 | export { default as Locale } from './Locale/Locale.svelte';
25 | export { default as Countries } from './Locale/Countries.svelte';
26 | export { default as Continents } from './Locale/Continents.svelte';
27 | export { default as Languages } from './Locale/Languages.svelte';
28 | export { default as Currencies } from './Locale/Currencies.svelte';
29 | export { default as PhoneCodes } from './Locale/PhoneCodes.svelte';
30 | 
31 | export { default as Flag } from './Avatars/Flag.svelte';
32 | export { default as Browser } from './Avatars/Browser.svelte';
33 | export { default as CreditCard } from './Avatars/CreditCard.svelte';
34 | export { default as Favicon } from './Avatars/Favicon.svelte';
35 | export { default as Image } from './Avatars/Image.svelte';
36 | export { default as QR } from './Avatars/QR.svelte';
37 | 
38 | export { default as Function } from './Functions/Function.svelte';
39 | 


--------------------------------------------------------------------------------
/src/lib/Storage/FileList.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	/**
 3 | 	 * @slot {{
 4 | 	 * files: any[];
 5 | 	 * actions: {
 6 | 	 *   reload: () => Promise<object>;
 7 | 	 * }}}
 8 | 	 * @slot {{ error: object }} error
 9 | 	 */
10 | 	import { SDK as Appwrite } from '../_appwrite';
11 | 
12 | 	export let bucketId: string;
13 | 	export let search = '';
14 | 	export let limit = 25; // 25
15 | 	export let offset = 0; // 0
16 | 	export let cursor = '';
17 | 	export let cursorDirection = '';
18 | 	export let orderType = "ASC"; // 'ASC' or 'DESC'
19 | 	const actions = {
20 | 		reload: () => (files = fetchFiles())
21 | 	};
22 | 	const fetchFiles = () => Appwrite.sdk.storage.listFiles(bucketId, search, limit, offset, cursor, cursorDirection, orderType);
23 | 
24 | 	let files = fetchFiles();
25 | </script>
26 | 
27 | {#await files}
28 | 	<slot name="loading" />
29 | {:then response}
30 | 	<slot files={response.files ?? []} {actions} />
31 | {:catch error}
32 | 	<slot name="error" {error} />
33 | {/await}
34 | 
35 | <!-- 
36 |   @component
37 | 
38 | ### `<FileList />`
39 | 
40 | #### Arguments
41 | 
42 | - bucketId - *required* `@type - {string}`
43 | - search - *optional* `@type - {string}`
44 | - limit - *optional* `@type - {number}`
45 | - offset - *optional* `@type - {number}`
46 | - cursor - *optional* `@type - {string}`
47 | - cursorDirection - *optional* `@type - {string}`
48 | - orderType - *optional* `@type - {string} ` => write  `"ASC"` or `"DESC"`
49 | 
50 | #### Slots
51 | 
52 | - **loading**
53 | - **error**
54 | 
55 | #### Directives
56 | 
57 | **let:actions**
58 | | Name | Description |
59 | | --- | --- |
60 | | `reload()` | Reload. |
61 | 
62 | - **let:files**
63 | - **let:error**
64 | 
65 | #### Example 
66 | 
67 | ```svelte
68 | <script>
69 |     import { FileList } from "metawrite"
70 | 
71 |     // Optional
72 |     let bucketId = 'default';
73 |     let search = '';
74 |     let limit = 10;
75 |     let offset = 0;
76 |     let orderType = 'ASC';
77 | </script>
78 | 
79 | <FileList {bucketId} {search} {limit} {offset} {orderType}let:actions let:files>
80 |     {#each files as file}
81 |         <p>File: {file.name}</p>
82 |     {/each}
83 |     <button on:click={actions.reload()}>Reload</button>
84 | </FileList>
85 | ```
86 |  -->
87 | 


--------------------------------------------------------------------------------
/src/lib/Auth/Email.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	/**
 3 | 	 * @slot {{
 4 | 	 * authorize: (email: string, password: string) => Promise<object>;
 5 | 	 * }}
 6 | 	 * @slot {{ error: object }} error
 7 | 	 */
 8 | 	import { createEventDispatcher } from 'svelte';
 9 | 	import { SDK as Appwrite } from '../_appwrite';
10 | 	import { currentUser } from '../_stores';
11 | 
12 | 	const dispatch = createEventDispatcher();
13 | 	const authorize = (/** @type {string} */ email, /** @type {string} */ password) => {
14 | 		request = async () => {
15 | 			try {
16 | 				const response = await Appwrite.sdk.account.createSession(email, password);
17 | 				dispatch('success', response);
18 | 				// Get user in the background, causing all <User> components to re-render once the user data is loaded.
19 | 				currentUser.reload();
20 | 				return response;
21 | 			} catch (error) {
22 | 				dispatch('failure', error);
23 | 				throw error;
24 | 			}
25 | 		};
26 | 	};
27 | 
28 | 	let request;
29 | </script>
30 | 
31 | <slot {authorize} />
32 | 
33 | {#if request}
34 | 	{#await request()}
35 | 		<slot name="loading" />
36 | 	{:then user}
37 | 		<slot name="success" {user} />
38 | 	{:catch error}
39 | 		<slot name="error" {error} />
40 | 	{/await}
41 | {/if}
42 | 
43 | <!-- 
44 |   @component
45 |   
46 | ### `<AuthEmail />`
47 | 
48 | #### Slots
49 | 
50 | - **loading**
51 | - **success**
52 | - **error**
53 | 
54 | #### Directives
55 | 
56 | - **let:authorize(email, password)**
57 | - **let:user** 
58 | - **let:error**
59 | 
60 | #### Events
61 | 
62 | - **on:success** On `authorize` success.
63 | - **on:failure** On `authorize` failure.
64 | 
65 | #### Example
66 | 
67 | ```svelte
68 | <script>
69 |     import { AuthEmail } from "metawrite";
70 |   
71 |     let email = "";
72 |     let password = "";
73 |   
74 |     const success = e => {
75 |       //success callback
76 |       // `e` contains the user object
77 |     };
78 |   
79 |     const failure = e => {
80 |       //failure callback
81 |     }
82 |   </script>
83 |   
84 |   <AuthEmail let:authorize on:success on:failure>
85 |     <input type="text" bind:value={email}>
86 |     <input type="text" bind:value={password}>
87 |     <button on:click={authorize(email,password)}>Login</button>
88 |   </AuthEmail>
89 | ```
90 |   
91 |  -->
92 | 


--------------------------------------------------------------------------------
/src/lib/Account/Preferences.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	/**
 3 | 	 * @slot {{
 4 | 	 * actions: {
 5 | 	 *  reload: () => Promise<void>;
 6 | 	 *  update: (prefs: object) => Promise<object>;
 7 | 	 * }
 8 | 	 * }}
 9 | 	 * @slot {{ error: object }} error
10 | 	 */
11 | 	import { createEventDispatcher } from 'svelte';
12 | 	import { active } from '../_stores';
13 | 	import { SDK as Appwrite } from '../_appwrite';
14 | 
15 | 	const dispatch = createEventDispatcher();
16 | 	const fetchPreferences = async () => {
17 | 		try {
18 | 			const response = await Appwrite.sdk.account.getPrefs();
19 | 			dispatch('success', response);
20 | 		} catch (error) {
21 | 			dispatch('failure', error);
22 | 			throw error;
23 | 		}
24 | 	};
25 | 
26 | 	const actions = {
27 | 		reload: () => (request = fetchPreferences()),
28 | 		update: async (/** @type {object} */ prefs) => {
29 | 			try {
30 | 				const response = await Appwrite.sdk.account.updatePrefs(prefs);
31 | 				dispatch('successUpdate', response);
32 | 				return response;
33 | 			} catch (error) {
34 | 				dispatch('failureUpdate', error);
35 | 				throw error;
36 | 			}
37 | 		}
38 | 	};
39 | 
40 | 	let request = fetchPreferences();
41 | </script>
42 | 
43 | {#if $active}
44 | 	{#await request}
45 | 		<slot name="loading" />
46 | 	{:then prefs}
47 | 		<slot {prefs} {actions} />
48 | 	{:catch error}
49 | 		<slot name="error" {error} />
50 | 	{/await}
51 | {/if}
52 | 
53 | <!-- 
54 | 	@component
55 | 
56 | ### `<Preferences />`
57 | 
58 | #### Slots
59 | 
60 | - **loading**
61 | - **error**
62 | 
63 | #### Directives
64 | 
65 | **let:actions**
66 | | Name | Description |
67 | | --- | --- |
68 | | `reload()` | Reloads preferences. |
69 | | `update(prefs)` | Update preferences. `prefs` - `@type - {object}` |
70 | 
71 | #### Events
72 | 
73 | - **on:success** On init and `reload` success.
74 | - **on:failure** On init and `reload` failure.
75 | - **on:successUpdate** On `update` success.
76 | - **on:failureUpdate** On `update` failure.
77 | 
78 | #### Example 
79 | 
80 | ```svelte
81 | <script>
82 | 	import { Preferences } from 'metawrite';
83 | 
84 | 	let prefs = {
85 | 		// You can pass only the specific settings you wish to update.
86 | 	};
87 | </script>
88 | 
89 | <Preferences let:actions>
90 | 	<button
91 | 		on:click={() => {
92 | 			actions.update(prefs);
93 | 			actions.reload();
94 | 		}}>Update Preferences</button>
95 | </Preferences>
96 | ```
97 | 
98 |  -->
99 | 


--------------------------------------------------------------------------------
/src/lib/Account/Create.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	/**
  3 | 	 * @slot {{
  4 | 	 * actions: {
  5 | 	 *  create: (userId?: string, email: string, password: string, name?: string) => Promise<object>;
  6 | 	 * }
  7 | 	 * }}
  8 | 	 */
  9 | 	import { createEventDispatcher } from 'svelte';
 10 | 	import { active } from '../_stores';
 11 | 	import { SDK as Appwrite } from '../_appwrite';
 12 | 
 13 | 	const dispatch = createEventDispatcher();
 14 | 	const actions = {
 15 | 		create: async (
 16 | 			/** @type {string} */ userId,
 17 | 			/** @type {string} */ email,
 18 | 			/** @type {string} */ password,
 19 | 			name = ''
 20 | 		) => {
 21 | 			try {
 22 | 				const response = await Appwrite.sdk.account.create(userId, email, password, name);
 23 | 				dispatch('success', response);
 24 | 				return response;
 25 | 			} catch (error) {
 26 | 				dispatch('failure', error);
 27 | 			}
 28 | 		}
 29 | 	};
 30 | </script>
 31 | 
 32 | <!--
 33 | @component
 34 | 
 35 | ## Create user
 36 | 
 37 | Registers a new account.
 38 | 
 39 | ```svelte
 40 | <script>
 41 |   import { Create } from "metawrite";
 42 | 
 43 |   let email = "";
 44 |   let password = "";
 45 |   let name = "";
 46 | 
 47 |   const success = e => {
 48 |     //success callback
 49 |     // `e` contains the user object
 50 |   };
 51 | 
 52 |   const failure = e => {
 53 |     //failure callback
 54 |   }
 55 | </script>
 56 | 
 57 | <Create let:actions on:success on:failure>
 58 |   <input type="text" bind:value={email}>
 59 |   <input type="password" bind:value={password}>
 60 |   <input type="text" bind:value={name}>
 61 |   <button on:click={actions.create(email,password, name)}>Register</button>
 62 | </Create>
 63 | ```
 64 | 
 65 | ### Directives
 66 | 
 67 | **let:actions** `object`
 68 | 
 69 | Object with function.
 70 | 
 71 | #### Arguments
 72 | | Name | Description |
 73 | | --- | --- |
 74 | | `create(email, password, name)` | Registers a new user.  `@type - {string}` |
 75 | 
 76 | ### Events
 77 | 
 78 | **on:success**
 79 | 
 80 | Triggers on successful register.
 81 | 
 82 | #### Arguments
 83 | | Name | Description |
 84 | | --- | --- |
 85 | | `response` | Response |
 86 | 
 87 | **on:failure**
 88 | 
 89 | Triggers on failed register.
 90 | 
 91 | #### Arguments
 92 | | Name | Description |
 93 | | --- | --- |
 94 | | `response` | Response |
 95 | 
 96 | -->
 97 | 
 98 | {#if $active}
 99 | 	<slot {actions} />
100 | {/if}
101 | 


--------------------------------------------------------------------------------
/src/lib/Account/Verification.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	/**
 3 | 	 * @slot {{
 4 | 	 * actions: {
 5 | 	 *  create: (url: string) => Promise<any>;
 6 | 	 *  update: () => Promise<any>;
 7 | 	 * }
 8 | 	 * }}
 9 | 	 */
10 | 	import { createEventDispatcher } from 'svelte';
11 | 	import { active } from '../_stores';
12 | 	import { SDK as Appwrite } from '../_appwrite';
13 | 
14 | 	const href = window.location.href;
15 | 	const url = new URL(href);
16 | 	const search = url.searchParams;
17 | 	const userId = search.get('userId');
18 | 	const secret = search.get('secret');
19 | 
20 | 	const dispatch = createEventDispatcher();
21 | 	const actions = {
22 | 		create: async (/** @type {string} */ url) => {
23 | 			try {
24 | 				const response = await Appwrite.sdk.account.createVerification(url);
25 | 				dispatch('success', response);
26 | 				return response;
27 | 			} catch (error) {
28 | 				dispatch('failure', error);
29 | 			}
30 | 		},
31 | 		update: async () => {
32 | 			try {
33 | 				const response = await Appwrite.sdk.account.updateVerification(userId, secret);
34 | 				dispatch('success', response);
35 | 				return response;
36 | 			} catch (error) {
37 | 				dispatch('failure', error);
38 | 			}
39 | 		}
40 | 	};
41 | </script>
42 | 
43 | {#if $active}
44 | 	<slot {actions} />
45 | {/if}
46 | 
47 | <!-- 
48 |   @component
49 |   Creates and automatically validates user email verification.
50 |   
51 |   - `url` of type string for action `create` should be where your app is hosted or `localhost`.
52 |   - For `update` action you don't need to pass anything, the process is automated.
53 | 
54 | ### `<Verification />`
55 | 
56 | #### Directives
57 | 
58 | **let:actions**
59 | | Name | Description |
60 | | --- | --- |
61 | | `create(url)` | Create Verification. `url` is what URL used to create verification link sent to your email inbox. `@type - {string}` |
62 | | `update(user, secret)` | Complete Verification. `user` and `secret` are set automatically by `metawrite`. |
63 | 
64 | #### Events
65 | 
66 | - **on:successCreate** On `create` success.
67 | - **on:failureCreate** On `create` failure.
68 | - **on:successComplete** On `complete` success.
69 | - **on:failureComplete** On `complete` failure.
70 | 
71 | #### Example
72 | 
73 | ```svelte
74 | <script>
75 |     import { Verification } from "metawrite"
76 | 
77 |     const url = window.location.href;
78 | </script>
79 | 
80 | <Verification let:actions>
81 |     <button on:click={actions.create(url)}></button>
82 |     <button on:click={actions.update()}>Update email verification status</button>
83 | </Verification>
84 | ```
85 |   -->
86 | 


--------------------------------------------------------------------------------
/src/lib/Database/Document.svelte.d.ts:
--------------------------------------------------------------------------------
 1 | import { SvelteComponentTyped } from "svelte";
 2 | declare const __propDef: {
 3 |     props: {
 4 |         /**
 5 |              * @name Document ID
 6 |              * @type {string}
 7 |              */ documentId: string;
 8 |         /**
 9 |              * @name Collection ID
10 |              * @type {string}
11 |              */ collectionId: string;
12 |         /**
13 |              * @description Enables document caching. Call `actions.reload()` to get fresh document(s)
14 |              * @type {boolean}
15 |              */ cache?: boolean;
16 |     };
17 |     events: {
18 |         change: CustomEvent<any>;
19 |     } & {
20 |         [evt: string]: CustomEvent<any>;
21 |     };
22 |     slots: {
23 |         loading: {};
24 |         default: {
25 |             document: any;
26 |             actions: {
27 |                 reload: () => void;
28 |                 update: (data: object) => Promise<import("appwrite").Models.Document>;
29 |                 remove: () => Promise<{}>;
30 |             };
31 |         };
32 |         error: {
33 |             error: any;
34 |         };
35 |     };
36 | };
37 | export declare type DocumentProps = typeof __propDef.props;
38 | export declare type DocumentEvents = typeof __propDef.events;
39 | export declare type DocumentSlots = typeof __propDef.slots;
40 | /**
41 |  * ### `<Document />`
42 |  *
43 |  * #### Arguments
44 |  *
45 |  * - documentId - *required* `@type - {string}`
46 |  * - collectionId - *required* `@type - {string}`
47 |  *
48 |  * #### Slots
49 |  *
50 |  * - **loading**
51 |  * - **error**
52 |  *
53 |  * #### Directives
54 |  *
55 |  * **let:actions**
56 |  * | Name | Description |
57 |  * | --- | --- |
58 |  * | `reload()` | Reload. |
59 |  * | `update(data)` | Updates a Document. `data` - `@type - {object}` |
60 |  * | `remove()` | Removes a Document. |
61 |  *
62 |  * - **let:document**
63 |  * - **let:error**
64 |  *
65 |  * #### Example
66 |  *
67 |  * ```svelte
68 |  * <script>
69 |  * import { Collection, Document } from 'metawrite';
70 |  *
71 |  * const collectionId = '5f56a3035a01f';
72 |  * </script>
73 |  *
74 |  * <Collection {collectionId} let:documents>
75 |  * You have {documents.length} documents:
76 |  * {#each documents as document}
77 |  * 	<Document {collectionId} documentId={document.$id} let:document let:actions>
78 |  * 		Title: {document.title}
79 |  * 		Text: {document.text}
80 |  * 		<button on:click={() => {actions.remove()}}>Delete</button>
81 |  * 	</Document>
82 |  * {/each}
83 |  * </Collection>
84 |  * ```
85 |  */
86 | export default class Document extends SvelteComponentTyped<DocumentProps, DocumentEvents, DocumentSlots> {
87 | }
88 | export {};
89 | 


--------------------------------------------------------------------------------
/src/lib/Account/CreateAnonymousSession.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	/**
  3 | 	 * @slot {{
  4 | 	 * actions: {
  5 | 	 *  create: () => Promise<any>;
  6 | 	 * }
  7 | 	 * }}
  8 | 	 */
  9 | 	import { createEventDispatcher } from 'svelte';
 10 | 	import { active } from '../_stores';
 11 | 	import { SDK as Appwrite } from '../_appwrite';
 12 | 
 13 | 	const dispatch = createEventDispatcher();
 14 | 	const actions = {
 15 | 		create: async () => {
 16 | 			try {
 17 | 				const response = await Appwrite.sdk.account.createAnonymousSession();
 18 | 				dispatch('success', response);
 19 | 				return response;
 20 | 			} catch (error) {
 21 | 				dispatch('failure', error);
 22 | 			}
 23 | 		}
 24 | 	};
 25 | </script>
 26 | 
 27 | <!--
 28 | @component
 29 | 
 30 | ### `<CreateAnonymousSession />`
 31 | 
 32 | #### Directives
 33 | 
 34 | **let:actions**
 35 | 
 36 | | Name                        | Description                                                  |
 37 | | --------------------------- | ------------------------------------------------------------ |
 38 | | `create()` | Creates anonymous session. |
 39 | 
 40 | #### Example
 41 | 
 42 | ```svelte
 43 | <script>
 44 |     import { CreateAnonymousSession } from "metawrite";
 45 | </script>
 46 | 
 47 | <CreateAnonymousSession let:actions>
 48 |     <button on:click={actions.create}>Create Anonymous Session</button>
 49 | </CreateAnonymousSession>
 50 | ```
 51 | 
 52 | ### `<CreateJWT />`
 53 | 
 54 | #### Directives
 55 | 
 56 | **let:actions**
 57 | 
 58 | | Name                        | Description                                                  |
 59 | | --------------------------- | ------------------------------------------------------------ |
 60 | | `create()` | Creates JWT token. |
 61 | 
 62 | #### Example
 63 | 
 64 | ```svelte
 65 | <script>
 66 |     import { CreateJWT } from "metawrite";
 67 | </script>
 68 | 
 69 | <CreateJWT let:actions>
 70 |     <button on:click={actions.create}>Create JWT token</button>
 71 | </CreateJWT>
 72 | ```
 73 | 
 74 | ### `<MagicURL />`
 75 | 
 76 | #### Directives
 77 | 
 78 | **let:actions**
 79 | 
 80 | | Name                        | Description                                                  |
 81 | | --------------------------- | ------------------------------------------------------------ |
 82 | | `create()` | Creates Magic URL Session. |
 83 | 
 84 | #### Example 
 85 | 
 86 | ```svelte
 87 | <script>
 88 |     import { MagicURL } from "metawrite";
 89 | 
 90 |     const userId = "32h2hj24h2"
 91 |     const email = "user@example.com"
 92 |     const url = "http://example.com" // optional
 93 | </script>
 94 | 
 95 | <MagicURL let:actions>
 96 |     <button on:click={actions.create(userId, email, url)}>Create MagicURL</button>
 97 | </MagicURL>
 98 | ```
 99 | 
100 | -->
101 | 
102 | {#if $active}
103 | 	<slot {actions} />
104 | {/if}
105 | 


--------------------------------------------------------------------------------
/src/lib/Account/Update.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	/**
 3 | 	 * @slot {{
 4 | 	 * actions: {
 5 | 	 *  name: (name: string) => Promise<object>;
 6 | 	 *  email: (email: string, password: string) => Promise<object>;
 7 | 	 *  password: (password: string, oldPassword: string) => Promise<object>;
 8 | 	 * }
 9 | 	 * }}
10 | 	 */
11 | 	import { createEventDispatcher } from 'svelte';
12 | 	import { active } from '../_stores';
13 | 	import { SDK as Appwrite } from '../_appwrite';
14 | 
15 | 	const dispatch = createEventDispatcher();
16 | 	const actions = {
17 | 		name: async (name: string) => {
18 | 			try {
19 | 				const response = await Appwrite.sdk.account.updateName(name);
20 | 				dispatch('successName', response);
21 | 				return response;
22 | 			} catch (error) {
23 | 				dispatch('failureName', error);
24 | 				throw error;
25 | 			}
26 | 		},
27 | 		email: async (email: string, password: string) => {
28 | 			try {
29 | 				const response = await Appwrite.sdk.account.updateEmail(email, password);
30 | 				dispatch('successEmail', response);
31 | 				return response;
32 | 			} catch (error) {
33 | 				dispatch('failureEmail', error);
34 | 				throw error;
35 | 			}
36 | 		},
37 | 		password: async (password: string, oldPassword: string) => {
38 | 			try {
39 | 				const response = await Appwrite.sdk.account.updatePassword(password, oldPassword);
40 | 				dispatch('successPassword', response);
41 | 				return response;
42 | 			} catch (error) {
43 | 				dispatch('failurePassword', error);
44 | 				throw error;
45 | 			}
46 | 		}
47 | 	};
48 | </script>
49 | 
50 | {#if $active}
51 | 	<slot {actions} />
52 | {/if}
53 | 
54 | <!-- 
55 | 	@component
56 | 	
57 | ### `<Update />`
58 | 
59 | #### Directives
60 | 
61 | **let:actions**
62 | | Name | Description |
63 | | --- | --- |
64 | | `name(name)` | Update name. All fields are required. `@type - {string}` |
65 | | `email(email, password)` | Update email. All fields are required. `@type - {string}` |
66 | | `password(password, oldPassword)` | Update password. All fields are required. `@type - {string}` |
67 | 
68 | #### Events
69 | 
70 | - **on:successName** On `name` success.
71 | - **on:failureName** On `name` failure.
72 | - **on:successEmail** On `email` success.
73 | - **on:failureEmail** On `email` failure.
74 | - **on:successPassword** On `password` success.
75 | - **on:failurePassword** On `password` failure.
76 | 
77 | #### Example 
78 | 
79 | ```svelte
80 | <script>
81 |     import { Update } from "metawrite"
82 | 
83 |     let name, email, password, newPassword, oldPassword = ""
84 | </script>
85 | 
86 | <Update let:actions>
87 |     <button on:click={actions.name(name)}>This updates name</button>
88 |     <button on:click={actions.email(email, password)}>This updates email</button>
89 |     <button on:click={actions.password(newPassword, oldPassword)}>This updates password</button>
90 | </Update>
91 | ```
92 | 	
93 |  -->
94 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "metawrite",
 3 |   "license": "Apache-2.0",
 4 |   "version": "0.8.1",
 5 |   "description": "Appwrite SDK with ready to go components for Svelte / SvelteKit",
 6 |   "keywords": [
 7 |     "svelte",
 8 |     "sveltekit",
 9 |     "appwrite",
10 |     "sdk",
11 |     "components",
12 |     "library"
13 |   ],
14 |   "repository": "github:koodeau/metawrite",
15 |   "homepage": "https://increas.io/metawrite",
16 |   "bugs": {
17 |     "url": "https://github.com/koodeau/metawrite/issues",
18 |     "email": "koodeau@null.net"
19 |   },
20 |   "author": {
21 |     "name": "Nick Revenko",
22 |     "email": "koodeau@null.net",
23 |     "url": "https://koodeau.me/"
24 |   },
25 |   "logo": {
26 |     "file": "./static/logo.svg"
27 |   },
28 |   "engines": {
29 |     "node": ">=14"
30 |   },
31 |   "publishConfig": {
32 |     "registry": "https://registry.npmjs.org/"
33 |   },
34 |   "scripts": {
35 |     "dev": "svelte-kit dev",
36 |     "build": "svelte-kit build",
37 |     "package": "svelte-kit package",
38 |     "preview": "svelte-kit preview",
39 |     "check": "svelte-check --tsconfig ./tsconfig.json",
40 |     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
41 |     "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
42 |     "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
43 |     "prettier": "prettier --write --plugin-search-dir= ./src/lib/**/*.{js,svelte,ts} && prettier --write --plugin-search-dir= ./src/lib/*.{js,ts,svelte}",
44 |     "svelte-check": "svelte-check",
45 |     "version": "auto-changelog -p --hide-credit --template changelog.hbs && git add CHANGELOG.md",
46 |     "test": "svelte-check --workspace src/lib",
47 |     "typings": "sveld --json --markdown",
48 |     "release:beta": "npm run package && cd package && npm publish --tag beta",
49 |     "release": "npm run package && cd package && npm publish"
50 |   },
51 |   "devDependencies": {
52 |     "@sveltejs/adapter-auto": "next",
53 |     "@sveltejs/adapter-node": "^1.0.0-next.78",
54 |     "@sveltejs/kit": "next",
55 |     "@typescript-eslint/eslint-plugin": "^5.27.1",
56 |     "@typescript-eslint/parser": "^5.27.1",
57 |     "auto-changelog": "^2.4.0",
58 |     "eslint": "^8.17.0",
59 |     "eslint-config-prettier": "^8.5.0",
60 |     "eslint-plugin-svelte3": "^4.0.0",
61 |     "prettier": "^2.6.2",
62 |     "prettier-plugin-svelte": "^2.7.0",
63 |     "svelte": "^3.48.0",
64 |     "svelte-check": "^2.7.2",
65 |     "svelte-preprocess": "^4.10.7",
66 |     "svelte2tsx": "^0.5.10",
67 |     "tslib": "^2.4.0",
68 |     "typescript": "^4.7.3"
69 |   },
70 |   "files": [
71 |     "**/*.svelte",
72 |     "**/*.js",
73 |     "**/*.d.ts",
74 |     "*.svelte",
75 |     "*.js",
76 |     "*.d.ts"
77 |   ],
78 |   "type": "module",
79 |   "main": "./index.js",
80 |   "types": "./index.d.ts",
81 |   "dependencies": {
82 |     "appwrite": "^8.0.1"
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug.yaml:
--------------------------------------------------------------------------------
 1 | name: "🐛 Bug Report"
 2 | description: "Submit a bug report to help us improve"
 3 | title: "🐛 Bug Report: "
 4 | labels: [bug]
 5 | body:
 6 |   - type: markdown
 7 |     attributes:
 8 |       value: |
 9 |         Thanks for taking the time to fill out our bug report form 🙏
10 |   - type: textarea
11 |     id: steps-to-reproduce
12 |     validations:
13 |       required: true
14 |     attributes:
15 |       label: "👟 Reproduction steps"
16 |       description: "How do you trigger this bug? Please walk us through it step by step."
17 |       placeholder: "When I ..."
18 |   - type: textarea
19 |     id: expected-behavior
20 |     validations:
21 |       required: true
22 |     attributes:
23 |       label: "👍 Expected behavior"
24 |       description: "What did you think would happen?"
25 |       placeholder: "It should ..."
26 |   - type: textarea
27 |     id: actual-behavior
28 |     validations:
29 |       required: true
30 |     attributes:
31 |       label: "👎 Actual Behavior"
32 |       description: "What did actually happen? Add screenshots, if applicable."
33 |       placeholder: "It actually ..."
34 |   - type: dropdown
35 |     id: appwrite-version
36 |     attributes:
37 |       label: "🎲 Appwrite version"
38 |       description: "What version of Appwrite are you running?"
39 |       options:
40 |         - Version 0.12.x
41 |         - Version 0.11.x
42 |         - Version 0.10.x
43 |         - Version 0.9.x
44 |         - Version 0.8.x
45 |         - Version 0.7.x
46 |         - Version 0.6.x
47 |         - Different version (specify in environment)
48 |     validations:
49 |       required: true
50 |   - type: dropdown
51 |     id: operating-system
52 |     attributes:
53 |       label: "💻 Operating system"
54 |       description: "What OS is your server / device running on?"
55 |       options:
56 |         - Linux
57 |         - MacOS
58 |         - Windows
59 |         - Something else
60 |     validations:
61 |       required: true
62 |   - type: textarea
63 |     id: enviromnemt
64 |     validations:
65 |       required: false
66 |     attributes:
67 |       label: "🧱 Your Environment"
68 |       description: "Is your environment customized in any way?"
69 |       placeholder: "I use Cloudflare for ..."
70 |   - type: checkboxes
71 |     id: no-duplicate-issues
72 |     attributes:
73 |       label: "👀 Have you spent some time to check if this issue has been raised before?"
74 |       description: "Have you Googled for a similar issue or checked our older issues for a similar bug?"
75 |       options:
76 |         - label: "I checked and didn't find similar issue"
77 |           required: true
78 |   - type: checkboxes
79 |     id: read-code-of-conduct
80 |     attributes:
81 |       label: "🏢 Have you read the Code of Conduct?"
82 |       options:
83 |         - label: "I have read the [Code of Conduct](https://github.com/koodeau/metawrite/blob/main/CODE_OF_CONDUCT.md)"
84 |           required: true
85 | 


--------------------------------------------------------------------------------
/src/lib/Storage/File.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import { SDK as Appwrite } from '../_appwrite';
  3 | 
  4 | 	export let bucketId: string;
  5 | 	export let fileId: string;
  6 | 
  7 | 	const actions = {
  8 | 		download: () => Appwrite.sdk.storage.getFileDownload(bucketId, fileId),
  9 | 		view: () => Appwrite.sdk.storage.getFileView(bucketId, fileId),
 10 | 		preview: (
 11 | 			width?: number,
 12 | 			height?: number,
 13 | 			gravity?: string,
 14 | 			quality?: number,
 15 | 			borderWidth?: number,
 16 | 			borderColor?: string,
 17 | 			borderRadius?: number,
 18 | 			opacity?: number,
 19 | 			rotation?: number,
 20 | 			background?: string,
 21 | 			output?: string
 22 | 		) =>
 23 | 			Appwrite.sdk.storage.getFilePreview(
 24 | 				bucketId,
 25 | 				fileId,
 26 | 				width,
 27 | 				height,
 28 | 				gravity,
 29 | 				quality,
 30 | 				borderWidth,
 31 | 				borderColor,
 32 | 				borderRadius,
 33 | 				opacity,
 34 | 				rotation,
 35 | 				background,
 36 | 				output
 37 | 			),
 38 | 		update: async (read?: string[], write?: string[]) =>
 39 | 			await Appwrite.sdk.storage.updateFile(bucketId, fileId, read, write),
 40 | 		delete: async () => await Appwrite.sdk.storage.deleteFile(bucketId, fileId)
 41 | 	};
 42 | </script>
 43 | 
 44 | <slot {actions} />
 45 | 
 46 | <!-- 
 47 | 	@component
 48 | 	
 49 | ### `<File />`
 50 | 
 51 | #### Arguments
 52 | 
 53 | - bucketId - it is your Bucket ID `@type - {string}`
 54 | - fileId - it is File ID `@type - {string}`
 55 | 
 56 | #### Directives
 57 | 
 58 | **let:actions**
 59 | | Name | Description |
 60 | | --- | --- |
 61 | | `download()` | Downloads file. |
 62 | | `view()` | Get file for View. |
 63 | | `preview(width, height, quality, background, output)` | Get file for preview. |
 64 | | `update(read, write)` | Updates a file. |
 65 | | `delete()` | Deletes a file. |
 66 | 
 67 | #### Example 
 68 | 
 69 | ```svelte
 70 | <script lang="ts">
 71 | 	import { File } from 'metawrite';
 72 | 
 73 | 	// Required
 74 | 	let bucketId: string;
 75 | 	let fileId: string;
 76 | 
 77 | 	// OPTIONAL
 78 | 	/** @type {number} */ let width;
 79 | 	/** @type {number} */ let height;
 80 | 	/** @type {string} */ let gravity;
 81 | 	/** @type {number} */ let quality;
 82 | 	/** @type {number} */ let borderWidth;
 83 | 	/** @type {string} */ let borderColor;
 84 | 	/** @type {number} */ let borderRadius;
 85 | 	/** @type {number} */ let opacity;
 86 | 	/** @type {number} */ let rotation;
 87 | 	/** @type {string} */ let background;
 88 | 	/** @type {string} */ let output;
 89 | 	/** @type {string[]} */ let read;
 90 | 	/** @type {string[]} */ let write;
 91 | </script>
 92 | 
 93 | <File {bucketId} {fileId} let:actions>
 94 | 	<button on:click={actions.download()}>Download File</button>
 95 | 	<button on:click={actions.view()}>File View</button>
 96 | 	<button on:click={actions.preview()}>Preview File</button>
 97 | 	<button on:click={actions.update(read, write)}>Update File</button>
 98 | 	<button on:click={actions.delete()}>Delete File</button>
 99 | </File>
100 | ```
101 | 	
102 |  -->
103 | 


--------------------------------------------------------------------------------
/src/lib/Functions/Function.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	/**
 3 | 	 * @slot {{
 4 | 	 * executions: any;
 5 | 	 * actions: {
 6 | 	 *  reload: () => Promise<object>;
 7 | 	 *  create: () => Promise<object>;
 8 | 	 *  get: (executionId: string, functionId: string) => Promise<object>;
 9 | 	 * }}}
10 | 	 * @slot {{ error: object }} error
11 | 	 */
12 | 	import { SDK as Appwrite } from '../_appwrite';
13 | 
14 | 	export let functionId: string;
15 | 	export let limit = 25;
16 | 	export let offset = 0;
17 | 	export let cursor = '';
18 | 	export let cursorDirection = '';
19 | 
20 | 	const fetchExecutions = () =>
21 | 		Appwrite.sdk.functions.listExecutions(functionId, limit, offset, cursor, cursorDirection);
22 | 
23 | 	const actions = {
24 | 		// @ts-ignore
25 | 		reload: () => (documents = fetchExecutions()),
26 | 		create: async (functionId: string, data?: string) => {
27 | 			const response = await Appwrite.sdk.functions.createExecution(functionId, data);
28 | 			actions.reload();
29 | 			return response;
30 | 		},
31 | 		get: async (functionId: string, executionId: string) => {
32 | 			return await Appwrite.sdk.functions.getExecution(functionId, executionId);
33 | 		}
34 | 	};
35 | 
36 | 	let executions = fetchExecutions();
37 | </script>
38 | 
39 | {#await executions}
40 | 	<slot name="loading" />
41 | {:then current}
42 | 	<slot executions={current.executions} {actions} />
43 | {:catch error}
44 | 	<slot name="error" {error} />
45 | {/await}
46 | 
47 | <!-- 
48 |   @component
49 |   
50 | ## Functions
51 | 
52 | The Functions service allows you to create custom behaviour that can be triggered by any supported Appwrite system events or by a predefined schedule.
53 | 
54 | 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.
55 | 
56 | You can learn more by following Appwrite's [Cloud Functions tutorial](https://_appwrite.io/docs/functions).
57 | 
58 | ### `<Function />`
59 | 
60 | #### Directives
61 | 
62 | **let:actions**
63 | | Name | Description |
64 | | --- | --- |
65 | | `reload()` | Reload. |
66 | | `create(functionId, data)` | Creates Execution. `functionId` is *required*, `data` could be empty string because *optional*. `@type {string}`|
67 | | `create(functionId, executionId)` | Get Execution. Both parameters are required. `@type {string}` |
68 | 
69 | - **let:executions**
70 | 
71 | #### Slots
72 | 
73 | - **error**
74 | 
75 | #### Example 
76 | 
77 | ```svelte
78 | <script>
79 | 	import { Function } from 'metawrite';
80 | 	let functionId = 'someExecution'; // required
81 | 	let newFunctionId = '';
82 | 	let data = 'String of custom data to send to function.'; // could be empty string because optional
83 | </script>
84 | 
85 | <Function {functionId} {data} let:actions let:executions>
86 | 	{#each executions as execution}
87 | 		<p>
88 | 			Execution ID: {execution.$id}, Function ID: {execution.functionId}, Date Created: {execution.dateCreated}
89 | 		</p>
90 | 	{/each}
91 | 	<input type="text" name="functionId" placeholder="Function ID" bind:value={newFunctionId} />
92 | 	<button on:click={actions.create(newFunctionId, data)}>Create Execution</button>
93 | </Function>
94 | ```
95 |   
96 |  -->
97 | 


--------------------------------------------------------------------------------
/src/lib/Account/MagicURL.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	/**
  3 | 	 * @slot {{
  4 | 	 * actions: {
  5 | 	 *  create: (userId: string, email: string, url?: string) => Promise<any>;
  6 | 	 * }
  7 | 	 * }}
  8 | 	 */
  9 | 	import { createEventDispatcher } from 'svelte';
 10 | 	import { active } from '../_stores';
 11 | 	import { SDK as Appwrite } from '../_appwrite';
 12 | 	import { currentUser } from '../_stores';
 13 | 
 14 | 	const href = window.location.href;
 15 | 	const url = new URL(href);
 16 | 	const search = url.searchParams;
 17 | 	const userId = search.get('userId');
 18 | 	const secret = search.get('secret');
 19 | 
 20 | 	const dispatch = createEventDispatcher();
 21 | 	const actions = {
 22 | 		create: async (
 23 | 			/** @type {string} */ sessionId = 'unique()',
 24 | 			/** @type {string} */ email,
 25 | 			/** @type {string} */ url
 26 | 		) => {
 27 | 			try {
 28 | 				const response = await Appwrite.sdk.account.createMagicURLSession(sessionId, email, url);
 29 | 				dispatch('successCreate', response);
 30 | 				currentUser.reload();
 31 | 				return response;
 32 | 			} catch (error) {
 33 | 				dispatch('failureCreate', error);
 34 | 			}
 35 | 		},
 36 | 		complete: async () => {
 37 | 			try {
 38 | 				const response = await Appwrite.sdk.account.updateMagicURLSession(
 39 | 					/** @type {string} */ userId,
 40 | 					/** @type {string} */ secret
 41 | 				);
 42 | 				currentUser.reload();
 43 | 				dispatch('successComplete', response);
 44 | 			} catch (error) {
 45 | 				dispatch('failureComplete', error);
 46 | 			}
 47 | 		}
 48 | 	};
 49 | 
 50 | 	let complete;
 51 | </script>
 52 | 
 53 | <!--
 54 | @component
 55 | 
 56 | Creates Magic URL Session.
 57 | 
 58 | ### `<MagicURL />`
 59 | 
 60 | #### Directives
 61 | 
 62 | **let:actions**
 63 | 
 64 | | Name                        | Description                                                  |
 65 | | --------------------------- | ------------------------------------------------------------ |
 66 | | `create(sessionId, email, url)` | Creates Magic URL Session. email is required, url is to point on complete step `string`, `sessionId` is not required |
 67 | | `complete()` | Validates and completes Magic URL Session. |
 68 | 
 69 | #### Example 
 70 | 
 71 | ```svelte
 72 | <script>
 73 |     import { MagicURL } from "metawrite";
 74 | 
 75 |     let email = ""
 76 |     const url = "http://localhost:3000/page-to-complete"
 77 | 
 78 | 	const successCreate = (e) => {
 79 | 		console.log(e)
 80 | 	}
 81 | 	const failureCreate = (e) => {
 82 | 		console.log(e)
 83 | 	}
 84 | 	const successComplete = (e) => {
 85 | 		console.log(e)
 86 | 	}
 87 | 	const failureComplete = (e) => {
 88 | 		console.log(e)
 89 | 	}
 90 | </script>
 91 | 
 92 | <MagicURL let:actions on:successCreate on:successComplete on:failureCreate on:failureComplete>
 93 | 		<input type="email" name="email" placeholder="Email" bind:value={email} />
 94 | 		<button on:click={actions.create(email, url)}>Send login link</button>
 95 | 		<button on:click={actions.complete()}>Confirm Login</button>
 96 | </MagicURL>
 97 | ```
 98 | 
 99 | -->
100 | 
101 | {#if $active}
102 | 	<slot {actions} />
103 | 	{#if complete}
104 | 		{#await complete()}
105 | 			<slot name="loading" />
106 | 		{:then user}
107 | 			<slot name="success" {user} />
108 | 		{:catch error}
109 | 			<slot name="error" {error} />
110 | 		{/await}
111 | 	{/if}
112 | {/if}
113 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as
 6 | contributors and maintainers pledge to make participation in our project and
 7 | our community a harassment-free experience for everyone, regardless of age, body
 8 | size, disability, ethnicity, sex characteristics, gender identity, expression,
 9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 | 
12 | ## Our Standards
13 | 
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 | 
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 | 
23 | Examples of unacceptable behavior by participants include:
24 | 
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 |  advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 |  address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 |  professional setting
33 | 
34 | ## Our Responsibilities
35 | 
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 | 
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 | 
46 | ## Scope
47 | 
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 | 
55 | ## Enforcement
56 | 
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at hello@increas.io. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 | 
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 | 
68 | ## Attribution
69 | 
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 | 
73 | [homepage]: https://www.contributor-covenant.org
74 | 
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
77 | 


--------------------------------------------------------------------------------
/src/lib/Database/Document.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	/**
  3 | 	 * @slot {{
  4 | 	 * document: any;
  5 | 	 * actions: {
  6 | 	 *  reload: () => Promise<object>;
  7 | 	 *  update: (data: any) => Promise<object>;
  8 | 	 *  remove: () => Promise<object>;
  9 | 	 * }
 10 | 	 * }}
 11 | 	 */
 12 | 	import { getContext } from 'svelte';
 13 | 	import { cacheKey } from '../_keys';
 14 | 	import { createEventDispatcher } from 'svelte';
 15 | 	import { documents } from '../_stores';
 16 | 	import { SDK as Appwrite } from '../_appwrite';
 17 | 
 18 | 	const dispatch = createEventDispatcher();
 19 | 	/**
 20 | 	 * @name Document ID
 21 | 	 * @type {string}
 22 | 	 */
 23 | 	export let documentId: string;
 24 | 
 25 | 	/**
 26 | 	 * @name Collection ID
 27 | 	 * @type {string}
 28 | 	 */
 29 | 	export let collectionId: string;
 30 | 
 31 | 	/**
 32 | 	 * @description Enables document caching. Call `actions.reload()` to get fresh document(s)
 33 | 	 * @type {boolean}
 34 | 	 */
 35 | 	export let cache: boolean = getContext(cacheKey) ?? false;
 36 | 
 37 | 	let document: any;
 38 | 
 39 | 	const fetchDocument = async () => {
 40 | 		const response = await documents.fetchDocument(collectionId, documentId, cache);
 41 | 		document = response;
 42 | 		return response;
 43 | 	};
 44 | 
 45 | 	if (documentId && collectionId && !document) {
 46 | 		document = fetchDocument();
 47 | 	} else {
 48 | 		collectionId = document.$collection;
 49 | 		documentId = document.$id;
 50 | 	}
 51 | 
 52 | 	const actions = {
 53 | 		reload: () => {
 54 | 			documents.clear();
 55 | 			document = fetchDocument();
 56 | 		},
 57 | 		update: async (/** @type {object} */ data: object) => {
 58 | 			const response = await Appwrite.sdk.database.updateDocument(
 59 | 				document.$collection,
 60 | 				document.$id,
 61 | 				data,
 62 | 				document.$read,
 63 | 				document.$write
 64 | 			);
 65 | 			actions.reload();
 66 | 			dispatch('change');
 67 | 			return response;
 68 | 		},
 69 | 		remove: async () => {
 70 | 			const response = await Appwrite.sdk.database.deleteDocument(
 71 | 				document.$collection,
 72 | 				document.$id
 73 | 			);
 74 | 			actions.reload();
 75 | 			dispatch('change');
 76 | 			return response;
 77 | 		}
 78 | 	};
 79 | </script>
 80 | 
 81 | {#if documentId && collectionId}
 82 | 	{#await document}
 83 | 		<slot name="loading" />
 84 | 	{:then current}
 85 | 		<slot document={current} {actions} />
 86 | 	{:catch error}
 87 | 		<slot name="error" {error} />
 88 | 	{/await}
 89 | {:else}
 90 | 	<slot {actions} />
 91 | {/if}
 92 | 
 93 | <!-- 
 94 | 	@component
 95 | 	
 96 | ### `<Document />`
 97 | 
 98 | #### Arguments
 99 | 
100 | - documentId - *required* `@type - {string}`
101 | - collectionId - *required* `@type - {string}`
102 | 
103 | #### Slots
104 | 
105 | - **loading**
106 | - **error**
107 | 
108 | #### Directives
109 | 
110 | **let:actions**
111 | | Name | Description |
112 | | --- | --- |
113 | | `reload()` | Reload. |
114 | | `update(data)` | Updates a Document. `data` - `@type - {object}` |
115 | | `remove()` | Removes a Document. |
116 | 
117 | - **let:document**
118 | - **let:error**
119 | 
120 | #### Example
121 | 
122 | ```svelte
123 | <script>
124 | 	import { Collection, Document } from 'metawrite';
125 | 
126 | 	const collectionId = '5f56a3035a01f';
127 | </script>
128 | 
129 | <Collection {collectionId} let:documents>
130 | 	You have {documents.length} documents:
131 | 	{#each documents as document}
132 | 		<Document {collectionId} documentId={document.$id} let:document let:actions>
133 | 			Title: {document.title}
134 | 			Text: {document.text}
135 | 			<button on:click={() => {actions.remove()}}>Delete</button>
136 | 		</Document>
137 | 	{/each}
138 | </Collection>
139 | ```
140 | 	
141 |  -->
142 | 


--------------------------------------------------------------------------------
/src/lib/stores/_documents.ts:
--------------------------------------------------------------------------------
  1 | import { SDK as Appwrite } from '../_appwrite';
  2 | import { writable, get } from 'svelte/store';
  3 | 
  4 | // type Document = {
  5 | //     collectionId: string;
  6 | // 	cache?: boolean;
  7 | // 	queries?: string[];
  8 | // 	limit?: number;
  9 | // 	offset?: number;
 10 | // 	cursor?: string;
 11 | // 	cursorDirection?: string;
 12 | // 	orderAttributes?: string[];
 13 | // 	orderTypes?: string[];
 14 | // }
 15 | 
 16 | export class DocumentsStore {
 17 | 	subscribe: any;
 18 | 	set: (this: void, value: Map<any, any>) => void;
 19 | 	update: any;
 20 | 	constructor() {
 21 | 		const { subscribe, set, update } = writable(new Map());
 22 | 		this.subscribe = subscribe;
 23 | 		this.set = set;
 24 | 		this.update = update;
 25 | 	}
 26 | 
 27 | 	clear() {
 28 | 		this.set(new Map());
 29 | 	}
 30 | 
 31 | 	/**
 32 | 	 * Get Documents in a Collection
 33 | 	 * @param collectionId Collection Id
 34 | 	 * @param cache Use cached response
 35 | 	 * @param queries Array of query strings.
 36 | 	 * @param limit Maximum number of documents to return in response. By default will return maximum 25 results. Maximum of 100 results allowed per request.
 37 | 	 * @param offset Offset value. The default value is 0. Use this value to manage pagination.
 38 | 	 * @param cursor ID of the document used as the starting point for the query, excluding the document itself. Should be used for efficient pagination when working with large sets of data. 
 39 | 	 * @param cursorDirection Direction of the cursor.
 40 | 	 * @param orderAttributes Array of attributes used to sort results.
 41 | 	 * @param orderTypes Array of order directions for sorting attribtues. Possible values are DESC for descending order, or ASC for ascending order.
 42 | 	 * @returns {Promise<{documents: any[], total: number}>}
 43 | 	 */
 44 | 	async fetchDocuments(collectionId: string, cache?: boolean, queries?: string[], limit?: number, offset?: number, cursor?: string, cursorDirection?: string, orderAttributes?: string[], orderTypes?: string[]): Promise<{ documents:any[]; total: number; }> {
 45 | 		if (cache) {
 46 | 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 47 | 			// @ts-ignore
 48 | 			const docs: any[] = Array.from(get(this).entries())
 49 | 				.filter((entry) => entry[0].startsWith(collectionId))
 50 | 				.map((entry) => entry[1]);
 51 | 
 52 | 			if (docs?.length) {
 53 | 				return {
 54 | 					documents: docs,
 55 | 					total: docs.length
 56 | 				};
 57 | 			}
 58 | 		}
 59 | 
 60 | 		const response = await Appwrite.sdk.database.listDocuments(
 61 | 			collectionId,
 62 | 			queries,
 63 | 			limit,
 64 | 			offset,
 65 | 			cursor,
 66 | 			cursorDirection,
 67 | 			orderAttributes,
 68 | 			orderTypes
 69 | 		);
 70 | 
 71 | 		if (cache) {
 72 | 			this.update((docs: any) => {
 73 | 				for (const document of response.documents) {
 74 | 					docs.set(`${collectionId}:${document.$id}`, document);
 75 | 				}
 76 | 				return docs;
 77 | 			});
 78 | 		}
 79 | 		return response;
 80 | 	}
 81 | 
 82 | 	/**
 83 | 	 * @param {string} collectionId Collection ID
 84 | 	 * @param {string} documentId Document ID
 85 | 	 * @param {boolean} cache Use cache
 86 | 	 * @returns {Promise<Record<string, unknown>>}
 87 | 	 */
 88 | 	async fetchDocument(collectionId: string, documentId: string, cache: boolean): Promise<Record<string, unknown>> {
 89 | 		const key = `${collectionId}:${documentId}`;
 90 | 		if (cache) {
 91 | 			const docs: any = get(this);
 92 | 			if (docs.has(key)) return docs.get(key);
 93 | 		}
 94 | 
 95 | 		const response = await Appwrite.sdk.database.getDocument(collectionId, documentId);
 96 | 
 97 | 		if (cache) {
 98 | 			this.update((docs: any) => {
 99 | 				docs.set(key, response);
100 | 				return docs;
101 | 			});
102 | 		}
103 | 
104 | 		return response;
105 | 	}
106 | }
107 | 


--------------------------------------------------------------------------------
/src/lib/Account/RecoverPassword.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	/**
  3 | 	 * @slot {{
  4 | 	 * actions: {
  5 | 	 *  recover: (email: string, url: string) => Promise<void>;
  6 | 	 *  complete: (user: string, secret: string, password: string, passwordAgain: string) => Promise<void>;
  7 | 	 * }
  8 | 	 * }}
  9 | 	 */
 10 | 	import { createEventDispatcher } from 'svelte';
 11 | 	import { active } from '../_stores';
 12 | 	import { SDK as Appwrite } from '../_appwrite';
 13 | 
 14 | 	const href = window.location.href;
 15 | 	const url = new URL(href);
 16 | 	const search = url.searchParams;
 17 | 	const userId = search.get('userId');
 18 | 	const secret = search.get('secret');
 19 | 
 20 | 	const dispatch = createEventDispatcher();
 21 | 	const actions = {
 22 | 		recover: async (/** @type {string} */ email, /** @type {string} */ url) => {
 23 | 			try {
 24 | 				const response = await Appwrite.sdk.account.createRecovery(email, url);
 25 | 				dispatch('successRecover', response);
 26 | 			} catch (error) {
 27 | 				dispatch('failureRecover', error);
 28 | 				throw error;
 29 | 			}
 30 | 		},
 31 | 		complete: async (/** @type {string} */ password, /** @type {string} */ passwordAgain) => {
 32 | 			try {
 33 | 				const response = await Appwrite.sdk.account.updateRecovery(
 34 | 					userId,
 35 | 					secret,
 36 | 					password,
 37 | 					passwordAgain
 38 | 				);
 39 | 				dispatch('successComplete', response);
 40 | 			} catch (error) {
 41 | 				dispatch('failureComplete', error);
 42 | 				throw error;
 43 | 			}
 44 | 		}
 45 | 	};
 46 | </script>
 47 | 
 48 | {#if $active}
 49 | 	<slot {actions} />
 50 | {/if}
 51 | 
 52 | <!-- 
 53 | 	@component
 54 | 	
 55 | ### `<RecoverPassword />`
 56 | 
 57 | #### Directives
 58 | 
 59 | **let:actions**
 60 | | Name | Description |
 61 | | --- | --- |
 62 | | `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. |
 63 | | `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}`. |
 64 | 
 65 | #### Events
 66 | 
 67 | - **on:successRecover** On init and `reload` success.
 68 | - **on:failureRecover** On init and `reload` failure.
 69 | - **on:successComplete** On `update` success.
 70 | - **on:failureComplete** On `update` failure.
 71 | 
 72 | #### Example
 73 | 
 74 | #### Example
 75 | 
 76 | ```svelte
 77 | <script>
 78 |     import { RecoverPassword } from "metawrite";
 79 | 
 80 |     const url = "http://localhost:3000/reset-password"; // URL that will point to the next step.
 81 |     let email = '';
 82 | 	
 83 | 	let password, passwordAgain = '';
 84 | 
 85 |     const successComplete = e => {
 86 |     //success callback
 87 |     // `e` contains the user object
 88 |   };
 89 | 
 90 |   const failureComplete = e => {
 91 |     //failure callback
 92 |   }
 93 | 
 94 |     const successRecover = e => {
 95 |     //success callback
 96 |     // `e` contains the user object
 97 |   };
 98 | 
 99 |   const failureRecover = e => {
100 |     //failure callback
101 |   }
102 | </script>
103 | 
104 | <!-- localhost/forgot-password --\>
105 | <RecoverPassword let:actions on:successRecover on:failureRecover>
106 |     <input name="email" type="text" bind:value={email, url} placeholder="Email" />
107 |     <button on:click{actions.recover(email)}>Recover Password</button>
108 | </RecoverPassword>
109 | 
110 | <!-- Then on localhost/reset-password  --\>
111 | 
112 | <RecoverPassword let:actions on:successComplete on:failureComplete>
113 |     <input type="password" name="password" bind:value{password} placeholder="Password" />
114 |     <input type="password" name="password" bind:value{passwordAgain} placeholder="Confirm Password" />
115 |     <button on:click{actions.complete(password, passwordAgain)}>Set New Password</button>
116 | </RecoverPassword>
117 | ```
118 | 	
119 |  -->
120 | 


--------------------------------------------------------------------------------
/src/lib/Account/User.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	/**
  3 | 	 * @typedef {{
  4 | 	 * $id: string,
  5 | 	 * email: string,
  6 | 	 * emailVerification: boolean,
  7 | 	 * name: string,
  8 | 	 * registration: number,
  9 | 	 * status: number,
 10 | 	 * prefs: object
 11 | 	 * }} AppwriteUser
 12 | 	 */
 13 | 
 14 | 	/**
 15 | 	 * @slot {{
 16 | 	 * user: AppwriteUser;
 17 | 	 * actions: {
 18 | 	 *  reload: () => void;
 19 | 	 *  get: () => void;
 20 | 	 *  logout: () => Promise<object>;
 21 | 	 *  logoutFrom: (session: string) => Promise<object>;
 22 | 	 *  logoutAll: () => Promise<object>;
 23 | 	 * }
 24 | 	 * }}
 25 | 	 *
 26 | 	 */
 27 | 	// @slot {{ error: object }} error
 28 | 
 29 | 	import { createEventDispatcher } from 'svelte';
 30 | 	import { active, currentUser } from '../_stores';
 31 | 	import { SDK as Appwrite } from '../_appwrite';
 32 | 
 33 | 	const dispatch = createEventDispatcher();
 34 | 
 35 | 	const fetchUser = async () => {
 36 | 		try {
 37 | 			await currentUser.reload();
 38 | 			dispatch('success', $currentUser);
 39 | 			return $currentUser;
 40 | 		} catch (error) {
 41 | 			dispatch('failure', error);
 42 | 			throw error;
 43 | 		}
 44 | 	};
 45 | 
 46 | 	const actions = {
 47 | 		reload: () => (request = fetchUser()),
 48 | 		get: async () => {
 49 | 			try {
 50 | 				const response = await Appwrite.sdk.account.get();
 51 | 				dispatch('success', response);
 52 | 				return response;
 53 | 			} catch (error) {
 54 | 				dispatch('failure', error);
 55 | 			}
 56 | 		},
 57 | 		logout: async () => {
 58 | 			try {
 59 | 				const response = await Appwrite.sdk.account.deleteSession('current');
 60 | 				actions.reload();
 61 | 				dispatch('successLogout', response);
 62 | 			} catch (error) {
 63 | 				dispatch('failureLogout', error);
 64 | 				throw error;
 65 | 			}
 66 | 		},
 67 | 		logoutFrom: async (/** @type {string} */ session) => {
 68 | 			try {
 69 | 				const response = await Appwrite.sdk.account.deleteSession(session);
 70 | 				actions.reload();
 71 | 				dispatch('successLogoutFrom', response);
 72 | 			} catch (error) {
 73 | 				dispatch('failureLogoutFrom', error);
 74 | 				throw error;
 75 | 			}
 76 | 		},
 77 | 		logoutAll: async () => {
 78 | 			try {
 79 | 				const response = await Appwrite.sdk.account.deleteSessions();
 80 | 				actions.reload();
 81 | 				dispatch('successLogoutAll', response);
 82 | 			} catch (error) {
 83 | 				dispatch('failureLogoutAll', error);
 84 | 				throw error;
 85 | 			}
 86 | 		}
 87 | 	};
 88 | 
 89 | 	let request = fetchUser();
 90 | </script>
 91 | 
 92 | {#if $active}
 93 | 	{#if $currentUser}
 94 | 		<slot user={$currentUser} {actions} />
 95 | 	{:else}
 96 | 		{#await request}
 97 | 			<slot name="loading" />
 98 | 		{:catch error}
 99 | 			<slot name="error" {error} />
100 | 		{/await}
101 | 	{/if}
102 | {/if}
103 | 
104 | <!-- 
105 |   @component
106 |   
107 |   ### `<User />`
108 | 
109 | #### Slots
110 | 
111 | - **loading**
112 | - **error**
113 | 
114 | #### Directives
115 | 
116 | **let:actions**
117 | | Name | Description |
118 | | --- | --- |
119 | | `reload()` | Reload. |
120 | | `logout()` | Logout current session. |
121 | | `logoutAll()` | Logout from all session. |
122 | | `logoutFrom(session)` | Logout from specific session. `session` is `@type - {string}` |
123 | 
124 | - **let:user** `object`
125 | - **let:error**
126 | 
127 | #### Events
128 | 
129 | - **on:success** On user fetch success.
130 | - **on:failure** On user fetch failure.
131 | - **on:successLogout** On `logout` success.
132 | - **on:failureLogout** On `logout` failure.
133 | - **on:successLogoutFrom** On `logoutFrom` success.
134 | - **on:failureLogoutFrom** On `logoutFrom` failure.
135 | - **on:successLogoutAll** On `logoutAll` success.
136 | - **on:failureLogoutAll** On `logoutAll` failure.
137 | 
138 | #### Example
139 | 
140 | ```svelte
141 | <script>
142 |     import { User } from "metawrite"
143 | </script>
144 | 
145 | <User let:actions let:user>
146 |     <button on:click={actions.reload()}>Reload user data</button>
147 |     <button on:click={actions.get()}>Get logged in user data</button>
148 |     <button on:click={actions.logout()}>Log out from current session</button>
149 |     <button on:click={actions.logoutFrom("sessionId")}>Log out from specific session</button>
150 |     <button on:click={actions.logoutAll()}>Log out from all sessions</button>
151 | 
152 |     <!-- If logged in --\>
153 |     <p>Hi, {user.name}</p>
154 | </User>
155 | ```
156 | 
157 |  -->
158 | 


--------------------------------------------------------------------------------
/src/lib/Database/Collection.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	/**
  3 | 	 * @slot {{
  4 | 	 * documents: any[];
  5 | 	 * actions: {
  6 | 	 *  reload: () => Promise<object>;
  7 | 	 *  create: (data: any, read?: string[], write?: string[]) => Promise<object>;
  8 | 	 * }
  9 | 	 * }}
 10 | 	 * @slot {{ error: object }} error
 11 | 	 */
 12 | 	import { setContext } from 'svelte';
 13 | 	import { cacheKey } from '../_keys';
 14 | 	import { SDK as Appwrite } from '../_appwrite';
 15 | 	import { currentUser, documents } from '../_stores';
 16 | 
 17 | 	/**
 18 | 	 * @name Collection ID
 19 | 	 * @type {string}
 20 | 	 */
 21 | 	export let collectionId: string;
 22 | 
 23 | 	/**
 24 | 	 * @name Queries 
 25 | 	 * @type {string[]}
 26 | 	 * Array of query strings.
 27 | 	 */
 28 | 	export let queries: string[] = [];
 29 | 
 30 | 	/**
 31 | 	 * @name Limit
 32 | 	 * @type {number}
 33 | 	 * Maximum number of documents to return in response. By default will return maximum 25 results. Maximum of 100 results allowed per request.
 34 | 	 */
 35 | 	export let limit: number = 25;
 36 | 
 37 | 	/**
 38 | 	 * @name offset
 39 | 	 * @type {number}
 40 | 	 * Default: 0
 41 | 	 */
 42 | 	export let offset: number = 0;
 43 | 
 44 | 	/**
 45 | 	 * @name Cursor
 46 | 	 * @type {string}
 47 | 	 * ID of the document used as the starting point for the query, excluding the document itself. 
 48 | 	 */
 49 | 	export let cursor: string = '';
 50 | 
 51 | 	/**
 52 | 	 * @name cursorDirection
 53 | 	 * @type {string}
 54 | 	 */
 55 | 	export let cursorDirection: string = '';
 56 | 
 57 | 	/**
 58 | 	 * @name orderAttributes
 59 | 	 * @type {string[]}
 60 | 	 * Array of attributes used to sort results.
 61 | 	 */
 62 | 	export let orderAttributes: string[] = [];
 63 | 
 64 | 	/**
 65 | 	 * @name orderTypes
 66 | 	 * @type {string[]}
 67 | 	 * ASC or DESC
 68 | 	 * Array of order directions for sorting attribtues. Possible values are DESC for descending order, or ASC for ascending order.
 69 | 	 */
 70 | 	export let orderTypes: string[] = [];
 71 | 
 72 | 	/**
 73 | 	 * @description Enables document caching. Call `actions.reload()` to get fresh document(s)
 74 | 	 */
 75 | 	export let cache = false;
 76 | 	setContext(cacheKey, cache);
 77 | 
 78 | 	const fetchDocuments = async () => {
 79 | 		return await documents.fetchDocuments(
 80 | 			collectionId,
 81 | 			cache,
 82 | 			queries,
 83 | 			limit,
 84 | 			offset,
 85 | 			cursor,
 86 | 			cursorDirection,
 87 | 			orderAttributes,
 88 | 			orderTypes
 89 | 		);
 90 | 	};
 91 | 
 92 | 	const actions = {
 93 | 		reload: () => {
 94 | 			documents.clear();
 95 | 			getDocuments = fetchDocuments();
 96 | 		},
 97 | 		create: async (
 98 | 			documentId = 'unique()',
 99 | 			data = {},
100 | 			read = [`user:${$currentUser.$id}`],
101 | 			write = [`user:${$currentUser.$id}`]
102 | 		) => {
103 | 			const response = await Appwrite.sdk.database.createDocument(
104 | 				collectionId,
105 | 				documentId,
106 | 				data,
107 | 				read,
108 | 				write
109 | 			);
110 | 			actions.reload();
111 | 			return response;
112 | 		}
113 | 	};
114 | 
115 | 	let getDocuments = fetchDocuments();
116 | </script>
117 | 
118 | {#await getDocuments}
119 | 	<slot name="loading" />
120 | {:then current}
121 | 	<slot documents={current?.documents ?? []} {actions} />
122 | {:catch error}
123 | 	<slot name="error" {error} />
124 | {/await}
125 | 
126 | <!-- 
127 | 	@component
128 | 
129 | ### `<Collection />`
130 | 
131 | #### Arguments
132 | 
133 | - collectionId - *required* `@type - {string}`
134 | 
135 | - cache - *optional*, by default set to false `@type - {boolean}`
136 | 
137 |   **query: `@type - {object}`**
138 | 
139 | - queries - *optional* `@type - {string[]}`
140 | 
141 | - limit - *optional* `@type - {number}`
142 | 
143 | - offset - *optional* `@type - {number}`
144 | 
145 | - cursor - *optional* `@type - {string}`
146 | 
147 | - cursorDirection - *optional* `@type - {string}`
148 | 
149 | - orderAttributes - *optional* `@type - {string[]}`
150 | 
151 | - orderTypes - *optional* `@type - {string[]}`
152 | 
153 | #### Slots
154 | 
155 | - **loading**
156 | - **error**
157 | 
158 | #### Directives
159 | 
160 | **let:actions**
161 | | Name | Description |
162 | | --- | --- |
163 | | `reload()` | Reload. |
164 | | `create(documentId, data, read, write)` | Creates a Document. `data` - `@type - {string}`.<br /> `read`/`write` is optional `@type - {string[]}`.<br />`documentId` is optional, by default generates unique `@type - {string}`. |
165 | 
166 | - **let:documents**
167 | - **let:error**
168 | 
169 | #### Example 
170 | 
171 | ```svelte
172 | <script>
173 |   import { Collection } from "metawrite";
174 | </script>
175 | 
176 | <Collection collectionId="5f56a3035a01f" let:documents>
177 |   You have {documents.length} documents.
178 | </Collection>
179 | ```
180 | 
181 |  -->
182 | 


--------------------------------------------------------------------------------
/static/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="650" height="200" viewBox="0 0 650 200" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M176 136V135L178 134.3C180.267 133.567 181.4 131.667 181.4 128.6V77.4C181.4 76.0667 181.233 75 180.9 74.2C180.633 73.4 179.867 72.7333 178.6 72.2L176 71V70H195.3L213.8 118.4L231.2 70H250.9V71L249.3 71.6C248.033 72.0667 247.167 72.7333 246.7 73.6C246.233 74.4 246 75.4667 246 76.8V129.1C246 130.433 246.167 131.467 246.5 132.2C246.833 132.933 247.633 133.567 248.9 134.1L250.9 135V136H226V135L228.1 134.1C229.367 133.567 230.167 132.933 230.5 132.2C230.833 131.467 231 130.433 231 129.1V106.6L231.2 78L210.3 136H205.3L183.5 78.7L183.8 103.6V128.8C183.8 130.267 184 131.467 184.4 132.4C184.867 133.267 185.733 133.9 187 134.3L189.2 135V136H176ZM277.565 86.4C281.898 86.4 285.598 87.3 288.665 89.1C291.732 90.8333 294.065 93.2333 295.665 96.3C297.332 99.3 298.165 102.733 298.165 106.6C298.165 107.333 298.132 108.1 298.065 108.9C297.998 109.633 297.865 110.3 297.665 110.9H267.865C267.932 118.1 269.198 123.3 271.665 126.5C274.198 129.633 277.932 131.2 282.865 131.2C286.198 131.2 288.898 130.667 290.965 129.6C293.032 128.533 294.965 126.967 296.765 124.9L297.765 125.8C295.698 129.467 292.932 132.333 289.465 134.4C286.065 136.467 281.965 137.5 277.165 137.5C272.432 137.5 268.232 136.5 264.565 134.5C260.898 132.433 258.032 129.5 255.965 125.7C253.898 121.9 252.865 117.367 252.865 112.1C252.865 106.633 254.065 102 256.465 98.2C258.865 94.3333 261.932 91.4 265.665 89.4C269.465 87.4 273.432 86.4 277.565 86.4ZM277.265 88.4C275.332 88.4 273.665 89 272.265 90.2C270.932 91.3333 269.865 93.4 269.065 96.4C268.332 99.3333 267.932 103.5 267.865 108.9H284.965C285.632 101.633 285.365 96.4 284.165 93.2C282.965 90 280.665 88.4 277.265 88.4ZM322.148 137.5C317.882 137.5 314.548 136.433 312.148 134.3C309.815 132.167 308.648 128.767 308.648 124.1V89.9H301.748V88.9L304.148 88.5C306.215 88.0333 307.982 87.3667 309.448 86.5C310.982 85.6333 312.482 84.4667 313.948 83L322.148 73.9H323.148L322.848 87.9H334.048V89.9H322.748V125.9C322.748 128.233 323.248 130 324.248 131.2C325.315 132.4 326.648 133 328.248 133C329.648 133 330.882 132.667 331.948 132C333.015 131.267 334.082 130.3 335.148 129.1L336.148 130.1C334.815 132.367 332.982 134.167 330.648 135.5C328.315 136.833 325.482 137.5 322.148 137.5ZM353.881 137.5C350.015 137.5 346.748 136.4 344.081 134.2C341.481 132 340.181 128.833 340.181 124.7C340.181 121.567 341.781 118.7 344.981 116.1C348.181 113.433 353.215 111.433 360.081 110.1C361.148 109.9 362.348 109.7 363.681 109.5C365.015 109.233 366.415 108.967 367.881 108.7V100.8C367.881 96.2667 367.315 93.1 366.181 91.3C365.115 89.4333 363.415 88.5 361.081 88.5C359.481 88.5 358.215 89.0333 357.281 90.1C356.348 91.1 355.748 92.8667 355.481 95.4L355.281 96.5C355.148 99.3667 354.448 101.467 353.181 102.8C351.915 104.133 350.348 104.8 348.481 104.8C346.748 104.8 345.315 104.267 344.181 103.2C343.048 102.133 342.481 100.7 342.481 98.9C342.481 96.1667 343.415 93.8667 345.281 92C347.215 90.1333 349.748 88.7333 352.881 87.8C356.015 86.8667 359.415 86.4 363.081 86.4C369.015 86.4 373.581 87.8667 376.781 90.8C380.048 93.6667 381.681 98.3667 381.681 104.9V127C381.681 130 383.081 131.5 385.881 131.5H388.081L388.981 132.3C387.715 133.9 386.315 135.133 384.781 136C383.315 136.867 381.215 137.3 378.481 137.3C375.548 137.3 373.215 136.633 371.481 135.3C369.815 133.9 368.715 132.067 368.181 129.8C366.181 131.933 364.115 133.767 361.981 135.3C359.915 136.767 357.215 137.5 353.881 137.5ZM359.981 131.4C361.315 131.4 362.548 131.1 363.681 130.5C364.881 129.833 366.281 128.833 367.881 127.5V110.7C367.215 110.833 366.548 110.967 365.881 111.1C365.215 111.233 364.448 111.367 363.581 111.5C360.515 112.3 358.048 113.667 356.181 115.6C354.381 117.467 353.481 120 353.481 123.2C353.481 125.933 354.115 128 355.381 129.4C356.648 130.733 358.181 131.4 359.981 131.4ZM409.586 136.3L394.186 94C393.453 91.8667 391.986 90.3667 389.786 89.5L388.086 88.9V87.9H412.586V88.9L411.086 89.3C408.486 90.1 407.619 91.7 408.486 94.1L417.786 122.4L426.086 100.4L424.186 94.7C423.719 93.2333 423.219 92.1333 422.686 91.4C422.219 90.6 421.586 90.0333 420.786 89.7L419.086 88.9V87.9H439.786V88.9L438.386 89.5C437.386 89.9 436.786 90.4333 436.586 91.1C436.386 91.7667 436.519 92.7667 436.986 94.1L446.186 121.9L455.686 94.3C456.619 91.7667 456.119 90.1667 454.186 89.5L451.986 88.9V87.9H463.986V88.9L461.586 89.6C460.453 89.9333 459.619 90.4667 459.086 91.2C458.619 91.8667 458.186 92.8 457.786 94L443.386 136.3H438.286L427.186 103.6L415.386 136.3H409.586ZM467.211 136V135L468.711 134.6C470.044 134.2 470.944 133.6 471.411 132.8C471.944 132 472.211 130.967 472.211 129.7V98.4C472.211 96.9333 471.944 95.8667 471.411 95.2C470.944 94.4667 470.044 93.9667 468.711 93.7L467.211 93.3V92.3L484.411 86.5L485.411 87.5L486.311 96.1V96.9C487.244 95.0333 488.444 93.3333 489.911 91.8C491.444 90.2 493.111 88.9 494.911 87.9C496.778 86.9 498.611 86.4 500.411 86.4C502.944 86.4 504.878 87.1 506.211 88.5C507.544 89.9 508.211 91.6667 508.211 93.8C508.211 96.0667 507.544 97.8333 506.211 99.1C504.944 100.3 503.411 100.9 501.611 100.9C498.811 100.9 496.344 99.5 494.211 96.7L494.011 96.5C493.344 95.5667 492.578 95.0667 491.711 95C490.844 94.8667 490.044 95.2667 489.311 96.2C488.644 96.8 488.078 97.5333 487.611 98.4C487.211 99.2 486.811 100.133 486.411 101.2V129.1C486.411 131.767 487.578 133.433 489.911 134.1L493.111 135V136H467.211ZM523.352 81.2C521.085 81.2 519.152 80.5 517.552 79.1C516.018 77.6333 515.252 75.8 515.252 73.6C515.252 71.3333 516.018 69.5 517.552 68.1C519.152 66.7 521.085 66 523.352 66C525.618 66 527.518 66.7 529.052 68.1C530.585 69.5 531.352 71.3333 531.352 73.6C531.352 75.8 530.585 77.6333 529.052 79.1C527.518 80.5 525.618 81.2 523.352 81.2ZM511.552 136V135L512.952 134.6C514.285 134.2 515.185 133.6 515.652 132.8C516.185 132 516.452 130.933 516.452 129.6V98.3C516.452 96.9 516.185 95.8667 515.652 95.2C515.185 94.4667 514.285 93.9667 512.952 93.7L511.552 93.4V92.4L529.852 86.5L530.852 87.5L530.552 101.7V129.7C530.552 131.033 530.785 132.1 531.252 132.9C531.785 133.7 532.685 134.3 533.952 134.7L534.952 135V136H511.552ZM558.379 137.5C554.112 137.5 550.779 136.433 548.379 134.3C546.046 132.167 544.879 128.767 544.879 124.1V89.9H537.979V88.9L540.379 88.5C542.446 88.0333 544.212 87.3667 545.679 86.5C547.212 85.6333 548.712 84.4667 550.179 83L558.379 73.9H559.379L559.079 87.9H570.279V89.9H558.979V125.9C558.979 128.233 559.479 130 560.479 131.2C561.546 132.4 562.879 133 564.479 133C565.879 133 567.112 132.667 568.179 132C569.246 131.267 570.312 130.3 571.379 129.1L572.379 130.1C571.046 132.367 569.212 134.167 566.879 135.5C564.546 136.833 561.712 137.5 558.379 137.5ZM600.319 86.4C604.652 86.4 608.352 87.3 611.419 89.1C614.485 90.8333 616.819 93.2333 618.419 96.3C620.085 99.3 620.919 102.733 620.919 106.6C620.919 107.333 620.885 108.1 620.819 108.9C620.752 109.633 620.619 110.3 620.419 110.9H590.619C590.685 118.1 591.952 123.3 594.419 126.5C596.952 129.633 600.685 131.2 605.619 131.2C608.952 131.2 611.652 130.667 613.719 129.6C615.785 128.533 617.719 126.967 619.519 124.9L620.519 125.8C618.452 129.467 615.685 132.333 612.219 134.4C608.819 136.467 604.719 137.5 599.919 137.5C595.185 137.5 590.985 136.5 587.319 134.5C583.652 132.433 580.785 129.5 578.719 125.7C576.652 121.9 575.619 117.367 575.619 112.1C575.619 106.633 576.819 102 579.219 98.2C581.619 94.3333 584.685 91.4 588.419 89.4C592.219 87.4 596.185 86.4 600.319 86.4ZM600.019 88.4C598.085 88.4 596.419 89 595.019 90.2C593.685 91.3333 592.619 93.4 591.819 96.4C591.085 99.3333 590.685 103.5 590.619 108.9H607.719C608.385 101.633 608.119 96.4 606.919 93.2C605.719 90 603.419 88.4 600.019 88.4Z" fill="black"/>
 3 | <path d="M135 75L87 58L39 75V135L87 152L135 135V75Z" fill="white"/>
 4 | <path d="M135 75L87 58L39 75V135L87 152L135 135V75ZM135 75L87 58Z" fill="white"/>
 5 | <path d="M87 155C86.7 155 86.3 154.9 86 154.8L38 137.8C36.8 137.4 36 136.2 36 135V75C36 73.7 36.8 72.6 38 72.2L86 55.2C87.6 54.6 89.3 55.5 89.8 57C90.4 58.6 89.5 60.3 88 60.8L42 77.1V132.9L88 149.2C89.6 149.8 90.4 151.5 89.8 153C89.4 154.2 88.2 155 87 155Z" fill="#444B54"/>
 6 | <path d="M135 75L87 58L135 75ZM135 75L87 58Z" fill="white"/>
 7 | <path d="M57 93.9V83.1C57 81.8 57.8 80.7 59 80.3L105 64L117 68L70 84.3C68.8 84.7 68 85.9 68 87.1V97.1C68 98.5 66.6 99.5 65.3 99L59 96.7C57.8 96.3 57 95.2 57 93.9Z" fill="#FF3E00"/>
 8 | <path d="M138 74.8C138 74.7 138 74.6 138 74.4C138 74.4 138 74.4 138 74.3C138 74.2 137.9 74 137.9 73.9C137.6 73.1 136.9 72.4 136.2 72.1C136.2 72.1 136.1 72.1 136.1 72L88.1 55C88.1 55 88.1 55 88 55C87.4 54.8 86.7 54.8 86.1 55L38.1 72C36.9 72.4 36.1 73.6 36.1 74.8V134.8C36.1 136.1 36.9 137.2 38.1 137.6L86.1 154.6C86.4 154.7 86.8 154.8 87.1 154.8C87.4 154.8 87.8 154.7 88.1 154.6L136.1 137.6C137.3 137.2 138.1 136 138.1 134.8V75C138 74.9 138 74.9 138 74.8ZM42 77.1L87 61.2L126 75L86 89.2C86 89.2 86 89.2 85.9 89.2C84.8 89.6 84 90.7 84 92V147.8L42 132.9V77.1ZM90 147.8V94.1L132 79.2V132.8L90 147.8Z" fill="black"/>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    Copyright 2022 Nick Revenko
179 | 
180 |    Licensed under the Apache License, Version 2.0 (the "License");
181 |    you may not use this file except in compliance with the License.
182 |    You may obtain a copy of the License at
183 | 
184 |        http://www.apache.org/licenses/LICENSE-2.0
185 | 
186 |    Unless required by applicable law or agreed to in writing, software
187 |    distributed under the License is distributed on an "AS IS" BASIS,
188 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
189 |    See the License for the specific language governing permissions and
190 |    limitations under the License.
191 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | <p align="center">
  2 | <img alt="Metawrite" src="static/logo.svg" />
  3 | </p>
  4 | 
  5 | > Versions `x.x.n` neans some minor changes to package documentation or typings.
  6 | > Versions `x.n.x` might include some minor breaking changes.
  7 | > Versions `n.x.x` might include some major breaking changes.
  8 | 
  9 | ### Changelog
 10 | 
 11 | All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 12 | 
 13 | #### [v0.8.1](https://github.com/koodeau/metawrite/compare/v0.8.0...v0.8.1)
 14 | 
 15 | - removed Delete from docs and examples [`fa11151`](https://github.com/koodeau/metawrite/commit/fa11151326916d4a4a57fb33998d4bee8ca5f7d1)
 16 | 
 17 | #### [v0.8.0](https://github.com/koodeau/metawrite/compare/v0.7.3...v0.8.0)
 18 | 
 19 | > 12 June 2022
 20 | 
 21 | - updated for sdk v8 [`257aaea`](https://github.com/koodeau/metawrite/commit/257aaea1a2ae238c0c53c0fa7a816d8f2a30ee4b)
 22 | - BREAKING CHANGE Removed delete endpoint from the Accounts API [`5307c50`](https://github.com/koodeau/metawrite/commit/5307c503e29f61bc9266199c38f665d0c34e521b)
 23 | 
 24 | #### [v0.7.3](https://github.com/koodeau/metawrite/compare/v0.7.2...v0.7.3)
 25 | 
 26 | > 21 April 2022
 27 | 
 28 | - Fix: type defs and documentation fixed for Document component [`4e8640f`](https://github.com/koodeau/metawrite/commit/4e8640f5e1607a4905b01f02a798b088ba5558d1)
 29 | 
 30 | #### [v0.7.2](https://github.com/koodeau/metawrite/compare/v0.7.1...v0.7.2)
 31 | 
 32 | > 21 April 2022
 33 | 
 34 | - Fix: Document component bug regarding receiving document as argument instead of returning as directive [`284de6f`](https://github.com/koodeau/metawrite/commit/284de6f716c4399b09b09914eea61662d3d4f557)
 35 | 
 36 | #### [v0.7.1](https://github.com/koodeau/metawrite/compare/v0.7.0...v0.7.1)
 37 | 
 38 | > 31 March 2022
 39 | 
 40 | - Fix: updated permission variables to a never object version [`bda881c`](https://github.com/koodeau/metawrite/commit/bda881c53669f526d16db583a611596679a6961f)
 41 | 
 42 | #### [v0.7.0](https://github.com/koodeau/metawrite/compare/v0.6.3...v0.7.0)
 43 | 
 44 | > 30 March 2022
 45 | 
 46 | - Breaking Change: changed File component behaviour and fixes [`0ae47b1`](https://github.com/koodeau/metawrite/commit/0ae47b1bb6aa7d6049a013fc5c990b07dc6ead92)
 47 | - Fixed replaced userId with sessionId parameter on MagicURL [`ad0714b`](https://github.com/koodeau/metawrite/commit/ad0714bf642581f8209a4125ab97643ecda4476b)
 48 | 
 49 | #### [v0.6.3](https://github.com/koodeau/metawrite/compare/v0.6.2...v0.6.3)
 50 | 
 51 | > 9 March 2022
 52 | 
 53 | - Fixed: Collection and File components API errors resolved and improved typings. Improved svelte stores [`a388bc5`](https://github.com/koodeau/metawrite/commit/a388bc5431dc7d2004207a7f7d197ba49f47e74b)
 54 | 
 55 | #### [v0.6.2](https://github.com/koodeau/metawrite/compare/v0.6.1...v0.6.2)
 56 | 
 57 | > 9 March 2022
 58 | 
 59 | - Fixed: tsconfig caused error bulding package [`f7f68d3`](https://github.com/koodeau/metawrite/commit/f7f68d381826af7214e227177145c192e5d062b9)
 60 | 
 61 | #### [v0.6.1](https://github.com/koodeau/metawrite/compare/v0.6.0...v0.6.1)
 62 | 
 63 | > 9 March 2022
 64 | 
 65 | - Fixed: removed unnecessary props from required in Collection component [`2e20214`](https://github.com/koodeau/metawrite/commit/2e2021459ab20ca7f2dcc89cdb3a2ac5c5461723)
 66 | - Fixed: typings for Document component [`6c4a2bf`](https://github.com/koodeau/metawrite/commit/6c4a2bf6a32ca57ef38eefd063723eeca7339d37)
 67 | 
 68 | #### [v0.6.0](https://github.com/koodeau/metawrite/compare/v0.5.3...v0.6.0)
 69 | 
 70 | > 9 March 2022
 71 | 
 72 | - added support of sdk v7 and server v0.13 Breaking Change [`5b52049`](https://github.com/koodeau/metawrite/commit/5b52049fd6a8da141f846a84f208316eb8a62120)
 73 | 
 74 | #### [v0.5.3](https://github.com/koodeau/metawrite/compare/v0.5.2...v0.5.3)
 75 | 
 76 | > 28 February 2022
 77 | 
 78 | - WIP: Collection component fix [`f72b887`](https://github.com/koodeau/metawrite/commit/f72b887b4b5ac339491e38d0207e38d4235f6143)
 79 | 
 80 | #### [v0.5.2](https://github.com/koodeau/metawrite/compare/v0.5.1...v0.5.2)
 81 | 
 82 | > 28 February 2022
 83 | 
 84 | - add orderTypes prop to Collection component [`b9b73fc`](https://github.com/koodeau/metawrite/commit/b9b73fcff18952674bb5e6fc45e619a105bc04d3)
 85 | 
 86 | #### [v0.5.1](https://github.com/koodeau/metawrite/compare/v0.5.0...v0.5.1)
 87 | 
 88 | > 23 February 2022
 89 | 
 90 | - Fix: document query array [`8f054f2`](https://github.com/koodeau/metawrite/commit/8f054f2ea9958a73f641c142d62437eeba064422)
 91 | 
 92 | #### [v0.5.0](https://github.com/koodeau/metawrite/compare/v0.4.1...v0.5.0)
 93 | 
 94 | > 23 February 2022
 95 | 
 96 | - Breaking Change: fixed Collection query settings. Requres additional code changes if you used optional props [`52eb28c`](https://github.com/koodeau/metawrite/commit/52eb28c1593a76d93760204e2271921e2124beab)
 97 | 
 98 | #### [v0.4.1](https://github.com/koodeau/metawrite/compare/v0.4.0...v0.4.1)
 99 | 
100 | > 22 February 2022
101 | 
102 | - Fix: fixed Realtime props [`24443a1`](https://github.com/koodeau/metawrite/commit/24443a11970474d33ae66abe4e8c800f6ce3017a)
103 | - Fix: added payload directive in Realtime [`5369439`](https://github.com/koodeau/metawrite/commit/536943909db3970c0b70513c9342010f1822014e)
104 | 
105 | #### [v0.4.0](https://github.com/koodeau/metawrite/compare/v0.3.4...v0.4.0)
106 | 
107 | > 22 February 2022
108 | 
109 | - New: Realtime component with new actions. See docs [`812fa1a`](https://github.com/koodeau/metawrite/commit/812fa1aab7e06919333e07b30a2ede9e2d60662c)
110 | - New: added custom Realtime endpoint option for Appwrite init [`b43447c`](https://github.com/koodeau/metawrite/commit/b43447c46b2450e4bfc311aad99957d5c565dfe7)
111 | 
112 | #### [v0.3.4](https://github.com/koodeau/metawrite/compare/v0.3.3...v0.3.4)
113 | 
114 | > 22 February 2022
115 | 
116 | - Fix: added default export for File component [`8180ae9`](https://github.com/koodeau/metawrite/commit/8180ae94684ac7a7d395659529a075dc6172d05c)
117 | 
118 | #### [v0.3.3](https://github.com/koodeau/metawrite/compare/v0.3.2...v0.3.3)
119 | 
120 | > 18 February 2022
121 | 
122 | #### [v0.3.2](https://github.com/koodeau/metawrite/compare/v0.3.1...v0.3.2)
123 | 
124 | > 18 February 2022
125 | 
126 | - Update README.md [`ff039ac`](https://github.com/koodeau/metawrite/commit/ff039acc860fe12f428df19b88caf7309737806b)
127 | 
128 | #### [v0.3.1](https://github.com/koodeau/metawrite/compare/v0.3.0...v0.3.1)
129 | 
130 | > 18 February 2022
131 | 
132 | - Create LICENSE [`#2`](https://github.com/koodeau/metawrite/pull/2)
133 | - add LICENSE [`3b8c9ad`](https://github.com/koodeau/metawrite/commit/3b8c9adba525333115dd7127036ae98317ab4a3e)
134 | 
135 | #### [v0.3.0](https://github.com/koodeau/metawrite/compare/v0.2.6...v0.3.0)
136 | 
137 | > 17 February 2022
138 | 
139 | - Fix: added js entrypoint instead of svelte [`58cd1f7`](https://github.com/koodeau/metawrite/commit/58cd1f70f9f1ca40e0d90b8e115adf88523a83d4)
140 | 
141 | #### [v0.2.6](https://github.com/koodeau/metawrite/compare/v0.2.5...v0.2.6)
142 | 
143 | > 16 February 2022
144 | 
145 | - Update: removed unused dependencies [`593ac5f`](https://github.com/koodeau/metawrite/commit/593ac5f3f9571fdb83ee0cf73ea687c438c13539)
146 | 
147 | #### [v0.2.5](https://github.com/koodeau/metawrite/compare/v0.2.4...v0.2.5)
148 | 
149 | > 16 February 2022
150 | 
151 | - Fix: added devDependency cross-fetch ro resolve fetch import [`844558b`](https://github.com/koodeau/metawrite/commit/844558b80f7e7f8b9c8e05a9d34861a5b6da23b9)
152 | 
153 | #### [v0.2.4](https://github.com/koodeau/metawrite/compare/v0.2.3...v0.2.4)
154 | 
155 | > 16 February 2022
156 | 
157 | - Fix: changed index.d.ts exports and tsconfig that affected components documentation [`a11c74e`](https://github.com/koodeau/metawrite/commit/a11c74e4cfa9c1dfbf83b8dae83004f4d35a8714)
158 | 
159 | #### [v0.2.3](https://github.com/koodeau/metawrite/compare/v0.2.2...v0.2.3)
160 | 
161 | > 16 February 2022
162 | 
163 | - Fix: resolved bug with order of Collection create attributes [`cd34465`](https://github.com/koodeau/metawrite/commit/cd3446572cd994933b11c5df016d9d1c954d5a3b)
164 | 
165 | #### [v0.2.2](https://github.com/koodeau/metawrite/compare/v0.2.1...v0.2.2)
166 | 
167 | > 16 February 2022
168 | 
169 | - fixed typo in component that caused errors [`42a15f7`](https://github.com/koodeau/metawrite/commit/42a15f7907bc130e32df610d30d0f6ae4ae67ca5)
170 | 
171 | #### [v0.2.1](https://github.com/koodeau/metawrite/compare/v0.2.0...v0.2.1)
172 | 
173 | > 16 February 2022
174 | 
175 | - Fix: added unique user id to MagicURL and fixed documents creation in Collection component [`7a2b5e5`](https://github.com/koodeau/metawrite/commit/7a2b5e543dc59da121ff654f370fdad87442ae00)
176 | - added missing info to changelog [`2e32805`](https://github.com/koodeau/metawrite/commit/2e3280568b8fae0a499d648e1e6901b9b07f3aaa)
177 | 
178 | #### [v0.2.0](https://github.com/koodeau/metawrite/compare/v0.1.14...v0.2.0)
179 | 
180 | > 15 February 2022
181 | 
182 | - Breaking Change: Modified MagicURL component to be able to create, automatically validate and store user session. Read updated documentation [`2d3c0e1`](https://github.com/koodeau/metawrite/commit/2d3c0e1da732ce3bc2b682620bc89ab4c00655e9)
183 | 
184 | #### [v0.1.14](https://github.com/koodeau/metawrite/compare/v0.1.13...v0.1.14)
185 | 
186 | > 15 February 2022
187 | 
188 | - Fix: wrapped entrypoint into module context [`93edd78`](https://github.com/koodeau/metawrite/commit/93edd786007d9a2f814f5fef0535846705144161)
189 | 
190 | #### [v0.1.13](https://github.com/koodeau/metawrite/compare/v0.1.12...v0.1.13)
191 | 
192 | > 15 February 2022
193 | 
194 | - Fix: resolved unused exports from package.json [`c65ac59`](https://github.com/koodeau/metawrite/commit/c65ac5955b646bf1fd2a8699440c383017bc8fe2)
195 | 
196 | #### [v0.1.12](https://github.com/koodeau/metawrite/compare/v0.1.11...v0.1.12)
197 | 
198 | > 14 February 2022
199 | 
200 | #### [v0.1.11](https://github.com/koodeau/metawrite/compare/v0.1.10...v0.1.11)
201 | 
202 | > 14 February 2022
203 | 
204 | - experimental changes [`b720826`](https://github.com/koodeau/metawrite/commit/b720826b9f24898fb9f567b952dcaf76be452331)
205 | 
206 | #### [v0.1.10](https://github.com/koodeau/metawrite/compare/v0.1.9...v0.1.10)
207 | 
208 | > 14 February 2022
209 | 
210 | - Fix: added types to components and resolved warnings [`4840c54`](https://github.com/koodeau/metawrite/commit/4840c543039e888a3198d042c0370211205471f2)
211 | 
212 | #### [v0.1.9](https://github.com/koodeau/metawrite/compare/v0.1.8...v0.1.9)
213 | 
214 | > 14 February 2022
215 | 
216 | - experimentsl fixes for Appwrite [`207e179`](https://github.com/koodeau/metawrite/commit/207e179f98d3374ced550198936711a37222f5ed)
217 | 
218 | #### [v0.1.8](https://github.com/koodeau/metawrite/compare/v0.1.7...v0.1.8)
219 | 
220 | > 14 February 2022
221 | 
222 | - Fix: revert d.ts and improved package.json [`0d4d0b2`](https://github.com/koodeau/metawrite/commit/0d4d0b28b23df28f13eaca8efb8252288d609c25)
223 | - improved workflow [`b68f194`](https://github.com/koodeau/metawrite/commit/b68f194f92001fb5460e459db3d0adb7bbabe67c)
224 | 
225 | #### [v0.1.7](https://github.com/koodeau/metawrite/compare/v0.1.6...v0.1.7)
226 | 
227 | > 14 February 2022
228 | 
229 | - Fix: removed conflicting SDK export [`cc74e1d`](https://github.com/koodeau/metawrite/commit/cc74e1d78ac2214c34482170c1b6b0840935a304)
230 | 
231 | #### [v0.1.6](https://github.com/koodeau/metawrite/compare/v0.1.5...v0.1.6)
232 | 
233 | > 14 February 2022
234 | 
235 | - Fix: corrected type definitions [`a219b4f`](https://github.com/koodeau/metawrite/commit/a219b4fbe9430e672cd73482af984d337a0878de)
236 | 
237 | #### [v0.1.5](https://github.com/koodeau/metawrite/compare/v0.1.4...v0.1.5)
238 | 
239 | > 14 February 2022
240 | 
241 | #### [v0.1.4](https://github.com/koodeau/metawrite/compare/v0.1.3...v0.1.4)
242 | 
243 | > 14 February 2022
244 | 
245 | - experimental version [`b87af5c`](https://github.com/koodeau/metawrite/commit/b87af5c7199de46d39b194374f20f90ec508f1ff)
246 | 
247 | #### [v0.1.3](https://github.com/koodeau/metawrite/compare/v0.1.2...v0.1.3)
248 | 
249 | > 14 February 2022
250 | 
251 | - used prettier and fixed npm publish dir [`2076ad3`](https://github.com/koodeau/metawrite/commit/2076ad30009506ce88cd2c81248a78b485fe6af2)
252 | 
253 | #### [v0.1.2](https://github.com/koodeau/metawrite/compare/v0.1.1...v0.1.2)
254 | 
255 | > 14 February 2022
256 | 
257 | - Fix: added file extension for sdk export [`362c88c`](https://github.com/koodeau/metawrite/commit/362c88c180a060bf6fcfb8aa39f450459c31860e)
258 | 
259 | #### [v0.1.1](https://github.com/koodeau/metawrite/compare/v0.1.0...v0.1.1)
260 | 
261 | > 14 February 2022
262 | 
263 | - deleted unused workflow [`e5de6ee`](https://github.com/koodeau/metawrite/commit/e5de6ee77fb94e5bef47694b5b25a1d75ebe4488)
264 | - Fixed: package svelte entrypoint [`54466a1`](https://github.com/koodeau/metawrite/commit/54466a12aa7d4454b502b58a8d759012c2041944)
265 | 
266 | #### [v0.1.0](https://github.com/koodeau/metawrite/compare/v0.0.4...v0.1.0)
267 | 
268 | > 14 February 2022
269 | 
270 | - Release v0.1.0 [`9439a1c`](https://github.com/koodeau/metawrite/commit/9439a1c675f9a0be115dc6af0bd5bcd141064d81)
271 | - Fixed: RecoverPassword component documentation [`6771781`](https://github.com/koodeau/metawrite/commit/67717819582ec3a8903d52debfd717ee86c91bf4)
272 | - Breaking Change: fixed package entry exports. Bug Fix [`2dc563f`](https://github.com/koodeau/metawrite/commit/2dc563fe01bfa947aca3e5cfcd6c5a537570f3c0)
273 | 
274 | #### [v0.0.4](https://github.com/koodeau/metawrite/compare/v0.0.3...v0.0.4)
275 | 
276 | > 13 February 2022
277 | 
278 | - modified workflows [`4fd7dc7`](https://github.com/koodeau/metawrite/commit/4fd7dc7149b9b57a55d89410b5b1f66cb9ba160c)
279 | 
280 | #### [v0.0.3](https://github.com/koodeau/metawrite/compare/v0.0.2...v0.0.3)
281 | 
282 | > 13 February 2022
283 | 
284 | - added templates and workflows [`636797a`](https://github.com/koodeau/metawrite/commit/636797a9c25f9f4ad8658652030f87ef7da69f63)
285 | 
286 | #### [v0.0.2](https://github.com/koodeau/metawrite/compare/v0.0.1...v0.0.2)
287 | 
288 | > 13 February 2022
289 | 
290 | - added badges [`0da0ee4`](https://github.com/koodeau/metawrite/commit/0da0ee47f088252318e5d3bea95e26d2fc5e8f73)
291 | - fixes for readme [`7d71a9a`](https://github.com/koodeau/metawrite/commit/7d71a9a06898e0f5730879cead149ff61edcad81)
292 | - fixes for readme [`7508252`](https://github.com/koodeau/metawrite/commit/75082528db8f1914e53b29cecc3f7f527eeb1381)
293 | 
294 | #### [v0.0.1](https://github.com/koodeau/metawrite/compare/v0.0.0...v0.0.1)
295 | 
296 | > 13 February 2022
297 | 
298 | - corrected tests [`8f4bf3a`](https://github.com/koodeau/metawrite/commit/8f4bf3a92e39910d6c01c09d988a7b01e65135d7)
299 | 
300 | #### v0.0.0
301 | 
302 | > 13 February 2022
303 | 
304 | - fixed node engine and added package-lock for ci [`2ce3506`](https://github.com/koodeau/metawrite/commit/2ce350690efded7e28920c623d048b31953c2c90)
305 | - init [`5da4fdb`](https://github.com/koodeau/metawrite/commit/5da4fdb204c4f425d0e234529398efe0c8565698)
306 | - documented all components [`a6f8874`](https://github.com/koodeau/metawrite/commit/a6f8874804697267bc2c57284f699299824fbb48)
307 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
   1 | <p align="center">
   2 |   <img alt="Metawrite" src="static/logo.svg" />
   3 | </p>
   4 | 
   5 | <a href="https://www.npmjs.com/package/metawrite">
   6 |   <img src="https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white" />
   7 | </a>
   8 | 
   9 | <a href="https://classic.yarnpkg.com/en/package/metawrite">
  10 |   <img src="https://img.shields.io/badge/Yarn-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white" />
  11 | </a>
  12 | 
  13 | # Support Us 
  14 | 
  15 | **Get free $100 credits on DigitalOcean:**
  16 | 
  17 | <a href="https://do.koodeau.com">
  18 |   <img src="https://img.shields.io/badge/Digital_Ocean-0080FF?style=for-the-badge&logo=DigitalOcean&logoColor=white" />
  19 | </a>
  20 | 
  21 | **Join our Discord:**
  22 | 
  23 | <a href="https://discord.gg/n3WZxtbkCm">
  24 |   <img src="https://img.shields.io/badge/Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white" />
  25 | </a>
  26 | 
  27 | ---
  28 | 
  29 | [![npm Package](https://github.com/koodeau/metawrite/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/koodeau/metawrite/actions/workflows/npm-publish.yml) 
  30 | 
  31 | Metawrite is [Appwrite](https://appwrite.io/) SDK with ready to go components for `Svelte` / `SvelteKit`
  32 | 
  33 | This package is maintained by [Increasio](https://increas.io).
  34 | 
  35 | > Note: versions `x.x.n` means some minor changes to package documentation or typings.
  36 | > 
  37 | > versions `x.n.x` might include some minor breaking changes. See [Release Notes](https://github.com/koodeau/metawrite/blob/main/CHANGELOG.md).
  38 | > 
  39 | > versions `n.x.x` might include some major breaking changes. See [Release Notes](https://github.com/koodeau/metawrite/blob/main/CHANGELOG.md).
  40 | 
  41 | ## Important info
  42 | 
  43 | 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).
  44 | 
  45 | > Please consider using [template](https://github.com/koodeau/sveltekit-metawrite), this is temporary 
  46 | 
  47 | # Documentation
  48 | 
  49 | ### Installation
  50 | 
  51 | Using NPM:
  52 | 
  53 | ```bash
  54 | npm install metawrite
  55 | ```
  56 | 
  57 | Using Yarn:
  58 | 
  59 | ```bash
  60 | yarn add metawrite
  61 | ```
  62 | 
  63 | # Table of contents
  64 | 
  65 | - [Support Us](#support-us)
  66 | 	- [Important info](#important-info)
  67 | - [Documentation](#documentation)
  68 | 		- [Installation](#installation)
  69 | - [Table of contents](#table-of-contents)
  70 | - [Usage](#usage)
  71 | 	- [Initialize](#initialize)
  72 | 		- [Properties](#properties)
  73 | 	- [Create user](#create-user)
  74 | 		- [Directives](#directives)
  75 | 			- [Arguments](#arguments)
  76 | 		- [Events](#events)
  77 | 			- [Arguments](#arguments-1)
  78 | 			- [Arguments](#arguments-2)
  79 | 	- [Login via Email](#login-via-email)
  80 | 		- [Directives](#directives-1)
  81 | 			- [Arguments](#arguments-3)
  82 | 		- [Events](#events-1)
  83 | 			- [Arguments](#arguments-4)
  84 | 			- [Arguments](#arguments-5)
  85 | 	- [Login via OAuth2](#login-via-oauth2)
  86 | 		- [Properties](#properties-1)
  87 | 		- [Directives](#directives-2)
  88 | 	- [Get user](#get-user)
  89 | 		- [Directives](#directives-3)
  90 | 	- [Get Collection](#get-collection)
  91 | 		- [Properties](#properties-2)
  92 | 		- [Directives](#directives-4)
  93 | 			- [Arguments](#arguments-6)
  94 | 	- [Get Document](#get-document)
  95 | 		- [Properties](#properties-3)
  96 | 		- [Directives](#directives-5)
  97 | 			- [Arguments](#arguments-7)
  98 | 		- [Events](#events-2)
  99 | - [API](#api)
 100 | 	- [Account](#account)
 101 | 		- [`<User />`](#user-)
 102 | 			- [Slots](#slots)
 103 | 			- [Directives](#directives-6)
 104 | 			- [Events](#events-3)
 105 | 			- [Example](#example)
 106 | 		- [`<Create />`](#create-)
 107 | 			- [Directives](#directives-7)
 108 | 			- [Events](#events-4)
 109 | 			- [Example](#example-1)
 110 | 		- [`<Preferences />`](#preferences-)
 111 | 			- [Slots](#slots-1)
 112 | 			- [Directives](#directives-8)
 113 | 			- [Events](#events-5)
 114 | 			- [Example](#example-2)
 115 | 		- [`<RecoverPassword />`](#recoverpassword-)
 116 | 			- [Directives](#directives-9)
 117 | 			- [Events](#events-6)
 118 | 			- [Example](#example-3)
 119 | 		- [`<Update />`](#update-)
 120 | 			- [Directives](#directives-10)
 121 | 			- [Events](#events-7)
 122 | 			- [Example](#example-4)
 123 | 		- [`<Verification />`](#verification-)
 124 | 			- [Directives](#directives-11)
 125 | 			- [Events](#events-8)
 126 | 			- [Example](#example-5)
 127 | 	- [Auth](#auth)
 128 | 		- [`<AuthEmail />`](#authemail-)
 129 | 			- [Slots](#slots-2)
 130 | 			- [Directives](#directives-12)
 131 | 			- [Events](#events-9)
 132 | 			- [Example](#example-6)
 133 | 		- [`<AuthOAuth2 />`](#authoauth2-)
 134 | 			- [Properties](#properties-4)
 135 | 			- [Example](#example-7)
 136 | 		- [`<CreateAnonymousSession />`](#createanonymoussession-)
 137 | 			- [Directives](#directives-13)
 138 | 			- [Example](#example-8)
 139 | 		- [`<CreateJWT />`](#createjwt-)
 140 | 			- [Directives](#directives-14)
 141 | 			- [Example](#example-9)
 142 | 		- [`<MagicURL />`](#magicurl-)
 143 | 			- [Directives](#directives-15)
 144 | 			- [Example](#example-10)
 145 | 	- [Avatars](#avatars)
 146 | 		- [`<Browser />`](#browser-)
 147 | 			- [Arguments](#arguments-8)
 148 | 			- [Directives](#directives-16)
 149 | 			- [Example](#example-11)
 150 | 		- [`<CreditCard />`](#creditcard-)
 151 | 			- [Arguments](#arguments-9)
 152 | 			- [Directives](#directives-17)
 153 | 			- [Example](#example-12)
 154 | 		- [`<Favicon />`](#favicon-)
 155 | 			- [Arguments](#arguments-10)
 156 | 			- [Directives](#directives-18)
 157 | 		- [`<Flag />`](#flag-)
 158 | 			- [Arguments](#arguments-11)
 159 | 			- [Directives](#directives-19)
 160 | 			- [Example](#example-13)
 161 | 		- [`<Image />`](#image-)
 162 | 			- [Arguments](#arguments-12)
 163 | 			- [Directives](#directives-20)
 164 | 			- [Example](#example-14)
 165 | 		- [`<QR />`](#qr-)
 166 | 			- [Arguments](#arguments-13)
 167 | 			- [Directives](#directives-21)
 168 | 			- [Example](#example-15)
 169 | 	- [Database](#database)
 170 | 		- [`<Collection />`](#collection-)
 171 | 			- [Arguments](#arguments-14)
 172 | 			- [Slots](#slots-3)
 173 | 			- [Directives](#directives-22)
 174 | 			- [Example](#example-16)
 175 | 		- [`<Document />`](#document-)
 176 | 			- [Arguments](#arguments-15)
 177 | 			- [Slots](#slots-4)
 178 | 			- [Directives](#directives-23)
 179 | 			- [Example](#example-17)
 180 | 	- [Realtime](#realtime)
 181 | 			- [Arguments](#arguments-16)
 182 | 			- [Directives](#directives-24)
 183 | 			- [Example](#example-18)
 184 | 	- [Storage](#storage)
 185 | 		- [`<Storage />`](#storage-)
 186 | 			- [Directives](#directives-25)
 187 | 			- [Example](#example-19)
 188 | 		- [`<FileList />`](#filelist-)
 189 | 			- [Arguments](#arguments-17)
 190 | 			- [Slots](#slots-5)
 191 | 			- [Directives](#directives-26)
 192 | 			- [Example](#example-20)
 193 | 		- [`<File />`](#file-)
 194 | 			- [Arguments](#arguments-18)
 195 | 			- [Directives](#directives-27)
 196 | 			- [Example](#example-21)
 197 | 	- [Functions](#functions)
 198 | 		- [`<Function />`](#function-)
 199 | 			- [Directives](#directives-28)
 200 | 			- [Slots](#slots-6)
 201 | 			- [Example](#example-22)
 202 | 	- [Locale](#locale)
 203 | 		- [`<Continents />`](#continents-)
 204 | 			- [Directives](#directives-29)
 205 | 			- [Slots](#slots-7)
 206 | 			- [Example](#example-23)
 207 | 		- [`<Countries />`](#countries-)
 208 | 			- [Arguments](#arguments-19)
 209 | 			- [Slots](#slots-8)
 210 | 			- [Directives](#directives-30)
 211 | 			- [Example](#example-24)
 212 | 		- [`<Currencies />`](#currencies-)
 213 | 			- [Slots](#slots-9)
 214 | 			- [Directives](#directives-31)
 215 | 			- [Example](#example-25)
 216 | 		- [`<Languages />`](#languages-)
 217 | 			- [Slots](#slots-10)
 218 | 			- [Directives](#directives-32)
 219 | 			- [Example](#example-26)
 220 | 		- [`<Locale />`](#locale-)
 221 | 			- [Slots](#slots-11)
 222 | 			- [Directives](#directives-33)
 223 | 			- [Example](#example-27)
 224 | 		- [`<PhoneCodes />`](#phonecodes-)
 225 | 			- [Slots](#slots-12)
 226 | 			- [Directives](#directives-34)
 227 | 			- [Example](#example-28)
 228 | - [Stack](#stack)
 229 | 
 230 | # Usage
 231 | 
 232 | > You need a running instance of Appwrite to use this library. Go to https://appwrite.io/docs/installation for more instructions.
 233 | 
 234 | **Psuedo Example**
 235 | 
 236 | Handle multiple levels of async relational data (and their loading & fallback states) entirely from the Svelte markup.
 237 | 
 238 | ```svelte
 239 | <!-- 1. 💪 Appwrite App -->
 240 | <Appwrite {...config}>
 241 | 
 242 |     <!-- 2. 😀 Get the current user if logged in -->
 243 |     <User let:user>
 244 | 
 245 |         <h1>Hello {user.name}!</h1>
 246 | 
 247 |         <!-- 3. 📚 Get all the documents from a collection -->
 248 |         <Collection collectionId="5f56a3035a01f" let:documents>
 249 |             You have {documents.length} documents.
 250 | 
 251 |             {#each documents as document}
 252 | 
 253 |                 <!-- 4. 📜 Get a document -->
 254 |                 <Document collectionId="5f56a3035a01f" documentId={document.$id} {document}>
 255 |                     Title: {document.title}
 256 |                     Text: {document.text}
 257 | ...
 258 | ```
 259 | 
 260 | ## Initialize
 261 | 
 262 | Must be initialised and wrap every `metawrite` component.
 263 | 
 264 | ```svelte
 265 | <script>
 266 | 	import { Appwrite } from 'metawrite';
 267 | 
 268 | 	const config = {
 269 | 		endpoint: 'http://localhost/v1',
 270 | 		project: 'demo',
 271 | 		locale: 'fr'
 272 | 	};
 273 | </script>
 274 | 
 275 | <Appwrite {...config}>...</Appwrite>
 276 | ```
 277 | 
 278 | ### Properties
 279 | 
 280 | | Name       | Description                                     |
 281 | | ---------- | ----------------------------------------------- |
 282 | | `endpoint` | Your Appwrite endpoint. `@type - {string}`      |
 283 | | `project`  | Your project ID. `@type - {string}`             |
 284 | | `locale`   | _Optional_ The users locale. `@type - {string}` |
 285 | | `realtime`   | _Optional_ Set Custom realtime endpoint. By default the same as `endpoint`. `@type - {string}` |
 286 | 
 287 | ## Create user
 288 | 
 289 | Registers a new account.
 290 | 
 291 | ```svelte
 292 | <script>
 293 | 	import { Create } from 'metawrite';
 294 | 
 295 | 	let email = '';
 296 | 	let password = '';
 297 | 	let name = '';
 298 | 
 299 | 	const success = (e) => {
 300 | 		//success callback
 301 | 		// `e` contains the user object
 302 | 	};
 303 | 
 304 | 	const failure = (e) => {
 305 | 		//failure callback
 306 | 	};
 307 | </script>
 308 | 
 309 | <Create let:actions on:success on:failure>
 310 | 	<input type="text" bind:value={email} />
 311 | 	<input type="password" bind:value={password} />
 312 | 	<input type="text" bind:value={name} />
 313 | 	<button on:click={actions.create(email, password, name)}>Register</button>
 314 | </Create>
 315 | ```
 316 | 
 317 | ### Directives
 318 | 
 319 | **let:actions** `object`
 320 | 
 321 | Object with function.
 322 | 
 323 | #### Arguments
 324 | 
 325 | | Name                            | Description                              |
 326 | | ------------------------------- | ---------------------------------------- |
 327 | | `create(email, password, name)` | Registers a new user. `@type - {string}` |
 328 | 
 329 | ### Events
 330 | 
 331 | **on:success**
 332 | 
 333 | Triggers on successful register.
 334 | 
 335 | #### Arguments
 336 | 
 337 | | Name       | Description |
 338 | | ---------- | ----------- |
 339 | | `response` | Response    |
 340 | 
 341 | **on:failure**
 342 | 
 343 | Triggers on failed register.
 344 | 
 345 | #### Arguments
 346 | 
 347 | | Name       | Description |
 348 | | ---------- | ----------- |
 349 | | `response` | Response    |
 350 | 
 351 | ## Login via Email
 352 | 
 353 | Login via email and password.
 354 | 
 355 | ```svelte
 356 | <script>
 357 | 	import { AuthEmail } from 'metawrite';
 358 | 
 359 | 	let email = '';
 360 | 	let password = '';
 361 | 
 362 | 	const success = (e) => {
 363 | 		//success callback
 364 | 		// `e` contains the user object
 365 | 	};
 366 | 
 367 | 	const failure = (e) => {
 368 | 		//failure callback
 369 | 	};
 370 | </script>
 371 | 
 372 | <AuthEmail let:authorize on:success on:failure>
 373 | 	<input type="text" bind:value={email} />
 374 | 	<input type="text" bind:value={password} />
 375 | 	<button on:click={authorize(email, password)}>Login</button>
 376 | </AuthEmail>
 377 | ```
 378 | 
 379 | ### Directives
 380 | 
 381 | **let:authorize** `function`
 382 | 
 383 | Initiates login.
 384 | 
 385 | #### Arguments
 386 | 
 387 | | Name       | Description                  |
 388 | | ---------- | ---------------------------- |
 389 | | `email`    | E-Mail. `@type - {string}`   |
 390 | | `password` | Password. `@type - {string}` |
 391 | 
 392 | ### Events
 393 | 
 394 | **on:success**
 395 | 
 396 | Triggers on successful login.
 397 | 
 398 | #### Arguments
 399 | 
 400 | | Name    | Description                |
 401 | | ------- | -------------------------- |
 402 | | `email` | E-Mail. `@type - {string}` |
 403 | 
 404 | **on:failure**
 405 | 
 406 | Triggers on failed login.
 407 | 
 408 | #### Arguments
 409 | 
 410 | | Name    | Description   |
 411 | | ------- | ------------- |
 412 | | `error` | Error object. |
 413 | 
 414 | ## Login via OAuth2
 415 | 
 416 | Login via an OAuth2 provider.
 417 | 
 418 | ```svelte
 419 | <script>
 420 | 	import { AuthOAuth2 } from 'metawrite';
 421 | </script>
 422 | 
 423 | <AuthOAuth2
 424 | 	authProvider="google"
 425 | 	success="http://localhost:3000?success"
 426 | 	failure="http://localhost:3000?failure"
 427 | 	let:authorize
 428 | >
 429 | 	<button on:click={authorize}>Login Google</button>
 430 | </AuthOAuth2>
 431 | ```
 432 | 
 433 | ### Properties
 434 | 
 435 | | Name       | Description                         |
 436 | | ---------- | ----------------------------------- |
 437 | | `authProvider` | OAuth2 provider. `@type - {string}` |
 438 | | `success`  | Success url. `@type - {string}`     |
 439 | | `failure`  | Failure url. `@type - {string}`     |
 440 | 
 441 | ### Directives
 442 | 
 443 | **let:authorize** `function`
 444 | 
 445 | ## Get user
 446 | 
 447 | Requests current user to check if logged in.
 448 | 
 449 | ```svelte
 450 | <script>
 451 | 	import { User } from 'metawrite';
 452 | </script>
 453 | 
 454 | <User let:user>
 455 | 	<h1>Hello {user.name}!</h1>
 456 | 	<div>{user.email}</div>
 457 | 
 458 | 	<div slot="error">You are not logged in!</div>
 459 | </User>
 460 | ```
 461 | 
 462 | ### Directives
 463 | 
 464 | **let:user** `object`
 465 | 
 466 | Get currently logged in user data.
 467 | 
 468 | ## Get Collection
 469 | 
 470 | Get a list of all the documents from a collection.
 471 | 
 472 | ```svelte
 473 | <script>
 474 | 	import { Collection } from 'metawrite';
 475 | </script>
 476 | 
 477 | <Collection collectionId="5f56a3035a01f" let:documents>
 478 | 	You have {documents.length} documents.
 479 | </Collection>
 480 | ```
 481 | 
 482 | ### Properties
 483 | 
 484 | | Name           | Description                                                            |
 485 | | -------------- | ---------------------------------------------------------------------- |
 486 | | `collectionId` | Collection unique ID. `@type - {string}`                               |
 487 | | _additional_   | same as [here](https://appwrite.io/docs/client/database#listDocuments) |
 488 | 
 489 | ### Directives
 490 | 
 491 | **let:documents** `array`
 492 | 
 493 | Array of documents.
 494 | 
 495 | **let:actions** `object`
 496 | 
 497 | Object with function.
 498 | 
 499 | #### Arguments
 500 | 
 501 | | Name                        | Description                                                                                                                                        |
 502 | | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
 503 | | `reload()`                  | Re-fetch collection.                                                                                                                               |
 504 | | `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}` |
 505 | 
 506 | ## Get Document
 507 | 
 508 | Get a document. If you pass the `document` property with data from <Collection />, there wont be any data requested.
 509 | 
 510 | ```svelte
 511 | <script>
 512 | 	import { Document } from 'metawrite';
 513 | </script>
 514 | 
 515 | <Document documentId="5f56a3asda01f" let:document>
 516 | 	Title: {document.title}
 517 | 	Text: {document.text}
 518 | </Document>
 519 | ```
 520 | 
 521 | ### Properties
 522 | 
 523 | | Name           | Description                              |
 524 | | -------------- | ---------------------------------------- |
 525 | | `documentId`   | Document unique ID. `@type - {string}`   |
 526 | | `collectionId` | Collection unique ID. `@type - {string}` |
 527 | | or             |                                          |
 528 | | `document`     | Document passed from `<Collection />`    |
 529 | 
 530 | ### Directives
 531 | 
 532 | **let:document** `object`
 533 | 
 534 | A JSON object with the document data.
 535 | 
 536 | **let:actions** `object`
 537 | 
 538 | Object with function.
 539 | 
 540 | #### Arguments
 541 | 
 542 | | Name           | Description                                       |
 543 | | -------------- | ------------------------------------------------- |
 544 | | `update(data)` | Update the document. `data` is `@type - {string}` |
 545 | | `remove()`     | Deletes the document.                             |
 546 | | `reload()`     | Re-fetch document.                                |
 547 | 
 548 | ### Events
 549 | 
 550 | **on:change**
 551 | 
 552 | Triggers on update or remove login.
 553 | 
 554 | # API
 555 | 
 556 | ## Account
 557 | 
 558 | The Account components allow you to manage a user account.
 559 | 
 560 | ### `<User />`
 561 | 
 562 | #### Slots
 563 | 
 564 | - **loading**
 565 | - **error**
 566 | 
 567 | #### Directives
 568 | 
 569 | **let:actions**
 570 | | Name | Description |
 571 | | --- | --- |
 572 | | `reload()` | Reload. |
 573 | | `logout()` | Logout current session. |
 574 | | `logoutAll()` | Logout from all session. |
 575 | | `logoutFrom(session)` | Logout from specific session. `session` is `@type - {string}` |
 576 | 
 577 | - **let:user** `object`
 578 | - **let:error**
 579 | 
 580 | #### Events
 581 | 
 582 | - **on:success** On user fetch success.
 583 | - **on:failure** On user fetch failure.
 584 | - **on:successLogout** On `logout` success.
 585 | - **on:failureLogout** On `logout` failure.
 586 | - **on:successLogoutFrom** On `logoutFrom` success.
 587 | - **on:failureLogoutFrom** On `logoutFrom` failure.
 588 | - **on:successLogoutAll** On `logoutAll` success.
 589 | - **on:failureLogoutAll** On `logoutAll` failure.
 590 | 
 591 | #### Example
 592 | 
 593 | ```svelte
 594 | <script>
 595 | 	import { User } from 'metawrite';
 596 | </script>
 597 | 
 598 | <User let:actions let:user>
 599 | 	<button on:click={actions.reload()}>Reload user data</button>
 600 | 	<button on:click={actions.get()}>Get logged in user data</button>
 601 | 	<button on:click={actions.logout()}>Log out from current session</button>
 602 | 	<button on:click={actions.logoutFrom('sessionId')}>Log out from specific session</button>
 603 | 	<button on:click={actions.logoutAll()}>Log out from all sessions</button>
 604 | 
 605 | 	<!-- If logged in -->
 606 | 	<p>Hi, {user.name}</p>
 607 | </User>
 608 | ```
 609 | 
 610 | ### `<Create />`
 611 | 
 612 | #### Directives
 613 | 
 614 | **let:actions**
 615 | | Name | Description |
 616 | | --- | --- |
 617 | | `create(email, password, name)` | Creates a user. `email` and `password` are required - `@type - {string}`. `name` is _optional_ - `@type - {string}` |
 618 | 
 619 | #### Events
 620 | 
 621 | - **on:success** On `create` success.
 622 | - **on:failure** On `create` failure.
 623 | 
 624 | #### Example
 625 | 
 626 | ```svelte
 627 | <script>
 628 | 	import { Create } from 'metawrite';
 629 | 
 630 | 	let name,
 631 | 		email,
 632 | 		password = '';
 633 | 
 634 | 	const success = (e) => {
 635 | 		// success callback
 636 | 		// `e` contains the user object
 637 | 	};
 638 | 
 639 | 	const failure = (e) => {
 640 | 		// failure callback
 641 | 	};
 642 | </script>
 643 | 
 644 | <Create let:actions on:success on:failure>
 645 | 	<input type="text" name="name" placeholder="name" bind:value={name} />
 646 | 	<input type="text" name="email" placeholder="email" bind:value={email} />
 647 | 	<input type="password" name="password" placeholder="password" bind:value={password} />
 648 | 	<button on:click={actions.create(name, email, password)}>Create Account</button>
 649 | </Create>
 650 | ```
 651 | 
 652 | ### `<Preferences />`
 653 | 
 654 | #### Slots
 655 | 
 656 | - **loading**
 657 | - **error**
 658 | 
 659 | #### Directives
 660 | 
 661 | **let:actions**
 662 | | Name | Description |
 663 | | --- | --- |
 664 | | `reload()` | Reloads preferences. |
 665 | | `update(prefs)` | Update preferences. `prefs` - `@type - {object}` |
 666 | 
 667 | #### Events
 668 | 
 669 | - **on:success** On init and `reload` success.
 670 | - **on:failure** On init and `reload` failure.
 671 | - **on:successUpdate** On `update` success.
 672 | - **on:failureUpdate** On `update` failure.
 673 | 
 674 | #### Example
 675 | 
 676 | ```svelte
 677 | <script>
 678 | 	import { Preferences } from 'metawrite';
 679 | 
 680 | 	let prefs = {
 681 | 		// You can pass only the specific settings you wish to update.
 682 | 	};
 683 | </script>
 684 | 
 685 | <Preferences let:actions>
 686 | 	<button
 687 | 		on:click={() => {
 688 | 			actions.update(prefs);
 689 | 			actions.reload();
 690 | 		}}>Update Preferences</button
 691 | 	>
 692 | </Preferences>
 693 | ```
 694 | 
 695 | ### `<RecoverPassword />`
 696 | 
 697 | #### Directives
 698 | 
 699 | **let:actions**
 700 | | Name | Description |
 701 | | --- | --- |
 702 | | `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. |
 703 | | `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}`. |
 704 | 
 705 | #### Events
 706 | 
 707 | - **on:successRecover** On init and `reload` success.
 708 | - **on:failureRecover** On init and `reload` failure.
 709 | - **on:successComplete** On `update` success.
 710 | - **on:failureComplete** On `update` failure.
 711 | 
 712 | #### Example
 713 | 
 714 | ```svelte
 715 | <script>
 716 |     import { RecoverPassword } from "metawrite";
 717 | 
 718 |     const url = "http://localhost:3000/reset-password"; // URL that will point to the next step.
 719 |     let email = '';
 720 | 
 721 |     const successRecover = e => {
 722 |     //success callback
 723 |     // `e` contains the user object
 724 |   };
 725 | 
 726 |   const failureRecover = e => {
 727 |     //failure callback
 728 |   }
 729 | </script>
 730 | 
 731 | <!-- localhost/forgot-password -->
 732 | <RecoverPassword let:actions on:successRecover on:failureRecover>
 733 |     <input name="email" type="text" bind:value={email, url} placeholder="Email" />
 734 |     <button on:click{actions.recover(email)}>Recover Password</button>
 735 | </RecoverPassword>
 736 | 
 737 | <!-- Then on localhost/reset-password  -->
 738 | <script>
 739 |     import { RecoverPassword } from "metawrite";
 740 | 
 741 |     let password, passwordAgain = '';
 742 | 
 743 |     const successComplete = e => {
 744 |     //success callback
 745 |     // `e` contains the user object
 746 |   };
 747 | 
 748 |   const failureComplete = e => {
 749 |     //failure callback
 750 |   }
 751 | </script>
 752 | 
 753 | <RecoverPassword let:actions on:successComplete on:failureComplete>
 754 |     <input type="password" name="password" bind:value{password} placeholder="Password" />
 755 |     <input type="password" name="password" bind:value{passwordAgain} placeholder="Confirm Password" />
 756 |     <button on:click{actions.complete(password, passwordAgain)}>Set New Password</button>
 757 | </RecoverPassword>
 758 | ```
 759 | 
 760 | ### `<Update />`
 761 | 
 762 | #### Directives
 763 | 
 764 | **let:actions**
 765 | | Name | Description |
 766 | | --- | --- |
 767 | | `name(name)` | Update name. All fields are required. `@type - {string}` |
 768 | | `email(email, password)` | Update email. All fields are required. `@type - {string}` |
 769 | | `password(password, oldPassword)` | Update password. All fields are required. `@type - {string}` |
 770 | 
 771 | #### Events
 772 | 
 773 | - **on:successName** On `name` success.
 774 | - **on:failureName** On `name` failure.
 775 | - **on:successEmail** On `email` success.
 776 | - **on:failureEmail** On `email` failure.
 777 | - **on:successPassword** On `password` success.
 778 | - **on:failurePassword** On `password` failure.
 779 | 
 780 | #### Example
 781 | 
 782 | ```svelte
 783 | <script>
 784 | 	import { Update } from 'metawrite';
 785 | 
 786 | 	let name,
 787 | 		email,
 788 | 		password,
 789 | 		newPassword,
 790 | 		oldPassword = '';
 791 | </script>
 792 | 
 793 | <Update let:actions>
 794 | 	<button on:click={actions.name(name)}>This updates name</button>
 795 | 	<button on:click={actions.email(email, password)}>This updates email</button>
 796 | 	<button on:click={actions.password(newPassword, oldPassword)}>This updates password</button>
 797 | </Update>
 798 | ```
 799 | 
 800 | ### `<Verification />`
 801 | 
 802 | Creates and automatically validates user email verification.
 803 | 
 804 | - `url` of type string for action `create` should be where your app is hosted or `localhost`.
 805 | - For `update` action you don't need to pass anything, the process is automated.
 806 | 
 807 | #### Directives
 808 | 
 809 | **let:actions**
 810 | | Name | Description |
 811 | | --- | --- |
 812 | | `create(url)` | Create Verification. `url` is what URL used to create verification link sent to your email inbox. `@type - {string}` |
 813 | | `update(user, secret)` | Complete Verification. `user` and `secret` are set automatically by `metawrite`. |
 814 | 
 815 | #### Events
 816 | 
 817 | - **on:successCreate** On `create` success.
 818 | - **on:failureCreate** On `create` failure.
 819 | - **on:successComplete** On `complete` success.
 820 | - **on:failureComplete** On `complete` failure.
 821 | 
 822 | #### Example
 823 | 
 824 | ```svelte
 825 | <script>
 826 | 	import { Verification } from 'metawrite';
 827 | 
 828 | 	const url = window.location.href;
 829 | </script>
 830 | 
 831 | <Verification let:actions>
 832 | 	<button on:click={actions.create(url)} />
 833 | 	<button on:click={actions.update()}>Update email verification status</button>
 834 | </Verification>
 835 | ```
 836 | 
 837 | ## Auth
 838 | 
 839 | The Auth components allow you to authenticate a user account.
 840 | 
 841 | ### `<AuthEmail />`
 842 | 
 843 | #### Slots
 844 | 
 845 | - **loading**
 846 | - **success**
 847 | - **error**
 848 | 
 849 | #### Directives
 850 | 
 851 | - **let:authorize(email, password)**
 852 | - **let:user**
 853 | - **let:error**
 854 | 
 855 | #### Events
 856 | 
 857 | - **on:success** On `authorize` success.
 858 | - **on:failure** On `authorize` failure.
 859 | 
 860 | #### Example
 861 | 
 862 | ```svelte
 863 | <script>
 864 | 	import { AuthEmail } from 'metawrite';
 865 | 
 866 | 	let email = '';
 867 | 	let password = '';
 868 | 
 869 | 	const success = (e) => {
 870 | 		//success callback
 871 | 		// `e` contains the user object
 872 | 	};
 873 | 
 874 | 	const failure = (e) => {
 875 | 		//failure callback
 876 | 	};
 877 | </script>
 878 | 
 879 | <AuthEmail let:authorize on:success on:failure>
 880 | 	<input type="text" bind:value={email} />
 881 | 	<input type="text" bind:value={password} />
 882 | 	<button on:click={authorize(email, password)}>Login</button>
 883 | </AuthEmail>
 884 | ```
 885 | 
 886 | ### `<AuthOAuth2 />`
 887 | 
 888 | #### Properties
 889 | 
 890 | | Name            | Description                         |
 891 | | --------------- | ----------------------------------- |
 892 | | `authProvider`      | OAuth2 provider. `@type - {string}` |
 893 | | `success`       | Success url. `@type - {string}`     |
 894 | | `failure`       | Failure url. `@type - {string}`     |
 895 | | #### Directives |                                     |
 896 | 
 897 | **let:authorize()**
 898 | 
 899 | #### Example
 900 | 
 901 | ```svelte
 902 | <script>
 903 | 	import { AuthOAuth2 } from 'metawrite';
 904 | </script>
 905 | 
 906 | <AuthOAuth2
 907 | 	authProvider="google"
 908 | 	success="http://localhost:3000?success"
 909 | 	failure="http://localhost:3000?failure"
 910 | 	let:authorize
 911 | >
 912 | 	<button on:click={authorize}>Login Google</button>
 913 | </AuthOAuth2>
 914 | ```
 915 | 
 916 | ### `<CreateAnonymousSession />`
 917 | 
 918 | #### Directives
 919 | 
 920 | **let:actions**
 921 | 
 922 | | Name       | Description                |
 923 | | ---------- | -------------------------- |
 924 | | `create()` | Creates anonymous session. |
 925 | 
 926 | #### Example
 927 | 
 928 | ```svelte
 929 | <script>
 930 | 	import { CreateAnonymousSession } from 'metawrite';
 931 | </script>
 932 | 
 933 | <CreateAnonymousSession let:actions>
 934 | 	<button on:click={actions.create}>Create Anonymous Session</button>
 935 | </CreateAnonymousSession>
 936 | ```
 937 | 
 938 | ### `<CreateJWT />`
 939 | 
 940 | Creates JWT token.
 941 | 
 942 | #### Directives
 943 | 
 944 | **let:actions**
 945 | 
 946 | | Name       | Description        |
 947 | | ---------- | ------------------ |
 948 | | `create()` | Creates JWT token. |
 949 | 
 950 | #### Example
 951 | 
 952 | ```svelte
 953 | <script>
 954 | 	import { CreateJWT } from 'metawrite';
 955 | </script>
 956 | 
 957 | <CreateJWT let:actions>
 958 | 	<button on:click={actions.create}>Create JWT token</button>
 959 | </CreateJWT>
 960 | ```
 961 | 
 962 | ### `<MagicURL />`
 963 | 
 964 | #### Directives
 965 | 
 966 | **let:actions**
 967 | 
 968 | | Name                        | Description                                                  |
 969 | | --------------------------- | ------------------------------------------------------------ |
 970 | | `create(sessionId, email, url)` | Creates Magic URL Session. email is required, url is to point on complete step `string`, `sessionId` is not required |
 971 | | `complete()` | Validates and completes Magic URL Session. |
 972 | 
 973 | #### Example 
 974 | 
 975 | ```svelte
 976 | <script>
 977 |     import { MagicURL } from "metawrite";
 978 | 
 979 |     let email = ""
 980 |     const url = "http://localhost:3000/page-to-complete"
 981 | 
 982 | 	const successCreate = (e) => {
 983 | 		console.log(e)
 984 | 	}
 985 | 	const failureCreate = (e) => {
 986 | 		console.log(e)
 987 | 	}
 988 | 	const successComplete = (e) => {
 989 | 		console.log(e)
 990 | 	}
 991 | 	const failureComplete = (e) => {
 992 | 		console.log(e)
 993 | 	}
 994 | </script>
 995 | 
 996 | <MagicURL let:actions on:successCreate on:successComplete on:failureCreate on:failureComplete>
 997 | 		<input type="email" name="email" placeholder="Email" bind:value={email} />
 998 | 		<button on:click={actions.create(email, url)}>Send login link</button>
 999 | 		<button on:click={actions.complete()}>Confirm Login</button>
1000 | </MagicURL>
1001 | ```
1002 | 
1003 | ## Avatars
1004 | 
1005 | The Avatar components aim to help you complete everyday tasks related to your app image, icons, and avatars.
1006 | 
1007 | ### `<Browser />`
1008 | 
1009 | #### Arguments
1010 | 
1011 | - code - _required_ `@type - {string}`
1012 | - width - _optional_ `@type - {number}`
1013 | - height - _optional_ `@type - {string}`
1014 | - quality - _optional_ `@type - {string}`
1015 | 
1016 | #### Directives
1017 | 
1018 | - **let:src** Image link `@type - {URL}`
1019 | 
1020 | #### Example
1021 | 
1022 | ```svelte
1023 | <script>
1024 | 	import { Browser } from 'metawrite';
1025 | </script>
1026 | 
1027 | <Browser code="firefox" let:src>
1028 | 	<img src={String(src)} alt="Browser" />
1029 | </Browser>
1030 | ```
1031 | 
1032 | ### `<CreditCard />`
1033 | 
1034 | #### Arguments
1035 | 
1036 | - code - _required_ `@type - {string}`
1037 | - width - _optional_ `@type - {number}`
1038 | - height - _optional_ `@type - {string}`
1039 | - quality - _optional_ `@type - {string}`
1040 | 
1041 | #### Directives
1042 | 
1043 | - **let:src** Image link `@type - {URL}`
1044 | 
1045 | #### Example
1046 | 
1047 | ```svelte
1048 | <script>
1049 | 	import { CreditCard } from 'metawrite';
1050 | </script>
1051 | 
1052 | <CreditCard code="amex" let:src>
1053 | 	<img src={String(src)} alt="card" />
1054 | </CreditCard>
1055 | ```
1056 | 
1057 | ### `<Favicon />`
1058 | 
1059 | #### Arguments
1060 | 
1061 | - url - _required_ `@type - {string}`
1062 | 
1063 | #### Directives
1064 | 
1065 | - **let:src** Image link `@type - {URL}`
1066 | 
1067 | ```svelte
1068 | <script>
1069 | 	import { Favicon } from 'metawrite';
1070 | 	const url = window.location.href;
1071 | </script>
1072 | 
1073 | <Favicon {url} let:src>
1074 | 	<img src={String(src)} alt="favicon" />
1075 | </Favicon>
1076 | ```
1077 | 
1078 | ### `<Flag />`
1079 | 
1080 | #### Arguments
1081 | 
1082 | - code - _required_ `@type - {string}`
1083 | - width - _optional_ `@type - {number}`
1084 | - height - _optional_ `@type - {string}`
1085 | - quality - _optional_ `@type - {string}`
1086 | 
1087 | #### Directives
1088 | 
1089 | - **let:src** Image link `@type - {URL}`
1090 | 
1091 | #### Example
1092 | 
1093 | ```svelte
1094 | <script>
1095 | 	import { Flag } from 'metawrite';
1096 | </script>
1097 | 
1098 | <Flag code="canada" let:src>
1099 | 	<img src={String(src)} alt="flag" />
1100 | </Flag>
1101 | ```
1102 | 
1103 | ### `<Image />`
1104 | 
1105 | #### Arguments
1106 | 
1107 | - url - _required_ `@type - {string}`
1108 | - width - _optional_ `@type - {number}`
1109 | - height - _optional_ `@type - {number}`
1110 | 
1111 | #### Directives
1112 | 
1113 | - **let:src** Image link `@type - {URL}`
1114 | 
1115 | #### Example
1116 | 
1117 | ```svelte
1118 | <script>
1119 | 	import { Image } from 'metawrite';
1120 | 
1121 | 	let url = 'https://increas.io/';
1122 | 	let width,
1123 | 		height = 100;
1124 | </script>
1125 | 
1126 | <Image {url} {width} {height} let:src>
1127 | 	<img src={String(src)} alt="someImage" />
1128 | </Image>
1129 | ```
1130 | 
1131 | ### `<QR />`
1132 | 
1133 | #### Arguments
1134 | 
1135 | - text - _required_ `@type - {string}`
1136 | - size - _optional_ `@type - {optional}`
1137 | - margin - _optional_ `@type - {number}`
1138 | - download - _optional_ `@type - {boolean}`
1139 | 
1140 | #### Directives
1141 | 
1142 | - **let:src** Image link `@type - {URL}`
1143 | 
1144 | #### Example
1145 | 
1146 | ```svelte
1147 | <script>
1148 | 	import { QR } from 'metawrite';
1149 | 
1150 | 	let text = 'https://increas.io/'; // could be any text
1151 | 	let size = 500;
1152 | 	let margin = 1;
1153 | 	let download = false;
1154 | </script>
1155 | 
1156 | <QR {text} {size} {margin} {download} let:src>
1157 | 	<img src={String(src)} alt="QR Code" />
1158 | </QR>
1159 | ```
1160 | 
1161 | ## Database
1162 | 
1163 | 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.
1164 | 
1165 | ### `<Collection />`
1166 | 
1167 | #### Arguments
1168 | 
1169 | - collectionId - *required* `@type - {string}`
1170 | 
1171 | - cache - *optional*, by default set to false `@type - {boolean}`
1172 | 
1173 |   **query: `@type - {object}`**
1174 | 
1175 | - queries - *optional* `@type - {string[]}`
1176 | 
1177 | - limit - *optional* `@type - {number}`
1178 | 
1179 | - offset - *optional* `@type - {number}`
1180 | 
1181 | - cursor - *optional* `@type - {string}`
1182 | 
1183 | - cursorDirection - *optional* `@type - {string}`
1184 | 
1185 | - orderAttributes - *optional* `@type - {string[]}`
1186 | 
1187 | - orderTypes - *optional* `@type - {string[]}`
1188 | 
1189 | #### Slots
1190 | 
1191 | - **loading**
1192 | - **error**
1193 | 
1194 | #### Directives
1195 | 
1196 | **let:actions**
1197 | | Name | Description |
1198 | | --- | --- |
1199 | | `reload()` | Reload. |
1200 | | `create(documentId, data, read, write)` | Creates a Document. `data` - `@type - {string}`.<br /> `read`/`write` is optional `@type - {string[]}`.<br />`documentId` is optional, by default generates unique `@type - {string}`. |
1201 | 
1202 | - **let:documents**
1203 | - **let:error**
1204 | 
1205 | #### Example 
1206 | 
1207 | ```svelte
1208 | <script>
1209 |   import { Collection } from "metawrite";
1210 | </script>
1211 | 
1212 | <Collection collectionId="5f56a3035a01f" let:documents>
1213 |   You have {documents.length} documents.
1214 | </Collection>
1215 | ```
1216 | 
1217 | ### `<Document />`
1218 | 
1219 | #### Arguments
1220 | 
1221 | - documentId - *required* `@type - {string}`
1222 | - collectionId - *required* `@type - {string}`
1223 | 
1224 | #### Slots
1225 | 
1226 | - **loading**
1227 | - **error**
1228 | 
1229 | #### Directives
1230 | 
1231 | **let:actions**
1232 | | Name | Description |
1233 | | --- | --- |
1234 | | `reload()` | Reload. |
1235 | | `update(data)` | Updates a Document. `data` - `@type - {object}` |
1236 | | `remove()` | Removes a Document. |
1237 | 
1238 | - **let:document**
1239 | - **let:error**
1240 | 
1241 | #### Example
1242 | 
1243 | ```svelte
1244 | <script>
1245 | 	import { Collection, Document } from 'metawrite';
1246 | 
1247 | 	const collectionId = '5f56a3035a01f';
1248 | </script>
1249 | 
1250 | <Collection {collectionId} let:documents>
1251 | 	You have {documents.length} documents:
1252 | 	{#each documents as document}
1253 | 		<Document {collectionId} documentId={document.$id} let:document let:actions>
1254 | 			Title: {document.title}
1255 | 			Text: {document.text}
1256 | 			<button on:click={() => {actions.remove()}}>Delete</button>
1257 | 		</Document>
1258 | 	{/each}
1259 | </Collection>
1260 | ```
1261 | 
1262 | ## Realtime
1263 | 
1264 | For more information about using Realtime in Appwrite see [Realtime documentation](https://appwrite.io/docs/realtime).
1265 | 
1266 | Realtime allows you to listen to any events on the server-side in realtime using the subscribe method.
1267 | 
1268 | 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.
1269 | 
1270 | This lets you build an interactive and responsive user experience by providing information from all of Appwrite's services in realtime.
1271 | 
1272 | #### Arguments
1273 | 
1274 | - channels - *required* `string | string[]`
1275 | 
1276 | #### Directives
1277 | 
1278 | **let:payload** - The payload from the subscription will contain [following properties](https://appwrite.io/docs/realtime#payload).
1279 | 
1280 | **let:actions**
1281 | | Name | Description |
1282 | | --- | --- |
1283 | | `subscribe()` | Subscribing to all updates related to one or more channels. |
1284 | | `unsubscribe()` | If you no longer want to receive updates from a subscription, you can unsubscribe so that your callbacks are no longer called. |
1285 | 
1286 | #### Example 
1287 | 
1288 | ```svelte
1289 | <script>
1290 | 	import { Realtime } from 'metawrite';
1291 | </script>
1292 | 
1293 | <Realtime channels="account" let:actions let:payload>
1294 | 	<h1>{payload.timestamp}</h1>
1295 | 	<button on:click={actions.subscribe()}>Subscribe to Account channel</button>
1296 | 	<button on:click={actions.unsubscribe()}>Unsubscribe from Account channel</button>
1297 | </Realtime>
1298 | ```
1299 | 
1300 | ## Storage
1301 | 
1302 | The Storage components allow you to manage your project files. You can upload, view, download, and query all your project files.
1303 | 
1304 | ### `<Storage />`
1305 | 
1306 | #### Directives
1307 | 
1308 | **let:actions**
1309 | | Name | Description |
1310 | | --- | --- |
1311 | | `create(bucketId, fileId, file, read, write)` | Uploads a file. <br />`fileId` is required `@type - {string}`, `"unique()"` will generate random unique id, but you can use custom.<br />`file` is `@type - {File}` and required.<br />`read`/`write` is `@type - {string[]}` and *optional* |
1312 | 
1313 | #### Example
1314 | 
1315 | ```svelte
1316 | <script lang="ts">
1317 |     import { Storage } from "metawrite"
1318 | 
1319 |     // Required
1320 | 	let bucketId = "default"
1321 |     let file: File;
1322 |     let fileId = "unique()"; // this will generate random unique id, but you can use custom
1323 | 
1324 |     // Optional
1325 |     let read: string[];
1326 |     let write: string[];
1327 | </script>
1328 | 
1329 | <Storage {file} let:actions>
1330 |     <button on:click={actions.create(bucketId, fileId, file, read, write)}>Upload File</button>
1331 | </Storage>
1332 | ```
1333 | 
1334 | ### `<FileList />`
1335 | 
1336 | #### Arguments
1337 | 
1338 | - bucketId - *required* `@type - {string}`
1339 | - search - *optional* `@type - {string}`
1340 | - limit - *optional* `@type - {number}`
1341 | - offset - *optional* `@type - {number}`
1342 | - cursor - *optional* `@type - {string}`
1343 | - cursorDirection - *optional* `@type - {string}`
1344 | - orderType - *optional* `@type - {string} ` => write  `"ASC"` or `"DESC"`
1345 | 
1346 | #### Slots
1347 | 
1348 | - **loading**
1349 | - **error**
1350 | 
1351 | #### Directives
1352 | 
1353 | **let:actions**
1354 | | Name | Description |
1355 | | --- | --- |
1356 | | `reload()` | Reload. |
1357 | 
1358 | - **let:files**
1359 | - **let:error**
1360 | 
1361 | #### Example 
1362 | 
1363 | ```svelte
1364 | <script>
1365 |     import { FileList } from "metawrite"
1366 | 
1367 |     // Optional
1368 |     let bucketId = 'default';
1369 |     let search = '';
1370 |     let limit = 10;
1371 |     let offset = 0;
1372 |     let orderType = 'ASC';
1373 | </script>
1374 | 
1375 | <FileList {bucketId} {search} {limit} {offset} {orderType}let:actions let:files>
1376 |     {#each files as file}
1377 |         <p>File: {file.name}</p>
1378 |     {/each}
1379 |     <button on:click={actions.reload()}>Reload</button>
1380 | </FileList>
1381 | ```
1382 | 
1383 | ### `<File />`
1384 | 
1385 | #### Arguments
1386 | 
1387 | - bucketId - it is your Bucket ID `@type - {string}`
1388 | - fileId - it is File ID `@type - {string}`
1389 | 
1390 | #### Directives
1391 | 
1392 | **let:actions**
1393 | | Name | Description |
1394 | | --- | --- |
1395 | | `download()` | Downloads file. |
1396 | | `view()` | Get file for View. |
1397 | | `preview(width, height, quality, background, output)` | Get file for preview. |
1398 | | `update(read, write)` | Updates a file. |
1399 | | `delete()` | Deletes a file. |
1400 | 
1401 | #### Example 
1402 | 
1403 | ```svelte
1404 | <script lang="ts">
1405 | 	import { File } from 'metawrite';
1406 | 
1407 | 	// Required
1408 | 	let bucketId: string;
1409 | 	let fileId: string;
1410 | 
1411 | 	// OPTIONAL
1412 | 	/** @type {number} */ let width;
1413 | 	/** @type {number} */ let height;
1414 | 	/** @type {string} */ let gravity;
1415 | 	/** @type {number} */ let quality;
1416 | 	/** @type {number} */ let borderWidth;
1417 | 	/** @type {string} */ let borderColor;
1418 | 	/** @type {number} */ let borderRadius;
1419 | 	/** @type {number} */ let opacity;
1420 | 	/** @type {number} */ let rotation;
1421 | 	/** @type {string} */ let background;
1422 | 	/** @type {string} */ let output;
1423 | 	/** @type {string[]} */ let read;
1424 | 	/** @type {string[]} */ let write;
1425 | </script>
1426 | 
1427 | <File {bucketId} {fileId} let:actions>
1428 | 	<button on:click={actions.download()}>Download File</button>
1429 | 	<button on:click={actions.view()}>File View</button>
1430 | 	<button on:click={actions.preview()}>Preview File</button>
1431 | 	<button on:click={actions.update(read, write)}>Update File</button>
1432 | 	<button on:click={actions.delete()}>Delete File</button>
1433 | </File>
1434 | ```
1435 | 
1436 | ## Functions
1437 | 
1438 | The Functions service allows you to create custom behaviour that can be triggered by any supported Appwrite system events or by a predefined schedule.
1439 | 
1440 | 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.
1441 | 
1442 | You can learn more by following Appwrite's [Cloud Functions tutorial](https://appwrite.io/docs/functions).
1443 | 
1444 | ### `<Function />`
1445 | 
1446 | #### Directives
1447 | 
1448 | **let:actions**
1449 | | Name | Description |
1450 | | --- | --- |
1451 | | `reload()` | Reload. |
1452 | | `create(functionId, data)` | Creates Execution. `functionId` is _required_, `data` could be empty string because _optional_. `@type {string}`|
1453 | | `create(functionId, executionId)` | Get Execution. Both parameters are required. `@type {string}` |
1454 | 
1455 | - **let:executions**
1456 | 
1457 | #### Slots
1458 | 
1459 | - **error**
1460 | 
1461 | #### Example
1462 | 
1463 | ```svelte
1464 | <script>
1465 | 	import { Function } from 'metawrite';
1466 | 	let functionId = 'someExecution'; // required
1467 | 	let newFunctionId = '';
1468 | 	let data = 'String of custom data to send to function.'; // could be empty string because optional
1469 | </script>
1470 | 
1471 | <Function {functionId} {data} let:actions let:executions>
1472 | 	{#each executions as execution}
1473 | 		<p>
1474 | 			Execution ID: {execution.$id}, Function ID: {execution.functionId}, Date Created: {execution.dateCreated}
1475 | 		</p>
1476 | 	{/each}
1477 | 	<input type="text" name="functionId" placeholder="Function ID" bind:value={newFunctionId} />
1478 | 	<button on:click={actions.create(newFunctionId, data)}>Create Execution</button>
1479 | </Function>
1480 | ```
1481 | 
1482 | ## Locale
1483 | 
1484 | The Locale components allow you to customize your app based on your users' location.
1485 | 
1486 | ### `<Continents />`
1487 | 
1488 | #### Directives
1489 | 
1490 | **let:actions**
1491 | | Name | Description |
1492 | | --- | --- |
1493 | | `reload()` | Reload. |
1494 | 
1495 | - **let:continents**
1496 | 
1497 | #### Slots
1498 | 
1499 | - **loading**
1500 | - **error**
1501 | 
1502 | #### Example
1503 | 
1504 | ```svelte
1505 | <script>
1506 | 	import { Continents } from 'metawrite';
1507 | </script>
1508 | 
1509 | <Continents let:actions let:continents>
1510 | 	<button on:click={actions.reload()}>Reload</button>
1511 | 	<p>There are {continents.sum} continents:</p>
1512 | 	{#each continents.continents as continent}
1513 | 		<p>{continent.name}, {continent.code}</p>
1514 | 	{/each}
1515 | </Continents>
1516 | ```
1517 | 
1518 | ### `<Countries />`
1519 | 
1520 | #### Arguments
1521 | 
1522 | - eu
1523 | 
1524 | #### Slots
1525 | 
1526 | - **loading**
1527 | - **error**
1528 | 
1529 | #### Directives
1530 | 
1531 | **let:actions**
1532 | | Name | Description |
1533 | | --- | --- |
1534 | | `reload()` | Reload. |
1535 | 
1536 | - **let:countries**
1537 | 
1538 | #### Example
1539 | 
1540 | ```svelte
1541 | <script>
1542 | 	import { Countries } from 'metawrite';
1543 | 
1544 | 	let eu = true; // if you want to list only EU countries
1545 | </script>
1546 | 
1547 | <Countries let:actions let:countries>
1548 | 	<button on:click={actions.reload()}>Reload</button>
1549 | 	<p>There are {countries.sum} countries in the world:</p>
1550 | 	{#each countries.countries as country}
1551 | 		<p>{country.name}, {country.code}</p>
1552 | 	{/each}
1553 | </Countries>
1554 | 
1555 | <Countries {eu} let:actions let:countries>
1556 | 	<button on:click={actions.reload()}>Reload</button>
1557 | 	<p>There are {countries.sum} countries in EU:</p>
1558 | 	{#each countries.countries as country}
1559 | 		<p>{country.name}, {country.code}</p>
1560 | 	{/each}
1561 | </Countries>
1562 | ```
1563 | 
1564 | ### `<Currencies />`
1565 | 
1566 | #### Slots
1567 | 
1568 | - **loading**
1569 | - **error**
1570 | 
1571 | #### Directives
1572 | 
1573 | **let:actions**
1574 | | Name | Description |
1575 | | --- | --- |
1576 | | `reload()` | Reload. |
1577 | 
1578 | - **let:currencies**
1579 | 
1580 | #### Example
1581 | 
1582 | ```svelte
1583 | <script>
1584 | 	import { Currencies } from 'metawrite';
1585 | </script>
1586 | 
1587 | <Currencies let:actions let:currencies>
1588 | 	<button on:click={actions.reload()}>Reload</button>
1589 | 	<p>There are {currencies.sum} currencies:</p>
1590 | 	{#each currencies.currencies as currency}
1591 | 		<p>{currency.symbol} - {currency.name} ({currency.code})</p>
1592 | 	{/each}
1593 | </Currencies>
1594 | ```
1595 | 
1596 | ### `<Languages />`
1597 | 
1598 | #### Slots
1599 | 
1600 | - **loading**
1601 | - **error**
1602 | 
1603 | #### Directives
1604 | 
1605 | **let:actions**
1606 | | Name | Description |
1607 | | --- | --- |
1608 | | `reload()` | Reload. |
1609 | 
1610 | - **let:languages**
1611 | 
1612 | #### Example
1613 | 
1614 | ```svelte
1615 | <script>
1616 | 	import { Languages } from 'metawrite';
1617 | </script>
1618 | 
1619 | <Languages let:actions let:languages>
1620 | 	<button on:click={actions.reload()}>Reload</button>
1621 | 	<p>There are {languages.sum} languages:</p>
1622 | 	{#each languages.languages as language}
1623 | 		<p>{language.name}, {language.code}></p>
1624 | 	{/each}
1625 | </Languages>
1626 | ```
1627 | 
1628 | ### `<Locale />`
1629 | 
1630 | #### Slots
1631 | 
1632 | - **loading**
1633 | - **error**
1634 | 
1635 | #### Directives
1636 | 
1637 | **let:actions**
1638 | | Name | Description |
1639 | | --- | --- |
1640 | | `reload()` | Reload. |
1641 | 
1642 | - **let:code** `object`
1643 | 
1644 | #### Example
1645 | 
1646 | ```svelte
1647 | <script>
1648 | 	import { Locale } from 'metawrite';
1649 | </script>
1650 | 
1651 | <Locale let:actions let:code>
1652 | 	<h1>Active Session</h1>
1653 | 	<button on:click={actions.reload()}>Reload</button>
1654 | 	<p>Location: {code.country}, {code.continentCode}</p>
1655 | 	<p>IP: {code.ip}</p>
1656 | </Locale>
1657 | ```
1658 | 
1659 | ### `<PhoneCodes />`
1660 | 
1661 | #### Slots
1662 | 
1663 | - **loading**
1664 | - **error**
1665 | 
1666 | #### Directives
1667 | 
1668 | **let:actions**
1669 | | Name | Description |
1670 | | --- | --- |
1671 | | `reload()` | Reload. |
1672 | 
1673 | - **let:codes**
1674 | 
1675 | #### Example
1676 | 
1677 | ```svelte
1678 | <script>
1679 | 	import { PhoneCodes } from 'metawrite';
1680 | </script>
1681 | 
1682 | <PhoneCodes let:actions let:codes>
1683 | 	<button on:click={actions.reload()}>Reload</button>
1684 | 	<p>There are {codes.sum} phone codes:</p>
1685 | 	{#each codes.phones as phone}
1686 | 		<p>{phone.code} - {phone.countyName}></p>
1687 | 	{/each}
1688 | </PhoneCodes>
1689 | ```
1690 | 
1691 | # Stack
1692 | <img src="https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge&logo=svelte&logoColor=FF3E00" />
1693 | <img src="https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white" />
1694 | <img src="https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E" />
1695 | 


--------------------------------------------------------------------------------