31:T4c7,{ const example = html`

${md`\`\`\`js /* fn_1 is a pure function. */ > const fn_1 = (a, b) => a + b > fn_1(1, 1) 2 > fn_1(1, 1) 2 > fn_1(1, 1) 2 /* fn_2 is not a pure function, because it uses a global variable (c). */ > const fn_2 = (a, b) => a + b + window.c > window.c = 0 > fn_2(1, 1) 2 > window.c = 1 > fn_2(1, 1) 3 ... ... > fn_2(1, 1) // Who knows what this line is going to do? \`\`\``}

` return md` ### What is "functional"? The style is called **functional** because the component's interface is drawn (using a function called \`render\`) as a **pure function** of its **state**. A **pure function** returns the same output every time for the same input. This means it is easy to prove that a pure function is correct. ${showable({text: example, hidden_text: md`**Click here to show an example of pure and impure functions.**`})} The component's **state** is a complete set of options describing how the component should look. Since \`render()\` is a pure function and the state is the only input, for a given state, the component will *always* have the same interface. This makes it easy to reason about the component's correctness. ` }32:Tdcd,{ /* Counter component code */ const main = () => { // This code runs the render function once to initialize the element. // Usually, this code would be located in a driver script. // We want to select all of the elements in the document (this page) // that have class="Counter" // and render a counter component into each one. document.querySelectorAll(".Counter").forEach(element => { // We'll initialize all values to 0. render({element: element, state: {value: 0}}) // See the definition of render() below. }) } const render = ({element, state}) => { console.debug(`Rendering`, state, `into`, element) /* If our state looks like this: { value: 3 } */ /* Then the counter is going to look like this:

<-- This will contain the actual component--only our code touches this element. 3 <--- This will show the value. <--- When we click this button, the value increases by one.

*/ // Read further to see how this happens. // First, we select the old root element. // If this is the first time we're rendering, we'll need to create it. let old_root = element.querySelector("#root") if (!old_root) { old_root = document.createElement('div') element.appendChild(old_root) } // Next, we generate a *new* root element from scratch. // We're going to configure this element to reflect our state. const new_root = document.createElement('div') new_root.id = "root" // This sets up the new root element but does *not* attach any handlers. const {value} = state // This uses ES6 destructuring to get `value` from state. new_root.innerHTML = ` ${value} ` /* Note this uses ES6 template syntax--if value is 3, `abc${value}def` becomes `abc3def`. */ // Now that the interface exists, we can attach event handlers. // When we click the increment button, we want to modify part // of the state by increasing `value` by 1. new_root.querySelector('#increment').onclick = () => update_state({value: value+1}) // See the definition of update_state below. // When we click the reset button, we want to set `value` to 0. new_root.querySelector('#reset').onclick = () => update_state({value: 0}) // This is how we update the state. const update_state = update_object => { console.debug(`Updating`, state, `with a partial state`, update_object, `and rerendering (after yielding execution).`) // It doesn't matter here, but if we're handling "continuous" input // (i.e. from a mouse), we have to yield execution with setTimeout so // the browser can continue capturing events. setTimeout(render({element: element, state: {...state, ...update_object}})) } // Now that the new root element has been created, we replace // the old root element with the new root element. old_root.parentElement.replaceChild(new_root, old_root) } main() // (Runs the main function.) page // (Ignore this.) Tells Observable this cell should rerun if the `page` cell changes. return "Read this!" }33:[] 2f:{"title":"Functional Reactive Components","cells":[{"id":0,"value":"md`# Functional Reactive Components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"toc('h1,h2,h3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"md`## Usage`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`This page will show you the structure of a simple **functional reactive** component (a counter) built from HTML and JavaScript.\n\nI recommend reading in the following order:\n1. Look at the example component below. Click the buttons to see how they behave.\n2. Skim the explanation of functional reactive components.\n3. Read each line of the counter's code and note anything that doesn't make sense.\n4. Review the explanation.\n\nFeel free to modify this page while reading! You can refresh the page if anything breaks.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"md`## Example component`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"page = html`

` // This is what the component would look like in the HTML file.","pinned":true,"hidden":false,"mode":"ojs"},{"id":424,"value":"md`## Explanation of functional reactive components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`### What is \"reactive\"?\n\nThe style is called **reactive** because the component reacts to **events** by **updating the state, not the interface**. Then, the component reacts to updates in the state by re-rendering the **entire** interface as a function of the **entire** state.\n\n**Events** can be user actions detected by the browser, like button clicks, or scheduled events, like a function that has been scheduled to run every 10 milliseconds (for an animation, for example).\n\n**In a functional reactive component, the interface *always* represents the current state.**\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"md`## Counter code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"// (This is the Counter's styling. It would usually be found in a CSS file.)\n\nhtml``","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"md`## Tools used for building this page`","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"md`(You can ignore these.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"function showable ({text, hidden_text=md`**Click to show**`, show=false}) {\n const el = html`${show ? text : hidden_text}`\n el.onclick = () => {\n show = !show\n el.parentNode.replaceChild(showable({text, show, hidden_text}), el)\n }\n return el\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":376,"value":"import {toc} from \"@bryangingechen/toc\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}