refactor: move svg rendering related code into separate module (#4588)

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

api/gist.js

@@ -1,6 +1,6 @@
 // @ts-check
 
-import { renderError } from "../src/common/utils.js";
+import { renderError } from "../src/common/render.js";
 import { isLocaleAvailable } from "../src/translations.js";
 import { renderGistCard } from "../src/cards/gist.js";
 import { fetchGist } from "../src/fetchers/gist.js";

api/index.js

@@ -13,7 +13,7 @@ import {
   retrieveSecondaryMessage,
 } from "../src/common/error.js";
 import { parseArray, parseBoolean } from "../src/common/ops.js";
-import { renderError } from "../src/common/utils.js";
+import { renderError } from "../src/common/render.js";
 import { fetchStats } from "../src/fetchers/stats.js";
 import { isLocaleAvailable } from "../src/translations.js";
 

api/pin.js

@@ -13,7 +13,7 @@ import {
   retrieveSecondaryMessage,
 } from "../src/common/error.js";
 import { parseBoolean } from "../src/common/ops.js";
-import { renderError } from "../src/common/utils.js";
+import { renderError } from "../src/common/render.js";
 import { fetchRepo } from "../src/fetchers/repo.js";
 import { isLocaleAvailable } from "../src/translations.js";
 

api/top-langs.js

@@ -13,7 +13,7 @@ import {
   retrieveSecondaryMessage,
 } from "../src/common/error.js";
 import { parseArray, parseBoolean } from "../src/common/ops.js";
-import { renderError } from "../src/common/utils.js";
+import { renderError } from "../src/common/render.js";
 import { fetchTopLanguages } from "../src/fetchers/top-languages.js";
 import { isLocaleAvailable } from "../src/translations.js";
 

api/wakatime.js

@@ -1,7 +1,7 @@
 // @ts-check
 
 import { renderWakatimeCard } from "../src/cards/wakatime.js";
-import { renderError } from "../src/common/utils.js";
+import { renderError } from "../src/common/render.js";
 import { fetchWakatimeStats } from "../src/fetchers/wakatime.js";
 import { isLocaleAvailable } from "../src/translations.js";
 import {

src/cards/gist.js

@@ -6,7 +6,7 @@ import {
   flexLayout,
   iconWithLabel,
   createLanguageNode,
-} from "../common/utils.js";
+} from "../common/render.js";
 import Card from "../common/Card.js";
 import { getCardColors } from "../common/color.js";
 import { kFormatter, wrapTextMultiline } from "../common/fmt.js";

src/cards/repo.js

@@ -12,7 +12,7 @@ import {
   measureText,
   iconWithLabel,
   createLanguageNode,
-} from "../common/utils.js";
+} from "../common/render.js";
 import { repoCardLocales } from "../translations.js";
 
 const ICON_SIZE = 16;

src/cards/stats.js

@@ -7,7 +7,7 @@ import { kFormatter } from "../common/fmt.js";
 import { I18n } from "../common/I18n.js";
 import { icons, rankIcon } from "../common/icons.js";
 import { clampValue } from "../common/ops.js";
-import { flexLayout, measureText } from "../common/utils.js";
+import { flexLayout, measureText } from "../common/render.js";
 import { statCardLocales, wakatimeCardLocales } from "../translations.js";
 
 const CARD_MIN_WIDTH = 287;

src/cards/top-languages.js

@@ -6,7 +6,7 @@ import { createProgressNode } from "../common/createProgressNode.js";
 import { formatBytes } from "../common/fmt.js";
 import { I18n } from "../common/I18n.js";
 import { chunkArray, clampValue, lowercaseTrim } from "../common/ops.js";
-import { flexLayout, measureText } from "../common/utils.js";
+import { flexLayout, measureText } from "../common/render.js";
 import { langCardLocales } from "../translations.js";
 
 const DEFAULT_CARD_WIDTH = 300;

src/cards/wakatime.js

@@ -5,7 +5,7 @@ import { getCardColors } from "../common/color.js";
 import { createProgressNode } from "../common/createProgressNode.js";
 import { I18n } from "../common/I18n.js";
 import { clampValue, lowercaseTrim } from "../common/ops.js";
-import { flexLayout } from "../common/utils.js";
+import { flexLayout } from "../common/render.js";
 import { wakatimeCardLocales } from "../translations.js";
 
 /** Import language colors.

src/common/Card.js

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

src/common/access.js

@@ -1,6 +1,6 @@
 // @ts-check
 
-import { renderError } from "./utils.js";
+import { renderError } from "./render.js";
 import { blacklist } from "./blacklist.js";
 import { whitelist, gistWhitelist } from "./envs.js";
 

src/common/fmt.js

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

src/common/index.js

@@ -12,4 +12,4 @@ export {
   encodeHTML,
   flexLayout,
   measureText,
-} from "./utils.js";
+} from "./render.js";

src/translations.js

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

tests/api.test.js

@@ -13,7 +13,7 @@ import MockAdapter from "axios-mock-adapter";
 import api from "../api/index.js";
 import { calculateRank } from "../src/calculateRank.js";
 import { renderStatsCard } from "../src/cards/stats.js";
-import { renderError } from "../src/common/utils.js";
+import { renderError } from "../src/common/render.js";
 import { CACHE_TTL, DURATIONS } from "../src/common/cache.js";
 
 /**

tests/flexLayout.test.js

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "@jest/globals";
-import { flexLayout } from "../src/common/utils.js";
+import { flexLayout } from "../src/common/render.js";
 
 describe("flexLayout", () => {
   it("should work with row & col layouts", () => {

tests/gist.test.js

@@ -6,7 +6,7 @@ import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import gist from "../api/gist.js";
 import { renderGistCard } from "../src/cards/gist.js";
-import { renderError } from "../src/common/utils.js";
+import { renderError } from "../src/common/render.js";
 import { CACHE_TTL, DURATIONS } from "../src/common/cache.js";
 
 const gist_data = {

tests/pin.test.js

@@ -6,7 +6,7 @@ import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import pin from "../api/pin.js";
 import { renderRepoCard } from "../src/cards/repo.js";
-import { renderError } from "../src/common/utils.js";
+import { renderError } from "../src/common/render.js";
 import { CACHE_TTL, DURATIONS } from "../src/common/cache.js";
 
 const data_repo = {

tests/render.test.js

@@ -3,9 +3,9 @@
 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/utils.js";
+import { encodeHTML, renderError } from "../src/common/render.js";
 
-describe("Test utils.js", () => {
+describe("Test render.js", () => {
   it("should test encodeHTML", () => {
     expect(encodeHTML(`<html>hello world<,.#4^&^@%!))`)).toBe(
       "&#60;html&#62;hello world&#60;,.#4^&#38;^@%!))",

tests/top-langs.test.js

@@ -6,7 +6,7 @@ import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
 import topLangs from "../api/top-langs.js";
 import { renderTopLanguages } from "../src/cards/top-languages.js";
-import { renderError } from "../src/common/utils.js";
+import { renderError } from "../src/common/render.js";
 import { CACHE_TTL, DURATIONS } from "../src/common/cache.js";
 
 const data_langs = {