How to get shallow routing working with dialogs?

[armchair-traveller]

SvelteKit shallow routing

For example when I do this:

  <Dialog.Root
    open={$page.state.showModal}
    onOpenChange={(showModal) => {
      if (!showModal && $page.state.showModal) history.back()
    }}
  >
    <Dialog.Trigger
      on:click={() => {
        pushState('', { showModal: true })
      }}

or if I make a derived store with a custom set using history.back() and pushState... anyway I just can't figure out a way that works. It's all very weird. Nothing works properly

One thing to note: when history.back() is run, it seems to cause .state.showModal to update with the same state before reverting to the previous state.

Only thing that comes to mind is if the internal state setting was allowed to be controlled by the consumer, and they could just listen to events rather than having it handled by the inside. But that's not how the lib works at the moment.

EDIT: Well, of course could just use melt. Just wanted to know if it was a skill issue

[cannap]

Check this
https://www.youtube.com/watch?v=B19DEGEclfk

[armchair-traveller]

tysm! Having a working example made all the difference. You just solved hours of debugging a simple type issue for me haha (and future work to add melt-ui's dialog)

It was indeed a skill issue 😂. The wall I kept running into after fixing is if the prop is not present on the page state, it'll be undefined, so the open prop on the component won't close the dialog because it is probably strict equality checking. Making it into a boolean works. Haha type issues. But also not declaring a variable and using it straight-up would trigger updates twice on close, so I see why it needs to be initialized and updated with a reactive statement.

What I have working now:

<script>
$: loginOpen = !!$page.state.login
</script>

<Dialog.Root open={loginOpen} onOpenChange={(open) => !open && history.back()}>
  <Dialog.Trigger
    on:click={() => !loginOpen && pushState('', { login: true })}

So of course just checking the types wouldn't have fixed it entirely, as the scroll would break if it updated close state twice.

EDIT: As an aside, this acknowledges my need to dedicate more time to watching Svelte content when I'm more free

[julien-blanchon]

I'm curious how this can integrate with formkit. I'm not sure where to define my form data