@emmetio/abbreviation
v2.3.3
Published
Emmet standalone abbreviation parser
Downloads
1,339,161
Readme
Emmet markup abbreviation parser
Parses given Emmet markup abbreviation into AST. Parsing is performed in two steps: first it tokenizes given abbreviation (useful for syntax highlighting in editors) and then tokens are analyzed and converted into AST nodes as plain, JSON-serializable objects.
Note that AST tree in most cases cannot be used directly for output: for example, AST node produced from .foo.bar
element misses element name and contains two class
attributes with foo
and bar
values (not a single class
with foo bar
value).
Usage
You can install it via npm:
npm install @emmetio/abbreviation
Then add it into your project:
import parse from '@emmetio/abbreviation';
const tree = parse('div#foo>span.bar*3');
/* {
type: 'Abbreviation',
children: [{
type: 'AbbreviationNode',
name: 'div',
attributes: [...],
children: [...]
}]
} */
The returned tree contains AbbreviationNode
items: a node with name, attributes and/or text content. E.g. an element that can be represented somehow. Repeated and grouped nodes like a>(b+c)*3
are automatically converted and duplicated as distinct AbbreviationNode
with distinct .repeat
property which identifies node in repeating sequence.
Abbreviation syntax
Emmet abbreviation element has the following basic parts:
name.class#id[attributes?, ...]{text value}*repeater/
name
— element name, likediv
,span
etc. Stored asnode.name
property.[attributes]
— list of attributes. Each attribute is stored asAbbreviationAttribute
instance and can be accessed bynode.getAttribute(name)
. Each attribute can be written in different formats:attr
— attribute with empty value.attr=value
— attribute with value. Thevalue
may contain any character except space or]
.attr="value"
orattr='value'
— attribute with value in quotes. Quotes are automatically removed. Expression values likeattr={value}
are supported and can be identified byvalueType: "expression"
property.attr.
— boolean attribute, e.g. attribute without value, likerequired
in<input>
.!attr
– implicit attribute, will be outputted if its value is not empty. Used as a placeholder to preserve attribute order in output../non/attr/value
— value for default attribute. In other words, anything that doesn’t match a attribute name characters. Can be a single- or double-quotted as well. Default attribute is stored withnull
as name and should be used later, for example, to resolve predefined attributes.
.class
— shorthand forclass
attribute. Note that an element can have multiple classes, like.class1.class2.class3
.#id
— shorthand forid
attribute.{text}
— node’s text content*N
— element repeater, tells parser to createN
copies of given node./
— optional self-closing operator. Marks element withnode.selfClosing = true
.
Operators
Each element of abbreviation must be separated with any of these operators:
elem1+elem2>elem3
+
— sibling operator, adds next element as a next sibling of current element in tree.>
— child operator, adds next element as a child of current element.^
— climb-up operator, adds next element as a child of current element’s parent node. Multiple climb-up operators are allowed, each operator moves one level up by tree.
Groups
A set of elements could be grouped using ()
, mostly for repeating and for easier elements nesting:
a>(b>c+d)*4+(e+f)
Groups can be optionally concatenated with +
operator.