Created
August 11, 2025 18:52
-
-
Save jhead/081edae41ee6600d2280fac63a9ffedb to your computer and use it in GitHub Desktop.
remote-dom with event listeners
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <link rel="icon" type="image/svg+xml" href="/vite.svg" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Vite + Preact + TS</title> | |
| </head> | |
| <body> | |
| <iframe src="/iframe.html"></iframe> | |
| <div id="host-rendered"></div> | |
| <script type="module" src="/src/host.ts"></script> | |
| </body> | |
| </html> |
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 { ThreadWindow } from "@quilted/threads"; | |
| import { DOMRemoteReceiver } from "@remote-dom/core/receivers"; | |
| const iframe = document.querySelector('iframe')!; | |
| const root = document.getElementById('host-rendered')!; | |
| iframe.addEventListener('load', async () => { | |
| const thread = ThreadWindow.from(iframe.contentWindow!); | |
| const receiver = new DOMRemoteReceiver(); | |
| receiver.connect(root); | |
| await (thread.imports as any).render(receiver.connection); | |
| }); |
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <link rel="icon" type="image/svg+xml" href="/vite.svg" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Vite + Preact + TS</title> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <button>Click me</button> | |
| <div id="counter">0</div> | |
| </div> | |
| <script type="module" src="/src/iframe.ts"></script> | |
| </body> | |
| </html> |
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 {RemoteMutationObserver} from '@remote-dom/core/elements'; | |
| import {ThreadWindow} from '@quilted/threads'; | |
| const app = document.getElementById('app'); | |
| const button = document.querySelector('button'); | |
| const counter = document.querySelector('#counter'); | |
| button?.addEventListener('click', () => { | |
| counter.textContent = (parseInt(counter.textContent) + 1).toString(); | |
| }); | |
| ThreadWindow.parent({ | |
| exports: { | |
| render: async (connection) => { | |
| const observer = new RemoteMutationObserver(connection); | |
| observer.observe(app); | |
| } | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment