Using with Svelte?

[frederikhors]

It's the first time I come here.

I'm a Svelte 3 happy user.

Do you know if there will ever be a way to use this amazing project with Svelte?

Is it React.js only?

[radex]

No, it's not React.js only. There's no React-specific logic in the core, but you'll probably need some glue code similar to our withObservables. Look at this thread: https://github.com/Nozbe/WatermelonDB/issues/765

[frederikhors]

I'm tring it right now with a new https://github.com/sveltejs/template app.

I'm using this code:

import { Database } from '@nozbe/watermelondb'
import LokiJSAdapter from '@nozbe/watermelondb/adapters/lokijs'

import schema from './schema'
import Post from 'model/Post'
import Comment from 'model/Comment'

const adapter = new LokiJSAdapter({
  schema,
  useWebWorker: false,
  useIncrementalIndexedDB: true
})

export const database = new Database({
  adapter,
  modelClasses: [Post, Comment],
  actionsEnabled: true
})

the very first error when I'm just importing database is:

Uncaught (in promise) TypeError: Failed to resolve module specifier "fs". Relative references must start with either "/", "./", or "../".

in browser's console.

What can it be?

EDIT: This can be fixed after this: https://github.com/Nozbe/WatermelonDB/issues/823.

[frederikhors]

So far I can say that I have managed to make it work. Even observables (which in Svelte are very easy to use: https://svelte.dev/docs#Store_contract).

Now the problem is with the declaration of the fields: decorators are creating problems for the bundler (Rollup).

Is there any way to avoid them for now, @radex?

[frederikhors]

As soon as I have something stable I will push a test project so it will also pass your sifting and we can maybe officially support Svelte! :smile:

[radex]

Now the problem is with the declaration of the fields: decorators are creating problems for the bundler (Rollup). Is there any way to avoid them for now, @radex?

You can avoid decorators, but it's not been designed for it, so the result isn't pretty. Just take a look at what Watermelon decorators do, they're really simple: https://github.com/Nozbe/WatermelonDB/tree/master/src/decorators

[frederikhors]

Thanks. I'm trying with Typescript now. I'll let you know in a few moments.

[frederikhors]

It's working with Typescript. I'll update this issue.

[fachrihawari]

@frederikhors I love svelte, and wanna made something with svelte+watermelondb, mind to share how you made it works? thanks in advanced

[niklasgrewe]

@frederikhors i am also interesting in this topic. Could you explain and show some code snippets, how you made it works? Does it also works with vite.js (the new bundler for sveltekit) ?

[floer32]

I got something working or partially working, but it took some workarounds I haven't tried before on other rollup projects. (There's definitely some "duct tape.") Hopefully it keeps working 🤞 and if it does, I'll try to share what worked

[trenta3]

Hi @hangtwenty ! I'm also interested in building something with WatermelonDB and Svelte, do you have a public sample repository that I can look at? Is it worth it, in your opinion, to make the two of them cooperate?

[maietta]

I'm interested too!

[jgod]

I got something working or partially working, but it took some workarounds I haven't tried before on other rollup projects. (There's definitely some "duct tape.") Hopefully it keeps working 🤞 and if it does, I'll try to share what worked

How is it going? @floer32

[alfrednerstu]

Anyone got a template for WatermelonDB and Svelte Kit integration now in 2023?

[bluepuma77]

Any template for Svelte(Kit) available in 2024? It's gonna be really interesting with upcoming Svelte 5 runes 😄