From 77294eabe07e5a516d5fe2c840e873b08fd80bed Mon Sep 17 00:00:00 2001 From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com> Date: Sun, 28 Mar 2021 00:59:43 +0530 Subject: [PATCH 1/2] experiment: try to get line number of errors --- examples/basic.commented.html | 117 ++++++++++++++++++++++++++++++++++ examples/basic.html | 14 ++-- tools/respec2html.js | 2 +- tools/respecDocWriter.js | 23 +++++++ 4 files changed, 148 insertions(+), 8 deletions(-) create mode 100644 examples/basic.commented.html diff --git a/examples/basic.commented.html b/examples/basic.commented.html new file mode 100644 index 0000000000..3d86940e06 --- /dev/null +++ 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 index 1c85155111..daa5fdcb70 100644 --- 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 index b74787c48c..5c6769d029 100755 --- 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 index 00aff742c3..becd066639 100644 --- 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); From 4e137cc5e34e2e35ba058a34668427ae18026afc Mon Sep 17 00:00:00 2001 From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com> Date: Sun, 28 Mar 2021 01:16:03 +0530 Subject: [PATCH 2/2] test commented.html in headless tests --- tests/headless.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/headless.js b/tests/headless.js index 3caff6e8a9..364dead014 100644 --- a/tests/headless.js +++ b/tests/headless.js @@ -5,7 +5,7 @@ const port = 5000; const testURLs = [ `http://localhost:${port}/examples/basic.built.html`, - `http://localhost:${port}/examples/basic.html`, + `http://localhost:${port}/examples/basic.commented.html`, ]; const colors = require("colors"); const { exec } = require("child_process");