├── .gitattributes
├── .github
    └── workflows
    │   └── build.yml
├── .gitignore
├── .npmrc
├── LICENSE
├── README.md
├── cover.png
├── index.html
├── package.json
└── spec.emu


/.gitattributes:
--------------------------------------------------------------------------------
1 | index.html  -diff merge=ours
2 | spec.js     -diff merge=ours
3 | spec.css    -diff merge=ours
4 | 


--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy spec
 2 | 
 3 | on: [push]
 4 | 
 5 | jobs:
 6 |   build:
 7 |     runs-on: ubuntu-latest
 8 | 
 9 |     steps:
10 |     - uses: actions/checkout@v2
11 |     - uses: actions/setup-node@v1
12 |       with:
13 |         node-version: '12.x'
14 |     - run: npm install
15 |     - run: npm run build
16 |     - name: commit changes
17 |       uses: elstudio/actions-js-build/commit@v3
18 |       with:
19 |         commitMessage: "fixup: [spec] `npm run build`"
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # nyc test coverage
18 | .nyc_output
19 | 
20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
21 | .grunt
22 | 
23 | # node-waf configuration
24 | .lock-wscript
25 | 
26 | # Compiled binary addons (http://nodejs.org/api/addons.html)
27 | build/Release
28 | 
29 | # Dependency directories
30 | node_modules
31 | jspm_packages
32 | 
33 | # Optional npm cache directory
34 | .npm
35 | 
36 | # Optional REPL history
37 | .node_repl_history
38 | 
39 | # Only apps should have lockfiles
40 | yarn.lock
41 | package-lock.json
42 | npm-shrinkwrap.json
43 | pnpm-lock.yaml
44 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | package-lock=false
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 ECMA TC39 and contributors
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Reversible string split
  2 | 
  3 | ![](./cover.png)
  4 | 
  5 | <small>Image from
  6 | <a href="https://twitter.com/DasSurma/status/1480555236473384964">@DasSurma</a></small>
  7 | 
  8 | ## Status
  9 | 
 10 | Champion(s): Luca Casonato
 11 | 
 12 | Author(s): Luca Casonato
 13 | 
 14 | Stage: 1
 15 | 
 16 | ## Motivation
 17 | 
 18 | The string split method in JavaScript behaves unlike the string split methods in
 19 | nearly all other languages. In JavaScript, a `split(sep, N)` is essentially a
 20 | regular split, but with the output array truncated to the first N values.
 21 | JavaScript considers the N to mean the number of splits _and_ the number of
 22 | return items.
 23 | 
 24 | In most other languages a `splitN` instead splits the original string into N
 25 | items, including a remainder. They thus split N-1 times. The last item in the
 26 | returned array contains the "remainder" of the string.
 27 | 
 28 | ```perl
 29 | # Perl
 30 | 
 31 | print join('\n', split(/\|/, 'a|b|c|d|e|f', 2))
 32 | 
 33 | # a
 34 | # b|c|d|e|f
 35 | ```
 36 | 
 37 | ```php
 38 | <!-- PHP -->
 39 | <?php
 40 | 
 41 | print join("\n", explode("|", "a|b|c|d|e|f", 2));
 42 | 
 43 | # a
 44 | # b|c|d|e|f
 45 | ```
 46 | 
 47 | ```ruby
 48 | # Ruby
 49 | 
 50 | print 'a|b|c|d|e|f'.split('|', 2)
 51 | 
 52 | # ["a", "b|c|d|e|f"]
 53 | ```
 54 | 
 55 | ```go
 56 | // Go
 57 | 
 58 | package main
 59 | 
 60 | import (
 61 |   "fmt"
 62 |   "strings"
 63 | )
 64 | 
 65 | func main() {
 66 |   fmt.Printf("%#v", strings.SplitN("a|b|c|d|e|f", "|", 2))
 67 | }
 68 | 
 69 | // []string{"a", "b|c|d|e|f"}
 70 | ```
 71 | 
 72 | ```rust
 73 | // Rust
 74 | 
 75 | fn main() {
 76 |   let v = "a|b|c|d|e|f".splitn(2, "|").collect::<Vec<_>>();
 77 |   println!("{:?}", v);
 78 | }
 79 | 
 80 | // ["a", "b|c|d|e|f"]
 81 | ```
 82 | 
 83 | ```java
 84 | // Java
 85 | 
 86 | class Playground {
 87 |   public static void main(String[] args) {
 88 |     String s = new String("a|b|c|d|e|f");
 89 |     for(String val : s.split("\\|", 2)) {
 90 |       System.out.println(val);
 91 |     }
 92 |   }
 93 | }
 94 | 
 95 | // a
 96 | // b|c|d|e|f
 97 | ```
 98 | 
 99 | ```python
100 | # Python
101 | 
102 | print('a|b|c|d|e|f'.split('|', 2))
103 | 
104 | # ['a', 'b', 'c|d|e|f']
105 | ```
106 | 
107 | ```js
108 | // JavaScript
109 | 
110 | console.log("a|b|c|d|e|f".split("|", 2));
111 | 
112 | // ["a", "b"]
113 | ```
114 | 
115 | The first 6/8 languages agree here. They consider the N to mean "the number of
116 | items returned" and the remainder to be the last item in the returned array.
117 | This means they actually split N-1 times.
118 | 
119 | Python also agree that the remainder should be returned as the last item in the
120 | array. It disagrees with the rest about what N means though. Python splits N
121 | times, and returns N+1 items.
122 | 
123 | JavaScript diverges from the pack completely though: it splits N times, and
124 | returns N items, but does not return a remainder at all. It is the only language
125 | to do so.
126 | 
127 | Even though Python and the other langauges are slightly different from each
128 | other, all their algorithms have a common feature that JavaScript is missing:
129 | their splits are reversible. This means that if you split a string into N items,
130 | you can join them back together without losing any information.
131 | 
132 | Reversible splits have the property that for any string V and any seperator S
133 | and any unsigned non 0 integer N, the following is valid:
134 | 
135 | ```js
136 | join(S, V.split(S, N)) == V;
137 | ```
138 | 
139 | This reversability allows using string splits for some very useful tasks, where
140 | the current split method does not work. The most common use case for this are
141 | prefix splits:
142 | 
143 | ### Prefix splits
144 | 
145 | Many formats out there are character delimited. It is useful to be able to
146 | easially split a string at those predefined "split points" into two parts. For
147 | example the INI file format uses the `=` character to separate key-value pairs,
148 | and the `\n` character to separate key-value pairs from each other.
149 | 
150 | ```ini
151 | key = value
152 | other_key = 'value contains an = sign'
153 | ```
154 | 
155 | With the current "split" in JavaScript, parsing this is not as obvious as with
156 | the "more popular" splitting algorithm:
157 | 
158 | ```js
159 | // Current JavaScript
160 | const ini = Deno.readTextFileSync("./test.ini");
161 | const entries = ini.split("\n").map((line) => {
162 |   const [key, ...rest] = line.split("=");
163 |   return [key, rest.join("=")];
164 | });
165 | 
166 | // Other languages
167 | const ini = Deno.readTextFileSync("./test.ini");
168 | const entries = ini.split("\n").map((line) => line.splitN("=", 2));
169 | ```
170 | 
171 | > **Note:** I am aware this could be made more efficient with a different
172 | > "parser". That is not the point. The point is to make the obvious thing easy.
173 | 
174 | This behaviour is not just relevant for the INI file format, but also for things
175 | like HTTP headers in HTTP/1.1, key value pairs in `Cookie` headers, and many
176 | more.
177 | 
178 | ## Proposal
179 | 
180 | The proposal is to add reversible string split support to JavaScript. This
181 | propsal proposes the addition of a `String.prototype.splitN` method that splits
182 | the input string at most N-1 times, returning N substrings. The last item
183 | contains the remainder of the string.
184 | 
185 | ```js
186 | console.log("a|b|c|d|e|f".splitN("|", 2));
187 | // ["a", "b|c|d|e|f"]
188 | ```
189 | 
190 | The naming is taken from Rust and Go.
191 | 
192 | ## Q&A
193 | 
194 | ### Could this be an extra option for the `split` method?
195 | 
196 | Yes. This could also be an option in a new options bag for split. Example:
197 | 
198 | ```js
199 | console.log("a|b|c|d|e|f".split("|", { n: 2 }));
200 | // or
201 | console.log("a|b|c|d|e|f".split("|", 2, true));
202 | // or
203 | console.log("a|b|c|d|e|f".split("|", { n: 2, remainder: true }));
204 | // or
205 | console.log("a|b|c|d|e|f".split("|", 2, { remainder: true }));
206 | ```
207 | 
208 | The first may be confusing to users though, as it is not obvious that the return
209 | value between `split("|", 2)` and `split("|", { n: 2 })` is different. These
210 | kinds of overloads exist on the web platform (e.g. `addEventListener`), but the
211 | form you use does not impact behaviour.
212 | 
213 | The second is more clear, but at the same time also less clear, because it is
214 | not obvious what the `true` value in the third argument is.
215 | 
216 | The third option is pretty clear, but is also the most verbose. The verbosity
217 | may make it cumbersome to use.
218 | 
219 | The 4th option is probably the "cleanest". Because the extra option is ignored
220 | in current engines, it might make it look like the extra option is supported,
221 | whereas in fact it is not - it is just being ignored.
222 | 
223 | Which of the 4 proposed options should ultimately be used should be up to the
224 | committee as a whole. I don't really care (although I prefer the `splitN`
225 | option).
226 | 
227 | ### I like the current behaviour of split!
228 | 
229 | No worries! It isn't going away. The new `splitN` function is meant to simplify
230 | the usecases described above. You can continue to use `split` as it exists now.
231 | 
232 | ### Why is JavaScript's split so different from other languages?
233 | 
234 | To be completly honest: we don't really know. Nobody we have asked has been able
235 | to give us a good answer yet. What we do know:
236 | 
237 | - Netscape Navigator 4, released in June 1997 was the first browser to support
238 |   the second argument to the `split` method with it's current behaviour. NN3
239 |   released 10 months prior did not have it.
240 | - IE 4, released 4 months later, does not have this feature/behaviour.
241 | - The first ECMA262 version this behaviour is specified is ES3.
242 | - The behaviour did not come from Java. It only added a `String.split` method in
243 |   version 1.4 (2002).
244 | 
245 | Thanks to @hax and @aimingoo for the research on this.
246 | 


