Purescript, Local First
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;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.