infra: enable no-use-before-define eslint rule (#3234)

.eslintrc.json

@@ -128,7 +128,7 @@
 
         // Disallow hoisting - let & const don't allow hoisting anyhow
 
-        // "no-use-before-define": "error",
+        "no-use-before-define": "error",
 
         // Node.js and CommonJS
 

src/common/utils.js

@@ -7,6 +7,22 @@ import { themes } from "../../themes/index.js";
 // 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, "");
+};
+
 /**
  * Renders error message on the card.
  *
@@ -34,6 +50,31 @@ const renderError = (message, secondaryMessage = "") => {
   `;
 };
 
+/**
+ * Auto layout utility, allows us to layout things vertically or horizontally with
+ * proper gaping.
+ *
+ * @param {object} props Function properties.
+ * @param {string[]} props.items Array of items to layout.
+ * @param {number} props.gap Gap between items.
+ * @param {"column" | "row"=} props.direction Direction to layout items.
+ * @param {number[]=} props.sizes Array of sizes for each item.
+ * @returns {string[]} Array of items with proper layout.
+ */
+const flexLayout = ({ items, gap, direction, sizes = [] }) => {
+  let lastSize = 0;
+  // filter() for filtering out empty strings
+  return items.filter(Boolean).map((item, i) => {
+    const size = sizes[i] || 0;
+    let transform = `translate(${lastSize}, 0)`;
+    if (direction === "column") {
+      transform = `translate(0, ${lastSize})`;
+    }
+    lastSize += size + gap;
+    return `<g transform="${transform}">${item}</g>`;
+  });
+};
+
 /**
  * Creates a node to display the primary programming language of the repository/gist.
  *
@@ -79,22 +120,6 @@ const iconWithLabel = (icon, label, testid, iconSize) => {
   return flexLayout({ items: [iconSvg, text], gap: 20 }).join("");
 };
 
-/**
- * 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, "");
-};
-
 /**
  * Retrieves num with suffix k(thousands) precise to 1 decimal if greater than 999.
  *
@@ -221,31 +246,6 @@ const request = (data, headers) => {
   });
 };
 
-/**
- * Auto layout utility, allows us to layout things vertically or horizontally with
- * proper gaping.
- *
- * @param {object} props Function properties.
- * @param {string[]} props.items Array of items to layout.
- * @param {number} props.gap Gap between items.
- * @param {"column" | "row"=} props.direction Direction to layout items.
- * @param {number[]=} props.sizes Array of sizes for each item.
- * @returns {string[]} Array of items with proper layout.
- */
-const flexLayout = ({ items, gap, direction, sizes = [] }) => {
-  let lastSize = 0;
-  // filter() for filtering out empty strings
-  return items.filter(Boolean).map((item, i) => {
-    const size = sizes[i] || 0;
-    let transform = `translate(${lastSize}, 0)`;
-    if (direction === "column") {
-      transform = `translate(0, ${lastSize})`;
-    }
-    lastSize += size + gap;
-    return `<g transform="${transform}">${item}</g>`;
-  });
-};
-
 /**
  * Object containing card colors.
  * @typedef {{

src/fetchers/gist-fetcher.js

@@ -46,6 +46,36 @@ const fetcher = async (variables, token) => {
   );
 };
 
+/**
+ * @typedef {{ name: string; language: { name: string; }, size: number }} GistFile Gist file.
+ */
+
+/**
+ * This function calculates the primary language of a gist by files size.
+ *
+ * @param {GistFile[]} files Files.
+ * @returns {string} Primary language.
+ */
+const calculatePrimaryLanguage = (files) => {
+  const languages = {};
+  for (const file of files) {
+    if (file.language) {
+      if (languages[file.language.name]) {
+        languages[file.language.name] += file.size;
+      } else {
+        languages[file.language.name] = file.size;
+      }
+    }
+  }
+  let primaryLanguage = Object.keys(languages)[0];
+  for (const language in languages) {
+    if (languages[language] > languages[primaryLanguage]) {
+      primaryLanguage = language;
+    }
+  }
+  return primaryLanguage;
+};
+
 /**
  * @typedef {import('./types').GistData} GistData Gist data.
  */
@@ -80,35 +110,5 @@ const fetchGist = async (id) => {
   };
 };
 
-/**
- * @typedef {{ name: string; language: { name: string; }, size: number }} GistFile Gist file.
- */
-
-/**
- * This function calculates the primary language of a gist by files size.
- *
- * @param {GistFile[]} files Files.
- * @returns {string} Primary language.
- */
-const calculatePrimaryLanguage = (files) => {
-  const languages = {};
-  for (const file of files) {
-    if (file.language) {
-      if (languages[file.language.name]) {
-        languages[file.language.name] += file.size;
-      } else {
-        languages[file.language.name] = file.size;
-      }
-    }
-  }
-  let primaryLanguage = Object.keys(languages)[0];
-  for (const language in languages) {
-    if (languages[language] > languages[primaryLanguage]) {
-      primaryLanguage = language;
-    }
-  }
-  return primaryLanguage;
-};
-
 export { fetchGist };
 export default fetchGist;