Last active
January 5, 2026 10:23
-
-
Save cpq/7ccb7c8a017d78f8eac145a6fe7df278 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
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <style> | |
| div {} | |
| :root { --bgColor: orange; } | |
| .panel { background: var(--bgColor); } | |
| </style> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body></body> | |
| <script type="module"> | |
| import { html, h, useSignal, computed, useEffect, useRef, render, } from "https://npm.reversehttp.com/@preact/signals-core,@preact/signals,htm/preact,preact/hooks,preact"; | |
| const Panel = ({ content, sigVal }) => { | |
| useEffect(function() { | |
| console.log(`panel useeffect, sigVal ${sigVal.value}`) | |
| }, []); | |
| return html`<div class="rounded p-4 panel"> | |
| <div>value: ${sigVal.value}<//> | |
| ${content} | |
| <//>`; | |
| }; | |
| const App = () => { | |
| // const loaded = computed(x => x); | |
| const sigVal = useSignal(0); | |
| useEffect(() => { | |
| sigVal.value = 123; | |
| console.log("app useeffect"); | |
| }, []); | |
| return html`<div class="m-5"> | |
| <${Panel} content="I am a panel" sigVal=${sigVal} /> | |
| <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick=${() => sigVal.value = 'clicked!'}>click me<//> | |
| </div>`; | |
| }; | |
| render(html`<${App} />`, document.body); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment