diff --git a/README.md b/README.md index 39022b7..670b709 100644 --- 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 index 82798b0..c1cd0a0 100644 --- 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; +} 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 ?