31:T7b8,jsx = { let current_stack = []; let jsx = (strings, ...interpolations) => { let current_render = current_stack[current_stack.length - 1]; current_render(strings, ...interpolations); }; jsx.open = (strings, ...interpolations) => { let open_jsx_element = jsx_stupid(strings, ...interpolations); let open_key = get_key(strings); let elements = []; current_stack.push((strings, ...interpolations) => { if (strings == null) { current_stack.pop(); let current_render = current_stack[current_stack.length - 1]; let jsx_elements = elements.map( x => jsx_stupid`<${React.Fragment} key=${x.key}>${x.element}` ); if (current_render == null) { return jsx_elements; } else { let element = React.cloneElement(open_jsx_element, { children: jsx_elements }); current_render({ key: open_key, element }); return []; } } let key = null; let jsx_element = null; if (strings.key == null && strings.element == null) { jsx_element = jsx_stupid(strings, ...interpolations); key = get_key(strings); } else { jsx_element = strings.element; key = strings.key; } let last_element = elements[elements.length - 1]; if (last_element && last_element.key === key) { if (!Array.isArray(last_element.element)) { last_element.element = [last_element.element]; } last_element.element.push(jsx_element); } else { elements.push({ key: key, element: jsx_element }); } }); }; jsx.close = () => { let current_render = current_stack[current_stack.length - 1]; let element = current_render(); return element; }; jsx.wrap = (strings, ...interpolations) => fn => { jsx.open(strings, ...interpolations); fn(); return jsx.close(); }; return jsx; }32:T4ba,App = freedom(({ content }) => { jsx`

Header

`; if (content !== '') { // When in a loop we either need to do jsx.wrap`` which takes another function that // should yield it's children if (USE_JSX_WRAP === true) { for (let char of content) { jsx.wrap`

'i' ? 'lightred' : 'lightblue' }} />`(() => { if (char !== 'a') { jsx`

${char} = ${char.charCodeAt(0)}

`; } else { jsx`

${char} = A

`; } }); } } // Or we can use "bare" jsx.open`` en jsx.close // Both ways of wrapping elements while in a loop should yield the same results if (USE_JSX_WRAP === false) { for (let char of content) { jsx.open`

'i' ? 'lightred' : 'lightblue' }} />`; if (char !== 'a') { jsx`

${char} = ${char.charCodeAt(0)}

`; } else { jsx`

${char} = A

`; } jsx.close(); } } } else { jsx`

NO CONTENT!

`; } jsx`

Footer

`; })33:[] 2f:{"title":"Jetpack Compose style React","cells":[{"id":0,"value":"md`# Jetpack Compose style React`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import { render, React, jsx as jsx_stupid } from \"@dralletje/react-x-observable\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"mutable last_key = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"literal_to_key_map = new WeakMap()","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"get_key = literals => {\n if (!literal_to_key_map.has(literals)) {\n literal_to_key_map.set(literals, mutable last_key++);\n }\n return literal_to_key_map.get(literals);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"freedom = component => props => {\n jsx.open`<${React.Fragment} />`;\n component(props);\n return jsx.close``;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"USE_JSX_WRAP = true","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"viewof content = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"render(this, jsx_stupid`<${App} content=${content} />`)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}