From efb41f22c34948fedfd51ba4e228e807ed7d856a Mon Sep 17 00:00:00 2001 From: Caleb Jasik Date: Mon, 23 Aug 2021 15:43:22 -0500 Subject: [PATCH] Add Astro `` component (#675) * Initial MVP Debug component * Document the prettifying of the input * Just make `` a wrapper around `` lol * feat: add details/summary debug component * chore: remove Props (unused) * fix: prefer `div` to semantic elements * chore: format * fix: prop-drill `class` into components * fix: ensure `astro/components` are evaluated lazily * feat(debug): export debug component from `astro/debug` * fix: minimal example local snowpack config * docs: add debugging docs * chore: add changeset * docs: update debug docs Co-authored-by: Nate Moore --- .changeset/wet-schools-dream.md | 14 + docs/src/config.ts | 1 + docs/src/pages/guides/debugging.md | 6 + .../src/pages/reference/builtin-components.md | 19 ++ examples/minimal/package.json | 3 + packages/astro/components/Debug.astro | 306 ++++++++++++++++++ packages/astro/package.json | 1 + 7 files changed, 350 insertions(+) create mode 100644 .changeset/wet-schools-dream.md create mode 100644 docs/src/pages/guides/debugging.md create mode 100644 packages/astro/components/Debug.astro diff --git a/.changeset/wet-schools-dream.md b/.changeset/wet-schools-dream.md new file mode 100644 index 000000000..adaa06e3c --- /dev/null +++ b/.changeset/wet-schools-dream.md @@ -0,0 +1,14 @@ +--- +'astro': patch +--- + +Add `` component for JavaScript-free client-side debugging. + +```astro +--- +import Debug from 'astro/debug'; +const obj = { /* ... */ } +--- + + +``` diff --git a/docs/src/config.ts b/docs/src/config.ts index 40833bac6..675913a23 100644 --- a/docs/src/config.ts +++ b/docs/src/config.ts @@ -18,6 +18,7 @@ export const SIDEBAR = { { text: 'Guides', header: true }, { text: 'Styling & CSS', link: 'guides/styling' }, { text: 'Markdown', link: 'guides/markdown-content' }, + { text: 'Debugging', link: 'guides/debugging' }, { text: 'Data Fetching', link: 'guides/data-fetching' }, { text: 'Pagination', link: 'guides/pagination' }, { text: 'RSS', link: 'guides/rss' }, diff --git a/docs/src/pages/guides/debugging.md b/docs/src/pages/guides/debugging.md new file mode 100644 index 000000000..561af0267 --- /dev/null +++ b/docs/src/pages/guides/debugging.md @@ -0,0 +1,6 @@ +--- +layout: ~/layouts/MainLayout.astro +title: Debugging +--- + +Astro runs on the server and logs directly to your terminal, so it can be difficult to debug values from Astro. Astro's built-in `` component can help you inspect values inside your files on the clientside. Read more about the [built-in Debug Component](/reference/builtin-components#debug-). diff --git a/docs/src/pages/reference/builtin-components.md b/docs/src/pages/reference/builtin-components.md index d148c8ba0..ce64819d9 100644 --- a/docs/src/pages/reference/builtin-components.md +++ b/docs/src/pages/reference/builtin-components.md @@ -30,3 +30,22 @@ import { Prism } from 'astro/components'; ``` This component provides syntax highlighting for code blocks. Since this never changes in the client it makes sense to use an Astro component (it's equally reasonable to use a framework component for this kind of thing; Astro is server-only by default for all frameworks!). + + +## `` + +```astro +--- +import { Debug } from 'astro/debug'; +const serverObject = { + a: 0, + b: "string", + c: { + nested: "object" + } +} +--- + +``` + +This component provides a way to inspect values on the clientside, without any JavaScript. diff --git a/examples/minimal/package.json b/examples/minimal/package.json index 72440233c..a1ee2ad24 100644 --- a/examples/minimal/package.json +++ b/examples/minimal/package.json @@ -9,5 +9,8 @@ }, "devDependencies": { "astro": "^0.19.2" + }, + "snowpack": { + "workspaceRoot": "../.." } } diff --git a/packages/astro/components/Debug.astro b/packages/astro/components/Debug.astro new file mode 100644 index 000000000..b09f870a7 --- /dev/null +++ b/packages/astro/components/Debug.astro @@ -0,0 +1,306 @@ +--- +const key = Object.keys(Astro.props)[0]; +const value = Astro.props[key]; + +const getType = (node: unknown) => { + if (Array.isArray(node)) return 'array'; + if (node === null) return 'null'; + if (typeof node === 'object') { + if ((node as any).then) return 'promise'; + } + return typeof node; +}; + +const getSummary = (node: any, key: string, className: string) => { + const type = getType(node); + let value; + let open; + let close; + + if (type === 'function') { + return <> + {(key || !key && key === 0) && <>{key}:} + {node.name}() + + } + + if (type === 'promise') { + return <> + {(key || !key && key === 0) && <>{key}:} + Promise + + } + + if (type === 'array') { + value = node.length; + open = <>Array{'['}; + close = ']'; + } else if (type === 'object') { + const keys = Object.keys(node); + if (keys.length === 0) { + value = 'Empty'; + } else if (keys.length > 3) { + value = '…'; + } else { + value = keys.slice(0, 3).join(','); + } + open = '{'; + close = '}'; + }; + + return <> + {key && <>{key}: } + {open && {open}} + + {value} + {close && {close}} + + ; +}; + +const Details = ({ node, key, children, class: className }) => { + const type = getType(node); + const props = {}; + + if (type === 'array' || type === 'object') { + props['data-char'] = type === 'array' ? ']' : '}' + props.open = !key && type === 'object' ? '' : undefined; + } + + return ( +
+ + {children} +
+ ); +} + +const Summary = ({ node, key, class: className }) => { + return ( + {getSummary(node, key, className)} + ); +} + +const Empty = Symbol('Empty'); + +const KeyValue = ({ key, value, dim, class: className }) => { + let type = key === '__proto__' ? 'prototype' : getType(value); + if (type === 'null') { + value = 'null'; + } else if (type === 'undefined') { + value = 'undefined'; + } else if (value === Empty) { + type = 'empty'; + value = 'Empty'; + } else { + value = JSON.stringify(value); + } + + return ( +
+ {(key || !key && key === 0) && <>{key}:} + + {value} + +
+ ) +} + +const Node = ({ node, key, class: className, ...props }) => { + const type = getType(node); + className = className.replace(/debug-value/g, ''); + + if (type === 'array' || type === 'object') { + let children = []; + if (type === 'array' && node.length > 0 && Object.entries(node).length === 0) { + children = Array.from({ length: node.length }, (_, key) => ); + } else { + children = Object.entries(node).map(([key, value]) => ); + } + return ( +
+ ); + } else if (type === 'function') { + return ( +
+ + + + }/> + ); + } else if (type === 'promise') { + return ( +
+ } /> + ); + } + + return ; +} +--- + +
+
+

Debug "{key}"

+
+ +
+ +
+
+ + diff --git a/packages/astro/package.json b/packages/astro/package.json index e359f3081..1fca0a9fc 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -16,6 +16,7 @@ "./snowpack-plugin": "./snowpack-plugin.cjs", "./snowpack-plugin-jsx": "./snowpack-plugin-jsx.cjs", "./components": "./components/index.js", + "./debug": "./components/Debug.astro", "./components/*": "./components/*", "./runtime/svelte": "./dist/frontend/runtime/svelte.js", "./internal/*": "./dist/internal/*",