Separate inline and collapsed into separate things

tc39 · Oct 12, 2015 · d9b88b5 · d9b88b5
1 parent 0b2a2b8
commit d9b88b5
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 18 deletions.
diff --git a/css/elements.css b/css/elements.css
@@ -115,15 +115,20 @@ emu-production {
 }
 
 
-emu-grammar.inline emu-production, emu-production.inline {
-    display: inline;
+emu-grammar.inline, emu-production.inline,
+emu-grammar.inline emu-production emu-rhs, emu-production.inline emu-rhs {
+  display: inline;
+}
+
+emu-grammar[collapsed] emu-production, emu-production[collapsed] {
     margin: 0;
 }
 
-emu-grammar.inline emu-production emu-rhs, emu-production.inline emu-rhs {
+emu-grammar[collapsed] emu-production emu-rhs, emu-production[collapsed] emu-rhs {
     display: inline;
     padding-left: 1ex;
 }
+
 emu-constraints {
     font-size: .75em;
     margin-right: 1ex;

diff --git a/lib/Grammar.js b/lib/Grammar.js
@@ -4,6 +4,7 @@ const Builder = require('./Builder');
 const gmd = require('grammarkdown');
 const GrammarFile = gmd.Grammar;
 const EmitFormat = gmd.EmitFormat;
+const uncollapsedRe = /:.*\r?\n.*[^\s]+.*(\r?\n|$)/;
 
 const gmdCompile = function (text) {
   let out;
@@ -17,6 +18,12 @@ const gmdCompile = function (text) {
 
 module.exports = class Grammar extends Builder {
   build() {
+    const content = this.node.textContent;
+    // hack until grammarkdown supports collapsed productions
+    if (!content.match(uncollapsedRe)) {
+      this.node.setAttribute('collapsed', '');
+    }
+
     this.node.innerHTML = gmdCompile(this.node.textContent);
   }
 };
diff --git a/lib/ProdRef.js b/lib/ProdRef.js
@@ -1,6 +1,7 @@
 'use strict';
 
 let Builder = require('./Builder');
+let Production = require('./Production');
 
 module.exports = class ProdRef extends Builder {
   build() {
@@ -12,6 +13,14 @@ module.exports = class ProdRef extends Builder {
       return;
     }
 
+    if (Production.shouldInline(this)) {
+      const cls = this.node.getAttribute('class') || '';
+
+      if (cls.indexOf('inline') === -1) {
+        this.node.setAttribute('class', cls + ' inline');
+      }
+    }
+
     if (this.node.hasAttribute('a')) {
       if (!prod.rhsesById[this.node.getAttribute('a')]) {
         console.error('Could not find alternative ' + this.node.getAttribute('a') + ' of production ' + prod.name);
@@ -32,6 +41,7 @@ module.exports = class ProdRef extends Builder {
       copy = prod.node.cloneNode(true);
     }
 
+
     this.node.parentNode.replaceChild(copy, this.node);
 
     // copy attributes over (especially important for 'class').
@@ -42,5 +52,6 @@ module.exports = class ProdRef extends Builder {
         copy.setAttribute(attr.name, attr.value);
       }
     }
+
   }
 };
diff --git a/lib/Production.js b/lib/Production.js
@@ -1,5 +1,4 @@
 'use strict';
-
 const RHS = require('./RHS');
 const GrammarAnnotation = require('./GrammarAnnotation');
 const NonTerminal = require('./NonTerminal');
@@ -85,5 +84,25 @@ module.exports = class Production extends Builder {
     if (this.primary) {
       this.node.setAttribute('id', this.id);
     }
+
+
+    if (Production.shouldInline(this)) {
+      const cls = this.node.getAttribute('class') || '';
+
+      if (cls.indexOf('inline') === -1) {
+        this.node.setAttribute('class', cls + ' inline');
+      }
+    }
+  }
+
+  static shouldInline(prod) {
+    let parent = prod.node.parentNode;
+
+    if (parent.nodeName === 'EMU-GRAMMAR') {
+      parent = parent.parentNode;
+    }
+
+    return ['EMU-ANNEX', 'EMU-CLAUSE', 'EMU-INTRO', 'BODY'].indexOf(parent.nodeName) === -1;
   }
 };
+
diff --git a/spec/index.html b/spec/index.html
@@ -448,16 +448,23 @@ <h2>Examples</h2>
   <emu-clause id="emu-grammar">
     <h1>emu-grammar</h1>
     <p>Text inside emu-grammar elements is parsed using <a href="https://github.com/rbuckton/grammarkdown">Grammarkdown</a>. The syntax is essentially identical to the notational conventions in ECMAScript (minus formatting). See the <a href="https://github.com/rbuckton/grammarkdown">Grammarkdown readme</a>.</p>
+    <p>Grammar will be displayed as an "inline" element flowing with text unless it is the immediate child of an emu-clause-like element.</p>
+    <h2>Attributes</h2>
+    <p><b>collapsed:</b> If present, production is displayed in collapsed format with LHS and RHS on the same line.</p>
+    <p><b>collapsed:</b> If present, production is displayed in collapsed format with LHS and RHS on the same line.</p>
   </emu-clause>
 
   <emu-clause id="emu-production">
     <h1>emu-production</h1>
     <p>This is the top level element that contains all grammar productions. Each production MUST include at least one right-hand side (see <a href="#emu-rhs">emu-rhs</a>).</p>
+    <p>The production will be displayed as an "inline" element flowing with text unless it is the immediate child of an emu-clause-like element or if its containing emu-grammar element is an immediate child of an emu-clause-like element.</p>
+    <h2>Attributes</h2>
     <h2>Attributes</h2>
     <p><b>Name:</b> Required. Name of the production (i.e. the non-terminal on the LHS).</p>
     <p><b>Params:</b> Parameters for this production. Multiple parameters separated by commas.</p>
     <p><b>Type:</b> Type of production, either "lexical" or "regexp". Default is blank (normal).</p>
     <p><b>oneof:</b> If present, production is a one-of production. See DecimalDigit example above.</p>
+    <p><b>collapsed:</b> If present, production is displayed in collapsed format with LHS and RHS on the same line.</p>
   </emu-clause>
 
   <emu-clause id="emu-rhs">

diff --git a/test/test.html b/test/test.html
@@ -1,6 +1,6 @@
 <!doctype html>
 <meta charset="utf-8">
-<link rel="stylesheet" href="./ecmarkup.css">
+<link rel="stylesheet" href="css/elements.css">
 <script src="ecmarkup.js"></script>
 <pre class="metadata">
 title:     Ecmarkup Test Document
@@ -71,10 +71,13 @@ <h1>Sub Clause</h1>
     <emu-rhs><emu-nt>ExpressionStatement</emu-nt></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>
+  <p>
+    Inline production:
+    <emu-production name="Identifier" type="lexical" collapsed>
+      <emu-rhs><emu-nt>IdentifierName</emu-nt> <emu-gmod>but not
+      <emu-nt>ReservedWord</emu-nt></emu-gmod></emu-rhs>
+    </emu-production>
+  </p>
 
   <emu-production name="EnumDeclaration">
     <emu-rhs>
@@ -102,6 +105,7 @@ <h1>Sub Clause</h1>
   </emu-grammar>
 
   <emu-prodref name="FooBar" a="a"></emu-prodref>
+  <p>Inline prodref: <emu-prodref name="FooBar" a="a" collapsed></emu-prodref></p>
 
   <pre><code class="language-javascript">
     function test() { };
@@ -111,6 +115,9 @@ <h1>Sub Clause</h1>
   <emu-xref href="#Bar">With link text</emu-xref>
   <emu-xref href="#Bar"></emu-xref>
   <emu-xref href="#Bar" title></emu-xref>
+
+  <!-- test block collapsed emu-grammar -->
+  <emu-grammar>FunctionDeclaration : `function` BindingIdentifier `(` FormalParameters `)` `{` FunctionBody `}`</emu-grammar>
 </emu-clause>
 
 <emu-annex>

diff --git a/test/test.html.baseline b/test/test.html.baseline
@@ -1,6 +1,6 @@
 <!doctype html>
 <head><meta charset="utf-8">
-<link rel="stylesheet" href="./ecmarkup.css">
+<link rel="stylesheet" href="css/elements.css">
 <script src="ecmarkup.js"></script>
 <title>Ecmarkup Test Document</title></head><body><div id="menu-toggle">☰</div><div id="menu"><div id="menu-toc"><ol class="toc"><li><span class="item-toggle">◢</span><a href="#" title="Intro"><span class="secnum"></span> Intro</a><ol class="toc"><li><span class="item-toggle-none"></span><a href="#" title="Sub Intro"><span class="secnum"></span> Sub Intro</a></li></ol></li><li><span class="item-toggle">◢</span><a href="#" title="Clause Foo(_a_, _b_)"><span class="secnum">1</span> Clause Foo(<var>a</var>, <var>b</var>)</a><ol class="toc"><li><span class="item-toggle-none"></span><a href="#Foo" title="Sub Clause"><span class="secnum">1.1</span> Sub Clause</a></li><li><span class="item-toggle-none"></span><a href="#Bar" title="Sub Clause"><span class="secnum">1.2</span> Sub Clause</a></li><li><span class="item-toggle">◢</span><a href="#Baz" title="Header"><span class="secnum">1.3</span> Header</a><ol class="toc"><li><span class="item-toggle-none"></span><a href="#import3" title="Import 3"><span class="secnum">1.3.1</span> Import 3</a></li></ol></li></ol></li><li><span class="item-toggle-none"></span><a href="#" title="Annex"><span class="secnum">A</span> Annex</a></li></ol></div></div><h1 class="version">Draft 1 / September 26, 2015</h1><h1 class="title">Ecmarkup Test Document</h1>
 <emu-intro>
@@ -70,10 +70,14 @@
     <emu-rhs><emu-nt><a href="#prod-ExpressionStatement">ExpressionStatement</a><emu-mods></emu-mods></emu-nt></emu-rhs>
   </emu-production>
 
-  <emu-production name="Identifier" type="lexical" id="prod-Identifier">
-    <emu-nt><a href="#prod-Identifier">Identifier</a><emu-mods></emu-mods></emu-nt><emu-geq>::</emu-geq><emu-rhs><emu-nt><a href="http://www.ecma-international.org/ecma-262/6.0/index.html#prod-IdentifierName">IdentifierName</a><emu-mods></emu-mods></emu-nt><emu-gmod>but not
-    <emu-nt><a href="http://www.ecma-international.org/ecma-262/6.0/index.html#prod-ReservedWord">ReservedWord</a><emu-mods></emu-mods></emu-nt></emu-gmod></emu-rhs>
-  </emu-production>
+  <p>
+    Inline production:
+
+    <emu-production name="Identifier" type="lexical" collapsed="" id="prod-Identifier" class=" inline">
+      <emu-nt><a href="#prod-Identifier">Identifier</a><emu-mods></emu-mods></emu-nt><emu-geq>::</emu-geq><emu-rhs><emu-nt><a href="http://www.ecma-international.org/ecma-262/6.0/index.html#prod-IdentifierName">IdentifierName</a><emu-mods></emu-mods></emu-nt><emu-gmod>but not
+      <emu-nt><a href="http://www.ecma-international.org/ecma-262/6.0/index.html#prod-ReservedWord">ReservedWord</a><emu-mods></emu-mods></emu-nt></emu-gmod></emu-rhs>
+    </emu-production>
+  </p>
 
   <emu-production name="EnumDeclaration" id="prod-EnumDeclaration">
     <emu-nt><a href="#prod-EnumDeclaration">EnumDeclaration</a><emu-mods></emu-mods></emu-nt><emu-geq>:</emu-geq><emu-rhs><emu-t optional="">const<emu-mods><emu-opt>opt</emu-opt></emu-mods></emu-t><emu-t>enum</emu-t><emu-nt><a href="#prod-Identifier">Identifier</a><emu-mods></emu-mods></emu-nt><emu-t>{</emu-t><emu-nt optional="">EnumBody<emu-mods><emu-opt>opt</emu-opt></emu-mods></emu-nt><emu-t>}</emu-t></emu-rhs>
@@ -84,10 +88,10 @@
     <emu-nt><a href="#prod-Identifier">Identifier</a><emu-mods></emu-mods></emu-nt><emu-geq>::</emu-geq><emu-rhs><emu-t>DummyIdentifier</emu-t></emu-rhs>
   </emu-production>
 
-  <emu-production name="Identifier" type="lexical" id="prod-Identifier">
-    <emu-nt><a href="#prod-Identifier">Identifier</a><emu-mods></emu-mods></emu-nt><emu-geq>::</emu-geq><emu-rhs><emu-nt><a href="http://www.ecma-international.org/ecma-262/6.0/index.html#prod-IdentifierName">IdentifierName</a><emu-mods></emu-mods></emu-nt><emu-gmod>but not
-    <emu-nt><a href="http://www.ecma-international.org/ecma-262/6.0/index.html#prod-ReservedWord">ReservedWord</a><emu-mods></emu-mods></emu-nt></emu-gmod></emu-rhs>
-  </emu-production>
+  <emu-production name="Identifier" type="lexical" collapsed="" id="prod-Identifier" class=" inline">
+      <emu-nt><a href="#prod-Identifier">Identifier</a><emu-mods></emu-mods></emu-nt><emu-geq>::</emu-geq><emu-rhs><emu-nt><a href="http://www.ecma-international.org/ecma-262/6.0/index.html#prod-IdentifierName">IdentifierName</a><emu-mods></emu-mods></emu-nt><emu-gmod>but not
+      <emu-nt><a href="http://www.ecma-international.org/ecma-262/6.0/index.html#prod-ReservedWord">ReservedWord</a><emu-mods></emu-mods></emu-nt></emu-gmod></emu-rhs>
+    </emu-production>
   <emu-production name="ArgumentList" id="prod-ArgumentList" a="a">
     <emu-nt><a href="#prod-ArgumentList">ArgumentList</a><emu-mods></emu-mods></emu-nt><emu-geq>:</emu-geq><emu-rhs a="a"><emu-nt><a href="http://www.ecma-international.org/ecma-262/6.0/index.html#prod-AssignmentExpression">AssignmentExpression</a><emu-mods></emu-mods></emu-nt></emu-rhs></emu-production>
 
@@ -98,6 +102,8 @@
 
   <emu-production name="FooBar" params="Yeild" type="lexical" id="prod-FooBar" a="a">
     <emu-nt params="Yeild"><a href="#prod-FooBar">FooBar</a><emu-mods><emu-params>[Yeild]</emu-params></emu-mods></emu-nt><emu-geq>::</emu-geq><emu-rhs a="a" constraints="+Default"><emu-constraints>[+Default]</emu-constraints><emu-t>foo</emu-t><emu-nt params="?Yield">Bar<emu-mods><emu-params>[?Yield]</emu-params></emu-mods></emu-nt></emu-rhs></emu-production>
+  <p>Inline prodref:  <emu-production name="FooBar" params="Yeild" type="lexical" id="prod-FooBar" a="a" collapsed="" class=" inline">
+    <emu-nt params="Yeild"><a href="#prod-FooBar">FooBar</a><emu-mods><emu-params>[Yeild]</emu-params></emu-mods></emu-nt><emu-geq>::</emu-geq><emu-rhs a="a" constraints="+Default"><emu-constraints>[+Default]</emu-constraints><emu-t>foo</emu-t><emu-nt params="?Yield">Bar<emu-mods><emu-params>[?Yield]</emu-params></emu-mods></emu-nt></emu-rhs></emu-production></p>
 
   <pre><code class="language-javascript hljs">
     <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test</span>(<span class="hljs-params"></span>) </span>{ };
@@ -107,6 +113,11 @@
   <emu-xref href="#Bar"><a href="#Bar">With link text</a></emu-xref>
   <emu-xref href="#Bar"><a href="#Bar">1.2</a></emu-xref>
   <emu-xref href="#Bar" title=""><a href="#Bar">Sub Clause</a></emu-xref>
+
+  <!-- test block collapsed emu-grammar -->
+  <emu-grammar collapsed=""><emu-production name="FunctionDeclaration" id="prod-FunctionDeclaration">
+    <emu-nt><a href="#prod-FunctionDeclaration">FunctionDeclaration</a><emu-mods></emu-mods></emu-nt><emu-geq>:</emu-geq><emu-rhs a="81739a57"><emu-t>function</emu-t><emu-nt><a href="http://www.ecma-international.org/ecma-262/6.0/index.html#prod-BindingIdentifier">BindingIdentifier</a><emu-mods></emu-mods></emu-nt><emu-t>(</emu-t><emu-nt><a href="http://www.ecma-international.org/ecma-262/6.0/index.html#prod-FormalParameters">FormalParameters</a><emu-mods></emu-mods></emu-nt><emu-t>)</emu-t><emu-t>{</emu-t><emu-nt><a href="http://www.ecma-international.org/ecma-262/6.0/index.html#prod-FunctionBody">FunctionBody</a><emu-mods></emu-mods></emu-nt><emu-t>}</emu-t></emu-rhs>
+</emu-production></emu-grammar>
 </emu-clause>
 
 <emu-annex>