Comments (7)
Thanks for understanding, I'll reopen this until I've fixed the docs!
from sveltekit-flash-message.
Since Svelte preloads the links, this is expected. You can modify that behavior with these options: https://kit.svelte.dev/docs/link-options
from sveltekit-flash-message.
Thank you. You are correct that changing the data-sveltekit-preload-data
attribute to be tap
instead of hover
does fix this issue.
Do you think it is possible to not set the flash-message if the preload page is not navigated to?
from sveltekit-flash-message.
Not unless there is a way to detect if a link is preloading through the RequestEvent, and I don't think there is.
from sveltekit-flash-message.
I have figured out a workaround, that i believe makes sense. The idea is to store the url pathname we expect to navigate to within the flash-message, then only trigger the Toast if the expected url pathname matches the pages pathname.
Example
Start by updating the flash message to include the expected pathname we navigate to.
// app.d.ts
declare namespace App {
interface PageData {
flash?: {
type: 'success' | 'error';
message: string;
pathname: string; // Update here
};
}
}
When we try to navigate to the /private
page, we redirected to the homepage with the message of "Message from /private" as well as the pathname of the page we expect to redirect to.
// src/routes/private/+page.server.ts
export const load: PageServerLoad = async (event) => {
const message = { type: 'error', message: 'Message from /private', pathname: '/' } as const;
throw redirect(303, message.pathname, message, event);
};
In the layout page we subscribe to the flash store, which will trigger each time the flash-message is updated. The code will make an early return if $flash is undefined or if the pathname of the current page is not the same as the expected pathname from the flash-message
// layout.svelte
import { getFlash } from 'sveltekit-flash-message/client';
import { page } from '$app/stores';
const flash = getFlash(page);
flash.subscribe(($flash) => {
if (!$flash) return;
if ($flash.pathname != $page.url.pathname) return;
errorToast.message = $flash.message;
toastStore.trigger(errorToast);
});;
You might have noticed that a small bug is still present with the above implementation. When hovering over the private page, then manually navigating to the homepage, the toast is incorrectly displayed. This can be fixed by only triggering the toast if the navigation was done using redirects. To implement this we can create the isGotoNavigated
variable and subscribe it to the after navigate store to be true when the navigation was of type goto. Then return early if the navigation is not a redirect.
import { getFlash } from 'sveltekit-flash-message/client';
import { page } from '$app/stores';
import { afterNavigate } from '$app/navigation';
const flash = getFlash(page);
let isGotoNavigated = false;
afterNavigate(({type}) => {
isGotoNavigated = ['goto'].includes(type as string); // is true when the navigation was a redirect
})
flash.subscribe(($flash) => {
if (!$flash) return;
if ($flash.pathname != $page.url.pathname) return;
if (!isGotoNavigated) return;
errorToast.message = $flash.message;
toastStore.trigger(errorToast);
});
I would really love to see this implemented directly into the library as i believe it represents what most people expect when using the it for the first time.
I would like to hear your feedback on this, and if there are some downsides to this implementation. I also would like to contribute myself and put it under a settings flag. But that will be in a couple of days
from sveltekit-flash-message.
I'd like to keep things simple, so introducing an extra variable into the flash message isn't feasible as a requirement. Testing the type in afterNavigate isn't really optimal either since the cookie has already been set during the preload.
The only way to keep things simple would be to prevent the redirect (and hence the cookie) during the preload, but if it's not possible to detect preload in the load function, I'd rather add a note about data-sveltekit-preload-data
in the docs.
from sveltekit-flash-message.
That is totally understandable, preventing the redirect is the most elegant solution. And i think you are correct that differentiating between preloaded and non preloaded functions is non trivial.
I'm closing this issue, as it is intended behavior that can be mentioned in the docs.
from sveltekit-flash-message.
Related Issues (20)
- Flash not showing when redirecting from +layout.server.ts HOT 5
- No messages without refresh HOT 17
- Flash message not appearing when expected HOT 19
- Question: do I need to integration flashModule if I am using toasts? HOT 1
- Missing cookie Same-Site attribute HOT 3
- [SOLVED] Overwriting 'set-cookie' header via server hook prevents flash message HOT 2
- External callbacks not redirecting correctly HOT 8
- Example for flashCookieOptions HOT 7
- Flash Messages Not Working HOT 5
- Error when using vitest 0.34.1 - Failed to resolve entry for package "sveltekit-flash-message". HOT 3
- Flash message not appearing when using layout groups. HOT 2
- Firefox Warning: Misuse of the SameSite Cookie Attribute HOT 3
- setFlash not working HOT 3
- Persistent Flash store data after server redirect HOT 12
- flash store undefined after redirect HOT 1
- Identifier 'load' has already been declared HOT 8
- Error: getFlash options can only be set at the first call to getFlash. HOT 9
- feature request: consider adhering to SvelteKit 2.0 practices regarding (not) throwing errors/redirects HOT 3
- chore: update SvelteKit `peerDependency`
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sveltekit-flash-message.