fvilante/deno-deploy-jsx-sample.tsx

## deno-deploy-jsx-sample.tsx
// You need to import `h` factory function as Deno Deploy
// uses it instead of `React.createElement`
import { h } from "https://x.lcas.dev/preact@10.5.12/mod.js";
import { renderToString } from "https://x.lcas.dev/preact@10.5.12/ssr.js";

let elapsedTime = 0

setInterval( () => { elapsedTime = elapsedTime + 1; }, 1000)

function App() {
  return (
    <html>
      <head>
        <title>Hello from JSX</title>
      </head>
      <body>
        <h1>Hello world</h1>
        <br></br>
        <h2> this is a f test </h2>
        <p> this is not a f test juca </p>
        <h3> many seconds has passed through {elapsedTime} </h3>
        <svg width="100" height="100">
          <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
          <circle cx="50" cy="50" r={elapsedTime} stroke="green" stroke-width="4" fill="yellow" />
        </svg>
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <rect x="0" y="0" width="100%" height="100%"/>
          <circle cx="50%" cy="50%" r="4" fill="white"/>
        </svg>
      </body>
    </html>
  );
}

addEventListener("fetch", (event) => {
  // renderToString generates html string from JSX components.
  const response = new Response(renderToString(<App />), {
    headers: { "content-type": "text/html; charset=utf-8" },
  });

  event.respondWith(response);
});
	// You need to import `h` factory function as Deno Deploy
	// uses it instead of `React.createElement`
	import { h } from "https://x.lcas.dev/preact@10.5.12/mod.js";
	import { renderToString } from "https://x.lcas.dev/preact@10.5.12/ssr.js";

	let elapsedTime = 0

	setInterval( () => { elapsedTime = elapsedTime + 1; }, 1000)

	function App() {
	return (
	<html>
	<head>
	<title>Hello from JSX</title>
	</head>
	<body>
	<h1>Hello world</h1>
	<br></br>
	<h2> this is a f test </h2>
	<p> this is not a f test juca </p>
	<h3> many seconds has passed through {elapsedTime} </h3>
	<svg width="100" height="100">
	<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
	<circle cx="50" cy="50" r={elapsedTime} stroke="green" stroke-width="4" fill="yellow" />
	</svg>
	<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
	<rect x="0" y="0" width="100%" height="100%"/>
	<circle cx="50%" cy="50%" r="4" fill="white"/>
	</svg>
	</body>
	</html>
	);
	}

	addEventListener("fetch", (event) => {
	// renderToString generates html string from JSX components.
	const response = new Response(renderToString(<App />), {
	headers: { "content-type": "text/html; charset=utf-8" },
	});

	event.respondWith(response);
	});