29:null 2a:["$","title",null,{"children":"Using htm/Preact/JSX as a \"Cell Mode\" in Observable | Alex Garcia | Observable"}] 2f:[] 2d:{"id":"0eea1d5471fb53f8","slug":"preact-htm-cell-mode-hack","title":"Using htm/Preact/JSX as a \"Cell Mode\" in Observable","thumbnail":"7473905915f47da3d8b50cafa621c86470092ec10e596c31cd7ff1d7b900dc78","access_level":"public","create_time":"$D2021-05-14T20:31:48.283Z","update_time":"$D2021-05-14T22:08:15.228Z","view_time":null,"first_public_time":"$D2021-05-14T22:08:51.587Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"512cbe7209990c30","login":"asg017","name":"Alex Garcia","avatar_url":"https://avatars-next.observableusercontent.com/fa4015f63c3a56af76b90247b0b0f8a98019b671f135157d746d3924eda27c07","tier":"starter_2024"},"version":113,"publish_version":113,"role":null,"authored":false,"authors":[{"type":"individual","id":"113fc3dc69e1f893","login":"asg017","name":"Alex Garcia","avatar_url":"https://avatars-next.observableusercontent.com/fa4015f63c3a56af76b90247b0b0f8a98019b671f135157d746d3924eda27c07","tier":null}],"members":[{"type":"individual","id":"113fc3dc69e1f893","login":"asg017","name":"Alex Garcia","avatar_url":"https://avatars-next.observableusercontent.com/fa4015f63c3a56af76b90247b0b0f8a98019b671f135157d746d3924eda27c07","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"4d6fcf53a1ba83ac","slug":"cell-modes-hack","title":"\"Cell Modes\" Hack","owner":{"id":"512cbe7209990c30","login":"asg017","name":"Alex Garcia"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"function HelloWorld() {\n return htm`

\n Hello, world!\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$${/* everything in this \"TeX\" code cell gets rendered as pure CSS!*/ null}\n\n<${HelloWorld}/>","pinned":true,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"<${Counter}/>\n\n
\n \n<${TodoList}/>\n\n<${DogPic}/>\n","pinned":true,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"