Svelte Language Tools with Simon Holthausen

Note: This was recorded on February 19th. Sveltesummit CFPs are currently closed.

Sponsors: Support Svelte Radio by leaving a review on iTunes and/or visit our support page.

Description:
We sit down with Simon Holthausen to talk about the Svelte language-tools, TypeScript and all that juicy stuff! Some notes 
Description, show notes and transcription coming soon. This was accidentally released a bit early. Sorry about this!

- Language Tools repo
- Simon on GitHub
- Svelte Component Template

Unpopular opinions:
- Antony: Case-insensitive file systems are bad
- Simon: I use Windows
- Shawn: Don't use throw unless you want the program to crash! Errors are not exceptions!

Picks:

• Kevin: Yubikey 5C Nano
• Antony: Clean Co - Low Alcohol Spirit
• Shawn: Princess Bride Home Movie
• Simon: Fasching - German festivals

Transcription:
Kevin Åberg Kultalahti  0:00  
Hello, everyone. Welcome to another episode of Svelte radio. Today we have yet another guest surprise. We always have guests these days. But first, some introductions. So I'm Kevin, I run a site called Svelte school. And I'm heavily involved in Svelte society, and help out around the Svelte community.

Shawn  0:22  
I'm Shawn, I am still in the process of switching jobs, but hopefully building a Svelte app in production from a next startup. And I mostly should post on Twitter, first of all society. We also did just launched the CFP for the Svelte summit conference that is going to be happening in April, I think, and I'm very excited about organising speakers for that.

Antony  0:46  
I'm Antony I'm the ccfp og which is a booking system for tourism leisure. I'm also a Svelte maintainer, alongside our guest today, who is Simon halt Hauser. And Simon is the I've got it. What can I say is he's the he's the person in charge of language tools. He's He's the code here behind that is absolutely on fire at the moment. I would probably say it's one of the most active sort of segments of the spell organisation. So all credit to him. And the community, of course. So Simon, I'll let you continue with your introduction.

Simon Holthausen  1:22  
Yeah, thank you for the warm words. I'm some. I work as a software engineer at a company called xo do software development and consulting. And yeah, I, I don't know more by accident than anything. I stumbled into the spelter world got really hyped. helped out getting the language tools, VS code extension forward and yeah. Now I'm a Svelte maintainer, like Antony. And yeah, really? Thanks for having me.

Kevin Åberg Kultalahti  1:57  
Yeah, exciting. So you're you're also known on the Svelte discord as Doom Doom, right?

Simon Holthausen  2:03  
Yeah, right. It's my handle. Yeah.

Kevin Åberg Kultalahti  2:05  
Yeah. Where does that come from?

Simon Holthausen  2:09  
Yeah, so my, my my original nickname back in the days when I was in puberty, was Hitman Faker. I thought that was a very cool name at that time. And after puberty was over, I thought, No, that's, that doesn't work where email? So I thought, Okay, I need a new nickname. And I was humming along like them to them. What kind of pig? And then I thought, Oh, why why not take this? This? Dum dee dum? Yeah. And so it was just like, it's called loudly fire in German. So.

Antony  2:49  
Wow. That was loud.

Simon Holthausen  2:53  
Louder. The word for writing something down? That sounds exactly like you.

Shawn  3:02  
Automatic. Yeah.

Antony  3:06  
Yeah. I was gonna say it's more like Him. There's another word for isn't there. When a word sounds like the thing that it describes, is that Onomatopoeia?

Kevin Åberg Kultalahti  3:19  
This is above my paygrade podcast. Alright, so so TypeScript, what's are sorry, language tools? What's going on there?

Simon Holthausen  3:30  
TypeScript is a big part of language tools. That's definitely right. So yeah, I was, I was here on the on the show about, I don't know, almost a year ago. And I skimmed through some of the issues that we close since then, or we got since then. And yeah, so what changed between then and now. So it's, overall, we just worked hard to get rid of all the edge cases that people might occur when they just coding. And I think, especially all these edge cases, when you when you're in the zone, and you're coding, and then your intelligence does something stupid, that can really put you off, and we are trying really hard to minimise that. new things are about. We also added a lot of new things like we now have auto completion for events. So if you define event by create Event Dispatcher from another component, you get auto completion for that in the component that uses the components. You can get comments for the props and events. So if you hover over it, you see the docks, there were some new refactoring commands like extract into function, which works similar to the JavaScript or TypeScript one. Cool. We got a simple Extract into components refactoring. So you can select a part of a component in the markdown, which you want to extract into a new function. And it just can right click, and then there should be a extract components, add components command in the context menu. And then you can specify what's what's, what's the name of the component, and then it will transfer that HTML into the other component, and write the input for you.

Antony  5:34  
So just just for the somebody who's let's pretend I'm completely uneducated in TypeScript, not because I am no, I definitely am. Imagine if you're also completing events. And you've got like a series of events that click and you've got things like, key up and key down. Are you maintaining a huge list of events that match the Svelte API? Or are you using, say, the type definitions within Svelte to generate those auto completions? How does that how does that work?

Simon Holthausen  6:00  
It works. Actually, it kind of is like that. So that there are two parts to that. One is that we use the HTML language service that VS code uses for its HTML intelligence. And that one defines a lot of those events. So if you do auto completion, you'll get that from that. But we also have to define and keep track of a really big list of all these events inside a type definition file, so that we can show arrows, like, okay, you're using a new event that doesn't exist. So for that we have two people, ever growing list of events.

Antony  6:47  
So you have this duplicate list that matches Svelte, right? Yes, we do. So is there a way to Is there a way to maybe like, use that if that list existed a bit within Svelte itself? Is there a way to use that list from there? Or is that is that not a thing? That's possible?

Simon Holthausen  7:04  
So there was, I don't know some kind of Jason definition, we could definitely look into generating something out of that. Yeah, that would be possible.

Antony  7:13  
That'd be interesting PR, because I've, I've seen the code that adds those events to elements inside Svelte. And it's kind of like a big if state...