Replace jquery parseHTML with native alternative

packages/blaze/dombackend.js

@@ -14,27 +14,138 @@ DOMBackend.getContext = function() {
   if (DOMBackend._context) {
     return DOMBackend._context;
   }
-  if ( DOMBackend._$jq.support.createHTMLDocument ) {
-    DOMBackend._context = document.implementation.createHTMLDocument( "" );
+
+  // Check if createHTMLDocument is supported directly
+  if (document.implementation && document.implementation.createHTMLDocument) {
+    DOMBackend._context = document.implementation.createHTMLDocument("");
 
     // Set the base href for the created document
     // so any parsed elements with URLs
     // are based on the document's URL (gh-2965)
-    const base = DOMBackend._context.createElement( "base" );
+    const base = DOMBackend._context.createElement("base");
     base.href = document.location.href;
-    DOMBackend._context.head.appendChild( base );
+    DOMBackend._context.head.appendChild(base);
   } else {
     DOMBackend._context = document;
   }
   return DOMBackend._context;
 }
-DOMBackend.parseHTML = function (html) {
-  // Return an array of nodes.
-  //
-  // jQuery does fancy stuff like creating an appropriate
-  // container element and setting innerHTML on it, as well
-  // as working around various IE quirks.
-  return $jq.parseHTML(html, DOMBackend.getContext()) || [];
+
+DOMBackend.parseHTML = function(html, context) {
+  // Handle all falsy values and non-strings
+  if (!html || typeof html !== 'string') {
+    return [];
+  }
+
+  context = context || DOMBackend.getContext();
+
+  // Return empty array for empty strings
+  if (html === "") {
+    return [];
+  }
+
+  // Check if the content contains any HTML
+  var hasHTML = /(<|&(?:[a-z\d]+|#\d+|#x[a-f\d]+);)/i.test(html);
+
+  if (!hasHTML) {
+    // For pure text content, return a single text node
+    return [context.createTextNode(html)];
+  }
+
+  // Check for self-closing tag with content after
+  var selfClosingMatch = html.match(/^(<[^>]+\/>)([\s\S]*)$/);
+  if (selfClosingMatch) {
+    var tag = selfClosingMatch[1];
+    var afterContent = selfClosingMatch[2];
+    // Convert self-closing tag to opening tag
+    var openTag = tag.replace(/\/>$/, ">");
+    var tagName = openTag.match(/<([^\s>]+)/)[1];
+
+    // Create element with content inside
+    var div = context.createElement('div');
+    div.innerHTML = openTag + afterContent + "</" + tagName + ">";
+
+    return [div.firstChild];
+  }
+
+  // Handle special cases like <tr>, <td>, etc.
+  var specialParents = {
+    tr: { parent: 'tbody', context: 'table' },
+    td: { parent: 'tr', context: 'table' },
+    th: { parent: 'tr', context: 'table' },
+    col: { parent: 'colgroup', context: 'table' },
+    legend: { parent: 'fieldset', context: 'div' },
+    area: { parent: 'map', context: 'div' },
+    param: { parent: 'object', context: 'div' },
+    thead: { parent: 'table', context: 'div' },
+    tbody: { parent: 'table', context: 'div' },
+    tfoot: { parent: 'table', context: 'div' },
+    caption: { parent: 'table', context: 'div' },
+    colgroup: { parent: 'table', context: 'div' },
+    option: { parent: 'select', context: 'div' },
+    optgroup: { parent: 'select', context: 'div' }
+  };
+
+  // Simple regex to get the first tag
+  var firstTagMatch = /<([a-z][^\/\0>\x20\t\r\n\f]*)/i.exec(html);
+  var firstTag = firstTagMatch ? firstTagMatch[1].toLowerCase() : null;
+  var spec = firstTag ? specialParents[firstTag] : null;
+
+  // Split leading whitespace and content
+  var leadingMatch = html.match(/^(\s*)([^]*)$/);
+  var leadingWS = leadingMatch[1];
+  var remainingContent = leadingMatch[2];
+
+  var contentNodes;
+
+  if (spec) {
+    // Special elements need their proper parent structure
+    var contextElement = context.createElement(spec.context);
+    var parentElement = context.createElement(spec.parent);
+    contextElement.appendChild(parentElement);
+    parentElement.innerHTML = remainingContent;
+    contentNodes = Array.prototype.slice.call(parentElement.childNodes);
+  } else {
+    // Regular elements can be parsed directly
+    var div = context.createElement('div');
+    div.innerHTML = remainingContent;
+    contentNodes = Array.prototype.slice.call(div.childNodes);
+  }
+
+  // Only handle malformed HTML for specific cases
+  if (firstTagMatch && contentNodes.length > 1) {
+    var rootElement = null;
+    for (var i = 0; i < contentNodes.length; i++) {
+      var node = contentNodes[i];
+      if (node.nodeType === 1 && node.nodeName.toLowerCase() === firstTag) {
+        rootElement = node;
+        break;
+      }
+    }
+    // Only use root element for garbage input
+    if (rootElement && html.indexOf('<#if>') !== -1) {
+      contentNodes = [rootElement];
+    }
+  }
+
+  var result = [];
+
+  // Add leading whitespace if present
+  if (leadingWS) {
+    result.push(context.createTextNode(leadingWS));
+  }
+
+  // Add content nodes
+  for (var i = 0; i < contentNodes.length; i++) {
+    result.push(contentNodes[i]);
+  }
+
+  // Ensure array-like properties
+  Object.defineProperty(result, 'item', {
+    value: function(i) { return this[i]; }
+  });
+
+  return result;
 };
 
 DOMBackend.Events = {

packages/blaze/render_tests.js

@@ -785,3 +785,186 @@ if (typeof MutationObserver !== 'undefined') {
     }, 0);
   });
 }
+
+Tinytest.add("blaze - dombackend - parseHTML", function (test) {
+  // Test basic HTML parsing
+  const basicHtml = "<div>Hello</div>";
+  const basicResult = Blaze._DOMBackend.parseHTML(basicHtml);
+  test.equal(basicResult.length, 1);
+  test.equal(basicResult[0].nodeName, "DIV");
+  test.equal(basicResult[0].textContent || basicResult[0].innerText, "Hello");  // innerText for IE
+
+  // Test various falsy/empty inputs (from jQuery tests)
+  test.equal(Blaze._DOMBackend.parseHTML().length, 0, "Without arguments");
+  test.equal(Blaze._DOMBackend.parseHTML(undefined).length, 0, "Undefined");
+  test.equal(Blaze._DOMBackend.parseHTML(null).length, 0, "Null");
+  test.equal(Blaze._DOMBackend.parseHTML(false).length, 0, "Boolean false");
+  test.equal(Blaze._DOMBackend.parseHTML(0).length, 0, "Zero");
+  test.equal(Blaze._DOMBackend.parseHTML(true).length, 0, "Boolean true");
+  test.equal(Blaze._DOMBackend.parseHTML(42).length, 0, "Positive number");
+  test.equal(Blaze._DOMBackend.parseHTML("").length, 0, "Empty string");
+
+  // Test whitespace preservation (from jQuery tests)
+  const leadingWhitespace = Blaze._DOMBackend.parseHTML("\t<div></div>");
+  test.equal(leadingWhitespace[0].nodeType, Node.TEXT_NODE, "First node should be text node");
+  test.equal(leadingWhitespace[0].nodeValue, "\t", "Leading whitespace should be preserved");
+
+  const surroundingWhitespace = Blaze._DOMBackend.parseHTML(" <div></div> ");
+  test.equal(surroundingWhitespace[0].nodeType, Node.TEXT_NODE, "Leading space should be text node");
+  test.equal(surroundingWhitespace[2].nodeType, Node.TEXT_NODE, "Trailing space should be text node");
+
+  // Test anchor href preservation (from jQuery gh-2965)
+  const anchor = Blaze._DOMBackend.parseHTML("<a href='example.html'></a>")[0];
+  test.ok(anchor.href.endsWith("example.html"), "href attribute should be preserved");
+
+  // Test malformed HTML handling
+  const malformedTestCases = [
+    {
+      html: "<span><span>",  // Unclosed tags
+      expectedLength: 1
+    },
+    {
+      html: "<td><td>",  // Multiple table cells
+      expectedLength: 2
+    },
+    {
+      html: "<#if><tr><p>Test</p></tr><#/if>",  // Garbage input
+      expectedLength: 1  // Should not throw error
+    }
+  ];
+
+  malformedTestCases.forEach((testCase, i) => {
+    const result = Blaze._DOMBackend.parseHTML(testCase.html);
+    test.equal(result.length, testCase.expectedLength,
+      `Malformed test ${i}: Expected length ${testCase.expectedLength} but got ${result.length}`);
+  });
+
+  // Test plain text (no HTML)
+  const textOnly = "Just some text";
+  const textResult = Blaze._DOMBackend.parseHTML(textOnly);
+  test.equal(textResult.length, 1);
+  test.equal(textResult[0].nodeType, Node.TEXT_NODE);
+  test.equal(textResult[0].textContent || textResult[0].nodeValue, "Just some text");
+
+  // Test self-closing tags
+  const selfClosing = "<div/>Content";
+  const selfClosingResult = Blaze._DOMBackend.parseHTML(selfClosing);
+  test.equal(selfClosingResult.length, 1);
+  test.equal(selfClosingResult[0].nodeName, "DIV");
+  test.equal(selfClosingResult[0].nodeType, Node.ELEMENT_NODE);
+
+  // Test nested table elements (testing proper wrapping levels)
+  const nestedTable = "<td>Cell</td>";
+  const nestedResult = Blaze._DOMBackend.parseHTML(nestedTable);
+  test.equal(nestedResult.length, 1);
+  test.equal(nestedResult[0].nodeName, "TD");
+
+  // Test table elements (IE has special requirements)
+  const tableTestCases = {
+    tr: {
+      html: "<tr><td>Cell</td></tr>",
+      expectedTags: ["TR", "TD"]
+    },
+    td: {
+      html: "<td>Cell</td>",
+      expectedTags: ["TD"]
+    },
+    tbody: {
+      html: "<tbody><tr><td>Cell</td></tr></tbody>",
+      expectedTags: ["TBODY", "TR", "TD"]
+    },
+    thead: {
+      html: "<thead><tr><th>Header</th></tr></thead>",
+      expectedTags: ["THEAD", "TR", "TH"]
+    },
+    tfoot: {
+      html: "<tfoot><tr><td>Footer</td></tr></tfoot>",
+      expectedTags: ["TFOOT", "TR", "TD"]
+    },
+    colgroup: {
+      html: "<colgroup><col span='2'></colgroup>",
+      expectedTags: ["COLGROUP", "COL"]
+    }
+  };
+
+  Object.entries(tableTestCases).forEach(([testCaseName, testCase]) => {
+    const result = Blaze._DOMBackend.parseHTML(testCase.html);
+    const firstNode = result[0];
+    test.equal(firstNode.nodeName, testCase.expectedTags[0], 
+      `${testCaseName}: Expected ${testCase.expectedTags[0]} but got ${firstNode.nodeName}`);
+  });
+
+  // Test whitespace handling (IE is sensitive to this)
+  const whitespaceTestCases = [
+    {
+      html: "  <div>Padded</div>  ",
+      expectedLength: 3,  // Leading space + div + trailing space
+      expectedTag: "DIV"
+    },
+    {
+      html: "\n<div>Newlines</div>\n",
+      expectedLength: 3,  // Leading newline + div + trailing newline
+      expectedTag: "DIV"
+    },
+    {
+      html: "\t<div>Tabs</div>\t",
+      expectedLength: 3,  // Leading tab + div + trailing tab
+      expectedTag: "DIV"
+    }
+  ];
+
+  whitespaceTestCases.forEach((testCase, i) => {
+    const result = Blaze._DOMBackend.parseHTML(testCase.html);
+    test.equal(result.length, testCase.expectedLength,
+      `Whitespace test ${i}: Expected length ${testCase.expectedLength} but got ${result.length}`);
+    // Check the middle node (the div)
+    test.equal(result[1].nodeName, testCase.expectedTag,
+      `Whitespace test ${i}: Expected tag ${testCase.expectedTag} but got ${result[1].nodeName}`);
+    // Verify surrounding nodes are text nodes
+    test.equal(result[0].nodeType, Node.TEXT_NODE,
+      `Whitespace test ${i}: Expected leading text node`);
+    test.equal(result[2].nodeType, Node.TEXT_NODE,
+      `Whitespace test ${i}: Expected trailing text node`);
+  });
+
+  // Test empty input
+  test.equal(Blaze._DOMBackend.parseHTML("").length, 0);
+  test.equal(Blaze._DOMBackend.parseHTML(null).length, 0);
+  test.equal(Blaze._DOMBackend.parseHTML(undefined).length, 0);
+  // This is a unique case since a whitespace-only input is parsed as a single text node. 
+  test.equal(Blaze._DOMBackend.parseHTML("   ").length, 1);
+
+  // Test malformed HTML (IE is more strict)
+  const malformedTestCasesIE = [
+    {
+      html: "<div>Hello<span>World</span></div>",  // Well-formed control case
+      expectedLength: 1,
+      expectedChildren: 1
+    },
+    {
+      html: "<div>Test</div><p>",  // Partial second tag
+      expectedLength: 2
+    },
+    {
+      html: "<div class=>Test</div>",  // Invalid attribute
+      expectedLength: 1
+    }
+  ];
+
+  malformedTestCasesIE.forEach((testCase, i) => {
+    const result = Blaze._DOMBackend.parseHTML(testCase.html);
+    test.equal(result.length, testCase.expectedLength,
+      `Malformed test ${i}: Expected length ${testCase.expectedLength} but got ${result.length}`);
+    if (testCase.expectedChildren !== undefined) {
+      const childCount = result[0].getElementsByTagName('span').length;
+      test.equal(childCount, testCase.expectedChildren,
+        `Malformed test ${i}: Expected ${testCase.expectedChildren} span elements but got ${childCount}`);
+    }
+  });
+
+  // Test array-like properties of result (important for IE)
+  const arrayResult = Blaze._DOMBackend.parseHTML("<div></div><span></span>");
+  test.equal(typeof arrayResult.length, "number", "Result should have length property");
+  test.equal(typeof arrayResult[0], "object", "Result should have indexed access");
+  test.equal(arrayResult[0].nodeName, "DIV", "First element should be accessible by index");
+});