search

nodegui / svelte-nodegui

Build performant, native and cross-platform desktop applications with native Svelte + powerful CSS-like styling.🚀
https://svelte.nodegui.org/
MIT License
2.84k stars 55 forks source link

(#if, #each, and #await blocks not working fully) Issue updating text nodes: "addChild() called on an element that doesn't implement nodeOps.remove() [ undefined ]" #42

Closed shirakaba closed 3 years ago

shirakaba commented 3 years ago

Found in https://github.com/nodegui/svelte-nodegui/issues/40#issuecomment-803454533:

  1. If you wrap the whole {#await}...{/await} block with an {#if dataPromise}, the enclosed text elements fail to update, with reasons relating to the next point.
  2. The console is spamming addChild() called on an element that doesn't implement nodeOps.remove() [ undefined ]. This is something to do with updating the child text nodes passed into the <text> element. That's a bug with the text-updating logic, though somehow we get away with it in this example. I'll track it.
mperreir commented 3 years ago

In fact it happens also in other situations:

  1. {#each ... as ...} ... {/each} inside a {#if...} ... {/if} works correctly for the first update. But then if the variable tracked by the{#if}changes, only the first élément of the{#each}is inserted. The other ones fail with aaddChild() called on an element that doesn't implement nodeOps.insert() [ 'view' ]` in the console.
  2. using only {#each ... as ...} ... {/each} works (even when the tracked variable is update) but still throws addChild() called on an element that doesn't implement nodeOps.remove() [ undefined ] in the console. This makes {#if} almost unusable 😞 .
shirakaba commented 3 years ago

I've found the root cause of this (which would affect both #if and #each equally), but need to spend some more time on it to understand the appropriate way to fix it. It looks like my implementation for addChild() is incomplete in some way. I'll have to compare with Svelte Native and figure out how to implement this missing case.

mrsauravsahu commented 3 years ago

@shirakaba looks like this is the same issue I was encountering when I created that example svelte-nodegui app. (https://github.com/nodegui/examples/pull/38) the nodes weren't updating inside an {#if} block.

shirakaba commented 3 years ago

Hopefully fixed with the changes I've made in v0.0.4! I rewrote a large amount of the DOM handling from the ground-up. It was handling perfectly on an #await block wrapped by an #if block. I haven't tried with #each blocks yet, but we can reopen this issue if we find it still affects those.