2b:null 2c:["$","title",null,{"children":"Preact Observable Setup | Alok Pepakayala | Observable"}] 31:[] 2f:{"id":"eeed887fb330364d","slug":"preact-setup","title":"Preact Observable Setup","thumbnail":"84ce5a49c6c1b9803a3bb0ba78eee28127b72ceb6fbecc6f8c69901723304b23","access_level":"public","create_time":"$D2021-02-12T08:39:58.031Z","update_time":"$D2021-06-08T18:24:17.759Z","view_time":null,"first_public_time":"$D2021-02-12T14:22:30.379Z","fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"ebdd8a722ae381e2","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/f28a7b5f4fb16a63caaace8a87a531e60bea383d6e9d50e126570c77c0814ba9","tier":"starter_2024"},"version":951,"publish_version":951,"role":null,"authored":false,"authors":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null}],"members":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Preact Observable Setup","cells":[{"id":774,"value":"{\n //borrowed from https://observablehq.com/@observablehq/bannertitles\n const pageTitle = \"Preact Observable Setup\";\n const title1 = \"Preact Observable\";\n const title2 = \"Setup\";\n\n //:scope is uid generated on mount of the Comp/Resp containers\n const stylestring = `\n :scope svg{ background-color: #9B51E0; fill: #fff; }\n :scope text {font-size: 36px; font-weight: bold; overflow-wrap: anywhere;}`;\n\n //Renders to the observable cell\n return Render(htm`\n

${pageTitle}

\n <${Comp} stylestring=${stylestring}>\n \n \n `);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":544,"value":"md`### Usage\n\n~~~js\nimport {htm, Preact, Render, Comp, Resp, Router, route, history, define} from '@a10k/preact-setup'\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":541,"value":"md`### Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":728,"value":"requires = require.alias({\n preact: \"https://cdnjs.cloudflare.com/ajax/libs/preact/10.5.12/preact.umd.js\",\n htm: \"https://cdnjs.cloudflare.com/ajax/libs/htm/3.0.4/htm.umd.js\",\n hooks: \"https://cdnjs.cloudflare.com/ajax/libs/preact/10.5.12/hooks.umd.js\",\n preactRouter: `https://npmcdn.com/preact-router@3.2.1/dist/preact-router.js`,\n preactCustomElements: `https://cdnjs.cloudflare.com/ajax/libs/preact-custom-element/4.0.0/preact-custom-element.umd.js`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"Preact = {\n const Preact = await requires(\"preact\");\n const preactRouter = requires(\"preactRouter\");\n const hooks = await requires(\"hooks\");\n Object.assign(Preact, hooks);\n Preact.html = (await requires(\"htm\")).bind(Preact.h);\n return Preact;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":844,"value":"htm = Preact.html","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":550,"value":"Render = node => {\n var dom = this || html`

`;\n //var shadow = dom.shadowRoot || dom.attachShadow({ mode: 'open' });\n\n Preact.render(node, dom);\n return dom;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":506,"value":"Comp = props => {\n const { stylestring, classstring, onClick, children } = props;\n const [stateStyleID, setStateStyleID] = Preact.useState(DOM.uid());\n\n return Preact.html`

\n \n ${children}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":499,"value":"Resp = props => {\n const {\n width,\n height,\n pagewidth,\n classstring,\n stylestring,\n children\n } = props;\n const [stateStyleID, setStateStyleID] = Preact.useState(DOM.uid());\n const scaling = val => (val / width) * pagewidth;\n\n return Preact.html`

\n \n ${children}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":704,"value":"Router = (await requires(\"preactRouter\")).Router","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":708,"value":"route = (await requires(\"preactRouter\")).route","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":795,"value":"history = require(\"history\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":870,"value":"define = requires('preactCustomElements')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":532,"value":"md`### Demo\n\nMinimalistic demos to keep the script small.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":509,"value":"{\n //defining styles as objects sucks, you cant copy paste from sketch/figma/xd or even the chrome debugger, what about hover and all the other cool css stuff? :scope is your magic bullet!\n var style = `\n:scope{\n background: #e8e8e8;\n border-radius: 2px;\n padding: 2px;\n cursor: pointer;\n}\n:scope:hover{\n color: #3B5FC0;\n}\n:scope.underline{\n text-decoration: underline;\n}\n:scope.strike{\n text-decoration: line-through;\n}\n`;\n return Render(htm`<${Comp}\n classstring=${\"strike underline\"}\n stylestring=${style}>\n Hello world!\n `);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":501,"value":"Render(htm`<${Resp} \n classstring=${\"\"}\n stylestring=${\"\"} \n width=\"100\" \n height=\"30\" \n pagewidth=${width}>\n Hello world!\n `)\n//the 100x30 dynamically resizes using the transform css attributes to always fit width for the pagewidth prop provided, very useful to make html components fit the container width for dashboard like ui","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":801,"value":"routes_example = {\n const Button = props => {\n const set_route = () => {\n route('/' + props.page);\n };\n return htm`\n\n Route ${props.page.toUpperCase()}\n`;\n };\n const Nav = () => {\n return htm`\n

\n <${Button} page=\"a\"/>\n <${Button} page=\"b\"/>\n

\n <${Router} history=${history.createHashHistory()}>\n

Route A

Route B

None

\n \n

`;\n };\n\n return Render(htm`<${Nav}/>`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":885,"value":"md`### Demo - Custom elements!!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":875,"value":"MyCE = {\n let C = p => {\n var r = Preact.useRef();\n var str = p.name || \"world\";\n Preact.useEffect(() => {\n r.current.getRootNode().host.value = str;\n r.current.getRootNode().host.dispatchEvent(new CustomEvent(\"input\"));\n }, [p.name]);\n return htm`\n \n

hello, ${str}

`;\n };\n try {\n define(C, \"hello-component\", [\"name\"], { shadow: true });\n } catch (e) {}\n return C;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":877,"value":"viewof hello = html`` //can only register once, needs page refresh to update if you edit the code above..","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":944,"value":"hello","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":934,"value":"Preview = node => {\n var dom = html`

`;\n var shadow = dom.shadowRoot || dom.attachShadow({ mode: 'open' });\n\n Preact.render(node, shadow);\n return dom;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":931,"value":"viewof value = Preview(htm`<${MyCE} name=\"Example Component\">`) //use this for live preview while developing! Thsi uses preact to render but uses shadow dom so styles wont leak..","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":941,"value":"value","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":948,"value":"//Render(htm`<${MyCE} name=\"Example Component\">`)\n//uncomment the above line and scroll up! all the page text color is changed!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"