pubkey
ADD svelte-kit example
- uses latest svelte-kit
- changes svelte.config.js to add node shims needed by PouchDB
- UI based on examples/svelte and TodoMVC
- fix examples/svelte error when creating a new note with primaryKey already used
- sync with remote PouchDB
- no tests
This PR contains:
- a new example
Describe the problem you have without this PR
- The latest svelte-kit uses vite. There wasn't an example of the usage of RxDB with vite.
Hey @fredguth So the other examples represent a form to do CRUD operations on the hero list. I think all examples should implement exactly the same because one day I want to unify the end-to-end tests the test the examples.
Also we need all examples to have tests that run in the CI because there are already too many outdated ones and having them in the CI would prevent this.
- I am adding
e2etestfrom the svelte example to this example. It works. I will send a new PR. But if I am reading it correctly, it only testsinsert, the same for the e2etest in react example folder. I was trying to add the update and delete test, but testcafe seems a little buggy. It didn't click on buttons. - I did not understand your comment about CRUD. The svelte-kit example is a CRUD. It is exactly like the svelte example (which is not working anymore, btw). I am adding an animated gif to the README to showcase it. Only after I implemented it using svelte folder as a model that I noticed that other examples were not this notelist but a herolist.
Hi @pubkey, I just added a commit to the PR with the e2etest. But while creating the screeshot animated gif for the README I noticed that tabs of the same browser works ok, but when the synchronization with a tab in another browser (which reads/writes in the same pouchdb) seems to not be working properly.
This is probably because of my lack of knowledge of RxDB. In lib/db.ts I setup the syncCouchDB, which by my understanding from the RxDB documentation, should by default bring live updates from the db to my instance.
In components/NoteList.svelte I subscribe to the notes collection (line 13). Here, I expected that any change in the notes collection would trigger the assignment of noteList variable. This is not happening.
While debugging I noticed that the problem seems to be only with INSERT. I added a console.log in the subscription callback and noticed that DELETE and UPDATE events are triggered, but INSERT is not 🤔
I did not understand your comment about CRUD
Check the other examples, they are the exact same ui with the same features where there can be heroes inserted with colors attached to them. I want to have all examples to do exactly the same.
Notice that adding an example means I will have to maintain it many years from now, while you might have moved to other projects likely.
@pubkey, I just copied what was on the /examples/svelte without noticing it was different than the other examples. I will change that, no problem. /examples/svelte is not working and is with a different example, should I delete this folder as well for others not to be confused?
BTW, could you take a look on what I am doing wrong on the syncCouchDB? Or maybe I am doing something wrong when I create the collection observable. For some reason I only receive events from remote PouchDB on update and removal, not on inserting. This is probably something stupid, I am new to RxDB.
/examples/svelte is not working
But it is tested in the CI and works there. So it should work at least. But yes, you can remove that one and we can replace it with a svelte-kit example.
In components/NoteList.svelte I subscribe to the notes collection (line 13). Here, I expected that any change in the notes collection would trigger the assignment of noteList variable. This is not happening.
This should work. Your code looks good. But I have no idea how the svelte change detection or hooks works, so I do not know.
I am looking in the vue and angular implementations and I realize that I don't understand the schema: why there is a maxHP that can be 1000 while hp has a maximum of 100?
export const HERO_SCHEMA_LITERAL = {
title: 'hero schema',
description: 'describes a simple hero',
version: 0,
keyCompression: false,
primaryKey: 'name',
type: 'object',
properties: {
name: {
type: 'string',
default: ''
},
color: {
type: 'string',
default: '',
minLength: 3
},
maxHP: {
type: 'number',
minimum: 0,
maximum: 1000
},
hp: {
type: 'number',
minimum: 0,
maximum: 100,
default: 100
},
team: {
description: 'color of the team this hero belongs to',
type: 'string'
},
skills: {
type: 'array',
maxItems: 5,
uniqueItems: true,
items: {
type: 'object',
properties: {
name: {
type: 'string'
},
damage: {
type: 'number'
}
}
},
default: []
}
},
required: [
'name',
'color',
'hp',
'maxHP',
'skills'
]
} as const;
A closer look showed that maxHP is set a random number from 100 to 1000. Was this to test some case?
No I think when I first started creating these examples, it was not clear yet what I want to do.
I changed the maxHP in the schema. Another thing I don't understand in the vue implementation. Take a look at HeroEdit.vue:
setup(props, { emit }) {
const formData = ref(props.hero.hp);
const synced = ref<boolean>(true);
const deleted = ref<boolean>(false);
firstValueFrom(
props.hero.$.pipe(
skip(1),
map(() => false)
)
).then((v: boolean) => (synced.value = v));
firstValueFrom(props.hero.deleted$).then(() => (deleted.value = true));
...
what does this code means? What is this sync and delete check you do in the component? Are you trying to check if the value changed in the database since it was loaded? Should you not test that only when trying to commit the change?
I changed it to equal to other examples, but I haven't had the time to add the test.