Using SolidJS Dev-Tools Locator Feature

In my previous article I went through how to get the SolidJS Dev-Tools up and running with your application. I covered the Debug feature which allows you to debug the reactivity graph, and also the Logger which lets you log more specific events within the framework (like effect re-executing etc.)

In this post Im going to dive into the Locator feature which is supposed to allow locating components on the page, and going to their source code in your IDE.

The Babel Transform Plugin

Before I do that I wanna fix something which kinda bugged me before and also acts as an enabler for the Locator to work. If you remember, when opening the debugger you had a lot of weird names to the signals, which looked like s606947053:

As @thetarnav (the dev-tools projects maintainer) mentioned to me, there is a solution for that which involves a Babel plugin that extracts the given name so it can later be parsed by the debugger. Lets give it a go -

Following the docs Im installing the Babel plugin:

yarn add -D @solid-devtools/transform

(Notice Im installing it as a dev dependency)

Next I will add the required configuration to my projects vite config, like so:

import {defineConfig} from 'vite';import solidPlugin from 'vite-plugin-solid';import devtoolsPlugin from '@solid-devtools/transform';export default defineConfig({   plugins: [       devtoolsPlugin({           jsxLocation: true,           name: true,       }),       solidPlugin(),   ],   build: {       target: 'esnext',       polyfillDynamicImport: false,   },});

Since I dont have a store here Im not using the wrapStores option, but only the jsxLocation and the name. Refreshing the application and I can see names of my signals -

Yep, here is cursor and bufferGap. Noice.
Moving on to the Locator feature

The Locator

So now that we got better names for signals it is time to check out the Locator feature.
As I mentioned before, you need to have the babel transform plugin set, with the jsxLocation enabled.

The docs say to configure it by calling useLocatorPlugin with some options, which is great but the question remains - where?!
I will go with what I think makes the most sense, that is the projects entry point, which now looks like this:

import 'solid-devtools';import {render} from 'solid-js/web';import './index.css';import App from './App';import {useLocatorPlugin} from 'solid-devtools';useLocatorPlugin({   key: "shiftKey"   targetIDE: 'vscode',});render(() => <App />, document.getElementById('root'));

And after refreshing, when Im holding the shift-key I see the related component Im hovering on:

Thats nice, and when clicking it BOOM!, my VSCode IDE is opened at the right place for the highlighted component.
If you open and inspect the elements on the page, you will see that each relevant one has a data-source-loc attribute to it which holds the file path, line and column of the source code:

Sweet :)

Dev Mode

You would probably want things like the Locator executing only when developing a feature, and not on production. Solid has this nice DEV feature that you can query and make decisions according to.
If we would like to use the Locator plugin only in dev, you should probably do this:

import 'solid-devtools';import {render} from 'solid-js/web';import {useLocatorPlugin} from 'solid-devtools';import {DEV} from 'solid-js';import {isServer} from 'solid-js/web';import './index.css';import App from './App';if (DEV && !isServer) {   console.log('In DEV mode');   useLocatorPlugin({       targetIDE: 'vscode',   });}render(() => <App />, document.getElementById('root'));

Wrapping up

Well the Locator allows you to quickly navigate to your component. You can also have a callback there and do whatever you want with the given arguments. Aside from that, just seeing the component real name on the browser when you hover it is enough for you to get started quickly.
Code can be found in this GitHub repo.

As always, if you have any comments or questions, be sure to leave them in the comments below.

Hey! If you liked what you've just read check out @mattibarzeev on Twitter

Photo by Andres Siimon on Unsplash