add solid-devtools

.env

@@ -1,2 +1,4 @@
 DEV_SERVER_HTTPS_CERT_BASE=
 DEV_SERVER_HTTPS_CERT_PASS=
+DEV_LOCATOR_EDITOR=vscode
+VITE_DEVTOOLS_OVERLAY=true

package.json

@@ -14,6 +14,7 @@
   "author": "Rubicon",
   "license": "Apache-2.0",
   "devDependencies": {
+    "@solid-devtools/overlay": "^0.30.1",
     "@suid/vite-plugin": "^0.3.1",
     "@types/hammerjs": "^2.0.46",
     "@vite-pwa/assets-generator": "^0.2.6",
@@ -50,6 +51,7 @@
     "masto": "^6.10.1",
     "nanostores": "^0.11.3",
     "normalize.css": "^8.0.1",
+    "solid-devtools": "^0.30.1",
     "solid-js": "^1.9.3",
     "solid-styled": "^0.11.1",
     "stacktrace-js": "^2.0.2",

src/index.tsx

@@ -1,4 +1,10 @@
 import { render } from "solid-js/web";
 import App from "./App.js";
+import "solid-devtools";
 
 render(() => <App />, document.getElementById("root")!);
+
+if (import.meta.env.VITE_DEVTOOLS_OVERLAY === "true") {
+  const overlay = await import("@solid-devtools/overlay")
+  overlay.attachDevtoolsOverlay()
+}

src/overrides.d.ts

@@ -7,6 +7,10 @@ interface ImportMetaEnv {
    * The code reversion. It's recommended to be the git commit sha.
    */
   readonly VITE_CODE_VERSION?: string;
+  /**
+   * Attach the overlay (in the dev mode) if it's `"true"`.
+   */
+  readonly VITE_DEVTOOLS_OVERLAY?: string;
 }
 
 interface ImportMeta {

vite.config.ts

@@ -6,6 +6,7 @@ import { VitePWA } from "vite-plugin-pwa";
 import version from "vite-plugin-package-version";
 import manifest from "./manifest.config";
 import { GetManualChunk } from "rollup";
+import devtools from "solid-devtools/vite";
 
 /**
  * Put all strings (/i18n/{key}.<json|js|ts>) into separated chunks based on the key.
@@ -66,6 +67,20 @@ export default defineConfig(({ mode }) => {
 
   return {
     plugins: [
+      devtools({
+        autoname: true,
+        locator: {
+          targetIDE:
+            (devConf["DEV_LOCATOR_EDITOR"] as
+              | "vscode"
+              | "atom"
+              | "webstorm"
+              | "vscode-insiders"
+              | "") || undefined,
+          componentLocation: true,
+          jsxLocation: true,
+        },
+      }),
       suid(),
       solid(),
       solidStyled({