fix: better iframe navigation

[dummdidumm]

alternative to #187 which keeps the back/fwd navigation while also fixing the weird history pollution from iframe to parent (which was there regardless of the back/fwd navigation feature)

• uses postMessage to trigger the inner SvelteKit's goto method
• monkeypatches iframe's history.pushState to use replaceState instead to not create history entries, keeping the parent window's navigation order intact

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
learn-svelte-dev	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Jan 24, 2023 at 7:44PM (UTC)

[Rich-Harris]

This will break any tutorials that involve navigation.type, no?

[Rich-Harris]

(I think we should undo #181 and work on this at leisure, rather than leaving the current UI in place any longer)

[dummdidumm]

What do you mean by navigation.type?
(if you're nervous keeping the current state active we can do revert first if you want)

[Rich-Harris]

In beforeNavigate and afterNavigate etc — navigation.type should be popstate but will be link https://kit.svelte.dev/docs/types#public-types-navigationtype. I'll do the revert, then we can figure this stuff out later

[dummdidumm]

Ah I see. We could

• just not worry about this case in the respective tutorial
• specifically disable the pushState hack and use pop/push delta commands instead of goto for that tutorial
• disable the pushState hack and use pop/push delta for all tutorials (with the drawback that it pollutes the parent history like before)

I don't think that should hold us back though, since without this feature there wouldn't even be a way to trigger the popstate navigation type within the iframe.

[brandonmcconnell]

@dummdidumm @Rich-Harris Another idea could be to allow the iframe state to work naturally until we see some movement on whatwg/html#6501. That meaning, we could mesh the iframe history with the window's history and have window preserve the iframe state by storing the iframe's current path in a URL param, like…

https://learn.svelte.dev/tutorial/pages?path=/about

That way, it's not so much pollution as it is standard history tracking where there are no redundant polluted entries, but a bunch of unique entries that are all meaningful when they occur.