svelte-nodegui
svelte-nodegui copied to clipboard
Unexpected handling of whitespace with respect to child text nodes
Problem
When text content is specified in between HTML tags, I'd expected the Svelte runtime to to create a new text node for each line, and for each text node to have its text trimmed. I might be mistaken, though.
It's unclear what are the responsibilities of the Svelte runtime relative to the renderer (and NodeGUI itself), and so I'm cautious about performing any splitting and trimming on the renderer if it may lead to downstream problems upon state changes (e.g. text nodes subsequently being removed).
Svelte source
<script>
import { onMount } from 'svelte';
let win;
onMount(() => {
window.win = win;
win.nativeView.show();
return () => {
clearInterval(timer);
delete window.win;
};
});
</script>
<window bind:this={win}>
<view id="container" style="background-color: 'cyan';">
<text>
Some text
with actual
children
</text>
</view>
</window>
<style>
#container {
align-items: 'center';
justify-content: 'space-around';
}
#nice_button {
font-weight: 900;
}
</style>
Svelte runtime handling
The text content is treated as a single text node, rather than being split up based on white space:
This leads to:
Further reading
The first source of truth should be this specification: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace
We should also refer to how Svelte Native handles this.