2b:null 2c:["$","title",null,{"children":"Preact | Sébastien Pierre | Observable"}] 31:T53f,html = function(){ const create = (name,attr,args) => { return isAttributes(attr) ? preact.createElement(name, normaliseAttributes(attr), args) : preact.createElement(name, {}, attr, args); } return ['Fragment', 'a', 'abbr', 'acronym', 'address', 'applet', 'area', 'article', 'aside', 'audio', 'b', 'base', 'basefont', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'command', 'datalist', 'dd', 'del', 'details', 'dfn', 'dir', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'frame', 'frameset', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'isindex', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'map', 'mark', 'menu', 'meta', 'meter', 'nav', 'noframes', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'slot', 'small', 'source', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'tt', 'u', 'ul', 'video', 'wbr', 'xmp'].reduce((r,k) => { r[k] = (attr,...args) => create(k, attr, args);return r }, {}) }()32:T55a,svg = function(){ const create = (name,attr,args) => { return isAttributes(attr) ? preact.createElement(name, normaliseAttributes(attr, "http://www.w3.org/2000/svg"), ...args) : preact.createElement(name, {"xmlns":"http://www.w3.org/2000/svg"}, attr, ...args)}; return ['Fragment', 'altglyph', 'altglyphdef', 'altglyphitem', 'animate', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'colorProfile', 'cursor', 'defs', 'desc', 'ellipse', 'feblend', 'fecolormatrix', 'fecomponenttransfer', 'fecomposite', 'feconvolvematrix', 'fediffuselighting', 'fedisplacementmap', 'fedistantlight', 'feflood', 'fefunca', 'fefuncb', 'fefuncg', 'fefuncr', 'fegaussianblur', 'feimage', 'femerge', 'femergenode', 'femorphology', 'feoffset', 'fepointlight', 'fespecularlighting', 'fespotlight', 'fetile', 'feturbulence', 'filter', 'font', 'fontFace', 'fontFaceFormat', 'fontFaceName', 'fontFaceSrc', 'fontFaceUri', 'foreignobject', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'missingGlyph', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'script', 'set', 'stop', 'style', 'svg', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'use', 'view', 'vkern'].reduce((r,k) => { r[k] = (attr,...args) => create(k, attr, args);return r }, {}) }()33:[] 2f:{"id":"188cdf1c278df451","slug":"preact","title":"Preact","thumbnail":"e78f9eda11fbf19a29ec6ced7e2e7587967ba4a198c16dcfccc880e5cdfc78ec","access_level":"public","create_time":"$D2020-08-16T21:25:37.643Z","update_time":"$D2022-08-12T22:35:18.306Z","view_time":null,"first_public_time":"$D2020-08-17T04:35:06.782Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"cc0ce9489265b441","login":"sebastien","name":"Sébastien Pierre","avatar_url":"https://avatars-next.observableusercontent.com/e328f33fe583d34ba96f68fa91d451af121df97e58a4f7b231c86f5293028a53","tier":"starter_2024"},"version":541,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7083c0770e4c8937","login":"sebastien","name":"Sébastien Pierre","avatar_url":"https://avatars-next.observableusercontent.com/e328f33fe583d34ba96f68fa91d451af121df97e58a4f7b231c86f5293028a53","tier":null}],"members":[{"type":"individual","id":"7083c0770e4c8937","login":"sebastien","name":"Sébastien Pierre","avatar_url":"https://avatars-next.observableusercontent.com/e328f33fe583d34ba96f68fa91d451af121df97e58a4f7b231c86f5293028a53","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"3abee56c402c8942","slug":"libraries","title":"Libraries","owner":{"id":"cc0ce9489265b441","login":"sebastien","name":"Sébastien Pierre"}},"type":"notebook","body":{"title":"Preact","cells":[{"id":0,"value":"md`# Preact\n\nThis module is a thin wrapper to use [Preact](https://preactjs.com/) directly from Observable. The main interface are the html and svg symbols that define all the HTML and SVG elements and creates them using Preact.\n\nTo use this notebook, import the main :\n\n\\`\\`\\`javascript\nimport {html,svg,render} from \"@sebastien/preact\"\n\\`\\`\\`\n\nand then render a component:\n\n\\`\\`\\`javascript\nrender(svg.svg({width:100,height:100},\n svg.circle({cx:50,cy:50,r:50,fill:\"black\"}),\n svg.text({fill:\"white\",\"font-size\":60,x:30,y:70,\"font-family\":\"Helvetica,Arial\"},\"P.\"))) \n\\`\\`\\`\n\nor if you prefer, after importing the *htm* symbol:\n\n\\`\\`\\`html\nrender(htm\\`\\`)\n\\`\\`\\`\n\nYou can read more about Preact's API [here](https://preactjs.com/guide/v10/api-reference).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"render(svg.svg({width:100,height:100},\n svg.circle({cx:50,cy:50,r:50,fill:\"black\"}),\n svg.text({fill:\"white\",\"font-size\":60,x:30,y:70,\"font-family\":\"Helvetica,Arial\"},\"P.\"))) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":288,"value":"render(htm``)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"md`## Examples`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":375,"value":"md`### Using the \\`html\\` and \\`svg\\` factories`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"render(\n html.div(\n html.p(\"To use preact:\"),\n html.ul(\n html.li(\"Use the \", html.code(\"html\"), \" or \", html.code(\"svg\"), \" functions to create virtual nodes\"),\n html.li(\"Use the \", html.code(\"render\"), \" function to render your virtual nodes into a container, or the document itself by default\"))))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"render(\n svg.svg({width:300,height:300,viewBox:\"0 0 600 600\"},\n svg.circle({cx:200,cy:400,r:200,fill:\"red\", opacity:0.5}),\n svg.circle({cx:300,cy:200,r:200,fill:\"green\", opacity:0.5}),\n svg.circle({cx:400,cy:400,r:200,fill:\"blue\", opacity:0.5})))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":402,"value":"md`### Stateful components\n\nHooks do not work as-is in Observable, but we can nonetheless implement stateful components.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":431,"value":"md`### Using Observable dataflow`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":432,"value":"mutable CounterState = ({rev:0,count:0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":488,"value":"CounterController = (state,op, ...args) => {\n switch (op) {\n case \"inc\":\n state.count++;\n state.rev++;\n break;\n case \"dec\":\n state.count--;\n state.rev++;\n break;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":438,"value":"Counter = (props,dispatch) => {\n const {count} = props\n return html.div(\"Counter: \", count, \" \", html.button({onclick:_=>dispatch(\"inc\")}, \"+\"))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":444,"value":"stateful(Counter, CounterController, state => {mutable CounterState = state})(CounterState)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":428,"value":"md`#### Using hooks\n\nCurrently, using hooks do not work, maybe because the cells are executed in a worker -- this would need to be investigated.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":407,"value":"render((()=>{\n const [count, setCount] = useState(0);\n return html.div(\"Counter: \", count, \" \", html.button({onclick:_=>setCount(count+1)}, \"+\"))\n})(), \"stateful\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"md`## Factory functions\n\nThe factory functions in the *html* and *svg* modules all support an optional attributes object as first argument. Note that this object *will be normalised in-place* while being processed by the function, which means that the following attributes will be renamed:\n\n- _ → class\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"md`### Render function\n\nThe *render(vnode,node)* function is what renders your virtual DOM nodes into an actual DOM node. By default, it will create a new node to mount the vnodes on, and if *node* is a string, then the node will be resolved by id.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"render = (vnode, node) => {\n var root = undefined;\n if (typeof node === \"string\") {\n root = document.getElementById(node);\n if (!root) {\n root = document.createElement(\"div\");\n root.setAttribute(\"id\", node);\n }\n } else {\n root = node || document.createElement(\"div\")\n }\n preact.render(vnode, root);\n return root; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":484,"value":"md`### Stateful function\n\nThe *stateful(component,controller,updater)* returns a function like *component(state)* that can be used lik so:\n\n\\`\\`\\`javascript\nMyComponentState = ({})\nMyComponent = stateful(MyComponentView, MyComponentController)\nMyComponentController = (operation, ...args) => {mutable MyComponentState.variable = \"value\";}\nMyComponent(MyComponentState)\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":473,"value":"stateful = (component,controller,updater)=>{\n var rev = undefined;\n var cached = undefined;\n var root = document.createElement(\"div\")\n const renderer = (state)=> {\n state.rev = state.rev || 0;\n if (!state || rev !== state.rev) {\n cached = component(state, (...args) => updater(controller(state, ...args)||state))\n }\n render(cached, root);\n return root;\n }\n return renderer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"isAttributes = attr => attr instanceof Object && (!(attr instanceof Array)) && (!(attr.props))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"normaliseAttributes = (attr, namespace=undefined) => {\n Object.keys(attr).forEach((k) => {\n if (k === \"_\") {attr[\"className\"] = attr[k];delete attr[k]}\n })\n if (namespace) {attr[\"xmlns\"] = attr[\"xmlns\"] || namespace}\n return attr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":200,"value":"md`Here we load both *preact* and *preact-hooks* so that we have a full-featured set of primitives and support purely functional components.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":539,"value":"PreactVersion = \"10.10.2\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"preact = {\n const m = require.alias({\n preact: `preact@${PreactVersion}/dist/preact.umd.js`,\n // NOTE: Hooks do not work\n \"preact-hooks\": `preact@${PreactVersion}/hooks/dist/hooks.umd.js`\n });\n const r = await m(\"preact\");\n // NOTE: Hooks do not work\n Object.assign(r, await m(\"preact-hooks\"));\n return r;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":509,"value":"useState = preact.useState","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":234,"value":"md`We also load HTM and bind it with Preact so that we have another way of definining the components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"htm = (await require(\"htm@1/dist/htm.js\")).bind(preact.createElement)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"md`\n## References\n\n- [Hello JSX](https://observablehq.com/@mbostock/hello-jsx) -- Mike Bostock's React embedding in Observable was useful to get the imports working.\n- [@j-f1 React in Observable](https://observablehq.com/@j-f1/react)\n- [@yurivish React utilities](https://observablehq.com/@yurivish/react)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"