Purescript, Local First
Topic Diffusion modeling
module.val
module.greet("me")
module.main()
ps = await Purescript(source)
// module = ps.module
module = (await Purescript(source)).module
errors = ps.errors
warnings = ps.warnings
renderCompilationStatus = (source, warnings, errors) => {
const renderedWarnings = warnings && warnings.length >0 ?
htl.html`<h3>Compiler warnings</h3><table style="max-width: none;"><thead>
<tr>${toColumns(warnings).map(col => htl.html`<th>${col}</th>`)}</tr>
</thead>
<tbody>
${toTable(warnings, source).map(row => htl.html`<tr>
${Object.values(row).map(cell => htl.html`<td><pre style="text-wrap: balance;">${cell}</pre></td>`)}
</tr>`)}
</tbody>
</table>
` : htl.html`<code>No warnings</code><br>`
const renderedErrors = errors ? htl.html`<h3>Compiler errors</h3><table style="max-width: none;">
<thead>
<tr>
${toColumns(errors).map(col => htl.html`<th>${col}</th>`)}
</tr>
</thead>
<tbody>
${toTable(errors, source).map(row => htl.html`<tr>
${Object.values(row).map(cell => htl.html`<td><pre style="text-wrap: balance;">${cell}</pre></td>`)}
</tr>`)}
</tbody>
</table>
` : htl.html`<code>No errors</code>`
return htl.html`${renderedWarnings}${renderedErrors}`
}
import { Purescript } from '@jmatsushita/purescript'
Purescript
PurescriptEditor = async (doc = '', extensions = []) => {
const {StreamLanguage} = await import(`https://jspm.dev/@codemirror/language@6.9.3`)
const { haskell } = await import(`https://jspm.dev/@codemirror/legacy-modes/mode/haskell`);
return CodeMirror(doc, {
extensions: [myDefaultTheme, StreamLanguage.define(haskell), ...extensions]
});
}
import {localStorageView} from '@tomlarkworthy/local-storage-view'
viewof source = localStorageView("sourceDiffTopic", { defaultValue: example })
// creating a fake source to subscribe from, together with a bound localStorageView didn't work.
// Uncaught TypeError: e.closest is not a function
// at inputs.min.js:40:1444
// viewof source = Inputs.input()
// viewof sourceStorage = localStorageView("sourceStorage")
// Inputs.bind(viewof source, viewof sourceStorage)
// See reproducer here https://observablehq.com/d/f7e7508476855e8b#cell-264
Inputs.bind(viewof editor, viewof source)
// Note you need to get these the right way round to have the page load work correctly
// Inputs.bind(viewof source, viewof sourceStorage)
// set helper
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", {bubbles: true}));
}
toTable = (array, source) => array ? array.map(row => objectFilter(objectMap(row, toReadableRow(source)), hideColumns)) : []
hideColumns = k => k !== "allSpans" && k !== "moduleName" && k !== "filename" && k !== "errorLink"
toColumns = array => array && array[0] ? Object.keys(array[0]).filter(hideColumns) : []
toReadableRow = source => (v,k) => {
switch(k) {
case "allSpans":
return JSON.stringify(v)
case "position":
// console.log(source.split("\n"))
// console.log(source.split("\n").slice(v.startLine - 1, v.endLine))
return source.split("\n").slice(v.startLine - 1, v.endLine).join("\n")
default:
return v;
}
}
toTable(warnings, source)
toColumns(warnings)
warnings
errors.contents
toColumns(errors.contents)
toTable(errors.contents, source)
function unsafe_html() {
const span = document.createElement("span");
span.innerHTML = String.raw.apply(this, arguments);
return span;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
