1 Getting Started

$ npm install -g ecmarkup
$ ecmarkup --help
$ ecmarkup spec.html out.html

2 Options

Build options and document options can be passed in via the command line or specified in the front-matter of your document. There is no bright line separating the two categories, but for purposes of organization, document options are defined as those affecting the observable rendered output content.

3 Stylesheets and Scripts

Ecmarkup requires CSS styles and, if you're using the sidebar table of contents, javascript as well. By default CSS and JS dependencies are inlined into the document. You can override this by setting assets to "none" (for example if you want to manually link to external assets). Passing cssOut and jsOut will write the respective files to disk at the given path.

4 Editorial Conventions

There are a large number of features in Ecmarkup. Detailed documentation can be found in later sections. This section provides a high-level overview of what capabilities are available and when to use them.

There are also a number of elements and corresponding Ecmarkdown syntax to give inline styles to various parts of your document in accordance with ECMAScript conventions. More detail on Ecmarkdown syntax can be found on its readme.

5 Metadata

There are a number of settings that allow customizations or enable generation of boilerplate. To add metadata to your document, use yaml syntax inside a <pre class="metadata"> element somewhere in the root of your document. See Table 1 and Table 2 for a list (or consult --help).

Some metadata can also be passed on the command line, for example --no-toc. Such options take precedence over embedded metadata.

Example

<pre class="metadata">
title: Document 1
toc: false
</pre>

6 Clauses

Clauses are referenced using their id and are numbered automatically based on document position. Ecmarkdown syntax can be used in descendent text nodes as well. Text nodes are parsed as Ecmarkdown Fragments.

<emu-clause id="example-normative-optional" type="abstract operation" normative-optional example>
  <h1>
    ExampleOperation (
      _S_: a String,
      optional _length_: a non-negative integer,
    )
  </h1>
  <dl class="header">
    <dt>description</dt>
    <dd>It returns a List of the code points of the first _length_ grapheme clusters of _S_ using the host environment's current locale, or all code points when _length_ is not present.</dd>
  </dl>
  <p>This clause is normative optional.</p>
</emu-clause>

7 Definitions

Terms can be defined using the <dfn> element. Any uses of that term will be automatically linked to the clause containing the definition, or, if the <dfn> element has an id, to the <dfn> itself. This can be suppressed with the emu-not-ref element.

When the term starts with a lowercase English letter, usages of the term with the first letter capitalized will also link.

Attributes

variants: If present, specifies other variants of the term (such as plural forms). Multiple variants are separated by commas with optional whitespace.

Example

<p>A <dfn id="swordfish" variants="swordfishes,broadbill,broadbills,Xiphias gladius">swordfish</dfn> is a large fish characterized by a long, pointed bill.</p>
<p>The Latin name for swordfishes, <em>Xiphias gladius</em>, comes from the Greek word "ξίφος" (xiphos, "sword") and from the Latin word "gladius" ("sword").</p>

Result

8 Effects

Abstract operations can be marked as having effects that propagate to their invocation sites. Subject to the following rules, calls to such operations are given a class of the effect name prefixed with “e-”. When using markEffects, the CSS includes styling for the "user-code" effect via class name e-user-code that is off by default but can be togged by pressing u.

Within an algorithm, an emu-meta element enclosing an operation invocation can be used to indicate either the origination of effects or the absence of effects using a list of effect names separated by commas with optional whitespace in an effects or suppress-effects attribute (respectively).

1. Let _value_ be ? <emu-meta effects="user-code">_O_.[[Get]]</emu-meta>(_P_, _O_).
1. Let _primValue_ be ? ToPrimitive(_value_, ~number~).
1. Let _stringValue_ be ? <emu-meta suppress-effects="user-code">ToString(_primValue_)</emu-meta>.

Effects do not normally propagate to callsites marked as infallibly non-abrupt with !. Such sites must be manually marked with emu-meta.

When a step or its substeps have effects but those effects should not imply that the containing algorithm has the same effects, propagation may be prevented using a [fence-effects="user-code"] annotation at the begining of the step. This implicitly applies to steps which define abstract closures.

It is also possible to associate effects at the level of an entire operation (for example, because it is not defined with algorithm steps) by adding to its structured header an effects entry.

Example

<emu-clause id="sec-effect" type="abstract operation">
  <h1>Effect ()</h1>
  <dl class="header"></dl>
  <emu-alg>
    1. <emu-meta effects="user-code">Call user code.</emu-meta>
  </emu-alg>
</emu-clause>

<emu-clause id="sec-transitive-effect" type="abstract operation">
  <h1>TransitiveEffect ()</h1>
  <dl class="header"></dl>
  <emu-alg>
    1. Perform Effect().
  </emu-alg>
</emu-clause>

Result

9 emu-alg

Algorithm steps. Should not contain any HTML. The node's textContent is parsed as an Ecmarkdown document. Additionally, calls to abstract operations inside algorithm steps are automatically linked to their definitions by first checking for any clauses or algorithms with the appropriate aoid in the current spec, and afterwards checking any linked bibliography files.

