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.
Last active
September 25, 2024 22:35
-
-
Save developit/3631edd9033df8df5975786b19f16bd8 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); |
Have you ever gotten useContext and signals to work in this way?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Looks neat 👍 what would be the best way to use css for components with such approach?