31:T61e,notebook_styles = css` .sub-notebook { display: flex; flex-direction: column; align-items: stretch; margin-left: 12px; margin-right: 12px; border: 1px solid #00000024; } .sub-notebook * { box-sizing: border-box; } .notebook-spacer { min-height: 8px; } .sub-notebook.collapsed-notebook, .sub-notebook.collapsed-notebook + .notebook-spacer { height: 0; min-height: 0; border: 0; margin: 0; padding: 0; overflow: hidden; } .cell { position: relative; } .cell.changed { background-color: #ff99000f; } .cell:hover { box-shadow: -1px 0 0 0 #7b8087; } .cell:focus-within { box-shadow: -1px 0 0 0 #000; } .cell:not(.collapsed) + .cell { margin-top: 16px; } .cell.collapsed > code { height: 0; overflow: hidden; } .toggle { position: absolute; left: -25px; width: 25px; top: -1px; bottom: -1px; cursor: pointer; } .toggle:hover { background-color: rgba(0,0,0,.05); } .delimiter { height: 1px; background-color: #00000024; } .observablehq { margin-bottom: 0px; margin-top: 0px; /* min-height: 21px; */ } .line { padding: 5px; padding-left: 12px; } code { display: block; background-color: rgba(0,0,0,.04); } code.line { padding: 0px; padding-left: 12px; } .collapse-button { all: unset; color: #00000082; width: -webkit-fill-available; width: -moz-fill-available; width: fill-available; padding-right: 12px; padding-left: 12px; padding-top: 4px; font-size: 14px; text-align: right; cursor: pointer; display: block; } .collapse-button:hover { color: black; } `32:T849,VerticalNotebookLayout = ({ module: main, cells: cells, onCellsChange, name: notebook_name }) => { let inputs = cells .filter(cell => cell.display == null || cell.display == 'constant') .map( cell => jsx`

<${InspectorComponent} module=${main} name=${cell.name} using=${[cell.name]} derive=${x => x} />

` ); let outputs = cells .filter(cell => cell.display === 'editable') .map( cell => jsx` <${Cell} key=${cell.name} module=${main} cell=${cell} onCodeChange=${new_code => { let new_cells = cells.map(x => x === cell ? { ...cell, value: { ...cell.value, value: new_code } } : x ); onCellsChange(new_cells); }} /> ` ); // let START_EXPANDED = !Boolean(parsed_cell_name); let START_EXPANDED = true; let [expanded, set_expanded] = React.useState(START_EXPANDED); let names = cells .filter(x => x.name && x.display === 'editable') .flatMap(x => [x.name, ...(x.exports || []).map(x => x.name)]); let [error, notebook_name_from_stack] = safe(() => parse_stack()); return jsx` <${shadow.div} styleSheets=${[notebook_styles]} > <${NotebookHeader} name=${notebook_name} onClick=${() => set_expanded(!expanded)} expanded=${expanded} > <${InspectorComponent} module=${main} name=${notebook_name} using=${names} derive=${(...args) => Object.fromEntries(_.zip(names, args))} />

${inputs.length > 0 && jsx` ${inputs}

`} ${outputs}

`; }33:T715,observable_style = css` :root { --syntax_normal: #1b1e23; --syntax_comment: #a9b0bc; --syntax_number: #20a5ba; --syntax_keyword: #c30771; --syntax_atom: #10a778; --syntax_string: #008ec4; --syntax_error: #ffbedc; --syntax_unknown_variable: #838383; --syntax_known_variable: #005f87; --syntax_matchbracket: #20bbfc; --syntax_key: #6636b4; --mono_fonts: 82%/1.5 Menlo, Consolas, monospace; } .observablehq--expanded, .observablehq--collapsed, .observablehq--function, .observablehq--import, .observablehq--string:before, .observablehq--string:after, .observablehq--gray { color: var(--syntax_normal); } .observablehq--collapsed, .observablehq--inspect a { cursor: pointer; } .observablehq--field { text-indent: -1em; margin-left: 1em; } .observablehq--empty { color: var(--syntax_comment); } .observablehq--keyword, .observablehq--blue { color: #3182bd; } .observablehq--forbidden, .observablehq--pink { color: #e377c2; } .observablehq--orange { color: #e6550d; } .observablehq--null, .observablehq--undefined, .observablehq--boolean { color: var(--syntax_atom); } .observablehq--number, .observablehq--bigint, .observablehq--date, .observablehq--regexp, .observablehq--symbol, .observablehq--green { color: var(--syntax_number); } .observablehq--index, .observablehq--key { color: var(--syntax_key); } .observablehq--prototype-key { color: #aaa; } .observablehq--empty { font-style: oblique; } .observablehq--string, .observablehq--purple { color: var(--syntax_string); } .observablehq--error, .observablehq--red { color: #e7040f; } .observablehq--inspect { font: var(--mono_fonts); overflow-x: auto; display: block; white-space: pre; } .observablehq--error .observablehq--inspect { word-break: break-all; white-space: pre-wrap; } `34:T4bd,useObservableRuntime = cells => { const main = React.useMemo(() => { const runtime = new ObservableRuntime(); return runtime.module(); }, []); let previous_cells = React.useRef([]); React.useLayoutEffect(() => { let removed_cells = _.differenceBy( previous_cells.current, cells, x => x.name ); let added_cells = _.differenceBy( cells, previous_cells.current, x => x.name ); let existing_cells = _.intersectionBy( cells, previous_cells.current, x => x.name ); for (let cell of added_cells) { let definition = cell_to_definition(cell); main.define(cell.name, definition.using, definition.derive); } for (let cell of existing_cells) { let previous_cell = previous_cells.current.filter(x => x.name === name); if (!_.isEqual(cell, previous_cell)) { let definition = cell_to_definition(cell); main.redefine(cell.name, definition.using, definition.derive); } } for (let cell of removed_cells) { let variable = main.redefine(cell.name, [], () => {}); variable.delete(); } previous_cells.current = cells; }, [cells]); return main; }35:T58b,code_to_derive = code_or_ast => { try { let cell_ast = typeof code_or_ast === "string" ? parser.parseCell(code_or_ast) : code_or_ast; let cell_code = typeof code_or_ast === "string" ? code_or_ast.trim() : code_or_ast.input.slice(code_or_ast.start, code_or_ast.end).trim(); let reference_names = (cell_ast.references || []).map(x => x.name); if (cell_ast.id == null) { return { using: reference_names, derive: new Function( ...reference_names, `return ` + generate(cell_ast.body) ) }; } else if (cell_ast.body.type === 'BlockStatement') { return { using: reference_names, derive: new Function(...reference_names, generate(cell_ast.body)) }; } else if (cell_ast.body.type === 'ImportDeclaration') { throw new Error('Imports not yet supported!'); let import_ast = cell_ast.body; return import_ast.specifiers.map(specifier => { return { define: specifier.local.name, module: import_ast.source.value }; }); } else { return { using: reference_names, derive: new Function( ...reference_names, `return ` + generate(cell_ast.body) ) }; } } catch (error) { error.stack = ''; return { using: [], derive: () => error }; } }36:[] 2f:{"title":"Functions are notebooks (with Table UI)","cells":[{"id":0,"value":"md`# Functions are notebooks (with Table UI)\n\n- This is so I can use a custom UI for Table\n\nObservable is awesome. The way we can view results of every step of your computation (every cell).\n\nThis is lost when you encapsulate some of your computation in a function, however.\n\nI try to solve this here, by showing invocations of \"notebook functions\" as little sub notebook. \\`viewof\\` helps me show a UI and have a result value 👌🏾\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"md`# Examples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"md`# Notebook function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1835,"value":"code_editor_styles = css`\n .ad-hoc-code-editor {\n color: inherit;\n padding: 8px;\n padding-left: 0;\n padding-right: 0;\n resize: none; margin: 0;\n\n background: none;\n border: none;\n font-size: inherit;\n font-family: inherit;\n width: 100%;\n display: block;\n }\n .ad-hoc-code-editor:focus {\n outline: none;\n }\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1029,"value":"CodeEditor = ({ code, onChange }) => {\n let [local_code, set_local_code] = React.useState(code);\n let textarea_ref = React.useRef();\n\n return jsx`<${shadow.div} styleSheets=${[code_editor_styles]}>\n set_local_code(event.target.value)}\n\n onBlur=${() => {\n onChange(local_code);\n }}\n\n onKeyDown=${event => {\n if (\n (event.shiftKey && event.key === 'Enter') ||\n (event.metaKey && event.key === 's')\n ) {\n event.preventDefault();\n onChange(local_code);\n }\n }}\n\n className=\"ad-hoc-code-editor\"\n rows=${local_code.split(\"\\n\").length}\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n />\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2317,"value":"stuff","pinned":true,"hidden":false,"mode":"ojs"},{"id":1561,"value":"viewof stuff = render_notebook({\n name: 'stuff',\n cells: [\n {\n display: 'hidden',\n name: 'render_notebook',\n value: { type: 'constant', value: render_notebook }\n },\n {\n display: 'hidden',\n name: 'row',\n value: { type: 'constant', value: [1, 2, 3, 4, 5] }\n },\n {\n name: 'two',\n value: { type: 'constant', value: 10 }\n },\n {\n name: 'four',\n value: { type: 'code', value: `row[1]` }\n },\n {\n display: 'editable',\n name: 'twelfe',\n value: { type: 'code', value: `four * 2` }\n },\n {\n display: 'editable',\n name: 'duh',\n value: {\n type: 'code',\n value: `render_notebook({ cells: [{ name: 'renewing', display: 'editable', value: { value: 10, type: 'constant' }}]})`\n }\n }\n // parse_data({\n // display: 'editable'\n // })`\n // viewof x = html${'`'}${'`'}\n // `\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2520,"value":"parse_data({\n display: 'editable'\n})`\n viewof x = render_notebook({\n cells: [\n {\n name: 'renewing', \n display: 'editable', \n value: { value: 10, type: 'constant' }\n }\n ]\n })\n `","pinned":true,"hidden":false,"mode":"ojs"},{"id":2508,"value":"parse_data = options => (strings, ...args) => {\n let string = String.raw(strings, ...args);\n let cell = parseCell(string);\n let name = cell.id.type === 'ViewExpression' ? cell.id.id.name : cell.id.name;\n let modifier = null;\n if (cell.id.type === 'ViewExpression') {\n modifier = 'viewof';\n }\n\n return {\n name: name,\n value: {\n type: 'code',\n modifier: modifier,\n value: string.slice(cell.body.start, cell.body.end)\n },\n ...options\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1556,"value":"render_notebook = ({ element, ...props } = {}) =>\n render(element, jsx`<${Notebook} ...${props} />`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2155,"value":"Cell = ({ module, cell, onCodeChange, ...props }) => {\n let [collapsed, set_collapsed] = React.useState(true);\n return jsx`\n

\n {\n set_collapsed(!collapsed);\n }}\n />\n

\n <${InspectorComponent}\n module=${module} \n name=${cell.name} \n using=${[cell.name]} \n derive=${x => x} \n />\n

\n        ${cell.value.type === 'code' &&\n          jsx`\n          <${CodeEditor}\n            code=${cell.value.value}\n            onChange=${new_code => {\n              onCodeChange(new_code);\n            }}\n          />`}\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2305,"value":"Notebook = ({ cells: _cells, name: notebook_name }) => {\n let [cells, set_cells] = React.useState(_cells);\n let main = useObservableRuntime(cells);\n\n let names = cells\n .filter(x => x.name && x.display === 'editable')\n .flatMap(x => [x.name, ...(x.exports || []).map(x => x.name)]);\n\n let value_ref = React.useRef();\n useActLikeObservableView({\n ref: value_ref,\n module: main,\n using: names,\n derive: (...args) => Object.fromEntries(_.zip(names, args))\n });\n\n return jsx`\n

\n <${VerticalNotebookLayout}\n name=${notebook_name}\n module=${main}\n cells=${cells}\n onCellsChange=${cells => set_cells(cells)}\n />\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1570,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2068,"value":"downward_caret = jsx`\n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2534,"value":"notebook_header_style = css`\n.small-inspect {\n display: flex;\n flex-direction: row;\n overflow-x: auto;\n cursor: pointer;\n}\n.small-inspect::-webkit-scrollbar {\n display: none;key\n}\n.small-inspect > .observablehq--cellname {\n flex-shrink: 0;\n}\n.small-inspect > .observablehq--caret {\n align-self: center;\n}\n.small-inspect .observablehq {\n margin: 0;\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2063,"value":"NotebookHeader = wrap_with_shadow(\n [observable_style, notebook_header_style],\n ({ name, expanded, onClick, children }) => {\n if (name == null) {\n return null;\n }\n\n return jsx`\n \n ${\n expanded\n ? jsx`\n ${name} = \n ${downward_caret}\n `\n : jsx`

${children}

`\n }\n \n `;\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1652,"value":"inspector_with_name = (name, element) => {\n let inspector = new Inspector(element);\n inspector.fulfilled = value =>\n Inspector.prototype.fulfilled.call(inspector, value, name);\n inspector.rejected = value =>\n Inspector.prototype.rejected.call(inspector, value, name);\n return inspector;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1605,"value":"InspectorComponent = wrap_with_shadow([observable_style], stuff => {\n let { module, name, using, derive } = stuff;\n let container_ref = React.useRef();\n let inspector = React.useRef();\n\n React.useEffect(() => {\n if (container_ref.current != null) {\n let variable = module.variable(\n inspector_with_name(name, container_ref.current)\n );\n\n variable.define(using, derive);\n return () => {\n variable.delete();\n };\n }\n }, [module, name, container_ref.current]);\n\n // return jsx`

`;\n return jsx`

`;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1827,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2474,"value":"md`## Runtime in react`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"ObservableRuntime = ObservableHq.Runtime","pinned":false,"hidden":false,"mode":"ojs"},{"id":1608,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2191,"value":"useActLikeObservableView = ({ ref, module, using, derive }) => {\n React.useLayoutEffect(() => {\n let variable = module.variable({\n fulfilled: result => {\n ref.current.value = result;\n ref.current.dispatchEvent(new CustomEvent('input'));\n },\n rejected: error => {\n ref.current.value = error;\n ref.current.dispatchEvent(new CustomEvent('input'));\n }\n });\n variable.define(using, derive);\n\n return () => variable.delete();\n }, [module]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2246,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"cell_to_definition = ({ name, value: { type, value, modifier } }) => {\n let { derive, using } =\n type === 'code'\n ? code_to_derive(value)\n : { derive: () => value, using: [] };\n\n let derive_with_name = wrap_with_name(name, derive);\n if (modifier == null) {\n return {\n name: name,\n using: using,\n derive: derive_with_name\n };\n } else if (modifier === 'viewof') {\n let viewof_name = `viewof ${name}`;\n return {\n name: viewof_name,\n using: using,\n derive: derive_with_name,\n exports: [\n {\n name: name,\n using: [\"Generators\", viewof_name],\n derive: (Generators, _) => Generators.input(_)\n }\n ]\n };\n } else {\n throw new Error(`Unknown modifier '${modifier}'`);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1271,"value":"md`### Cell naming stack`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1274,"value":"import {\n PROPERTY_parse_stack as parse_stack,\n PROPERTY_wrap_with_name as wrap_with_name\n} from \"@dralletje/cell-name\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"md`# Cell parse catalog`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"cell_parse_block_statement = parseCell(\n `x = { return new Promise(resolve => setTimeout(() => resolve(10, y), 1000)) }`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"cell_parse_expression = parseCell(\n `x = new Promise(resolve => setTimeout(() => resolve(10, y), 1000))`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"cell_parse_yield = parseCell(`\n x = {\n yield 10;\n }\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"module_parse = parser.parseModule(`\n x = 10;\n\n y = 20;\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"module_with_import = parser.parseModule(`\n import { x } from \"@dralletje/simple-importable-example\";\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"cell_parse_viewof = parser.parseCell(`viewof x = something()`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"mutable_module_parse = parser.parseModule(`\n\nx = 10;\n\ny = {\n mutable z = 10\n}\n\nmutable x = 10\n\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"mutable_cell_parse = parser.parseCell(`mutable x = 10`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1502,"value":"md`## Render`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2568,"value":"import {\n render,\n React,\n jsx,\n css,\n shadow,\n wrap_with_shadow\n} from \"@dralletje/react-x-observable\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2539,"value":"render(\n undefined,\n jsx`\n <${shadow.div}\n slots=${{ stuff: jsx`WOW` }}\n >\n

Hey

\n \n`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1505,"value":"md`## Rest`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1982,"value":"safe = fn => {\n try {\n return [null, fn()];\n } catch (error) {\n return [error, null];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"ast_equal = (ast_1, ast_2) => {\n let keys = [\n 'async',\n 'body',\n 'fileAttachments',\n 'generator',\n 'id',\n 'references',\n 'type'\n ];\n let simple_ast_1 = _.pick(ast_1, keys);\n let simple_ast_2 = _.pick(ast_2, keys);\n return _.isEqualWith(simple_ast_1, simple_ast_2, (_1, _2, key) =>\n key === 'end' || key === 'start' || key === 'input' ? true : undefined\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"Inspector = ObservableHq.Inspector","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"ObservableHq = require(\"@observablehq/runtime@4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"inspectName = (await import('https://unpkg.com/@observablehq/inspector/src/inspectName.js'))\n .default","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"parser = require(\"@observablehq/parser\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"parseCell = parser.parseCell","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"generate = (await require('https://bundle.run/escodegen@1.14.1')).generate","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"import { dedent } from \"@dralletje/dedent-for-template-strings\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}