1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { preactWebApp } from "https://esm.town/v/easrng/preactWebApp";
export const examplePreactWebApp = preactWebApp(
function App(
{ html, req, ...rest }: typeof preactWebApp.props,
) {
const KeyList = ({ obj, maxDepth = 3 }) =>
html`<ul>${
Object.entries(obj).map(([k, v]) =>
html`<li>${k}: ${typeof v}${
maxDepth > 0 && typeof v === "object" && v !== null &&
html`<${KeyList} obj=${v} maxDepth=${maxDepth - 1} />`
}</li>`
)
}</ul>`;
return html`
<title>@easrng.preactWebApp example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>html{font-family:sans-serif;color-scheme:dark light;padding:1rem}h1{font-size:2.5rem;font-weight:300;margin:1rem 0}</style>
<h1><a href="https://www.val.town/v/easrng.preactWebApp">@easrng.preactWebApp</a> example</h1>
<p>available props:</p>
<${KeyList} obj=${{ html, req, ...rest }}/>
`;
},
);