Level Up Your Svelte Stores

[@TechBuddy_]

I've been doing this for like 6 months now and feels soo good. Svelte stores and the flip animation are the best parts of svelte imo

[@hicoop]

Never thought of returning a destructed store. I guess a store is just an object with store-like attributes, not by some weird Class you have to initialize. Svelte always impresses. Nice vid

[@Huntabyte]

Right!? It provides so much flexibility and can accommodate so many different use-cases!

[@troyharris279]

Im still getting my fundamentals with HTML CSS and JavaScript, but seeing this makes me want to jump into Svelte immediately. Thank you for the videos, I feel like I can make all my dream sites once I start with Svelte.

[@DennisIvy]

Love your content man!

[@Huntabyte]

Thanks dude! Watched a lot of your Django content years ago it was very helpful!

[@DennisIvy]

I'm humbled ☺ @@Huntabyte

[@ConnorMoody]

This is awesome! Super eloquent and clean way of doing this. Definitely going to make use of this in my projects

[@KevinMacKenzie61]

Man, you're breaking my brain....but in the best way possible. Thanks!!

[@Huntabyte]

Hahaha it’s not a must use or anything, just there if you find yourself needing it!

[@zBrain0]

I actually did this just today to implement a generic responsive array store. So it has push and pop and filter, but under the hood it runs the update function so you can treat it like a regular array but you don't have to do any reassignment to get the UI to update. As a nice added bonus it allows me to declare my arrays as const

[@hello_world_104]

Wow this is great i often complicated my stores tring to have reusable functionality for different things. This will help me

[@DeviantFox]

Svelte 5 is going to make this even easier with Runes (Signals)

[@kyrregjerstad]

This is great! Gonna go digging through the MeltUI sourecode now :D

[@init1508]

Coool, feels like some OOP stuff

[@rogerpence]

As of Oct 2023, this code doesn't work. The arg signature for Svelte's Updater is now "export type Updater = (target_value: T, value: T) => T;" (I don't know when it changed). How should this code be changed to make Updater happy? Thank you!

[@fakiri25]

Great content! How did you do the auto-complete at 5:02 Is it a VS Code extension?

[@Huntabyte]

GitHub Copilot!

[@ScriptRaccoon]

Awesome explanation!

[@Huntabyte]

Thank you!

[@andreas.soderlund]

What do I see, object composition, aka object orientation! Hard not to end up there eventually. 😅 I was thinking about the callback method of updating that you show, how about using the subscribe method of the stores? Any disadvantage?

[@accountwizardindia8171]

I have no idea getting an error (parse-error) at const count "import { writable } from "svelte/store"; export function createCountStore (initialValue: number) { **const** count = writable(initialValue); function increment() {"

[@pieter-jan1000]

The value of the count writable is gone once I switch pages. Do you know why?

[@humbletitan8374]

going to have to watch these a few times before it sinks in. wonder what you think about stores since we are getting runes. I understand they are supposed to simplify reactivity. But the mental model of stores worked for me. my data lived somewhere outside all components, and some components could come visit when they needed a bit of that data. Now...i need more explainer videos, though Joy of code clarified things a bit better than Rich did , IMO

[@Huntabyte]

soon!

[@masterhacker]

Awesome work, this will come in handy!

[@hello_world_104]

this and runes has me now shifting my mindset to a similar approach to this but pure js putting all my state in let state = {} and handling state changes with an on update func like u demonstrated. I like the idea so far but we'll see if I can keep the code clean like this still for a more complex use case

[@jayc413]

Is there going to be a point where you the pass videos for a another application you build with the knowlwdgw of the previous videos. Your tutorials and svelte tips have been super helpful . Much love

[@NotAllHeroesWearCapes-101]

this is next next level shit .. impressive.. thanks for sharing !

[@Huntabyte]

You're welcome!

[@matanon8454]

❤

[@mauricepasternak6504]

Suggestion for another video to leap-frog off this one: How can one avoid the pitfalls of custom Svelte stores (and/or higher order stores) in SvelteKit when SSR is at play and when those custom stores make use of clientside-only objects like window, document, intersectionObserver, etc.

[@Huntabyte]

Thank you!

[@sexymeal2427]

If you're dealing with code that's client side only with SSR on then always check if `browser` is true before doing anything

[@alisareini]

i love u hunta

[@ceocheema]

Thanks! 🙂

[@hello_world_104]

so can i not return multiple store vals? like u spread ...count but i tried also returning is_loading and calling like $counter.is_loading does not update like $counter does. I can use get(counter.is_loading) but that doesnt update live. maybe this is what runes fixes maybe this is what vue 3 has with the ref and whatever i forget but like maybe i should just do const return_vals = writable({ count: 0, is_loading: false }) but then i guess that makes all the other funcs slighly more complex since cant just do count.update(n => n +1) since nested a level

[@Huntabyte]

you'd have to take the object down another level, so: return { storeA: { ...storeA }, storeB: { ...storeB }, }

[@hello_world_104]

@@Huntabyte ohh i see i gave up on that after not getting to work and went pure js mode. A lot of experimenting and deep thinking today. Confusion but progress nonetheless and having someone like u educating immensely helps my problem solving.

[@hello_world_104]

Can u do this exact video again but with runes and explain the benefit because I feel like the direction runes was heading was basically to this which u did with current svelte. Ill prob at least try and recode my stores similar to this at least in preperation for smoother transition

[@Huntabyte]

Done :)

[@gadgetboyplaysmc]

One thing I miss about React were the hooks. I really like the pattern at 3:00

[@pascaltib]

Thanks for the amazing content. Has been helping me a lot. Keep it up! P.S. (This might be a crazy longshot and also not the reason I tipped) Would you be willing to give me some help (paid of course) and look over a sveltekit project I am building? Absolutely no issue if you are not available for this sort of thing

[@Huntabyte]

Hey thanks so much for the tip, I appreciate it! Unfortunately I'm a bit strapped for time, as you may have noticed since I haven't published in video in a bit. If you join the discord server myself or one of the others can try our best to help you with whatever issues you're having!

[@pascaltib]

@@HuntabyteNo worries! I understand thanks for the advice!

[@JoyofCodeDev]

First

[@Huntabyte]

My guy!

[@JoyofCodeDev]

@@Huntabyte Great video! 😄

[@Huntabyte]

@@JoyofCodeDev Thank you ❤

[@hello_world_104]

Commenting just to feel like im part of this elite gang

[@Huntabyte]

You are a part of it!

[@drivebuss8079]

You are looking very handsome.

[@JeffPohlmeyer]

Look at you being all fancy with the video of yourself in the corner

[@Huntabyte]

Haha just giving it a shot in this one but feel like it really helps with the overall pace of the video!

[@AlanDanielx]

Looks so complex, prefer using stores in another way

[@Huntabyte]

How do you use them? I guess this is "supposed" to be more complex as you're extending the base functionality of stores!

[@rlBrave]

I wish this tutorial would exist in german so I could understand that complex stuff 😂

[@Мирбезхантов]

So it's either brain or muscle...

[@Huntabyte]

That's a wiener, not a brain :)

[@windar2390]

Unfortunate timing of this video. Right before the Svelte 5 runes.

[@Huntabyte]

By design :) but stores aren't going anywhere for at least a few major versions, you just will find yourself reaching for them less.

[@jamesfreeman1530]

FUCKING TYPESCRIPT