Algorithm steps can be annotated with additional metadata as summarized in Table 5.

Attributes

example: If present, the element is an example.

replaces-step: If present, references a step to replace by its id (whose numbering the algorithm adopts).

Example

<emu-alg>
  1. Let _length_ be 0.
  1. Let _node_ be this |ListNode|.
  1. Repeat, while _node_ is not *undefined*,
    1. Set _node_ to NextNode of _node_.
    1. [id="step-example-label"] Set _length_ to _length_ + 1.
  1. Return _length_.
</emu-alg>
<p>The following is an alernative definition of step <emu-xref href="#step-example-label"></emu-xref>.</p>
<emu-alg replaces-step="step-example-label">
  1. Set _length_ to _length_ + 1.
  1. Let _weight_ be GetWeight of _node_.
  1. If _length_ = 10<sup>9</sup> or _weight_ > 2<sup>_length_ + 1</sup>, then
    1. NOTE: This is an out-of-bounds state.
    1. If _ignoreErrors_ is not *true*, then
      1. Throw a *RangeError* exception.
    1. Set _hadError_ to *true*.
</emu-alg>

Result

<emu-alg>
  1. [id="step-example-internal"] Let _obj_ be OrdinaryObjectCreate(*null*).
</emu-alg>

<emu-alg>
  1. [declared="x"] Suppose the existence of _x_.
</emu-alg>

10 emu-eqn

An equation, similar to those found in ES6 Year Number.

Attributes

aoid: If present, an abstract operation id defined by this equation.

id: If present, links will go directly to the eqn definition. Otherwise, links go to the parent clause.

11 emu-note

Non-normative explanatory text. Comes in two types - regular notes and Editor's notes. Regular notes are intended for the implementers and end users of this specification. Editor's notes are notes to and from the Editors and will generally be removed prior to a specification being finalized and ratified.

Attributes

type: The type of note, either blank or "editor".

Example

<p>For authentication only, servers and clients MUST support SASL Salted Challenge Response Authentication Mechanism [SCRAM].</p>
<emu-note>But we know you won't.</emu-note>
<emu-note type="editor">This joke brought to you by RFC6919.</emu-note>

Result

12 emu-xref

Cross-reference another clause, production, note, example, abstract operation, or labeled step. If the text content of this element is empty, a suitable default is used. The title attribute controls this default - when present, clauses are referred to using their title rather than number. This also applies to examples which are indexed first by their containing clause and then their example number.

Cross-references to an id check for clauses, productions, examples, and steps in this order. For each type, the local document is consulted before looking for external sources.

Attributes

href: Optional: URL of the target clause, production, or example to cross-reference, interpreted relative to the containing document.

title: Optional: If present, xref will be filled in with the referenced clause's title. Otherwise, the clause's section number is used.

aoid: Optional: aoid of an abstract operation to reference.

One of aoid or href must be specified.

Example

<p>The clause element is specified in <emu-xref href="#emu-clause"></emu-xref>.</p>
<p>See <emu-xref href="#emu-note" title></emu-xref> for information on the emu-note element.</p>
<p>The <emu-xref href="#emu-biblio">biblio element</emu-xref> supports xref to external specs.</p>
<p><emu-xref aoid="Get"></emu-xref> is an abstract operation from ES6</p>
<p><emu-alg>1. [id="step-label-example"] Example labeled step.</emu-alg></p>
<p>You can reference step <emu-xref href="#step-label-example"></emu-xref> like this</p>

Result

13 emu-not-ref

Suppresses automatic linking to definitions.

Example

<div id="not-ref-section-1">
  <p>An <dfn>example</dfn> is used for illustrative purposes.</p>
</div>
<div id="not-ref-section-2">
  <p>When a word defined in another section (or algorithm step) is used, as in this example, it is normally automatically linked to the section containing the definition.</p>
  <p>When such a word should not be automatically linked, for <emu-not-ref>example</emu-not-ref> when using its colloquial definition, it can be wrapped with this tag to surpress the automatic linking.</p>
</div>

Result

14 emu-figure

Creates a figure that can be referenced by emu-xref. Add a caption using a child emu-caption element.

Attributes

informative: Optional: If present, the figure is informative. Otherwise it is normative.

Example

<emu-figure>
  <emu-caption>Example figure<emu-caption>
  [[insert some awesome graphic here, maybe something like figure 2]]
</emu-figure>

Result

15 emu-table

Creates a table that can be referenced by emu-xref. Add a caption using a child emu-caption element.

Attributes

caption: Optional: Caption for the example

informative: Optional: If present, the table is informative. Otherwise it is normative.

Example

<emu-table>
  <emu-caption>Example table<emu-caption>
  <table>
    <tr><th>Column 1</th><th>Column 2</th></tr>
    <tr><td>Value</td><td>Value 2</td></tr>
    <tr><td>Value</td><td>Value 2</td></tr>
    <tr><td>Value</td><td>Value 2</td></tr>
    <tr><td>Value</td><td>Value 2</td></tr>
  </table>
