25:["$","title",null,{"children":"Hello, Statery! | Andrew Wooldridge | Observable"}] 4b:[] 47:{"id":"efed24f857a124f3","slug":"hello-statery","title":"Hello, Statery!","thumbnail":"30c17e8efa4c97e980c7faa1043e6ed11146f6f6676c9c542847e96cfba58b16","access_level":"public","create_time":"$D2022-04-08T22:50:47.077Z","update_time":"$D2022-04-08T23:38:59.897Z","view_time":null,"first_public_time":"$D2022-04-08T23:19:46.386Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":"starter_2024","bio":"📜JavaScript developer. \n\n🐲RPG fan. \n\n📚Storyteller and 🕹game developer. \n\n👨Father and Husband.","followed_by_you":false,"follows_you":false},"version":70,"publish_version":70,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null,"bio":"📜JavaScript developer. \n\n🐲RPG fan. \n\n📚Storyteller and 🕹game developer. \n\n👨Father and Husband.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"bef3cf5a9bdfd5d0","slug":"tips-and-utilities","title":"Tips and Utilities","owner":{"id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge"}},"type":"notebook","body":{"titling":"auto","title":"Hello, Statery!","cells":[{"id":0,"value":"# [Hello, Statery!](https://github.com/hmans/statery)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"Surprise-Free State Management! Designed for React with functional components, but can also be used with other frameworks (or no framework at all.)","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"Statery = import('https://cdn.skypack.dev/statery@0.5.4?min')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"store = Statery.makeStore({counter: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"increment = () =>\n store.set((state) => ({\n counter: state.counter + 1\n }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"{\n\n while (true) {\n const counter = store.state.counter\n\n const retVal = html`\n

Counter: ${counter}

\n `\n retVal.querySelector('button').addEventListener('click', ()=> {\n increment();\n } );\n await Promises.delay(1000);\n yield retVal;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"html`

\nCounter (old ) state subscribed null\n
\nNew (upcoming) state \n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"{\n // ( changes, state )\n const listener =( changes, {counter}) => {\n console.log(\"Changes:\", changes)\n document.querySelector('.cstate').innerHTML = counter\n document.querySelector('.nstate').innerHTML = changes.counter\n }\n store.subscribe(listener)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null