1/** @jsxImportSource https://esm.sh/preact */
2import { render } from "npm:preact-render-to-string";
3
4export const preactExample = () =>
5 new Response(render(<div>Test {1 + 1}</div>), {
6 headers: {
1Migrated from folder: Archive/docsExamples/jsx/preactExample
1import { html } from "https://esm.town/v/stevekrouse/html";
2import { render } from "npm:preact-render-to-string";
3
4export let preact = jsx => html(render(jsx));
1Migrated from folder: Archive/docsExamples/scriptTag/preact
1/** @jsxImportSource https://esm.sh/preact */
2import { render } from "npm:preact-render-to-string";
3
4const x = 1;
1export const preactTest = (async () => {
2 const { useState, h, htm, renderToString } = await import(
3 "https://npm.reversehttp.com/preact,htm,preact/hooks,preact-render-to-string"
4 );
5 const html = htm.bind(h);
42
43 const onCancel = function (event) {
44 // handle cancel event (e.g. email the user later to try and reactivate them)
45 // note: this event will not be triggered if the user closes their browser.
46 };
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!
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: