René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Rendering pipeline","articleBody":"We need a rendering pipeline in order to render any of this stuff, and handle a basic render loop (based on reactivity mostly).\n\n## Prior art\n\n### React\n\n```ts\nimport React from \"react\";\nimport { createRoot } from \"react-dom/client\";\n\nfunction App() {\n  return \u003ch1>Hello, world!\u003c/h1>;\n}\n\nconst root = createRoot(document.getElementById(\"root\"));\nroot.render(\u003cApp />);\n```\n\n### Solid\n\n```ts\nimport { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nfunction App() {\n  const [count, setCount] = createSignal(0);\n\n  return (\n    \u003cmain>\n      \u003cbutton onClick={() => setCount(count() + 1)}>\n        Count: {count()}\n      \u003c/button>\n    \u003c/main>\n  );\n}\n\nrender(() => \u003cApp />, document.getElementById(\"root\"));\n```\n\n### Svelte\n\n```ts\nimport { mount } from 'svelte';\nimport App from './App.svelte';\n\nconst app = mount(App, {\n  target: document.querySelector('#app'),\n  props: { some: 'property' }\n});\n```\n\n## API design\n\nAll of these prior art examples have a `mount` or a `render` which takes a component and renders it to some target.\n\nSo in `@clack/ui`, we could potentially do similar:\n\n```ts\nimport { render, Box } from '@clack/ui';\n\nfunction App() {\n  return new Box('some text', opts);\n\n  // Once we have JSX bindings:\n  // return \u003cBox>some text\u003c/Box>\n}\n\nrender(() => App(), process.stdout);\n\n// or alternatively\nconst root = createRenderer(process.stdout);\nroot.render(App());\n```\n\n## Open questions\n\n- Let's brainstorm how we want this API to look as there are still decisions to be made on the shape\n- We don't need to worry about `requestAnimationFrame` yet, until we decide the outer design. Internally, reactivity will call that method to trigger a re-render.\n","author":{"url":"https://github.com/43081j","@type":"Person","name":"43081j"},"datePublished":"2026-06-18T08:51:57Z","url":"https://github.com/bombshell-dev/ui/issues/4"}