Improve template issue forensics.

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

@@ -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

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);
   }

test/test-template-engine.js

@@ -856,12 +856,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 \`<div id="target" not-ok=\`. Failed to parse \` not-ok=\`.`, error.message);
       container.remove();
     });
 
     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 +870,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 2 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 +884,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 4 in substring \`\n\n\n<div id="target" .notOk=\`. Failed to parse \` .notOk=\`.`, error.message);
       container.remove();
     });
 
@@ -898,7 +898,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();
     });
 

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,10 @@ 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)}".`);
+            // It’s “on or after” because interpolated JS can span multiple lines.
+            const handled = [...strings.slice(0, iii), string.slice(0, state.index)].join('');
+            const lineCount = handled.split('\n').length;
+            throw new Error(`Found invalid template on or after line ${lineCount} in substring \`${string}\`. Failed to parse \`${string.slice(state.index)}\`.`);
           }
         }
       } else {