`Attr.toString()` does not escape `&` or U+00A0 in attribute values of HTML documents, so a value loses one level of character references per serialize/parse cycle

// Minimal reproduction 1 of 2: Attr.toString() does not escape `&` (and U+00A0) in attribute
// values when the document is an HTML document (text/html), so a serialized attribute value
// is decoded one more time by every parse that follows.
//
//   npm install [email protected] && node repro-attr-html-escape.mjs
//
// Exit code 1 = the defect reproduces (an attribute value does not survive serialize + parse);
// 0 = every attribute value round-trips.
//
// Expected serialization follows the WHATWG HTML Standard, section 13.3.2 "Serializing HTML
// fragments", escaping algorithm in attribute mode: `&` -> `&`, U+00A0 -> ` `,
// `"` -> `"`. jsdom (parse5) produces exactly these strings.
import { createRequire } from 'node:module';
import { parseHTML } from 'linkedom';

const { version } = createRequire(import.meta.url)('linkedom/package.json');
console.log(`linkedom ${version}`);

const SHELL = '<!doctype html><html><head></head><body><div id="t"></div></body></html>';

// [value held by the DOM, serialization required by the standard, does a lenient parser still
//  read the value back unchanged from the unescaped form?]
const cases = [
  ['A &amp; B', 'A &amp;amp; B'],
  ['&#0 ', '&amp;#0 '],
  ['&lt;b&gt;', '&amp;lt;b&amp;gt;'],
  ['a & b', 'a &amp; b'],
  ['a b', 'a&nbsp;b'],
  ['say "hi"', 'say &quot;hi&quot;'],
];

let dataLoss = 0;
let nonConforming = 0;
for (const [value, expected] of cases) {
  const { document } = parseHTML(SHELL);
  const el = document.getElementById('t');
  el.setAttribute('data-x', value);

  const html = el.outerHTML;
  const actual = /data-x="([^"]*)"/.exec(html)[1];

  // Round trip: parse the serialized element and read the attribute back.
  const back = parseHTML(`<!doctype html><html><body>${html}</body></html>`).document
    .getElementById('t')
    .getAttribute('data-x');

  const conforming = actual === expected;
  const lossless = back === value;
  if (!conforming) nonConforming += 1;
  if (!lossless) dataLoss += 1;
  console.log(
    `${lossless ? (conforming ? 'ok       ' : 'NONCONF  ') : 'DATA LOSS'} setAttribute('data-x', ${JSON.stringify(value)})\n` +
      `            serialized: ${JSON.stringify(actual)}   standard: ${JSON.stringify(expected)}\n` +
      `            re-parsed:  ${JSON.stringify(back)}   expected: ${JSON.stringify(value)}`,
  );
}

// The same defect seen from the parser side: each parse decodes one level of character
// references, each serialization writes the decoded value back without encoding it again.
let current = '<div id="t" data-x="A &amp;amp;amp; B"></div>';
const seen = [];
for (let i = 0; i < 3; i += 1) {
  const { document } = parseHTML(`<!doctype html><html><body>${current}</body></html>`);
  const el = document.getElementById('t');
  seen.push(el.getAttribute('data-x'));
  current = el.outerHTML;
}
console.log(`\nattribute value after each of 3 parse+serialize cycles: ${JSON.stringify(seen)}`);
console.log('a conforming serializer keeps it stable: ["A &amp;amp; B","A &amp;amp; B","A &amp;amp; B"]');
if (new Set(seen).size !== 1) dataLoss += 1;

console.log(
  `\nRESULT: ${dataLoss} data-loss check(s), ${nonConforming} non-conforming serialization(s) ` +
    `-> ${dataLoss === 0 ? 'attribute values round-trip' : 'defect reproduces'}`,
);
process.exit(dataLoss === 0 ? 0 : 1);

