experiment: try to get line number of errors

speced · Mar 27, 2021 · 77294ea · 77294ea
1 parent d8e57af
commit 77294ea
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 8 deletions.
diff --git a/examples/basic.commented.html b/examples/basic.commented.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html><!-- respec-sourcemap#examples/basic.html:1 -->
+<html><!-- respec-sourcemap#examples/basic.html:2 -->
+  <head><!-- respec-sourcemap#examples/basic.html:3 -->
+    <meta charset='utf-8'><!-- respec-sourcemap#examples/basic.html:4 -->
+    <title>
+      Replace me with a real title
+    </title><!-- respec-sourcemap#examples/basic.html:7 -->
+    <script src='../builds/respec-w3c.js' async class='remove'></script><!-- respec-sourcemap#examples/basic.html:8 -->
+    <script class='remove'>
+      var respecConfig = {
+        specStatus: "ED",
+        subtitle: "Subtitle",
+        shortName: "shortname-api",
+        editors: [{
+          name: "Your Name",
+          url: "https://your-site.com",
+        }],
+        github: "https://github.com/w3c/some-API/",
+        lint: { "check-punctuation": true },
+        implementationReportURI: "https://w3c.github.io/test-results/some-API",
+      };
+    </script><!-- respec-sourcemap#examples/basic.html:22 -->
+  </head><!-- respec-sourcemap#examples/basic.html:23 -->
+  <body><!-- respec-sourcemap#examples/basic.html:24 -->
+    <section id='abstract'><!-- respec-sourcemap#examples/basic.html:25 -->
+      <p><!-- respec-sourcemap#examples/basic.html:26 -->
+        This is required.<!-- respec-sourcemap#examples/basic.html:27 -->
+      </p><!-- respec-sourcemap#examples/basic.html:28 -->
+    </section><!-- respec-sourcemap#examples/basic.html:29 -->
+    <section id='sotd'><!-- respec-sourcemap#examples/basic.html:30 -->
+      <p><!-- respec-sourcemap#examples/basic.html:31 -->
+        This is required.<!-- respec-sourcemap#examples/basic.html:32 -->
+      </p><!-- respec-sourcemap#examples/basic.html:33 -->
+    </section><!-- respec-sourcemap#examples/basic.html:34 -->
+    <section class="introductory" id="overview"><!-- respec-sourcemap#examples/basic.html:35 -->
+      <h2><!-- respec-sourcemap#examples/basic.html:36 -->
+        Overview<!-- respec-sourcemap#examples/basic.html:37 -->
+      </h2><!-- respec-sourcemap#examples/basic.html:38 -->
+      <p><!-- respec-sourcemap#examples/basic.html:39 -->
+        This section has a CSS class "<code>introductory</code>", which means<!-- respec-sourcemap#examples/basic.html:40 -->
+        it will not appear in the <abbr title="Table of Contents">TOC</abbr>.<!-- respec-sourcemap#examples/basic.html:41 -->
+        Example Link to Section.<!-- respec-sourcemap#examples/basic.html:42 -->
+      </p><!-- respec-sourcemap#examples/basic.html:43 -->
+    </section><!-- respec-sourcemap#examples/basic.html:44 -->
+    <section class="informative" id="intro"><!-- respec-sourcemap#examples/basic.html:45 -->
+      <h2><!-- respec-sourcemap#examples/basic.html:46 -->
+        Introduction<!-- respec-sourcemap#examples/basic.html:47 -->
+      </h2><!-- respec-sourcemap#examples/basic.html:48 -->
+      <p><!-- respec-sourcemap#examples/basic.html:49 -->
+        This section has a CSS class "<code>informative</code>", so it is<!-- respec-sourcemap#examples/basic.html:50 -->
+        listed in the TOC. ReSpec will list this reference as non-normative<!-- respec-sourcemap#examples/basic.html:51 -->
+        since this is an informative section [[DOM]].<!-- respec-sourcemap#examples/basic.html:52 -->
+      </p><!-- respec-sourcemap#examples/basic.html:53 -->
+    </section><!-- respec-sourcemap#examples/basic.html:54 -->
+    <section data-dfn-for="Foo"><!-- respec-sourcemap#examples/basic.html:55 -->
+      <h2><!-- respec-sourcemap#examples/basic.html:56 -->
+        <dfn>Foo</dfn> interface<!-- respec-sourcemap#examples/basic.html:57 -->
+      </h2><!-- respec-sourcemap#examples/basic.html:58 -->
+      <pre class="idl"><!-- respec-sourcemap#examples/basic.html:59 -->
+      [Exposed Window]<!-- respec-sourcemap#examples/basic.html:60 -->
+      interface Foo {<!-- respec-sourcemap#examples/basic.html:61 -->
+        constructor();<!-- respec-sourcemap#examples/basic.html:62 -->
+        attribute DOMString bar;<!-- respec-sourcemap#examples/basic.html:63 -->
+        undefined doTheFoo();<!-- respec-sourcemap#examples/basic.html:64 -->
+      };<!-- respec-sourcemap#examples/basic.html:65 -->
+      </pre><!-- respec-sourcemap#examples/basic.html:66 -->
+      <p><!-- respec-sourcemap#examples/basic.html:67 -->
+        The <a>Foo</a> interface is nice. Lets you do stuff.<!-- respec-sourcemap#examples/basic.html:68 -->
+      </p><!-- respec-sourcemap#examples/basic.html:69 -->
+      <p><!-- respec-sourcemap#examples/basic.html:70 -->
+        The <dfn>Foo.constructor()</dfn> creates a Foo instance<!-- respec-sourcemap#examples/basic.html:71 -->
+      </p><!-- respec-sourcemap#examples/basic.html:72 -->
+      <p><!-- respec-sourcemap#examples/basic.html:73 -->
+        The <dfn>bar</dfn> attribute, returns 🍺.<!-- respec-sourcemap#examples/basic.html:74 -->
+      </p><!-- respec-sourcemap#examples/basic.html:75 -->
+      <p><!-- respec-sourcemap#examples/basic.html:76 -->
+        The <dfn>doTheFoo()</dfn> method, returns nothing<!-- respec-sourcemap#examples/basic.html:77 -->
+      </p><!-- respec-sourcemap#examples/basic.html:78 -->
+      <p><!-- respec-sourcemap#examples/basic.html:79 -->
+        ReSpec will list this reference as normative [[ECMASCRIPT]].<!-- respec-sourcemap#examples/basic.html:80 -->
+      </p><!-- respec-sourcemap#examples/basic.html:81 -->
+      <p><!-- respec-sourcemap#examples/basic.html:82 -->
+        This is an example of a non-normative reference in a normative section<!-- respec-sourcemap#examples/basic.html:83 -->
+        [[?HTML]]<!-- respec-sourcemap#examples/basic.html:84 -->
+      </p><!-- respec-sourcemap#examples/basic.html:85 -->
+      <pre class="js example" title="Usage example"><!-- respec-sourcemap#examples/basic.html:86 -->
+        const foo = new Foo();<!-- respec-sourcemap#examples/basic.html:87 -->
+        if (foo.bar === "my bar") {<!-- respec-sourcemap#examples/basic.html:88 -->
+          foo.doTheBar();<!-- respec-sourcemap#examples/basic.html:89 -->
+        }<!-- respec-sourcemap#examples/basic.html:90 -->
+      </pre><!-- respec-sourcemap#examples/basic.html:91 -->
+    </section><!-- respec-sourcemap#examples/basic.html:92 -->
+    <section id="logo"><!-- respec-sourcemap#examples/basic.html:93 -->
+      <h2><!-- respec-sourcemap#examples/basic.html:94 -->
+        Figure<!-- respec-sourcemap#examples/basic.html:95 -->
+      </h2><!-- respec-sourcemap#examples/basic.html:96 -->
+      <figure id="figure"><!-- respec-sourcemap#examples/basic.html:97 -->
+        <img src="figure.svg" alt="W3C Logo"><!-- respec-sourcemap#examples/basic.html:98 -->
+        <figcaption><!-- respec-sourcemap#examples/basic.html:99 -->
+          The W3C logo<!-- respec-sourcemap#examples/basic.html:100 -->
+        </figcaption><!-- respec-sourcemap#examples/basic.html:101 -->
+      </figure><!-- respec-sourcemap#examples/basic.html:102 -->
+      <p><!-- respec-sourcemap#examples/basic.html:103 -->
+        Link to <a href="#figure"></a>.<!-- respec-sourcemap#examples/basic.html:104 -->
+      </p><!-- respec-sourcemap#examples/basic.html:105 -->
+    </section><!-- respec-sourcemap#examples/basic.html:106 -->
+    <section id="idl-index" class="appendix"><!-- respec-sourcemap#examples/basic.html:107 -->
+      <h2><!-- respec-sourcemap#examples/basic.html:108 -->
+        IDL Index<!-- respec-sourcemap#examples/basic.html:109 -->
+      </h2><!-- respec-sourcemap#examples/basic.html:110 -->
+      <p><!-- respec-sourcemap#examples/basic.html:111 -->
+        All the Web IDL in this specification is collected in this section.<!-- respec-sourcemap#examples/basic.html:112 -->
+      </p><!-- respec-sourcemap#examples/basic.html:113 -->
+    </section><!-- respec-sourcemap#examples/basic.html:114 -->
+    <section id="tof" class="informative appendix"></section><!-- respec-sourcemap#examples/basic.html:115 -->
+  </body><!-- respec-sourcemap#examples/basic.html:116 -->
+</html><!-- respec-sourcemap#examples/basic.html:117 -->
diff --git a/examples/basic.html b/examples/basic.html
@@ -5,7 +5,7 @@
     <title>
       Replace me with a real title
     </title>
