2c:null 2d:["$","title",null,{"children":"Issues using rejected & pending promises as values in viewof cells | Joshua Horowitz | Observable"}] 32:[] 30:{"id":"137b4f7f2697819b","slug":null,"title":"Issues using rejected & pending promises as values in viewof cells","thumbnail":"7136f9eb6be2b80e22d8328a404f46f39fbcc900f8c23fb6acb7fff3f07443ce","access_level":"public","create_time":"$D2023-04-17T22:18:44.658Z","update_time":"$D2023-04-17T23:01:35.894Z","view_time":null,"first_public_time":"$D2023-04-17T22:18:44.658Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4a29764d3c5ac978","login":"joshuahhh","name":"Joshua Horowitz","avatar_url":"https://avatars-next.observableusercontent.com/c2ab36a2b36058e9d5ad6cab5c830958647aa34d40616ae28603a9a9e5d0064a","tier":"starter_2024"},"version":146,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ddc378ed3cec53e0","login":"joshuahhh","name":"Joshua Horowitz","avatar_url":"https://avatars-next.observableusercontent.com/c2ab36a2b36058e9d5ad6cab5c830958647aa34d40616ae28603a9a9e5d0064a","tier":null}],"members":[{"type":"individual","id":"ddc378ed3cec53e0","login":"joshuahhh","name":"Joshua Horowitz","avatar_url":"https://avatars-next.observableusercontent.com/c2ab36a2b36058e9d5ad6cab5c830958647aa34d40616ae28603a9a9e5d0064a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Issues using rejected & pending promises as values in viewof cells","cells":[{"id":0,"value":"# Issues using rejected & pending promises as values in viewof cells","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"## .value can be a promise without trouble\n\nWhen this slider goes above 90, it sets `.value` to a resolved promise. The cell below refers to this value. Everything works just fine.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"viewof sliderValue1 = {\n const input = htl.html``\n const div = htl.html`

${input}

`\n div.value = +input.value;\n input.oninput = (ev) => {\n const v = +ev.target.value;\n if (v < 90) {\n div.value = v;\n } else {\n div.value = Promise.resolve(v);\n }\n div.dispatchEvent(new Event(\"input\", {bubbles: true}));\n };\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"sliderValue1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"## .value can't recover from rejected promises\n\nWhen this slider goes above 90, it sets `.value` to a rejected promise. The cell below refers to this value. When you go above 90, you get an error in this cell and the one below, which is good. But the error doesn't go away when you go back down.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"viewof sliderValue2 = {\n const input = htl.html``\n const div = htl.html`

${input}

`\n div.value = +input.value;\n input.oninput = (ev) => {\n const v = +ev.target.value;\n if (v < 90) {\n div.value = v;\n } else {\n div.value = Promise.reject(new Error('too big!'));\n }\n div.dispatchEvent(new Event(\"input\", {bubbles: true}));\n };\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"sliderValue2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"This does not seem to match how Observable's runtime works in general. Notice how the computed cell below recovers from returning a rejected promise just fine.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"viewof inputValue2 = Inputs.range([0, 100], {label: \"Amount\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"inputValue2Computed = {\n if (inputValue2 < 90) {\n return inputValue2\n } else {\n return Promise.reject(new Error('too big!'));\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"## .value can't really be a pending promise\n\nWhen this slider goes above 90, it sets `.value` to a hang-forever promise. The cell below refers to this value. When you go above 90, the cell below hangs, but without a \"pending dependency\" gray mark. If you slide the slider back below 90, everything remains pending, so we fail to recover from the pending promise.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"viewof sliderValue3 = {\n const input = htl.html``\n const div = htl.html`

${input}

`\n div.value = +input.value;\n input.oninput = (ev) => {\n const v = +ev.target.value;\n if (v < 90) {\n div.value = v;\n } else {\n div.value = new Promise(() => {});\n }\n div.dispatchEvent(new Event(\"input\", {bubbles: true}));\n };\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"sliderValue3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"This also does not seem to match how Observable's runtime works in general. Notice how the computed cell below recovers from returning a hanging promise just fine (and it shows a gray mark while it's pending!).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"viewof inputValue3 = Inputs.range([0, 100], {label: \"Amount\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"inputValue3Computed = {\n if (inputValue3 < 90) {\n return inputValue3\n } else {\n return new Promise(() => {})\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"