DEV: creates domFromString utility function (#15310)

app/assets/javascripts/discourse-common/addon/lib/dom-from-string.js

@@ -0,0 +1,6 @@
+export default function domFromString(string) {
+  const template = document.createElement("template");
+  string = string.trim();
+  template.innerHTML = string;
+  return template.content.firstChild;
+}

app/assets/javascripts/discourse/tests/unit/lib/dom-from-string-test.js

@@ -0,0 +1,10 @@
+import { discourseModule } from "discourse/tests/helpers/qunit-helpers";
+import { test } from "qunit";
+import domFromString from "discourse-common/lib/dom-from-string";
+
+discourseModule("Unit | Utility | domFromString", function () {
+  test("constructing DOM node from a string", function (assert) {
+    const node = domFromString('<div class="foo">foo</div>');
+    assert.ok(node.classList.contains("foo"));
+  });
+});

app/assets/javascripts/discourse/tests/unit/lib/formatter-test.js

@@ -9,13 +9,7 @@ import {
 import { discourseModule } from "discourse/tests/helpers/qunit-helpers";
 import sinon from "sinon";
 import { test } from "qunit";
-
-function stringToDOMNode(string) {
-  let template = document.createElement("template");
-  string = string.trim();
-  template.innerHTML = string;
-  return template.content.firstChild;
-}
+import domFromString from "discourse-common/lib/dom-from-string";
 
 function formatMins(mins, opts = {}) {
   let dt = new Date(new Date() - mins * 60 * 1000);
@@ -44,7 +38,7 @@ function shortDateTester(format) {
 }
 
 function strip(html) {
-  return stringToDOMNode(html).innerText;
+  return domFromString(html).innerText;
 }
 
 discourseModule("Unit | Utility | formatter", function (hooks) {
@@ -127,12 +121,12 @@ discourseModule("Unit | Utility | formatter", function (hooks) {
     );
 
     assert.strictEqual(
-      stringToDOMNode(formatDays(0, { format: "medium" })).title,
+      domFromString(formatDays(0, { format: "medium" })).title,
       longDate(new Date())
     );
 
     assert.ok(
-      stringToDOMNode(formatDays(0, { format: "medium" })).classList.contains(
+      domFromString(formatDays(0, { format: "medium" })).classList.contains(
         "date"
       )
     );
@@ -232,15 +226,15 @@ discourseModule("Unit | Utility | formatter", function (hooks) {
   test("autoUpdatingRelativeAge", function (assert) {
     let d = moment().subtract(1, "day").toDate();
 
-    let elem = stringToDOMNode(autoUpdatingRelativeAge(d));
+    let elem = domFromString(autoUpdatingRelativeAge(d));
     assert.strictEqual(elem.dataset.format, "tiny");
     assert.strictEqual(elem.dataset.time, d.getTime().toString());
     assert.strictEqual(elem.title, "");
 
-    elem = stringToDOMNode(autoUpdatingRelativeAge(d, { title: true }));
+    elem = domFromString(autoUpdatingRelativeAge(d, { title: true }));
     assert.strictEqual(elem.title, longDate(d));
 
-    elem = stringToDOMNode(
+    elem = domFromString(
       autoUpdatingRelativeAge(d, {
         format: "medium",
         title: true,
@@ -253,7 +247,7 @@ discourseModule("Unit | Utility | formatter", function (hooks) {
     assert.strictEqual(elem.title, longDate(d));
     assert.strictEqual(elem.innerHTML, "1 day ago");
 
-    elem = stringToDOMNode(autoUpdatingRelativeAge(d, { format: "medium" }));
+    elem = domFromString(autoUpdatingRelativeAge(d, { format: "medium" }));
     assert.strictEqual(elem.dataset.format, "medium");
     assert.strictEqual(elem.dataset.time, d.getTime().toString());
     assert.strictEqual(elem.title, "");
@@ -262,7 +256,7 @@ discourseModule("Unit | Utility | formatter", function (hooks) {
 
   test("updateRelativeAge", function (assert) {
     let d = new Date();
-    let elem = stringToDOMNode(autoUpdatingRelativeAge(d));
+    let elem = domFromString(autoUpdatingRelativeAge(d));
     elem.dataset.time = d.getTime() - 2 * 60 * 1000;
 
     updateRelativeAge(elem);
@@ -270,7 +264,7 @@ discourseModule("Unit | Utility | formatter", function (hooks) {
     assert.strictEqual(elem.innerHTML, "2m");
 
     d = new Date();
-    elem = stringToDOMNode(
+    elem = domFromString(
       autoUpdatingRelativeAge(d, { format: "medium", leaveAgo: true })
     );
     elem.dataset.time = d.getTime() - 2 * 60 * 1000;

app/assets/javascripts/discourse/tests/unit/lib/link-mentions-test.js

@@ -5,6 +5,7 @@ import {
 import { module, test } from "qunit";
 import { Promise } from "rsvp";
 import pretender from "discourse/tests/helpers/create-pretender";
+import domFromString from "discourse-common/lib/dom-from-string";
 
 module("Unit | Utility | link-mentions", function () {
   test("linkSeenMentions replaces users and groups", async function (assert) {
@@ -32,20 +33,14 @@ module("Unit | Utility | link-mentions", function () {
       "invalid",
     ]);
 
-    let html = `
+    const root = domFromString(`
       <div>
         <span class="mention">@invalid</span>
         <span class="mention">@valid_user</span>
         <span class="mention">@valid_group</span>
         <span class="mention">@mentionable_group</span>
       </div>
-    `;
-
-    let template = document.createElement("template");
-    html = html.trim();
-    template.innerHTML = html;
-    const root = template.content.firstChild;
-
+    `);
     await linkSeenMentions(root);
 
     // Ember.Test.registerWaiter is not available here, so we are implementing

app/assets/javascripts/pretty-text/addon/oneboxer.js

@@ -1,3 +1,4 @@
+import domFromString from "discourse-common/lib/dom-from-string";
 import {
   failedCache,
   lookupCache,
@@ -74,11 +75,8 @@ function loadNext(ajax) {
     },
   })
     .then(
-      (html) => {
-        let template = document.createElement("template");
-        template.innerHTML = html.trim();
-        const node = template.content.firstChild;
-
+      (template) => {
+        const node = domFromString(template);
         setLocalCache(normalize(url), node);
         elem.replaceWith(node);
         applySquareGenericOnebox(node);