Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
solid-devtools
Advanced tools
Runtime library for hooking up SolidJS application with Solid Devtools Extension
The main client library. It reexports the most important tools and connects the client application to the chrome extension.
npm i -D solid-devtools
# or
yarn add -D solid-devtools
# or
pnpm add -D solid-devtools
For the usage guide of the Solid Devtools chrome extension, please refer to the extension documentation.
The vite plugin is the easiest way to get started with the devtools. It will automatically inject the extension client script to the page and connect the application to the extension.
It will also transform the code to make it easier to debug. For development — debugging purposes only.
// vite.config.ts
import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid' // or solid-start/vite
import devtools from 'solid-devtools/vite'
export default defineConfig({
plugins: [
devtools({
/* additional options */
autoname: true, // e.g. enable autoname
}),
solid(),
],
})
By default the plugin will only inject the debugger and extension client script to the page. (If installed)
All of the other transforms are disabled by default—you need to pick what you want by enabling correlated option.
interface DevtoolsPluginOptions {
/** Add automatic name when creating signals, memos, stores, or mutables */
autoname?: boolean
locator?:
| boolean
| {
/** Choose in which IDE the component source code should be revealed. */
targetIDE?: Exclude<LocatorOptions['targetIDE'], TargetURLFunction>
/**
* Holding which key should enable the locator overlay?
* @default 'Alt'
*/
key?: LocatorOptions['key']
/** Inject location attributes to jsx templates */
jsxLocation?: boolean
/** Inject location information to component declarations */
componentLocation?: boolean
}
}
// in vite.config.ts plugins array:
devtools({
autoname: true,
locator: {
targetIDE: 'vscode',
key: 'Ctrl',
jsxLocation: true,
componentLocation: true,
},
})
autoname
This option adds automatic name to signals, memos, stores, and mutables. Those names will be visible in the devtools when inspecting.
locator
This option enables the locator feature. The key
and targetIDE
are going to pe passed to useLocator
function call.
locator.componentLocation
Inject location information to component functions. This will add a button in the devtools inspector panel, allowing you to go to the source code of the component.
locator.jsxLocation
Inject location attributes to jsx templates. This is required for the debugger's locator feature.
See CHANGELOG.md.
FAQs
Runtime library for hooking up SolidJS application with Solid Devtools Extension
The npm package solid-devtools receives a total of 8,719 weekly downloads. As such, solid-devtools popularity was classified as popular.
We found that solid-devtools demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.