This is a demonstration of using Preact without any build tooling. The library is linked from the esm.sh CDN, however a standalone JS file exporting HTM + Preact + Hooks can also be downloaded here.
Forked from developit/*Preact Without Build Tools.md
Created
January 28, 2024 20:22
-
-
Save martinandersen3d/89d05406fe05c355bd633517ee1b3901 to your computer and use it in GitHub Desktop.
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>Preact Without Tooling</title> | |
| <style> | |
| ul { list-style: none; padding: 0; } | |
| label { padding: 5px; display: flex; gap: 5px; } | |
| </style> | |
| </head> | |
| <body> | |
| <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
| import { render } from 'https://esm.sh/[email protected]'; | |
| import { useState, useCallback } from 'https://esm.sh/[email protected]/hooks'; | |
| import { html } from 'https://esm.sh/[email protected]/preact'; | |
| const INITIAL_TODOS = [ | |
| { text: 'add HTM imports', done: true }, | |
| { text: 'remove bundler', done: true }, | |
| { text: 'write code', done: false } | |
| ]; | |
| function App() { | |
| const [todos, setTodos] = useState(INITIAL_TODOS); | |
| console.log(todos); | |
| const add = useCallback(e => { | |
| const text = e.target.todo.value; | |
| setTodos(todos => todos.concat({ text, done: false })); | |
| }, []); | |
| const updateTodo = useCallback(todo => { | |
| // we update the todo in-place, so just invalidate the list to re-render: | |
| setTodos(todos => todos.slice()); | |
| }, []); | |
| return html` | |
| <div class="app"> | |
| <form action="javascript:" onSubmit=${add}> | |
| <input name="todo" placeholder="Add Todo [enter]" /> | |
| </form> | |
| <ul> | |
| ${todos.map(todo => html` | |
| <${Todo} todo=${todo} onChange=${updateTodo} /> | |
| `)} | |
| </ul> | |
| </div> | |
| `; | |
| } | |
| function Todo({ todo, onChange }) { | |
| const toggle = useCallback(e => { | |
| todo.done = !todo.done; | |
| onChange(); | |
| }, []); | |
| return html` | |
| <li> | |
| <label> | |
| <input type="checkbox" checked=${todo.done} onClick=${toggle} /> | |
| ${todo.text} | |
| </label> | |
| </li> | |
| `; | |
| } | |
| render(html`<${App} />`, document.body); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment