Level Up Your Svelte Stores

In this video, we'll take a closer look at extending Svelte stores to add custom functionality, overrides, and more.
Thomas Lopes (Creator of Melt UI)
/ thomasglopes
github.com/tglide
Joshua Nussbaum (Creator of Svelte Local Storage Store)
/ joshnuss
github.com/jos...
Svelte Store Docs:
svelte.dev/doc...
🚀 Modern SaaS Course: hbyt.us/modern...
💬 Discord: hbyt.us/discord
🐦 Twitter: hbyt.us/twitter
🖥️ Setup Stuff: hbyt.us/gear
📃 Topics Covered:
Svelte stores
Svelte writable
Svelte custom store
Svelte store contract
Svelte reactivity
Svelte local storage store
Svelte UI
Svelte dynamic data

[@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

[@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

[@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!

[@DeviantFox]

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

[@init1508]

Coool, feels like some OOP stuff

[@kyrregjerstad]

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

[@ScriptRaccoon]

Awesome explanation!

[@Huntabyte]

Thank you!

[@matanon8454]

❤

[@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

[@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

[@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!

[@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!

[@alisareini]

i love u hunta

[@NotAllHeroesWearCapes-101]

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

[@Huntabyte]

You're welcome!

[@fakiri25]

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

[@Huntabyte]

GitHub Copilot!

[@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 :)

[@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?

[@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

[@ceocheema]

Thanks! 🙂

[@pieter-jan1000]

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

[@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() {"

[@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!

[@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.

[@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!

[@gadgetboyplaysmc]

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

[@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