Skip to content
This repository was archived by the owner on Mar 18, 2025. It is now read-only.

fix: Node handling #60

Merged
merged 2 commits into from
Apr 20, 2021
Merged

fix: Node handling #60

merged 2 commits into from
Apr 20, 2021

Conversation

shirakaba
Copy link
Collaborator

@shirakaba shirakaba commented Apr 20, 2021

Closes #42

My test case for this was, incidentally:

<script lang="ts">
    import { onMount } from "svelte";
    import type { NSVElement, RNWindow } from "@nodegui/svelte-nodegui";
    import { Direction } from "@nodegui/nodegui";

    /**
     * The exact type for this is: NSVElement<RNWindow>
     * ... However, the Svelte language tools erroneously expect all bind:this values to extend HTMLElement, so
     * for now, we have to rely on reasserting the type.
     */
    let win;
    let urlWidget;
    let urlWidgetTextContent: string = "https://reqres.in/api/products/3";
    let dataPromise: Promise<any> | undefined;
 
    function loadPressed(): void {
        dataPromise = loadData();
    }

    /**
     * async/await doesn't appear to be working. This is probably due to missing a Webpack setting of some sort.
     * For the time being, we can write old-school Promises instead.
     * We can still use await blocks in the Svelte HTMLX markup as that seems to work in a different way.
     */
    async function loadData(): Promise<any> {
        return await new Promise<"hello">((resolve) => {
            setTimeout(() => resolve("hello"), 0);
        });
    }

    onMount(() => {
        (window as any).win = win; // Prevent garbage collection, otherwise the window quickly disappears!
        (win as NSVElement<RNWindow>).nativeView.show();

        dataPromise = loadData();

        return () => {
            delete (window as any).win;
        };
    });
    let counter = 0;
</script>

<window
    bind:this={win}
    windowTitle="Seafile Share link DL">
    <view class="vertical">
        <view id="view7" class="horizontal">
            <text id="txt8">Share link url:</text>
            <lineEdit id="lineEdit" bind:this={urlWidget}>
                {urlWidgetTextContent}
            </lineEdit>
            <button id="btn10" text="Load" on:clicked={loadPressed}/>
            <button text="{counter.toString()}" on:clicked={() => counter++}/>
        </view>
        <view id="view6">
            {#if dataPromise}
                <text id="txt1">Sanity</text>
                <!-- FodderA -->
                {#await dataPromise}
                    <!-- FodderB -->
                    <text id="txt2">Nothing loaded</text>
                {:then data}
                    <!-- FodderC -->
                    <text id="txt3">{JSON.stringify(data, null, 4)}</text>
                    <text id="txt3c">Just in case {counter}</text>
                    <text id="txt3b">A {JSON.stringify(data, null, 4)} C</text>
                {:catch error}
                    <!-- FodderD -->
                    <text id="txt4">{error.message}</text>
                {/await}
                <!-- FodderE -->
            {:else}
                <text id="txt5">No dataPromise</text>
            {/if}
        </view>
    </view>
</window>

<style>
    /* 
     * CSS has a few gotchas for now.
     * 1) Some values need to be enclosed with quotes (e.g. `width: '100%';` rather than `width: 100%;`).
     *    See: https://github.com/nodegui/svelte-nodegui/issues/4
     * 2) Classes are not supported yet; they're a bit weird in Qt5.
          See: https://github.com/nodegui/svelte-nodegui/issues/6
     * 3) You can't write element-level rules like `text { color: 'red'; }`, unless they're global (not scoped).
     *    For scoped rules, you have to refer to the underlying native element, e.g. `QLabel { color: 'red'; }`.
     *    See: https://github.com/nodegui/svelte-nodegui/issues/7
     */
    .vertical{
        flex-direction: column;
    }

    .horizontal{
        flex-direction: row;
    }

    #lineEdit{
        flex: 1;
    }
</style>

…ying native text is updated with each addition/removal of a text node.
…fore behaviour, and have possibly fixed the problem of missing text nodes in await blocks.
@shirakaba shirakaba merged commit d60782f into main Apr 20, 2021
@shirakaba shirakaba deleted the fix/node-handling branch April 20, 2021 16:41
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
1 participant