svelte-nodegui icon indicating copy to clipboard operation
svelte-nodegui copied to clipboard

Unexpected handling of whitespace with respect to child text nodes

Open shirakaba opened this issue 3 years ago • 0 comments

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:

image

This leads to:

image

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.

shirakaba avatar Jan 30 '21 15:01 shirakaba