├── .gitattributes
├── .github
    └── workflows
    │   └── build.yml
├── .gitignore
├── .npmrc
├── LICENSE
├── README.md
├── 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) 2021 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 | # proposal-array-grouping
 2 | 
 3 | Note: this proposal is now [at stage 4](https://github.com/tc39/proposals/commit/e11ea25d41c8ab28b6632b5d355359dcb528ee6f). See the spec PR here: https://github.com/tc39/ecma262/pull/3176
 4 | 
 5 | A proposal to make grouping of items in an array (and iterables) easier.
 6 | 
 7 | ```js
 8 | const array = [1, 2, 3, 4, 5];
 9 | 
10 | // `Object.groupBy` groups items by arbitrary key.
11 | // In this case, we're grouping by even/odd keys
12 | Object.groupBy(array, (num, index) => {
13 |   return num % 2 === 0 ? 'even': 'odd';
14 | });
15 | // =>  { odd: [1, 3, 5], even: [2, 4] }
16 | 
17 | // `Map.groupBy` returns items in a Map, and is useful for grouping
18 | // using an object key.
19 | const odd  = { odd: true };
20 | const even = { even: true };
21 | Map.groupBy(array, (num, index) => {
22 |   return num % 2 === 0 ? even: odd;
23 | });
24 | // =>  Map { {odd: true}: [1, 3, 5], {even: true}: [2, 4] }
25 | ```
26 | 
27 | ## Champions
28 | 
29 | - Justin Ridgewell ([@jridgewell](https://github.com/jridgewell))
30 | - Jordan Harband ([@ljharb](https://github.com/ljharb))
31 | 
32 | ## Status
33 | 
34 | Current [Stage](https://tc39.es/process-document/): 4
35 | 
36 | ## Motivation
37 | 
38 | Array grouping is an extremely common operation, best exemplified by
39 | SQL's `GROUP BY` clause and MapReduce programming (which is better
40 | thought of map-group-reduce). The ability to combine like data into
41 | groups allows developers to compute higher order datasets, like the
42 | average age of a cohort or daily LCP values for a webpage.
43 | 
44 | Two methods are offered, `Object.groupBy` and `Map.groupBy`. The first
45 | returns a null-prototype object, which allows ergonomic destructuring
46 | and prevents accidental collisions with global Object properties. The
47 | second returns a regular `Map` instance, which allows grouping on
48 | complex key types (imagine a compound key or [tuple]).
49 | 
50 | ## Why static methods?
51 | 
52 | We've [found][sugar-bug] a web compatibility issue with the name
53 | `Array.prototype.groupBy`. The [Sugar][sugar] library until v1.4.0
54 | conditionally monkey-patches `Array.prototype` with an incompatible
55 | method. By providing a native `groupBy`, these versions of Sugar would
56 | fail to install their implementation, and any sites that depend on their
57 | behavior would break. We've found some 660 origins that use these
58 | versions of the Sugar library.
59 | 
60 | We then attempted the name `Array.prototype.group`, but this ran into
61 | [code that uses an array as an arbitrary hashmap][arraymap-bug]. Because
62 | these bugs are exceptionally difficult to detect (it requires devs to
63 | detect and know how to report the bug to us), the committee didn't want
64 | to attempt another prototype method name. Instead we chose to use static
65 | method, which we believe is unorthodox enough to not risk a web
66 | compatibility issue. This also gives us a nice way to support Records
67 | and Tuples in the future.
68 | 
69 | ## Polyfill
70 | 
71 | - A polyfill is available in the [core-js] library. You can find it in
72 |   the [ECMAScript proposals section][core-js-section].
73 | 
74 | ## Related
75 | 
76 | - Lodash
77 |   - [`_.groupBy`][lodash] ([850k downloads/week][lodash-npm])
78 | 
79 | [tuple]: https://github.com/tc39/proposal-record-tuple
80 | [core-js]: https://github.com/zloirock/core-js
81 | [core-js-section]: https://github.com/zloirock/core-js#array-grouping
82 | [lodash]: https://lodash.com/docs/4.17.15#groupBy
83 | [lodash-npm]: https://www.npmjs.com/package/lodash.groupby
84 | [sugar]: https://sugarjs.com/
85 | [sugar-bug]: https://github.com/tc39/proposal-array-grouping/issues/37
86 | [arraymap-bug]: https://github.com/tc39/proposal-array-grouping/issues/44
87 | 


--------------------------------------------------------------------------------
/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>Array Grouping</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.key === '/') {
 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.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 => ({ key: getKey(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 |       let key = getKey(entry);
 224 |       if (!key) {
 225 |         // biblio entries without a key aren't searchable
 226 |         continue;
 227 |       }
 228 | 
 229 |       let match = fuzzysearch(searchString, key);
 230 |       if (match) {
 231 |         results.push({ key, entry, match });
 232 |       }
 233 |     }
 234 | 
 235 |     results.forEach(result => {
 236 |       result.relevance = relevance(result, searchString);
 237 |     });
 238 | 
 239 |     results = results.sort((a, b) => b.relevance - a.relevance);
 240 |   }
 241 | 
 242 |   if (results.length > 50) {
 243 |     results = results.slice(0, 50);
 244 |   }
 245 | 
 246 |   this.displayResults(results);
 247 | };
 248 | Search.prototype.hideSearch = function () {
 249 |   this.$search.classList.remove('active');
 250 | };
 251 | 
 252 | Search.prototype.showSearch = function () {
 253 |   this.$search.classList.add('active');
 254 | };
 255 | 
 256 | Search.prototype.selectResult = function () {
 257 |   let $first = this.$searchResults.querySelector('li:first-child a');
 258 | 
 259 |   if ($first) {
 260 |     document.location = $first.getAttribute('href');
 261 |   }
 262 | 
 263 |   this.$searchBox.value = '';
 264 |   this.$searchBox.blur();
 265 |   this.displayResults([]);
 266 |   this.hideSearch();
 267 | 
 268 |   if (this._closeAfterSearch) {
 269 |     this.menu.hide();
 270 |   }
 271 | };
 272 | 
 273 | Search.prototype.displayResults = function (results) {
 274 |   if (results.length > 0) {
 275 |     this.$searchResults.classList.remove('no-results');
 276 | 
 277 |     let html = '<ul>';
 278 | 
 279 |     results.forEach(result => {
 280 |       let key = result.key;
 281 |       let entry = result.entry;
 282 |       let id = entry.id;
 283 |       let cssClass = '';
 284 |       let text = '';
 285 | 
 286 |       if (entry.type === 'clause') {
 287 |         let number = entry.number ? entry.number + ' ' : '';
 288 |         text = number + key;
 289 |         cssClass = 'clause';
 290 |         id = entry.id;
 291 |       } else if (entry.type === 'production') {
 292 |         text = key;
 293 |         cssClass = 'prod';
 294 |         id = entry.id;
 295 |       } else if (entry.type === 'op') {
 296 |         text = key;
 297 |         cssClass = 'op';
 298 |         id = entry.id || entry.refId;
 299 |       } else if (entry.type === 'term') {
 300 |         text = key;
 301 |         cssClass = 'term';
 302 |         id = entry.id || entry.refId;
 303 |       }
 304 | 
 305 |       if (text) {
 306 |         // prettier-ignore
 307 |         html += `<li class=menu-search-result-${cssClass}><a href="${makeLinkToId(id)}">${text}</a></li>`;
 308 |       }
 309 |     });
 310 | 
 311 |     html += '</ul>';
 312 | 
 313 |     this.$searchResults.innerHTML = html;
 314 |   } else {
 315 |     this.$searchResults.innerHTML = '';
 316 |     this.$searchResults.classList.add('no-results');
 317 |   }
 318 | };
 319 | 
 320 | function getKey(item) {
 321 |   if (item.key) {
 322 |     return item.key;
 323 |   }
 324 |   switch (item.type) {
 325 |     case 'clause':
 326 |       return item.title || item.titleHTML;
 327 |     case 'production':
 328 |       return item.name;
 329 |     case 'op':
 330 |       return item.aoid;
 331 |     case 'term':
 332 |       return item.term;
 333 |     case 'table':
 334 |     case 'figure':
 335 |     case 'example':
 336 |     case 'note':
 337 |       return item.caption;
 338 |     case 'step':
 339 |       return item.id;
 340 |     default:
 341 |       throw new Error("Can't get key for " + item.type);
 342 |   }
 343 | }
 344 | 
 345 | function Menu() {
 346 |   this.$toggle = document.getElementById('menu-toggle');
 347 |   this.$menu = document.getElementById('menu');
 348 |   this.$toc = document.querySelector('menu-toc > ol');
 349 |   this.$pins = document.querySelector('#menu-pins');
 350 |   this.$pinList = document.getElementById('menu-pins-list');
 351 |   this.$toc = document.querySelector('#menu-toc > ol');
 352 |   this.$specContainer = document.getElementById('spec-container');
 353 |   this.search = new Search(this);
 354 | 
 355 |   this._pinnedIds = {};
 356 |   this.loadPinEntries();
 357 | 
 358 |   // toggle menu
 359 |   this.$toggle.addEventListener('click', this.toggle.bind(this));
 360 | 
 361 |   // keydown events for pinned clauses
 362 |   document.addEventListener('keydown', this.documentKeydown.bind(this));
 363 | 
 364 |   // toc expansion
 365 |   let tocItems = this.$menu.querySelectorAll('#menu-toc li');
 366 |   for (let i = 0; i < tocItems.length; i++) {
 367 |     let $item = tocItems[i];
 368 |     $item.addEventListener('click', event => {
 369 |       $item.classList.toggle('active');
 370 |       event.stopPropagation();
 371 |     });
 372 |   }
 373 | 
 374 |   // close toc on toc item selection
 375 |   let tocLinks = this.$menu.querySelectorAll('#menu-toc li > a');
 376 |   for (let i = 0; i < tocLinks.length; i++) {
 377 |     let $link = tocLinks[i];
 378 |     $link.addEventListener('click', event => {
 379 |       this.toggle();
 380 |       event.stopPropagation();
 381 |     });
 382 |   }
 383 | 
 384 |   // update active clause on scroll
 385 |   window.addEventListener('scroll', debounce(this.updateActiveClause.bind(this)));
 386 |   this.updateActiveClause();
 387 | 
 388 |   // prevent menu scrolling from scrolling the body
 389 |   this.$toc.addEventListener('wheel', e => {
 390 |     let target = e.currentTarget;
 391 |     let offTop = e.deltaY < 0 && target.scrollTop === 0;
 392 |     if (offTop) {
 393 |       e.preventDefault();
 394 |     }
 395 |     let offBottom = e.deltaY > 0 && target.offsetHeight + target.scrollTop >= target.scrollHeight;
 396 | 
 397 |     if (offBottom) {
 398 |       e.preventDefault();
 399 |     }
 400 |   });
 401 | }
 402 | 
 403 | Menu.prototype.documentKeydown = function (e) {
 404 |   e.stopPropagation();
 405 |   if (e.keyCode === 80) {
 406 |     this.togglePinEntry();
 407 |   } else if (e.keyCode > 48 && e.keyCode < 58) {
 408 |     this.selectPin(e.keyCode - 49);
 409 |   }
 410 | };
 411 | 
 412 | Menu.prototype.updateActiveClause = function () {
 413 |   this.setActiveClause(findActiveClause(this.$specContainer));
 414 | };
 415 | 
 416 | Menu.prototype.setActiveClause = function (clause) {
 417 |   this.$activeClause = clause;
 418 |   this.revealInToc(this.$activeClause);
 419 | };
 420 | 
 421 | Menu.prototype.revealInToc = function (path) {
 422 |   let current = this.$toc.querySelectorAll('li.revealed');
 423 |   for (let i = 0; i < current.length; i++) {
 424 |     current[i].classList.remove('revealed');
 425 |     current[i].classList.remove('revealed-leaf');
 426 |   }
 427 | 
 428 |   current = this.$toc;
 429 |   let index = 0;
 430 |   outer: while (index < path.length) {
 431 |     let children = current.children;
 432 |     for (let i = 0; i < children.length; i++) {
 433 |       if ('#' + path[index].id === children[i].children[1].hash) {
 434 |         children[i].classList.add('revealed');
 435 |         if (index === path.length - 1) {
 436 |           children[i].classList.add('revealed-leaf');
 437 |           let rect = children[i].getBoundingClientRect();
 438 |           // this.$toc.getBoundingClientRect().top;
 439 |           let tocRect = this.$toc.getBoundingClientRect();
 440 |           if (rect.top + 10 > tocRect.bottom) {
 441 |             this.$toc.scrollTop =
 442 |               this.$toc.scrollTop + (rect.top - tocRect.bottom) + (rect.bottom - rect.top);
 443 |           } else if (rect.top < tocRect.top) {
 444 |             this.$toc.scrollTop = this.$toc.scrollTop - (tocRect.top - rect.top);
 445 |           }
 446 |         }
 447 |         current = children[i].querySelector('ol');
 448 |         index++;
 449 |         continue outer;
 450 |       }
 451 |     }
 452 |     console.log('could not find location in table of contents', path);
 453 |     break;
 454 |   }
 455 | };
 456 | 
 457 | function findActiveClause(root, path) {
 458 |   path = path || [];
 459 | 
 460 |   let visibleClauses = getVisibleClauses(root, path);
 461 |   let midpoint = Math.floor(window.innerHeight / 2);
 462 | 
 463 |   for (let [$clause, path] of visibleClauses) {
 464 |     let { top: clauseTop, bottom: clauseBottom } = $clause.getBoundingClientRect();
 465 |     let isFullyVisibleAboveTheFold =
 466 |       clauseTop > 0 && clauseTop < midpoint && clauseBottom < window.innerHeight;
 467 |     if (isFullyVisibleAboveTheFold) {
 468 |       return path;
 469 |     }
 470 |   }
 471 | 
 472 |   visibleClauses.sort(([, pathA], [, pathB]) => pathB.length - pathA.length);
 473 |   for (let [$clause, path] of visibleClauses) {
 474 |     let { top: clauseTop, bottom: clauseBottom } = $clause.getBoundingClientRect();
 475 |     let $header = $clause.querySelector('h1');
 476 |     let clauseStyles = getComputedStyle($clause);
 477 |     let marginTop = Math.max(
 478 |       0,
 479 |       parseInt(clauseStyles['margin-top']),
 480 |       parseInt(getComputedStyle($header)['margin-top'])
 481 |     );
 482 |     let marginBottom = Math.max(0, parseInt(clauseStyles['margin-bottom']));
 483 |     let crossesMidpoint =
 484 |       clauseTop - marginTop <= midpoint && clauseBottom + marginBottom >= midpoint;
 485 |     if (crossesMidpoint) {
 486 |       return path;
 487 |     }
 488 |   }
 489 | 
 490 |   return path;
 491 | }
 492 | 
 493 | function getVisibleClauses(root, path) {
 494 |   let childClauses = getChildClauses(root);
 495 |   path = path || [];
 496 | 
 497 |   let result = [];
 498 | 
 499 |   let seenVisibleClause = false;
 500 |   for (let $clause of childClauses) {
 501 |     let { top: clauseTop, bottom: clauseBottom } = $clause.getBoundingClientRect();
 502 |     let isPartiallyVisible =
 503 |       (clauseTop > 0 && clauseTop < window.innerHeight) ||
 504 |       (clauseBottom > 0 && clauseBottom < window.innerHeight) ||
 505 |       (clauseTop < 0 && clauseBottom > window.innerHeight);
 506 | 
 507 |     if (isPartiallyVisible) {
 508 |       seenVisibleClause = true;
 509 |       let innerPath = path.concat($clause);
 510 |       result.push([$clause, innerPath]);
 511 |       result.push(...getVisibleClauses($clause, innerPath));
 512 |     } else if (seenVisibleClause) {
 513 |       break;
 514 |     }
 515 |   }
 516 | 
 517 |   return result;
 518 | }
 519 | 
 520 | function* getChildClauses(root) {
 521 |   for (let el of root.children) {
 522 |     switch (el.nodeName) {
 523 |       // descend into <emu-import>
 524 |       case 'EMU-IMPORT':
 525 |         yield* getChildClauses(el);
 526 |         break;
 527 | 
 528 |       // accept <emu-clause>, <emu-intro>, and <emu-annex>
 529 |       case 'EMU-CLAUSE':
 530 |       case 'EMU-INTRO':
 531 |       case 'EMU-ANNEX':
 532 |         yield el;
 533 |     }
 534 |   }
 535 | }
 536 | 
 537 | Menu.prototype.toggle = function () {
 538 |   this.$menu.classList.toggle('active');
 539 | };
 540 | 
 541 | Menu.prototype.show = function () {
 542 |   this.$menu.classList.add('active');
 543 | };
 544 | 
 545 | Menu.prototype.hide = function () {
 546 |   this.$menu.classList.remove('active');
 547 | };
 548 | 
 549 | Menu.prototype.isVisible = function () {
 550 |   return this.$menu.classList.contains('active');
 551 | };
 552 | 
 553 | Menu.prototype.showPins = function () {
 554 |   this.$pins.classList.add('active');
 555 | };
 556 | 
 557 | Menu.prototype.hidePins = function () {
 558 |   this.$pins.classList.remove('active');
 559 | };
 560 | 
 561 | Menu.prototype.addPinEntry = function (id) {
 562 |   let entry = this.search.biblio.byId[id];
 563 |   if (!entry) {
 564 |     // id was deleted after pin (or something) so remove it
 565 |     delete this._pinnedIds[id];
 566 |     this.persistPinEntries();
 567 |     return;
 568 |   }
 569 | 
 570 |   if (entry.type === 'clause') {
 571 |     let prefix;
 572 |     if (entry.number) {
 573 |       prefix = entry.number + ' ';
 574 |     } else {
 575 |       prefix = '';
 576 |     }
 577 |     // prettier-ignore
 578 |     this.$pinList.innerHTML += `<li><a href="${makeLinkToId(entry.id)}">${prefix}${entry.titleHTML}</a></li>`;
 579 |   } else {
 580 |     this.$pinList.innerHTML += `<li><a href="${makeLinkToId(entry.id)}">${getKey(entry)}</a></li>`;
 581 |   }
 582 | 
 583 |   if (Object.keys(this._pinnedIds).length === 0) {
 584 |     this.showPins();
 585 |   }
 586 |   this._pinnedIds[id] = true;
 587 |   this.persistPinEntries();
 588 | };
 589 | 
 590 | Menu.prototype.removePinEntry = function (id) {
 591 |   let item = this.$pinList.querySelector(`a[href="${makeLinkToId(id)}"]`).parentNode;
 592 |   this.$pinList.removeChild(item);
 593 |   delete this._pinnedIds[id];
 594 |   if (Object.keys(this._pinnedIds).length === 0) {
 595 |     this.hidePins();
 596 |   }
 597 | 
 598 |   this.persistPinEntries();
 599 | };
 600 | 
 601 | Menu.prototype.persistPinEntries = function () {
 602 |   try {
 603 |     if (!window.localStorage) return;
 604 |   } catch (e) {
 605 |     return;
 606 |   }
 607 | 
 608 |   localStorage.pinEntries = JSON.stringify(Object.keys(this._pinnedIds));
 609 | };
 610 | 
 611 | Menu.prototype.loadPinEntries = function () {
 612 |   try {
 613 |     if (!window.localStorage) return;
 614 |   } catch (e) {
 615 |     return;
 616 |   }
 617 | 
 618 |   let pinsString = window.localStorage.pinEntries;
 619 |   if (!pinsString) return;
 620 |   let pins = JSON.parse(pinsString);
 621 |   for (let i = 0; i < pins.length; i++) {
 622 |     this.addPinEntry(pins[i]);
 623 |   }
 624 | };
 625 | 
 626 | Menu.prototype.togglePinEntry = function (id) {
 627 |   if (!id) {
 628 |     id = this.$activeClause[this.$activeClause.length - 1].id;
 629 |   }
 630 | 
 631 |   if (this._pinnedIds[id]) {
 632 |     this.removePinEntry(id);
 633 |   } else {
 634 |     this.addPinEntry(id);
 635 |   }
 636 | };
 637 | 
 638 | Menu.prototype.selectPin = function (num) {
 639 |   document.location = this.$pinList.children[num].children[0].href;
 640 | };
 641 | 
 642 | let menu;
 643 | 
 644 | document.addEventListener('DOMContentLoaded', init);
 645 | 
 646 | function debounce(fn, opts) {
 647 |   opts = opts || {};
 648 |   let timeout;
 649 |   return function (e) {
 650 |     if (opts.stopPropagation) {
 651 |       e.stopPropagation();
 652 |     }
 653 |     let args = arguments;
 654 |     if (timeout) {
 655 |       clearTimeout(timeout);
 656 |     }
 657 |     timeout = setTimeout(() => {
 658 |       timeout = null;
 659 |       fn.apply(this, args);
 660 |     }, 150);
 661 |   };
 662 | }
 663 | 
 664 | let CLAUSE_NODES = ['EMU-CLAUSE', 'EMU-INTRO', 'EMU-ANNEX'];
 665 | function findContainer($elem) {
 666 |   let parentClause = $elem.parentNode;
 667 |   while (parentClause && CLAUSE_NODES.indexOf(parentClause.nodeName) === -1) {
 668 |     parentClause = parentClause.parentNode;
 669 |   }
 670 |   return parentClause;
 671 | }
 672 | 
 673 | function findLocalReferences(parentClause, name) {
 674 |   let vars = parentClause.querySelectorAll('var');
 675 |   let references = [];
 676 | 
 677 |   for (let i = 0; i < vars.length; i++) {
 678 |     let $var = vars[i];
 679 | 
 680 |     if ($var.innerHTML === name) {
 681 |       references.push($var);
 682 |     }
 683 |   }
 684 | 
 685 |   return references;
 686 | }
 687 | 
 688 | let REFERENCED_CLASSES = Array.from({ length: 7 }, (x, i) => `referenced${i}`);
 689 | function chooseHighlightIndex(parentClause) {
 690 |   let counts = REFERENCED_CLASSES.map($class => parentClause.getElementsByClassName($class).length);
 691 |   // Find the earliest index with the lowest count.
 692 |   let minCount = Infinity;
 693 |   let index = null;
 694 |   for (let i = 0; i < counts.length; i++) {
 695 |     if (counts[i] < minCount) {
 696 |       minCount = counts[i];
 697 |       index = i;
 698 |     }
 699 |   }
 700 |   return index;
 701 | }
 702 | 
 703 | function toggleFindLocalReferences($elem) {
 704 |   let parentClause = findContainer($elem);
 705 |   let references = findLocalReferences(parentClause, $elem.innerHTML);
 706 |   if ($elem.classList.contains('referenced')) {
 707 |     references.forEach($reference => {
 708 |       $reference.classList.remove('referenced', ...REFERENCED_CLASSES);
 709 |     });
 710 |   } else {
 711 |     let index = chooseHighlightIndex(parentClause);
 712 |     references.forEach($reference => {
 713 |       $reference.classList.add('referenced', `referenced${index}`);
 714 |     });
 715 |   }
 716 | }
 717 | 
 718 | function installFindLocalReferences() {
 719 |   document.addEventListener('click', e => {
 720 |     if (e.target.nodeName === 'VAR') {
 721 |       toggleFindLocalReferences(e.target);
 722 |     }
 723 |   });
 724 | }
 725 | 
 726 | document.addEventListener('DOMContentLoaded', installFindLocalReferences);
 727 | 
 728 | // The following license applies to the fuzzysearch function
 729 | // The MIT License (MIT)
 730 | // Copyright © 2015 Nicolas Bevacqua
 731 | // Copyright © 2016 Brian Terlson
 732 | // Permission is hereby granted, free of charge, to any person obtaining a copy of
 733 | // this software and associated documentation files (the "Software"), to deal in
 734 | // the Software without restriction, including without limitation the rights to
 735 | // use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 736 | // the Software, and to permit persons to whom the Software is furnished to do so,
 737 | // subject to the following conditions:
 738 | 
 739 | // The above copyright notice and this permission notice shall be included in all
 740 | // copies or substantial portions of the Software.
 741 | 
 742 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 743 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 744 | // FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 745 | // COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 746 | // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 747 | // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 748 | function fuzzysearch(searchString, haystack, caseInsensitive) {
 749 |   let tlen = haystack.length;
 750 |   let qlen = searchString.length;
 751 |   let chunks = 1;
 752 |   let finding = false;
 753 | 
 754 |   if (qlen > tlen) {
 755 |     return false;
 756 |   }
 757 | 
 758 |   if (qlen === tlen) {
 759 |     if (searchString === haystack) {
 760 |       return { caseMatch: true, chunks: 1, prefix: true };
 761 |     } else if (searchString.toLowerCase() === haystack.toLowerCase()) {
 762 |       return { caseMatch: false, chunks: 1, prefix: true };
 763 |     } else {
 764 |       return false;
 765 |     }
 766 |   }
 767 | 
 768 |   let j = 0;
 769 |   outer: for (let i = 0; i < qlen; i++) {
 770 |     let nch = searchString[i];
 771 |     while (j < tlen) {
 772 |       let targetChar = haystack[j++];
 773 |       if (targetChar === nch) {
 774 |         finding = true;
 775 |         continue outer;
 776 |       }
 777 |       if (finding) {
 778 |         chunks++;
 779 |         finding = false;
 780 |       }
 781 |     }
 782 | 
 783 |     if (caseInsensitive) {
 784 |       return false;
 785 |     }
 786 | 
 787 |     return fuzzysearch(searchString.toLowerCase(), haystack.toLowerCase(), true);
 788 |   }
 789 | 
 790 |   return { caseMatch: !caseInsensitive, chunks, prefix: j <= qlen };
 791 | }
 792 | 
 793 | let referencePane = {
 794 |   init() {
 795 |     this.$container = document.createElement('div');
 796 |     this.$container.setAttribute('id', 'references-pane-container');
 797 | 
 798 |     let $spacer = document.createElement('div');
 799 |     $spacer.setAttribute('id', 'references-pane-spacer');
 800 |     $spacer.classList.add('menu-spacer');
 801 | 
 802 |     this.$pane = document.createElement('div');
 803 |     this.$pane.setAttribute('id', 'references-pane');
 804 | 
 805 |     this.$container.appendChild($spacer);
 806 |     this.$container.appendChild(this.$pane);
 807 | 
 808 |     this.$header = document.createElement('div');
 809 |     this.$header.classList.add('menu-pane-header');
 810 |     this.$headerText = document.createElement('span');
 811 |     this.$header.appendChild(this.$headerText);
 812 |     this.$headerRefId = document.createElement('a');
 813 |     this.$header.appendChild(this.$headerRefId);
 814 |     this.$closeButton = document.createElement('span');
 815 |     this.$closeButton.setAttribute('id', 'references-pane-close');
 816 |     this.$closeButton.addEventListener('click', () => {
 817 |       this.deactivate();
 818 |     });
 819 |     this.$header.appendChild(this.$closeButton);
 820 | 
 821 |     this.$pane.appendChild(this.$header);
 822 |     let tableContainer = document.createElement('div');
 823 |     tableContainer.setAttribute('id', 'references-pane-table-container');
 824 | 
 825 |     this.$table = document.createElement('table');
 826 |     this.$table.setAttribute('id', 'references-pane-table');
 827 | 
 828 |     this.$tableBody = this.$table.createTBody();
 829 | 
 830 |     tableContainer.appendChild(this.$table);
 831 |     this.$pane.appendChild(tableContainer);
 832 | 
 833 |     menu.$specContainer.appendChild(this.$container);
 834 |   },
 835 | 
 836 |   activate() {
 837 |     this.$container.classList.add('active');
 838 |   },
 839 | 
 840 |   deactivate() {
 841 |     this.$container.classList.remove('active');
 842 |     this.state = null;
 843 |   },
 844 | 
 845 |   showReferencesFor(entry) {
 846 |     this.activate();
 847 |     this.state = { type: 'ref', id: entry.id };
 848 |     this.$headerText.textContent = 'References to ';
 849 |     let newBody = document.createElement('tbody');
 850 |     let previousId;
 851 |     let previousCell;
 852 |     let dupCount = 0;
 853 |     this.$headerRefId.textContent = '#' + entry.id;
 854 |     this.$headerRefId.setAttribute('href', makeLinkToId(entry.id));
 855 |     this.$headerRefId.style.display = 'inline';
 856 |     (entry.referencingIds || [])
 857 |       .map(id => {
 858 |         let cid = menu.search.biblio.refParentClause[id];
 859 |         let clause = menu.search.biblio.byId[cid];
 860 |         if (clause == null) {
 861 |           throw new Error('could not find clause for id ' + cid);
 862 |         }
 863 |         return { id, clause };
 864 |       })
 865 |       .sort((a, b) => sortByClauseNumber(a.clause, b.clause))
 866 |       .forEach(record => {
 867 |         if (previousId === record.clause.id) {
 868 |           previousCell.innerHTML += ` (<a href="${makeLinkToId(record.id)}">${dupCount + 2}</a>)`;
 869 |           dupCount++;
 870 |         } else {
 871 |           let row = newBody.insertRow();
 872 |           let cell = row.insertCell();
 873 |           cell.innerHTML = record.clause.number;
 874 |           cell = row.insertCell();
 875 |           cell.innerHTML = `<a href="${makeLinkToId(record.id)}">${record.clause.titleHTML}</a>`;
 876 |           previousCell = cell;
 877 |           previousId = record.clause.id;
 878 |           dupCount = 0;
 879 |         }
 880 |       }, this);
 881 |     this.$table.removeChild(this.$tableBody);
 882 |     this.$tableBody = newBody;
 883 |     this.$table.appendChild(this.$tableBody);
 884 |   },
 885 | 
 886 |   showSDOs(sdos, alternativeId) {
 887 |     let rhs = document.getElementById(alternativeId);
 888 |     let parentName = rhs.parentNode.getAttribute('name');
 889 |     let colons = rhs.parentNode.querySelector('emu-geq');
 890 |     rhs = rhs.cloneNode(true);
 891 |     rhs.querySelectorAll('emu-params,emu-constraints').forEach(e => {
 892 |       e.remove();
 893 |     });
 894 |     rhs.querySelectorAll('[id]').forEach(e => {
 895 |       e.removeAttribute('id');
 896 |     });
 897 |     rhs.querySelectorAll('a').forEach(e => {
 898 |       e.parentNode.replaceChild(document.createTextNode(e.textContent), e);
 899 |     });
 900 | 
 901 |     // prettier-ignore
 902 |     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>`;
 903 |     this.$headerText.querySelector('a').append(rhs);
 904 |     this.showSDOsBody(sdos, alternativeId);
 905 |   },
 906 | 
 907 |   showSDOsBody(sdos, alternativeId) {
 908 |     this.activate();
 909 |     this.state = { type: 'sdo', id: alternativeId, html: this.$headerText.innerHTML };
 910 |     this.$headerRefId.style.display = 'none';
 911 |     let newBody = document.createElement('tbody');
 912 |     Object.keys(sdos).forEach(sdoName => {
 913 |       let pair = sdos[sdoName];
 914 |       let clause = pair.clause;
 915 |       let ids = pair.ids;
 916 |       let first = ids[0];
 917 |       let row = newBody.insertRow();
 918 |       let cell = row.insertCell();
 919 |       cell.innerHTML = clause;
 920 |       cell = row.insertCell();
 921 |       let html = '<a href="' + makeLinkToId(first) + '">' + sdoName + '</a>';
 922 |       for (let i = 1; i < ids.length; ++i) {
 923 |         html += ' (<a href="' + makeLinkToId(ids[i]) + '">' + (i + 1) + '</a>)';
 924 |       }
 925 |       cell.innerHTML = html;
 926 |     });
 927 |     this.$table.removeChild(this.$tableBody);
 928 |     this.$tableBody = newBody;
 929 |     this.$table.appendChild(this.$tableBody);
 930 |   },
 931 | };
 932 | 
 933 | let Toolbox = {
 934 |   init() {
 935 |     this.$outer = document.createElement('div');
 936 |     this.$outer.classList.add('toolbox-container');
 937 |     this.$container = document.createElement('div');
 938 |     this.$container.classList.add('toolbox');
 939 |     this.$outer.appendChild(this.$container);
 940 |     this.$permalink = document.createElement('a');
 941 |     this.$permalink.textContent = 'Permalink';
 942 |     this.$pinLink = document.createElement('a');
 943 |     this.$pinLink.textContent = 'Pin';
 944 |     this.$pinLink.setAttribute('href', '#');
 945 |     this.$pinLink.addEventListener('click', e => {
 946 |       e.preventDefault();
 947 |       e.stopPropagation();
 948 |       menu.togglePinEntry(this.entry.id);
 949 |       this.$pinLink.textContent = menu._pinnedIds[this.entry.id] ? 'Unpin' : 'Pin';
 950 |     });
 951 | 
 952 |     this.$refsLink = document.createElement('a');
 953 |     this.$refsLink.setAttribute('href', '#');
 954 |     this.$refsLink.addEventListener('click', e => {
 955 |       e.preventDefault();
 956 |       e.stopPropagation();
 957 |       referencePane.showReferencesFor(this.entry);
 958 |     });
 959 |     this.$container.appendChild(this.$permalink);
 960 |     this.$container.appendChild(this.$pinLink);
 961 |     this.$container.appendChild(this.$refsLink);
 962 |     document.body.appendChild(this.$outer);
 963 |   },
 964 | 
 965 |   activate(el, entry, target) {
 966 |     if (el === this._activeEl) return;
 967 |     sdoBox.deactivate();
 968 |     this.active = true;
 969 |     this.entry = entry;
 970 |     this.$pinLink.textContent = menu._pinnedIds[entry.id] ? 'Unpin' : 'Pin';
 971 |     this.$outer.classList.add('active');
 972 |     this.top = el.offsetTop - this.$outer.offsetHeight;
 973 |     this.left = el.offsetLeft - 10;
 974 |     this.$outer.setAttribute('style', 'left: ' + this.left + 'px; top: ' + this.top + 'px');
 975 |     this.updatePermalink();
 976 |     this.updateReferences();
 977 |     this._activeEl = el;
 978 |     if (this.top < document.body.scrollTop && el === target) {
 979 |       // don't scroll unless it's a small thing (< 200px)
 980 |       this.$outer.scrollIntoView();
 981 |     }
 982 |   },
 983 | 
 984 |   updatePermalink() {
 985 |     this.$permalink.setAttribute('href', makeLinkToId(this.entry.id));
 986 |   },
 987 | 
 988 |   updateReferences() {
 989 |     this.$refsLink.textContent = `References (${(this.entry.referencingIds || []).length})`;
 990 |   },
 991 | 
 992 |   activateIfMouseOver(e) {
 993 |     let ref = this.findReferenceUnder(e.target);
 994 |     if (ref && (!this.active || e.pageY > this._activeEl.offsetTop)) {
 995 |       let entry = menu.search.biblio.byId[ref.id];
 996 |       this.activate(ref.element, entry, e.target);
 997 |     } else if (
 998 |       this.active &&
 999 |       (e.pageY < this.top || e.pageY > this._activeEl.offsetTop + this._activeEl.offsetHeight)
1000 |     ) {
1001 |       this.deactivate();
1002 |     }
1003 |   },
1004 | 
1005 |   findReferenceUnder(el) {
1006 |     while (el) {
1007 |       let parent = el.parentNode;
1008 |       if (el.nodeName === 'EMU-RHS' || el.nodeName === 'EMU-PRODUCTION') {
1009 |         return null;
1010 |       }
1011 |       if (
1012 |         el.nodeName === 'H1' &&
1013 |         parent.nodeName.match(/EMU-CLAUSE|EMU-ANNEX|EMU-INTRO/) &&
1014 |         parent.id
1015 |       ) {
1016 |         return { element: el, id: parent.id };
1017 |       } else if (el.nodeName === 'EMU-NT') {
1018 |         if (
1019 |           parent.nodeName === 'EMU-PRODUCTION' &&
1020 |           parent.id &&
1021 |           parent.id[0] !== '_' &&
1022 |           parent.firstElementChild === el
1023 |         ) {
1024 |           // return the LHS non-terminal element
1025 |           return { element: el, id: parent.id };
1026 |         }
1027 |         return null;
1028 |       } else if (
1029 |         el.nodeName.match(/EMU-(?!CLAUSE|XREF|ANNEX|INTRO)|DFN/) &&
1030 |         el.id &&
1031 |         el.id[0] !== '_'
1032 |       ) {
1033 |         if (
1034 |           el.nodeName === 'EMU-FIGURE' ||
1035 |           el.nodeName === 'EMU-TABLE' ||
1036 |           el.nodeName === 'EMU-EXAMPLE'
1037 |         ) {
1038 |           // return the figcaption element
1039 |           return { element: el.children[0].children[0], id: el.id };
1040 |         } else {
1041 |           return { element: el, id: el.id };
1042 |         }
1043 |       }
1044 |       el = parent;
1045 |     }
1046 |   },
1047 | 
1048 |   deactivate() {
1049 |     this.$outer.classList.remove('active');
1050 |     this._activeEl = null;
1051 |     this.active = false;
1052 |   },
1053 | };
1054 | 
1055 | function sortByClauseNumber(clause1, clause2) {
1056 |   let c1c = clause1.number.split('.');
1057 |   let c2c = clause2.number.split('.');
1058 | 
1059 |   for (let i = 0; i < c1c.length; i++) {
1060 |     if (i >= c2c.length) {
1061 |       return 1;
1062 |     }
1063 | 
1064 |     let c1 = c1c[i];
1065 |     let c2 = c2c[i];
1066 |     let c1cn = Number(c1);
1067 |     let c2cn = Number(c2);
1068 | 
1069 |     if (Number.isNaN(c1cn) && Number.isNaN(c2cn)) {
1070 |       if (c1 > c2) {
1071 |         return 1;
1072 |       } else if (c1 < c2) {
1073 |         return -1;
1074 |       }
1075 |     } else if (!Number.isNaN(c1cn) && Number.isNaN(c2cn)) {
1076 |       return -1;
1077 |     } else if (Number.isNaN(c1cn) && !Number.isNaN(c2cn)) {
1078 |       return 1;
1079 |     } else if (c1cn > c2cn) {
1080 |       return 1;
1081 |     } else if (c1cn < c2cn) {
1082 |       return -1;
1083 |     }
1084 |   }
1085 | 
1086 |   if (c1c.length === c2c.length) {
1087 |     return 0;
1088 |   }
1089 |   return -1;
1090 | }
1091 | 
1092 | function makeLinkToId(id) {
1093 |   let hash = '#' + id;
1094 |   if (typeof idToSection === 'undefined' || !idToSection[id]) {
1095 |     return hash;
1096 |   }
1097 |   let targetSec = idToSection[id];
1098 |   return (targetSec === 'index' ? './' : targetSec + '.html') + hash;
1099 | }
1100 | 
1101 | function doShortcut(e) {
1102 |   if (!(e.target instanceof HTMLElement)) {
1103 |     return;
1104 |   }
1105 |   let target = e.target;
1106 |   let name = target.nodeName.toLowerCase();
1107 |   if (name === 'textarea' || name === 'input' || name === 'select' || target.isContentEditable) {
1108 |     return;
1109 |   }
1110 |   if (e.altKey || e.ctrlKey || e.metaKey) {
1111 |     return;
1112 |   }
1113 |   if (e.key === 'm' && usesMultipage) {
1114 |     let pathParts = location.pathname.split('/');
1115 |     let hash = location.hash;
1116 |     if (pathParts[pathParts.length - 2] === 'multipage') {
1117 |       if (hash === '') {
1118 |         let sectionName = pathParts[pathParts.length - 1];
1119 |         if (sectionName.endsWith('.html')) {
1120 |           sectionName = sectionName.slice(0, -5);
1121 |         }
1122 |         if (idToSection['sec-' + sectionName] !== undefined) {
1123 |           hash = '#sec-' + sectionName;
1124 |         }
1125 |       }
1126 |       location = pathParts.slice(0, -2).join('/') + '/' + hash;
1127 |     } else {
1128 |       location = 'multipage/' + hash;
1129 |     }
1130 |   } else if (e.key === 'u') {
1131 |     document.documentElement.classList.toggle('show-ao-annotations');
1132 |   } else if (e.key === '?') {
1133 |     document.getElementById('shortcuts-help').classList.toggle('active');
1134 |   }
1135 | }
1136 | 
1137 | function init() {
1138 |   menu = new Menu();
1139 |   let $container = document.getElementById('spec-container');
1140 |   $container.addEventListener(
1141 |     'mouseover',
1142 |     debounce(e => {
1143 |       Toolbox.activateIfMouseOver(e);
1144 |     })
1145 |   );
1146 |   document.addEventListener(
1147 |     'keydown',
1148 |     debounce(e => {
1149 |       if (e.code === 'Escape') {
1150 |         if (Toolbox.active) {
1151 |           Toolbox.deactivate();
1152 |         }
1153 |         document.getElementById('shortcuts-help').classList.remove('active');
1154 |       }
1155 |     })
1156 |   );
1157 | }
1158 | 
1159 | document.addEventListener('keypress', doShortcut);
1160 | 
1161 | document.addEventListener('DOMContentLoaded', () => {
1162 |   Toolbox.init();
1163 |   referencePane.init();
1164 | });
1165 | 
1166 | // preserve state during navigation
1167 | 
1168 | function getTocPath(li) {
1169 |   let path = [];
1170 |   let pointer = li;
1171 |   while (true) {
1172 |     let parent = pointer.parentElement;
1173 |     if (parent == null) {
1174 |       return null;
1175 |     }
1176 |     let index = [].indexOf.call(parent.children, pointer);
1177 |     if (index == -1) {
1178 |       return null;
1179 |     }
1180 |     path.unshift(index);
1181 |     pointer = parent.parentElement;
1182 |     if (pointer == null) {
1183 |       return null;
1184 |     }
1185 |     if (pointer.id === 'menu-toc') {
1186 |       break;
1187 |     }
1188 |     if (pointer.tagName !== 'LI') {
1189 |       return null;
1190 |     }
1191 |   }
1192 |   return path;
1193 | }
1194 | 
1195 | function activateTocPath(path) {
1196 |   try {
1197 |     let pointer = document.getElementById('menu-toc');
1198 |     for (let index of path) {
1199 |       pointer = pointer.querySelector('ol').children[index];
1200 |     }
1201 |     pointer.classList.add('active');
1202 |   } catch (e) {
1203 |     // pass
1204 |   }
1205 | }
1206 | 
1207 | function getActiveTocPaths() {
1208 |   return [...menu.$menu.querySelectorAll('.active')].map(getTocPath).filter(p => p != null);
1209 | }
1210 | 
1211 | function initTOCExpansion(visibleItemLimit) {
1212 |   // Initialize to a reasonable amount of TOC expansion:
1213 |   // * Expand any full-breadth nesting level up to visibleItemLimit.
1214 |   // * Expand any *single-item* level while under visibleItemLimit (even if that pushes over it).
1215 | 
1216 |   // Limit to initialization by bailing out if any parent item is already expanded.
1217 |   const tocItems = Array.from(document.querySelectorAll('#menu-toc li'));
1218 |   if (tocItems.some(li => li.classList.contains('active') && li.querySelector('li'))) {
1219 |     return;
1220 |   }
1221 | 
1222 |   const selfAndSiblings = maybe => Array.from(maybe?.parentNode.children ?? []);
1223 |   let currentLevelItems = selfAndSiblings(tocItems[0]);
1224 |   let availableCount = visibleItemLimit - currentLevelItems.length;
1225 |   while (availableCount > 0 && currentLevelItems.length) {
1226 |     const nextLevelItems = currentLevelItems.flatMap(li => selfAndSiblings(li.querySelector('li')));
1227 |     availableCount -= nextLevelItems.length;
1228 |     if (availableCount > 0 || currentLevelItems.length === 1) {
1229 |       // Expand parent items of the next level down (i.e., current-level items with children).
1230 |       for (const ol of new Set(nextLevelItems.map(li => li.parentNode))) {
1231 |         ol.closest('li').classList.add('active');
1232 |       }
1233 |     }
1234 |     currentLevelItems = nextLevelItems;
1235 |   }
1236 | }
1237 | 
1238 | function initState() {
1239 |   if (typeof menu === 'undefined' || window.navigating) {
1240 |     return;
1241 |   }
1242 |   const storage = typeof sessionStorage !== 'undefined' ? sessionStorage : Object.create(null);
1243 |   if (storage.referencePaneState != null) {
1244 |     let state = JSON.parse(storage.referencePaneState);
1245 |     if (state != null) {
1246 |       if (state.type === 'ref') {
1247 |         let entry = menu.search.biblio.byId[state.id];
1248 |         if (entry != null) {
1249 |           referencePane.showReferencesFor(entry);
1250 |         }
1251 |       } else if (state.type === 'sdo') {
1252 |         let sdos = sdoMap[state.id];
1253 |         if (sdos != null) {
1254 |           referencePane.$headerText.innerHTML = state.html;
1255 |           referencePane.showSDOsBody(sdos, state.id);
1256 |         }
1257 |       }
1258 |       delete storage.referencePaneState;
1259 |     }
1260 |   }
1261 | 
1262 |   if (storage.activeTocPaths != null) {
1263 |     document.querySelectorAll('#menu-toc li.active').forEach(li => li.classList.remove('active'));
1264 |     let active = JSON.parse(storage.activeTocPaths);
1265 |     active.forEach(activateTocPath);
1266 |     delete storage.activeTocPaths;
1267 |   } else {
1268 |     initTOCExpansion(20);
1269 |   }
1270 | 
1271 |   if (storage.searchValue != null) {
1272 |     let value = JSON.parse(storage.searchValue);
1273 |     menu.search.$searchBox.value = value;
1274 |     menu.search.search(value);
1275 |     delete storage.searchValue;
1276 |   }
1277 | 
1278 |   if (storage.tocScroll != null) {
1279 |     let tocScroll = JSON.parse(storage.tocScroll);
1280 |     menu.$toc.scrollTop = tocScroll;
1281 |     delete storage.tocScroll;
1282 |   }
1283 | }
1284 | 
1285 | document.addEventListener('DOMContentLoaded', initState);
1286 | 
1287 | window.addEventListener('pageshow', initState);
1288 | 
1289 | window.addEventListener('beforeunload', () => {
1290 |   if (!window.sessionStorage || typeof menu === 'undefined') {
1291 |     return;
1292 |   }
1293 |   sessionStorage.referencePaneState = JSON.stringify(referencePane.state || null);
1294 |   sessionStorage.activeTocPaths = JSON.stringify(getActiveTocPaths());
1295 |   sessionStorage.searchValue = JSON.stringify(menu.search.$searchBox.value);
1296 |   sessionStorage.tocScroll = JSON.stringify(menu.$toc.scrollTop);
1297 | });
1298 | 
1299 | 'use strict';
1300 | 
1301 | // Manually prefix algorithm step list items with hidden counter representations
1302 | // corresponding with their markers so they get selected and copied with content.
1303 | // We read list-style-type to avoid divergence with the style sheet, but
1304 | // for efficiency assume that all lists at the same nesting depth use the same
1305 | // style (except for those associated with replacement steps).
1306 | // We also precompute some initial items for each supported style type.
1307 | // https://w3c.github.io/csswg-drafts/css-counter-styles/
1308 | 
1309 | const lowerLetters = Array.from({ length: 26 }, (_, i) =>
1310 |   String.fromCharCode('a'.charCodeAt(0) + i)
1311 | );
1312 | // Implement the lower-alpha 'alphabetic' algorithm,
1313 | // adjusting for indexing from 0 rather than 1.
1314 | // https://w3c.github.io/csswg-drafts/css-counter-styles/#simple-alphabetic
1315 | // https://w3c.github.io/csswg-drafts/css-counter-styles/#alphabetic-system
1316 | const lowerAlphaTextForIndex = i => {
1317 |   let S = '';
1318 |   for (const N = lowerLetters.length; i >= 0; i--) {
1319 |     S = lowerLetters[i % N] + S;
1320 |     i = Math.floor(i / N);
1321 |   }
1322 |   return S;
1323 | };
1324 | 
1325 | const weightedLowerRomanSymbols = Object.entries({
1326 |   m: 1000,
1327 |   cm: 900,
1328 |   d: 500,
1329 |   cd: 400,
1330 |   c: 100,
1331 |   xc: 90,
1332 |   l: 50,
1333 |   xl: 40,
1334 |   x: 10,
1335 |   ix: 9,
1336 |   v: 5,
1337 |   iv: 4,
1338 |   i: 1,
1339 | });
1340 | // Implement the lower-roman 'additive' algorithm,
1341 | // adjusting for indexing from 0 rather than 1.
1342 | // https://w3c.github.io/csswg-drafts/css-counter-styles/#simple-numeric
1343 | // https://w3c.github.io/csswg-drafts/css-counter-styles/#additive-system
1344 | const lowerRomanTextForIndex = i => {
1345 |   let value = i + 1;
1346 |   let S = '';
1347 |   for (const [symbol, weight] of weightedLowerRomanSymbols) {
1348 |     if (!value) break;
1349 |     if (weight > value) continue;
1350 |     const reps = Math.floor(value / weight);
1351 |     S += symbol.repeat(reps);
1352 |     value -= weight * reps;
1353 |   }
1354 |   return S;
1355 | };
1356 | 
1357 | // Memoize pure index-to-text functions with an exposed cache for fast retrieval.
1358 | const makeCounter = (pureGetTextForIndex, precomputeCount = 30) => {
1359 |   const cache = Array.from({ length: precomputeCount }, (_, i) => pureGetTextForIndex(i));
1360 |   const getTextForIndex = i => {
1361 |     if (i >= cache.length) cache[i] = pureGetTextForIndex(i);
1362 |     return cache[i];
1363 |   };
1364 |   return { getTextForIndex, cache };
1365 | };
1366 | 
1367 | const counterByStyle = {
1368 |   __proto__: null,
1369 |   decimal: makeCounter(i => String(i + 1)),
1370 |   'lower-alpha': makeCounter(lowerAlphaTextForIndex),
1371 |   'upper-alpha': makeCounter(i => lowerAlphaTextForIndex(i).toUpperCase()),
1372 |   'lower-roman': makeCounter(lowerRomanTextForIndex),
1373 |   'upper-roman': makeCounter(i => lowerRomanTextForIndex(i).toUpperCase()),
1374 | };
1375 | const fallbackCounter = makeCounter(() => '?');
1376 | const counterByDepth = [];
1377 | 
1378 | function addStepNumberText(
1379 |   ol,
1380 |   depth = 0,
1381 |   special = [...ol.classList].some(c => c.startsWith('nested-'))
1382 | ) {
1383 |   let counter = !special && counterByDepth[depth];
1384 |   if (!counter) {
1385 |     const counterStyle = getComputedStyle(ol)['list-style-type'];
1386 |     counter = counterByStyle[counterStyle];
1387 |     if (!counter) {
1388 |       console.warn('unsupported list-style-type', {
1389 |         ol,
1390 |         counterStyle,
1391 |         id: ol.closest('[id]')?.getAttribute('id'),
1392 |       });
1393 |       counterByStyle[counterStyle] = fallbackCounter;
1394 |       counter = fallbackCounter;
1395 |     }
1396 |     if (!special) {
1397 |       counterByDepth[depth] = counter;
1398 |     }
1399 |   }
1400 |   const { cache, getTextForIndex } = counter;
1401 |   let i = (Number(ol.getAttribute('start')) || 1) - 1;
1402 |   for (const li of ol.children) {
1403 |     const marker = document.createElement('span');
1404 |     marker.textContent = `${i < cache.length ? cache[i] : getTextForIndex(i)}. `;
1405 |     marker.setAttribute('aria-hidden', 'true');
1406 |     const attributesContainer = li.querySelector('.attributes-tag');
1407 |     if (attributesContainer == null) {
1408 |       li.prepend(marker);
1409 |     } else {
1410 |       attributesContainer.insertAdjacentElement('afterend', marker);
1411 |     }
1412 |     for (const sublist of li.querySelectorAll(':scope > ol')) {
1413 |       addStepNumberText(sublist, depth + 1, special);
1414 |     }
1415 |     i++;
1416 |   }
1417 | }
1418 | 
1419 | document.addEventListener('DOMContentLoaded', () => {
1420 |   document.querySelectorAll('emu-alg > ol').forEach(ol => {
1421 |     addStepNumberText(ol);
1422 |   });
1423 | });
1424 | 
1425 | let sdoMap = JSON.parse(`{}`);
1426 | let biblio = JSON.parse(`{"refsByClause":{"sec-object.groupby":["_ref_0"],"sec-map.groupby":["_ref_1"],"sec-group-by":["_ref_2"]},"entries":[{"type":"clause","id":"sec-scope","titleHTML":"Scope","number":"1"},{"type":"clause","id":"sec-object.groupby","title":"Object.groupBy ( items, callbackfn )","titleHTML":"Object.groupBy ( <var>items</var>, <var>callbackfn</var> )","number":"2.1"},{"type":"clause","id":"sec-properties-of-the-object-constructor","titleHTML":"Properties of the Object Constructor (20.1.2)","number":"2"},{"type":"clause","id":"sec-map.groupby","title":"Map.groupBy ( items, callbackfn )","titleHTML":"Map.groupBy ( <var>items</var>, <var>callbackfn</var> )","number":"3.1"},{"type":"clause","id":"sec-properties-of-the-map-constructor","titleHTML":"Properties of the Map Constructor (24.1.2)","number":"3"},{"type":"op","aoid":"GroupBy","refId":"sec-group-by"},{"type":"clause","id":"sec-group-by","title":"GroupBy ( items, callbackfn, keyCoercion )","titleHTML":"GroupBy ( <var>items</var>, <var>callbackfn</var>, <var>keyCoercion</var> )","number":"4.1","referencingIds":["_ref_0","_ref_1"]},{"type":"op","aoid":"AddValueToKeyedGroup","refId":"sec-add-value-to-keyed-group"},{"type":"clause","id":"sec-add-value-to-keyed-group","title":"AddValueToKeyedGroup ( groups, key, value )","titleHTML":"AddValueToKeyedGroup ( <var>groups</var>, <var>key</var>, <var>value</var> )","number":"4.2","referencingIds":["_ref_2"]},{"type":"clause","id":"sec-group-by-helpers","titleHTML":"Group By Helpers","number":"4"},{"type":"clause","id":"sec-copyright-and-software-license","title":"Copyright & Software License","titleHTML":"Copyright &amp; Software License","number":"A"}]}`);
1427 | ;let usesMultipage = false</script><style>body {
1428 |   display: flex;
1429 |   word-wrap: break-word;
1430 |   font-size: 18px;
1431 |   line-height: 1.5;
1432 |   font-family: Cambria, Palatino Linotype, Palatino, Liberation Serif, serif;
1433 |   padding: 0;
1434 |   margin: 0;
1435 |   color: #111;
1436 | }
1437 | 
1438 | #spec-container {
1439 |   padding: 0 20px;
1440 |   flex-grow: 1;
1441 |   flex-basis: 66%;
1442 |   box-sizing: border-box;
1443 |   overflow: hidden;
1444 |   padding-bottom: 1em;
1445 | }
1446 | 
1447 | body.oldtoc {
1448 |   margin: 0 auto;
1449 | }
1450 | 
1451 | a {
1452 |   text-decoration: none;
1453 |   color: #206ca7;
1454 | }
1455 | 
1456 | a:visited {
1457 |   color: #206ca7;
1458 | }
1459 | 
1460 | a:hover {
1461 |   text-decoration: underline;
1462 |   color: #239dee;
1463 | }
1464 | 
1465 | a.e-user-code,
1466 | span.e-user-code {
1467 |   white-space: nowrap;
1468 | }
1469 | 
1470 | a.e-user-code::before,
1471 | span.e-user-code::before {
1472 |   display: none;
1473 |   color: brown;
1474 |   background-color: white;
1475 |   border: 2pt solid brown;
1476 |   padding: 0.3ex;
1477 |   margin: 0 0.25em 0 0;
1478 |   line-height: 1;
1479 |   vertical-align: text-top;
1480 |   text-transform: uppercase;
1481 |   font-family: 'Comic Code', sans-serif;
1482 |   font-weight: 900;
1483 |   font-size: x-small;
1484 | }
1485 | 
1486 | a.e-user-code:hover::before,
1487 | span.e-user-code:hover::before {
1488 |   background-color: brown;
1489 |   color: white;
1490 | }
1491 | 
1492 | html.show-ao-annotations a.e-user-code::before,
1493 | html.show-ao-annotations span.e-user-code::before {
1494 |   display: inline-block;
1495 | }
1496 | 
1497 | a.e-user-code::before,
1498 | span.e-user-code::before {
1499 |   content: 'UC';
1500 | }
1501 | 
1502 | code {
1503 |   font-weight: bold;
1504 |   font-family: Consolas, Monaco, monospace;
1505 |   white-space: pre;
1506 | }
1507 | 
1508 | pre code {
1509 |   font-weight: inherit;
1510 | }
1511 | 
1512 | pre code.hljs {
1513 |   background-color: #fff;
1514 |   margin: 0;
1515 |   padding: 0;
1516 | }
1517 | 
1518 | ol.toc {
1519 |   list-style: none;
1520 |   padding-left: 0;
1521 | }
1522 | 
1523 | ol.toc ol.toc {
1524 |   padding-left: 2ex;
1525 |   list-style: none;
1526 | }
1527 | 
1528 | var {
1529 |   color: #2aa198;
1530 |   transition: background-color 0.25s ease;
1531 |   cursor: pointer;
1532 | }
1533 | var.field {
1534 |   font: inherit;
1535 |   color: inherit;
1536 | }
1537 | 
1538 | var.referenced0 {
1539 |   color: inherit;
1540 |   background-color: #ffff33;
1541 |   box-shadow: 0 0 0 2px #ffff33;
1542 | }
1543 | var.referenced1 {
1544 |   color: inherit;
1545 |   background-color: #ff87a2;
1546 |   box-shadow: 0 0 0 2px #ff87a2;
1547 | }
1548 | var.referenced2 {
1549 |   color: inherit;
1550 |   background-color: #96e885;
1551 |   box-shadow: 0 0 0 2px #96e885;
1552 | }
1553 | var.referenced3 {
1554 |   color: inherit;
1555 |   background-color: #3eeed2;
1556 |   box-shadow: 0 0 0 2px #3eeed2;
1557 | }
1558 | var.referenced4 {
1559 |   color: inherit;
1560 |   background-color: #eacfb6;
1561 |   box-shadow: 0 0 0 2px #eacfb6;
1562 | }
1563 | var.referenced5 {
1564 |   color: inherit;
1565 |   background-color: #82ddff;
1566 |   box-shadow: 0 0 0 2px #82ddff;
1567 | }
1568 | var.referenced6 {
1569 |   color: inherit;
1570 |   background-color: #ffbcf2;
1571 |   box-shadow: 0 0 0 2px #ffbcf2;
1572 | }
1573 | 
1574 | emu-const {
1575 |   font-family: sans-serif;
1576 | }
1577 | 
1578 | emu-val {
1579 |   font-weight: bold;
1580 | }
1581 | 
1582 | /* depth 1 */
1583 | emu-alg ol,
1584 | /* depth 4 */
1585 | emu-alg ol ol ol ol,
1586 | emu-alg ol.nested-thrice,
1587 | emu-alg ol.nested-twice ol,
1588 | emu-alg ol.nested-once ol ol {
1589 |   list-style-type: decimal;
1590 | }
1591 | 
1592 | /* depth 2 */
1593 | emu-alg ol ol,
1594 | emu-alg ol.nested-once,
1595 | /* depth 5 */
1596 | emu-alg ol ol ol ol ol,
1597 | emu-alg ol.nested-four-times,
1598 | emu-alg ol.nested-thrice ol,
1599 | emu-alg ol.nested-twice ol ol,
1600 | emu-alg ol.nested-once ol ol ol {
1601 |   list-style-type: lower-alpha;
1602 | }
1603 | 
1604 | /* depth 3 */
1605 | emu-alg ol ol ol,
1606 | emu-alg ol.nested-twice,
1607 | emu-alg ol.nested-once ol,
1608 | /* depth 6 */
1609 | emu-alg ol ol ol ol ol ol,
1610 | emu-alg ol.nested-lots,
1611 | emu-alg ol.nested-four-times ol,
1612 | emu-alg ol.nested-thrice ol ol,
1613 | emu-alg ol.nested-twice ol ol ol,
1614 | emu-alg ol.nested-once ol ol ol ol,
1615 | /* depth 7+ */
1616 | emu-alg ol.nested-lots ol {
1617 |   list-style-type: lower-roman;
1618 | }
1619 | 
1620 | emu-alg [aria-hidden='true'] {
1621 |   font-size: 0;
1622 | }
1623 | 
1624 | emu-eqn {
1625 |   display: block;
1626 |   margin-left: 4em;
1627 | }
1628 | 
1629 | emu-eqn.inline {
1630 |   display: inline;
1631 |   margin: 0;
1632 | }
1633 | 
1634 | emu-eqn div:first-child {
1635 |   margin-left: -2em;
1636 | }
1637 | 
1638 | emu-note {
1639 |   margin: 1em 0;
1640 |   display: flex;
1641 |   flex-direction: row;
1642 |   color: inherit;
1643 |   border-left: 5px solid #52e052;
1644 |   background: #e9fbe9;
1645 |   padding: 10px 10px 10px 0;
1646 | }
1647 | 
1648 | emu-note > span.note {
1649 |   flex-basis: 100px;
1650 |   min-width: 100px;
1651 |   flex-grow: 0;
1652 |   flex-shrink: 1;
1653 |   text-transform: uppercase;
1654 |   padding-left: 5px;
1655 | }
1656 | 
1657 | emu-note[type='editor'] {
1658 |   border-left-color: #faa;
1659 | }
1660 | 
1661 | emu-note > div.note-contents {
1662 |   flex-grow: 1;
1663 |   flex-shrink: 1;
1664 |   overflow: auto;
1665 | }
1666 | 
1667 | emu-note > div.note-contents > p:first-of-type {
1668 |   margin-top: 0;
1669 | }
1670 | 
1671 | emu-note > div.note-contents > p:last-of-type {
1672 |   margin-bottom: 0;
1673 | }
1674 | 
1675 | emu-table:not(.code) td code {
1676 |   white-space: normal;
1677 | }
1678 | 
1679 | emu-figure {
1680 |   display: block;
1681 | }
1682 | 
1683 | emu-example {
1684 |   display: block;
1685 |   margin: 1em 3em;
1686 | }
1687 | 
1688 | emu-example figure figcaption {
1689 |   margin-top: 0.5em;
1690 |   text-align: left;
1691 | }
1692 | 
1693 | emu-figure figure,
1694 | emu-example figure,
1695 | emu-table figure {
1696 |   display: flex;
1697 |   flex-direction: column;
1698 |   align-items: center;
1699 | }
1700 | 
1701 | emu-production {
1702 |   display: block;
1703 | }
1704 | 
1705 | emu-grammar[type='example'] emu-production,
1706 | emu-grammar[type='definition'] emu-production {
1707 |   margin-top: 1em;
1708 |   margin-bottom: 1em;
1709 |   margin-left: 5ex;
1710 | }
1711 | 
1712 | emu-grammar.inline,
1713 | emu-production.inline,
1714 | emu-grammar.inline emu-production emu-rhs,
1715 | emu-production.inline emu-rhs,
1716 | emu-grammar[collapsed] emu-production emu-rhs {
1717 |   display: inline;
1718 |   padding-left: 1ex;
1719 |   margin-left: 0;
1720 | }
1721 | 
1722 | emu-production[collapsed] emu-rhs {
1723 |   display: inline;
1724 |   padding-left: 0.5ex;
1725 |   margin-left: 0;
1726 | }
1727 | 
1728 | emu-grammar[collapsed] emu-production,
1729 | emu-production[collapsed] {
1730 |   margin: 0;
1731 | }
1732 | 
1733 | emu-constraints {
1734 |   font-size: 0.75em;
1735 |   margin-right: 0.5ex;
1736 | }
1737 | 
1738 | emu-gann {
1739 |   margin-right: 0.5ex;
1740 | }
1741 | 
1742 | emu-gann emu-t:last-child,
1743 | emu-gann emu-gprose:last-child,
1744 | emu-gann emu-nt:last-child {
1745 |   margin-right: 0;
1746 | }
1747 | 
1748 | emu-geq {
1749 |   margin-left: 0.5ex;
1750 |   font-weight: bold;
1751 | }
1752 | 
1753 | emu-oneof {
1754 |   font-weight: bold;
1755 |   margin-left: 0.5ex;
1756 | }
1757 | 
1758 | emu-nt {
1759 |   display: inline-block;
1760 |   font-style: italic;
1761 |   white-space: nowrap;
1762 |   text-indent: 0;
1763 | }
1764 | 
1765 | emu-nt a,
1766 | emu-nt a:visited {
1767 |   color: #333;
1768 | }
1769 | 
1770 | emu-rhs emu-nt {
1771 |   margin-right: 0.5ex;
1772 | }
1773 | 
1774 | emu-t {
1775 |   display: inline-block;
1776 |   font-family: monospace;
1777 |   font-weight: bold;
1778 |   white-space: nowrap;
1779 |   text-indent: 0;
1780 | }
1781 | 
1782 | emu-production emu-t {
1783 |   margin-right: 0.5ex;
1784 | }
1785 | 
1786 | emu-rhs {
1787 |   display: block;
1788 |   padding-left: 75px;
1789 |   text-indent: -25px;
1790 | }
1791 | 
1792 | emu-production:not([collapsed]) emu-rhs {
1793 |   border: 0.2ex dashed transparent;
1794 | }
1795 | 
1796 | emu-production:not([collapsed]) emu-rhs:hover {
1797 |   border-color: #888;
1798 |   background-color: #f0f0f0;
1799 | }
1800 | 
1801 | emu-mods {
1802 |   font-size: 0.85em;
1803 |   vertical-align: sub;
1804 |   font-style: normal;
1805 |   font-weight: normal;
1806 | }
1807 | 
1808 | emu-params,
1809 | emu-opt {
1810 |   margin-right: 1ex;
1811 |   font-family: monospace;
1812 | }
1813 | 
1814 | emu-params,
1815 | emu-constraints {
1816 |   color: #2aa198;
1817 | }
1818 | 
1819 | emu-opt {
1820 |   color: #b58900;
1821 | }
1822 | 
1823 | emu-gprose {
1824 |   font-size: 0.9em;
1825 |   font-family: Helvetica, Arial, sans-serif;
1826 | }
1827 | 
1828 | emu-production emu-gprose {
1829 |   margin-right: 1ex;
1830 | }
1831 | 
1832 | h1.shortname {
1833 |   color: #f60;
1834 |   font-size: 1.5em;
1835 |   margin: 0;
1836 | }
1837 | 
1838 | h1.version {
1839 |   color: #f60;
1840 |   font-size: 1.5em;
1841 | }
1842 | 
1843 | h1.title {
1844 |   color: #f60;
1845 | }
1846 | 
1847 | h1,
1848 | h2,
1849 | h3,
1850 | h4,
1851 | h5,
1852 | h6 {
1853 |   position: relative;
1854 | }
1855 | 
1856 | h1 .secnum {
1857 |   text-decoration: none;
1858 |   margin-right: 5px;
1859 | }
1860 | 
1861 | h1 span.title {
1862 |   order: 2;
1863 | }
1864 | 
1865 | h1 {
1866 |   font-size: 2.67em;
1867 |   margin-bottom: 0;
1868 |   line-height: 1em;
1869 | }
1870 | h2 {
1871 |   font-size: 2em;
1872 | }
1873 | h3 {
1874 |   font-size: 1.56em;
1875 | }
1876 | h4 {
1877 |   font-size: 1.25em;
1878 | }
1879 | h5 {
1880 |   font-size: 1.11em;
1881 | }
1882 | h6 {
1883 |   font-size: 1em;
1884 | }
1885 | 
1886 | pre code.hljs {
1887 |   background: transparent;
1888 | }
1889 | 
1890 | emu-clause[id],
1891 | emu-annex[id],
1892 | emu-intro[id] {
1893 |   scroll-margin-top: 2ex;
1894 | }
1895 | 
1896 | emu-intro h1,
1897 | emu-clause h1,
1898 | emu-annex h1 {
1899 |   font-size: 2em;
1900 | }
1901 | emu-intro h2,
1902 | emu-clause h2,
1903 | emu-annex h2 {
1904 |   font-size: 1.56em;
1905 | }
1906 | emu-intro h3,
1907 | emu-clause h3,
1908 | emu-annex h3 {
1909 |   font-size: 1.25em;
1910 | }
1911 | emu-intro h4,
1912 | emu-clause h4,
1913 | emu-annex h4 {
1914 |   font-size: 1.11em;
1915 | }
1916 | emu-intro h5,
1917 | emu-clause h5,
1918 | emu-annex h5 {
1919 |   font-size: 1em;
1920 | }
1921 | emu-intro h6,
1922 | emu-clause h6,
1923 | emu-annex h6 {
1924 |   font-size: 0.9em;
1925 | }
1926 | emu-intro emu-intro h1,
1927 | emu-clause emu-clause h1,
1928 | emu-annex emu-annex h1 {
1929 |   font-size: 1.56em;
1930 | }
1931 | emu-intro emu-intro h2,
1932 | emu-clause emu-clause h2,
1933 | emu-annex emu-annex h2 {
1934 |   font-size: 1.25em;
1935 | }
1936 | emu-intro emu-intro h3,
1937 | emu-clause emu-clause h3,
1938 | emu-annex emu-annex h3 {
1939 |   font-size: 1.11em;
1940 | }
1941 | emu-intro emu-intro h4,
1942 | emu-clause emu-clause h4,
1943 | emu-annex emu-annex h4 {
1944 |   font-size: 1em;
1945 | }
1946 | emu-intro emu-intro h5,
1947 | emu-clause emu-clause h5,
1948 | emu-annex emu-annex h5 {
1949 |   font-size: 0.9em;
1950 | }
1951 | emu-intro emu-intro emu-intro h1,
1952 | emu-clause emu-clause emu-clause h1,
1953 | emu-annex emu-annex emu-annex h1 {
1954 |   font-size: 1.25em;
1955 | }
1956 | emu-intro emu-intro emu-intro h2,
1957 | emu-clause emu-clause emu-clause h2,
1958 | emu-annex emu-annex emu-annex h2 {
1959 |   font-size: 1.11em;
1960 | }
1961 | emu-intro emu-intro emu-intro h3,
1962 | emu-clause emu-clause emu-clause h3,
1963 | emu-annex emu-annex emu-annex h3 {
1964 |   font-size: 1em;
1965 | }
1966 | emu-intro emu-intro emu-intro h4,
1967 | emu-clause emu-clause emu-clause h4,
1968 | emu-annex emu-annex emu-annex h4 {
1969 |   font-size: 0.9em;
1970 | }
1971 | emu-intro emu-intro emu-intro emu-intro h1,
1972 | emu-clause emu-clause emu-clause emu-clause h1,
1973 | emu-annex emu-annex emu-annex emu-annex h1 {
1974 |   font-size: 1.11em;
1975 | }
1976 | emu-intro emu-intro emu-intro emu-intro h2,
1977 | emu-clause emu-clause emu-clause emu-clause h2,
1978 | emu-annex emu-annex emu-annex emu-annex h2 {
1979 |   font-size: 1em;
1980 | }
1981 | emu-intro emu-intro emu-intro emu-intro h3,
1982 | emu-clause emu-clause emu-clause emu-clause h3,
1983 | emu-annex emu-annex emu-annex emu-annex h3 {
1984 |   font-size: 0.9em;
1985 | }
1986 | emu-intro emu-intro emu-intro emu-intro emu-intro h1,
1987 | emu-clause emu-clause emu-clause emu-clause emu-clause h1,
1988 | emu-annex emu-annex emu-annex emu-annex emu-annex h1 {
1989 |   font-size: 1em;
1990 | }
1991 | emu-intro emu-intro emu-intro emu-intro emu-intro h2,
1992 | emu-clause emu-clause emu-clause emu-clause emu-clause h2,
1993 | emu-annex emu-annex emu-annex emu-annex emu-annex h2 {
1994 |   font-size: 0.9em;
1995 | }
1996 | emu-intro emu-intro emu-intro emu-intro emu-intro emu-intro h1,
1997 | emu-clause emu-clause emu-clause emu-clause emu-clause emu-clause h1,
1998 | emu-annex emu-annex emu-annex emu-annex emu-annex emu-annex h1 {
1999 |   font-size: 0.9em;
2000 | }
2001 | 
2002 | emu-clause,
2003 | emu-intro,
2004 | emu-annex {
2005 |   display: block;
2006 | }
2007 | 
2008 | /* these values are twice the font-size for the <h1> titles for clauses */
2009 | emu-intro,
2010 | emu-clause,
2011 | emu-annex {
2012 |   margin-top: 4em;
2013 | }
2014 | emu-intro emu-intro,
2015 | emu-clause emu-clause,
2016 | emu-annex emu-annex {
2017 |   margin-top: 3.12em;
2018 | }
2019 | emu-intro emu-intro emu-intro,
2020 | emu-clause emu-clause emu-clause,
2021 | emu-annex emu-annex emu-annex {
2022 |   margin-top: 2.5em;
2023 | }
2024 | emu-intro emu-intro emu-intro emu-intro,
2025 | emu-clause emu-clause emu-clause emu-clause,
2026 | emu-annex emu-annex emu-annex emu-annex {
2027 |   margin-top: 2.22em;
2028 | }
2029 | emu-intro emu-intro emu-intro emu-intro emu-intro,
2030 | emu-clause emu-clause emu-clause emu-clause emu-clause,
2031 | emu-annex emu-annex emu-annex emu-annex emu-annex {
2032 |   margin-top: 2em;
2033 | }
2034 | emu-intro emu-intro emu-intro emu-intro emu-intro emu-intro,
2035 | emu-clause emu-clause emu-clause emu-clause emu-clause emu-clause,
2036 | emu-annex emu-annex emu-annex emu-annex emu-annex emu-annex {
2037 |   margin-top: 1.8em;
2038 | }
2039 | 
2040 | #spec-container > emu-intro:first-of-type,
2041 | #spec-container > emu-clause:first-of-type,
2042 | #spec-container > emu-annex:first-of-type {
2043 |   margin-top: 0;
2044 | }
2045 | 
2046 | /* Figures and tables */
2047 | figure {
2048 |   display: block;
2049 |   margin: 1em 0 3em 0;
2050 | }
2051 | figure object {
2052 |   display: block;
2053 |   margin: 0 auto;
2054 | }
2055 | figure table.real-table {
2056 |   margin: 0 auto;
2057 | }
2058 | figure figcaption {
2059 |   display: block;
2060 |   color: #555555;
2061 |   font-weight: bold;
2062 |   text-align: center;
2063 | }
2064 | 
2065 | emu-table table {
2066 |   margin: 0 auto;
2067 | }
2068 | 
2069 | emu-table table,
2070 | table.real-table {
2071 |   border-collapse: collapse;
2072 | }
2073 | 
2074 | emu-table td,
2075 | emu-table th,
2076 | table.real-table td,
2077 | table.real-table th {
2078 |   border: 1px solid black;
2079 |   padding: 0.4em;
2080 |   vertical-align: baseline;
2081 | }
2082 | emu-table th,
2083 | emu-table thead td,
2084 | table.real-table th {
2085 |   background-color: #eeeeee;
2086 | }
2087 | 
2088 | emu-table td {
2089 |   background: #fff;
2090 | }
2091 | 
2092 | /* Note: the left content edges of table.lightweight-table >tbody >tr >td
2093 |    and div.display line up. */
2094 | table.lightweight-table {
2095 |   border-collapse: collapse;
2096 |   margin: 0 0 0 1.5em;
2097 | }
2098 | table.lightweight-table td,
2099 | table.lightweight-table th {
2100 |   border: none;
2101 |   padding: 0 0.5em;
2102 |   vertical-align: baseline;
2103 | }
2104 | 
2105 | /* diff styles */
2106 | ins {
2107 |   background-color: #e0f8e0;
2108 |   text-decoration: none;
2109 |   border-bottom: 1px solid #396;
2110 | }
2111 | 
2112 | del {
2113 |   background-color: #fee;
2114 | }
2115 | 
2116 | ins.block,
2117 | del.block,
2118 | emu-production > ins,
2119 | emu-production > del,
2120 | emu-grammar > ins,
2121 | emu-grammar > del {
2122 |   display: block;
2123 | }
2124 | emu-rhs > ins,
2125 | emu-rhs > del {
2126 |   display: inline;
2127 | }
2128 | 
2129 | tr.ins > td > ins {
2130 |   border-bottom: none;
2131 | }
2132 | 
2133 | tr.ins > td {
2134 |   background-color: #e0f8e0;
2135 | }
2136 | 
2137 | tr.del > td {
2138 |   background-color: #fee;
2139 | }
2140 | 
2141 | /* Menu Styles */
2142 | #menu-toggle {
2143 |   font-size: 2em;
2144 | 
2145 |   position: fixed;
2146 |   top: 0;
2147 |   left: 0;
2148 |   width: 1.5em;
2149 |   height: 1.5em;
2150 |   z-index: 3;
2151 |   visibility: hidden;
2152 |   color: #1567a2;
2153 |   background-color: #fff;
2154 | 
2155 |   line-height: 1.5em;
2156 |   text-align: center;
2157 |   -webkit-touch-callout: none;
2158 |   -webkit-user-select: none;
2159 |   -khtml-user-select: none;
2160 |   -moz-user-select: none;
2161 |   -ms-user-select: none;
2162 |   user-select: none;
2163 | 
2164 |   cursor: pointer;
2165 | }
2166 | 
2167 | #menu {
2168 |   display: flex;
2169 |   flex-direction: column;
2170 |   width: 33%;
2171 |   height: 100vh;
2172 |   max-width: 500px;
2173 |   box-sizing: border-box;
2174 |   background-color: #ddd;
2175 |   overflow: hidden;
2176 |   transition: opacity 0.1s linear;
2177 |   padding: 0 5px;
2178 |   position: fixed;
2179 |   left: 0;
2180 |   top: 0;
2181 |   border-right: 2px solid #bbb;
2182 | 
2183 |   z-index: 2;
2184 | }
2185 | 
2186 | .menu-spacer {
2187 |   flex-basis: 33%;
2188 |   max-width: 500px;
2189 |   flex-grow: 0;
2190 |   flex-shrink: 0;
2191 | }
2192 | 
2193 | #menu a {
2194 |   color: #1567a2;
2195 | }
2196 | 
2197 | #menu.active {
2198 |   display: flex;
2199 |   opacity: 1;
2200 |   z-index: 2;
2201 | }
2202 | 
2203 | #menu-pins {
2204 |   flex-grow: 1;
2205 |   display: none;
2206 | }
2207 | 
2208 | #menu-pins.active {
2209 |   display: block;
2210 | }
2211 | 
2212 | #menu-pins-list {
2213 |   margin: 0;
2214 |   padding: 0;
2215 |   counter-reset: pins-counter;
2216 | }
2217 | 
2218 | #menu-pins-list > li:before {
2219 |   content: counter(pins-counter);
2220 |   counter-increment: pins-counter;
2221 |   display: inline-block;
2222 |   width: 25px;
2223 |   text-align: center;
2224 |   border: 1px solid #bbb;
2225 |   padding: 2px;
2226 |   margin: 4px;
2227 |   box-sizing: border-box;
2228 |   line-height: 1em;
2229 |   background-color: #ccc;
2230 |   border-radius: 4px;
2231 | }
2232 | #menu-toc > ol {
2233 |   padding: 0;
2234 |   flex-grow: 1;
2235 | }
2236 | 
2237 | #menu-toc > ol li {
2238 |   padding: 0;
2239 | }
2240 | 
2241 | #menu-toc > ol,
2242 | #menu-toc > ol ol {
2243 |   list-style-type: none;
2244 |   margin: 0;
2245 |   padding: 0;
2246 | }
2247 | 
2248 | #menu-toc > ol ol {
2249 |   padding-left: 0.75em;
2250 | }
2251 | 
2252 | #menu-toc li {
2253 |   text-overflow: ellipsis;
2254 |   overflow: hidden;
2255 |   white-space: nowrap;
2256 | }
2257 | 
2258 | #menu-toc .item-toggle {
2259 |   display: inline-block;
2260 |   transform: rotate(-45deg) translate(-5px, -5px);
2261 |   transition: transform 0.1s ease;
2262 |   text-align: center;
2263 |   width: 20px;
2264 | 
2265 |   color: #aab;
2266 | 
2267 |   -webkit-touch-callout: none;
2268 |   -webkit-user-select: none;
2269 |   -khtml-user-select: none;
2270 |   -moz-user-select: none;
2271 |   -ms-user-select: none;
2272 |   user-select: none;
2273 | 
2274 |   cursor: pointer;
2275 | }
2276 | 
2277 | #menu-toc .item-toggle-none {
2278 |   display: inline-block;
2279 |   width: 20px;
2280 | }
2281 | 
2282 | #menu-toc li.active > .item-toggle {
2283 |   transform: rotate(45deg) translate(-5px, -5px);
2284 | }
2285 | 
2286 | #menu-toc li > ol {
2287 |   display: none;
2288 | }
2289 | 
2290 | #menu-toc li.active > ol {
2291 |   display: block;
2292 | }
2293 | 
2294 | #menu-toc li.revealed > a {
2295 |   background-color: #bbb;
2296 |   font-weight: bold;
2297 |   /*
2298 |   background-color: #222;
2299 |   color: #c6d8e4;
2300 |   */
2301 | }
2302 | 
2303 | #menu-toc li.revealed-leaf > a {
2304 |   color: #206ca7;
2305 |   /*
2306 |   background-color: #222;
2307 |   color: #c6d8e4;
2308 |   */
2309 | }
2310 | 
2311 | #menu-toc li.revealed > .item-toggle {
2312 |   transform: rotate(45deg) translate(-5px, -5px);
2313 | }
2314 | 
2315 | #menu-toc li.revealed > ol {
2316 |   display: block;
2317 | }
2318 | 
2319 | #menu-toc li > a {
2320 |   padding: 2px 5px;
2321 | }
2322 | 
2323 | #menu > * {
2324 |   margin-bottom: 5px;
2325 | }
2326 | 
2327 | .menu-pane-header {
2328 |   padding: 0 5px;
2329 |   text-transform: uppercase;
2330 |   background-color: #aaa;
2331 |   color: #335;
2332 |   font-weight: bold;
2333 |   letter-spacing: 2px;
2334 |   flex-grow: 0;
2335 |   flex-shrink: 0;
2336 |   font-size: 0.8em;
2337 | }
2338 | 
2339 | .menu-pane-header emu-opt,
2340 | .menu-pane-header emu-t,
2341 | .menu-pane-header emu-nt {
2342 |   margin-right: 0px;
2343 |   display: inline;
2344 |   color: inherit;
2345 | }
2346 | 
2347 | .menu-pane-header emu-rhs {
2348 |   display: inline;
2349 |   padding-left: 0px;
2350 |   text-indent: 0px;
2351 | }
2352 | 
2353 | .menu-pane-header emu-geq {
2354 |   margin-left: 0px;
2355 | }
2356 | 
2357 | a.menu-pane-header-production {
2358 |   color: inherit;
2359 | }
2360 | 
2361 | .menu-pane-header-production {
2362 |   text-transform: none;
2363 |   letter-spacing: 1.5px;
2364 |   padding-left: 0.5em;
2365 | }
2366 | 
2367 | #menu-toc {
2368 |   display: flex;
2369 |   flex-direction: column;
2370 |   width: 100%;
2371 |   overflow: hidden;
2372 |   flex-grow: 1;
2373 | }
2374 | 
2375 | #menu-toc ol.toc {
2376 |   overflow-x: hidden;
2377 |   overflow-y: auto;
2378 | }
2379 | 
2380 | #menu-search {
2381 |   position: relative;
2382 |   flex-grow: 0;
2383 |   flex-shrink: 0;
2384 |   width: 100%;
2385 | 
2386 |   display: flex;
2387 |   flex-direction: column;
2388 | 
2389 |   max-height: 300px;
2390 | }
2391 | 
2392 | #menu-trace-list {
2393 |   display: none;
2394 | }
2395 | 
2396 | #menu-search-box {
2397 |   box-sizing: border-box;
2398 |   display: block;
2399 |   width: 100%;
2400 |   margin: 5px 0 0 0;
2401 |   font-size: 1em;
2402 |   padding: 2px;
2403 |   background-color: #bbb;
2404 |   border: 1px solid #999;
2405 | }
2406 | 
2407 | #menu-search-results {
2408 |   overflow-x: hidden;
2409 |   overflow-y: auto;
2410 | }
2411 | 
2412 | li.menu-search-result-clause:before {
2413 |   content: 'clause';
2414 |   width: 40px;
2415 |   display: inline-block;
2416 |   text-align: right;
2417 |   padding-right: 1ex;
2418 |   color: #666;
2419 |   font-size: 75%;
2420 | }
2421 | li.menu-search-result-op:before {
2422 |   content: 'op';
2423 |   width: 40px;
2424 |   display: inline-block;
2425 |   text-align: right;
2426 |   padding-right: 1ex;
2427 |   color: #666;
2428 |   font-size: 75%;
2429 | }
2430 | 
2431 | li.menu-search-result-prod:before {
2432 |   content: 'prod';
2433 |   width: 40px;
2434 |   display: inline-block;
2435 |   text-align: right;
2436 |   padding-right: 1ex;
2437 |   color: #666;
2438 |   font-size: 75%;
2439 | }
2440 | 
2441 | li.menu-search-result-term:before {
2442 |   content: 'term';
2443 |   width: 40px;
2444 |   display: inline-block;
2445 |   text-align: right;
2446 |   padding-right: 1ex;
2447 |   color: #666;
2448 |   font-size: 75%;
2449 | }
2450 | 
2451 | #menu-search-results ul {
2452 |   padding: 0 5px;
2453 |   margin: 0;
2454 | }
2455 | 
2456 | #menu-search-results li {
2457 |   white-space: nowrap;
2458 |   text-overflow: ellipsis;
2459 | }
2460 | 
2461 | #menu-trace-list {
2462 |   counter-reset: item;
2463 |   margin: 0 0 0 20px;
2464 |   padding: 0;
2465 | }
2466 | #menu-trace-list li {
2467 |   display: block;
2468 |   white-space: nowrap;
2469 | }
2470 | 
2471 | #menu-trace-list li .secnum:after {
2472 |   content: ' ';
2473 | }
2474 | #menu-trace-list li:before {
2475 |   content: counter(item) ' ';
2476 |   background-color: #222;
2477 |   counter-increment: item;
2478 |   color: #999;
2479 |   width: 20px;
2480 |   height: 20px;
2481 |   line-height: 20px;
2482 |   display: inline-block;
2483 |   text-align: center;
2484 |   margin: 2px 4px 2px 0;
2485 | }
2486 | 
2487 | @media (max-width: 1000px) {
2488 |   body {
2489 |     margin: 0;
2490 |     display: block;
2491 |   }
2492 | 
2493 |   #menu {
2494 |     display: none;
2495 |     padding-top: 3em;
2496 |     width: 450px;
2497 |   }
2498 | 
2499 |   #menu.active {
2500 |     position: fixed;
2501 |     height: 100%;
2502 |     left: 0;
2503 |     top: 0;
2504 |     right: 300px;
2505 |   }
2506 | 
2507 |   #menu-toggle {
2508 |     visibility: visible;
2509 |   }
2510 | 
2511 |   #spec-container {
2512 |     padding: 0 5px;
2513 |   }
2514 | 
2515 |   #references-pane-spacer {
2516 |     display: none;
2517 |   }
2518 | }
2519 | 
2520 | @media only screen and (max-width: 800px) {
2521 |   #menu {
2522 |     width: 100%;
2523 |   }
2524 | 
2525 |   h1 .secnum:empty {
2526 |     margin: 0;
2527 |     padding: 0;
2528 |   }
2529 | }
2530 | 
2531 | /* Toolbox */
2532 | .toolbox-container {
2533 |   position: absolute;
2534 |   display: none;
2535 |   padding-bottom: 7px;
2536 | }
2537 | 
2538 | .toolbox-container.active {
2539 |   display: inline-block;
2540 | }
2541 | 
2542 | .toolbox {
2543 |   position: relative;
2544 |   background: #ddd;
2545 |   border: 1px solid #aaa;
2546 |   color: #eee;
2547 |   padding: 5px;
2548 |   border-radius: 3px;
2549 | }
2550 | 
2551 | .toolbox a {
2552 |   text-decoration: none;
2553 |   padding: 0 5px;
2554 | }
2555 | 
2556 | .toolbox a:hover {
2557 |   text-decoration: underline;
2558 | }
2559 | 
2560 | .toolbox:after,
2561 | .toolbox:before {
2562 |   top: 100%;
2563 |   left: 15px;
2564 |   border: solid transparent;
2565 |   content: ' ';
2566 |   height: 0;
2567 |   width: 0;
2568 |   position: absolute;
2569 |   pointer-events: none;
2570 | }
2571 | 
2572 | .toolbox:after {
2573 |   border-color: rgba(0, 0, 0, 0);
2574 |   border-top-color: #ddd;
2575 |   border-width: 10px;
2576 |   margin-left: -10px;
2577 | }
2578 | .toolbox:before {
2579 |   border-color: rgba(204, 204, 204, 0);
2580 |   border-top-color: #aaa;
2581 |   border-width: 12px;
2582 |   margin-left: -12px;
2583 | }
2584 | 
2585 | #references-pane-container {
2586 |   position: fixed;
2587 |   bottom: 0;
2588 |   left: 0;
2589 |   right: 0;
2590 |   height: 250px;
2591 |   display: none;
2592 |   background-color: #ddd;
2593 |   z-index: 1;
2594 | }
2595 | 
2596 | #references-pane-table-container {
2597 |   overflow-x: hidden;
2598 |   overflow-y: auto;
2599 | }
2600 | 
2601 | #references-pane {
2602 |   flex-grow: 1;
2603 |   overflow: hidden;
2604 |   display: flex;
2605 |   flex-direction: column;
2606 | }
2607 | 
2608 | #references-pane-container.active {
2609 |   display: flex;
2610 | }
2611 | 
2612 | #references-pane-close:after {
2613 |   content: '✖';
2614 |   float: right;
2615 |   cursor: pointer;
2616 | }
2617 | 
2618 | #references-pane table tbody {
2619 |   vertical-align: baseline;
2620 | }
2621 | 
2622 | #references-pane table tr td:first-child {
2623 |   text-align: right;
2624 |   padding-right: 5px;
2625 | }
2626 | 
2627 | @media print {
2628 |   #menu-toggle {
2629 |     display: none;
2630 |   }
2631 | }
2632 | 
2633 | [normative-optional],
2634 | [deprecated],
2635 | [legacy] {
2636 |   border-left: 5px solid #ff6600;
2637 |   padding: 0.5em;
2638 |   background: #ffeedd;
2639 | }
2640 | 
2641 | .attributes-tag {
2642 |   text-transform: uppercase;
2643 |   color: #884400;
2644 | }
2645 | 
2646 | .attributes-tag a {
2647 |   color: #884400;
2648 | }
2649 | 
2650 | /* Shortcuts help dialog */
2651 | 
2652 | #shortcuts-help {
2653 |   position: fixed;
2654 |   left: 5%;
2655 |   margin: 0 auto;
2656 |   right: 5%;
2657 |   z-index: 10;
2658 |   top: 10%;
2659 |   top: calc(5vw + 5vh);
2660 |   padding: 30px 90px;
2661 |   max-width: 500px;
2662 |   outline: solid 10000px rgba(255, 255, 255, 0.6);
2663 |   border-radius: 5px;
2664 |   border-width: 1px 1px 0 1px;
2665 |   background-color: #ddd;
2666 |   display: none;
2667 | }
2668 | 
2669 | #shortcuts-help.active {
2670 |   display: block;
2671 | }
2672 | 
2673 | #shortcuts-help ul {
2674 |   padding: 0;
2675 | }
2676 | 
2677 | #shortcuts-help li {
2678 |   display: flex;
2679 |   justify-content: space-between;
2680 | }
2681 | 
2682 | #shortcuts-help code {
2683 |   padding: 3px 10px;
2684 |   border-radius: 3px;
2685 |   border-width: 1px 1px 0 1px;
2686 |   border-color: #bbb;
2687 |   background-color: #eee;
2688 |   box-shadow: inset 0 -1px 0 #ccc;
2689 | }
2690 | </style></head><body><div id="shortcuts-help">
2691 | <ul>
2692 |   <li><span>Toggle shortcuts help</span><code>?</code></li>
2693 |   <li><span>Toggle "can call user code" annotations</span><code>u</code></li>
2694 | 
2695 |   <li><span>Jump to search box</span><code>/</code></li>
2696 | </ul></div><div id="menu-toggle"><svg xmlns="http://www.w3.org/2000/svg" style="width:100%; height:100%; stroke:currentColor" viewBox="0 0 120 120">
2697 |       <title>Menu</title>
2698 |       <path stroke-width="10" stroke-linecap="round" d="M30,60 h60  M30,30 m0,5 h60  M30,90 m0,-5 h60"></path>
2699 |     </svg></div><div id="menu-spacer" class="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-scope" title="Scope"><span class="secnum">1</span> Scope</a></li><li><span class="item-toggle">◢</span><a href="#sec-properties-of-the-object-constructor" title="Properties of the Object Constructor (20.1.2)"><span class="secnum">2</span> Properties of the Object Constructor (20.1.2)</a><ol class="toc"><li><span class="item-toggle-none"></span><a href="#sec-object.groupby" title="Object.groupBy ( items, callbackfn )"><span class="secnum">2.1</span> Object.groupBy ( <var>items</var>, <var>callbackfn</var> )</a></li></ol></li><li><span class="item-toggle">◢</span><a href="#sec-properties-of-the-map-constructor" title="Properties of the Map Constructor (24.1.2)"><span class="secnum">3</span> Properties of the Map Constructor (24.1.2)</a><ol class="toc"><li><span class="item-toggle-none"></span><a href="#sec-map.groupby" title="Map.groupBy ( items, callbackfn )"><span class="secnum">3.1</span> Map.groupBy ( <var>items</var>, <var>callbackfn</var> )</a></li></ol></li><li><span class="item-toggle">◢</span><a href="#sec-group-by-helpers" title="Group By Helpers"><span class="secnum">4</span> Group By Helpers</a><ol class="toc"><li><span class="item-toggle-none"></span><a href="#sec-group-by" title="GroupBy ( items, callbackfn, keyCoercion )"><span class="secnum">4.1</span> GroupBy ( <var>items</var>, <var>callbackfn</var>, <var>keyCoercion</var> )</a></li><li><span class="item-toggle-none"></span><a href="#sec-add-value-to-keyed-group" title="AddValueToKeyedGroup ( groups, key, value )"><span class="secnum">4.2</span> AddValueToKeyedGroup ( <var>groups</var>, <var>key</var>, <var>value</var> )</a></li></ol></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 2 Draft / August 1, 2023</h1><h1 class="title">Array Grouping</h1>
2700 | 
2701 | <emu-clause id="sec-scope">
2702 |   <h1><span class="secnum">1</span> Scope</h1>
2703 |   <p>
2704 |     This is the spec text of the <a href="https://github.com/tc39/proposal-array-grouping/">Array Grouping proposal</a> in ECMAScript.
2705 |   </p>
2706 | </emu-clause>
2707 | 
2708 | <emu-clause id="sec-properties-of-the-object-constructor">
2709 |   <h1><span class="secnum">2</span> Properties of the Object Constructor (<a href="https://tc39.es/ecma262/multipage/fundamental-objects.html#sec-properties-of-the-object-constructor">20.1.2</a>)</h1>
2710 | 
2711 |   <ins class="block">
2712 |   <emu-clause id="sec-object.groupby">
2713 |     <h1><span class="secnum">2.1</span> Object.groupBy ( <var>items</var>, <var>callbackfn</var> )</h1>
2714 |     <emu-note><span class="note">Note</span><div class="note-contents">
2715 |       <p><var>callbackfn</var> should be a function that accepts two arguments. <code>groupBy</code> calls <var>callbackfn</var> once for each element in <var>items</var>, in ascending order, and constructs a new Object of arrays. Each value returned by <var>callbackfn</var> is coerced to a property key, and the associated element is included in the array in the constructed object according to this property key.</p>
2716 |       <p><var>callbackfn</var> is called with two arguments: the value of the element and the index of the element.</p>
2717 |       <p>The return value of <code>groupBy</code> is an object that does not inherit from %Object.prototype%.</p>
2718 |     </div></emu-note>
2719 |     <p>When the <code>groupBy</code> method is called with two arguments, the following steps are taken:</p>
2720 |     <emu-alg><ol><li>Let <var>groups</var> be ?&nbsp;<emu-xref aoid="GroupBy" id="_ref_0"><a href="#sec-group-by">GroupBy</a></emu-xref>(<var>items</var>, <var>callbackfn</var>, <emu-const>property</emu-const>).</li><li>Let <var>obj</var> be OrdinaryObjectCreate(<emu-val>null</emu-val>).</li><li>For each Record { <var class="field">[[Key]]</var>, <var class="field">[[Elements]]</var>&nbsp;} <var>g</var> of <var>groups</var>, do<ol><li>Let <var>elements</var> be CreateArrayFromList(<var>g</var>.<var class="field">[[Elements]]</var>).</li><li>Perform !&nbsp;CreateDataPropertyOrThrow(<var>obj</var>, <var>g</var>.<var class="field">[[Key]]</var>, <var>elements</var>).</li></ol></li><li>Return <var>obj</var>.</li></ol></emu-alg>
2721 |   </emu-clause>
2722 |   </ins>
2723 | </emu-clause>
2724 | 
2725 | <emu-clause id="sec-properties-of-the-map-constructor">
2726 |   <h1><span class="secnum">3</span> Properties of the Map Constructor (<a href="https://tc39.es/ecma262/multipage/keyed-collections.html#sec-properties-of-the-map-constructor">24.1.2</a>)</h1>
2727 | 
2728 |   <ins class="block">
2729 |   <emu-clause id="sec-map.groupby">
2730 |     <h1><span class="secnum">3.1</span> Map.groupBy ( <var>items</var>, <var>callbackfn</var> )</h1>
2731 |     <emu-note><span class="note">Note</span><div class="note-contents">
2732 |       <p><var>callbackfn</var> should be a function that accepts two arguments. <code>groupBy</code> calls <var>callbackfn</var> once for each element in <var>items</var>, in ascending order, and constructs a new Map of arrays. Each value returned by <var>callbackfn</var> is used as a key in the Map, and the associated element is included in the array in the constructed Map according to this key.</p>
2733 |       <p><var>callbackfn</var> is called with two arguments: the value of the element and the index of the element.</p>
2734 |       <p>The return value of <code>groupBy</code> is a Map.</p>
2735 |     </div></emu-note>
2736 |     <p>When the <code>groupBy</code> method is called with two arguments, the following steps are taken:</p>
2737 |     <emu-alg><ol><li>Let <var>groups</var> be ?&nbsp;<emu-xref aoid="GroupBy" id="_ref_1"><a href="#sec-group-by">GroupBy</a></emu-xref>(<var>items</var>, <var>callbackfn</var>, <emu-const>zero</emu-const>).</li><li>Let <var>map</var> be !&nbsp;Construct(%Map%).</li><li>For each Record { <var class="field">[[Key]]</var>, <var class="field">[[Elements]]</var>&nbsp;} <var>g</var> of <var>groups</var>, do<ol><li>Let <var>elements</var> be CreateArrayFromList(<var>g</var>.<var class="field">[[Elements]]</var>).</li><li>Let <var>entry</var> be the Record { <var class="field">[[Key]]</var>: <var>g</var>.<var class="field">[[Key]]</var>, <var class="field">[[Value]]</var>: <var>elements</var>&nbsp;}.</li><li>Append <var>entry</var> to <var>map</var>.<var class="field">[[MapData]]</var>.</li></ol></li><li>Return <var>map</var>.</li></ol></emu-alg>
2738 |   </emu-clause>
2739 |   </ins>
2740 | </emu-clause>
2741 | 
2742 | <emu-clause id="sec-group-by-helpers">
2743 |   <h1><span class="secnum">4</span> Group By Helpers</h1>
2744 | 
2745 |   <ins class="block">
2746 |   <emu-clause id="sec-group-by" type="abstract operation" aoid="GroupBy">
2747 |     <h1><span class="secnum">4.1</span> GroupBy ( <var>items</var>, <var>callbackfn</var>, <var>keyCoercion</var> )</h1>
2748 |     <p>The abstract operation GroupBy takes arguments <var>items</var> (an ECMAScript language value), <var>callbackfn</var> (an ECMAScript language value), and <var>keyCoercion</var> (<emu-const>property</emu-const> or <emu-const>zero</emu-const>) and returns either a normal completion containing a List of Records with fields <var class="field">[[Key]]</var> (an ECMAScript language value) and <var class="field">[[Elements]]</var> (a List of ECMAScript language values), or a throw completion. It performs the following steps when called:</p>
2749 |     <emu-alg><ol><li>Perform ?&nbsp;RequireObjectCoercible(<var>items</var>).</li><li>If IsCallable(<var>callbackfn</var>) is <emu-val>false</emu-val>, throw a <emu-val>TypeError</emu-val> exception.</li><li>Let <var>groups</var> be a new empty List.</li><li>Let <var>iteratorRecord</var> be ?&nbsp;GetIterator(<var>items</var>).</li><li>Let <var>k</var> be 0.</li><li>Repeat,<ol><li>If <var>k</var> ≥ 2<sup>53</sup> - 1, then<ol><li>Let <var>error</var> be ThrowCompletion(a newly created <emu-val>TypeError</emu-val> object).</li><li>Return ?&nbsp;IteratorClose(<var>iteratorRecord</var>, <var>error</var>).</li></ol></li><li>Let <var>next</var> be ?&nbsp;IteratorStep(<var>iteratorRecord</var>).</li><li>If <var>next</var> is <emu-val>false</emu-val>, then<ol><li>Return <var>groups</var>.</li></ol></li><li>Let <var>value</var> be ?&nbsp;IteratorValue(<var>next</var>).</li><li>Let <var>key</var> be Completion(Call(<var>callbackfn</var>, <emu-val>undefined</emu-val>, « <var>value</var>, 𝔽(<var>k</var>)&nbsp;»)).</li><li>IfAbruptCloseIterator(<var>key</var>, <var>iteratorRecord</var>).</li><li>If <var>keyCoercion</var> is <emu-const>property</emu-const>, then<ol><li>Set <var>key</var> to Completion(ToPropertyKey(<var>key</var>)).</li><li>IfAbruptCloseIterator(<var>key</var>, <var>iteratorRecord</var>).</li></ol></li><li>Else,<ol><li>Assert: <var>keyCoercion</var> is <emu-const>zero</emu-const>.</li><li>If <var>key</var> is <emu-val>-0</emu-val><sub>𝔽</sub>, set <var>key</var> to <emu-val>+0</emu-val><sub>𝔽</sub>.</li></ol></li><li>Perform <emu-xref aoid="AddValueToKeyedGroup" id="_ref_2"><a href="#sec-add-value-to-keyed-group">AddValueToKeyedGroup</a></emu-xref>(<var>groups</var>, <var>key</var>, <var>value</var>).</li><li>Set <var>k</var> to <var>k</var> + 1.</li></ol></li></ol></emu-alg>
2750 |   </emu-clause>
2751 |   </ins>
2752 | 
2753 |   <ins class="block">
2754 |   <emu-clause id="sec-add-value-to-keyed-group" type="abstract operation" aoid="AddValueToKeyedGroup">
2755 |     <h1><span class="secnum">4.2</span> AddValueToKeyedGroup ( <var>groups</var>, <var>key</var>, <var>value</var> )</h1>
2756 |     <p>The abstract operation AddValueToKeyedGroup takes arguments <var>groups</var> (a List of Records that have <var class="field">[[Key]]</var> and <var class="field">[[Elements]]</var> fields), <var>key</var> (an ECMAScript language value), and <var>value</var> (an ECMAScript language value) and returns <emu-const>unused</emu-const>. It performs the following steps when called:</p>
2757 |     <emu-alg><ol><li>For each Record { <var class="field">[[Key]]</var>, <var class="field">[[Elements]]</var>&nbsp;} <var>g</var> of <var>groups</var>, do<ol><li>If SameValue(<var>g</var>.<var class="field">[[Key]]</var>, <var>key</var>) is <emu-val>true</emu-val>, then<ol><li>Assert: exactly one element of <var>groups</var> meets this criteria.</li><li>Append <var>value</var> to <var>g</var>.<var class="field">[[Elements]]</var>.</li><li>Return <emu-const>unused</emu-const>.</li></ol></li></ol></li><li>Let <var>group</var> be the Record { <var class="field">[[Key]]</var>: <var>key</var>, <var class="field">[[Elements]]</var>: « <var>value</var>&nbsp;»&nbsp;}.</li><li>Append <var>group</var> to <var>groups</var>.</li><li>Return <emu-const>unused</emu-const>.</li></ol></emu-alg>
2758 |   </emu-clause>
2759 |   </ins>
2760 | </emu-clause><emu-annex id="sec-copyright-and-software-license">
2761 |       <h1><span class="secnum">A</span> Copyright &amp; Software License</h1>
2762 |       
2763 |       <h2>Copyright Notice</h2>
2764 |       <p>© 2023 Justin Ridgewell, Jordan Harband</p>
2765 | 
2766 |       <h2>Software License</h2>
2767 |       <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 <a href="https://ecma-international.org/memento/codeofconduct.htm">https://ecma-international.org/memento/codeofconduct.htm</a> FOR INFORMATION REGARDING THE LICENSING OF PATENT CLAIMS THAT ARE REQUIRED TO IMPLEMENT ECMA INTERNATIONAL STANDARDS.</p>
2768 | 
2769 | <p>Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:</p>
2770 | 
2771 | <ol>
2772 |   <li>Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.</li>
2773 |   <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>
2774 |   <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>
2775 | </ol>
2776 | 
2777 | <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>
2778 | 
2779 |     </emu-annex>
2780 | </div></body>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "proposal-array-grouping",
 4 |   "description": "A proposal to make grouping of array items easier",
 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/proposal-array-grouping#readme",
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/tc39/proposal-array-grouping.git"
14 |   },
15 |   "license": "MIT",
16 |   "devDependencies": {
17 |     "ecmarkup": "^17.0.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: Array Grouping
  8 | status: proposal
  9 | stage: 4
 10 | contributors: Justin Ridgewell, Jordan Harband
 11 | location: https://tc39.es/proposal-array-grouping/
 12 | </pre>
 13 | 
 14 | <emu-clause id="sec-scope">
 15 |   <h1>Scope</h1>
 16 |   <p>
 17 |     This is the spec text of the <a href="https://github.com/tc39/proposal-array-grouping/">Array Grouping proposal</a> in ECMAScript.
 18 |   </p>
 19 | </emu-clause>
 20 | 
 21 | <emu-clause id="sec-properties-of-the-object-constructor">
 22 |   <h1>Properties of the Object Constructor (<a href="https://tc39.es/ecma262/multipage/fundamental-objects.html#sec-properties-of-the-object-constructor">20.1.2</a>)</h1>
 23 | 
 24 |   <ins class="block">
 25 |   <emu-clause id="sec-object.groupby">
 26 |     <h1>Object.groupBy ( _items_, _callbackfn_ )</h1>
 27 |     <emu-note>
 28 |       <p>_callbackfn_ should be a function that accepts two arguments. `groupBy` calls _callbackfn_ once for each element in _items_, in ascending order, and constructs a new Object of arrays. Each value returned by _callbackfn_ is coerced to a property key, and the associated element is included in the array in the constructed object according to this property key.</p>
 29 |       <p>_callbackfn_ is called with two arguments: the value of the element and the index of the element.</p>
 30 |       <p>The return value of `groupBy` is an object that does not inherit from %Object.prototype%.</p>
 31 |     </emu-note>
 32 |     <p>When the `groupBy` method is called with two arguments, the following steps are taken:</p>
 33 |     <emu-alg>
 34 |       1. Let _groups_ be ? GroupBy(_items_, _callbackfn_, ~property~).
 35 |       1. Let _obj_ be OrdinaryObjectCreate(*null*).
 36 |       1. For each Record { [[Key]], [[Elements]] } _g_ of _groups_, do
 37 |         1. Let _elements_ be CreateArrayFromList(_g_.[[Elements]]).
 38 |         1. Perform ! CreateDataPropertyOrThrow(_obj_, _g_.[[Key]], _elements_).
 39 |       1. Return _obj_.
 40 |     </emu-alg>
 41 |   </emu-clause>
 42 |   </ins>
 43 | </emu-clause>
 44 | 
 45 | <emu-clause id="sec-properties-of-the-map-constructor">
 46 |   <h1>Properties of the Map Constructor (<a href="https://tc39.es/ecma262/multipage/keyed-collections.html#sec-properties-of-the-map-constructor">24.1.2</a>)</h1>
 47 | 
 48 |   <ins class="block">
 49 |   <emu-clause id="sec-map.groupby">
 50 |     <h1>Map.groupBy ( _items_, _callbackfn_ )</h1>
 51 |     <emu-note>
 52 |       <p>_callbackfn_ should be a function that accepts two arguments. `groupBy` calls _callbackfn_ once for each element in _items_, in ascending order, and constructs a new Map of arrays. Each value returned by _callbackfn_ is used as a key in the Map, and the associated element is included in the array in the constructed Map according to this key.</p>
 53 |       <p>_callbackfn_ is called with two arguments: the value of the element and the index of the element.</p>
 54 |       <p>The return value of `groupBy` is a Map.</p>
 55 |     </emu-note>
 56 |     <p>When the `groupBy` method is called with two arguments, the following steps are taken:</p>
 57 |     <emu-alg>
 58 |       1. Let _groups_ be ? GroupBy(_items_, _callbackfn_, ~zero~).
 59 |       1. Let _map_ be ! Construct(%Map%).
 60 |       1. For each Record { [[Key]], [[Elements]] } _g_ of _groups_, do
 61 |         1. Let _elements_ be CreateArrayFromList(_g_.[[Elements]]).
 62 |         1. Let _entry_ be the Record { [[Key]]: _g_.[[Key]], [[Value]]: _elements_ }.
 63 |         1. Append _entry_ to _map_.[[MapData]].
 64 |       1. Return _map_.
 65 |     </emu-alg>
 66 |   </emu-clause>
 67 |   </ins>
 68 | </emu-clause>
 69 | 
 70 | <emu-clause id="sec-group-by-helpers">
 71 |   <h1>Group By Helpers</h1>
 72 | 
 73 |   <ins class="block">
 74 |   <emu-clause id="sec-group-by" type="abstract operation">
 75 |     <h1>
 76 |       GroupBy (
 77 |         _items_: an ECMAScript language value,
 78 |         _callbackfn_: an ECMAScript language value,
 79 |         _keyCoercion_: ~property~ or ~zero~,
 80 |       ): either a normal completion containing a List of Records with fields [[Key]] (an ECMAScript language value) and [[Elements]] (a List of ECMAScript language values), or a throw completion
 81 |     </h1>
 82 |     <dl class="header">
 83 |     </dl>
 84 |     <emu-alg>
 85 |       1. Perform ? RequireObjectCoercible(_items_).
 86 |       1. If IsCallable(_callbackfn_) is *false*, throw a *TypeError* exception.
 87 |       1. Let _groups_ be a new empty List.
 88 |       1. Let _iteratorRecord_ be ? GetIterator(_items_).
 89 |       1. Let _k_ be 0.
 90 |       1. Repeat,
 91 |         1. If _k_ ≥ 2<sup>53</sup> - 1, then
 92 |           1. Let _error_ be ThrowCompletion(a newly created *TypeError* object).
 93 |           1. Return ? IteratorClose(_iteratorRecord_, _error_).
 94 |         1. Let _next_ be ? IteratorStep(_iteratorRecord_).
 95 |         1. If _next_ is *false*, then
 96 |           1. Return _groups_.
 97 |         1. Let _value_ be ? IteratorValue(_next_).
 98 |         1. Let _key_ be Completion(Call(_callbackfn_, *undefined*, &laquo; _value_, 𝔽(_k_) &raquo;)).
 99 |         1. IfAbruptCloseIterator(_key_, _iteratorRecord_).
100 |         1. If _keyCoercion_ is ~property~, then
101 |           1. Set _key_ to Completion(ToPropertyKey(_key_)).
102 |           1. IfAbruptCloseIterator(_key_, _iteratorRecord_).
103 |         1. Else,
104 |           1. Assert: _keyCoercion_ is ~zero~.
105 |           1. If _key_ is *-0*<sub>𝔽</sub>, set _key_ to *+0*<sub>𝔽</sub>.
106 |         1. Perform AddValueToKeyedGroup(_groups_, _key_, _value_).
107 |         1. Set _k_ to _k_ + 1.
108 |     </emu-alg>
109 |   </emu-clause>
110 |   </ins>
111 | 
112 |   <ins class="block">
113 |   <emu-clause id="sec-add-value-to-keyed-group" type="abstract operation">
114 |     <h1>
115 |       AddValueToKeyedGroup (
116 |         _groups_: a List of Records that have [[Key]] and [[Elements]] fields,
117 |         _key_: an ECMAScript language value,
118 |         _value_: an ECMAScript language value,
119 |       ): ~unused~
120 |     </h1>
121 |     <dl class="header">
122 |     </dl>
123 |     <emu-alg>
124 |       1. For each Record { [[Key]], [[Elements]] } _g_ of _groups_, do
125 |         1. If SameValue(_g_.[[Key]], _key_) is *true*, then
126 |           1. Assert: exactly one element of _groups_ meets this criteria.
127 |           1. Append _value_ to _g_.[[Elements]].
128 |           1. Return ~unused~.
129 |       1. Let _group_ be the Record { [[Key]]: _key_, [[Elements]]: &laquo; _value_ &raquo; }.
130 |       1. Append _group_ to _groups_.
131 |       1. Return ~unused~.
132 |     </emu-alg>
133 |   </emu-clause>
134 |   </ins>
135 | </emu-clause>
136 | 


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