Wrapping Up

[00:00:00]
>> So you can see there's a few little details that we need to iron out with the CSS here. In particular, it'd be nice to add some dark mode themes here. But on the whole, our game is looking pretty polished, and we can take this and we can deploy it to the Internet, and people can play it.

[00:00:17]
So we've used a lot of different Svelte concepts here. We've used actions, we've used components, we've used slots, we've used transitions and animations, we've used events to manage state. We're using references to components and calling functions inside those components. So we're using a pretty broad array of the things that we learned earlier in the session.

[00:00:35]
There is of course more that was covered in the tutorial that we didn't use in this app. But that's something that you'll have the opportunity to use as you build Svelte apps.
>> Can you do repeat infinite animations or transitions with Svelte?
>> No, a transition is transitioning from an element is not in the DOM to an element is in the DOM.

[00:00:55]
Once it's there, that's it. You can, of course, add CSS animations to your elements. So if you want to have something that repeats infinitely, then you can just do that as a regular CSS animation. You don't need to use Svelte transitions for that. But no, a transition is off to an on state.

[00:01:13]
>> Can you explain a little bit more how dispatch is working, and how the event handlers work?
>> Yeah, so when you call createEventDispatcher when a component first initializes, we're creating a function that is bound to a specific component instance. And so when you call that function, Svelte knows that it's the component within which you call createEventDispatcher that is dispatching that event.

[00:01:42]
And so anything that has a reference to that component, because you have a component that has that other component as a child, you can then add that event handler. And Svelte understands the hierarchy of the components. And so it knows that the event listener on the outer component needs to respond to anything that gets called with dispatch on the inner component.

[00:02:07]
So it's just keeping a central registry essentially of all of the components and their dispatchers so that everything can get linked up when you later call dispatch.
>> Is there a way to lint or warn that a reactive value declaration is missing for a derived value of a component prop, like the dollar sign colon?

[00:02:33]
>> No, I'm not totally sure I understand what situation that would come up in. If a Reactive declaration references a value that is not present, it will just not work, that will be a type error or a reference error, sorry, and you'll find out about that immediately. I'm not sure what are the situation that would come up in.

[00:03:00]
>> They edit a little code snippet where they declared a variable and set it equal to the string, hello, and appended on a variable called my prop. But my props should have had the dollar sign colon in front of it.
>> Right, so Svelte doesn't know what your intent is when you write that code.

[00:03:19]
Maybe you do intend for it to be reactive, and maybe it's something that you want to be fixed when the component is initialized, which is completely legitimate. And so it's a little hard for the compiler to be like, you got this wrong, cuz it doesn't know. The compiler is gonna assume that you know the code that you're writing.

[00:03:35]
So that's just something like a habit that you get into, if you write a lot of components, then you'll start to understand which things need to be made reactive and which things can be left initialized when the component first mounts. This concludes the first session. In the next session, we're gonna be talking about SvelteKit.

[00:03:56]
We're gonna be learning all of the things that you can do with SvelteKit as a full stack application framework. I hope that this has been a useful learning experience. I hope that if you're new to Svelte, this has given you a sense of what's possible to do with Svelte.

[00:04:09]
If you've been using Svelte for a while, I hope that you learned something new. And if nothing else, I hope that you all had fun.
>> [APPLAUSE]