I need to make a correction regarding the usage of unique keys for context because when you use the Svelte Context API, the context is not shared across component instances, and a unique key mostly serves to avoid context key collisions: joyofcode.xyz/master-the-svelte-context-api#use-a-unique-key-for-context.
The Context API can be great, especially when making a complex library, or a set of tightly-knit nested components. It's such a relief to be able to pick and choose which data/contexts you need in nested components, without needing to refactor all parent components constantly. However, I see a lot of people reach for the Context API to avoid passing props through wrapper/UI classes. For example: having forms inside modal/dialog components. Don't forget about slotted components! They will keep your code clean, modular, and readable (all without the needs for props!)
@@barchuk422 I think they're called "snippets" now. If you check out the docs, under "passing snippets to components", there's an example with "". From there, you can nest code/logic without leaving your root file.
This actually comes in really handy with the project I'm working on currently and now I can make a context at home that works outside of svelte component lifecycles
just be careful because it doesn't work the same, and you're creating global state - the original idea I had was to create the context inside `` because it's at least scoped to that module, but I picked the easier route to not confuse people with concepts unrelated to the Context API
@JoyofCodeDev oh that's a good point forgot about module. But I'm actually going a different route to make using it easier. I'm porting framer-motion from react to svelte and keeping the context usage straight was messy. So I was thinking of using the global, but then I watched the rest of your video and learned about the relationship with components. So I decided to just wrap similar to the svelte docs recommendation.
Not related to this video, but you're the most knowledgable person i know regarding Svelte. I'm using Svelte's parse function (from 'svelte/compiler') to get the code as an AST. I perform some manipulation to the code (for example, adding attributes to the DOM). But I didn't find anything to print the AST back to code. There's an unofficial project for that, which is called svelte-ast-print, but it's not reliable enough to use it on the whole codebase. I'm wondering if there's something Svelte itself provides to do that, I mean, Svelte's compiler uses that function so it needs to print it back at some point... I hope this message gets read, have a nice day and ty for reading.
Nope svelte doesn't need to print the svelte AST because the svelte AST is compiled to JS not to svelte. For the migration script (which is infact modifying your svelte code) instead of using AST manipulation we use the AST to modify the code string with MagicString...what are you specifically trying to do?
@@paoloricciuti The project is called "Tailwind Attributify". Basically, the goal is to let you write CSS classes in other attributes than the class attribute in your codebase, and the preprocessor I'm writing is putting back those classes in the class attribute when building. For example, if you have a lot of classes with the prefix hover: in tailwind, you can put them in the hover attribute and the preprocessor will put them back in the class attribute. I use the markup() hook from Svelte's preprocessors to intercept code, but it gives me the code as string and expects me to return it as a string too. I use Svelte's AST to walk through the tree and detect attributes and manipulate their content. But I didn't find anything to print it back. I guess Svelte's AST is not meant to be used in a preprocessor, but it would be a great addition and make Svelte more customizable.
@ no way man you’re the best. I really enjoy your style of video I wish more people were turned on to svelte, you put out great content. Animation is super cool too!
These videos are so good, I love that you show the JavaScript implementation and explain what's happening under the hood. Will you be making a video on $effect? I understand what it does, but I don't really know where to use it, and I'm kind of just wondering what things are now easy to solve via $effect. Also, in your "Avoid Async $effect" video you mentioned that $effect should be used instead of onMount and that we should let onMount die, but then how do I handle the case where I want running only once in the beginning? Do I continue using onMount or do I just make 2 different $effects, one that has nothing reactive in it?
In a small project, I changed the onmount to an effect, didn't check the code, and later, having added console output to the effect for verification, I saw with horror that the effect was yanking the server an infinite number of times.
@@gorbulevsv Yeah, I learnt that the hard way in Svelte 4, using the $: {} and dumping a bunch of variables that I didn't realize would retrigger it, making it run in a loop. Just gotta be extra careful when using $effect.
Hello, i have a question if i have a user obj and i wanna to save it in +layout.server.svelte from db to Context API or store ? so i can later use it in a navbar ?
Edit i found that i an use it: Based on the code and your requirement to store and access the user object without passing it as props, I recommend using Svelte's context API since your application appears to be using server-side rendering (SSR). This is the safer approach compared to global stores to avoid state sharing between different users on the server.
Hi brother, thanks for the great content. I need help.. Just started using Svelte 5, now now not sure how to do certain things securely. Im creating a registration with different steps on different pages, how best control user state between these pages?
@@justinoneill2837 new Date(); new Date; // same thing It's syntactic sugar and only applies for constructor calls with no arguments. There are some potential pitfalls though. new Date().toString(); // ok new Date.toString(); // throws "TypeError: Date.toString is not a constructor"
I’ve noticed that you never use semicolons in your code, even with TS. Do you setup rules somewhere to help mitigate potential errors? And how do you prevent ai code-complete from inserting semicolons? I personally do not like semicolons. It’s by far the most overused and useless character in a programming language 😅
@@justinoneill2837 No. Sorry, but I won't be able to explain the issue here. Too long of a topic. I can just tell you, that learning basic Computer Science helps alot in understanding, why some seemingly "annoying" things exist in coding.
I need to make a correction regarding the usage of unique keys for context because when you use the Svelte Context API, the context is not shared across component instances, and a unique key mostly serves to avoid context key collisions: joyofcode.xyz/master-the-svelte-context-api#use-a-unique-key-for-context.
@@JoyofCodeDev thanks
@@JoyofCodeDev I will try it and give you feedback
The Context API can be great, especially when making a complex library, or a set of tightly-knit nested components. It's such a relief to be able to pick and choose which data/contexts you need in nested components, without needing to refactor all parent components constantly.
However, I see a lot of people reach for the Context API to avoid passing props through wrapper/UI classes. For example: having forms inside modal/dialog components. Don't forget about slotted components! They will keep your code clean, modular, and readable (all without the needs for props!)
what are slotted components?
@@barchuk422 I think they're called "snippets" now. If you check out the docs, under "passing snippets to components", there's an example with "".
From there, you can nest code/logic without leaving your root file.
This actually comes in really handy with the project I'm working on currently and now I can make a context at home that works outside of svelte component lifecycles
just be careful because it doesn't work the same, and you're creating global state - the original idea I had was to create the context inside `` because it's at least scoped to that module, but I picked the easier route to not confuse people with concepts unrelated to the Context API
@JoyofCodeDev oh that's a good point forgot about module. But I'm actually going a different route to make using it easier. I'm porting framer-motion from react to svelte and keeping the context usage straight was messy. So I was thinking of using the global, but then I watched the rest of your video and learned about the relationship with components. So I decided to just wrap similar to the svelte docs recommendation.
That's very cool! Can you create a big project, please, to apply these concepts in a big project with the new Svelte 5 syntax?
yesssss this is all I wanted
Not related to this video, but you're the most knowledgable person i know regarding Svelte.
I'm using Svelte's parse function (from 'svelte/compiler') to get the code as an AST. I perform some manipulation to the code (for example, adding attributes to the DOM). But I didn't find anything to print the AST back to code. There's an unofficial project for that, which is called svelte-ast-print, but it's not reliable enough to use it on the whole codebase.
I'm wondering if there's something Svelte itself provides to do that, I mean, Svelte's compiler uses that function so it needs to print it back at some point... I hope this message gets read, have a nice day and ty for reading.
no idea maybe it would be worth looking at what Svelte does
Nope svelte doesn't need to print the svelte AST because the svelte AST is compiled to JS not to svelte.
For the migration script (which is infact modifying your svelte code) instead of using AST manipulation we use the AST to modify the code string with MagicString...what are you specifically trying to do?
@@paoloricciuti The project is called "Tailwind Attributify". Basically, the goal is to let you write CSS classes in other attributes than the class attribute in your codebase, and the preprocessor I'm writing is putting back those classes in the class attribute when building.
For example, if you have a lot of classes with the prefix hover: in tailwind, you can put them in the hover attribute and the preprocessor will put them back in the class attribute.
I use the markup() hook from Svelte's preprocessors to intercept code, but it gives me the code as string and expects me to return it as a string too. I use Svelte's AST to walk through the tree and detect attributes and manipulate their content. But I didn't find anything to print it back.
I guess Svelte's AST is not meant to be used in a preprocessor, but it would be a great addition and make Svelte more customizable.
@@JoyofCodeDev Thank you, have a great day.
yes!!! Thank you 😄
0:45 🤨 📸
🤣🤣🤣
I never knew you could export a function from a component like you did with your Canvas (pre-contextifying it).
You like bananas! 🤣🤣 Fantastic content!
I use this it's very very OP 🎉
I love your videos man been watching for a few years. I still suck at svelte though.
same
@ no way man you’re the best. I really enjoy your style of video I wish more people were turned on to svelte, you put out great content. Animation is super cool too!
These videos are so good, I love that you show the JavaScript implementation and explain what's happening under the hood.
Will you be making a video on $effect? I understand what it does, but I don't really know where to use it, and I'm kind of just wondering what things are now easy to solve via $effect. Also, in your "Avoid Async $effect" video you mentioned that $effect should be used instead of onMount and that we should let onMount die, but then how do I handle the case where I want running only once in the beginning? Do I continue using onMount or do I just make 2 different $effects, one that has nothing reactive in it?
In a small project, I changed the onmount to an effect, didn't check the code, and later, having added console output to the effect for verification, I saw with horror that the effect was yanking the server an infinite number of times.
I realized that I had to be more careful with the effect.
I have an entire video on effects: th-cam.com/video/HRz_rU2BlZc/w-d-xo.html
@@JoyofCodeDev Ohhh I never saw that. Thank you very much
@@gorbulevsv Yeah, I learnt that the hard way in Svelte 4, using the $: {} and dumping a bunch of variables that I didn't realize would retrigger it, making it run in a loop. Just gotta be extra careful when using $effect.
Hello, i have a question if i have a user obj and i wanna to save it in +layout.server.svelte from db to Context API or store ?
so i can later use it in a navbar ?
Edit i found that i an use it:
Based on the code and your requirement to store and access the user object without passing it as props, I recommend using Svelte's context API since your application appears to be using server-side rendering (SSR). This is the safer approach compared to global stores to avoid state sharing between different users on the server.
yeah I have video on that later
Does Svelte need an async state lib such as Thunk or Saga?
No his last video before this talks about the pitfalls when using *async/await* in Svelte 5 but you might want to check out @sheepdog/svelte
you don't need complicated state management solutions in Svelte
@@JoyofCodeDev ok, thanks
@@justintie if there is no problem then you dont need a solution right?
Hi brother, thanks for the great content. I need help.. Just started using Svelte 5, now now not sure how to do certain things securely. Im creating a registration with different steps on different pages, how best control user state between these pages?
you can use the `$page` store to share the data or use the Context API in SvelteKit
can context be reactive?
I've been programming for over ten years and just learned that you can omit the parentheses when calling a constructor in js ... it looks so wrong 🙈😂
Can you give an example or point to the time?
@@justinoneill2837
new Date();
new Date; // same thing
It's syntactic sugar and only applies for constructor calls with no arguments. There are some potential pitfalls though.
new Date().toString(); // ok
new Date.toString(); // throws "TypeError: Date.toString is not a constructor"
if you're talking about `new Map` that was a mistake but Prettier fixed it on save
@@JoyofCodeDev I just tried it in the browser console and it seems to work just fine without parentheses 🤷♂
Yes you can create an instance without using parentheses but it looks so weird so I avoid it
Most datagrid libraries have problem with svelte 5...
Thank you so much my hero, why you don't join to Svelte Dev teams maybe we see news in motion svelte main framework ?
I'm already a Svelte ambassador 😄
Programming naming schemes summed up at 0:38
teach us Storybookjs
this is not a reusable component anymore, your component is coupled to the state now
ok boomer
I’ve noticed that you never use semicolons in your code, even with TS. Do you setup rules somewhere to help mitigate potential errors? And how do you prevent ai code-complete from inserting semicolons? I personally do not like semicolons. It’s by far the most overused and useless character in a programming language 😅
Following
yeah I have them disabled in my editor settings under the Prettier config and I never ran into problems: github.com/mattcroat/uses
If you are against semicolons, you should try writing a simple interpreter to see the performance loss from ambiguous declaration delimiting
@@DriftJunkie svelte compiler fixes all that yeah?
@@justinoneill2837
No.
Sorry, but I won't be able to explain the issue here. Too long of a topic.
I can just tell you, that learning basic Computer Science helps alot in understanding, why some seemingly "annoying" things exist in coding.
Context at home lmao