</emu-table>

Result

16 emu-example

Creates an informative example that can be referenced by emu-xref. Examples are numbered based on how many are present in the example's containing clause.

Attributes

caption: Optional: Caption for the example

Example

<emu-example caption="Example Example">
  This is an example.
</emu-example>

<emu-example caption="Another Example Example">
  This is also an example.
</emu-example>

Result

17 emu-biblio

Links a bibliography file. The bibliography file is a JSON document containing URLs for referenced documents along with any algorithms they define.

Attributes

href: Required: URL of the biblio file, interpreted relative to the containing document.

Example

{
  "https://tc39.github.io/ecma262/": [
    {
      "type": "op",
      "id": "sec-returnifabrupt",
      "aoid": "ReturnIfAbrupt"
    },
    {
      "type": "op",
      "id": "sec-get-o-p",
      "aoid": "Get"
    }
  ]
}

<emu-biblio href="./biblio.json"></emu-biblio>
<emu-alg>
1. Let _res_ be Get(_obj_, _key_).
1. ReturnIfAbrupt(_res_).
</emu-alg>

Result

18 emu-grammar

Text inside emu-grammar elements is parsed using Grammarkdown. The syntax is essentially identical to the notational conventions in ECMAScript (minus formatting). See the Grammarkdown readme.

Grammar will be displayed as an inline element flowing with text unless it is the immediate child of an emu-clause-like element.

Attributes

collapsed: If present, productions are displayed in collapsed format with LHS and RHS on the same line.

example: If present, the element is an example.

primary: Optional: Deprecated in favor of type="definition".

type: Optional: Disposition of the grammar. If absent, it is considered to reference productions defined elsewhere.

• "definition": The grammar is an authoritative source for productions which should be the target of references.
• "example": Deprecated in favor of the example attribute.

Example

<p>
  <emu-grammar type="definition" collapsed example>
    HexIntegerLiteral :: `0x` HexDigits
  </emu-grammar>
  is a shorthand for:
</p>
<emu-grammar type="definition" example>
  HexIntegerLiteral :: `0` `x` HexDigits
</emu-grammar>

Result

19 Directly Specifying Grammar

Although discouraged, it is possible to directly specify grammar using the emu-production element and related elements emitted by Grammarkdown.

Lexical Grammar Examples

<emu-production name="DecimalDigit" type="lexical" oneof>
  <emu-rhs>0 1 2 3 4 5 6 7 8 9</emu-rhs>
</emu-production>

<emu-production name="Identifier" type="lexical">
  <emu-rhs><emu-nt>IdentifierName</emu-nt> <emu-gmod>but not
      <emu-nt>ReservedWord</emu-nt></emu-gmod></emu-rhs>
</emu-production>

<emu-production name="SourceCharacter" type="lexical">
  <emu-rhs><emu-gprose>any Unicode code point</emu-gprose></emu-rhs>
</emu-production>

Result

Syntactic Grammar Examples

<emu-production name="ExpressionStatement" params="Yield">
  <emu-rhs>
    <emu-gann>lookahead ∉ { <emu-t>{</emu-t>, <emu-t>function</emu-t>,
        <emu-t>class</emu-t>, <emu-t>let [</emu-t> }</emu-gann>
  </emu-rhs>
</emu-production>

<emu-production name="IterationStatement">
  <emu-rhs>for ( <emu-nt>LexicalDeclaration</emu-nt> ; <emu-nt optional>Expression</emu-nt> ;
  <emu-nt optional>Expression</emu-nt> ) <emu-nt>Statement</emu-nt></emu-rhs>
</emu-production>

<emu-production name="StatementList" params="Return, In">
  <emu-rhs constraints="~Return"><emu-nt>ReturnStatement</emu-nt></emu-rhs>
  <emu-rhs><emu-nt>ExpressionStatement</emu-nt></emu-rhs>
</emu-production>

Result

<emu-rhs>a b c</emu-rhs>
<emu-rhs><emu-t>a</emu-t> <emu-t>b</emu-t> <emu-t>c</emu-t></emu-rhs>

20 emu-import

Imports are treated specially in an ecmarkup document. Every import is inlined into its parent document at the location of the import tag. This is useful for breaking your spec document up into many smaller pieces.

Attributes

href: Required: URL of the document to import, interpreted relative to the document containing the emu-import.

21 Other Styles & Conventions

ECMAScript <del>6</del><ins>2015</ins> <del>will be ratified</del><ins>was ratified</ins> in June, 2015.

<emu-production name="HoistableDeclaration">
  <emu-rhs><emu-nt>FunctionDeclaration</emu-nt></emu-rhs>
  <emu-rhs><emu-nt>GeneratorDeclaration</emu-nt></emu-rhs>
  <ins class="block"><emu-rhs><emu-nt>AsyncFunctionDeclaration</emu-nt></emu-rhs></ins>
</emu-production>