add opt/alt+click to open a source file at the element

jollytoad · Nov 7, 2024 · 86d57be · 86d57be
1 parent b33af2a
commit 86d57be
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 265 deletions.
diff --git a/README.md b/README.md
@@ -126,3 +126,10 @@ modules.
 The project uses and showcases much of my
 [http functions library](https://jsr.io/@http), which is designed to be easy to
 follow and understand (hopefully).
+
+## Debugging tools
+
+If you switch to `"jsx": "react-jsxdev"` in `deno.json`, then all elements will
+include an additional `jsx-dev` attribute with a link to it's place the source.
+A dev time script will also catch Alt/Option clicks on any element and open the
+source file in VSCode.
diff --git a/app/components/DevScript.tsx b/app/components/DevScript.tsx
@@ -1,10 +1,28 @@
 import { getEnv } from "../lib/env.ts";
-import type { RequestProps } from "../lib/types.ts";
+
+export interface DevScriptProps {
+  req: Request;
+  src: string;
+  envVar?: string;
+  params?: Record<string, string | undefined>;
+}
 
 export function DevScript(
-  { req, src, envVar }: RequestProps & { src: string; envVar: string },
+  { req, src, envVar, params }: DevScriptProps,
 ) {
-  const enable = getEnv(envVar, req) === "true";
+  const enable = envVar && getEnv(envVar, req) === "true";
+
+  if (params) {
+    const url = new URL(src, "dummy:/");
+    Object.entries(params).forEach(([key, val]) => {
+      if (val !== undefined) {
+        url.searchParams.set(key, val);
+      }
+    });
+    src = url.protocol === "dummy:"
+      ? `${url.pathname}${url.search}${url.hash}`
+      : url.href;
+  }
 
   return enable ? <script src={src} type="module" /> : null;
 }
diff --git a/app/components/Page.tsx b/app/components/Page.tsx
@@ -2,6 +2,7 @@ import type { Children } from "@http/jsx-stream/types";
 import { Src } from "../components/Src.tsx";
 import { DevScript } from "./DevScript.tsx";
 import type { RequestProps } from "../lib/types.ts";
+import { getEnv } from "../lib/env.ts";
 
 interface Props extends RequestProps {
   children?: Children;
@@ -39,7 +40,19 @@ export function Page({ req, children, reqURL, module }: Props) {
 
         <script src="/app.js" type="module" />
 
-        <DevScript req={req} src="/auto-refresh/dev.js" envVar="AUTO_REFRESH" />
+        <DevScript
+          req={req}
+          src="/dev/auto-refresh/dev.js"
+          envVar="AUTO_REFRESH"
+        />
+        <DevScript
+          req={req}
+          src="/dev/src-link/dev.js"
+          params={{
+            attr: getEnv("JSX_SRC_ATTR", req),
+          }}
+          envVar="SRC_LINK"
+        />
       </head>
       <body>
         <header>

diff --git a/app/routes.ts b/app/routes.ts
@@ -8,7 +8,7 @@ import { handleComponent } from "./lib/handle_component.tsx";
 
 export default cascade(
   byPattern(
-    ":pre(/auto-refresh/):path+.js",
+    [":pre(/dev/src-link/):path+.js", ":pre(/dev/auto-refresh/):path+.js"],
     lazy(async () =>
       byMethod(await import("./lib/handle_route_browser_dir.ts"))
     ),
@@ -108,6 +108,12 @@ export default cascade(
     "/ex",
     lazy(async () => (await import("./routes/ex/index.tsx")).default),
   ),
+  byPattern(
+    "/dev/auto-refresh/feed",
+    lazy(async () =>
+      byMethod(await import("./routes/dev/auto-refresh/feed.ts"))
+    ),
+  ),
   byPattern(
     "/calc/eval",
     lazy(async () => (await import("./routes/calc/eval.tsx")).default),
@@ -137,10 +143,6 @@ export default cascade(
       (await import("./lib/handle_route_static_dir.ts")).default
     ),
   ),
-  byPattern(
-    "/auto-refresh/feed",
-    lazy(async () => byMethod(await import("./routes/auto-refresh/feed.ts"))),
-  ),
   byPattern(
     "/async",
     lazy(async () =>

diff --git a/app/routes/auto-refresh/_browser/dev.ts → app/routes/dev/auto-refresh/_browser/dev.ts b/app/routes/auto-refresh/_browser/dev.ts → app/routes/dev/auto-refresh/_browser/dev.ts
@@ -1,5 +1,5 @@
 function startAutoRefresh(refreshNow = false, restartDelay = 0) {
-  const evtSource = new EventSource("./auto-refresh/feed");
+  const evtSource = new EventSource("/dev/auto-refresh/feed");
 
   evtSource.addEventListener("refresh", () => {
     if (refreshNow) {

diff --git a/app/routes/auto-refresh/feed.ts → app/routes/dev/auto-refresh/feed.ts b/app/routes/auto-refresh/feed.ts → app/routes/dev/auto-refresh/feed.ts
diff --git a/app/routes/dev/src-link/_browser/dev.ts b/app/routes/dev/src-link/_browser/dev.ts
@@ -0,0 +1,27 @@
+// deno-lint-ignore-file no-window no-window-prefix
+/**
+ * Enable Option/Alt clicking on an element to open the source link in vscode
+ */
+function enableSrcLinks() {
+  const attr = new URL(import.meta.url).searchParams.get("attr") ?? "jsx-src";
+
+  console.log(`%cENABLE SRC LINKS: ${attr}`, "color: green");
+
+  window.addEventListener("click", (event) => {
+    const el = event.target as (Element | null);
+    if (event.altKey && el?.hasAttribute(attr)) {
+      const src = el.getAttribute(attr);
+      let url = URL.parse(src ?? "");
+      if (url?.protocol === "file:") {
+        const hash = url.hash.replace(/^#/, ":");
+        url = new URL(`vscode://file${url.pathname}${hash}`);
+      }
+      if (url) {
+        console.log("OPEN SRC LINK:", url.href);
+        window.open(url, "_blank");
+      }
+    }
+  });
+}
+
+enableSrcLinks();
diff --git a/deno.json b/deno.json
@@ -29,6 +29,13 @@
     "outdated": "deno run --no-lock --allow-read=. --allow-net=jsr.io,registry.npmjs.org jsr:@check/deps"
   },
   "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "dom.asynciterable",
+      "deno.ns",
+      "deno.unstable"
+    ],
     "jsx": "react-jsx",
     "jsxImportSource": "@http/jsx-stream",
     "noUncheckedIndexedAccess": true,