--------------------------------------------------------------------------------
/cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tc39/proposal-reversible-string-split/a8936e091a302a1aeeabdd0b931a9af70d8343af/cover.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
   1 | <!doctype html>
   2 | <head><meta charset="utf-8">
   3 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/base16/solarized-light.min.css"><link rel="stylesheet" href="./spec.css">
   4 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/github.min.css">
   5 | <script src="./spec.js"></script>
   6 | <title>Proposal Title Goes Here</title><script>'use strict';
   7 | let sdoBox = {
   8 |   init() {
   9 |     this.$alternativeId = null;
  10 |     this.$outer = document.createElement('div');
  11 |     this.$outer.classList.add('toolbox-container');
  12 |     this.$container = document.createElement('div');
  13 |     this.$container.classList.add('toolbox');
  14 |     this.$displayLink = document.createElement('a');
  15 |     this.$displayLink.setAttribute('href', '#');
  16 |     this.$displayLink.textContent = 'Syntax-Directed Operations';
  17 |     this.$displayLink.addEventListener('click', e => {
  18 |       e.preventDefault();
  19 |       e.stopPropagation();
  20 |       referencePane.showSDOs(sdoMap[this.$alternativeId] || {}, this.$alternativeId);
  21 |     });
  22 |     this.$container.appendChild(this.$displayLink);
  23 |     this.$outer.appendChild(this.$container);
  24 |     document.body.appendChild(this.$outer);
  25 |   },
  26 | 
  27 |   activate(el) {
  28 |     clearTimeout(this.deactiveTimeout);
  29 |     Toolbox.deactivate();
  30 |     this.$alternativeId = el.id;
  31 |     let numSdos = Object.keys(sdoMap[this.$alternativeId] || {}).length;
  32 |     this.$displayLink.textContent = 'Syntax-Directed Operations (' + numSdos + ')';
  33 |     this.$outer.classList.add('active');
  34 |     let top = el.offsetTop - this.$outer.offsetHeight;
  35 |     let left = el.offsetLeft + 50 - 10; // 50px = padding-left(=75px) + text-indent(=-25px)
  36 |     this.$outer.setAttribute('style', 'left: ' + left + 'px; top: ' + top + 'px');
  37 |     if (top < document.body.scrollTop) {
  38 |       this.$container.scrollIntoView();
  39 |     }
  40 |   },
  41 | 
  42 |   deactivate() {
  43 |     clearTimeout(this.deactiveTimeout);
  44 |     this.$outer.classList.remove('active');
  45 |   },
  46 | };
  47 | 
  48 | document.addEventListener('DOMContentLoaded', () => {
  49 |   if (typeof sdoMap == 'undefined') {
  50 |     console.error('could not find sdo map');
  51 |     return;
  52 |   }
  53 |   sdoBox.init();
  54 | 
  55 |   let insideTooltip = false;
  56 |   sdoBox.$outer.addEventListener('pointerenter', () => {
  57 |     insideTooltip = true;
  58 |   });
  59 |   sdoBox.$outer.addEventListener('pointerleave', () => {
  60 |     insideTooltip = false;
  61 |     sdoBox.deactivate();
  62 |   });
  63 | 
  64 |   sdoBox.deactiveTimeout = null;
  65 |   [].forEach.call(document.querySelectorAll('emu-grammar[type=definition] emu-rhs'), node => {
  66 |     node.addEventListener('pointerenter', function () {
  67 |       sdoBox.activate(this);
  68 |     });
  69 | 
  70 |     node.addEventListener('pointerleave', () => {
  71 |       sdoBox.deactiveTimeout = setTimeout(() => {
  72 |         if (!insideTooltip) {
  73 |           sdoBox.deactivate();
  74 |         }
  75 |       }, 500);
  76 |     });
  77 |   });
  78 | 
  79 |   document.addEventListener(
  80 |     'keydown',
  81 |     debounce(e => {
  82 |       if (e.code === 'Escape') {
  83 |         sdoBox.deactivate();
  84 |       }
  85 |     })
  86 |   );
  87 | });
  88 | 
  89 | 'use strict';
  90 | function Search(menu) {
  91 |   this.menu = menu;
  92 |   this.$search = document.getElementById('menu-search');
  93 |   this.$searchBox = document.getElementById('menu-search-box');
  94 |   this.$searchResults = document.getElementById('menu-search-results');
  95 | 
  96 |   this.loadBiblio();
  97 | 
  98 |   document.addEventListener('keydown', this.documentKeydown.bind(this));
  99 | 
 100 |   this.$searchBox.addEventListener(
 101 |     'keydown',
 102 |     debounce(this.searchBoxKeydown.bind(this), { stopPropagation: true })
 103 |   );
 104 |   this.$searchBox.addEventListener(
 105 |     'keyup',
 106 |     debounce(this.searchBoxKeyup.bind(this), { stopPropagation: true })
 107 |   );
 108 | 
 109 |   // Perform an initial search if the box is not empty.
 110 |   if (this.$searchBox.value) {
 111 |     this.search(this.$searchBox.value);
 112 |   }
 113 | }
 114 | 
 115 | Search.prototype.loadBiblio = function () {
 116 |   if (typeof biblio === 'undefined') {
 117 |     console.error('could not find biblio');
 118 |     this.biblio = { refToClause: {}, entries: [] };
 119 |   } else {
 120 |     this.biblio = biblio;
 121 |     this.biblio.clauses = this.biblio.entries.filter(e => e.type === 'clause');
 122 |     this.biblio.byId = this.biblio.entries.reduce((map, entry) => {
 123 |       map[entry.id] = entry;
 124 |       return map;
 125 |     }, {});
 126 |     let refParentClause = Object.create(null);
 127 |     this.biblio.refParentClause = refParentClause;
 128 |     let refsByClause = this.biblio.refsByClause;
 129 |     Object.keys(refsByClause).forEach(clause => {
 130 |       refsByClause[clause].forEach(ref => {
 131 |         refParentClause[ref] = clause;
 132 |       });
 133 |     });
 134 |   }
 135 | };
 136 | 
 137 | Search.prototype.documentKeydown = function (e) {
 138 |   if (e.keyCode === 191) {
 139 |     e.preventDefault();
 140 |     e.stopPropagation();
 141 |     this.triggerSearch();
 142 |   }
 143 | };
 144 | 
 145 | Search.prototype.searchBoxKeydown = function (e) {
 146 |   e.stopPropagation();
 147 |   e.preventDefault();
 148 |   if (e.keyCode === 191 && e.target.value.length === 0) {
 149 |     e.preventDefault();
 150 |   } else if (e.keyCode === 13) {
 151 |     e.preventDefault();
 152 |     this.selectResult();
 153 |   }
 154 | };
 155 | 
 156 | Search.prototype.searchBoxKeyup = function (e) {
 157 |   if (e.keyCode === 13 || e.keyCode === 9) {
 158 |     return;
 159 |   }
 160 | 
 161 |   this.search(e.target.value);
 162 | };
 163 | 
 164 | Search.prototype.triggerSearch = function () {
 165 |   if (this.menu.isVisible()) {
 166 |     this._closeAfterSearch = false;
 167 |   } else {
 168 |     this._closeAfterSearch = true;
 169 |     this.menu.show();
 170 |   }
 171 | 
 172 |   this.$searchBox.focus();
 173 |   this.$searchBox.select();
 174 | };
 175 | // bit 12 - Set if the result starts with searchString
 176 | // bits 8-11: 8 - number of chunks multiplied by 2 if cases match, otherwise 1.
 177 | // bits 1-7: 127 - length of the entry
 178 | // General scheme: prefer case sensitive matches with fewer chunks, and otherwise
 179 | // prefer shorter matches.
 180 | function relevance(result) {
 181 |   let relevance = 0;
 182 | 
 183 |   relevance = Math.max(0, 8 - result.match.chunks) << 7;
 184 | 
 185 |   if (result.match.caseMatch) {
 186 |     relevance *= 2;
 187 |   }
 188 | 
 189 |   if (result.match.prefix) {
 190 |     relevance += 2048;
 191 |   }
 192 | 
 193 |   relevance += Math.max(0, 255 - result.entry.key.length);
 194 | 
 195 |   return relevance;
 196 | }
 197 | 
 198 | Search.prototype.search = function (searchString) {
 199 |   if (searchString === '') {
 200 |     this.displayResults([]);
 201 |     this.hideSearch();
 202 |     return;
 203 |   } else {
 204 |     this.showSearch();
 205 |   }
 206 | 
 207 |   if (searchString.length === 1) {
 208 |     this.displayResults([]);
 209 |     return;
 210 |   }
 211 | 
 212 |   let results;
 213 | 
 214 |   if (/^[\d.]*$/.test(searchString)) {
 215 |     results = this.biblio.clauses
 216 |       .filter(clause => clause.number.substring(0, searchString.length) === searchString)
 217 |       .map(clause => ({ entry: clause }));
 218 |   } else {
 219 |     results = [];
 220 | 
 221 |     for (let i = 0; i < this.biblio.entries.length; i++) {
 222 |       let entry = this.biblio.entries[i];
 223 |       if (!entry.key) {
 224 |         // biblio entries without a key aren't searchable
 225 |         continue;
 226 |       }
 227 | 
 228 |       let match = fuzzysearch(searchString, entry.key);
 229 |       if (match) {
 230 |         results.push({ entry, match });
 231 |       }
 232 |     }
 233 | 
 234 |     results.forEach(result => {
 235 |       result.relevance = relevance(result, searchString);
 236 |     });
 237 | 
 238 |     results = results.sort((a, b) => b.relevance - a.relevance);
 239 |   }
 240 | 
 241 |   if (results.length > 50) {
 242 |     results = results.slice(0, 50);
 243 |   }
 244 | 
 245 |   this.displayResults(results);
 246 | };
 247 | Search.prototype.hideSearch = function () {
 248 |   this.$search.classList.remove('active');
 249 | };
 250 | 
 251 | Search.prototype.showSearch = function () {
 252 |   this.$search.classList.add('active');
 253 | };
 254 | 
 255 | Search.prototype.selectResult = function () {
 256 |   let $first = this.$searchResults.querySelector('li:first-child a');
 257 | 
 258 |   if ($first) {
 259 |     document.location = $first.getAttribute('href');
 260 |   }
 261 | 
 262 |   this.$searchBox.value = '';
 263 |   this.$searchBox.blur();
 264 |   this.displayResults([]);
 265 |   this.hideSearch();
 266 | 
 267 |   if (this._closeAfterSearch) {
 268 |     this.menu.hide();
 269 |   }
 270 | };
 271 | 
 272 | Search.prototype.displayResults = function (results) {
 273 |   if (results.length > 0) {
 274 |     this.$searchResults.classList.remove('no-results');
 275 | 
 276 |     let html = '<ul>';
 277 | 
 278 |     results.forEach(result => {
 279 |       let entry = result.entry;
 280 |       let id = entry.id;
 281 |       let cssClass = '';
 282 |       let text = '';
 283 | 
 284 |       if (entry.type === 'clause') {
 285 |         let number = entry.number ? entry.number + ' ' : '';
 286 |         text = number + entry.key;
 287 |         cssClass = 'clause';
 288 |         id = entry.id;
 289 |       } else if (entry.type === 'production') {
 290 |         text = entry.key;
 291 |         cssClass = 'prod';
 292 |         id = entry.id;
 293 |       } else if (entry.type === 'op') {
 294 |         text = entry.key;
 295 |         cssClass = 'op';
 296 |         id = entry.id || entry.refId;
 297 |       } else if (entry.type === 'term') {
 298 |         text = entry.key;
 299 |         cssClass = 'term';
 300 |         id = entry.id || entry.refId;
 301 |       }
 302 | 
 303 |       if (text) {
 304 |         // prettier-ignore
 305 |         html += `<li class=menu-search-result-${cssClass}><a href="${makeLinkToId(id)}">${text}</a></li>`;
 306 |       }
 307 |     });
 308 | 
 309 |     html += '</ul>';
 310 | 
 311 |     this.$searchResults.innerHTML = html;
 312 |   } else {
 313 |     this.$searchResults.innerHTML = '';
 314 |     this.$searchResults.classList.add('no-results');
 315 |   }
 316 | };
 317 | 
 318 | function Menu() {
 319 |   this.$toggle = document.getElementById('menu-toggle');
 320 |   this.$menu = document.getElementById('menu');
 321 |   this.$toc = document.querySelector('menu-toc > ol');
 322 |   this.$pins = document.querySelector('#menu-pins');
 323 |   this.$pinList = document.getElementById('menu-pins-list');
 324 |   this.$toc = document.querySelector('#menu-toc > ol');
 325 |   this.$specContainer = document.getElementById('spec-container');
 326 |   this.search = new Search(this);
 327 | 
 328 |   this._pinnedIds = {};
 329 |   this.loadPinEntries();
 330 | 
 331 |   // toggle menu
 332 |   this.$toggle.addEventListener('click', this.toggle.bind(this));
 333 | 
 334 |   // keydown events for pinned clauses
 335 |   document.addEventListener('keydown', this.documentKeydown.bind(this));
 336 | 
 337 |   // toc expansion
 338 |   let tocItems = this.$menu.querySelectorAll('#menu-toc li');
 339 |   for (let i = 0; i < tocItems.length; i++) {
 340 |     let $item = tocItems[i];
 341 |     $item.addEventListener('click', event => {
 342 |       $item.classList.toggle('active');
 343 |       event.stopPropagation();
 344 |     });
 345 |   }
 346 | 
 347 |   // close toc on toc item selection
 348 |   let tocLinks = this.$menu.querySelectorAll('#menu-toc li > a');
 349 |   for (let i = 0; i < tocLinks.length; i++) {
 350 |     let $link = tocLinks[i];
 351 |     $link.addEventListener('click', event => {
 352 |       this.toggle();
 353 |       event.stopPropagation();
 354 |     });
 355 |   }
 356 | 
 357 |   // update active clause on scroll
 358 |   window.addEventListener('scroll', debounce(this.updateActiveClause.bind(this)));
 359 |   this.updateActiveClause();
 360 | 
 361 |   // prevent menu scrolling from scrolling the body
 362 |   this.$toc.addEventListener('wheel', e => {
 363 |     let target = e.currentTarget;
 364 |     let offTop = e.deltaY < 0 && target.scrollTop === 0;
 365 |     if (offTop) {
 366 |       e.preventDefault();
 367 |     }
 368 |     let offBottom = e.deltaY > 0 && target.offsetHeight + target.scrollTop >= target.scrollHeight;
 369 | 
 370 |     if (offBottom) {
 371 |       e.preventDefault();
 372 |     }
 373 |   });
 374 | }
 375 | 
 376 | Menu.prototype.documentKeydown = function (e) {
 377 |   e.stopPropagation();
 378 |   if (e.keyCode === 80) {
 379 |     this.togglePinEntry();
 380 |   } else if (e.keyCode > 48 && e.keyCode < 58) {
 381 |     this.selectPin(e.keyCode - 49);
 382 |   }
 383 | };
 384 | 
 385 | Menu.prototype.updateActiveClause = function () {
 386 |   this.setActiveClause(findActiveClause(this.$specContainer));
 387 | };
 388 | 
 389 | Menu.prototype.setActiveClause = function (clause) {
 390 |   this.$activeClause = clause;
 391 |   this.revealInToc(this.$activeClause);
 392 | };
 393 | 
 394 | Menu.prototype.revealInToc = function (path) {
 395 |   let current = this.$toc.querySelectorAll('li.revealed');
 396 |   for (let i = 0; i < current.length; i++) {
 397 |     current[i].classList.remove('revealed');
 398 |     current[i].classList.remove('revealed-leaf');
 399 |   }
 400 | 
 401 |   current = this.$toc;
 402 |   let index = 0;
 403 |   outer: while (index < path.length) {
 404 |     let children = current.children;
 405 |     for (let i = 0; i < children.length; i++) {
 406 |       if ('#' + path[index].id === children[i].children[1].hash) {
 407 |         children[i].classList.add('revealed');
 408 |         if (index === path.length - 1) {
 409 |           children[i].classList.add('revealed-leaf');
 410 |           let rect = children[i].getBoundingClientRect();
 411 |           // this.$toc.getBoundingClientRect().top;
 412 |           let tocRect = this.$toc.getBoundingClientRect();
 413 |           if (rect.top + 10 > tocRect.bottom) {
 414 |             this.$toc.scrollTop =
 415 |               this.$toc.scrollTop + (rect.top - tocRect.bottom) + (rect.bottom - rect.top);
 416 |           } else if (rect.top < tocRect.top) {
 417 |             this.$toc.scrollTop = this.$toc.scrollTop - (tocRect.top - rect.top);
 418 |           }
 419 |         }
 420 |         current = children[i].querySelector('ol');
 421 |         index++;
 422 |         continue outer;
 423 |       }
 424 |     }
 425 |     console.log('could not find location in table of contents', path);
 426 |     break;
 427 |   }
 428 | };
 429 | 
 430 | function findActiveClause(root, path) {
 431 |   let clauses = getChildClauses(root);
 432 |   path = path || [];
 433 | 
 434 |   for (let $clause of clauses) {
 435 |     let rect = $clause.getBoundingClientRect();
 436 |     let $header = $clause.querySelector('h1');
 437 |     let marginTop = Math.max(
 438 |       parseInt(getComputedStyle($clause)['margin-top']),
 439 |       parseInt(getComputedStyle($header)['margin-top'])
 440 |     );
 441 | 
 442 |     if (rect.top - marginTop <= 1 && rect.bottom > 0) {
 443 |       return findActiveClause($clause, path.concat($clause)) || path;
 444 |     }
 445 |   }
 446 | 
 447 |   return path;
 448 | }
 449 | 
 450 | function* getChildClauses(root) {
 451 |   for (let el of root.children) {
 452 |     switch (el.nodeName) {
 453 |       // descend into <emu-import>
 454 |       case 'EMU-IMPORT':
 455 |         yield* getChildClauses(el);
 456 |         break;
 457 | 
 458 |       // accept <emu-clause>, <emu-intro>, and <emu-annex>
 459 |       case 'EMU-CLAUSE':
 460 |       case 'EMU-INTRO':
 461 |       case 'EMU-ANNEX':
 462 |         yield el;
 463 |     }
 464 |   }
 465 | }
 466 | 
 467 | Menu.prototype.toggle = function () {
 468 |   this.$menu.classList.toggle('active');
 469 | };
 470 | 
 471 | Menu.prototype.show = function () {
 472 |   this.$menu.classList.add('active');
 473 | };
 474 | 
 475 | Menu.prototype.hide = function () {
 476 |   this.$menu.classList.remove('active');
 477 | };
 478 | 
 479 | Menu.prototype.isVisible = function () {
 480 |   return this.$menu.classList.contains('active');
 481 | };
 482 | 
 483 | Menu.prototype.showPins = function () {
 484 |   this.$pins.classList.add('active');
 485 | };
 486 | 
 487 | Menu.prototype.hidePins = function () {
 488 |   this.$pins.classList.remove('active');
 489 | };
 490 | 
 491 | Menu.prototype.addPinEntry = function (id) {
 492 |   let entry = this.search.biblio.byId[id];
 493 |   if (!entry) {
 494 |     // id was deleted after pin (or something) so remove it
 495 |     delete this._pinnedIds[id];
 496 |     this.persistPinEntries();
 497 |     return;
 498 |   }
 499 | 
 500 |   if (entry.type === 'clause') {
 501 |     let prefix;
 502 |     if (entry.number) {
 503 |       prefix = entry.number + ' ';
 504 |     } else {
 505 |       prefix = '';
 506 |     }
 507 |     // prettier-ignore
 508 |     this.$pinList.innerHTML += `<li><a href="${makeLinkToId(entry.id)}">${prefix}${entry.titleHTML}</a></li>`;
 509 |   } else {
 510 |     this.$pinList.innerHTML += `<li><a href="${makeLinkToId(entry.id)}">${entry.key}</a></li>`;
 511 |   }
 512 | 
 513 |   if (Object.keys(this._pinnedIds).length === 0) {
 514 |     this.showPins();
 515 |   }
 516 |   this._pinnedIds[id] = true;
 517 |   this.persistPinEntries();
 518 | };
 519 | 
 520 | Menu.prototype.removePinEntry = function (id) {
 521 |   let item = this.$pinList.querySelector(`a[href="${makeLinkToId(id)}"]`).parentNode;
 522 |   this.$pinList.removeChild(item);
 523 |   delete this._pinnedIds[id];
 524 |   if (Object.keys(this._pinnedIds).length === 0) {
 525 |     this.hidePins();
 526 |   }
 527 | 
 528 |   this.persistPinEntries();
 529 | };
 530 | 
 531 | Menu.prototype.persistPinEntries = function () {
 532 |   try {
 533 |     if (!window.localStorage) return;
 534 |   } catch (e) {
 535 |     return;
 536 |   }
 537 | 
 538 |   localStorage.pinEntries = JSON.stringify(Object.keys(this._pinnedIds));
 539 | };
 540 | 
 541 | Menu.prototype.loadPinEntries = function () {
 542 |   try {
 543 |     if (!window.localStorage) return;
 544 |   } catch (e) {
 545 |     return;
 546 |   }
 547 | 
 548 |   let pinsString = window.localStorage.pinEntries;
 549 |   if (!pinsString) return;
 550 |   let pins = JSON.parse(pinsString);
 551 |   for (let i = 0; i < pins.length; i++) {
 552 |     this.addPinEntry(pins[i]);
 553 |   }
 554 | };
 555 | 
 556 | Menu.prototype.togglePinEntry = function (id) {
 557 |   if (!id) {
 558 |     id = this.$activeClause[this.$activeClause.length - 1].id;
 559 |   }
 560 | 
 561 |   if (this._pinnedIds[id]) {
 562 |     this.removePinEntry(id);
 563 |   } else {
 564 |     this.addPinEntry(id);
 565 |   }
 566 | };
 567 | 
 568 | Menu.prototype.selectPin = function (num) {
 569 |   document.location = this.$pinList.children[num].children[0].href;
 570 | };
 571 | 
 572 | let menu;
 573 | 
 574 | document.addEventListener('DOMContentLoaded', init);
 575 | 
 576 | function debounce(fn, opts) {
 577 |   opts = opts || {};
 578 |   let timeout;
 579 |   return function (e) {
 580 |     if (opts.stopPropagation) {
 581 |       e.stopPropagation();
 582 |     }
 583 |     let args = arguments;
 584 |     if (timeout) {
 585 |       clearTimeout(timeout);
 586 |     }
 587 |     timeout = setTimeout(() => {
 588 |       timeout = null;
 589 |       fn.apply(this, args);
 590 |     }, 150);
 591 |   };
 592 | }
 593 | 
 594 | let CLAUSE_NODES = ['EMU-CLAUSE', 'EMU-INTRO', 'EMU-ANNEX'];
 595 | function findContainer($elem) {
 596 |   let parentClause = $elem.parentNode;
 597 |   while (parentClause && CLAUSE_NODES.indexOf(parentClause.nodeName) === -1) {
 598 |     parentClause = parentClause.parentNode;
 599 |   }
 600 |   return parentClause;
 601 | }
 602 | 
 603 | function findLocalReferences(parentClause, name) {
 604 |   let vars = parentClause.querySelectorAll('var');
 605 |   let references = [];
 606 | 
 607 |   for (let i = 0; i < vars.length; i++) {
 608 |     let $var = vars[i];
 609 | 
 610 |     if ($var.innerHTML === name) {
 611 |       references.push($var);
 612 |     }
 613 |   }
 614 | 
 615 |   return references;
 616 | }
 617 | 
 618 | let REFERENCED_CLASSES = Array.from({ length: 7 }, (x, i) => `referenced${i}`);
 619 | function chooseHighlightIndex(parentClause) {
 620 |   let counts = REFERENCED_CLASSES.map($class => parentClause.getElementsByClassName($class).length);
 621 |   // Find the earliest index with the lowest count.
 622 |   let minCount = Infinity;
 623 |   let index = null;
 624 |   for (let i = 0; i < counts.length; i++) {
 625 |     if (counts[i] < minCount) {
 626 |       minCount = counts[i];
 627 |       index = i;
 628 |     }
 629 |   }
 630 |   return index;
 631 | }
 632 | 
 633 | function toggleFindLocalReferences($elem) {
 634 |   let parentClause = findContainer($elem);
 635 |   let references = findLocalReferences(parentClause, $elem.innerHTML);
 636 |   if ($elem.classList.contains('referenced')) {
 637 |     references.forEach($reference => {
 638 |       $reference.classList.remove('referenced', ...REFERENCED_CLASSES);
 639 |     });
 640 |   } else {
 641 |     let index = chooseHighlightIndex(parentClause);
 642 |     references.forEach($reference => {
 643 |       $reference.classList.add('referenced', `referenced${index}`);
 644 |     });
 645 |   }
 646 | }
 647 | 
 648 | function installFindLocalReferences() {
 649 |   document.addEventListener('click', e => {
 650 |     if (e.target.nodeName === 'VAR') {
 651 |       toggleFindLocalReferences(e.target);
 652 |     }
 653 |   });
 654 | }
 655 | 
 656 | document.addEventListener('DOMContentLoaded', installFindLocalReferences);
 657 | 
 658 | // The following license applies to the fuzzysearch function
 659 | // The MIT License (MIT)
 660 | // Copyright © 2015 Nicolas Bevacqua
 661 | // Copyright © 2016 Brian Terlson
 662 | // Permission is hereby granted, free of charge, to any person obtaining a copy of
 663 | // this software and associated documentation files (the "Software"), to deal in
 664 | // the Software without restriction, including without limitation the rights to
 665 | // use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 666 | // the Software, and to permit persons to whom the Software is furnished to do so,
 667 | // subject to the following conditions:
 668 | 
 669 | // The above copyright notice and this permission notice shall be included in all
 670 | // copies or substantial portions of the Software.
 671 | 
 672 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 673 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 674 | // FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 675 | // COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 676 | // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 677 | // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 678 | function fuzzysearch(searchString, haystack, caseInsensitive) {
 679 |   let tlen = haystack.length;
 680 |   let qlen = searchString.length;
 681 |   let chunks = 1;
 682 |   let finding = false;
 683 | 
 684 |   if (qlen > tlen) {
 685 |     return false;
 686 |   }
 687 | 
 688 |   if (qlen === tlen) {
 689 |     if (searchString === haystack) {
 690 |       return { caseMatch: true, chunks: 1, prefix: true };
 691 |     } else if (searchString.toLowerCase() === haystack.toLowerCase()) {
 692 |       return { caseMatch: false, chunks: 1, prefix: true };
 693 |     } else {
 694 |       return false;
 695 |     }
 696 |   }
 697 | 
 698 |   let j = 0;
 699 |   outer: for (let i = 0; i < qlen; i++) {
 700 |     let nch = searchString[i];
 701 |     while (j < tlen) {
 702 |       let targetChar = haystack[j++];
 703 |       if (targetChar === nch) {
 704 |         finding = true;
 705 |         continue outer;
 706 |       }
 707 |       if (finding) {
 708 |         chunks++;
 709 |         finding = false;
 710 |       }
 711 |     }
 712 | 
 713 |     if (caseInsensitive) {
 714 |       return false;
 715 |     }
 716 | 
 717 |     return fuzzysearch(searchString.toLowerCase(), haystack.toLowerCase(), true);
 718 |   }
 719 | 
 720 |   return { caseMatch: !caseInsensitive, chunks, prefix: j <= qlen };
 721 | }
 722 | 
 723 | let referencePane = {
 724 |   init() {
 725 |     this.$container = document.createElement('div');
 726 |     this.$container.setAttribute('id', 'references-pane-container');
 727 | 
 728 |     let $spacer = document.createElement('div');
 729 |     $spacer.setAttribute('id', 'references-pane-spacer');
 730 | 
 731 |     this.$pane = document.createElement('div');
 732 |     this.$pane.setAttribute('id', 'references-pane');
 733 | 
 734 |     this.$container.appendChild($spacer);
 735 |     this.$container.appendChild(this.$pane);
 736 | 
 737 |     this.$header = document.createElement('div');
 738 |     this.$header.classList.add('menu-pane-header');
 739 |     this.$headerText = document.createElement('span');
 740 |     this.$header.appendChild(this.$headerText);
 741 |     this.$headerRefId = document.createElement('a');
 742 |     this.$header.appendChild(this.$headerRefId);
 743 |     this.$closeButton = document.createElement('span');
 744 |     this.$closeButton.setAttribute('id', 'references-pane-close');
 745 |     this.$closeButton.addEventListener('click', () => {
 746 |       this.deactivate();
 747 |     });
 748 |     this.$header.appendChild(this.$closeButton);
 749 | 
 750 |     this.$pane.appendChild(this.$header);
 751 |     let tableContainer = document.createElement('div');
 752 |     tableContainer.setAttribute('id', 'references-pane-table-container');
 753 | 
 754 |     this.$table = document.createElement('table');
 755 |     this.$table.setAttribute('id', 'references-pane-table');
 756 | 
 757 |     this.$tableBody = this.$table.createTBody();
 758 | 
 759 |     tableContainer.appendChild(this.$table);
 760 |     this.$pane.appendChild(tableContainer);
 761 | 
 762 |     menu.$specContainer.appendChild(this.$container);
 763 |   },
 764 | 
 765 |   activate() {
 766 |     this.$container.classList.add('active');
 767 |   },
 768 | 
 769 |   deactivate() {
 770 |     this.$container.classList.remove('active');
 771 |     this.state = null;
 772 |   },
 773 | 
 774 |   showReferencesFor(entry) {
 775 |     this.activate();
 776 |     this.state = { type: 'ref', id: entry.id };
 777 |     this.$headerText.textContent = 'References to ';
 778 |     let newBody = document.createElement('tbody');
 779 |     let previousId;
 780 |     let previousCell;
 781 |     let dupCount = 0;
 782 |     this.$headerRefId.textContent = '#' + entry.id;
 783 |     this.$headerRefId.setAttribute('href', makeLinkToId(entry.id));
 784 |     this.$headerRefId.style.display = 'inline';
 785 |     entry.referencingIds
 786 |       .map(id => {
 787 |         let cid = menu.search.biblio.refParentClause[id];
 788 |         let clause = menu.search.biblio.byId[cid];
 789 |         if (clause == null) {
 790 |           throw new Error('could not find clause for id ' + cid);
 791 |         }
 792 |         return { id, clause };
 793 |       })
 794 |       .sort((a, b) => sortByClauseNumber(a.clause, b.clause))
 795 |       .forEach(record => {
 796 |         if (previousId === record.clause.id) {
 797 |           previousCell.innerHTML += ` (<a href="${makeLinkToId(record.id)}">${dupCount + 2}</a>)`;
 798 |           dupCount++;
 799 |         } else {
 800 |           let row = newBody.insertRow();
 801 |           let cell = row.insertCell();
 802 |           cell.innerHTML = record.clause.number;
 803 |           cell = row.insertCell();
 804 |           cell.innerHTML = `<a href="${makeLinkToId(record.id)}">${record.clause.titleHTML}</a>`;
 805 |           previousCell = cell;
 806 |           previousId = record.clause.id;
 807 |           dupCount = 0;
 808 |         }
 809 |       }, this);
 810 |     this.$table.removeChild(this.$tableBody);
 811 |     this.$tableBody = newBody;
 812 |     this.$table.appendChild(this.$tableBody);
 813 |   },
 814 | 
 815 |   showSDOs(sdos, alternativeId) {
 816 |     let rhs = document.getElementById(alternativeId);
 817 |     let parentName = rhs.parentNode.getAttribute('name');
 818 |     let colons = rhs.parentNode.querySelector('emu-geq');
 819 |     rhs = rhs.cloneNode(true);
 820 |     rhs.querySelectorAll('emu-params,emu-constraints').forEach(e => {
 821 |       e.remove();
 822 |     });
 823 |     rhs.querySelectorAll('[id]').forEach(e => {
 824 |       e.removeAttribute('id');
 825 |     });
 826 |     rhs.querySelectorAll('a').forEach(e => {
 827 |       e.parentNode.replaceChild(document.createTextNode(e.textContent), e);
 828 |     });
 829 | 
 830 |     // prettier-ignore
 831 |     this.$headerText.innerHTML = `Syntax-Directed Operations for<br><a href="${makeLinkToId(alternativeId)}" class="menu-pane-header-production"><emu-nt>${parentName}</emu-nt> ${colons.outerHTML} </a>`;
 832 |     this.$headerText.querySelector('a').append(rhs);
 833 |     this.showSDOsBody(sdos, alternativeId);
 834 |   },
 835 | 
 836 |   showSDOsBody(sdos, alternativeId) {
 837 |     this.activate();
 838 |     this.state = { type: 'sdo', id: alternativeId, html: this.$headerText.innerHTML };
 839 |     this.$headerRefId.style.display = 'none';
 840 |     let newBody = document.createElement('tbody');
 841 |     Object.keys(sdos).forEach(sdoName => {
 842 |       let pair = sdos[sdoName];
 843 |       let clause = pair.clause;
 844 |       let ids = pair.ids;
 845 |       let first = ids[0];
 846 |       let row = newBody.insertRow();
 847 |       let cell = row.insertCell();
 848 |       cell.innerHTML = clause;
 849 |       cell = row.insertCell();
 850 |       let html = '<a href="' + makeLinkToId(first) + '">' + sdoName + '</a>';
 851 |       for (let i = 1; i < ids.length; ++i) {
 852 |         html += ' (<a href="' + makeLinkToId(ids[i]) + '">' + (i + 1) + '</a>)';
 853 |       }
 854 |       cell.innerHTML = html;
 855 |     });
 856 |     this.$table.removeChild(this.$tableBody);
 857 |     this.$tableBody = newBody;
 858 |     this.$table.appendChild(this.$tableBody);
 859 |   },
 860 | };
 861 | 
 862 | let Toolbox = {
 863 |   init() {
 864 |     this.$outer = document.createElement('div');
 865 |     this.$outer.classList.add('toolbox-container');
 866 |     this.$container = document.createElement('div');
 867 |     this.$container.classList.add('toolbox');
 868 |     this.$outer.appendChild(this.$container);
 869 |     this.$permalink = document.createElement('a');
 870 |     this.$permalink.textContent = 'Permalink';
 871 |     this.$pinLink = document.createElement('a');
 872 |     this.$pinLink.textContent = 'Pin';
 873 |     this.$pinLink.setAttribute('href', '#');
 874 |     this.$pinLink.addEventListener('click', e => {
 875 |       e.preventDefault();
 876 |       e.stopPropagation();
 877 |       menu.togglePinEntry(this.entry.id);
 878 |     });
 879 | 
 880 |     this.$refsLink = document.createElement('a');
 881 |     this.$refsLink.setAttribute('href', '#');
 882 |     this.$refsLink.addEventListener('click', e => {
 883 |       e.preventDefault();
 884 |       e.stopPropagation();
 885 |       referencePane.showReferencesFor(this.entry);
 886 |     });
 887 |     this.$container.appendChild(this.$permalink);
 888 |     this.$container.appendChild(this.$pinLink);
 889 |     this.$container.appendChild(this.$refsLink);
 890 |     document.body.appendChild(this.$outer);
 891 |   },
 892 | 
 893 |   activate(el, entry, target) {
 894 |     if (el === this._activeEl) return;
 895 |     sdoBox.deactivate();
 896 |     this.active = true;
 897 |     this.entry = entry;
 898 |     this.$outer.classList.add('active');
 899 |     this.top = el.offsetTop - this.$outer.offsetHeight;
 900 |     this.left = el.offsetLeft - 10;
 901 |     this.$outer.setAttribute('style', 'left: ' + this.left + 'px; top: ' + this.top + 'px');
 902 |     this.updatePermalink();
 903 |     this.updateReferences();
 904 |     this._activeEl = el;
 905 |     if (this.top < document.body.scrollTop && el === target) {
 906 |       // don't scroll unless it's a small thing (< 200px)
 907 |       this.$outer.scrollIntoView();
 908 |     }
 909 |   },
 910 | 
 911 |   updatePermalink() {
 912 |     this.$permalink.setAttribute('href', makeLinkToId(this.entry.id));
 913 |   },
 914 | 
 915 |   updateReferences() {
 916 |     this.$refsLink.textContent = `References (${this.entry.referencingIds.length})`;
 917 |   },
 918 | 
 919 |   activateIfMouseOver(e) {
 920 |     let ref = this.findReferenceUnder(e.target);
 921 |     if (ref && (!this.active || e.pageY > this._activeEl.offsetTop)) {
 922 |       let entry = menu.search.biblio.byId[ref.id];
 923 |       this.activate(ref.element, entry, e.target);
 924 |     } else if (
 925 |       this.active &&
 926 |       (e.pageY < this.top || e.pageY > this._activeEl.offsetTop + this._activeEl.offsetHeight)
 927 |     ) {
 928 |       this.deactivate();
 929 |     }
 930 |   },
 931 | 
 932 |   findReferenceUnder(el) {
 933 |     while (el) {
 934 |       let parent = el.parentNode;
 935 |       if (el.nodeName === 'EMU-RHS' || el.nodeName === 'EMU-PRODUCTION') {
 936 |         return null;
 937 |       }
 938 |       if (
 939 |         el.nodeName === 'H1' &&
 940 |         parent.nodeName.match(/EMU-CLAUSE|EMU-ANNEX|EMU-INTRO/) &&
 941 |         parent.id
 942 |       ) {
 943 |         return { element: el, id: parent.id };
 944 |       } else if (el.nodeName === 'EMU-NT') {
 945 |         if (
 946 |           parent.nodeName === 'EMU-PRODUCTION' &&
 947 |           parent.id &&
 948 |           parent.id[0] !== '_' &&
 949 |           parent.firstElementChild === el
 950 |         ) {
 951 |           // return the LHS non-terminal element
 952 |           return { element: el, id: parent.id };
 953 |         }
 954 |         return null;
 955 |       } else if (
 956 |         el.nodeName.match(/EMU-(?!CLAUSE|XREF|ANNEX|INTRO)|DFN/) &&
 957 |         el.id &&
 958 |         el.id[0] !== '_'
 959 |       ) {
 960 |         if (
 961 |           el.nodeName === 'EMU-FIGURE' ||
 962 |           el.nodeName === 'EMU-TABLE' ||
 963 |           el.nodeName === 'EMU-EXAMPLE'
 964 |         ) {
 965 |           // return the figcaption element
 966 |           return { element: el.children[0].children[0], id: el.id };
 967 |         } else {
 968 |           return { element: el, id: el.id };
 969 |         }
 970 |       }
 971 |       el = parent;
 972 |     }
 973 |   },
 974 | 
 975 |   deactivate() {
 976 |     this.$outer.classList.remove('active');
 977 |     this._activeEl = null;
 978 |     this.active = false;
 979 |   },
 980 | };
 981 | 
 982 | function sortByClauseNumber(clause1, clause2) {
 983 |   let c1c = clause1.number.split('.');
 984 |   let c2c = clause2.number.split('.');
 985 | 
 986 |   for (let i = 0; i < c1c.length; i++) {
 987 |     if (i >= c2c.length) {
 988 |       return 1;
 989 |     }
 990 | 
 991 |     let c1 = c1c[i];
 992 |     let c2 = c2c[i];
 993 |     let c1cn = Number(c1);
 994 |     let c2cn = Number(c2);
 995 | 
 996 |     if (Number.isNaN(c1cn) && Number.isNaN(c2cn)) {
 997 |       if (c1 > c2) {
 998 |         return 1;
 999 |       } else if (c1 < c2) {
1000 |         return -1;
1001 |       }
1002 |     } else if (!Number.isNaN(c1cn) && Number.isNaN(c2cn)) {
1003 |       return -1;
1004 |     } else if (Number.isNaN(c1cn) && !Number.isNaN(c2cn)) {
1005 |       return 1;
1006 |     } else if (c1cn > c2cn) {
1007 |       return 1;
1008 |     } else if (c1cn < c2cn) {
1009 |       return -1;
1010 |     }
1011 |   }
1012 | 
1013 |   if (c1c.length === c2c.length) {
1014 |     return 0;
1015 |   }
1016 |   return -1;
1017 | }
1018 | 
1019 | function makeLinkToId(id) {
1020 |   let hash = '#' + id;
1021 |   if (typeof idToSection === 'undefined' || !idToSection[id]) {
1022 |     return hash;
1023 |   }
1024 |   let targetSec = idToSection[id];
1025 |   return (targetSec === 'index' ? './' : targetSec + '.html') + hash;
1026 | }
1027 | 
1028 | function doShortcut(e) {
1029 |   if (!(e.target instanceof HTMLElement)) {
1030 |     return;
1031 |   }
1032 |   let target = e.target;
1033 |   let name = target.nodeName.toLowerCase();
1034 |   if (name === 'textarea' || name === 'input' || name === 'select' || target.isContentEditable) {
1035 |     return;
1036 |   }
1037 |   if (e.key === 'm' && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey && usesMultipage) {
1038 |     let pathParts = location.pathname.split('/');
1039 |     let hash = location.hash;
1040 |     if (pathParts[pathParts.length - 2] === 'multipage') {
1041 |       if (hash === '') {
1042 |         let sectionName = pathParts[pathParts.length - 1];
1043 |         if (sectionName.endsWith('.html')) {
1044 |           sectionName = sectionName.slice(0, -5);
1045 |         }
1046 |         if (idToSection['sec-' + sectionName] !== undefined) {
1047 |           hash = '#sec-' + sectionName;
1048 |         }
1049 |       }
1050 |       location = pathParts.slice(0, -2).join('/') + '/' + hash;
1051 |     } else {
1052 |       location = 'multipage/' + hash;
1053 |     }
1054 |   }
1055 | }
1056 | 
1057 | function init() {
1058 |   menu = new Menu();
1059 |   let $container = document.getElementById('spec-container');
1060 |   $container.addEventListener(
1061 |     'mouseover',
1062 |     debounce(e => {
1063 |       Toolbox.activateIfMouseOver(e);
1064 |     })
1065 |   );
1066 |   document.addEventListener(
1067 |     'keydown',
1068 |     debounce(e => {
1069 |       if (e.code === 'Escape' && Toolbox.active) {
1070 |         Toolbox.deactivate();
1071 |       }
1072 |     })
1073 |   );
1074 | }
1075 | 
1076 | document.addEventListener('keypress', doShortcut);
1077 | 
1078 | document.addEventListener('DOMContentLoaded', () => {
1079 |   Toolbox.init();
1080 |   referencePane.init();
1081 | });
1082 | 
1083 | 'use strict';
1084 | let decimalBullet = Array.from({ length: 100 }, (a, i) => '' + (i + 1));
1085 | let alphaBullet = Array.from({ length: 26 }, (a, i) => String.fromCharCode('a'.charCodeAt(0) + i));
1086 | 
1087 | // prettier-ignore
1088 | let romanBullet = ['i', 'ii', 'iii', 'iv', 'v', 'vi', 'vii', 'viii', 'ix', 'x', 'xi', 'xii', 'xiii', 'xiv', 'xv', 'xvi', 'xvii', 'xviii', 'xix', 'xx', 'xxi', 'xxii', 'xxiii', 'xxiv', 'xxv'];
1089 | // prettier-ignore
1090 | let bullets = [decimalBullet, alphaBullet, romanBullet, decimalBullet, alphaBullet, romanBullet];
1091 | 
1092 | function addStepNumberText(ol, parentIndex) {
1093 |   for (let i = 0; i < ol.children.length; ++i) {
1094 |     let child = ol.children[i];
1095 |     let index = parentIndex.concat([i]);
1096 |     let applicable = bullets[Math.min(index.length - 1, 5)];
1097 |     let span = document.createElement('span');
1098 |     span.textContent = (applicable[i] || '?') + '. ';
1099 |     span.style.fontSize = '0';
1100 |     span.setAttribute('aria-hidden', 'true');
1101 |     child.prepend(span);
1102 |     let sublist = child.querySelector('ol');
1103 |     if (sublist != null) {
1104 |       addStepNumberText(sublist, index);
1105 |     }
1106 |   }
1107 | }
1108 | document.addEventListener('DOMContentLoaded', () => {
1109 |   document.querySelectorAll('emu-alg > ol').forEach(ol => {
1110 |     addStepNumberText(ol, []);
1111 |   });
1112 | });
1113 | 
1114 | let sdoMap = JSON.parse(`{}`);
1115 | let biblio = JSON.parse(`{"refsByClause":{"sec-demo-clause":["_ref_0"]},"entries":[{"type":"clause","id":"sec-demo-clause","aoid":null,"titleHTML":"This is an emu-clause","number":"1","referencingIds":[],"key":"This is an emu-clause"},{"type":"clause","id":"sec-copyright-and-software-license","aoid":null,"titleHTML":"Copyright &amp; Software License","number":"A","referencingIds":[],"key":"Copyright & Software License"}]}`);
1116 | ;let usesMultipage = false</script><style>body {
1117 |   display: flex;
1118 |   font-size: 18px;
1119 |   line-height: 1.5;
1120 |   font-family: Cambria, Palatino Linotype, Palatino, Liberation Serif, serif;
1121 |   padding: 0;
1122 |   margin: 0;
1123 |   color: #111;
1124 | }
1125 | 
1126 | #spec-container {
1127 |   padding: 0 20px;
1128 |   flex-grow: 1;
1129 |   flex-basis: 66%;
1130 |   box-sizing: border-box;
1131 |   overflow: hidden;
1132 |   padding-bottom: 1em;
1133 | }
1134 | 
1135 | body.oldtoc {
1136 |   margin: 0 auto;
1137 | }
1138 | 
1139 | a {
1140 |   text-decoration: none;
1141 |   color: #206ca7;
1142 | }
1143 | 
1144 | a:visited {
1145 |   color: #206ca7;
1146 | }
1147 | 
1148 | a:hover {
1149 |   text-decoration: underline;
1150 |   color: #239dee;
1151 | }
1152 | 
1153 | code {
1154 |   font-weight: bold;
1155 |   font-family: Consolas, Monaco, monospace;
1156 |   white-space: pre;
1157 | }
1158 | 
1159 | pre code {
1160 |   font-weight: inherit;
1161 | }
1162 | 
1163 | pre code.hljs {
1164 |   background-color: #fff;
1165 |   margin: 0;
1166 |   padding: 0;
1167 | }
1168 | 
1169 | ol.toc {
1170 |   list-style: none;
1171 |   padding-left: 0;
1172 | }
1173 | 
1174 | ol.toc ol.toc {
1175 |   padding-left: 2ex;
1176 |   list-style: none;
1177 | }
1178 | 
1179 | var {
1180 |   color: #2aa198;
1181 |   transition: background-color 0.25s ease;
1182 |   cursor: pointer;
1183 | }
1184 | 
1185 | var.referenced0 {
1186 |   color: inherit;
1187 |   background-color: #ffff33;
1188 |   box-shadow: 0 0 0 2px #ffff33;
1189 | }
1190 | var.referenced1 {
1191 |   color: inherit;
1192 |   background-color: #ff87a2;
1193 |   box-shadow: 0 0 0 2px #ff87a2;
1194 | }
1195 | var.referenced2 {
1196 |   color: inherit;
1197 |   background-color: #96e885;
1198 |   box-shadow: 0 0 0 2px #96e885;
1199 | }
1200 | var.referenced3 {
1201 |   color: inherit;
1202 |   background-color: #3eeed2;
1203 |   box-shadow: 0 0 0 2px #3eeed2;
1204 | }
1205 | var.referenced4 {
1206 |   color: inherit;
1207 |   background-color: #eacfb6;
1208 |   box-shadow: 0 0 0 2px #eacfb6;
1209 | }
1210 | var.referenced5 {
1211 |   color: inherit;
1212 |   background-color: #82ddff;
1213 |   box-shadow: 0 0 0 2px #82ddff;
1214 | }
1215 | var.referenced6 {
1216 |   color: inherit;
1217 |   background-color: #ffbcf2;
1218 |   box-shadow: 0 0 0 2px #ffbcf2;
1219 | }
1220 | 
1221 | emu-const {
1222 |   font-family: sans-serif;
1223 | }
1224 | 
1225 | emu-val {
1226 |   font-weight: bold;
1227 | }
1228 | 
1229 | /* depth 1 */
1230 | emu-alg ol,
1231 | /* depth 4 */
1232 | emu-alg ol ol ol ol,
1233 | emu-alg ol.nested-thrice,
1234 | emu-alg ol.nested-twice ol,
1235 | emu-alg ol.nested-once ol ol {
1236 |   list-style-type: decimal;
1237 | }
1238 | 
1239 | /* depth 2 */
1240 | emu-alg ol ol,
1241 | emu-alg ol.nested-once,
1242 | /* depth 5 */
1243 | emu-alg ol ol ol ol ol,
1244 | emu-alg ol.nested-four-times,
1245 | emu-alg ol.nested-thrice ol,
1246 | emu-alg ol.nested-twice ol ol,
1247 | emu-alg ol.nested-once ol ol ol {
1248 |   list-style-type: lower-alpha;
1249 | }
1250 | 
1251 | /* depth 3 */
1252 | emu-alg ol ol ol,
1253 | emu-alg ol.nested-twice,
1254 | emu-alg ol.nested-once ol,
1255 | /* depth 6 */
1256 | emu-alg ol ol ol ol ol ol,
1257 | emu-alg ol.nested-lots,
1258 | emu-alg ol.nested-four-times ol,
1259 | emu-alg ol.nested-thrice ol ol,
1260 | emu-alg ol.nested-twice ol ol ol,
1261 | emu-alg ol.nested-once ol ol ol ol,
1262 | /* depth 7+ */
1263 | emu-alg ol.nested-lots ol {
1264 |   list-style-type: lower-roman;
1265 | }
1266 | 
1267 | emu-eqn {
1268 |   display: block;
1269 |   margin-left: 4em;
1270 | }
1271 | 
1272 | emu-eqn.inline {
1273 |   display: inline;
1274 |   margin: 0;
1275 | }
1276 | 
1277 | emu-eqn div:first-child {
1278 |   margin-left: -2em;
1279 | }
1280 | 
1281 | emu-note {
1282 |   margin: 1em 0;
1283 |   display: flex;
1284 |   flex-direction: row;
1285 |   color: inherit;
1286 |   border-left: 5px solid #52e052;
1287 |   background: #e9fbe9;
1288 |   padding: 10px 10px 10px 0;
1289 | }
1290 | 
1291 | emu-note > span.note {
1292 |   flex-basis: 100px;
1293 |   min-width: 100px;
1294 |   flex-grow: 0;
1295 |   flex-shrink: 1;
1296 |   text-transform: uppercase;
1297 |   padding-left: 5px;
1298 | }
1299 | 
1300 | emu-note[type='editor'] {
1301 |   border-left-color: #faa;
1302 | }
1303 | 
1304 | emu-note > div.note-contents {
1305 |   flex-grow: 1;
1306 |   flex-shrink: 1;
1307 |   overflow: auto;
1308 | }
1309 | 
1310 | emu-note > div.note-contents > p:first-of-type {
1311 |   margin-top: 0;
1312 | }
1313 | 
1314 | emu-note > div.note-contents > p:last-of-type {
1315 |   margin-bottom: 0;
1316 | }
1317 | 
1318 | emu-table td code {
1319 |   white-space: normal;
1320 | }
1321 | 
1322 | emu-figure {
1323 |   display: block;
1324 | }
1325 | 
1326 | emu-example {
1327 |   display: block;
1328 |   margin: 1em 3em;
1329 | }
1330 | 
1331 | emu-example figure figcaption {
1332 |   margin-top: 0.5em;
1333 |   text-align: left;
1334 | }
1335 | 
1336 | emu-figure figure,
1337 | emu-example figure,
1338 | emu-table figure {
1339 |   display: flex;
1340 |   flex-direction: column;
1341 |   align-items: center;
1342 | }
1343 | 
1344 | emu-production {
1345 |   display: block;
1346 | }
1347 | 
1348 | emu-grammar[type='example'] emu-production,
1349 | emu-grammar[type='definition'] emu-production {
1350 |   margin-top: 1em;
1351 |   margin-bottom: 1em;
1352 |   margin-left: 5ex;
1353 | }
1354 | 
1355 | emu-grammar.inline,
1356 | emu-production.inline,
1357 | emu-grammar.inline emu-production emu-rhs,
1358 | emu-production.inline emu-rhs,
1359 | emu-grammar[collapsed] emu-production emu-rhs {
1360 |   display: inline;
1361 |   padding-left: 1ex;
1362 |   margin-left: 0;
1363 | }
1364 | 
1365 | emu-production[collapsed] emu-rhs {
1366 |   display: inline;
1367 |   padding-left: 0.5ex;
1368 |   margin-left: 0;
1369 | }
1370 | 
1371 | emu-grammar[collapsed] emu-production,
1372 | emu-production[collapsed] {
1373 |   margin: 0;
1374 | }
1375 | 
1376 | emu-constraints {
1377 |   font-size: 0.75em;
1378 |   margin-right: 0.5ex;
1379 | }
1380 | 
1381 | emu-gann {
1382 |   margin-right: 0.5ex;
1383 | }
1384 | 
1385 | emu-gann emu-t:last-child,
1386 | emu-gann emu-gprose:last-child,
1387 | emu-gann emu-nt:last-child {
1388 |   margin-right: 0;
1389 | }
1390 | 
1391 | emu-geq {
1392 |   margin-left: 0.5ex;
1393 |   font-weight: bold;
1394 | }
1395 | 
1396 | emu-oneof {
1397 |   font-weight: bold;
1398 |   margin-left: 0.5ex;
1399 | }
1400 | 
1401 | emu-nt {
1402 |   display: inline-block;
1403 |   font-style: italic;
1404 |   white-space: nowrap;
1405 |   text-indent: 0;
1406 | }
1407 | 
1408 | emu-nt a,
1409 | emu-nt a:visited {
1410 |   color: #333;
1411 | }
1412 | 
1413 | emu-rhs emu-nt {
1414 |   margin-right: 0.5ex;
1415 | }
1416 | 
1417 | emu-t {
1418 |   display: inline-block;
1419 |   font-family: monospace;
1420 |   font-weight: bold;
1421 |   white-space: nowrap;
1422 |   text-indent: 0;
1423 | }
1424 | 
1425 | emu-production emu-t {
1426 |   margin-right: 0.5ex;
1427 | }
1428 | 
1429 | emu-rhs {
1430 |   display: block;
1431 |   padding-left: 75px;
1432 |   text-indent: -25px;
1433 | }
1434 | 
1435 | emu-production:not([collapsed]) emu-rhs {
1436 |   border: 0.2ex dashed transparent;
1437 | }
1438 | 
1439 | emu-production:not([collapsed]) emu-rhs:hover {
1440 |   border-color: #888;
1441 |   background-color: #f0f0f0;
1442 | }
1443 | 
1444 | emu-mods {
1445 |   font-size: 0.85em;
1446 |   vertical-align: sub;
1447 |   font-style: normal;
1448 |   font-weight: normal;
1449 | }
1450 | 
1451 | emu-params,
1452 | emu-opt {
1453 |   margin-right: 1ex;
1454 |   font-family: monospace;
1455 | }
1456 | 
1457 | emu-params,
1458 | emu-constraints {
1459 |   color: #2aa198;
1460 | }
1461 | 
1462 | emu-opt {
1463 |   color: #b58900;
1464 | }
1465 | 
1466 | emu-gprose {
1467 |   font-size: 0.9em;
1468 |   font-family: Helvetica, Arial, sans-serif;
1469 | }
1470 | 
1471 | emu-production emu-gprose {
1472 |   margin-right: 1ex;
1473 | }
1474 | 
1475 | h1.shortname {
1476 |   color: #f60;
1477 |   font-size: 1.5em;
1478 |   margin: 0;
1479 | }
1480 | 
1481 | h1.version {
1482 |   color: #f60;
1483 |   font-size: 1.5em;
1484 | }
1485 | 
1486 | h1.title {
1487 |   color: #f60;
1488 | }
1489 | 
1490 | h1,
1491 | h2,
1492 | h3,
1493 | h4,
1494 | h5,
1495 | h6 {
1496 |   position: relative;
1497 | }
1498 | 
1499 | h1 .secnum {
1500 |   text-decoration: none;
1501 |   margin-right: 5px;
1502 | }
1503 | 
1504 | h1 span.title {
1505 |   order: 2;
1506 | }
1507 | 
1508 | h1 {
1509 |   font-size: 2.67em;
1510 |   margin-bottom: 0;
1511 |   line-height: 1em;
1512 | }
1513 | h2 {
1514 |   font-size: 2em;
1515 | }
1516 | h3 {
1517 |   font-size: 1.56em;
1518 | }
1519 | h4 {
1520 |   font-size: 1.25em;
1521 | }
1522 | h5 {
1523 |   font-size: 1.11em;
1524 | }
1525 | h6 {
1526 |   font-size: 1em;
1527 | }
1528 | 
1529 | pre code.hljs {
1530 |   background: transparent;
1531 | }
1532 | 
1533 | emu-clause[id],
1534 | emu-annex[id],
1535 | emu-intro[id] {
1536 |   scroll-margin-top: 2ex;
1537 | }
1538 | 
1539 | emu-intro h1,
1540 | emu-clause h1,
1541 | emu-annex h1 {
1542 |   font-size: 2em;
1543 | }
1544 | emu-intro h2,
1545 | emu-clause h2,
1546 | emu-annex h2 {
1547 |   font-size: 1.56em;
1548 | }
1549 | emu-intro h3,
1550 | emu-clause h3,
1551 | emu-annex h3 {
1552 |   font-size: 1.25em;
1553 | }
1554 | emu-intro h4,
1555 | emu-clause h4,
1556 | emu-annex h4 {
1557 |   font-size: 1.11em;
1558 | }
1559 | emu-intro h5,
1560 | emu-clause h5,
1561 | emu-annex h5 {
1562 |   font-size: 1em;
1563 | }
1564 | emu-intro h6,
1565 | emu-clause h6,
1566 | emu-annex h6 {
1567 |   font-size: 0.9em;
1568 | }
1569 | emu-intro emu-intro h1,
1570 | emu-clause emu-clause h1,
1571 | emu-annex emu-annex h1 {
1572 |   font-size: 1.56em;
1573 | }
1574 | emu-intro emu-intro h2,
1575 | emu-clause emu-clause h2,
1576 | emu-annex emu-annex h2 {
1577 |   font-size: 1.25em;
1578 | }
1579 | emu-intro emu-intro h3,
1580 | emu-clause emu-clause h3,
1581 | emu-annex emu-annex h3 {
1582 |   font-size: 1.11em;
1583 | }
1584 | emu-intro emu-intro h4,
1585 | emu-clause emu-clause h4,
1586 | emu-annex emu-annex h4 {
1587 |   font-size: 1em;
1588 | }
1589 | emu-intro emu-intro h5,
1590 | emu-clause emu-clause h5,
1591 | emu-annex emu-annex h5 {
1592 |   font-size: 0.9em;
1593 | }
1594 | emu-intro emu-intro emu-intro h1,
1595 | emu-clause emu-clause emu-clause h1,
1596 | emu-annex emu-annex emu-annex h1 {
1597 |   font-size: 1.25em;
1598 | }
1599 | emu-intro emu-intro emu-intro h2,
1600 | emu-clause emu-clause emu-clause h2,
1601 | emu-annex emu-annex emu-annex h2 {
1602 |   font-size: 1.11em;
1603 | }
1604 | emu-intro emu-intro emu-intro h3,
1605 | emu-clause emu-clause emu-clause h3,
1606 | emu-annex emu-annex emu-annex h3 {
1607 |   font-size: 1em;
1608 | }
1609 | emu-intro emu-intro emu-intro h4,
1610 | emu-clause emu-clause emu-clause h4,
1611 | emu-annex emu-annex emu-annex h4 {
1612 |   font-size: 0.9em;
1613 | }
1614 | emu-intro emu-intro emu-intro emu-intro h1,
1615 | emu-clause emu-clause emu-clause emu-clause h1,
1616 | emu-annex emu-annex emu-annex emu-annex h1 {
1617 |   font-size: 1.11em;
1618 | }
1619 | emu-intro emu-intro emu-intro emu-intro h2,
1620 | emu-clause emu-clause emu-clause emu-clause h2,
1621 | emu-annex emu-annex emu-annex emu-annex h2 {
1622 |   font-size: 1em;
1623 | }
1624 | emu-intro emu-intro emu-intro emu-intro h3,
1625 | emu-clause emu-clause emu-clause emu-clause h3,
1626 | emu-annex emu-annex emu-annex emu-annex h3 {
1627 |   font-size: 0.9em;
1628 | }
1629 | emu-intro emu-intro emu-intro emu-intro emu-intro h1,
1630 | emu-clause emu-clause emu-clause emu-clause emu-clause h1,
1631 | emu-annex emu-annex emu-annex emu-annex emu-annex h1 {
1632 |   font-size: 1em;
1633 | }
1634 | emu-intro emu-intro emu-intro emu-intro emu-intro h2,
1635 | emu-clause emu-clause emu-clause emu-clause emu-clause h2,
1636 | emu-annex emu-annex emu-annex emu-annex emu-annex h2 {
1637 |   font-size: 0.9em;
1638 | }
1639 | emu-intro emu-intro emu-intro emu-intro emu-intro emu-intro h1,
1640 | emu-clause emu-clause emu-clause emu-clause emu-clause emu-clause h1,
1641 | emu-annex emu-annex emu-annex emu-annex emu-annex emu-annex h1 {
1642 |   font-size: 0.9em;
1643 | }
1644 | 
1645 | emu-clause,
1646 | emu-intro,
1647 | emu-annex {
1648 |   display: block;
1649 | }
1650 | 
1651 | /* these values are twice the font-size for the <h1> titles for clauses */
1652 | emu-intro,
1653 | emu-clause,
1654 | emu-annex {
1655 |   margin-top: 4em;
1656 | }
1657 | emu-intro emu-intro,
1658 | emu-clause emu-clause,
1659 | emu-annex emu-annex {
1660 |   margin-top: 3.12em;
1661 | }
1662 | emu-intro emu-intro emu-intro,
1663 | emu-clause emu-clause emu-clause,
1664 | emu-annex emu-annex emu-annex {
1665 |   margin-top: 2.5em;
1666 | }
1667 | emu-intro emu-intro emu-intro emu-intro,
1668 | emu-clause emu-clause emu-clause emu-clause,
1669 | emu-annex emu-annex emu-annex emu-annex {
1670 |   margin-top: 2.22em;
1671 | }
1672 | emu-intro emu-intro emu-intro emu-intro emu-intro,
1673 | emu-clause emu-clause emu-clause emu-clause emu-clause,
1674 | emu-annex emu-annex emu-annex emu-annex emu-annex {
1675 |   margin-top: 2em;
1676 | }
1677 | emu-intro emu-intro emu-intro emu-intro emu-intro emu-intro,
1678 | emu-clause emu-clause emu-clause emu-clause emu-clause emu-clause,
1679 | emu-annex emu-annex emu-annex emu-annex emu-annex emu-annex {
1680 |   margin-top: 1.8em;
1681 | }
1682 | 
1683 | #spec-container > emu-intro:first-of-type,
1684 | #spec-container > emu-clause:first-of-type,
1685 | #spec-container > emu-annex:first-of-type {
1686 |   margin-top: 0;
1687 | }
1688 | 
1689 | /* Figures and tables */
1690 | figure {
1691 |   display: block;
1692 |   margin: 1em 0 3em 0;
1693 | }
1694 | figure object {
1695 |   display: block;
1696 |   margin: 0 auto;
1697 | }
1698 | figure table.real-table {
1699 |   margin: 0 auto;
1700 | }
1701 | figure figcaption {
1702 |   display: block;
1703 |   color: #555555;
1704 |   font-weight: bold;
1705 |   text-align: center;
1706 | }
1707 | 
1708 | emu-table table {
1709 |   margin: 0 auto;
1710 | }
1711 | 
1712 | emu-table table,
1713 | table.real-table {
1714 |   border-collapse: collapse;
1715 | }
1716 | 
1717 | emu-table td,
1718 | emu-table th,
1719 | table.real-table td,
1720 | table.real-table th {
1721 |   border: 1px solid black;
1722 |   padding: 0.4em;
1723 |   vertical-align: baseline;
1724 | }
1725 | emu-table th,
1726 | emu-table thead td,
1727 | table.real-table th {
1728 |   background-color: #eeeeee;
1729 | }
1730 | 
1731 | emu-table td {
1732 |   background: #fff;
1733 | }
1734 | 
1735 | /* Note: the left content edges of table.lightweight-table >tbody >tr >td
1736 |    and div.display line up. */
1737 | table.lightweight-table {
1738 |   border-collapse: collapse;
1739 |   margin: 0 0 0 1.5em;
1740 | }
1741 | table.lightweight-table td,
1742 | table.lightweight-table th {
1743 |   border: none;
1744 |   padding: 0 0.5em;
1745 |   vertical-align: baseline;
1746 | }
1747 | 
1748 | /* diff styles */
1749 | ins {
1750 |   background-color: #e0f8e0;
1751 |   text-decoration: none;
1752 |   border-bottom: 1px solid #396;
1753 | }
1754 | 
1755 | del {
1756 |   background-color: #fee;
1757 | }
1758 | 
1759 | ins.block,
1760 | del.block,
1761 | emu-production > ins,
1762 | emu-production > del,
1763 | emu-grammar > ins,
1764 | emu-grammar > del {
1765 |   display: block;
1766 | }
1767 | emu-rhs > ins,
1768 | emu-rhs > del {
1769 |   display: inline;
1770 | }
1771 | 
1772 | tr.ins > td > ins {
1773 |   border-bottom: none;
1774 | }
1775 | 
1776 | tr.ins > td {
1777 |   background-color: #e0f8e0;
1778 | }
1779 | 
1780 | tr.del > td {
1781 |   background-color: #fee;
1782 | }
1783 | 
1784 | /* Menu Styles */
1785 | #menu-toggle {
1786 |   font-size: 2em;
1787 | 
1788 |   position: fixed;
1789 |   top: 0;
1790 |   left: 0;
1791 |   width: 1.5em;
1792 |   height: 1.5em;
1793 |   z-index: 3;
1794 |   visibility: hidden;
1795 |   color: #1567a2;
1796 |   background-color: #fff;
1797 | 
1798 |   line-height: 1.5em;
1799 |   text-align: center;
1800 |   -webkit-touch-callout: none;
1801 |   -webkit-user-select: none;
1802 |   -khtml-user-select: none;
1803 |   -moz-user-select: none;
1804 |   -ms-user-select: none;
1805 |   user-select: none;
1806 | 
1807 |   cursor: pointer;
1808 | }
1809 | 
1810 | #menu {
1811 |   display: flex;
1812 |   flex-direction: column;
1813 |   width: 33%;
1814 |   height: 100vh;
1815 |   max-width: 500px;
1816 |   box-sizing: border-box;
1817 |   background-color: #ddd;
1818 |   overflow: hidden;
1819 |   transition: opacity 0.1s linear;
1820 |   padding: 0 5px;
1821 |   position: fixed;
1822 |   left: 0;
1823 |   top: 0;
1824 |   border-right: 2px solid #bbb;
1825 | 
1826 |   z-index: 2;
1827 | }
1828 | 
1829 | #menu-spacer {
1830 |   flex-basis: 33%;
1831 |   max-width: 500px;
1832 |   flex-grow: 0;
1833 |   flex-shrink: 0;
1834 | }
1835 | 
1836 | #menu a {
1837 |   color: #1567a2;
1838 | }
1839 | 
1840 | #menu.active {
1841 |   display: flex;
1842 |   opacity: 1;
1843 |   z-index: 2;
1844 | }
1845 | 
1846 | #menu-pins {
1847 |   flex-grow: 1;
1848 |   display: none;
1849 | }
1850 | 
1851 | #menu-pins.active {
1852 |   display: block;
1853 | }
1854 | 
1855 | #menu-pins-list {
1856 |   margin: 0;
1857 |   padding: 0;
1858 |   counter-reset: pins-counter;
1859 | }
1860 | 
1861 | #menu-pins-list > li:before {
1862 |   content: counter(pins-counter);
1863 |   counter-increment: pins-counter;
1864 |   display: inline-block;
1865 |   width: 25px;
1866 |   text-align: center;
1867 |   border: 1px solid #bbb;
1868 |   padding: 2px;
1869 |   margin: 4px;
1870 |   box-sizing: border-box;
1871 |   line-height: 1em;
1872 |   background-color: #ccc;
1873 |   border-radius: 4px;
1874 | }
1875 | #menu-toc > ol {
1876 |   padding: 0;
1877 |   flex-grow: 1;
1878 | }
1879 | 
1880 | #menu-toc > ol li {
1881 |   padding: 0;
1882 | }
1883 | 
1884 | #menu-toc > ol,
1885 | #menu-toc > ol ol {
1886 |   list-style-type: none;
1887 |   margin: 0;
1888 |   padding: 0;
1889 | }
1890 | 
1891 | #menu-toc > ol ol {
1892 |   padding-left: 0.75em;
1893 | }
1894 | 
1895 | #menu-toc li {
1896 |   text-overflow: ellipsis;
1897 |   overflow: hidden;
1898 |   white-space: nowrap;
1899 | }
1900 | 
1901 | #menu-toc .item-toggle {
1902 |   display: inline-block;
1903 |   transform: rotate(-45deg) translate(-5px, -5px);
1904 |   transition: transform 0.1s ease;
1905 |   text-align: center;
1906 |   width: 20px;
1907 | 
1908 |   color: #aab;
1909 | 
1910 |   -webkit-touch-callout: none;
1911 |   -webkit-user-select: none;
1912 |   -khtml-user-select: none;
1913 |   -moz-user-select: none;
1914 |   -ms-user-select: none;
1915 |   user-select: none;
1916 | 
1917 |   cursor: pointer;
1918 | }
1919 | 
1920 | #menu-toc .item-toggle-none {
1921 |   display: inline-block;
1922 |   width: 20px;
1923 | }
1924 | 
1925 | #menu-toc li.active > .item-toggle {
1926 |   transform: rotate(45deg) translate(-5px, -5px);
1927 | }
1928 | 
1929 | #menu-toc li > ol {
1930 |   display: none;
1931 | }
1932 | 
1933 | #menu-toc li.active > ol {
1934 |   display: block;
1935 | }
1936 | 
1937 | #menu-toc li.revealed > a {
1938 |   background-color: #bbb;
1939 |   font-weight: bold;
1940 |   /*
1941 |   background-color: #222;
1942 |   color: #c6d8e4;
1943 |   */
1944 | }
1945 | 
1946 | #menu-toc li.revealed-leaf > a {
1947 |   color: #206ca7;
1948 |   /*
1949 |   background-color: #222;
1950 |   color: #c6d8e4;
1951 |   */
1952 | }
1953 | 
1954 | #menu-toc li.revealed > .item-toggle {
1955 |   transform: rotate(45deg) translate(-5px, -5px);
1956 | }
1957 | 
1958 | #menu-toc li.revealed > ol {
1959 |   display: block;
1960 | }
1961 | 
1962 | #menu-toc li > a {
1963 |   padding: 2px 5px;
1964 | }
1965 | 
1966 | #menu > * {
1967 |   margin-bottom: 5px;
1968 | }
1969 | 
1970 | .menu-pane-header {
1971 |   padding: 0 5px;
1972 |   text-transform: uppercase;
1973 |   background-color: #aaa;
1974 |   color: #335;
1975 |   font-weight: bold;
1976 |   letter-spacing: 2px;
1977 |   flex-grow: 0;
1978 |   flex-shrink: 0;
1979 |   font-size: 0.8em;
1980 | }
1981 | 
1982 | .menu-pane-header emu-opt,
1983 | .menu-pane-header emu-t,
1984 | .menu-pane-header emu-nt {
1985 |   margin-right: 0px;
1986 |   display: inline;
1987 |   color: inherit;
1988 | }
1989 | 
1990 | .menu-pane-header emu-rhs {
1991 |   display: inline;
1992 |   padding-left: 0px;
1993 |   text-indent: 0px;
1994 | }
1995 | 
1996 | .menu-pane-header emu-geq {
1997 |   margin-left: 0px;
1998 | }
1999 | 
2000 | a.menu-pane-header-production {
2001 |   color: inherit;
2002 | }
2003 | 
2004 | .menu-pane-header-production {
2005 |   text-transform: none;
2006 |   letter-spacing: 1.5px;
2007 |   padding-left: 0.5em;
2008 | }
2009 | 
2010 | #menu-toc {
2011 |   display: flex;
2012 |   flex-direction: column;
2013 |   width: 100%;
2014 |   overflow: hidden;
2015 |   flex-grow: 1;
2016 | }
2017 | 
2018 | #menu-toc ol.toc {
2019 |   overflow-x: hidden;
2020 |   overflow-y: auto;
2021 | }
2022 | 
2023 | #menu-search {
2024 |   position: relative;
2025 |   flex-grow: 0;
2026 |   flex-shrink: 0;
2027 |   width: 100%;
2028 | 
2029 |   display: flex;
2030 |   flex-direction: column;
2031 | 
2032 |   max-height: 300px;
2033 | }
2034 | 
2035 | #menu-trace-list {
2036 |   display: none;
2037 | }
2038 | 
2039 | #menu-search-box {
2040 |   box-sizing: border-box;
2041 |   display: block;
2042 |   width: 100%;
2043 |   margin: 5px 0 0 0;
2044 |   font-size: 1em;
2045 |   padding: 2px;
2046 |   background-color: #bbb;
2047 |   border: 1px solid #999;
2048 | }
2049 | 
2050 | #menu-search-results {
2051 |   overflow-x: hidden;
2052 |   overflow-y: auto;
2053 | }
2054 | 
2055 | li.menu-search-result-clause:before {
2056 |   content: 'clause';
2057 |   width: 40px;
2058 |   display: inline-block;
2059 |   text-align: right;
2060 |   padding-right: 1ex;
2061 |   color: #666;
2062 |   font-size: 75%;
2063 | }
2064 | li.menu-search-result-op:before {
2065 |   content: 'op';
2066 |   width: 40px;
2067 |   display: inline-block;
2068 |   text-align: right;
2069 |   padding-right: 1ex;
2070 |   color: #666;
2071 |   font-size: 75%;
2072 | }
2073 | 
2074 | li.menu-search-result-prod:before {
2075 |   content: 'prod';
2076 |   width: 40px;
2077 |   display: inline-block;
2078 |   text-align: right;
2079 |   padding-right: 1ex;
2080 |   color: #666;
2081 |   font-size: 75%;
2082 | }
2083 | 
2084 | li.menu-search-result-term:before {
2085 |   content: 'term';
2086 |   width: 40px;
2087 |   display: inline-block;
2088 |   text-align: right;
2089 |   padding-right: 1ex;
2090 |   color: #666;
2091 |   font-size: 75%;
2092 | }
2093 | 
2094 | #menu-search-results ul {
2095 |   padding: 0 5px;
2096 |   margin: 0;
2097 | }
2098 | 
2099 | #menu-search-results li {
2100 |   white-space: nowrap;
2101 |   text-overflow: ellipsis;
2102 | }
2103 | 
2104 | #menu-trace-list {
2105 |   counter-reset: item;
2106 |   margin: 0 0 0 20px;
2107 |   padding: 0;
2108 | }
2109 | #menu-trace-list li {
2110 |   display: block;
2111 |   white-space: nowrap;
2112 | }
2113 | 
2114 | #menu-trace-list li .secnum:after {
2115 |   content: ' ';
2116 | }
2117 | #menu-trace-list li:before {
2118 |   content: counter(item) ' ';
2119 |   background-color: #222;
2120 |   counter-increment: item;
2121 |   color: #999;
2122 |   width: 20px;
2123 |   height: 20px;
2124 |   line-height: 20px;
2125 |   display: inline-block;
2126 |   text-align: center;
2127 |   margin: 2px 4px 2px 0;
2128 | }
2129 | 
2130 | @media (max-width: 1000px) {
2131 |   body {
2132 |     margin: 0;
2133 |     display: block;
2134 |   }
2135 | 
2136 |   #menu {
2137 |     display: none;
2138 |     padding-top: 3em;
2139 |     width: 450px;
2140 |   }
2141 | 
2142 |   #menu.active {
2143 |     position: fixed;
2144 |     height: 100%;
2145 |     left: 0;
2146 |     top: 0;
2147 |     right: 300px;
2148 |   }
2149 | 
2150 |   #menu-toggle {
2151 |     visibility: visible;
2152 |   }
2153 | 
2154 |   #spec-container {
2155 |     padding: 0 5px;
2156 |   }
2157 | 
2158 |   #references-pane-spacer {
2159 |     display: none;
2160 |   }
2161 | }
2162 | 
2163 | @media only screen and (max-width: 800px) {
2164 |   #menu {
2165 |     width: 100%;
2166 |   }
2167 | 
2168 |   h1 .secnum:empty {
2169 |     margin: 0;
2170 |     padding: 0;
2171 |   }
2172 | }
2173 | 
2174 | /* Toolbox */
2175 | .toolbox-container {
2176 |   position: absolute;
2177 |   display: none;
2178 |   padding-bottom: 7px;
2179 | }
2180 | 
2181 | .toolbox-container.active {
2182 |   display: inline-block;
2183 | }
2184 | 
2185 | .toolbox {
2186 |   position: relative;
2187 |   background: #ddd;
2188 |   border: 1px solid #aaa;
2189 |   color: #eee;
2190 |   padding: 5px;
2191 |   border-radius: 3px;
2192 | }
2193 | 
2194 | .toolbox a {
2195 |   text-decoration: none;
2196 |   padding: 0 5px;
2197 | }
2198 | 
2199 | .toolbox a:hover {
2200 |   text-decoration: underline;
2201 | }
2202 | 
2203 | .toolbox:after,
2204 | .toolbox:before {
2205 |   top: 100%;
2206 |   left: 15px;
2207 |   border: solid transparent;
2208 |   content: ' ';
2209 |   height: 0;
2210 |   width: 0;
2211 |   position: absolute;
2212 |   pointer-events: none;
2213 | }
2214 | 
2215 | .toolbox:after {
2216 |   border-color: rgba(0, 0, 0, 0);
2217 |   border-top-color: #ddd;
2218 |   border-width: 10px;
2219 |   margin-left: -10px;
2220 | }
2221 | .toolbox:before {
2222 |   border-color: rgba(204, 204, 204, 0);
2223 |   border-top-color: #aaa;
2224 |   border-width: 12px;
2225 |   margin-left: -12px;
2226 | }
2227 | 
2228 | #references-pane-container {
2229 |   position: fixed;
2230 |   bottom: 0;
2231 |   left: 0;
2232 |   right: 0;
2233 |   height: 250px;
2234 |   display: none;
2235 |   background-color: #ddd;
2236 |   z-index: 1;
2237 | }
2238 | 
2239 | #references-pane-table-container {
2240 |   overflow-x: hidden;
2241 |   overflow-y: auto;
2242 | }
2243 | 
2244 | #references-pane-spacer {
2245 |   flex-basis: 33%;
2246 |   max-width: 500px;
2247 | }
2248 | 
2249 | #references-pane {
2250 |   flex-grow: 1;
2251 |   overflow: hidden;
2252 |   display: flex;
2253 |   flex-direction: column;
2254 | }
2255 | 
2256 | #references-pane-container.active {
2257 |   display: flex;
2258 | }
2259 | 
2260 | #references-pane-close:after {
2261 |   content: '✖';
2262 |   float: right;
2263 |   cursor: pointer;
2264 | }
2265 | 
2266 | #references-pane table tr td:first-child {
2267 |   text-align: right;
2268 |   padding-right: 5px;
2269 | }
2270 | 
2271 | @media print {
2272 |   #menu-toggle {
2273 |     display: none;
2274 |   }
2275 | }
2276 | 
2277 | [normative-optional],
2278 | [legacy] {
2279 |   border-left: 5px solid #ff6600;
2280 |   padding: 0.5em;
2281 |   display: block;
2282 |   background: #ffeedd;
2283 | }
2284 | 
2285 | .clause-attributes-tag {
2286 |   text-transform: uppercase;
2287 |   color: #884400;
2288 | }
2289 | 
2290 | .clause-attributes-tag a {
2291 |   color: #884400;
2292 | }
2293 | </style></head><body><div id="menu-toggle">☰</div><div id="menu-spacer"></div><div id="menu"><div id="menu-search"><input type="text" id="menu-search-box" placeholder="Search..."><div id="menu-search-results" class="inactive"></div></div><div id="menu-pins"><div class="menu-pane-header">Pins</div><ul id="menu-pins-list"></ul></div><div class="menu-pane-header">Table of Contents</div><div id="menu-toc"><ol class="toc"><li><span class="item-toggle-none"></span><a href="#sec-demo-clause" title="This is an emu-clause"><span class="secnum">1</span> This is an emu-clause</a></li><li><span class="item-toggle-none"></span><a href="#sec-copyright-and-software-license" title="Copyright &amp; Software License"><span class="secnum">A</span> Copyright &amp; Software License</a></li></ol></div></div><div id="spec-container"><h1 class="version">Stage -1 Draft / January 26, 2022</h1><h1 class="title">Proposal Title Goes Here</h1>
2294 | 
2295 | <emu-clause id="sec-demo-clause">
2296 |   <h1><span class="secnum">1</span> This is an emu-clause</h1>
2297 |   <p>This is an algorithm:</p>
2298 |   <emu-alg><ol><li>Let <var>proposal</var> be <emu-val>undefined</emu-val>.</li><li>If IsAccepted(<var>proposal</var>),<ol><li>Let <var>stage</var> be <emu-val>0</emu-val>.</li></ol></li><li>Else,<ol><li>Let <var>stage</var> be <emu-val>-1</emu-val>.</li></ol></li><li>Return ?&nbsp;<emu-xref aoid="ToString" id="_ref_0"><a href="https://tc39.es/ecma262/#sec-tostring">ToString</a></emu-xref>(<var>proposal</var>).</li></ol></emu-alg>
2299 | </emu-clause><emu-annex id="sec-copyright-and-software-license">
2300 |       <h1><span class="secnum">A</span> Copyright &amp; Software License</h1>
2301 |       
2302 |       <h2>Copyright Notice</h2>
2303 |       <p>© 2022 Your Name(s) Here</p>
2304 | 
2305 |       <h2>Software License</h2>
2306 |       <p>All Software contained in this document ("Software") is protected by copyright and is being made available under the "BSD License", included below. This Software may be subject to third party rights (rights from parties other than Ecma International), including patent rights, and no licenses under such third party rights are granted under this license even if the third party concerned is a member of Ecma International. SEE THE ECMA CODE OF CONDUCT IN PATENT MATTERS AVAILABLE AT https://ecma-international.org/memento/codeofconduct.htm FOR INFORMATION REGARDING THE LICENSING OF PATENT CLAIMS THAT ARE REQUIRED TO IMPLEMENT ECMA INTERNATIONAL STANDARDS.</p>
2307 | 
2308 | <p>Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:</p>
2309 | 
2310 | <ol>
2311 |   <li>Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.</li>
2312 |   <li>Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.</li>
2313 |   <li>Neither the name of the authors nor Ecma International may be used to endorse or promote products derived from this software without specific prior written permission.</li>
2314 | </ol>
2315 | 
2316 | <p>THIS SOFTWARE IS PROVIDED BY THE ECMA INTERNATIONAL "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL ECMA INTERNATIONAL BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.</p>
2317 | 
2318 |     </emu-annex>
2319 | </div></body>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "template-for-proposals",
 4 |   "description": "A repository template for ECMAScript proposals.",
 5 |   "scripts": {
 6 |     "start": "npm run build-loose -- --watch",
 7 |     "build": "npm run build-loose -- --strict",
 8 |     "build-loose": "ecmarkup --verbose spec.emu index.html"
 9 |   },
10 |   "homepage": "https://github.com/tc39/template-for-proposals#readme",
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/tc39/template-for-proposals.git"
14 |   },
15 |   "license": "MIT",
16 |   "devDependencies": {
17 |     "ecmarkup": "^8.1.0"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/spec.emu:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <meta charset="utf8">
 3 | <link rel="stylesheet" href="./spec.css">
 4 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/github.min.css">
 5 | <script src="./spec.js"></script>
 6 | <pre class="metadata">
 7 | title: Proposal Title Goes Here
 8 | stage: -1
 9 | contributors: Your Name(s) Here
10 | </pre>
11 | 
12 | <emu-clause id="sec-demo-clause">
13 |   <h1>This is an emu-clause</h1>
14 |   <p>This is an algorithm:</p>
15 |   <emu-alg>
16 |     1. Let _proposal_ be *undefined*.
17 |     1. If IsAccepted(_proposal_),
18 |       1. Let _stage_ be *0*.
19 |     1. Else,
20 |       1. Let _stage_ be *-1*.
21 |     1. Return ? ToString(_proposal_).
22 |   </emu-alg>
23 | </emu-clause>
24 | 


--------------------------------------------------------------------------------