Val Town Code SearchReturn to Val Town

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

1Migrated from folder: docs/guides/reactSSRExample

1# lit
2
3[Lit](https://lit.dev/docs/ssr/server-usage/) is kind of like Google's answer to React: it's a little more reliant on browser APIs like custom elements and the shadow DOM, a little less 'magic', like using JSX.
4
5This is an example of using Lit and rendering it straight to a string, which is something that's recently popular. It works pretty well, right off the bat: Lit provides nice ESM modules and a pretty smooth workflow!

2
3TL;DR: you can see a Figma board in a website
4![An image of a screenshot of Figma the visual design software and a browser, showing how something drawn in Figma can be rendered individually in the browser](https://air-prod.imgix.net/fb0a5caa-72b5-4002-ad23-1e2628f48362.jpg?w=2000&h=4664&auto=compress&ixlib=react-9.5.4 "Figma frame to HTML")
5
6Migrated from folder: Figma/FigmaFrameToHTML

11```
12
13Contrast with [@stevekrouse.sparklineEx](/v/@stevekrouse.sparklineEx) which uses react-sparklines.
14
15Migrated from folder: utils/sparklines/sparklineEx2

1# Server-Rendered React Sparkline Example
2
3Vaguely inspired by [Easy SVG sparklines](https://alexplescan.com/posts/2023/07/08/easy-svg-sparklines/), but totally different because that had zero dependencies and this has all the dependencies: react, htm, react-sparklines.
4
5This is the live-generated SVG that this very val generates:

1Migrated from folder: imports/react

1# @easrng.preactWebApp example
2[![Open](https://easrng-button.express.val.run/Open)](https://easrng-examplepreactwebapp.express.val.run/)

1# @easrng.preactWebApp
2[![Example](https://easrng-button.express.val.run/Example)](https://www.val.town/v/easrng.examplePreactWebApp/)
3Make a web app on val.town with server-side rendered Preact components

1Migrated from folder: react_demo/REACT_TODO_LIST_CONTENTS