Marcelle Rusu (they/them)
07/11/2023, 1:48 PMdocument.body
which is the coil AST:
{type: :property_lookup, lhs: {type: :id_lookup, name: "document"}, property: "body"}
Turns into:
<div data-kind="property_lookup">
<div data-attr="lhs">
<div data-kind="id_lookup">
<div data-attr="name" contenteditable>document</div>
</div>
</div>
<div data-attr="property" contenteditable>body</div>
</div>
And now we can easily query this expression with css selectors. So all the syntax highlighting AND formatting is done in css. It also means that static analysis can be done using querySelector.David Alan Hjelle
07/11/2023, 9:32 PMMarcelle Rusu (they/them)
07/11/2023, 9:51 PMfn lint-unused-variables {
let ids = document.querySelectorAll("
[data-kind=let] >
[data-attr=assign_expr]
[data-text]")
::map(:textContent)
::into(Set[])
document.querySelectorAll("[data-kind=id_lookup] [data-text]")
::reject(:textContent ids)
::each($.setAttribute["data-warn", "Use of undefined variable"])
}
Peter Saxton
07/12/2023, 2:47 PMMarcelle Rusu (they/them)
07/12/2023, 2:55 PMa.b
to a.b.c
• delete the upcoming node - going from a[0]
to a::first()
is hard/impossible right now
Also there's some awkwardness of dealing with the editor as ast nodes, you can only edit within a leaf node, to move on to the next part you must tab into.
Here's a video, hope it helps.