-    <script src='../profiles/w3c.js' async class='remove'></script>
+    <script src='../builds/respec-w3c.js' async class='remove'></script>
     <script class='remove'>
       var respecConfig = {
         specStatus: "ED",
@@ -16,7 +16,7 @@
           url: "https://your-site.com",
         }],
         github: "https://github.com/w3c/some-API/",
-        testSuiteURI: "https://w3c-test.org/some-API/",
+        lint: { "check-punctuation": true },
         implementationReportURI: "https://w3c.github.io/test-results/some-API",
       };
     </script>
@@ -39,7 +39,7 @@ <h2>
       <p>
         This section has a CSS class "<code>introductory</code>", which means
         it will not appear in the <abbr title="Table of Contents">TOC</abbr>.
-        Example Link to Section <a href="#logo"></a>.
+        Example Link to Section.
       </p>
     </section>
     <section class="informative" id="intro">
@@ -57,7 +57,7 @@ <h2>
         <dfn>Foo</dfn> interface
       </h2>
       <pre class="idl">
-      [Exposed=Window]
+      [Exposed Window]
       interface Foo {
         constructor();
         attribute DOMString bar;
@@ -68,13 +68,13 @@ <h2>
         The <a>Foo</a> interface is nice. Lets you do stuff.
       </p>
       <p>
-        The <dfn>Foo.constructor()</dfn> creates a Foo instance.
+        The <dfn>Foo.constructor()</dfn> creates a Foo instance
       </p>
       <p>
         The <dfn>bar</dfn> attribute, returns 🍺.
       </p>
       <p>
-        The <dfn>doTheFoo()</dfn> method, returns nothing.
+        The <dfn>doTheFoo()</dfn> method, returns nothing
       </p>
       <p>
         ReSpec will list this reference as normative [[ECMASCRIPT]].
@@ -101,7 +101,7 @@ <h2>
         </figcaption>
       </figure>
       <p>
-        Link to <a href="#figure"></a>
+        Link to <a href="#figure"></a>.
       </p>
     </section>
     <section id="idl-index" class="appendix">

diff --git a/tools/respec2html.js b/tools/respec2html.js
@@ -86,7 +86,7 @@ class Logger {
       const paddedTitle = `${title}:`.padStart(padWidth);
       console.error(" ", colors.bold(paddedTitle), this._formatMarkdown(value));
     };
-    print("Count", rsError.elements && String(rsError.elements.length));
+    print("Line", rsError.location && rsError.location.join(", "));
     print("Plugin", rsError.plugin);
     print("Hint", rsError.hint);
   }

diff --git a/tools/respecDocWriter.js b/tools/respecDocWriter.js
@@ -290,6 +290,29 @@ function handleConsoleMessages(page, onError, onWarning) {
         return JSON.stringify({ message: String(obj) });
       } else {
         // Ideally: `obj instanceof RsError` and `RsError instanceof Error`.
+        if (obj.elements) {
+          /** @type {HTMLElement[]} */
+          const elems = obj.elements;
+          const regex = /respec-sourcemap#(.+)/;
+          /** @param {Node} [node] */
+          const hasComment = node => {
+            if (!node || node.nodeType !== Node.COMMENT_NODE) return false;
+            return regex.test(node.textContent);
+          };
+          /** @param {Node} node  */
+          const match = node => node.textContent.match(regex)[1].trim();
+          const location = elems.map(el => {
+            if (hasComment(el.firstChild)) {
+              return match(el.firstChild);
+            }
+            if (hasComment(el.nextSibling)) {
+              return match(el.nextSibling);
+            }
+            return 0;
+          });
+          const result = { ...JSON.parse(JSON.stringify(obj)), location };
+          return JSON.stringify(result);
+        }
         return JSON.stringify(obj);
       }
     }, handle);