Created
May 28, 2024 00:53
-
-
Save scarf005/19b8de6583f01edc427b6273b251a385 to your computer and use it in GitHub Desktop.
Simplest preact app without any build step
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Look ma, no build step</title> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script type="module" src="./main.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // @ts-check | |
| /** @typedef {import("https://esm.sh/[email protected]").VNode} VNode */ | |
| import { h, render } from "https://esm.sh/v128/[email protected]" | |
| import { signal } from "https://esm.sh/@preact/[email protected][email protected]" | |
| import htm from "https://esm.sh/[email protected]" | |
| const html = | |
| /** @type {(strings: TemplateStringsArray, ...values: any[]) => VNode} */ ( | |
| htm.bind(h) | |
| ) | |
| /** @type {(props: { children: VNode }) => VNode} */ | |
| const Foo = ({ children }) => | |
| html` | |
| <div> | |
| <h1>Foo</h1> | |
| ${children} | |
| </div> | |
| ` | |
| const App = () => { | |
| const count = signal(0) | |
| return html` | |
| <div> | |
| <${Foo}> | |
| <p>Count: ${count}</p> | |
| <//> | |
| <button onClick=${() => count.value--}>Decrement</button> | |
| <button onClick=${() => count.value++}>Increment</button> | |
| </div> | |
| ` | |
| } | |
| const root = /**@type {HTMLElement} */ (document.querySelector("#root")) | |
| render(html`<${App} />`, root) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment