@solid-devtools/locator

A runtime library for locating components on the page, and going to their source code in your IDE.

Getting Started

Installation

This module is built-in with solid-devtools package and integrated with the chrome extension.

npm i solid-devtools
# or
yarn add solid-devtools
# or
pnpm i solid-devtools

Babel Plugin

To be able to use the "open source code in IDE" feature, you need to add vite plugin to your .vite.config.js file:

// vite.config.ts

import { defineConfig } from 'vite'
import solidPlugin from 'vite-plugin-solid'
import devtoolsPlugin from 'solid-devtools/vite'

export default defineConfig({
  plugins: [
    devtoolsPlugin({
      // enabling this option is required for the plugin to work
      jsxLocation: true,
    }),
    solidPlugin(),
  ],
})

Enable the Locator plugin

The solid-devtools package comes together with the locator installed. All you need to do is configure it by calling useLocator with some options.

import { useLocator } from 'solid-devtools'

useLocator()

Locator will not allow you to highlight hovered components on the page and reveal them in the IDE or the Chrome Extension. (depending of if the extension panel is open or not)

Locator Options

Not passing any options will enable the locator with Alt as the trigger key and no targetIDE selected.

Currently Locator allows for specifying these props:

targetIDE

Choose in which IDE the component source code should be revealed.

Out-of-the-box options: vscode, atom, webstorm and vscode-insiders

useLocator({
  targetIDE: 'vscode',
})

Target URL Function:

To target custom URLs (e.g. Github files) the targetIDE option accepts an function returning a string or false.

useLocator({
  targetIDE: ({ filePath, line }) =>
    // will navigate to this link when clicking
    `https://github.com/thetarnav/solid-devtools/blob/main/playgrounds/sandbox/${filePath}#L${line}`,
})

Returning false will prevent calling window.open to navigate to URL, and let you handle the click yourself.

useLocator({
  targetIDE({ projectPath, filePath, line, column, element }) {
    console.log({ projectPath, filePath, line, column, element })
    return false
  },
})

key

Holding which key should enable the locator overlay? It's "Alt" by default — Alt on Windows, and Option or ⌥ on macOS.

Key options: "Alt", "Control", "Mete", "Shift" or string to be compared with e.key property.

useLocator({
  key: 'Control',
})

Using the Locator on the page

To activate the Locator module — you have to hold down the Alt/Option key and move your mouse around the page to highlight components and their different HTML Elements.

Clicking the component should take you to the component source code, given that you specified the targetIDE option.

https://user-images.githubusercontent.com/24491503/174093606-a0d80331-021f-4d43-b0bb-e9a4041e1a26.mp4

Changelog

See CHANGELOG.md.