3e:null 3f:["$","title",null,{"children":"purescript-selda and sqlite in the browser | Jun Matsushita | Observable"}] 45:T49f,## Selda Ugh. It's not available in the default package set. I could run the try purescript compiler with a custom package set, but I think I want to figure out how to deal with this problem more generally so I can depend on unpublished or custom purescript modules while still making the code available publicly on notebook without a localhost dependency. The compiler needs to have access to these extra modules, so I need to check if I could submit module code. Most probably not [from the readme](https://github.com/purescript/trypurescript?tab=readme-ov-file#compile-purescript-code): ``` POST /compile Request body: PureScript code defining a module whose name must be Main ``` Ok so I would need to deploy a compiler with the custom package set. That's a pretty big infra detour. Ok well I'll work slowly at it, but for now I suppose, no real choice but to use localhost. I suppose I could also try sqlite3 libs that are in the package set. Maybe let's start with that? `purescript-selda` itself depends on `purescript-node-sqlite3`. Yeah well, that's already going to be a problem anyway with selda as well since I don't want to run in node. And the yack appears again.46:T10ff,## purescript-better-sqlite3 Well I won't be able to develop this in observable unfortunately. Given that we can't send a foreign module. https://github.com/purescript/trypurescript/issues/8 So I'll switch to local dev and update my progress here. With regards to the API I suppose it makes sense to try to match the impedance of the selda backend api. From [the tests](https://github.com/Kamirus/purescript-selda/blob/master/test/SQLite3.purs) we'll want at least. ``` import SQLite3 (newDB, queryDB) import Selda.SQLite3.Class (deleteFrom, insert_, update) ``` We'll need a `MonadSeldaBetterSqlite3` which has `monadSelda` as a superclass: ``` instance monadSeldaSQLite3Instance :: MonadSelda m MultipleErrors DBConnection => MonadSeldaSQLite3 m ``` But we can wait on that. Since I can probably continue with the incremental relational lenses work with only a few of the primitives implemented and the general shape. Ok so `insert_` is defined with: ```haskell insert_ :: forall m t r . GenericInsert BackendSQLite3Class m t r => Table t -> Array { | r } -> m Unit insert_ = genericInsert (Proxy :: Proxy BackendSQLite3Class) instance sqlite3ToForeign :: WriteForeign a => ToForeign BackendSQLite3Class a where toForeign _ = write instance genericInsertSQLite3 :: ( HFoldl (RecordToArrayForeign BackendSQLite3Class) (Array Foreign) { | r } (Array Foreign) , MonadSeldaSQLite3 m , GenericShowInsert t r ) => GenericInsert BackendSQLite3Class m t r where genericInsert proxy table l = when (not $ null l) do genericInsert_ { exec: execSQLite3_, ph: "?" } proxy table l ``` Ok, so `insert_` takes: - a table (which is really a proxy - carrying only a table name at the term level) which has the columns as a row type (like [we did in incremental relational lenses](https://observablehq.com/d/60ebd812c78e5fe1) but without the relational algebra -- not type class -- functional dependencies which we don't need here). - an array of records, with an open type r which I suppose is type checked with the GenericInsert constraint. Well the only constraint I see is the fundep between the table row type and the array of record, buut without additional - Of I see, [it's `genericInsert_` that does the heavy lifting](https://github.com/Kamirus/purescript-selda/blob/a81f47f9054e9ea893d5ef79586be70068462249/src/Selda/Query/Class.purs#L52-L66) using [`HFoldl` from `purescript-heterogeneous`](https://github.com/natefaubion/purescript-heterogeneous/blob/master/src/Heterogeneous/Folding.purs). Very good that it's implemented with the library from the purescript ecosystem ❤️ - Ok so so far, that's the type level machinery (which we'll want to draw inspiration from for incremental relational lenses. Ah ha. I think the workhorse for the actual database stuff is when passing the `{exec: execSQLite3_, ph: "?"}` term to `genericInsert_`. That's defined as: ```haskell -- | Utility function to execute a given query (as String) with parameters and discard the result execSQLite3_ :: forall m. MonadSeldaSQLite3 m => String -> Array Foreign -> m Unit execSQLite3_ q l = when (q /= "") $ void $ execSQLite3 q l ``` Ok I think that makes sense, then the show instances for the query types (`showUpdate`, `showInsert` `showDeleteFrom`) are generating the raw sql. Ah, important to note that the `PG` backend [has a `pgQuery`](https://github.com/Kamirus/purescript-selda/blob/a81f47f9054e9ea893d5ef79586be70068462249/src/Selda/PG/Class.purs#L53-L63) which is able return data from the db query `m (Array o)` with a `FromSQLRow o` constraint. Ah, there is a `execSQLite3` which returns an `m Foreign`. ```haskell execSQLite3 :: forall m. MonadSeldaSQLite3 m => String -> Array Foreign -> m Foreign execSQLite3 q params = do conn <- ask liftAff $ queryDB conn q params ``` Ok and that's fetching the db connection (with `DBConnection` type that's part of MonadSeldaSQLite3) from the environment and running `queryDB` from the underlying `node-sqlite3` lib. So these 2 things really are the api that's needed - `DBConnection` type and a way to create and close one - `newDB :: FilePath -> Aff DBConnection` `closeDB :: DBConnection -> Aff Unit` - `queryDB` function of type `queryDB :: DBConnection -> Query -> Array Param -> Aff Foreign` Ok let's fire up vscode and start coding. 47:Tec3,### purescript-wasm-sqlite Ok so let's install better-sqlite3 and maybe later we'll check if the whole new format for spago is ready to use or not (which includes different dependency sets for the library and tests which will matter somewhat for us). Ok so `yarn init` and `yarn add better-sqlite3`. Hmm, wait a sec. I've been using the `@vlcn.io/crsqlite-wasm` lib and that has the "shape" of `better-sqlite3` but it's not using `better-sqlite3` which is also a node based lib. It uses it's fork of https://github.com/rhashimoto/wa-sqlite/ So let's use the fork since that's really our target. And I'll create a todo to also run tests with `wa-sqlite`. So `yarn remove better-sqlite3 && yarn add @vlcn.io/crsqlite-wasm` Ok let's start with a `WASQLite.purs` file and follow the `purescript-node-sqlite3` shape and have `WASQLite/Internal.purs` with the corresponding FFI bindings in `WASQLite/Internal.js`. Ok so I can follow https://vlcn.io/docs/js/wasm So first thing I need to think about is how to convert [the callback based FFI in `purescript-node-sqlite3`](https://github.com/justinwoo/purescript-node-sqlite3/blob/master/src/SQLite3/Internal.js#L3) into using `async/await`. Ok so I'll just make Internal follow the crsqlite-wasm API and convert it to Aff in the main module. Ok https://github.com/purescript-contrib/purescript-js-promise-aff/?tab=readme-ov-file#consuming-promises-promise-to-aff so my `Internal._newDB` type will be: ``` _newDB :: FilePath -> Effect (Promise DBConnection) ``` And `WASQLite.newDB` will be: ``` newDB :: DBConnection -> Aff DBConnection newDB = _newDB >>> Promise.toAffE ``` Easy! So I think that means my `Internal.js` should be: ```js import initWasm from "@vlcn.io/crsqlite-wasm"; import wasmUrl from "@vlcn.io/crsqlite-wasm/crsqlite.wasm?url"; const sqlite = await initWasm(() => wasmUrl); export function _newDB(filename) { return function () { return sqlite.open(filename); } } ``` Ok I need a bit of local dev kit to run my code in the browser. In the past I've used the `purescript-spec` mocha test runner. But I think it wasn't maintained. Let's see if there's a solution with more traffic. Ok some folks also having some issues with purescript-spec-mocha https://discourse.purescript.org/t/purescript-browser-tests/2722/2 I checked on the `purescript-react-basic` ecosystem and found that `purescript-react-basic-hooks` uses `React.TestingLibrary` https://github.com/purescript-react/purescript-react-basic-hooks/blob/main/test/Spec/UseStateSpec.purs#L10C8-L10C28 That seems like a really good idea given I'll want to also use the React Native Testing Library at some point. The testing library ecosystem does have a simple DOM based runner https://testing-library.com/docs/dom-testing-library/intro which can run a simulated dom or run in the browser. It seems that the `purescript-react-testing-library` mostly wraps the react bits though. Which itself depends on `@testing-library/react` which does depend on `@testing-library/dom` so maybe we can expose these bits? A yack appears. It's tempting, but it seems like too much (both expose the DOM testing and create a browser runner)... So let's go with our fork of `purescript-spec-mocha` and see if we can contribute back too. Ok we do have an ongoing PR but I didn't follow up with the request https://github.com/purescript-spec/purescript-spec-mocha/pull/20 Let's see if we've pushed all our local changes and address the comments. Ok it's done. So let's update our `packages.dhall` to point to our fork for now. Ok there we go with our initial commit https://github.com/jmatsushita/purescript-wasm-sqlite/tree/5bed6df5ab787abefbfa2d9afd0c3437bd5712de We immediately have a problem when trying to build. So let's sort out build stuff.48:Tbd4,## purescript build This is the error I get. Which means there's some issue with the bundling. ``` > yarn test:build 14:19:24 Src Lib All Warnings 0 0 0 Errors 0 0 0 [info] Build succeeded. ✘ [ERROR] Top-level await is currently not supported with the "iife" output format output/WASQLite.Internal/foreign.js:4:15: 4 │ const sqlite = await initWasm(() => wasmUrl); ╵ ~~~~~ ✘ [ERROR] No loader is configured for ".wasm" files: node_modules/@vlcn.io/crsqlite-wasm/dist/crsqlite.wasm?url output/WASQLite.Internal/foreign.js:2:20: 2 │ import wasmUrl from "@vlcn.io/crsqlite-wasm/crsqlite.wasm?url"; ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ``` Basically in `package.json` I think we need to replace: ``` "test:build": "spago bundle-app --main Test.Main --to ./output/test.js", ``` Oh yeah. I just need to use `spago bundle-module`. Doing this we move to the next error, which might mean we need to to a separate `spago build` step and use `esbuild` with a custom config after that. ``` No loader is configured for ".wasm" files: node_modules/@vlcn.io/crsqlite-wasm/dist/crsqlite.wasm?url output/WASQLite.Internal/foreign.js:2:20: 2 │ import wasmUrl from "@vlcn.io/crsqlite-wasm/crsqlite.wasm?url"; ``` Let's try and follow these steps https://esbuild.github.io/plugins/#webassembly-plugin. Hmm, let's use this instead https://www.npmjs.com/package/esbuild-plugin-wasm Ugh... not the best. I guess `cr-sqlite` uses `vite` for bundling and that has some facilities I'm not sure how to adapt to esbuild. Doing the simple thing doesn't work: ``` ✘ [ERROR] ENOENT: no such file or directory, open '/Users/jun/dev/workshop/libraries/purescript-wasm-sqlite/output/WASQLite.Internal/@vlcn.io/crsqlite-wasm/crsqlite.wasm' [plugin wasm] output/WASQLite.Internal/foreign.js:2:20: 2 │ import wasmUrl from "@vlcn.io/crsqlite-wasm/crsqlite.wasm"; ``` Shows that path resolution is wonky. Let's try and point to `node_modules` real quick. Well it seems doing some ugly things like copying the wasm file to my `output` folder. I'm able to make parcel happy. I think that's the default URL expected. Getting some problems with loading `chai/mocha` though. I get this error: ``` Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules ``` And apparently using `parcel build` instead of `parcel` (the `serve` default) doesn't have that problem... wtf. Ok I think I got the first test to pass with quite a bit of fiddling: ![image@1.png](${await FileAttachment("image@1.png").url()}) It's tempting to try and move to `vite` and there is a starter https://github.com/kajetansw/purescript-react-vite-starter. But we're too many yacks down already. So. Let's [commit](https://github.com/jmatsushita/purescript-wasm-sqlite/tree/ea91ac1820049b8ccba2a85851a40b866df3358c). 49:T4af,### Let's try and do something with our DBConnection Nice! This test passes: ``` describe "it should query" $ do it "runs basic queryDB" do bracket (newDB ":memory:") closeDB \db -> do res <- queryDB db "SELECT 1 + 1" [] case runExcept $ (traverse <<< traverse) readInt =<< traverse readArray =<< readArray res of Left err -> throwError $ error $ show err Right ints -> ints `shouldEqual` [[2]] ``` [Committed](https://github.com/jmatsushita/purescript-wasm-sqlite/tree/b4732e1c23febb6abc979e33ddb99d7a758b1820). Ok continued with a few more tests and modified the API to reflect the names of the JS library. Also added an example in the readme with instructions on how to run it in the browser. ![image@2.png](${await FileAttachment("image@2.png").url()}) Ok I'm happy with where it is right now. https://github.com/jmatsushita/purescript-wasm-sqlite It would be nice to implement a selda backend with it now, but I might go straight back to [the incremental relational lenses work](https://observablehq.com/d/60ebd812c78e5fe1) since it should have unblocked me and that work should not be too strongly coupled with Selda anyway.4a:T40a,renderCompilationStatus = (source, warnings, errors) => { const renderedWarnings = warnings && warnings.length >0 ? htl.html`

