Extract production rules dfns from ECMAScript spec (#1881)

Via mdn/browser-compat-data#27246

This completes preprocessing of the ECMAScript spec to also extract production
rules that are needed for documentation purpose. These production rules are
defined in `<emu-production>` tags wrapped in `<emu-grammar type="definition">`
tags.

Annex B re-defines some of the production rules for Web browser hosts. To
avoid duplication, the code adds a `"for": ["Web browsers"]` to disambiguate.

All definitions are created with a "grammar" definition type, and flagged as
"private" (at least until it becomes clear that the terms are needed for xref
purpose). Use of "grammar" is not fantastic but is already done by the CSP
spec and it avoids introducing a new definition type that isn't explicitly
supported by spec authoring tools.

Author: tidoust

src/browserlib/extract-dfns.mjs

@@ -705,6 +705,21 @@ function preProcessEcmascript() {
       }
     });
 
+  // Extract production rules
+  [...document.querySelectorAll("emu-grammar[type=definition] emu-production")]
+    .forEach(el => {
+      const dfn = wrapWithDfn(el);
+      dfn.id = el.id;
+      dfn.dataset.lt = el.getAttribute("name");
+      dfn.dataset.dfnType = "grammar";
+      dfn.dataset.noexport = "";
+      if (el.closest('[data-reffy-page$="additional-ecmascript-features-for-web-browsers.html"]')) {
+        // Production rules in Annex B replace some of the production rules
+        // defined in other sections for web browser hosts.
+        dfn.dataset.dfnFor = "Web browsers";
+      }
+    });
+
   [...document.querySelectorAll("dfn")]
     .filter(legacySectionFilter)
     .forEach(el => {

test/extract-dfns.js

@@ -214,7 +214,7 @@ const tests = [
     spec: "ecmascript"
   },
   {
-    title: "extracts  properties of the globalThis object in ecmascript spec",
+    title: "extracts properties of the globalThis object in ecmascript spec",
     html: '<emu-clause id="sec-value-properties-of-the-global-object"><h1><span class="secnum">25.1.5.1</span> Value Properties of the Global Object</h1><emu-clause id="foo"> <h1>Foo</h1></emu-clause></emu-clause>',
     changesToBaseDfn: [ {type: "attribute", "for": ["globalThis"], access: "public", definedIn: "heading", heading: { id: "foo", href: "about:blank#foo", title: "Foo"}}],
     spec: "ecmascript"
@@ -292,6 +292,40 @@ const tests = [
     changesToBaseDfn: [{linkingText: [ "Function"], type: "dfn", "for": ["ECMAScript Execution Contexts"], access: "public", definedIn: "table", heading: { id: "foo", href: "about:blank#foo", title: "Heading"}}],
     spec: "ecmascript"
   },
+  {
+    title: 'extracts production rules from ecmascript spec',
+    html: `<emu-grammar type="definition">
+      <emu-production name="SpreadElement" id="foo">
+        ...
+      </emu-production>
+    </emu-grammar>`,
+    changesToBaseDfn: [{
+      linkingText: ["SpreadElement"],
+      type: "grammar"
+    }],
+    spec: "ecmascript"
+  },
+  {
+    title: 'scopes Annex B production rules from ecmascript spec',
+    html: `<section data-reffy-page="https://example.org/additional-ecmascript-features-for-web-browsers.html">
+      <emu-grammar type="definition">
+        <emu-production name="SpreadElement" id="foo">
+        ...
+        </emu-production>
+      </emu-grammar>
+    </section>`,
+    changesToBaseDfn: [{
+      href: "https://example.org/additional-ecmascript-features-for-web-browsers.html#foo",
+      linkingText: ["SpreadElement"],
+      type: "grammar",
+      for: ["Web browsers"],
+      heading: {
+        href: 'https://example.org/additional-ecmascript-features-for-web-browsers.html',
+        title: ''
+      }
+    }],
+    spec: "ecmascript"
+  },
   {
     title: 'assign ids to un-id’d definitions of the ecmascript spec',
     html: '<emu-clause id="foo"><h1><span class="secnum">9.4</span> Execution Contexts</h1><p>An <dfn variants="execution contexts">execution context</dfn> is a specification device that is used to track the runtime evaluation of code by an ECMAScript implementation.</p></emu-clause>',