31:[{"id":"6f40deb936bd75eae42893d683764ccb88a71c9bcc3e15c785b56a0afdfce87b9cd53e67885a65b409a003015d21dcd239bad13d3a8511f551e35de51ea399bb","href":"https://static.observableusercontent.com/files/6f40deb936bd75eae42893d683764ccb88a71c9bcc3e15c785b56a0afdfce87b9cd53e67885a65b409a003015d21dcd239bad13d3a8511f551e35de51ea399bb","name":"image.png","type":"image/png","lastModified":1702322351323.027,"size":14317}] 2f:{"title":"Purescript","cells":[{"id":0,"value":"# Purescript\n\nImportable ObservableHQ notebook to compile purescript code using the `try.purescript.org` compiler endpoint.\n\nSee https://observablehq.com/@jmatsushita/try-purescript for an code playground which uses this module.\n\n### Usage\n\n```\nlet source = `module Main where`\nimport { Purescript } from '@jmatsushita/purescript'\nmodule = (await Purescript(source)).module\n```\n\n### API\n\n```ts\nPurescript(source: string, compilerUrl: string): Promise<{\n module, // a compiled esm module with exported purescript symbols accessible at `module.\\${symbols}`\n warnings?, // a array of compiler warnings \n} | {\n errors // a array of compiler errors\n warnings?, // a array of compiler warnings \n}\n>\n```\n\nSee [this section](#cell-735) for advanced use with a local try purescript compiler to work with packages that aren't in the package set.\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"},{"id":680,"value":"||\n| --- |--- | --- |\n||","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"## Hello World\n","pinned":false,"hidden":false,"mode":"md"},{"id":643,"value":"hi = `module Main where\n\nhi :: String\nhi = \"hello from purescript\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"(await Purescript(hi)).module.hi","pinned":true,"hidden":false,"mode":"ojs"},{"id":678,"value":"||\n| --- |--- | --- |\n||","pinned":false,"hidden":false,"mode":"md"},{"id":641,"value":"## More examples\n","pinned":false,"hidden":false,"mode":"md"},{"id":592,"value":"source = `module Main where\n\nimport Prelude\nimport Effect (Effect)\nimport Effect.Console (logShow)\n\nval :: String\nval = \"blah\"\n\ngreet :: String -> String\ngreet val = \"Hello \" <> val\n\nrender :: String\nrender = \"

a list item

\"\n\nmain :: Effect Unit\nmain = do\n logShow $ \"hello from purescript\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"ps = await Purescript(source)","pinned":true,"hidden":false,"mode":"ojs"},{"id":653,"value":"module = ps.module","pinned":true,"hidden":false,"mode":"ojs"},{"id":663,"value":"||\n| --- |--- | --- |\n||","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"Get a simple value","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"module.val","pinned":true,"hidden":false,"mode":"ojs"},{"id":668,"value":"||\n| --- |--- | --- |\n||","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"Run a function","pinned":false,"hidden":false,"mode":"md"},{"id":127,"value":"module.greet(\"me\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":670,"value":"||\n| --- |--- | --- |\n||","pinned":false,"hidden":false,"mode":"md"},{"id":118,"value":"A console effect, check your dev console.","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"module.main()","pinned":true,"hidden":false,"mode":"ojs"},{"id":674,"value":"||\n| --- |--- | --- |\n||","pinned":false,"hidden":false,"mode":"md"},{"id":614,"value":"An html string","pinned":true,"hidden":false,"mode":"md"},{"id":506,"value":"module.render.toString()","pinned":true,"hidden":false,"mode":"ojs"},{"id":617,"value":"||\n| --- |--- | --- |\n|Rendered as html (using `unsafe_html` from https://observablehq.com/@observablehq/htl)|","pinned":false,"hidden":false,"mode":"md"},{"id":612,"value":"unsafe_html`${module.render}`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":684,"value":"||\n| --- |--- | --- |\n||","pinned":false,"hidden":false,"mode":"md"},{"id":660,"value":"### Warnings","pinned":false,"hidden":false,"mode":"md"},{"id":651,"value":"warnings = ps.warnings","pinned":true,"hidden":false,"mode":"ojs"},{"id":692,"value":"||\n| --- |--- | --- |\n||","pinned":false,"hidden":false,"mode":"md"},{"id":690,"value":"### Errors","pinned":false,"hidden":false,"mode":"md"},{"id":696,"value":"errors = (await Purescript(`wat?`)).errors","pinned":true,"hidden":false,"mode":"ojs"},{"id":735,"value":"### trypurescript on 127.0.0.1:8080\n\nIn case you're missing packages, or need to run on a custom package set, you can buil trypurescript and run it on localhost, following [the instructions here](https://github.com/purescript/trypurescript/tree/master?tab=readme-ov-file#2-local-compile-server-setup) and making sure you also serve the `output` path (as per the [nginx.conf](https://github.com/purescript/trypurescript/blob/master/deploy/nginx.conf#L87-L90)). For instance using the [`http-server` npm module](https://github.com/http-party/http-server) and making sure you allow cors headers for your observablehq subdomain:\n```sh\n> export $OHQ_USERNAME # your observableHQ username\n> (set -o noglob && stack exec trypurescript 8081 $(spago sources))\n> yarn dlx http-server staging -P http://127.0.0.1:8081 --cors=\"Access-Control-Allow-Origin=https://$OHQ_USERNAME.static.observableusercontent.com\"\n```\n\nYou can then call the compiler with `Purescript(source, { compilerUrl: \"http://127.0.0.1:8081\"} )` ","pinned":false,"hidden":false,"mode":"md"},{"id":795,"value":"(await Purescript(hi, { compilerUrl: \"http://127.0.0.1:8080\" })).module.hi ","pinned":true,"hidden":false,"mode":"ojs"},{"id":802,"value":"simpleSample = `module Main where\n\nimport Prelude\nimport Effect (Effect)\nimport Effect.Console (logShow)\n\nval :: String\nval = \"blah\"\n\ngreet :: String -> String\ngreet val = \"Hello \" <> val\n-- ^ shadowing on purpose to show compiler warnings\n\nrender :: String\nrender = \"

a list item

\"\n\nmain :: Effect Unit\nmain = do\n logShow $ \"hello from purescript\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"(await Purescript(simpleSample, { compilerUrl: \"http://127.0.0.1:8080\" })).module.val ","pinned":true,"hidden":false,"mode":"ojs"},{"id":738,"value":"(await Purescript(\"module Main where\\n import Data.Codec.Foreign (_stringify)\\n stringify = _stringify\", { compilerUrl: \"http://127.0.0.1:8080\" })).module.stringify(true)","pinned":true,"hidden":false,"mode":"ojs"},{"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] Make this notebook into a nicely importable notebook.\n- [ ] How would multiple modules work?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"## Internals\n","pinned":false,"hidden":false,"mode":"md"},{"id":132,"value":"### Call the compile.purescript.org API\n\nCall https://compile.purecript.org/compile and get the compiled javascript back","pinned":false,"hidden":false,"mode":"md"},{"id":581,"value":"// returns Promise<{errors?, warnings?, module?}>\nPurescript = async (source, options = { compilerUrl: \"https://compile.purescript.org\" }) => {\n const { compilerUrl } = options\n let response = await compile(source, compilerUrl)\n if (response.error && response.error.contents) \n return { errors: response.error && response.error.contents, warnings: response.warnings }\n // console.log(\"compilerUrl\", compilerUrl);\n let jsPatched = response.js.replaceAll('from \"../', `from \"${compilerUrl}/output/`)\n // console.log(\"jsPatched\", jsPatched)\n let sourceURL = URL.createObjectURL(new Blob([jsPatched], { type: 'text/javascript' }))\n // console.log(sourceURL)\n let module\n try {\n module = await import(sourceURL)\n } catch (e) {\n console.error(e)\n return { module: e }\n }\n return { module, warnings: response.warnings }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"compile = (source, compilerUrl) => fetch(`${compilerUrl}/compile`, {\n method: 'POST',\n body: `${source}`\n}).then((response) => response.json());","pinned":true,"hidden":false,"mode":"ojs"},{"id":358,"value":"### Patch the compiler output\n\npatch the compiler output to point to compiled packages from [available libraries](https://github.com/purescript/trypurescript/blob/master/README.md#which-libraries-are-available) ","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":"// jsPatched = response.js.replaceAll('from \"../', 'from \"https://compile.purescript.org/output/')","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"### Make a module specifier for the patched compiler output \n\nThe trick is to then use `URL.createObjectURL` with the `text/javascript` mime type, and pass this to the `import()` statement.","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"// sourceURL = URL.createObjectURL(new Blob([jsPatched], { type: 'text/javascript' }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"### Import the module\n","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"// module = import(sourceURL)","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"And there we have it. A compiled module that's accessible from the notebook 🎉","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":706,"value":"import {mdPlus} from \"@tmcw/bonus-markdown-flavor\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}