Purescript, Local First
Public
Edited
Dec 22, 2023
lezerMarkdown = import("https://cdn.jsdelivr.net/npm/@lezer/markdown@1.1.2/+esm")
text = `
# LOG
## Doing
### Some activity
And some text for that activity
### Some H3 activity
Some text
#### Some H4 activity
Some text before the bullet list
### #tagged activity
And some text for that tagged activity
- A bullet point
- A nested bullet point
- A second nested point
A paragraph.
> A blockquote
# Another H1
### #tagged H3 activity
- [ ] A task
- [ ] A nested task
- A bullet in a nested task
- [ ] A nested task in a nested bullet
- [x] A completed task
- [/] A task with a custom "in progress" status
`;
//render(tree)
tree = lezerMarkdown.parser.parse(text)
treeGFM = lezerMarkdown.parser.configure(lezerMarkdown.GFM).parse(text)
//render(treeGFM)
spine(treeGFM)
strip(tree, text)
compilation.module.transform(strip(treeGFM, text))
import {CodeMirror, myDefaultTheme} from '@jmatsushita/codemirror'
MarkdownEditor = async (doc = '', extensions = []) => {
const { markdown, markdownLanguage } = await import('https://jspm.dev/@codemirror/lang-markdown')
const { lineNumbers } = await import('https://jspm.dev/@codemirror/view')
// const { languages } = await import('@codemirror/language-data')
return CodeMirror(doc, {
extensions: [
myDefaultTheme,
lineNumbers(),
markdown({
base: markdownLanguage,
// codeLanguages: languages,
}),
...extensions]
});
}
MarkdownEditor(text)
function strip(tree, txt) {
let entries = []
const cursor = tree.cursor(0)
if (cursor.name === "HeaderMark" || cursor.name === "ListMark") {
entries.push(["block", "skip"])
entries.push(["children", []])
return Object.fromEntries(entries)
} else if (cursor.name.startsWith("ATXHeading")) {
entries.push(["block", "h" + cursor.name.slice(10,11)])
entries.push(["content", txt.slice(cursor.from, cursor.to + 1)])
entries.push(["children", []])
return Object.fromEntries(entries)
} else if (cursor.name === "Paragraph") {
entries.push(["block", "p"])
entries.push(["content", txt.slice(cursor.from, cursor.to + 1)])
entries.push(["children", []])
return Object.fromEntries(entries)
} else if (cursor.name === "BulletList") {
entries.push(["block", "l"])
// console.log("BulletList", cursor);
// console.log("BulletList.name", cursor.name);
// console.log("content", txt.slice(cursor.from, cursor.to + 1));
} else if (cursor.name === "ListItem") {
entries.push(["block", "i"])
// entries.push(["content", txt.slice(cursor.from, cursor.to + 1)])
// console.log("ListItem", cursor);
// console.log("ListItem.name", cursor.name);
// console.log("content", txt.slice(cursor.from, cursor.to + 1));
} else if (cursor.name === "Task") {
entries.push(["block", "t"])
entries.push(["content", txt.slice(cursor.from, cursor.to + 1)])
} else if (cursor.name === "Blockquote") {
entries.push(["block", "q"])
} else {
entries.push(["block", cursor.name])
}
let children = []
if (cursor.firstChild()) {
let go = true;
while (go) {
if (cursor.tree === null) {
console.log("cursor treeBuffer", cursor.buffer.buffer.toString())
} else {
children.push(strip(cursor.tree, txt.slice(cursor.from, cursor.to)))
}
go = cursor.nextSibling()
}
}
entries.push(["children", children])
return Object.fromEntries(entries)
}
import {mdPlus} from "@tmcw/bonus-markdown-flavor"
import { Purescript } from "@jmatsushita/purescript"
viewof localStorage = localStorageView("transform", { defaultValue: current, bindTo: viewof source})
persisted = {
if (navigator.storage && navigator.storage.persist)
{
await navigator.storage.persist()
let isPersisted = await navigator.storage.persisted();
return `isPersisted: ${isPersisted}`
} else { return "not" }
}
{ if (navigator.storage && navigator.storage.estimate) {
const storageEstimate = await navigator.storage.estimate();
const availableSpace = storageEstimate.quota > storageEstimate.usage ? storageEstimate.quota - storageEstimate.usage : 0;
return `${JSON.stringify(storageEstimate)} ${availableSpace}`
}
}
{
let persistent, result
if (navigator.storage && navigator.storage.persisted) {
persistent = await navigator.storage.persisted();
if (!persistent && navigator.storage.persist)
result = await navigator.storage.persist();
}
return {persistent,result}
}
storage = {
const storage = window.localStorage;
const key = "__storage_test__";
storage.setItem(key, key);
storage.removeItem(key);
return storage;
}
//storage.setItem("save", "me")
storage.getItem("save")
storage.getItem("transform")
document
// Inputs.bind(viewof editor, viewof source)
compilation = await Purescript(source, {compilerUrl: "http://127.0.0.1:8080"})
spine(blockyTree)
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.
