29:null 2a:["$","title",null,{"children":"Use State Machine in AppRun Applications | Yiyi Sun | Observable"}] 2f:T53c,view = jsx` ({ _state, op, arg1, arg2, display, stack }) => <>

{display}

{stack.length > 0 && \`$\{stack[0][0]\} $\{stack[0][1]\}\`} {_state.startsWith("FIRST_") && \`\$\{display\}\`} {_state === "OP" && \`\$\{arg1\} \$\{op\}\`} {_state.startsWith("SECOND_") && \`\$\{arg1\} \$\{op\} \$\{display\}\`} {_state === "EQ" && \`\$\{arg1\} \$\{op\} \$\{arg2\} = \$\{display\}\`}

`30:Td72,button_click = (state, e) => { const priority = { '*': 2, '/': 2, '+': 1, '-': 1 } const getEvent = c => { switch (c) { case '+/-': return '+/-'; case 'CE': return 'CE'; case '.': return 'DOT'; case '=': return 'EQ'; default: return /\d/.test(c) ? 'NUM' : 'OP'; } }; const key = e.target.textContent || e; const event = getEvent(key); let { _state, op, arg1, arg2, display, stack } = state; const clear = () => { display = '0'; arg1 = arg2 = 0; op = ''; stack = []; } const negative = () => { display = display.startsWith('-') ? display.substring(1) : '-' + display; }; const calc = () => { display = eval(`${arg1}${op}${arg2}`).toString(); }; const op1 = () => { op = key; arg1 = parseFloat(display); }; const op2 = () => { if (priority[key] === priority[op]) { arg2 = parseFloat(display); calc(); op = key; arg1 = parseFloat(display); } else if (priority[key] < priority[op]) { arg2 = parseFloat(display); calc(); arg1 = parseFloat(display); op = key; if (stack.length) { const f = stack.pop(); arg1 = eval(`${f[0]}${f[1]}${display}`); display = arg1.toString(); } } else { stack.push([arg1, op]); arg1 = parseFloat(display); op = key; } }; const eq0 = () => { arg1 = parseFloat(display); calc(); }; const eq2 = () => { arg2 = parseFloat(display); calc(); if (stack.length) { arg2 = parseFloat(display); const f = stack.pop(); display = eval(`${f[0]}${f[1]}${display}`).toString(); arg1 = f[0]; op = f[1]; } }; const state_machine = { START: [ ['NUM', 'FIRST_ARG', () => display = key], ['DOT', 'FIRST_ARG_FLOAT', () => display = '0.'] ], FIRST_ARG: [ ['+/-', 'FIRST_ARG', negative], ['NUM', 'FIRST_ARG', () => display += key], ['DOT', 'FIRST_ARG_FLOAT', () => display += key], ['OP', 'OP', op1], ['CE', 'START', clear] ], FIRST_ARG_FLOAT: [ ['+/-', 'FIRST_ARG_FLOAT', negative], ['NUM', 'FIRST_ARG_FLOAT', () => display += key], ['OP', 'OP', op1], ['CE', 'START', clear] ], OP: [ ['NUM', 'SECOND_ARG', () => display = key], ['DOT', 'SECOND_ARG', () => display = '0.'], ['OP', 'OP', () => op = key], ['CE', 'START', clear] ], SECOND_ARG: [ ['+/-', 'SECOND_ARG', negative], ['NUM', 'SECOND_ARG', () => display += key], ['DOT', 'SECOND_ARG_FLOAT', () => display += key], ['EQ', 'EQ', eq2], ['OP', 'OP', op2], ['CE', 'OP', () => display = '0'] ], SECOND_ARG_FLOAT: [ ['+/-', 'SECOND_ARG_FLOAT', negative], ['NUM', 'SECOND_ARG_FLOAT', () => display += key], ['EQ', 'EQ', eq2], ['OP', 'OP', op2], ['CE', 'OP', () => display = '0'] ], EQ: [ ['+/-', 'FIRST_ARG', negative], ['NUM', 'FIRST_ARG', () => display = key], ['DOT', 'FIRST_ARG_FLOAT', () => display = '0.'], ['EQ', 'EQ', eq0], ['OP', 'OP', op1], ['CE', 'START', clear] ] }; const { next_state, transition } = find_transition(state_machine, _state, event); _state = next_state || _state; transition && transition(); return { _state, op, arg1, arg2, display, stack }; }31:[] 2d:{"id":"098b7a485e83bec3","slug":"calculator","title":"Use State Machine in AppRun Applications","thumbnail":"743450a9ec67fe411543bb5adb28a353d448c733ba77cdd8af7ce0506841de13","access_level":"public","create_time":"$D2020-03-15T22:39:51.104Z","update_time":"$D2020-03-20T17:59:13.774Z","view_time":null,"first_public_time":"$D2020-03-15T23:44:56.007Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"406b10a49330fbc3","login":"yysun","name":"Yiyi Sun","avatar_url":"https://avatars-next.observableusercontent.com/631e206b9889c4d1dd75034c7d3ab7bfbfd9d85a263b89e5196099ffde072454","tier":"starter_2024"},"version":105,"publish_version":105,"role":null,"authored":false,"authors":[{"type":"individual","id":"e5e4d0cd07e0245d","login":"yysun","name":"Yiyi Sun","avatar_url":"https://avatars-next.observableusercontent.com/631e206b9889c4d1dd75034c7d3ab7bfbfd9d85a263b89e5196099ffde072454","tier":null}],"members":[{"type":"individual","id":"e5e4d0cd07e0245d","login":"yysun","name":"Yiyi Sun","avatar_url":"https://avatars-next.observableusercontent.com/631e206b9889c4d1dd75034c7d3ab7bfbfd9d85a263b89e5196099ffde072454","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"7ad33983a7603b5e","slug":"apprun-notes","title":"AppRun Notes","owner":{"id":"406b10a49330fbc3","login":"yysun","name":"Yiyi Sun"}},"type":"notebook","body":{"titling":"auto","title":"Use State Machine in AppRun Applications","cells":[{"id":0,"value":"md`# Use State Machine in AppRun Applications`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {app, jsx} from '@yysun/apprun'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`\n\n### State machine\nTypically, when building applications, we follow what's known as the event-driven — where an event happens in the application, we update the application state and render the state to the screen.\n\nEvents can happen anytime during user interactions and system interactions while the application can be in any state. Before we start to handle the events, we first have to determine what is the current state and then handle the event accordingly. Sometimes it can be challenging.\n\nThe state machine provides a state-event-state mapping. Before we start to handle the events, we know the current state and the future state, so that we only need to focus on the limited state-event scope. \n\n> The specific state machine we are going to use is the [Mealy machine](https://en.wikipedia.org/wiki/Mealy_machine). It has an initial state and then transitions to new states based on events and its current state.\n\n### A Calculator\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"\n app.start(document.createElement('div'), state, view, {button_click}).element\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"state = ({\n _state: 'START',\n display: '0',\n arg1: 0,\n arg2: 0,\n op: '',\n stack: []\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"find_transition = (state_machine, state, event) => {\n const current_state = state_machine[state];\n if (!current_state) throw new Error(`No state: ${current_state} found in state machine`);\n const event_tuple = current_state.find(s => s[0] === event);\n return event_tuple ? {\n next_state: event_tuple[1],\n transition: event_tuple[2]\n } : {}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2e:"$2d:body"