Make "type" reactive in TextField

[morenol]

I am trying to create a component for password input. This is working fine for the changing of the icon, but the type of the input is not being changed.

<script>
    import { TextField } from "smelte";
    export let value = "";
    export let name = "";
    export let placeholder = "";
    export let label = "";
    export let required = true;
    let type = "password";
    $: icon = type === "password" ? "visibility" : "visibility_off";
</script>

    <TextField
        {name}
        {required}
        {type}
        outlined
        {label}
        bind:value
        append={icon}
        on:click-append={(a) => {
            type = type === "password" ? "text" : "password";
        }}
    />

For now, my workaround would be something like this, but it would be great if that piece of code works without the workaround.

<script>
    import { TextField } from "smelte";

    export let value = "";
    export let name = "";
    export let label = "";
    export let required = true;

    let type = "password";

    $: icon = type === "password" ? "visibility" : "visibility_off";
</script>

{#if type === "password"}
    <TextField
        {name}
        {required}
        {type}
        outlined
        {label}
        bind:value
        append={icon}
        on:click-append={(a) => {
            type = type === "password" ? "text" : "password";
        }}
    />
{:else}
    <TextField
        {name}
        {required}
        {type}
        outlined
        {label}
        bind:value
        append={icon}
        on:click-append={(a) => {
            type = type === "password" ? "text" : "password";
        }}
    />
{/if}

[dennisjlee]

I think there is a Svelte limitation that might be related to this - if you try to change the type of an input dynamically in the Svelte REPL with a bind:value on that input, you will get an error 'type' attribute cannot be dynamic if input uses two-way binding

More info here: https://stackoverflow.com/a/57393751