Recieve a Writable as External Open State

[Tyler-Petrov]

Prerequisites

• I'm using Bit-UI through the shadcn-svelte wrapper.

The Code Snippet

<script lang="ts">
    import { get, writable } from 'svelte/store';
    import * as Collapsible from '$shadcn/collapsible';

    const collapseState = {
        open: writable(false)
    };
</script>

<Collapsible.Root
    bind:open={() => get(collapseState.open), (newOpen) => collapseState.open.set(newOpen)}
>
    <Collapsible.Trigger>Can I use this in my project?</Collapsible.Trigger>
    <Collapsible.Content>
        Yes. Free to use for personal and commercial projects. No attribution required.
    </Collapsible.Content>
</Collapsible.Root>

The Explanation

This is certainly a contrived example, and if this were my actual use case, I'd just use a $state rune and call it a day. I have to use a writable for external reasons. For some reason, svelte doesn't allow subscribing directly to a writable property of an object in this manner.

The bind:open directive is broken up into its getter and setter functions, allowing it to work with the writable without needing a separate variable for the store subscription.

The Solution

The solution I'm proposing is for the collapsible component (and perhaps dialog and alert-dialog too) to be able to receive a Writable<boolean> directly for the open property. The component would then check if the open property is a writable. If it is, the component would subscribe to it; otherwise, it would use the existing implementation.