refactor: move encode HTML function into separate module (anuraghazra#4591)

Co-authored-by: Alexandr <qwerty541zxc@gmail.com>

Author: alexandr-garbuzov

src/cards/gist.js

@@ -1,7 +1,6 @@
 // @ts-check
 
 import {
-  encodeHTML,
   measureText,
   flexLayout,
   iconWithLabel,
@@ -10,6 +9,7 @@ import {
 import Card from "../common/Card.js";
 import { getCardColors } from "../common/color.js";
 import { kFormatter, wrapTextMultiline } from "../common/fmt.js";
+import { encodeHTML } from "../common/html.js";
 import { icons } from "../common/icons.js";
 import { parseEmojis } from "../common/ops.js";
 

src/cards/repo.js

@@ -3,11 +3,11 @@
 import { Card } from "../common/Card.js";
 import { getCardColors } from "../common/color.js";
 import { kFormatter, wrapTextMultiline } from "../common/fmt.js";
+import { encodeHTML } from "../common/html.js";
 import { I18n } from "../common/I18n.js";
 import { icons } from "../common/icons.js";
 import { clampValue, parseEmojis } from "../common/ops.js";
 import {
-  encodeHTML,
   flexLayout,
   measureText,
   iconWithLabel,

src/common/Card.js

@@ -1,4 +1,7 @@
-import { encodeHTML, flexLayout } from "./render.js";
+// @ts-check
+
+import { encodeHTML } from "./html.js";
+import { flexLayout } from "./render.js";
 
 class Card {
   /**

src/common/fmt.js

@@ -1,7 +1,7 @@
 // @ts-check
 
 import wrap from "word-wrap";
-import { encodeHTML } from "./render.js";
+import { encodeHTML } from "./html.js";
 
 /**
  * Retrieves num with suffix k(thousands) precise to given decimal places.

src/common/html.js

@@ -0,0 +1,19 @@
+// @ts-check
+
+/**
+ * Encode string as HTML.
+ *
+ * @see https://stackoverflow.com/a/48073476/10629172
+ *
+ * @param {string} str String to encode.
+ * @returns {string} Encoded string.
+ */
+const encodeHTML = (str) => {
+  return str
+    .replace(/[\u00A0-\u9999<>&](?!#)/gim, (i) => {
+      return "&#" + i.charCodeAt(0) + ";";
+    })
+    .replace(/\u0008/gim, "");
+};
+
+export { encodeHTML };

src/common/index.js

@@ -9,7 +9,6 @@ export { retryer } from "./retryer.js";
 export {
   ERROR_CARD_LENGTH,
   renderError,
-  encodeHTML,
   flexLayout,
   measureText,
 } from "./render.js";

src/common/render.js

@@ -2,6 +2,7 @@
 
 import { SECONDARY_ERROR_MESSAGES, TRY_AGAIN_LATER } from "./error.js";
 import { getCardColors } from "./color.js";
+import { encodeHTML } from "./html.js";
 
 /**
  * Auto layout utility, allows us to layout things vertically or horizontally with
@@ -76,22 +77,6 @@ const iconWithLabel = (icon, label, testid, iconSize) => {
 // Script parameters.
 const ERROR_CARD_LENGTH = 576.5;
 
-/**
- * Encode string as HTML.
- *
- * @see https://stackoverflow.com/a/48073476/10629172
- *
- * @param {string} str String to encode.
- * @returns {string} Encoded string.
- */
-const encodeHTML = (str) => {
-  return str
-    .replace(/[\u00A0-\u9999<>&](?!#)/gim, (i) => {
-      return "&#" + i.charCodeAt(0) + ";";
-    })
-    .replace(/\u0008/gim, "");
-};
-
 const UPSTREAM_API_ERRORS = [
   TRY_AGAIN_LATER,
   SECONDARY_ERROR_MESSAGES.MAX_RETRY,
@@ -207,7 +192,6 @@ export {
   renderError,
   createLanguageNode,
   iconWithLabel,
-  encodeHTML,
   flexLayout,
   measureText,
 };

src/translations.js

@@ -1,6 +1,6 @@
 // @ts-check
 
-import { encodeHTML } from "./common/render.js";
+import { encodeHTML } from "./common/html.js";
 
 /**
  * Retrieves stat card labels in the available locales.

tests/render.test.js

@@ -3,7 +3,8 @@
 import { describe, expect, it } from "@jest/globals";
 import { queryByTestId } from "@testing-library/dom";
 import "@testing-library/jest-dom/jest-globals";
-import { encodeHTML, renderError } from "../src/common/render.js";
+import { renderError } from "../src/common/render.js";
+import { encodeHTML } from "../src/common/html.js";
 
 describe("Test render.js", () => {
   it("should test encodeHTML", () => {