31:[] 2f:{"title":"Using htm/Preact/JSX as a \"Cell Mode\" in Observable","cells":[{"id":0,"value":"# Using htm/Preact/JSX as a \"Cell Mode\" in Observable\nBased off of [this hack](https://observablehq.com/@asg017/hacking-observables-new-cell-modes-to-use-sql).\n\nAny cell in this notebook that uses the \"TeX\" Cell Mode will implicitly render with Preact instead! Similar to React/JSX syntax, but easier to manage in Observable.\n\nTo use in a notebook:\n\n```js\nimport {tex, Preact, htm, hooks} from \"@asg017/preact-htm-cell-mode-hack\"\n```","pinned":false,"hidden":false,"mode":"md"},{"id":2,"value":"Preact = import(\n \"https://cdn.skypack.dev/pin/preact@v10.5.13-D6jTjNdYfFTh4ByqJuPH/mode=imports/optimized/preact.js\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"hooks = import(\n \"https://cdn.skypack.dev/pin/preact@v10.5.13-D6jTjNdYfFTh4ByqJuPH/mode=imports/optimized/preact/hooks.js\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"htm = (\n await import(\n \"https://cdn.skypack.dev/pin/htm@v3.0.4-cmMJ6o0JPpTvFvXS4BFU/mode=imports/optimized/htm.js\"\n )\n).default.bind(Preact.h)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"tex = ({\n block: (...params) => {\n const container = html`

`;\n Preact.render(htm(...params), container);\n return container;\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"function HelloWorld() {\n return htm`

\n Hello, world!\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"$${/* everything in this \"TeX\" code cell gets rendered as pure CSS!*/ null}\n\n<${HelloWorld}/>","pinned":true,"hidden":false,"mode":"tex"},{"id":43,"value":"function Counter() {\n const [value, setValue] = hooks.useState(0);\n\n return htm`

Counter: ${value}

\n \n \n

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"class TodoList extends Preact.Component {\n constructor(props) {\n super(props);\n this.state = { todos: [], text: \"\" };\n this.setText = this.setText.bind(this);\n this.addTodo = this.addTodo.bind(this);\n }\n setText(e) {\n this.setState({ text: e.target.value });\n }\n\n addTodo(e) {\n e.preventDefault();\n let { todos, text } = this.state;\n todos = todos.concat({ text });\n this.setState({ todos, text: \"\" });\n }\n\n render() {\n const { todos, text } = this.state;\n return htm``;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"function DogPic() {\n const [pic, setPic] = hooks.useState(null);\n const [refresh, setRefresh] = hooks.useState(null);\n\n hooks.useEffect(() => {\n fetch(\"https://dog.ceo/api/breeds/image/random\")\n .then((r) => r.json())\n .then((data) => setPic(data.message));\n }, [refresh]);\n\n if (!pic) return htm`

`;\n return htm`

Doggo

\n \n

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"<${Counter}/>\n\n
\n \n<${TodoList}/>\n\n<${DogPic}/>\n","pinned":true,"hidden":false,"mode":"tex"}],"files":"$W31","stdlib":"1","titling":"auto"}