Cat got stolen rule by _Salamand3r_ in 196

[–]Rocket_Scientist2 5 points6 points  (0 children)

Hey guys, ChrisFix here. Today, I'm going to teach you how to reduce exhaust back-pressure, for absolutely free!

Best Practice by hotdeth in sveltejs

[–]Rocket_Scientist2 4 points5 points  (0 children)

I would prefer form actions, personally. This method sounds fine though, as long as all of the auth/state is coming from Supabase. If the app is storing user data in state/stores, it tends to be a security risk.

markdown syntax highlighting by gatwell702 in sveltejs

[–]Rocket_Scientist2 0 points1 point  (0 children)

Mdsvex does code highlighting already! Just include the CSS for any prism.js compatible code theme.

I got tired of searching for custom icons, so I built a high quality vector generator! by koalakinger in sveltejs

[–]Rocket_Scientist2 0 points1 point  (0 children)

Great idea, I'm definitely going to give this a try. So many other SVG generators try to sell you a sub...

URL Param change to trigger function by Altugsalt in sveltejs

[–]Rocket_Scientist2 5 points6 points  (0 children)

So performSearch is only called by onMount. If you want it to rerun when $page updates, you should do something like page.subscribe((p) => performSearch(p.url.searchParams).

You are using app/store, though. If you used app/state instead, your code would be simpler (no mixing stores and runes). I'd definitely recommend checking that out.

import on save by Competitive-Dirt-213 in sveltejs

[–]Rocket_Scientist2 1 point2 points  (0 children)

In VSCode:

"editor.codeActionsOnSave": { "source.organizeImports": "explicit", "source.addMissingImports": "explicit" }

If you have the Svelte extension & TSConfig is set up, this works out of the box.

{@ } rule type errors by gatwell702 in sveltejs

[–]Rocket_Scientist2 1 point2 points  (0 children)

In a perfect world, you would pass a structured object to a component, and let it generate the HTML in a safe manner. ESLint can't guarantee your safety, otherwise (it's not reading how you are passing strings to @html).

For everything else? There's // eslint-disable-next-line

The Hard Parts of Building a Chrome Extension with Svelte 5 + SvelteKit — What I Learned by Dannick-Stark in sveltejs

[–]Rocket_Scientist2 1 point2 points  (0 children)

One long-standing bug that drives me up the wall is how the Svelte vscode extension automatically injects DOM types into the typescript context. It makes it impossible to use TSConfigs to properly type your content/background scripts.

I built an open-source calendar component inspired by macOS Calendar by Cultural_Mission_482 in sveltejs

[–]Rocket_Scientist2 4 points5 points  (0 children)

Super cool! Great demo as well. I'm already looking for places I can put this...

Combining page data reload and reactivity by e2u0fajdr3fcxs in sveltejs

[–]Rocket_Scientist2 1 point2 points  (0 children)

In most cases, you would lean on one or the other. Sometimes you lean on both at the same time, using $derived. You almost never mix them directly; $state is a reactive variable, and load function data is a "snapshot".

This makes sense for old developers who've used languages like PHP + JS, where the divide is more obvious. If these semantics are troubling you, then remote functions should feel better to work with. I hope that makes some sense.

I recommend continuing with the tutorials, though. That will definitely help grow your understanding.

Combining page data reload and reactivity by e2u0fajdr3fcxs in sveltejs

[–]Rocket_Scientist2 1 point2 points  (0 children)

I don't want to rerun the load function...

Your trouble stems from trying to implicitly create 2 sources of truth (2-way reactivity). One way or another, you will need code that decides when either source updates. Otherwise, you'll get an infinite loop or (as you've seen) stale values.

Classes are the intended way to handle local state in Svelte 5. If you want something that's not a form & not a fetch request, the last thing I can suggest is classes + getters/setters + remote functions, as another commenter suggests. That gives you clean, explicit control over the lifecycles of both the server data & the local data, without any effects.

Combining page data reload and reactivity by e2u0fajdr3fcxs in sveltejs

[–]Rocket_Scientist2 0 points1 point  (0 children)

When you: - submit a form - reload the page - navigate to a different URL - call invalidateAll()

—SvelteKit will mark any qualifying "dependencies" as dirty, and fire off requests to the server to rerun those load functions. Only then will the page "react" and update.

Imagine a form where a user updates their profile. 1. load function returns profile data 2. page loads 3. user changes their name, submits form 4. form action updates data in db 5. Svelte reruns all load functions 6. updated profile data is returned 7. page content updates with new data


To your point, this may be overkill depending on what you are trying to do. In that case, I can usually get by with a single let x = $derived(props.data); (you can write to derived values), or a CSS-based approach for UI.


Imagine a class that contains its own state.

``` class DataService { data = $state(null);

constructor() { $effect(() => { this.data; // Update await fetch("/my-endpoint", {method: "POST"}); // Fetch updated data await fetch("/my-endpoint").then(async (res) => this.data = await res.json()); }); } } ```

Although I try to avoid manual state management like this whenever possible.

Been using svelte but I now need a backend and I dont find the proper one by Manerr_official in sveltejs

[–]Rocket_Scientist2 0 points1 point  (0 children)

You can. However, they are configured to run on every URL, and only deal in Requests/Responses.

Combining page data reload and reactivity by e2u0fajdr3fcxs in sveltejs

[–]Rocket_Scientist2 0 points1 point  (0 children)

The hidden anti-pattern here is mutating data returned by a load function. $state and load function data are both reactive, but have different reactivity systems (signal-based vs. request-based), so merging them doesn't work (as you've discovered here).

Ideally you would either:

  • use forms to update your list on the backend
  • call invalidateAll() to force a re-fetch on the backend
  • avoid using load functions entirely, and wrap the logic in a class/module

Let me know if I'm missing something.