esdom
DEMO
Build up DOM from AST or AST from DOM. Just because DOM is something more familiar to web-developers than AST, though there are tools like esquery or ast-types. ESDOM is forward-compatible with esquery, so everything is done via esdom can be painlessly refactored to use esquery.
Works both in browsers and node.
$ npm install esdom
var esdom = ;var esprima = ;var escodegen = ; var ast = esprima; var el = esdom;el;ast = esdom; escodegen;
Mapping nodes
Mapping is done to be compatible with ESQuery selectors as much as possible.
Let’s take an examplary source:
var a = 1;
AST for the source will be:
And resulting HTML:
So all esquery css selectors work just fine with that html, with some exceptions:
:first-child
and:last-child
selectors always return non-empty result, where esquery may return nothing. For example, selectorVariableDeclarator > Identifier:first-child
returns<Identifier>
, where esquery returnsnull
.- Nested attribute selector should be replaced with subject indicator (or :has):
[attr.subAttr=xyz]
→![attr] > [subAttr=xyz]
- To select custom esquery pseudos like
:statement
, it is recommended to useesdom/query
, otherwise it should be replaced with natural DOM class.Statement
. - Regular expression and conditional selectors should be replaced with according css selectors.
In all other regards it works just the same.
Notes
- esquery is inable to select list of nodes, like all function params, or all function body statements. With esdom you can do
.Function > [prop="params"]
. - esdom might be somewhat slow in browsers due to using browser API. In node, DOM is emulated via dom-lite, so it’s times faster.
- esdom work only with ES5.
Analysis
ESDOM also provides helpful scope/variable analysis, marking nodes with additional data-
attributes. To analyze DOM, call esdom.analyze(dom)
, and it will set attributes:
Attribute | Description |
---|---|
data-scope=<id> |
Scope indicator |
data-scope-global |
Global scope flag |
data-scope-parent=<scope-id> |
Parent scope id |
data-variable=<id> |
Variable indicator with unique id |
data-variable-declaration |
Variable declaration flag |
data-variable-scope=<scope-id> |
Variable holding scope |
API
Method | Description |
---|---|
.toDOM(ast) |
Convert AST to DOM element. |
.toAST(element) |
Build AST from DOM element. |
.analyze(element) |
Mark up AST nodes |