solid-devtools support

docs/_sidebar.md

@@ -39,3 +39,5 @@
   - [Router](/primitives/router.md)
   - [Row and Column](/primitives/row_column.md)
   - [Visible](/primitives/visible.md)
+- Tooling
+  - [Solid Devtools](/tooling/solid_devtools.md)

docs/tools/solid_devtols.md

@@ -0,0 +1,63 @@
+# Integrating with Solid Devtools
+
+[Solid Devtools](https://github.com/thetarnav/solid-devtools) provides debugging capabilities for Solid.js applications. This guide explains how to integrate solid-devtools with Lightning Solid to inspect your Lightning applications.
+
+## Installation
+
+For chrome-development install the [Solid Devtools Chrome Extension](https://chrome.google.com/webstore/detail/solid-devtools/kmcfjchnmmaeeagadbhoofajiopoceel).
+
+Then, install the `solid-devtools` package:
+
+```bash
+pnpm add -D solid-devtools
+```
+
+## Configuration
+
+### 1. Setup Vite Plugin (Optional)
+
+Add the Solid Devtools Vite plugin to your Vite configuration file:
+
+```ts
+import devtools from 'solid-devtools/vite';
+import solidPlugin from 'vite-plugin-solid';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [
+    devtools({
+      /* features options - all disabled by default */
+      autoname: true,
+      locator: {
+        jsxLocation: true,
+        componentLocation: true,
+        targetIDE: 'vscode',
+      },
+    }),
+    solidPlugin({
+      solid: {
+        moduleName: '@lightningtv/solid',
+        generate: 'universal',
+      },
+    }),
+  ],
+});
+```
+
+### 2. Configure Element Interface
+
+Since Lightning.js uses a custom renderer (not DOM-based), you need to provide Solid Devtools with a custom ElementInterface implementation. Fortunately, `@lightningtv/solid` already includes this implementation.
+
+Add the following code to your application entry file (typically `index.tsx`):
+
+```ts
+import 'solid-devtools';
+import { setElementInterface } from 'solid-devtools/setup';
+import { elementInterface } from '@lightningtv/solid/devtools';
+
+setElementInterface(elementInterface);
+```
+
+This allows the Solid Devtools panel to properly display and interact with your Lightning application's component tree.
+
+For more information on supporting custom renderers in Solid Devtools, refer to the [official documentation](https://github.com/thetarnav/solid-devtools/tree/main/packages/debugger#supporting-custom-renderers).

package.json

@@ -17,6 +17,13 @@
         "types": "./dist/src/primitives/index.d.ts",
         "default": "./dist/src/primitives/index.js"
       }
+    },
+    "./devtools": {
+      "import": {
+        "@lightningtv/source": "./src/devtools/index.ts",
+        "types": "./dist/src/devtools/index.d.ts",
+        "default": "./dist/src/devtools/index.js"
+      }
     }
   },
   "sideEffects": false,
@@ -65,7 +72,8 @@
     "release-it": "^17.10.0",
     "solid-js": "^1.9.3",
     "typescript": "^5.7.2",
-    "typescript-eslint": "^8.17.0"
+    "typescript-eslint": "^8.17.0",
+    "@solid-devtools/debugger": "^0.27.0"
   },
   "lint-staged": {
     "*.ts": [
@@ -79,6 +87,9 @@
     "@solidjs/router": "^0.15.1",
     "solid-js": "*"
   },
+  "optionalDependencies": {
+    "@solid-devtools/debugger": "^0.27.0"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/lightning-tv/solid.git"