// Verifies the two patches proposed in the two reports (Attr.toString and TextElement.toString).
// It patches linkedom in-process only, to show that each proposal removes the failure
// reproduced by repro-attr-html-escape.mjs and repro-text-element-first-match.mjs.
//
//   npm install [email protected] && node verify-suggested-fixes.mjs
import { createRequire } from 'node:module';
import { parseHTML } from 'linkedom';

const { version } = createRequire(import.meta.url)('linkedom/package.json');
console.log(`linkedom ${version}`);

const { document } = parseHTML('<!doctype html><html><head></head><body></body></html>');
const HTMLStyleElementProto = Object.getPrototypeOf(document.createElement('style'));
const TextElementProto = Object.getPrototypeOf(HTMLStyleElementProto); // esm/html/text-element.js
const HTMLElementProto = Object.getPrototypeOf(TextElementProto);
const AttrProto = Object.getPrototypeOf(document.createAttribute('x')); // esm/interface/attr.js

// Proposal 2: put the text back at the LAST "><" of the childless clone's serialization, which
// is always the boundary between the start tag and the end tag.
const elementToString = HTMLElementProto.toString;
TextElementProto.toString = function toString() {
  const outerHTML = elementToString.call(this.cloneNode());
  const at = outerHTML.lastIndexOf('><');
  return `${outerHTML.slice(0, at + 1)}${this.textContent}${outerHTML.slice(at + 1)}`;
};

// Proposal 1: escape `&` and U+00A0 (and keep `"`) in HTML-document attribute values.
// Empty values keep linkedom's own boolean-attribute shorthand.
const attrToString = AttrProto.toString;
AttrProto.toString = function toString() {
  const { value } = this;
  if (!value) return attrToString.call(this);
  const escaped = value.replace(/&/g, '&amp;').replace(/\u00a0/g, '&nbsp;').replace(/"/g, '&quot;');
  return `${this.name}="${escaped}"`;
};

let failed = 0;
const check = (label, ok) => {
  if (!ok) failed += 1;
  console.log(`${ok ? 'ok  ' : 'FAIL'} ${label}`);
};

for (const value of ['A &amp; B', '&#0 ', 'a & b', 'a b']) {
  const doc = parseHTML('<!doctype html><html><body><div id="t"></div></body></html>').document;
  const el = doc.getElementById('t');
  el.setAttribute('data-x', value);
  const back = parseHTML(`<!doctype html><html><body>${el.outerHTML}</body></html>`).document
    .getElementById('t')
    .getAttribute('data-x');
  check(`attribute value ${JSON.stringify(value)} survives serialize + parse`, back === value);
}

for (const tag of ['style', 'script', 'title', 'textarea']) {
  const doc = parseHTML('<!doctype html><html><head></head><body></body></html>').document;
  const el = doc.createElement(tag);
  el.setAttribute('data-src', 'a><b.css');
  el.textContent = '.caption{color:red}';
  const back = parseHTML(`<!doctype html><html><body>${el.outerHTML}</body></html>`).document.querySelector(tag);
  check(
    `<${tag}> keeps its text and its attribute value`,
    back.textContent === '.caption{color:red}' && back.getAttribute('data-src') === 'a><b.css',
  );
}

// Elements without attributes, with `$` patterns in the text, and with empty text still serialize as before.
const plain = parseHTML('<!doctype html><html><head></head><body></body></html>').document.createElement('style');
plain.textContent = "a{content:'$&'}";
check('childless attribute-free <style> serializes as <style>text</style>', plain.outerHTML === "<style>a{content:'$&'}</style>");
const empty = parseHTML('<!doctype html><html><head></head><body></body></html>').document.createElement('script');
check('empty <script> serializes as <script></script>', empty.outerHTML === '<script></script>');

console.log(failed === 0 ? 'RESULT: both proposals fix the reproductions' : `RESULT: ${failed} check(s) failed`);
process.exit(failed === 0 ? 0 : 1);