+ {#if $loading}
+
Loading data from database...
+ {:else}
+ {#each [...$subscriber, ...$insertSubscriber] as item}
+
{item.name}
+ {/each}
+ {/if}
+
+ {#each $scrollData as item}
+
{item.name}
+ {/each}
+
console.log(e) /* on every fetch from scroll dispatcher do some action */} />
+
+```
+
+## Files subscribers
+
+```svelte
+
+
+
+
+
+
+```
+
+## Routing
+
+Routes can be added in `__routes.svelte` file. Every route is fetched lazyly.
+
+```svelte
+
+
+
import('$routes/index.svelte'),
+ },
+ {
+ path: '/oauth',
+ component: () => import('$routes/oauth/index.svelte'),
+ },
+ {
+ path: '/oauth/failure',
+ component: () => import('$routes/oauth/failure.svelte'),
+ },
+ {
+ path: '/oauth/success',
+ component: () => import('$routes/oauth/success.svelte'),
+ },
+ ]}
+/>
+```
+
+### Routes structure
+
+`__layout.svelte` the default layout for every page
+
+`__error.svelte` the error page (404 error)
+
+`__loading.svelte` the default loading component
+
+`__routes.svelte` the file includes all routes in application
+
+## Social auth
+
+```svelte
+
+
+
+
+
+```
+
+## i18n
+
+Locale file `src/locales/en.json`
+
+```json
+{
+ "page": {
+ "home": {
+ "title": "Appwrite svelte rocket start 🚀"
+ }
+ }
+}
+```
+
+```svelte
+
+
+
+
{$_('page.home.title')}
+
+
+
Change language:
+
+
+
+
Error 404
diff --git a/src/__layout.svelte b/src/__layout.svelte
new file mode 100644
index 0000000..c508900
--- /dev/null
+++ b/src/__layout.svelte
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/__loading.svelte b/src/__loading.svelte
new file mode 100644
index 0000000..01239ea
--- /dev/null
+++ b/src/__loading.svelte
@@ -0,0 +1 @@
+Loading...
diff --git a/src/__routes.svelte b/src/__routes.svelte
new file mode 100644
index 0000000..d778067
--- /dev/null
+++ b/src/__routes.svelte
@@ -0,0 +1,31 @@
+
+
+ import('$routes/index.svelte'),
+ },
+ {
+ path: '/oauth',
+ component: () => import('$routes/oauth/index.svelte'),
+ },
+ {
+ path: '/oauth/failure',
+ component: () => import('$routes/oauth/failure.svelte'),
+ },
+ {
+ path: '/oauth/success',
+ component: () => import('$routes/oauth/success.svelte'),
+ },
+ ]}
+/>
diff --git a/src/app.css b/src/app.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/cms/components.ts b/src/cms/components.ts
new file mode 100644
index 0000000..4d4d370
--- /dev/null
+++ b/src/cms/components.ts
@@ -0,0 +1,10 @@
+import FileDrop from './components/FileDrop.svelte'
+import Input from './components/Input.svelte'
+import Sortable from './components/Sortable.svelte'
+import BlockQuote from './components/BlockQuote.svelte'
+import MarkdownEditor from './components/MarkdownEditor.svelte'
+import MarkdownRenderer from './components/MarkdownRenderer.svelte'
+
+import { Radio, Checkbox, Fileupload as FileUpload, Range, Select, Textarea, Toggle, Hr as HorizontalRule, Button, ButtonGroup } from 'flowbite-svelte'
+
+export { FileDrop, Input, Radio, Checkbox, FileUpload, Range, Select, Textarea, Toggle, Sortable, BlockQuote, HorizontalRule, MarkdownEditor, MarkdownRenderer, Button, ButtonGroup }
diff --git a/src/cms/components/BlockQuote.svelte b/src/cms/components/BlockQuote.svelte
new file mode 100644
index 0000000..d6fd19b
--- /dev/null
+++ b/src/cms/components/BlockQuote.svelte
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
diff --git a/src/cms/components/FileDrop.svelte b/src/cms/components/FileDrop.svelte
new file mode 100644
index 0000000..c54ef84
--- /dev/null
+++ b/src/cms/components/FileDrop.svelte
@@ -0,0 +1,13 @@
+
+
+
+
+ Click to upload or drag and drop
+ {rules.join(', ')}
+
diff --git a/src/cms/components/Input.svelte b/src/cms/components/Input.svelte
new file mode 100644
index 0000000..b9be330
--- /dev/null
+++ b/src/cms/components/Input.svelte
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+ {#if error}
+
+ Error!
+ {error}
+
+ {/if}
+
diff --git a/src/cms/components/Loading.svelte b/src/cms/components/Loading.svelte
new file mode 100644
index 0000000..9ef53ce
--- /dev/null
+++ b/src/cms/components/Loading.svelte
@@ -0,0 +1,5 @@
+
diff --git a/src/cms/components/MarkdownEditor.svelte b/src/cms/components/MarkdownEditor.svelte
new file mode 100644
index 0000000..58993d9
--- /dev/null
+++ b/src/cms/components/MarkdownEditor.svelte
@@ -0,0 +1,15 @@
+
+
+
+
+ (value = e.detail.value)} />
+
+
diff --git a/src/cms/components/MarkdownRenderer.svelte b/src/cms/components/MarkdownRenderer.svelte
new file mode 100644
index 0000000..d6a34f9
--- /dev/null
+++ b/src/cms/components/MarkdownRenderer.svelte
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
diff --git a/src/cms/components/Sortable.svelte b/src/cms/components/Sortable.svelte
new file mode 100644
index 0000000..7e9ac6d
--- /dev/null
+++ b/src/cms/components/Sortable.svelte
@@ -0,0 +1,60 @@
+
+
+{#each list as item, order (item[key])}
+ (source = { order, id: item[key] }) && start(e, source.id)}
+ on:dragover|preventDefault={() => over({ order, id: item[key] })}
+ on:dragleave={leave}
+ on:dragenter|preventDefault={() => null}
+ on:drop|preventDefault={() => reorder(source, { order, id: item[key] })}
+ animate:flip={{ duration: source !== null ? 300 : 0 }}
+ class:over={item[key] === isOver}
+ >
+
+
+{/each}
+
+
diff --git a/src/cms/components/idGenerator.ts b/src/cms/components/idGenerator.ts
new file mode 100644
index 0000000..0594429
--- /dev/null
+++ b/src/cms/components/idGenerator.ts
@@ -0,0 +1,6 @@
+const gen = (function* () {
+ let index = -1
+ while (true) yield index++
+})()
+
+export default (pre: string = '') => `${pre}${gen.next().value}`
diff --git a/src/lib/appwrite.ts b/src/lib/appwrite.ts
new file mode 100644
index 0000000..3773054
--- /dev/null
+++ b/src/lib/appwrite.ts
@@ -0,0 +1,22 @@
+import { Client, Account, Databases, Storage, Teams, Functions, Locale, Avatars } from 'appwrite'
+
+const client = new Client()
+const account = new Account(client)
+const databases = new Databases(client)
+const storage = new Storage(client)
+const teams = new Teams(client)
+const functions = new Functions(client)
+const locale = new Locale(client)
+const avatars = new Avatars(client)
+
+const url = {
+ oauth: {
+ success: `${import.meta.env.VITE_HOSTNAME}/oauth/success`,
+ failure: `${import.meta.env.VITE_HOSTNAME}/oauth/failure`
+ }
+}
+
+client.setEndpoint(import.meta.env.VITE_APPWRITE_ENDPOINT).setProject(import.meta.env.VITE_APPWRITE_PROJECT_ID)
+
+export default client
+export { client, account, url, databases, storage, teams, functions, locale, avatars }
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
new file mode 100644
index 0000000..034f061
--- /dev/null
+++ b/src/lib/auth.ts
@@ -0,0 +1,31 @@
+import type { Models, RealtimeResponseEvent } from 'appwrite'
+import { writable } from 'svelte/store'
+import { account, client } from './appwrite'
+
+const userStore = writable>(null)
+const loadingStore = writable(true)
+
+client.subscribe('account', (response: RealtimeResponseEvent) => {
+ if (response.events.includes('users.*.sessions.*.delete')) {
+ return userStore.set(null)
+ }
+
+ if (response.events.includes('users.*.sessions.*.update')) {
+ return userStore.set(response.payload)
+ }
+})
+
+account.get().then(data => {
+ userStore.set(data)
+ loadingStore.set(false)
+})
+
+const user = {
+ subscribe: userStore.subscribe,
+ logout: () => account.deleteSession('current'),
+ account: account
+}
+
+const isLoading = { subscribe: loadingStore.subscribe }
+
+export { account, user, isLoading }
diff --git a/src/lib/components/KeyboardShortcut.svelte b/src/lib/components/KeyboardShortcut.svelte
new file mode 100644
index 0000000..42fc717
--- /dev/null
+++ b/src/lib/components/KeyboardShortcut.svelte
@@ -0,0 +1,15 @@
+
+
+
+
+
diff --git a/src/lib/components/Link.svelte b/src/lib/components/Link.svelte
new file mode 100644
index 0000000..d715b4f
--- /dev/null
+++ b/src/lib/components/Link.svelte
@@ -0,0 +1,34 @@
+
+
+{#if href}
+ {#if isValidHttpUrl(href)}
+
+
+
+ {:else}
+
+
+
+ {/if}
+{:else}
+
+{/if}
diff --git a/src/lib/components/Loading.svelte b/src/lib/components/Loading.svelte
new file mode 100644
index 0000000..9ef53ce
--- /dev/null
+++ b/src/lib/components/Loading.svelte
@@ -0,0 +1,5 @@
+
diff --git a/src/lib/components/MasonryGrid.svelte b/src/lib/components/MasonryGrid.svelte
new file mode 100644
index 0000000..e27f929
--- /dev/null
+++ b/src/lib/components/MasonryGrid.svelte
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
new file mode 100644
index 0000000..d51235e
--- /dev/null
+++ b/src/lib/components/Sidebar.svelte
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
diff --git a/src/lib/components/Stack.svelte b/src/lib/components/Stack.svelte
new file mode 100644
index 0000000..4cd17d7
--- /dev/null
+++ b/src/lib/components/Stack.svelte
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
diff --git a/src/lib/database.ts b/src/lib/database.ts
new file mode 100644
index 0000000..9e0a77b
--- /dev/null
+++ b/src/lib/database.ts
@@ -0,0 +1,178 @@
+import { writable } from 'svelte/store'
+import { databases, client } from './appwrite'
+import { Models, Query, RealtimeResponseEvent } from 'appwrite'
+import { ID } from 'appwrite'
+import type { Writable } from 'svelte/store'
+
+class Collection {
+ constructor(protected databaseId: string, protected collectionId: string) { }
+
+ createDocument(data: { [key: string]: any } = {}, permissions: string[] = null) {
+ return databases.createDocument(this.databaseId, this.collectionId, ID.unique(), data, permissions)
+ }
+
+ updateDocument(documentId: string, data: { [key: string]: any } = {}, permissions: string[] = null) {
+ if (permissions.length === 0 && Object.keys(data).length === 0) return
+
+ return databases.updateDocument(this.databaseId, this.collectionId, documentId, data, permissions)
+ }
+
+ deleteDocument(documentId: string) {
+ return databases.deleteDocument(this.databaseId, this.collectionId, documentId)
+ }
+
+ createObserver() {
+ const dataStore = writable([])
+
+ client.subscribe(`databases.${this.databaseId}.collections.${this.collectionId}.documents`, (response: RealtimeResponseEvent) => {
+ if (response.events.includes(`databases.${this.databaseId}.collections.${this.collectionId}.documents.*.create`)) {
+ dataStore.update(current => {
+ current.push(response.payload)
+ return current
+ })
+
+ this.subscribeCollectionUpdate(response.payload, dataStore)
+ }
+ })
+
+ return { subscribe: dataStore.subscribe }
+ }
+
+ createSubscriber(queries: string[] = []) {
+ const loadingStore = writable(true)
+ const dataStore = writable([])
+
+ databases.listDocuments(this.databaseId, this.collectionId, queries).then(data => {
+ data.documents.forEach((document) => this.subscribeCollectionUpdate(document, dataStore))
+
+ dataStore.set(data.documents)
+ loadingStore.set(false)
+ })
+
+ return [{ subscribe: dataStore.subscribe }, { subscribe: loadingStore.subscribe }] as const
+ }
+
+ createPaginate(limit: number, queries: string[] = []) {
+ const dataStore = writable([])
+ const loadingStore = writable(true)
+ let offset = 0
+
+ const store = {
+ subscribe: dataStore.subscribe,
+ async next() {
+ const data = await databases.listDocuments(this.databaseId, this.collectionId, [...queries, Query.limit(limit), Query.offset(offset)])
+ data.documents.forEach((document) => this.subscribeCollectionUpdate(document, dataStore))
+
+ dataStore.update(current => [...current, ...data.documents])
+ offset += limit
+ }
+ }
+
+ store.next().then(() => loadingStore.set(false))
+
+ return [store, { subscribe: loadingStore.subscribe }] as const
+ }
+
+ createInfinityScrollDispatcher(limit: number, queries: string[] = [], observerOptions: IntersectionObserverInit = {}) {
+ const dataStore = writable([])
+ let lastId: string = null
+
+ databases.listDocuments(this.databaseId, this.collectionId, [...queries, Query.limit(limit)]).then(firstData => {
+ dataStore.set(firstData.documents)
+ firstData.documents.forEach((document) => this.subscribeCollectionUpdate(document, dataStore))
+ lastId = firstData.documents[firstData.documents.length - 1].$id
+ })
+
+ const observer = new IntersectionObserver((entries, me) => {
+ if (lastId === null) return
+
+ entries.forEach(entry => {
+ if (!entry.isIntersecting) return
+
+ databases.listDocuments(this.databaseId, this.collectionId, [...queries, Query.limit(limit), Query.cursorAfter(lastId)]).then((data) => {
+ dataStore.update(current => {
+ current.push(...data.documents)
+ lastId = current[current.length - 1].$id
+ return current
+ })
+
+ data.documents.forEach((document) => this.subscribeCollectionUpdate(document, dataStore))
+
+ entry.target.dispatchEvent(new CustomEvent('fetch', entry.target as CustomEventInit))
+ })
+ })
+ }, observerOptions)
+
+ const directive = (node: HTMLElement) => {
+ observer.observe(node)
+
+ return {
+ destroy() {
+ observer.disconnect()
+ }
+ }
+ }
+
+ return [{ subscribe: dataStore.subscribe }, directive] as const
+ }
+
+ protected subscribeCollectionUpdate(document: Models.Document, store: Writable) {
+ client.subscribe(`databases.${this.databaseId}.collections.${this.collectionId}.documents.${document.$id}`, (response: RealtimeResponseEvent) => {
+ if (response.events.includes(`databases.${this.databaseId}.collections.${this.collectionId}.documents.${document.$id}.delete`)) {
+ store.update(current => {
+ current.splice(current.indexOf(document), 1)
+ return current
+ })
+ return
+ }
+
+ if (response.events.includes(`databases.${this.databaseId}.collections.${this.collectionId}.documents.${document.$id}.update`)) {
+ store.update(current => {
+ current[current.indexOf(document)] = response.payload
+ return current
+ })
+ return
+ }
+ })
+ }
+}
+
+class Document {
+ constructor(protected databaseId: string, protected collectionId: string, protected documentId: string) { }
+
+ createSubscriber() {
+ const dataStore = writable(null)
+ const loadingStore = writable(true)
+
+ databases.getDocument(this.databaseId, this.collectionId, this.documentId).then(data => {
+ dataStore.set(data)
+ loadingStore.set(false)
+ })
+
+ client.subscribe(`databases.${this.databaseId}.collections.${this.collectionId}.documents.${this.documentId}`, (response: RealtimeResponseEvent) => {
+ if (response.events.includes(`databases.${this.databaseId}.collections.${this.collectionId}.documents.${this.documentId}.update`)) {
+ dataStore.set(response.payload)
+ return
+ }
+
+ if (response.events.includes(`databases.${this.databaseId}.collections.${this.collectionId}.documents.${this.documentId}.delete`)) {
+ dataStore.set(null)
+ return
+ }
+ })
+
+ return [{ subscribe: dataStore.subscribe }, { subscribe: loadingStore.subscribe }] as const
+ }
+
+ delete() {
+ return databases.deleteDocument(this.databaseId, this.collectionId, this.documentId)
+ }
+
+ update(data: { [key: string]: any } = {}, permissions: string[] = []) {
+ if (permissions.length === 0 && Object.keys(data).length === 0) return
+
+ return databases.updateDocument(this.databaseId, this.collectionId, this.documentId, data, permissions)
+ }
+}
+
+export { Collection, Document }
diff --git a/src/lib/router.ts b/src/lib/router.ts
new file mode 100644
index 0000000..c1c1c48
--- /dev/null
+++ b/src/lib/router.ts
@@ -0,0 +1,8 @@
+import { Route, Router, link, links, Link } from 'svelte-routing'
+import { navigate, back, forward } from './router/navigate'
+import Redirect from "./router/Redirect.svelte"
+import ProtectedRoute from "./router/ProtectedRoute.svelte"
+import LazyRoute from "./router/LazyRoute.svelte"
+import defineRoutes from "./router/routes"
+
+export { Route, Router, Link, link, links, navigate, back, forward, Redirect, ProtectedRoute, LazyRoute, defineRoutes }
diff --git a/src/lib/router/LazyRoute.svelte b/src/lib/router/LazyRoute.svelte
new file mode 100644
index 0000000..81e90ee
--- /dev/null
+++ b/src/lib/router/LazyRoute.svelte
@@ -0,0 +1,14 @@
+
+
+
+
+
diff --git a/src/lib/router/LazyRouteGuard.svelte b/src/lib/router/LazyRouteGuard.svelte
new file mode 100644
index 0000000..35caaef
--- /dev/null
+++ b/src/lib/router/LazyRouteGuard.svelte
@@ -0,0 +1,33 @@
+
+
+{#if loadedComponent}
+
+{:else if loading}
+
+{/if}
diff --git a/src/lib/router/ProtectedRoute.svelte b/src/lib/router/ProtectedRoute.svelte
new file mode 100644
index 0000000..294637f
--- /dev/null
+++ b/src/lib/router/ProtectedRoute.svelte
@@ -0,0 +1,19 @@
+
+
+
+
+ {#if component !== null}
+
+ {:else}
+
+ {/if}
+
+
diff --git a/src/lib/router/ProtectedRouteGuard.svelte b/src/lib/router/ProtectedRouteGuard.svelte
new file mode 100644
index 0000000..b509904
--- /dev/null
+++ b/src/lib/router/ProtectedRouteGuard.svelte
@@ -0,0 +1,14 @@
+
+
+{#if allow}
+
+{:else}
+
+{/if}
diff --git a/src/lib/router/Redirect.svelte b/src/lib/router/Redirect.svelte
new file mode 100644
index 0000000..e22488f
--- /dev/null
+++ b/src/lib/router/Redirect.svelte
@@ -0,0 +1,15 @@
+
diff --git a/src/lib/router/Router.svelte b/src/lib/router/Router.svelte
new file mode 100644
index 0000000..18a457c
--- /dev/null
+++ b/src/lib/router/Router.svelte
@@ -0,0 +1,35 @@
+
+
+
+ {#each routes as route}
+
+ {#if route?.layout || layout}
+
+
+
+ {:else}
+
+ {/if}
+
+ {#if error}
+
+ {/if}
+ {/each}
+
diff --git a/src/lib/router/navigate.ts b/src/lib/router/navigate.ts
new file mode 100644
index 0000000..967e0bc
--- /dev/null
+++ b/src/lib/router/navigate.ts
@@ -0,0 +1,9 @@
+import { navigate as nav } from 'svelte-routing'
+
+export const navigate = (to: string | number, options?: { replace?: boolean, state?: { [k in string | number]: unknown } }) => {
+ if (typeof to === 'string') return nav(to, options)
+ window.history.go(to)
+}
+
+export const back = () => window.history.back()
+export const forward = () => window.history.forward()
diff --git a/src/lib/router/routes.ts b/src/lib/router/routes.ts
new file mode 100644
index 0000000..eddadf0
--- /dev/null
+++ b/src/lib/router/routes.ts
@@ -0,0 +1,29 @@
+import { ComponentType, SvelteComponentTyped } from 'svelte'
+
+export interface Route {
+ component: () => Promise,
+ path: string,
+ layout?: ComponentType>,
+ loading?: ComponentType>,
+ before?: () => any,
+}
+
+interface RouteDefinition {
+ component: () => Promise,
+ path: string,
+ layout: ComponentType> | null,
+ loading: ComponentType> | null,
+ before: () => any | null,
+}
+
+interface RouteConfig {
+ routes: Route[],
+ layout?: ComponentType> | null,
+ loading?: ComponentType> | null,
+}
+
+const defineRoutes = (config: RouteConfig): RouteDefinition[] => {
+ return config.routes.map(route => ({ ...route, layout: route?.layout ?? config?.layout ?? null, loading: route?.loading ?? config?.loading ?? null, before: route?.before ?? null }))
+}
+
+export default defineRoutes
diff --git a/src/lib/storage.ts b/src/lib/storage.ts
new file mode 100644
index 0000000..65d81e3
--- /dev/null
+++ b/src/lib/storage.ts
@@ -0,0 +1,186 @@
+import { storage, client } from './appwrite'
+import { ID, Models, RealtimeResponseEvent } from 'appwrite'
+import { Writable, writable } from 'svelte/store'
+
+class Bucket {
+ constructor(protected bucketId: string) { }
+
+ createFile(file, permissions: string[] = []) {
+ return storage.createFile(this.bucketId, ID.unique(), file, permissions)
+ }
+
+ deleteFile(file: string | Models.File) {
+ return storage.deleteFile(this.bucketId, typeof file === 'string' ? file : file.$id)
+ }
+
+ updateFile(file: string | Models.File, permissions: string[] = []) {
+ return storage.updateFile(this.bucketId, typeof file === 'string' ? file : file.$id, permissions)
+ }
+
+ getFilePreview(file: string | Models.File) {
+ return storage.getFilePreview(this.bucketId, typeof file === 'string' ? file : file.$id)
+ }
+
+ getFileDownload(file: string | Models.File) {
+ return storage.getFileDownload(this.bucketId, typeof file === 'string' ? file : file.$id)
+ }
+
+ getFileView(file: string | Models.File) {
+ return storage.getFileView(this.bucketId, typeof file === 'string' ? file : file.$id)
+ }
+
+ getFileContent(file: string | Models.File) {
+ const fileContent = writable('')
+ const loading = writable(true)
+
+ const { href } = storage.getFileView(this.bucketId, typeof file === 'string' ? file : file.$id)
+
+ this.subscribeFileUpdateCallback(file, () => fetch(href).then(res => res.ok ? res.text() : null).then(res => {
+ fileContent.set(res ?? '')
+ loading.set(false)
+ }))
+
+ fetch(href).then(res => res.ok ? res.text() : null).then(res => {
+ fileContent.set(res ?? '')
+ loading.set(false)
+ })
+
+ return [{ subscribe: fileContent.subscribe }, { subscribe: loading.subscribe }] as const
+ }
+
+ createUploadDispatcher(acceptManyFiles = false) {
+ let files = []
+
+ const eventUploadDirective = (node: HTMLInputElement) => {
+ const eventListener = (e) => files = acceptManyFiles ? Array.from(e.target.files) : [e.target.files[0]]
+
+ node.addEventListener('change', eventListener)
+
+ acceptManyFiles && node.setAttribute('multiple', 'multiple')
+
+ return {
+ destroy() {
+ node.removeEventListener('change', eventListener)
+ }
+ }
+ }
+
+ const dispatchUpload = (permissions: string[] = []) => {
+ return Promise.all(files.map(file => this.createFile(file, permissions)))
+ }
+
+ return [eventUploadDirective, dispatchUpload] as const
+ }
+
+ createSubsciber(queries: string[] = [], search = '') {
+ const filesStore = writable([])
+ const loadingStore = writable(true)
+
+ storage.listFiles(this.bucketId, queries, search).then(({ files }) => {
+ files.forEach(file => this.subscribeFileUpdate(file, filesStore))
+ filesStore.set(files)
+ loadingStore.set(false)
+ })
+
+ return [{ subscribe: filesStore.subscribe }, { subscribe: loadingStore.subscribe }] as const
+ }
+
+ createObserver() {
+ const dataStore = writable([])
+
+ client.subscribe(`buckets.${this.bucketId}.files`, (response: RealtimeResponseEvent) => {
+ if (response.events.includes(`buckets.${this.bucketId}.files.*.create`)) {
+ dataStore.update(current => {
+ current.push(response.payload)
+ return current
+ })
+
+ this.subscribeFileUpdate(response.payload, dataStore)
+ }
+ })
+
+ return { subscribe: dataStore.subscribe }
+ }
+
+ protected subscribeFileUpdate(file: Models.File, filesStore: Writable) {
+ this.subscribeFileUpdateCallback(file, ({ event }) => {
+ if (event === 'update') return filesStore.update(current => {
+ current[current.indexOf(file)] = file
+ return current
+ })
+
+ filesStore.update(current => {
+ current.splice(current.indexOf(file), 1)
+ return current
+ })
+ })
+ }
+
+ protected subscribeFileUpdateCallback(file: string | Models.File, callback: ({ fileId, event }: { fileId: string, event: 'update' | 'delete' }) => any) {
+ client.subscribe(`buckets.${this.bucketId}.files.${typeof file === 'string' ? file : file.$id}`, (response: RealtimeResponseEvent) => {
+ if (response.events.includes(`buckets.${this.bucketId}.files.${typeof file === 'string' ? file : file.$id}.update`)) {
+ return callback({ fileId: typeof file === 'string' ? file : file.$id, event: 'update' })
+ }
+
+ if (response.events.includes(`buckets.${this.bucketId}.files.${typeof file === 'string' ? file : file.$id}.delete`)) {
+ return callback({ fileId: typeof file === 'string' ? file : file.$id, event: 'delete' })
+ }
+ })
+ }
+}
+
+class File {
+ constructor(protected bucketId: string, protected fileId: string) { }
+
+ createSubscriber() {
+ const fileStore = writable(null)
+ const loadingStore = writable(true)
+
+ storage.getFile(this.bucketId, this.fileId).then((result) => {
+ fileStore.set(result)
+ loadingStore.set(false)
+ })
+
+ client.subscribe(`buckets.${this.bucketId}.files.${this.fileId}`, (response: RealtimeResponseEvent) => {
+ if (response.events.includes(`buckets.${this.bucketId}.files.${this.fileId}.update`)) {
+ fileStore.set(response.payload)
+ return
+ }
+
+ if (response.events.includes(`buckets.${this.bucketId}.files.${this.fileId}.delete`)) {
+ fileStore.set(null)
+ return
+ }
+ })
+
+ return [{ subscribe: fileStore.subscribe }, { subscribe: loadingStore.subscribe }] as const
+ }
+
+ delete() {
+ return storage.deleteFile(this.bucketId, this.fileId)
+ }
+
+ update(permissions: string[] = []) {
+ return storage.updateFile(this.bucketId, this.fileId, permissions)
+ }
+
+ getPreview() {
+ return storage.getFilePreview(this.bucketId, this.fileId)
+ }
+
+ getDownload() {
+ return storage.getFileDownload(this.bucketId, this.fileId)
+ }
+
+ getView() {
+ return storage.getFileView(this.bucketId, this.fileId)
+ }
+
+ async getContent() {
+ const { href } = await storage.getFileView(this.bucketId, this.fileId)
+
+ return await fetch(href)
+ }
+}
+
+export { Bucket, File }
diff --git a/src/locales/en.json b/src/locales/en.json
new file mode 100644
index 0000000..9fdbf7b
--- /dev/null
+++ b/src/locales/en.json
@@ -0,0 +1,7 @@
+{
+ "page": {
+ "home": {
+ "title": "Appwrite svelte rocket start 🚀"
+ }
+ }
+}
diff --git a/src/locales/i18n.ts b/src/locales/i18n.ts
new file mode 100644
index 0000000..ad3b5de
--- /dev/null
+++ b/src/locales/i18n.ts
@@ -0,0 +1,11 @@
+import { register, init, getLocaleFromNavigator, isLoading, locale, locales } from 'svelte-i18n'
+import registers from './languages'
+
+Object.entries(registers).forEach(([key, file]) => register(key, file))
+
+export const i18n = () => init({
+ fallbackLocale: 'en',
+ initialLocale: getLocaleFromNavigator(),
+})
+
+export { isLoading, locale, locales }
diff --git a/src/locales/languages.ts b/src/locales/languages.ts
new file mode 100644
index 0000000..f11debd
--- /dev/null
+++ b/src/locales/languages.ts
@@ -0,0 +1,3 @@
+export default {
+ 'en': () => import('./en.json')
+}
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..45e5e2d
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,8 @@
+import './app.css'
+import App from './App.svelte'
+
+const app = new App({
+ target: document.getElementById('app')
+})
+
+export default app
diff --git a/src/main.scss b/src/main.scss
new file mode 100644
index 0000000..24a1c19
--- /dev/null
+++ b/src/main.scss
@@ -0,0 +1,16 @@
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+html,
+body {
+ height: 100%;
+ width: 100%;
+
+ tab-size: 4;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
new file mode 100644
index 0000000..55db7d6
--- /dev/null
+++ b/src/routes/index.svelte
@@ -0,0 +1,19 @@
+
+
+
+
+ {$_('page.home.title')}
+
+ Appwrite
+
+
+ OAuth
+
+
+ Repository
+
+
+
OAuth failed
diff --git a/src/routes/oauth/index.svelte b/src/routes/oauth/index.svelte
new file mode 100644
index 0000000..b7ef9ce
--- /dev/null
+++ b/src/routes/oauth/index.svelte
@@ -0,0 +1,7 @@
+
+
+
+
+
diff --git a/src/routes/oauth/success.svelte b/src/routes/oauth/success.svelte
new file mode 100644
index 0000000..50520c7
--- /dev/null
+++ b/src/routes/oauth/success.svelte
@@ -0,0 +1,14 @@
+
+
+Authorizing...
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..4078e74
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+///
+///
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
new file mode 100644
index 0000000..b653681
--- /dev/null
+++ b/tailwind.config.cjs
@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ './src/**/*.{html,js,svelte,ts}',
+ './cms/**/*.{html,js,svelte,ts}',
+ './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}',
+ ],
+ theme: {
+ extend: {}
+ },
+ plugins: [
+ require('flowbite/plugin')
+ ],
+ darkMode: 'class'
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..8ec0f5f
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "target": "esnext",
+ "module": "esnext",
+ "moduleResolution": "node",
+ "importHelpers": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "resolveJsonModule": true,
+ "paths": {
+ "$lib/*": [
+ "./src/lib/*"
+ ],
+ "$root/*": [
+ "./*"
+ ],
+ "$src/*": [
+ "./src/*"
+ ],
+ "$cms/*": [
+ "./cms/*"
+ ],
+ "$routes/*": [
+ "./src/routes/*"
+ ],
+ },
+ }
+}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..353d9f8
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import preprocess from "svelte-preprocess"
+import path from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ resolve: {
+ alias: {
+ '$lib': path.resolve(__dirname, 'src', 'lib'),
+ '$root': path.resolve(__dirname),
+ '$src': path.resolve(__dirname, 'src'),
+ '$cms': path.resolve(__dirname, 'src', 'cms'),
+ '$routes': path.resolve(__dirname, 'src', 'routes')
+ }
+ },
+ plugins: [
+ svelte({
+ preprocess: preprocess({
+ scss: true,
+ postcss: true
+ })
+ })
+ ]
+})