25:["$","title",null,{"children":"Try Purescript | Tom Larkworthy | Observable"}] 49:[{"id":"6f40deb936bd75eae42893d683764ccb88a71c9bcc3e15c785b56a0afdfce87b9cd53e67885a65b409a003015d21dcd239bad13d3a8511f551e35de51ea399bb","href":"https://static.observableusercontent.com/files/6f40deb936bd75eae42893d683764ccb88a71c9bcc3e15c785b56a0afdfce87b9cd53e67885a65b409a003015d21dcd239bad13d3a8511f551e35de51ea399bb","name":"image.png","type":"image/png","lastModified":1702680375284.484,"size":14317}] 29:{"id":"9568798fb0fbd44c","slug":null,"title":"Try Purescript","thumbnail":"87c28f4ff53ad645af718d2e37c40e512ce23dbd2e6522589b3904598116eaf4","access_level":"unlisted","create_time":"$D2023-12-15T22:46:15.284Z","update_time":"$D2023-12-15T22:49:26.975Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"932100626f9cdc61","slug":"try-purescript","title":"Topic Diffusion modeling","owner":{"id":"885522aee82e9dc7","login":"jmatsushita","name":"Jun Matsushita"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024","bio":"Tech Lead at Taktile.\nFormerly Firebase, Google","followed_by_you":false,"follows_you":false},"version":888,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"bio":"Tech Lead at Taktile. ex Firebase, Google.\n🦋 larkworthy.bsky.social","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Try Purescript","cells":[{"id":0,"value":"# Try Purescript\n\nRun purescript code in ObservableHQ using `try.purescript.org`'s compiler endpoint and [@jmatsushita/purescript](https://observablehq.com/@jmatsushita/purescript).\n\n## Usage\n\n- Modify the [Source code](#cell-85) in the Editor below.\n- Click the `compile` button to send your changes to the try purescript compiler API.\n- Check for errors and warnings\n- You can now [Run it](#cell-89) and use the compiled module using `module.{symbol}` (only tested with simple values!)\n\nYou even get your purescript exported symbols autocompleted in the javascript editor. 🎉\n\n![image.png](${await FileAttachment(\"image.png\").url()})\n\nSee [Todo section](#cell-155) for some next steps ideas, and [Internals](#cell-91) for details on how this works. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"## Source code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":436,"value":"Inputs.button([\n [\"Simple example\", () => set(viewof source, example)],\n [\"Try Purescript\", () => set(viewof source, trypurescript)],\n [\"Reset\", () => set(viewof source, 'module Main where\\n')]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof editor = Inputs.bind(\n await PurescriptEditor(\n \"dsdsds\"\n // [myDefaultTheme]\n ),\n localStorageView(\"code\")\n)\n// codeJar\n// viewof editor = Editor({\n// language: 'haskell',\n// debounced: 2000\n// })\n// viewof source = Inputs.textarea()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"editor","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"Inputs.button([\n [\"Compile\", () => viewof editor.dispatchEvent(new Event('input', {bubbles: true}))],\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"||\n| --- |--- | --- |\n|Compilation status|","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":842,"value":"$${renderCompilationStatus(source, warnings, errors)}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":566,"value":"||\n| --- |--- | --- |\n|Displaying the `render` value as html|","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":504,"value":"html = unsafe_html`${module.render}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"||\n| --- |--- | --- |\n|Output `val`|","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":685,"value":"module.val","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"||\n| --- |--- | --- |\n|Run the `greet` function|","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":687,"value":"module.greet(\"me\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"||\n| --- |--- | --- |\n|Run `main`, a console effect, check your devtools.|","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":689,"value":"module.main()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"mdPlus`## Todo\n\nReach out on the [purescript discord](https://purescript.org/chat) if you have ideas or want to help!\n\n- [x] Improve warnings and errors rendering\n- [x] Added a version of the original try purescript code sample.\n- [x] Make this notebook into a nicely importable notebook. https://observablehq.com/@jmatsushita/purescript\n- [x] Add syntax highlighting.\n- [ ] How would multiple modules work?\n- [ ] Display spinner while compiling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"## Internals\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"### Import the module\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":618,"value":"ps = await Purescript(source)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"// module = ps.module\nmodule = (await Purescript(source)).module","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"errors = ps.errors","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"warnings = ps.warnings","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"renderCompilationStatus = (source, warnings, errors) => {\n const renderedWarnings = warnings && warnings.length >0 ? \nhtl.html`

Compiler warnings

\n ${toColumns(warnings).map(col => htl.html``)}\n \n \n ${toTable(warnings, source).map(row => htl.html`\n ${Object.values(row).map(cell => htl.html``)}\n `)}\n \n

${col}
${cell}

\n` : htl.html`No warnings
`\n\n const renderedErrors = errors ? htl.html`

Compiler errors

\n \n \n ${toColumns(errors).map(col => htl.html``)}\n \n \n \n ${toTable(errors, source).map(row => htl.html`\n ${Object.values(row).map(cell => htl.html``)}\n `)}\n \n

${col}
${cell}

\n` : htl.html`No errors`\n return htl.html`${renderedWarnings}${renderedErrors}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"import { Purescript } from '@jmatsushita/purescript'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"Purescript","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"And there we have it. A compiled module that's accessible from the notebook 🎉","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":366,"value":"### Use an embedded code editor with Haskell syntax highlighting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":192,"value":"Reuse https://observablehq.com/@cmudig/editor, an inline code editor with syntax highlighting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":176,"value":"// import {Editor} from '@jmatsushita/editor'\nimport {CodeMirror, myDefaultTheme} from '@jmatsushita/codemirror'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"PurescriptEditor = async (doc = '', extensions = []) => {\n const {StreamLanguage} = await import(`https://cdn.skypack.dev/@codemirror/language`)\n const { haskell } = await import(`https://cdn.skypack.dev/@codemirror/legacy-modes/mode/haskell`);\n return CodeMirror(doc, {\n extensions: [myDefaultTheme, StreamLanguage.define(haskell), ...extensions]\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"### Support persistence in local storage","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":379,"value":"import {localStorageView} from '@tomlarkworthy/local-storage-view'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"If the local storage key doesn't exist, use this example as a default value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":717,"value":"// creating a fake source to subscribe from, together with a bound localStorageView didn't work.\n// Uncaught TypeError: e.closest is not a function\n// at inputs.min.js:40:1444\n// viewof source = Inputs.input()\n// viewof sourceStorage = localStorageView(\"sourceStorage\")\n// Inputs.bind(viewof source, viewof sourceStorage)\n// See reproducer here https://observablehq.com/d/f7e7508476855e8b#cell-264","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"// Note you need to get these the right way round to have the page load work correctly\n// Inputs.bind(viewof source, viewof sourceStorage)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"// set helper\nfunction set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"### Make warnings and errors readable\n\nUse a bunch of utility functions to render the warnings and errors in an html table (using the built-in `Inputs.table` didn't seem to allow multiline cells)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":195,"value":"toTable = (array, source) => array ? array.map(row => objectFilter(objectMap(row, toReadableRow(source)), hideColumns)) : []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"hideColumns = k => k !== \"allSpans\" && k !== \"moduleName\" && k !== \"filename\" && k !== \"errorLink\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"toColumns = array => array && array[0] ? Object.keys(array[0]).filter(hideColumns) : []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"toReadableRow = source => (v,k) => {\n switch(k) {\n case \"allSpans\": \n return JSON.stringify(v)\n\n case \"position\":\n // console.log(source.split(\"\\n\"))\n // console.log(source.split(\"\\n\").slice(v.startLine - 1, v.endLine))\n return source.split(\"\\n\").slice(v.startLine - 1, v.endLine).join(\"\\n\")\n \n default:\n return v;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"toTable(warnings, source)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"toColumns(warnings)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"warnings","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"errors.contents","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"toColumns(errors.contents)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"toTable(errors.contents, source)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"objectMap = (obj, fn) =>\n Object.fromEntries(\n Object.entries(obj).map(\n ([k, v], i) => [k, fn(v, k, i)]\n )\n )\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"objectFilter = (obj, fn) => Object.fromEntries(Object.entries(obj).\n filter(([key, val]) => fn(key)));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"import {mdPlus} from \"@tmcw/bonus-markdown-flavor\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"function unsafe_html() {\n const span = document.createElement(\"span\");\n span.innerHTML = String.raw.apply(this, arguments);\n return span;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null