Compiler warnings

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

${col}
${cell}

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

Compiler errors

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

${col}
${cell}

` : htl.html`No errors` return htl.html`${renderedWarnings}${renderedErrors}` }4b:Taf4,trypurescript = `module Main where import Prelude import Data.Foldable (fold, foldMap, class Foldable) import Effect (Effect) import Effect.Console (logShow) text :: String -> String text = identity h1 :: String -> String h1 s = "

" <> s <> "

" h2 :: String -> String h2 s = "

" <> s <> "

" p :: String -> String p s = "

" <> s <> "

" ul :: String -> String ul s = "

" <> s <> "" li :: String -> String li s = "

" <> s <> "

" list :: forall f. Foldable f => f String -> String list = ul <<< foldMap (li) indent :: String -> String indent s = "

" <> s <> "

" code :: String -> String code s = "" <> s <> "" link :: String -> String -> String link url html = " url <> "\\" target=\\"_top\\">" <> html <> "" render :: String render = fold [ h1 (text "Try PureScript!") , p (text "Try out the examples below, or create your own!") , h2 (text "Examples") , list (map fromExample examples) , h2 (text "Share Your Code") , p (text "The contents of the text editor are stored in the URL. To share your code you can simply copy the URL.") , p (text "Additionally, a PureScript file can be loaded from GitHub from a gist or a repository. To share code using a gist, include the gist ID in the URL as follows:") , indent (p (code (text " try.purescript.org?gist="))) , p (fold [ text "The gist should contain PureScript module named " , code (text "Main") , text " in a file named " , code (text "Main.purs") , text " containing your PureScript code." ]) , p (text "To share code from a repository, include the path to the source file as follows:") , indent (p (code (text " try.purescript.org?github=////.purs"))) , p (fold [ text "The file should be a PureScript module named " , code (text "Main") , text " containing your PureScript code." ]) ] where fromExample { title, source } = link ("https://github.com/purescript/trypurescript/master/client/examples/" <> source) (text title) examples = [ { title: "Algebraic Data Types" , source: "ADTs.purs" } , { title: "Loops" , source: "Loops.purs" } , { title: "Operators" , source: "Operators.purs" } , { title: "Records" , source: "Records.purs" } , { title: "Recursion" , source: "Recursion.purs" } , { title: "Do Notation" , source: "DoNotation.purs" } , { title: "Type Classes" , source: "TypeClasses.purs" } , { title: "Generic Programming" , source: "Generic.purs" } , { title: "QuickCheck" , source: "QuickCheck.purs" } ] `4c:[{"id":"6f40deb936bd75eae42893d683764ccb88a71c9bcc3e15c785b56a0afdfce87b9cd53e67885a65b409a003015d21dcd239bad13d3a8511f551e35de51ea399bb","href":"https://static.observableusercontent.com/files/6f40deb936bd75eae42893d683764ccb88a71c9bcc3e15c785b56a0afdfce87b9cd53e67885a65b409a003015d21dcd239bad13d3a8511f551e35de51ea399bb","name":"image.png","type":"image/png","lastModified":1703845865966.779,"size":14317},{"id":"d93ea2f3f475ee005fbafeab88bf42a017795f5896d27ce1b12466331165bd60501102aae0efa7cc6483a3d13b6581840a7560e48092b1c9b0c14924226ed3b5","href":"https://static.observableusercontent.com/files/d93ea2f3f475ee005fbafeab88bf42a017795f5896d27ce1b12466331165bd60501102aae0efa7cc6483a3d13b6581840a7560e48092b1c9b0c14924226ed3b5","name":"image@1.png","type":"image/png","lastModified":1703861202664.232,"size":54029},{"id":"28be74277a5393b07b831a8573a53eb477c081ac7db874b895bd98473e4a30912d8339f43908d7b20e5ddcf1cf57427961407182c2bee9cb26f21ca519ec5d11","href":"https://static.observableusercontent.com/files/28be74277a5393b07b831a8573a53eb477c081ac7db874b895bd98473e4a30912d8339f43908d7b20e5ddcf1cf57427961407182c2bee9cb26f21ca519ec5d11","name":"image@2.png","type":"image/png","lastModified":1703869185793.25,"size":106281}] 43:{"id":"e86a669f88f1dfa4","slug":null,"title":"purescript-selda and sqlite in the browser","thumbnail":"6dc7d8e420b29d56d31c521eeb7088dcf4f9a4ca6101519fd1a93959d187e54e","access_level":"public","create_time":"$D2023-12-29T10:31:05.966Z","update_time":"$D2023-12-29T17:44:39.896Z","view_time":null,"first_public_time":"$D2023-12-29T10:31:05.966Z","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":"885522aee82e9dc7","login":"jmatsushita","name":"Jun Matsushita","avatar_url":"https://avatars-next.observableusercontent.com/baf5b0dbf3fcd28799fdd31db44e9a029fea0c5048021a805ee2de732fcc15aa","tier":"starter_2024","bio":"Purescript, Local First","following":false},"version":932,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a93138a291b16572","login":"jmatsushita","name":"Jun Matsushita","avatar_url":"https://avatars-next.observableusercontent.com/baf5b0dbf3fcd28799fdd31db44e9a029fea0c5048021a805ee2de732fcc15aa","tier":null,"bio":"Purescript, Local First","following":false}],"members":[{"type":"individual","id":"a93138a291b16572","login":"jmatsushita","name":"Jun Matsushita","avatar_url":"https://avatars-next.observableusercontent.com/baf5b0dbf3fcd28799fdd31db44e9a029fea0c5048021a805ee2de732fcc15aa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"purescript-selda and sqlite in the browser","cells":[{"id":0,"value":"# purescript-selda and sqlite in the browser\n\nIn the course of [implementing incremental relational lenses](https://observablehq.com/d/60ebd812c78e5fe1), I wanted to see if I could connect the purecript-selda library to a wasm sqlite.\n\nWe'll want to use `cr-sqlite` https://observablehq.com/@tantaman/cr-sqlite-basic-setup \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":890,"value":"## Following cr-sqlite-lite-basic-setup\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":892,"value":"sqliteWasm = import(\"https://esm.sh/@vlcn.io/crsqlite-wasm@0.16.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":902,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":910,"value":"### Local dev\n\nMaybe it's useful if I record how I setup a basic project.\n - I copy an existing library from my `workshop/libraries` folder.\n - In this case I'll use `puresccript-codec-foreign` as I worked on it recently.\n - I have a fork pushed here https://github.com/jmatsushita/purescript-codec-foreign\n - This gives me a nix flake / direnv based development environment with purescript `0.15.10`\n - `.envrc` is detected by the system installed `direnv` and loads the flake's dev environment\n - `flake.nix` and `flake.lock` install a contained dev env with node, purescript and tooling like the `purescript-language-server` and `purs-backend-es` and `esbuild`.\n - I also have vscode setup with the `direnv` plugin, so once I do\n - `direnv allow` only once.\n - `code .`\n - I'm ready to go (`spago test` and language server in vscode will just work).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":912,"value":"$47","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":917,"value":"$48","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":925,"value":"$49","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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- [ ] Implement \\`deleteFrom\\`, \\`insert_\\`, \\`update\\`\n- [ ] Add tests with \\`wa-sqlite\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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 = PurescriptEditor('', \n // [myDefaultTheme]\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":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":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":"$4a","pinned":true,"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://jspm.dev/@codemirror/language@6.9.3`)\n const { haskell } = await import(`https://jspm.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":406,"value":"example = `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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"viewof source = localStorageView(\"source\", { defaultValue: example })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":726,"value":"Inputs.bind(viewof editor, viewof source)","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":"$W4c","stdlib":"1"}} 44:"$43:body"