Appwrite SDK for Svelte 🧡 ⚠️ Warning - this SDK was designed to support Appwrite 0.9 and is not compatible with the latest Appwrite versions. We are planing to refactor it as part of the SDK Generator for better support and maintenance.
Home Page: https://appwrite.io
License: BSD 3-Clause "New" or "Revised" License
https://appwrite.io/docs/realtime
Is SDK already support this feature?
I got this error trying to implement Authentication via E-Mail like described in the amazing article here.
19:05:49 [vite] Error when evaluating SSR module /node_modules/svelte-appwrite/src/appwrite.js:
TypeError: __vite_ssr_import_0__.default is not a constructor
at /node_modules/svelte-appwrite/src/appwrite.js:4:8
at instantiateModule (/home/lsoave/SVELTE/svelte-kit-boot/node_modules/vite/dist/node/chunks/dep-0776dd57.js:68919:166)
19:05:52 [vite] Internal server error: Failed to resolve import "./Stores/user" from "node_modules/svelte-appwrite/src/stores.js". Does the file exist?
Plugin: vite:import-analysis
File: /home/lsoave/SVELTE/svelte-kit-boot/node_modules/svelte-appwrite/src/stores.js
1 | import { writable } from "svelte/store";
2 | import { UserStore } from "./Stores/user";
| ^
3 | import { DocumentsStore } from "./Stores/documents";
4 |
at formatError (/home/lsoave/SVELTE/svelte-kit-boot/node_modules/vite/dist/node/chunks/dep-0776dd57.js:43464:46)
at TransformContext.error (/home/lsoave/SVELTE/svelte-kit-boot/node_modules/vite/dist/node/chunks/dep-0776dd57.js:43460:19)
at normalizeUrl (/home/lsoave/SVELTE/svelte-kit-boot/node_modules/vite/dist/node/chunks/dep-0776dd57.js:44974:26)
at async TransformContext.transform (/home/lsoave/SVELTE/svelte-kit-boot/node_modules/vite/dist/node/chunks/dep-0776dd57.js:45103:57)
at async Object.transform (/home/lsoave/SVELTE/svelte-kit-boot/node_modules/vite/dist/node/chunks/dep-0776dd57.js:43662:30)
at async transformRequest (/home/lsoave/SVELTE/svelte-kit-boot/node_modules/vite/dist/node/chunks/dep-0776dd57.js:59322:29)
at async /home/lsoave/SVELTE/svelte-kit-boot/node_modules/vite/dist/node/chunks/dep-0776dd57.js:59444:32
The stack I'm using is on Svelte kit actually:
{
"name": "svelte-kit",
"version": "0.0.1",
"scripts": {
"dev": "svelte-kit dev",
"build": "svelte-kit build",
"start": "svelte-kit start"
},
"devDependencies": {
"@sveltejs/adapter-node": "next",
"@sveltejs/kit": "next",
"autoprefixer": "^10.2.5",
"cssnano": "^4.1.10",
"postcss": "^8.2.7",
"postcss-load-config": "^3.0.1",
"svelte": "^3.29.0",
"svelte-preprocess": "^4.6.9",
"tailwindcss": "^2.0.3",
"vite": "^2.1.0"
},
"type": "module",
"engines": {
"node": ">= 12.17.0"
},
"dependencies": {
"svelte-appwrite": "^0.2.1-beta"
}
}
I'm not sure it is compatible with your work ...
any suggestion ?
Hi.
Preferences.svelte's createEventDispatcher isn't actually called:
const dispatch = createEventDispatcher;
and throws an error, "Function called outside component initialization"
changing to:
const dispatch = createEventDispatcher();
does the trick.
I hate to bring this here but tried discord several times and likely missed the answer.
I'm executing actions.create(...) on Collection to create a new document and I can't for the life of me figure out how to get that document in <script>...</script>.
I started to write a svelte component to turn around and filter for the doc, but that seemed kinda gross. I figure there has to be a more direct way?
I am able to get the doc if I iterate over the documents returned from the list with an if-block that looks for a property of the doc that matches a value used to create the doc. This is kinda ugly and, again, seems unnecessary.
** The requested module '/node_modules/.vite/appwrite.js?v=af1d9e1f' does not provide an export named 'default'
SyntaxError: The requested module '/node_modules/.vite/appwrite.js?v=af1d9e1f' does not provide an export named 'default' **
<script>
import { Create } from "svelte-appwrite";
let email = "";
let password = "";
let name = "";
const success = e => {
console.log(e);
//success callback
// `e` contains the user object
};
const failure = e => {
console.log(e)
//failure callback
}
</script>
<Create let:actions on:success on:failure>
<input type="text" bind:value={email}>
<input type="password" bind:value={password}>
<input type="text" bind:value={name}>
<button on:click={actions.create(email,password, name)}>Register</button>
</Create>
GitHub has recently rolled out a public beta for their issue forms feature. This would allow you to create interactive issue templates and validate them 🤯.
Appwrite currently uses the older issue template format. Your task is to create GitHub issue forms for this repository. Please use Appwrite's issue templates as a reference for this PR.
.github/ISSUE_TEMPLATE/bug.yaml.github/ISSUE_TEMPLATE/documentation.yaml.github/ISSUE_TEMPLATE/feature.yamlIf you need any help, reach out to us on our Discord server.
Are you ready to work on this issue? 🤔 Let us know, and we will assign it to you 😊
Happy Appwriting!
installing the package and downloading the demo
get a working demo with appwrite backend and svelte in the frontend
(i changed the configs)
Uncaught ReferenceError: svelteAppwrite is not defined
http://localhost:5000/build/bundle.js:2477
bundle.js:2477:1
svelteAppwrite does not even start with a capital letter like expected by svelte
Version 0.10.x
Linux
node v16.14.2
pnpm 6.32.3
Hi there!
I have setup a pretty standard project with login and almost everything works. But, here are my two problems:
"Cannot find module 'svelte-appwrite' or its corresponding type declarations.ts(2307)" is shown in vscode on each import statement. I am using typescript, which might be the culprit. Everything works as expected, but the error is shown, nonetheless.
I used the demo app as a boilerplate and everything but the logout button works. Once pressed it successfully logs out the user (viewable in console), but does not update the webpage. I coped the line <button on:click={() => actions.logout(actions.reload)}>Logout</button> yet it does not work.
My one enhancement that would make my particular use case quite helpful would be typescript support/declarations. The community seems to be moving heavily in this directions and I think it be a welcome addition.
If you need more information please let me know.
Thank you!
Use module in SSR context. My code:
<SDK>
<Create let:actions on:success on:failure>
<input bind:value={name} class="input" type="text" placeholder="username"/>
<input bind:value={email} class="input" type="email" placeholder="email"/>
<input bind:value={password} class="input" type="password" placeholder="password"/>
<Button class="button" on:click={actions.create(email, password, name)} type="submit"
label="Register"/>
</Create>
</SDK>SDK contains the default init from the README.
No errors
Errors:
Version 0.10.x
Windows
I'm using SvelteKit with SSR.
The latest version in npm is tied to appwrite ^0.2.3-beta
This does not seem to work with sveltekit out of the box:
__vite_ssr_import_0__.default is not a constructor
Installing direct from master gets further:
ReferenceError: require is not defined
at /node_modules/.pnpm/[email protected]/node_modules/cross-fetch/dist/node-ponyfill.js?v=5ad71818:1:19
at instantiateModule (/Users/jmathews/leavenoprints/leavenoprints-v1/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-cc49d7be.js:72639:166)
10:04:51 [vite] Error when evaluating SSR module /node_modules/.pnpm/[email protected]/node_modules/isomorphic-form-data/lib/index.js?v=5ad71818:
ReferenceError: module is not defined
at /node_modules/.pnpm/[email protected]/node_modules/isomorphic-form-data/lib/index.js?v=5ad71818:1:19
at instantiateModule (/Users/jmathews/leavenoprints/leavenoprints-v1/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-cc49d7be.js:72639:166)
10:04:51 [vite] Error when evaluating SSR module /node_modules/.pnpm/[email protected]/node_modules/cross-fetch/dist/node-ponyfill.js?v=5ad71818:
ReferenceError: require is not defined
at /node_modules/.pnpm/[email protected]/node_modules/cross-fetch/dist/node-ponyfill.js?v=5ad71818:1:19
at instantiateModule (/Users/jmathews/leavenoprints/leavenoprints-v1/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-cc49d7be.js:72639:166)
Adding the appwrite dependency explicitly, gets further, now compiles without issues, but the following error is seen in console:
Uncaught (in promise) SyntaxError: import not found: fetch
Adding appwrite to optimizeDeps fixes this:
kit: {
// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte',
adapter: adapter(),
vite: {
optimizeDeps: {
include: ['appwrite'],
},
}
}
I am using pnpm if that makes a difference.
Appwrite 3.2.0
SvelteKit v1.0.0-next.123
Thanks
If we execute this below svelte code and run in Chrome and Safari browser:
<script>
import { onMount } from 'svelte'
import dayjs from 'dayjs'
export let format = 'YYYY-MM-DD'
export let date = new Date()
let internal
const input = (x) => (internal = dayjs(x).format(format))
const output = (x) => (date = dayjs(x, format).toDate())
$: input(date)
$: output(internal)
</script>
<input type="date" bind:value={internal} min="2022-01-01" />The date before "2022-01-01" should not be visible to the user and user can't select the date as well before "2022-01-01".
It works well in chrome browser but not working in safari browser.
In Safari User can see the date before "2022-01-01" but user can't select the date.
Expected:
Date should not be visible to the user before "2022-01-01" for safari.
Version 0.10.x
Linux
No response
get latest svelte (SPA)
(setup docker & svelte)
npm install svelte-appwrite
paste code from here, fill config (endpoint, project, locale, key) with API key set to create users only
fix missing userId 😄 (see below)
npm run dev
<Appwrite {...config}>
<Create let:actions on:success={success} on:failure={failure}>
<input type="email" placeholder="email" bind:value={email} />
<input type="text" placeholder="password" bind:value={password} />
<input type="text" placeholder="name" bind:value={name} />
<button
on:click={actions.create({
email: email,
password: password,
name: name,
userId: userId,
})}
>
Register</button>
</Create>
</Appwrite>
create the user 😄
I get a full fledged error (which is good), but I don't see what's wrong with the password.
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
detail: Error: Missing required parameter: "password"
columnNumber: 31
fileName: "http://localhost:8080/build/bundle.js"
lineNumber: 865
message: "Missing required parameter: \"password\""
stack: "create@http://localhost:8080/build/bundle.js:865:31\ncreate@http://localhost:8080/build/bundle.js:3459:48\ncreate_default_slot_1/mount/dispose<@http://localhost:8080/build/bundle.js:3563:48\nEventListener.handleEvent*listen@http://localhost:8080/build/bundle.js:116:14\nlisten_dev@http://localhost:8080/build/bundle.js:472:31\nmount@http://localhost:8080/build/bundle.js:3559:10\nmount@http://localhost:8080/build/bundle.js:3334:22\nmount@http://localhost:8080/build/bundle.js:3394:31\nmount_component@http://localhost:8080/build/bundle.js:330:30\nmount@http://localhost:8080/build/bundle.js:3656:23\nmount@http://localhost:8080/build/bundle.js:3094:22\nupdate@http://localhost:8080/build/bundle.js:3170:19\nupdate@http://localhost:8080/build/bundle.js:241:40\nflush@http://localhost:8080/build/bundle.js:208:23\ninit@http://localhost:8080/build/bundle.js:424:13\nApp@http://localhost:8080/build/bundle.js:3846:11\napp<@http://localhost:8080/build/bundle.js:3857:17\n@http://localhost:8080/build/bundle.js:3866:3\n"
<prototype>: Error.prototype { stack: "", … }
eventPhase: 0
explicitOriginalTarget: <button>
isTrusted: false
originalTarget: null
returnValue: true
srcElement: null
target: null
timeStamp: 5982
type: "failure"
<get isTrusted()>: function isTrusted()
Different version (specify in environment)
Linux
"svelte-appwrite": "^0.2.3-beta"
appwrite v:0.13.4.304
local Docker version 20.10.7, build 20.10.7-0ubuntu5.1
node v14.18.3
npm 8.4.0
Granted, could very easily be my ignorance; however, the following doesn't give me values from the slot:
<script>
import * as M from "svelte-materialify/src";
import * as I from "@mdi/js";
import * as A from "svelte-appwrite";
let preferences;
let prefActions;
function loadPrefs(e) {
preferences = e.detail;
}
</script>
<M.Container>
<A.User let:user>
<A.Preferences
let:prefs={preferences}
let:actions={prefActions}
on:failure
>
Preferences: {preferences}
{prefActions}
</A.Preferences>
</A.User>
</M.Container>
Results in:
{} Preferences: undefined [object Object]
I've analyzed prefActions and it is correct but preferences remains undefined?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.