Readme
Create val/** @jsxImportSource https://esm.sh/react */
import react_http from "https://esm.town/v/stevekrouse/react_http?v=6";
import { useState } from "https://esm.sh/react@18.2.0";
export function App() {
const [ count, setCount ] = useState(0)
return (
<div>
<h1>Example App</h1>
</div>
}
export default () => react_http({
component: App,
sourceURL: import.meta.url,
head: `<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Example App</title>`
})
The val with your React component will be imported in the browser. Thus, only use https imports in this val and any that it imports. Replace any npm: with https://esm.sh/ and everything should work great.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export default (component: Function, url: string) =>
function(req: Request) {
return new Response(
`<html>
<body></body>
<script type="module">
import { ${component.name} } from "${url}"
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
import { jsx } from "https://esm.sh/react@18.2.0/jsx-runtime";
createRoot(document.body).render(jsx(App, {}));
</script>
</html>`,
{
headers: {
"content-type": "text/html",
},
},
);
};
👆 This is a val. Vals are TypeScript snippets of code, written in the browser and run on our servers. Create scheduled functions, email yourself, and persist small pieces of data — all from the browser.