svelte inspector update

Hey, Svelte Summit! How have you been? It's been six months since Stockholm already and
I'm back with updates for Svelte Inspector. We've got new features and
fixes and more. But what about those of you who don't know what Svelte Inspector is?
Well, it's your lucky day. We've got a small little feature in VitePlug in Svelte
that allows you to press a key combo like this and then move your mouse and
and see where the elements on your screen are defined in our thread files.
And not only see it, you can click and it opens the IDE.
Isn't that great?
If you want to see how this works, you can just go and watch my talk from last ThreadSummit.
If you loved it, you'll love it too. I promise.
But let's see what's new.
Keyboard navigation.
Moving the mouse is great and all, but sometimes you're going to want to just select an element
that you can't hover.
And then it helps when you press the down arrow and it selects a child that is otherwise
invisible.
Or you press the up arrow and it selects a tightly wrapped parent that you can't hover
either.
You can also use left and right arrow to select siblings.
In combination, this allows you to move around your DOM without moving the mouse at all.
You can also press the Enter key to open your IDE again and use Alt+Tab to go back out.
With that, you are never going to have to use your mouse again if you don't want to.
You can configure the arrows and the open key as well.
It uses DOM style parent-child-sibling selection because logical left-right, top-bottom is
really complicated and depending on the application, it wouldn't work either.
So use what you know.
The DOM is what we need and love.
With this, the accessibility of the application has already improved, but we went one step
further and every time you select an element with the Svelte inspector, it not only allows
you to do it with the keyboard, it also reads you the bottle content.
always know where you are, even if you don't see.
And of course, configuring Svelte Inspector was a topic that had much discussion.
Many people wanted to change the key bindings because their browser or their operating system
don't work well with the defaults we chose.
I mentioned it during last summit already.
It's impossible to find key bindings that work for everyone.
So now everyone gets to set their own using environment variables.
And you only have to set them once in your Bash RC
and all Svelte projects on your disk are going to have Svelte Inspector enabled.
Isn't that great?
And if you don't want to use a beta C, you can also use the .env files
with the support that Vite brings. It just works, and you don't have to use
thread-config.js anymore, but you can, of course. It's not gone. It's just an additional way to
configure it. And one thing that we've actually enabled by default is hold mode,
which means that when you press the toggle and hold it, it's going to keep Inspector enabled
as long as you keep pressing. Once you let go, it disables automatically. This is a nice way
to not have to press the toggle twice. If you just want a quick peek into a file,
It's my preferred way of doing it. And one thing that you can't see is that Svelte Inspector
actually no longer cares about SvelteKit because it doesn't have to anymore. We used to have a
small workaround that was required to load Inspector, but with SvelteKit being 1.0 and
using a different way to load the inspector, it is no longer needed. And now,
it's completely agnostic and just needs the plugin Svelte to work.
We also fixed a couple of bugs. And one of them has to do with hydration. If you had an application
that hydrated directly into body, Svelte inspector was deleted by that hydration. And now it gets
mounted outside of the body and it no longer is removed. Well, unless you remove the document
element, but who does that? It also works if you have a custom Vite base that there was a bug that
it doesn't repend the path to the file that opened the editor and then the editor just didn't open.
It works now. I can't show it here live because there is no base, but trust me, it works.
One thing that you've actually already seen in action is something that annoyed me a lot.
When you enabled Svelte Inspector and clicked on a file,
and then went back into your application, Svelte Inspector was still enabled.
When you click on something to interact with your application again, it would just bring you back
into your IDE. And then you were trapped in this mode where Svelte Inspector was always enabled,
and you had to disable it from the button. As you can see, this now works differently. Every time
you leave your browser and you have opened a file, Svelte Inspector is disabled automatically.
This means that you are no longer trapped, but you can also keep using Svelte Inspector while
you are still in your browser. So if your IDE is in a separate window on a separate
monitor and your browser stays in focus, you can still click multiple elements
and it keeps working. So with this, the usability is greatly improved and
it was my personal annoyance and nemesis and I love that this is better now.
One thing that affected Linux users, especially on Firefox, was the default key combo we used.
It didn't work in Firefox because Firefox had its own key binding there.
And now we switch to Control Shift by default, and this should work better in the default case.
But as mentioned earlier, you can use any combination you want. Just put it in the end.
And with that, there's only one more thing to do. That is
feeling of the experimental label. As of now, Vite plugin svelte 2.2.0 has promoted Inspector
to an official option. It's there to stay and use and make your productive work much easier.
I hope you like it. Please keep giving feedback. I love what we got, and especially thank you,
delight, Lukas, probably Casper, and also Bjorn and Puru for being helpful as ever.
Also, everyone else, thanks a lot. Enjoy Svelte Summit. I'm Dominik.
This was used to build this talk. See you next time.