Forked from developit/*Preact Without Build Tools.md
Created
October 24, 2022 12:33
-
-
Save trickster/b9424d3c2138f4e153072192b91f2686 to your computer and use it in GitHub Desktop.
This file contains hidden or 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/preact@10.17.2'; | |
| import { useState } from 'https://esm.sh/preact@10.17.2/hooks'; | |
| import { html } from 'https://esm.sh/htm@3.0.4/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([]); | |
| 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" /> | |
| </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> | |
| <input type="checkbox" checked=${todo.done} onClick=${toggle} /> | |
| ${todo.text} | |
| </li> | |
| `; | |
| } | |
| render(html`<${App} />`, document.body); |
This file contains hidden or 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; } | |
| li { padding: 5px; } | |
| input[type="checkbox"] { margin-right: 10px; } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="module" src="./app.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment