Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Disable router for all links #6914

Closed
MaximeMenotti opened this issue Sep 20, 2022 · 9 comments · Fixed by #7721
Closed

Disable router for all links #6914

MaximeMenotti opened this issue Sep 20, 2022 · 9 comments · Fixed by #7721
Milestone
1.0

Comments

@MaximeMenotti
Copy link

Describe the problem

I use sveltekit in a micro-frontend like usage, injecting html and js generated by svelte-kit in another website.
I used router=false option to avoid sveltekit to interfere with the router of the receiving site but keep hydration to activate some js interaction.

Since this PR was merged I should use this to keep same usage:

old: router = false / hydrate = true -> new: csr = true + set data-sveltekit-reload if you want native navigations

Unfortunately receiving site links like <a href="/">Homepage</a> are still caught by sveltekit router even if I set data-sveltekit-reload in <html> tag of the receiving site.

Describe the proposed solution

Bring back another configuration field router set to true by default.
As csr and ssr fields add a way to configure this new field in page.js or layout.js

Alternatives considered

No response

Importance

i cannot use SvelteKit without it

Additional Information

I don't have all the history of the changes of router field, I hope this issue was not already studied.
It was a very convenient feature for me, I hope I can find a solution.
I can make the PR with proposed solution if needed.
@Rich-Harris
Copy link
Member

data-sveltekit-reload is the solution here. If that's not working, there's a bug, and this issue will need a reproduction

@Rich-Harris Rich-Harris added this to the whenever milestone Sep 20, 2022
@MaximeMenotti
Copy link
Author

Thanks for your response.
I make a reproducer here.

I know that my usage is very specific but the router config option was very perfect for my needs.
As I inject some content create with svelte-kit in other application, I need to ensure that injected code will not interfere with host app...
The new way using data-sveltekit-reload (even if it can work) would make my user override all their existing links with this option.

Can you give me more information about the decision of merging router and hydrate parameters in csr ?

Let me know if I can do anything else. I'll be very happy to contribute !

@mgrubinger
Copy link
Contributor

I have the same issue as @MaximeMenotti (SvelteKit app loaded as part of a much larger monolith). Setting data-sveltekit-reload on every link (even outside of the SvelteKit app) is not an option, as I don't control parts of it.
Also I use existing non-SvelteKit components that use their own history.pushState/replaceState and history.back. On history.back() the page navigates to the SvelteKit index page (even if that was never visited and thus is not in the history stack), which is not at all desired.

Let me know if you need a reproduction for this behaviour as well.

In short: please provide a way to completely disable the SvelteKit router again. Thanks!

@mgrubinger
Copy link
Contributor

I managed to work around the history.back() issue by calling event.stopImmediatePropagation(); in a custom popstate event listener. This prevents the event to ever reach the SvelteKit router.

I would much prefer to be able to deactivate the SvelteKit router again tough.

@Rich-Harris
Copy link
Member

@MaximeMenotti took me a while to figure this out, but the reason data-sveltekite-reload isn't working in your case is perhaps best described charitably as a React bug. Essentially, this...

<a href="/" data-sveltekit-reload>
  Homepage
</a>

...results in the following markup in your Next app (note the ="true"):

<a href="/" data-sveltekit-reload="true">
  Homepage
</a>

In HTML, an attribute without an explicit value defaults to the empty string. React, shockingly, gets this wrong. You can work around it however by explicitly using the empty string:

<a href="/" data-sveltekit-reload="">
  Homepage
</a>

You only need to do this on a top-level element.

@mgrubinger it sounds like in your case what we really want is for the SvelteKit router to disregard history entries that it didn't create — does that sound right? That feels achievable

@mgrubinger
Copy link
Contributor

@Rich-Harris thanks for looking into this! Yes, I think that would solve the issue in my scenario 👍

@MaximeMenotti
Copy link
Author

@Rich-Harris thanks a lot to look into this!

You're right I am able to work with this:

<a href="/" data-sveltekit-reload="">
  Homepage
</a>

But in a other hand I feel the way to use this workaround more painful for my consumers…
I'm feeling weird about asking them to add a data-sveltekit-reload on one of their top tree html tag (on the body tag for exemple) just to be sure that the part of the app that I Inject will not interfere with the rest of their site...

Keeping the csr and ssr params but bringing back the router parameters is not an option ?
I can initiate a pull request if that helps.

@Rich-Harris Rich-Harris modified the milestones: whenever, 1.0 Nov 17, 2022
Rich-Harris added a commit that referenced this issue Nov 19, 2022
@Rich-Harris
ignore popstate events from outside the router - fixes #6914
067d2ef
@Rich-Harris Rich-Harris mentioned this issue Nov 19, 2022
Merged
5 tasks
Rich-Harris added a commit that referenced this issue Nov 19, 2022
@Rich-Harris
always set accept/accept-language headers when making a self-request - …
8694d0d 
…closes #6914
dummdidumm pushed a commit that referenced this issue Nov 21, 2022
@Rich-Harris
[fix] ignore popstate events from outside the router (#7721)
fbe4bcf 
fixes #6914
@mgrubinger
Copy link
Contributor

thank you! 💯

@Rich-Harris Rich-Harris mentioned this issue Nov 22, 2022
Closed
@mandrasch
Copy link

mandrasch commented Feb 17, 2023 •
edited
Loading

For anyone finding this via search engine (like myself), the option is documented is here: Routing and Link options: data-sveltekit-reload. And multiple links can be changed via Disabling options as far as I understand.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
1.0
Development

Successfully merging a pull request may close this issue.

ignore popstate events from outside the router sveltejs/kit
4 participants
@mgrubinger @mandrasch @Rich-Harris @MaximeMenotti