ฝัง
- เผยแพร่เมื่อ 16 ก.ย. 2023
- 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/joshnuss
Svelte Store Docs:
svelte.dev/docs/svelte-store
🚀 Modern SaaS Course: hbyt.us/modern-saas
💬 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
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
Right!? It provides so much flexibility and can accommodate so many different use-cases!
This is awesome! Super eloquent and clean way of doing this. Definitely going to make use of this in my projects
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
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.
Svelte 5 is going to make this even easier with Runes (Signals)
This is great! Gonna go digging through the MeltUI sourecode now :D
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
Love your content man!
Thanks dude! Watched a lot of your Django content years ago it was very helpful!
I'm humbled ☺ @@Huntabyte
Wow this is great i often complicated my stores tring to have reusable functionality for different things. This will help me
Coool, feels like some OOP stuff
Man, you're breaking my brain....but in the best way possible. Thanks!!
Hahaha it’s not a must use or anything, just there if you find yourself needing it!
Awesome explanation!
Thank you!
Thanks! 🙂
Awesome work, this will come in handy!
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
another banger as usual
this is next next level shit .. impressive.. thanks for sharing !
You're welcome!
❤
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
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.
Thank you!
If you're dealing with code that's client side only with SSR on then always check if `browser` is true before doing anything
Great content! How did you do the auto-complete at 5:02 Is it a VS Code extension?
GitHub Copilot!
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?
i love u hunta
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
soon!
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() {"
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!
The value of the count writable is gone once I switch pages. Do you know why?
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
Done :)
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
you'd have to take the object down another level, so:
return {
storeA: { ...storeA },
storeB: { ...storeB },
}
@@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.
You are looking very handsome.
Looks so complex, prefer using stores in another way
How do you use them? I guess this is "supposed" to be more complex as you're extending the base functionality of stores!
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
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!
@@HuntabyteNo worries! I understand thanks for the advice!
First
My guy!
@@Huntabyte Great video! 😄
@@JoyofCodeDev Thank you ❤
Commenting just to feel like im part of this elite gang
You are a part of it!
I wish this tutorial would exist in german so I could understand that complex stuff 😂
One thing I miss about React were the hooks. I really like the pattern at 3:00
Look at you being all fancy with the video of yourself in the corner
Haha just giving it a shot in this one but feel like it really helps with the overall pace of the video!
So it's either brain or muscle...
That's a wiener, not a brain :)
Unfortunate timing of this video. Right before the Svelte 5 runes.
By design :) but stores aren't going anywhere for at least a few major versions, you just will find yourself reaching for them less.
FUCKING TYPESCRIPT