2b:null 2c:["$","title",null,{"children":"Using the Maybe type in js | Heiker | Observable"}] 31:T49d,md` # Using the Maybe type in js Have you ever heard about monads and how great they are? Maybe you have but you still don't get it. Well... I'm not here to tell you what they are, I won't try to sell them to you either, what I will do is show you an example of how would it be if you use them in your javascripts. We'll do something fun, lets solve a fairly trivial problem in an unnecessary complicated way. Suppose that we have a dictionary stored in a json file or a plain js object. \`\`\`js { "accident": ["An unexpected, unfortunate mishap, failure or loss with the potential for harming human ..."], "accumulator": ["A rechargeable device for storing electrical energy in the form of chemical energy, ..."], "acid": ["A compound capable of transferring a hydrogen ion in solution.", "Being harsh or corrosive ..."], // ... moar words and meanings "Paris": ["The capital and largest city of France."] } \`\`\` We want a form that lets a user search one of this words and then shows the meaning(s). This is simple, right? What could possibly go wrong? Let's start simple, we'll just try get one those values based on the user input. `32:T873,md` This wrappers are not going to be your standard by the book \`Maybe\` you see in a proper functional programming language. We will cheat a little in the name of convenience and side effects. Also, their methods will be named after the methods in the Option type you find in Rust (I like those names better). Here is where the magic happens. \`\`\`js // I lied, there will be a lot of cheating function Just(thing) { return { map: fun => Maybe(fun(thing)), and_then: fun => fun(thing), or_else: () => Just(thing), tap: fun => (fun(thing), Just(thing)), unwrap_or: () => thing, filter: predicate_fun => predicate_fun(thing) ? Just(thing) : Nothing(), is_just: true, is_nothing: false, inspect: () => \`Just(\${thing})\`, }; } function Nothing() { return { map: Nothing, and_then: Nothing, or_else: fun => fun(), tap: Nothing, unwrap_or: arg => arg, filter: Nothing, is_just: false, is_nothing: true, inspect: () => \`Nothing\`, }; } \`\`\` What is the purpose of these methods? - \`map\`: Applies the function \`fun\` to \`the_thing\` and wraps it again on a Just to keep the party going... I mean to keep the shape of the object, so you can keep chaining functions. - \`and_then\`: This is mostly an escape hatch. Apply the function \`fun\` and let fate decide. - \`or_else\`: It is the \`else\` to your \`map\` and \`and_then\`. The other path. The "what if is not there?" - \`tap\`: These one is there just for the side effects. If you see it then it's probably affecting something outside of it's scope (or maybe is just the perfect place to put a \`console.log\`). - filter: It "lets you go through" if the predicate function returns something truthy. - \`unwrap_or\`: This is how you get \`the_thing\` out. You'll want this when you're done chaining methods and you're ready to get back to the imperative world. Lets go back to our form and see it in action. We'll make a function \`search\` that may o may not retrieve a match to the user's query. If it does we'll chain other functions that will be executed in a "safe context." `33:T5b3,md` \`\`\`js function Task(promise) { return { and_then: (fn) => Task(promise.then(fn)), or_else: (fn) => Task(promise.catch(fn)), map: (fn) => Task(promise.then(fn)), tap: (fn) => Task(promise.then(val => (fn(val), val))), filter: (fn) => Task(promise.then(filter_task(fn))), unwrap_or: (falllback) => promise.catch(() => falllback) }; } Task.of = function(value) { return Task(Promise.resolve(value)); } \`\`\` This is what we have. - \`map\`/\`and_then\`: these do the same thing because you can't get out of a \`Promise\`. - \`or_else\`: puts your callback in the \`catch\` method to mimic an \`else\` behavior. - \`tap\`: uses \`then\` to peek at the value. Since this is for side effects we return the value again. - \`unwrap_or\`: It will return the promise so you can use \`await\`. If everything goes well the original value of the \`Promise\` will be returned, else the provided argument will be returned. Either way the promise doesn't throw an error because the \`Task\` attached the \`catch\` method to it. - \`filter\`: these one is a special kind of \`map\` that's why \`filter_future\` exists. - \`of\`: is a static method that puts a regular value into a \`Task\` instance. - Almost all these methods return a new \`Task\` 'cause \`promise.then\` returns a new \`Promise\`, we can't have that because it will break the execution flow. Now we can combine the new functions with our \`search\` function. `34:T8be,function data() { return { "abandoned industrial site": ["Site that cannot be used for any purpose, being contaminated by pollutants."], "abandoned vehicle": ["A vehicle that has been discarded in the environment, urban or otherwise, often found wrecked, destroyed, damaged or with a major component part stolen or missing."], "abiotic factor": ["Physical, chemical and other non-living environmental factor."], "access road": ["Any street or narrow stretch of paved surface that leads to a specific destination, such as a main highway."], "access to the sea": ["The ability to bring goods to and from a port that is able to harbor sea faring vessels."], "accident": ["An unexpected, unfortunate mishap, failure or loss with the potential for harming human life, property or the environment.", "An event that happens suddenly or by chance without an apparent cause."], "accumulator": ["A rechargeable device for storing electrical energy in the form of chemical energy, consisting of one or more separate secondary cells.\\n(Source: CED)"], "acidification": ["Addition of an acid to a solution until the pH falls below 7."], "acidity": ["The state of being acid that is of being capable of transferring a hydrogen ion in solution."], "acidity degree": ["The amount of acid present in a solution, often expressed in terms of pH."], "acid rain": ["Rain having a pH less than 5.6."], "acid": ["A compound capable of transferring a hydrogen ion in solution.", "Being harsh or corrosive in tone.", "Having an acid, sharp or tangy taste.", "A powerful hallucinogenic drug manufactured from lysergic acid.", "Having a pH less than 7, or being sour, or having the strength to neutralize alkalis, or turning a litmus paper red."], "acoustic filter": ["A device employed to reject sound in a particular range of frequencies while passing sound in another range of frequencies."], "acoustic insulation": ["The process of preventing the transmission of sound by surrounding with a nonconducting material."], "acoustic level": ["Physical quantity of sound measured, usually expressed in decibels.\\n(Source: KORENa)"], "Paris": ["The capital and largest city of France."] } }35:[] 2f:{"id":"46ce62139c9e462d","slug":"using-the-maybe-type-in-js","title":"Using the Maybe type in js","thumbnail":"c1cdbeb041c801602b41b182b1488d3c1bbf0563530afa2821efa85f44073c5a","access_level":"public","create_time":"$D2020-06-18T20:19:28.661Z","update_time":"$D2021-04-28T14:25:20.151Z","view_time":null,"first_public_time":"$D2020-06-19T23:12:07.580Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"f135c6aa99219bf5","login":"vonheikemen","name":"Heiker","avatar_url":"https://avatars-next.observableusercontent.com/1db39a2e92f6079eb11eafe485761f86e43392a0f03d680116aaf0964dcc1e02","tier":"starter_2024"},"version":680,"publish_version":680,"role":null,"authored":false,"authors":[{"type":"individual","id":"1c3ba88eb7f97035","login":"vonheikemen","name":"Heiker","avatar_url":"https://avatars-next.observableusercontent.com/1db39a2e92f6079eb11eafe485761f86e43392a0f03d680116aaf0964dcc1e02","tier":null}],"members":[{"type":"individual","id":"1c3ba88eb7f97035","login":"vonheikemen","name":"Heiker","avatar_url":"https://avatars-next.observableusercontent.com/1db39a2e92f6079eb11eafe485761f86e43392a0f03d680116aaf0964dcc1e02","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"48867ed66eb687a0","slug":"functional-programming-for-your-everyday-javascript","title":"Functional programming for your everyday javascript","owner":{"id":"f135c6aa99219bf5","login":"vonheikemen","name":"Heiker"}},"type":"notebook","body":{"title":"Using the Maybe type in js","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"viewof input_v1 = make_form({ value: \"accident\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"{\n // magically retrieve the data from a file or whatever\n const entries = data();\n\n return format(entries[input_v1]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"function format(results) {\n return results.join('\\n');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"md`\nNow try to search for \"acid\" and see the results. Then search \"paris\", I'm sure it's there. What did you get? Nothing. Not exactly nothing, you got this.\n\n> TypeError: results is undefined\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"md`\nIt turns out we have an unpredictable submit button that sometime works and sometimes doesn't. So what do we want? What do we really, really want? Safety, objects that don't crash our application, we want reliable objects. \n\nWhat we will do is implement containers that let us describe the flow of execution without worrying about the value they hold. Sounds good, right? Let me show you what I mean with a little javascript.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"{\n const is_even = num => num % 2 === 0;\n\n const even_arr = [1,3,4,5].filter(is_even).map(val => val.toString());\n const empty_arr = [].filter(is_even).map(val => val.toString());\n\n return {even: even_arr.join(', '), empty: empty_arr.join(', ')};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"md`\nDid it throw an exception on the empty array? (if it did let me know). Isn't that nice? Doesn't it feel all warm and fuzzy knowing that the array methods would do the right thing even if there isn't anything to work with? That is what we want.\n\nYou might be wondering couldn't we just write a few \"\\`if\\`\" statements and be done with it? Well... yeah, but where is the fun in that? We all know that chaining functions is cool, and we are fans of functional programming, we do what every functional programming savvy does: **hide things under a function**.\n\nSo we are going to hide an \"\\`if\\`\" statement, if the value we evaluate is undefined-ish we return a wrapper that will know how to behave no matter what happens.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"Maybe = {\n function Just(thing) {\n return {\n map: fun => maybe(fun(thing)),\n and_then: fun => fun(thing),\n or_else: () => Just(thing),\n tap: fun => (fun(thing), Just(thing)),\n unwrap_or: () => thing,\n\n filter: predicate_fun => \n predicate_fun(thing) \n ? Just(thing) \n : Nothing(),\n\n is_just: true,\n is_nothing: false,\n inspect: () => `Just(${thing})`,\n };\n }\n \n function Nothing() {\n return {\n map: Nothing,\n and_then: Nothing,\n or_else: fun => fun(),\n tap: Nothing,\n unwrap_or: arg => arg,\n\n filter: Nothing,\n\n is_just: false,\n is_nothing: true,\n inspect: () => `Nothing`,\n };\n }\n \n function maybe(the_thing) {\n if(the_thing == null) {\n return Nothing();\n }\n \n return Just(the_thing);\n }\n \n maybe.Just = Just;\n maybe.Nothing = Nothing;\n \n return maybe;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"md`\n\\`\\`\\`js\nfunction Maybe(the_thing) {\n if(the_thing == null) {\n return Nothing();\n }\n\n return Just(the_thing);\n}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"viewof input_v2 = make_form({ value: null })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"{\n const search = (data, input) => Maybe(data[input]);\n\n const search_word = word => search(entries, word)\n .map(format)\n .unwrap_or('word not found');\n \n return Maybe(input_v2).map(search_word).unwrap_or('');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"md`\nNow do some tests. Search for \"accident,\" then search for \"paris.\"\n\nFor \"accident\" you should have gotten this.\n\n> An unexpected, unfortunate mishap, failure or loss with the potential for harming human life, property or the environment.\nAn event that happens suddenly or by chance without an apparent cause.\n\nFor \"paris\" this should come up.\n\n> word not found\n\nThe important thing about all of this is that the exception is gone, that's good. But I know Paris is there. If you check you'll see that is \"Paris.\" We'll just capitalize the user input so they don't have to. First we'll try to search the exact input, if that fails we'll try the capitalize way.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"function create_search(data, exact) {\n return input => {\n const word = exact ? input : capitalize(input);\n return Maybe(data[word]);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"function capitalize(str) {\n return str.charAt(0).toUpperCase() + str.slice(1);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"md`\nNow we will change the search function like this.\n\n\\`\\`\\`diff\n- const search = (data, input) => Maybe(data[input]);\n+ const search = create_search(entries, true);\n+ const search_name = create_search(entries, false);\n\n- const search_word = word => search(entries, word)\n+ const search_word = word => search(word)\n+ .or_else(() => search_name(word))\n .map(format)\n .unwrap_or('word not found');\n\\`\\`\\`\n\nTry again with \"paris\".\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"viewof input_v3 = make_form({ value: null });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"{\n const search = create_search(entries, true);\n const search_name = create_search(entries, false);\n \n const search_word = word => search(word)\n .or_else(() => search_name(word))\n .map(format)\n .unwrap_or('word not found');\n \n return Maybe(input_v3).map(search_word).unwrap_or('');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"md`\nBut is that all we want in life? No, of course not, we want love but since javascript can't give us that we'll settle for a little \"suggest word\" feature. I want to search \"accu\" and have a confirm dialog telling me \"Did you mean accumulator?\"\n\nWe'll need help with this one, we'll bring a dependency, one that can perform a fuzzy search on the entries: [fuzzy-search](https://github.com/wouter2203/fuzzy-search#readme). So, we add the following. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":458,"value":"FuzzySearch = require('fuzzy-search');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"fzf = {\n return new FuzzySearch(\n Object.keys(entries),\n [],\n {caseSensitive: false, sort: true}\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"md`\nBut again we can't perform a safe operation 'cause the moment we try to get a match from an empty array the whole thing will fall apart. So what do we do? We hide things under a function.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":170,"value":"function suggest(word) {\n const matches = fzf.search(word);\n return Maybe(matches[0]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":172,"value":"md`\nFuzzy search is ready, now lets throw in a super awesome confirm dialog.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":452,"value":"function confirm_word_v1(container) {\n return async function(value) {\n const confirmed = value && await make_prompt({\n msg: `Did you mean \"${value}\"?`,\n container\n });\n\n if(confirmed) {\n return value;\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"md`\nYou might be wondering what is all of this. Well, the thing is that we have a bit of a problem, we need to wait for the user's input before we continue we our proccess and for that we need to use a \\`Promise\\`. But this will get interrupt the flow of data we are building, so we are going to create a wrapper for a \\`Promise\\` instance. Since a \\`Promise\\` have so much similarities with our \\`Maybe\\` we're going to \"copy\" all the relevant methods and adapt it to our current needs.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":488,"value":"Task = {\n const task = (promise) => {\n return {\n and_then: (fn) => task(promise.then(fn)),\n or_else: (fn) => task(promise.catch(fn)),\n map: (fn) => task(promise.then(fn)),\n \n tap: (fn) => task(promise.then(val => (fn(val), val))),\n filter: (fn) => task(promise.then(filter_task(fn))), \n \n unwrap_or: (fallback) => promise.catch(() => fallback)\n }; \n }\n \n task.of = value => task(Promise.resolve(value));\n \n return task;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":499,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":507,"value":"suggest_word_v1 = {\n return value => () => suggest(value)\n .and_then(Task.of)\n .map(confirm_word_v1(viewof input_v4.lastElementChild))\n .map(v => search(v).unwrap_or(''));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":513,"value":"md`\nAdd the feature to \\`search_word\\` like this.\n\n\\`\\`\\`diff\n const search_word = word => search(word)\n .or_else(() => search_name(word))\n+ .or_else(suggest_word(word))\n .map(format)\n .unwrap_or('word not found');\n\\`\\`\\`\n\nAnd test, write \"accu\" and then press the search button.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"viewof input_v4 = make_form({ value: null })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":414,"value":"{\n const search_word = word => search(word)\n .or_else(() => search_name(word))\n .or_else(suggest_word_v1(word))\n .map(format)\n .unwrap_or('word not found');\n \n return Maybe(input_v4).map(search_word).unwrap_or('');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":520,"value":"md`\nIt works! But lets say we are allergic to \\`if\\` statements and not to mention that it's just rude to return \\`undefined\\` from a function. We can do better.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":523,"value":"function confirm_word_v2(container) {\n return async function(value) {\n return make_prompt({\n msg: `Did you mean \"${value}\"?`,\n container\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":564,"value":"md`\n\\`\\`\\`diff\n function confirm_word(container) {\n return async function(value) {\n- const confirmed = value && await make_prompt({\n+ return make_prompt({\n msg: \\`Did you mean \"\\${value}\"?\\`,\n container\n });\n-\n- if(confirmed) {\n- return value;\n- }\n }\n }\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":558,"value":"md`\n\\`\\`\\`diff\n const suggest_word = value => () => suggest(value)\n .and_then(Task.of)\n- .map(confirm_word(input))\n+ .filter(confirm_word(input))\n .map(v => search(v).unwrap_or(''));\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":529,"value":"md`\nSomething bugs me. I search \"accu\", the dialog pops in, I confirm the suggestion and the results appears. But \"accu\" it's still there in the input, it's awkward. Lets update the input with the right word.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":532,"value":"function update_input(value) {\n viewof input_v5[0].value = value;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":536,"value":"suggest_word_v2 = {\n return value => () => suggest(value)\n .and_then(Task.of)\n .filter(confirm_word_v2(viewof input_v5.lastElementChild))\n .tap(update_input)\n .map(v => search(v).unwrap_or(''));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":573,"value":"md`\n\\`\\`\\`diff\n const suggest_word = value => () => suggest(value)\n .and_then(Task.of)\n .filter(confirm_word(input))\n+ .tap(update_input)\n .map(v => search(v).unwrap_or(''));\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":541,"value":"viewof input_v5 = make_form({ value: null })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":544,"value":"{\n const search_word = word => search(word)\n .or_else(() => search_name(word))\n .or_else(suggest_word_v2(word))\n .map(format)\n .unwrap_or('word not found');\n \n return Maybe(input_v5).map(search_word).unwrap_or('');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":673,"value":"md`\n## Conclusion\n\nThis is it, we did it! We built the form, prevented some exceptions, handle side effects, async functions, absence of values and showed some results. All of this because we followed some patterns. I hope you enjoyed the reading and the examples. See ya next time.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":581,"value":"md`\n## Sources\n- [The Marvellously Mysterious JavaScript Maybe Monad](https://jrsinclair.com/articles/2016/marvellously-mysterious-javascript-maybe-monad/)\n- [Option/Maybe, Either, and Future Monads in JavaScript, Python, Ruby, Swift, and Scala](https://www.toptal.com/javascript/option-maybe-either-future-monads-js)\n- [Monad Mini-Series: Functors (video)](https://www.youtube.com/watch?v=pgq-Pfg6ul4)\n- [Oh Composable World! (video)](https://www.youtube.com/watch?v=SfWR3dKnFIo)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":678,"value":"md`\n## Support\n\nThank you for reading. If you find this article useful and want to support my efforts, [buy me a coffee ☕](https://www.buymeacoffee.com/vonheikemen).\n\n[![buy me a coffee](https://res.cloudinary.com/vonheikemen/image/upload/v1618466522/buy-me-coffee_ah0uzh.png)](https://www.buymeacoffee.com/vonheikemen)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":547,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"function make_form({ value = null }) {\n const input = html``;\n input.value = value;\n\n const form = Object.assign(\n html`\n \n `,\n {\n value,\n onsubmit: (event) => {\n event.preventDefault();\n form.value = input.value;\n form.dispatchEvent(new CustomEvent(\"input\"));\n }\n }\n );\n \n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":374,"value":"function make_prompt({ msg, container }) {\n return new Promise((resolve) => {\n const option = (el) => Object.assign(\n el, \n {\n onclick: (event) => {\n resolve(event.target.value == true);\n prompt.parentNode.removeChild(prompt);\n }\n }\n );\n\n const prompt = html`\n
\n ${msg}\n ${option(html``)}\n Yes\n ${option(html``)}\n No
\n `;\n\n container.childNodes.forEach(el => el.remove());\n container.appendChild(prompt);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":203,"value":"entries = data()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"search = create_search(entries, true);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"search_name = create_search(entries, false);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":476,"value":"function filter_task(predicate) { // the user's function\n return val => {\n const result = predicate(val);\n\n // Did you just returned a `Promise`?\n if(result.then) {\n // You did! That's why you can't have nice things.\n\n // peek inside the user's promise.\n const return_result = the_real_result => the_real_result \n ? val\n : Promise.reject();\n\n // keep the promise chain alive.\n return result.then(return_result);\n }\n\n return result ? val : Promise.reject();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"