Thanks for asking, I see I should have made it more clear there.
So we are dealing with 2 components here, a simpler component CoolDiv.svelte (whose code is not shown), and the component we are looking at. Let's say it's called CoolDivWithText.svelte. All the code shown here belongs to CoolDivWithText.svelte.
The dark prop is on CoolDivWithText while color prop is on CoolDiv. CoolDivWithText wraps around CoolDiv; instead of offering arbitrary color options, we limit it to only allow dark theme or bright theme.
(I'm thinking of remaking this example)
Edit: I've updated the image in the article. Here is the original one this comment was talking about.
Thanks for asking, I see I should have made it more clear there.
So we are dealing with 2 components here, a simpler componentCoolDiv.svelte(whose code is not shown), and the component we are looking at. Let's say it's calledCoolDivWithText.svelte. All the code shown here belongs toCoolDivWithText.svelte.Thedarkprop is onCoolDivWithTextwhilecolorprop is onCoolDiv.CoolDivWithTextwraps aroundCoolDiv; instead of offering arbitrary color options, we limit it to only allow dark theme or bright theme.(I'm thinking of remaking this example)Edit: I've updated the image in the article. Here is the original one this comment was talking about.
I'm just totally new to Svelte, but I really like this approach to crash-course.
Glad you liked it! I'm also working on a GraphQL crash course, which I will publish soon.
I updated the 5th pic, by the way. Hopefully, it's less confusing this time.
Sometimes we can become biased and miss the readers' point of view. It's hard to unlearn stuff. 😛 Thanks for pointing it out!