From d8f5866f1263cde27f2df767628ed3e833d0bd4a Mon Sep 17 00:00:00 2001
From: Andrew Seier <andseier@gmail.com>
Date: Sat, 9 Nov 2024 22:41:41 -0800
Subject: [PATCH] Improve template issue forensics.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The major changes can be boiled down into the following additions:
* Print the registered custom element tag name in the error.
* Print the approximate template line number in the error.†

† Note that this isn’t the _file line number_, just a naive count of
  the number of newlines encountered so far in the given template.

Closes #201.
---
 CHANGELOG.md                       |  5 +++++
 test/test-initialization-errors.js |  4 ++--
 test/test-template-engine.js       | 15 +++++++++------
 x-element.d.ts.map                 |  2 +-
 x-element.js                       | 13 +++++++++++--
 5 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ddaa1ce..855f04e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- Template errors now include approximate line numbers from the offending
+  template. They also print the registered custom element tag name (#201).
+
 ## [1.1.1] - 2024-11-09
 
 ### Fixed
diff --git a/test/test-initialization-errors.js b/test/test-initialization-errors.js
index a97dce2..0d20954 100644
--- a/test/test-initialization-errors.js
+++ b/test/test-initialization-errors.js
@@ -106,7 +106,7 @@ it('errors are thrown in connectedCallback when template result fails to render'
   try {
     el.connectedCallback();
   } catch (error) {
-    const expected = ' — Invalid template for "TestElement" at path "test-element-3"';
+    const expected = 'Invalid template for "TestElement" / <test-element-3> at path "test-element-3".';
     message = error.message;
     passed = error.message.endsWith(expected);
   }
@@ -142,7 +142,7 @@ it('errors are thrown in connectedCallback when template result fails to render
   try {
     el.connectedCallback();
   } catch (error) {
-    const expected = ' — Invalid template for "TestElement" at path "test-element-4[id="testing"][class="foo bar"][boolean][variation="primary"]"';
+    const expected = 'Invalid template for "TestElement" / <test-element-4> at path "test-element-4[id="testing"][class="foo bar"][boolean][variation="primary"]".';
     message = error.message;
     passed = error.message.endsWith(expected);
   }
diff --git a/test/test-template-engine.js b/test/test-template-engine.js
index 100dd52..7ce3767 100644
--- a/test/test-template-engine.js
+++ b/test/test-template-engine.js
@@ -846,6 +846,7 @@ describe('rendering errors', () => {
       container.remove();
     });
 
+    // Note that this is line “1” because it’s perfectly inlined.
     it('throws for unquoted attributes', () => {
       const templateResultReference = html`<div id="target" not-ok=${'foo'}>Gotta double-quote those.</div>`;
       const container = document.createElement('div');
@@ -856,12 +857,14 @@ describe('rendering errors', () => {
       } catch (e) {
         error = e;
       }
-      assert(error?.message === `Found invalid template string "<div id="target" not-ok=" at " not-ok=".`, error.message);
+      assert(error?.message === `Found invalid template on or after line 1 in substring \`<div id="target" not-ok=\`. Failed to parse \` not-ok=\`.`, error.message);
       container.remove();
     });
 
+    // Note that this is _still_ line “1” because it begins with a newline. This
+    //  is what authors will expect as the “first line”.
     it('throws for single-quoted attributes', () => {
-      const templateResultReference = html`<div id="target" not-ok='${'foo'}'>Gotta double-quote those.</div>`;
+      const templateResultReference = html`\n<div id="target" not-ok='${'foo'}'>Gotta double-quote those.</div>`;
       const container = document.createElement('div');
       document.body.append(container);
       let error;
@@ -870,12 +873,12 @@ describe('rendering errors', () => {
       } catch (e) {
         error = e;
       }
-      assert(error?.message === `Found invalid template string "<div id="target" not-ok='" at " not-ok='".`, error.message);
+      assert(error?.message === `Found invalid template on or after line 1 in substring \`\n<div id="target" not-ok='\`. Failed to parse \` not-ok='\`.`, error.message);
       container.remove();
     });
 
     it('throws for unquoted properties', () => {
-      const templateResultReference = html`<div id="target" .notOk=${'foo'}>Gotta double-quote those.</div>`;
+      const templateResultReference = html`\n\n\n<div id="target" .notOk=${'foo'}>Gotta double-quote those.</div>`;
       const container = document.createElement('div');
       document.body.append(container);
       let error;
@@ -884,7 +887,7 @@ describe('rendering errors', () => {
       } catch (e) {
         error = e;
       }
-      assert(error?.message === `Found invalid template string "<div id="target" .notOk=" at " .notOk=".`, error.message);
+      assert(error?.message === `Found invalid template on or after line 3 in substring \`\n\n\n<div id="target" .notOk=\`. Failed to parse \` .notOk=\`.`, error.message);
       container.remove();
     });
 
@@ -898,7 +901,7 @@ describe('rendering errors', () => {
       } catch (e) {
         error = e;
       }
-      assert(error?.message === `Found invalid template string "<div id="target" .notOk='" at " .notOk='".`, error.message);
+      assert(error?.message === `Found invalid template on or after line 1 in substring \`<div id="target" .notOk='\`. Failed to parse \` .notOk='\`.`, error.message);
       container.remove();
     });
 
diff --git a/x-element.d.ts.map b/x-element.d.ts.map
index 03c4b72..6bb8764 100644
--- a/x-element.d.ts.map
+++ b/x-element.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"x-element.d.ts","sourceRoot":"","sources":["x-element.js"],"names":[],"mappings":"AAAA,uDAAuD;AACvD;IACE;;;OAGG;IACH,0CAGC;IAED;;;OAGG;IACH;;MAEC;IAED;;;;;;OAMG;IACH;;MAEC;IAED;;;;;;;;;;;;;;;OAeG;IACH,qCAEC;IAED;;;;;;OAMG;IAEH;;;;;;;;;;;;;OAaG;IAEH;;;;;;;;;;;;;;;;;;;;OAoBG;IACH;;mBAjCc,GAAG;wBACH,MAAM;oBACN,MAAM,EAAE;;6BAVX,WAAW,SACX,GAAG,YACH,GAAG;sBAWA,OAAO;uBACP,OAAO;uBACP,OAAO;sBACP,GAAG,WAAS;sBACZ,GAAG,WAAS;;MA0BzB;IAED;;;;;OAKG;IAEH;;;;;;;;;;;;;OAaG;IACH;8BAlBW,WAAW,SACX,KAAK;MAmBf;IAED;;;;;OAKG;IACH,8BAHW,WAAW,GACT,WAAW,GAAC,UAAU,CAIlC;IAED;;;;;OAKG;IAEH;;;;;;;;;;;;OAYG;IACH,wCAHW;QAAC,CAAC,GAAG,EAAE,MAAM,YAAW;KAAC,gBAdzB,MAAM,QACN,WAAW,SAkBrB;IA6ID,0DA6BC;IAGD,yFAqCC;IAED,iFA2FC;IAED,0GAMC;IAGD,wFAaC;IAED,uFAQC;IAGD,iGAiBC;IAGD,yEAUC;IAGD,yEAkBC;IAGD,sEAUC;IAGD,yEAaC;IAGD,yEAsBC;IAGD,yEAYC;IAGD,8CAyCC;IAGD,8CA6CC;IAID,gDA6BC;IAGD,4CAMC;IAED,+CAEC;IAED,kDAyBC;IAGD,qDAMC;IAGD;;;MAmBC;IAED,kEAiBC;IAED,kGAGC;IAED,6CAMC;IAED,qGAGC;IAED,gDAMC;IAED,0DAMC;IAED,2CAYC;IAGD,+CAeC;IAED,2EAiBC;IAED,+DAGC;IAED,iFAQC;IAED,4EAQC;IAED,4EAOC;IAED,8EAoBC;IAGD,4DAEC;IAED,4CAEC;IAED,+CAEC;IAED,2DAOC;IAED,6CAKC;IAED,mDAAqC;IACrC,4CAA8B;IAC9B,yCAA8I;IAC9I,kGAA+D;IAC/D,sCAA4B;IAC5B,+CAAqF;IA10BrF;;OAEG;IACH,0BAEC;IAED;;;;;OAKG;IACH,oCAJW,MAAM,YACN,MAAM,GAAC,IAAI,SACX,MAAM,GAAC,IAAI,QAOrB;IAED;;OAEG;IACH,wBAAoB;IAEpB;;OAEG;IACH,6BAEC;IAED;;;;OAIG;IACH,eAUC;IAED;;;;OAIG;IAEH;;;;;;;OAOG;IACH,gBALW,WAAW,QACX,MAAM,oBAPN,KAAK,oBASL,MAAM,QAoBhB;IAED;;;;;;OAMG;IACH,kBALW,WAAW,QACX,MAAM,oBAlCN,KAAK,oBAoCL,MAAM,QAoBhB;IAED;;;OAGG;IACH,qBAFW,KAAK,QAMf;IAED;;;;;OAKG;IACH,oBAEC;CA2sBF"}
\ No newline at end of file
+{"version":3,"file":"x-element.d.ts","sourceRoot":"","sources":["x-element.js"],"names":[],"mappings":"AAAA,uDAAuD;AACvD;IACE;;;OAGG;IACH,0CAGC;IAED;;;OAGG;IACH;;MAEC;IAED;;;;;;OAMG;IACH;;MAEC;IAED;;;;;;;;;;;;;;;OAeG;IACH,qCAEC;IAED;;;;;;OAMG;IAEH;;;;;;;;;;;;;OAaG;IAEH;;;;;;;;;;;;;;;;;;;;OAoBG;IACH;;mBAjCc,GAAG;wBACH,MAAM;oBACN,MAAM,EAAE;;6BAVX,WAAW,SACX,GAAG,YACH,GAAG;sBAWA,OAAO;uBACP,OAAO;uBACP,OAAO;sBACP,GAAG,WAAS;sBACZ,GAAG,WAAS;;MA0BzB;IAED;;;;;OAKG;IAEH;;;;;;;;;;;;;OAaG;IACH;8BAlBW,WAAW,SACX,KAAK;MAmBf;IAED;;;;;OAKG;IACH,8BAHW,WAAW,GACT,WAAW,GAAC,UAAU,CAIlC;IAED;;;;;OAKG;IAEH;;;;;;;;;;;;OAYG;IACH,wCAHW;QAAC,CAAC,GAAG,EAAE,MAAM,YAAW;KAAC,gBAdzB,MAAM,QACN,WAAW,SAkBrB;IA+ID,0DA6BC;IAGD,yFAqCC;IAED,iFA2FC;IAED,0GAMC;IAGD,wFAaC;IAED,uFAQC;IAGD,iGAiBC;IAGD,yEAUC;IAGD,yEAkBC;IAGD,sEAUC;IAGD,yEAaC;IAGD,yEAsBC;IAGD,yEAYC;IAGD,8CAyCC;IAGD,8CA6CC;IAID,gDA6BC;IAGD,4CAMC;IAED,+CAEC;IAED,kDAyBC;IAGD,qDAMC;IAGD;;;MAmBC;IAED,kEAiBC;IAED,kGAGC;IAED,6CAMC;IAED,qGAGC;IAED,gDAMC;IAED,0DAMC;IAED,2CAYC;IAGD,+CAeC;IAED,2EAiBC;IAED,+DAGC;IAED,iFAQC;IAED,4EAQC;IAED,4EAOC;IAED,8EAoBC;IAGD,4DAEC;IAED,4CAEC;IAED,+CAEC;IAED,2DAOC;IAED,6CAKC;IAED,mDAAqC;IACrC,4CAA8B;IAC9B,yCAA8I;IAC9I,kGAA+D;IAC/D,sCAA4B;IAC5B,+CAAqF;IA50BrF;;OAEG;IACH,0BAEC;IAED;;;;;OAKG;IACH,oCAJW,MAAM,YACN,MAAM,GAAC,IAAI,SACX,MAAM,GAAC,IAAI,QAOrB;IAED;;OAEG;IACH,wBAAoB;IAEpB;;OAEG;IACH,6BAEC;IAED;;;;OAIG;IACH,eAYC;IAED;;;;OAIG;IAEH;;;;;;;OAOG;IACH,gBALW,WAAW,QACX,MAAM,oBAPN,KAAK,oBASL,MAAM,QAoBhB;IAED;;;;;;OAMG;IACH,kBALW,WAAW,QACX,MAAM,oBAlCN,KAAK,oBAoCL,MAAM,QAoBhB;IAED;;;OAGG;IACH,qBAFW,KAAK,QAMf;IAED;;;;;OAKG;IACH,oBAEC;CA2sBF"}
\ No newline at end of file
diff --git a/x-element.js b/x-element.js
index ae4bd19..02b4128 100644
--- a/x-element.js
+++ b/x-element.js
@@ -207,7 +207,9 @@ export default class XElement extends HTMLElement {
       render(renderRoot, result);
     } catch (error) {
       const pathString = XElement.#toPathString(this);
-      const message = `${error.message} — Invalid template for "${this.constructor.name}" at path "${pathString}"`;
+      // @ts-ignore — TypeScript doesn’t get that this can accept any class.
+      const tagName = customElements.getName(this.constructor);
+      const message = `Invalid template for "${this.constructor.name}" / <${tagName}> at path "${pathString}".`;
       throw new Error(message, { cause: error });
     }
   }
@@ -1385,7 +1387,14 @@ class TemplateEngine {
             string = string.slice(0, -3 - name.length) + `${TemplateEngine.#ATTRIBUTE_PREFIXES.property}${iii}="${name}`;
             state.index = 1; // Accounts for an expected quote character next.
           } else {
-            throw new Error(`Found invalid template string "${string}" at "${string.slice(state.index)}".`);
+            // We try and intuit what authors consider line “1”.
+            const handled = [...strings.slice(0, iii), string.slice(0, state.index)].join('');
+            const lineCount = handled.startsWith('\n')
+              ? handled.split('\n').length - 1
+              : handled.split('\n').length;
+            // We say “on or after” because interpolated JS could add lines we
+            //  cannot know about or account for.
+            throw new Error(`Found invalid template on or after line ${lineCount} in substring \`${string}\`. Failed to parse \`${string.slice(state.index)}\`.`);
           }
         }
       } else {