Meta: fix the grammar post processor on Review Drafts

Closes #1195 by using a new attribute, grammar-fill-with="", which won't get removed by Bikeshed's "slim build artifact" setting.

Closes #815 since the new version of webidl-grammar-post-processor includes the appropriate nonterminal fix.

Author: domenic

Makefile

@@ -20,7 +20,7 @@ local: index.bs
 
 deploy: index.bs
 	curl --remote-name --fail https://resources.whatwg.org/build/deploy.sh
-	POST_BUILD_STEP='node ./check-grammar.js "$$DIR/index.html" && npm run pp-webidl -- --input "$$DIR/index.html"' \
+	POST_BUILD_STEP='node ./check-grammar.js "$$DIR/index.html" && npm run webidl-grammar-post-processor -- --input "$$DIR/index.html"' \
 	bash ./deploy.sh
 
 review: index.bs

index.bs

@@ -1249,15 +1249,15 @@ No [=extended attributes=] defined in this specification are applicable to [=inc
 
 </div>
 
-<div data-fill-with="grammar-CallbackOrInterfaceOrMixin"></div>
+<div grammar-fill-with="CallbackOrInterfaceOrMixin"></div>
 
-<div data-fill-with="grammar-CallbackRestOrInterfaceOrMixin"></div>
+<div grammar-fill-with="CallbackRestOrInterfaceOrMixin"></div>
 
-<div data-fill-with="grammar-InterfaceOrMixin"></div>
+<div grammar-fill-with="InterfaceOrMixin"></div>
 
-<div data-fill-with="grammar-Partial"></div>
+<div grammar-fill-with="Partial"></div>
 
-<div data-fill-with="grammar-PartialDefinition"></div>
+<div grammar-fill-with="PartialDefinition"></div>
 
 <pre class="grammar" id="prod-MixinRest">
     MixinRest :
@@ -2449,7 +2449,7 @@ Note: When defining [=method steps=], you implicitly have access to [=this=].
         ε
 </pre>
 
-<div data-fill-with="grammar-ArgumentNameKeyword"></div>
+<div grammar-fill-with="ArgumentNameKeyword"></div>
 
 <h5 id="idl-tojson-operation">toJSON</h5>
 
@@ -2631,13 +2631,13 @@ See [[#interface-object]] for details on how a [=constructor operation=] is to b
         "constructor" "(" ArgumentList ")" ";"
 </pre>
 
-<div data-fill-with="grammar-ArgumentList"></div>
-<div data-fill-with="grammar-Arguments"></div>
-<div data-fill-with="grammar-Argument"></div>
-<div data-fill-with="grammar-ArgumentRest"></div>
-<div data-fill-with="grammar-ArgumentName"></div>
-<div data-fill-with="grammar-Ellipsis"></div>
-<div data-fill-with="grammar-ArgumentNameKeyword"></div>
+<div grammar-fill-with="ArgumentList"></div>
+<div grammar-fill-with="Arguments"></div>
+<div grammar-fill-with="Argument"></div>
+<div grammar-fill-with="ArgumentRest"></div>
+<div grammar-fill-with="ArgumentName"></div>
+<div grammar-fill-with="Ellipsis"></div>
+<div grammar-fill-with="ArgumentNameKeyword"></div>
 
 
 <h4 id="idl-stringifiers">Stringifiers</h4>
@@ -4483,9 +4483,9 @@ an [=asynchronously iterable declaration=],
 a [=setlike declaration=], or
 an [=indexed property getter=].
 
-<div data-fill-with="grammar-ReadOnlyMember"></div>
+<div grammar-fill-with="ReadOnlyMember"></div>
 
-<div data-fill-with="grammar-ReadOnlyMemberRest"></div>
+<div grammar-fill-with="ReadOnlyMemberRest"></div>
 
 <pre class="grammar" id="prod-ReadWriteMaplike">
     ReadWriteMaplike :
@@ -4573,9 +4573,9 @@ an [=asynchronously iterable declaration=],
 a [=maplike declaration=], or
 an [=indexed property getter=].
 
-<div data-fill-with="grammar-ReadOnlyMember"></div>
+<div grammar-fill-with="ReadOnlyMember"></div>
 
-<div data-fill-with="grammar-ReadOnlyMemberRest"></div>
+<div grammar-fill-with="ReadOnlyMemberRest"></div>
 
 <pre class="grammar" id="prod-ReadWriteSetlike">
     ReadWriteSetlike :
@@ -4640,9 +4640,9 @@ Of the extended attributes defined in this specification, only the [{{CrossOrigi
 
 [=Namespaces=] must be annotated with the [{{Exposed}}] [=extended attribute=].
 
-<div data-fill-with="grammar-Partial"></div>
+<div grammar-fill-with="Partial"></div>
 
-<div data-fill-with="grammar-PartialDefinition"></div>
+<div grammar-fill-with="PartialDefinition"></div>
 
 <pre class="grammar" id="prod-Namespace">
     Namespace :
@@ -4978,9 +4978,9 @@ on that dictionary's [=inherited dictionaries=].
 
 No [=extended attributes=] are applicable to dictionaries.
 
-<div data-fill-with="grammar-Partial"></div>
+<div grammar-fill-with="Partial"></div>
 
-<div data-fill-with="grammar-PartialDefinition"></div>
+<div grammar-fill-with="PartialDefinition"></div>
 
 <pre class="grammar" id="prod-Dictionary">
     Dictionary :
@@ -5015,9 +5015,9 @@ No [=extended attributes=] are applicable to dictionaries.
         ε
 </pre>
 
-<div data-fill-with="grammar-DefaultValue"></div>
+<div grammar-fill-with="DefaultValue"></div>
 
-<div data-fill-with="grammar-Inheritance"></div>
+<div grammar-fill-with="Inheritance"></div>
 
 <div class="example" id="example-f7efabfd">
 
@@ -5474,9 +5474,9 @@ be used as the type of a [=constant=].
 The following extended attribute is applicable to callback functions:
 [{{LegacyTreatNonObjectAsNull}}].
 
-<div data-fill-with="grammar-CallbackOrInterfaceOrMixin"></div>
+<div grammar-fill-with="CallbackOrInterfaceOrMixin"></div>
 
-<div data-fill-with="grammar-CallbackRestOrInterfaceOrMixin"></div>
+<div grammar-fill-with="CallbackRestOrInterfaceOrMixin"></div>
 
 <pre class="grammar" id="prod-CallbackRest">
     CallbackRest :
@@ -5718,7 +5718,7 @@ are known as <dfn id="dfn-object-type" export>object types</dfn>.
         "undefined" Null
 </pre>
 
-<div data-fill-with="grammar-ConstType"></div>
+<div grammar-fill-with="ConstType"></div>
 
 <pre class="grammar" id="prod-PrimitiveType">
     PrimitiveType :
@@ -6384,13 +6384,13 @@ in IDL are represented in the same way that constant values of their
 [=member types=] would be
 represented.
 
-<div data-fill-with="grammar-UnionType"></div>
+<div grammar-fill-with="UnionType"></div>
 
-<div data-fill-with="grammar-UnionMemberType"></div>
+<div grammar-fill-with="UnionMemberType"></div>
 
-<div data-fill-with="grammar-UnionMemberTypes"></div>
+<div grammar-fill-with="UnionMemberTypes"></div>
 
-<div data-fill-with="grammar-DistinguishableType"></div>
+<div grammar-fill-with="DistinguishableType"></div>
 
 
 <h4 id="idl-annotated-types">Annotated types</h4>
@@ -14925,7 +14925,7 @@ in the input text being parsed.  Such <emu-t class="regex"><a href="#prod-whites
 The following LL(1) grammar, starting with <emu-nt><a href="#prod-Definitions">Definitions</a></emu-nt>,
 matches an [=IDL fragment=]:
 
-<div data-fill-with="grammar-index"></div>
+<div grammar-fill-with="index"></div>
 
 Note: The <emu-nt><a href="#prod-Other">Other</a></emu-nt>
 non-terminal matches any single terminal symbol except for
@@ -15053,33 +15053,51 @@ which is available under the
 <a href=https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document>W3C Software and Document License</a>.
 
 
-<script class="remove">
-    // Grammar
-    (function() {
-        function wrap(s) { return "<pre class=grammar>" + s + "</pre>"; }
-        var output = "";
-        [].forEach.call(document.querySelectorAll("pre.grammar"), pre => {
-            var html = pre.textContent.replace(/("[^"]+")|([a-zA-Z]+)|(:)/g, m => {
-                if (/^"/.test(m)) { return "<emu-t>" + m.replace(/^"|"$/g, "") + "</emu-t>"; }
-                if (/^(integer|decimal|identifier|string|whitespace|comment|other)$/.test(m)) {
-                  return "<emu-t class=\"regex\"><a href=\"#prod-" + m + "\">" + m + "</a></emu-t>";
-                }
-                if (m == ":") { return "::"; }
-                if (document.querySelector("#prod-" + m)) {
-                  return "<emu-nt><a href=\"#prod-" + m + "\">" + m + "</a></emu-nt>";
-                }
-                return "<emu-nt>" + m + "</emu-nt>"
-            });
-
-            pre.innerHTML = html;
-            var fillWith = document.querySelectorAll("div[data-fill-with=\"grammar-" + pre.id.replace("prod-", "") + "\"]");
-            [].forEach.call(fillWith, div => div.innerHTML = wrap(html));
-
-            if (!(/\bno-index\b/).test(pre.className)) {
-              output += html.replace(/<emu-nt>/, "<emu-nt id=\"" + pre.id.replace("prod-", "index-prod-") + "\">")
-                .replace(/#prod-([^a-z])/g, "#index-prod-$1") + "\n";
-            }
-        });
-        document.querySelector("div[data-fill-with=\"grammar-index\"]").innerHTML = wrap(output);
-    })();
+<script type="module" class="remove">
+// This is a copy of the script from webidl-grammar-post-processor. It will fill in the various
+// `grammar-fill-with=""` parts of the document at runtime, allowing local development to just use
+// `bikeshed` instead of the whole `make` process. In fully-built versions, it is removed by
+// webidl-grammar-post-processor.
+
+let output = "";
+for (const pre of document.querySelectorAll("pre.grammar")) {
+    const html = pre.textContent.replace(/("[^"]+")|([a-zA-Z]+)|(:)/g, m => {
+        if (/^"/.test(m)) {
+            return `<emu-t>${m.replace(/^"|"$/g, "")}</emu-t>`;
+        }
+        if (/^(integer|decimal|identifier|string|whitespace|comment|other)$/.test(m)) {
+          return `<emu-t class="regex"><a href="#prod-${m}">${m}</a></emu-t>`;
+        }
+        if (m == ":") {
+            return "::";
+        }
+        if (document.querySelector(`#prod-${m}`)) {
+          return `<emu-nt><a href="#prod-${m}">${m}</a></emu-nt>`;
+        }
+        return `<emu-nt>${m}</emu-nt>`;
+    });
+
+    pre.innerHTML = html;
+
+    const fillWith = document.querySelectorAll(`div[grammar-fill-with="${pre.id.replace("prod-", "")}"]`);
+    for (const div of fillWith) {
+        div.innerHTML = wrap(html);
+    }
+
+    if (!pre.classList.contains("no-index")) {
+      output += html
+        .replace(/<emu-nt>/, `<emu-nt id="${pre.id.replace("prod-", "index-prod-")}">`)
+        .replace(/#prod-([^a-z])/g, "#index-prod-$1") + "\n";
+    }
+}
+
+document.querySelector("div[grammar-fill-with=\"index\"]").innerHTML = wrap(output);
+
+for (const el of document.querySelectorAll("[grammar-fill-with]")) {
+  el.removeAttribute("grammar-fill-with");
+}
+
+function wrap(s) {
+    return `<pre class=grammar>${s}</pre>`;
+}
 </script>

package.json

@@ -1,12 +1,12 @@
 {
   "private": true,
-  "description": "Checks that the WebIDL grammar is LL(1)",
+  "description": "Checks that the WebIDL grammar is LL(1) and performs postprocessing",
   "devDependencies": {
-    "jsdom": "^11.3.0",
+    "jsdom": "^20.0.0",
     "syntax-cli": "0.0.97",
-    "webidl-grammar-post-processor": "^0.4.0"
+    "webidl-grammar-post-processor": "^1.0.0"
   },
   "scripts": {
-    "pp-webidl": "pp-webidl"
+    "webidl-grammar-post-processor": "webidl-grammar-post-processor"
   }
 }