Feature/grs 1955 change commonjs imports (#1995)

* GRS-1955: Using ES6 import/export in src files * GRS-1955: Using ES6 import/export in test files * GRS-1955: Using ES6 import/export in themes index.js * GRS-1955: Readding blank line at end of top-languages-card.js * feat: fix test es6 import errors This commit makes sure jest is set-up to support es6. It also fixes several test errors and sorts the imports. * test: update test node version This commit makes sure node 16 is used in the github actions. * refactor: run prettier Co-authored-by: rickstaa <[email protected]>
anuraghazra · Sep 24, 2022 · 107f7ca · 107f7ca · vercel · Sep 24, 2022
1 parent 4073512
commit 107f7ca
Show file tree

Hide file tree

Showing 49 changed files with 338 additions and 475 deletions.
diff --git a/.github/workflows/generate-theme-doc.yml b/.github/workflows/generate-theme-doc.yml
@@ -16,7 +16,7 @@ jobs:
       - name: setup node
         uses: actions/setup-node@v1
         with:
-          node-version: "12.x"
+          node-version: "16.x"
 
       - name: npm install, generate readme
         run: |

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -18,7 +18,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: "12.x"
+          node-version: "16.x"
 
       - name: Install & Test
         run: |

diff --git a/api/index.js b/api/index.js
@@ -1,17 +1,19 @@
-require("dotenv").config();
-const {
+import {
   renderError,
   parseBoolean,
   parseArray,
   clampValue,
   CONSTANTS,
-} = require("../src/common/utils");
-const fetchStats = require("../src/fetchers/stats-fetcher");
-const renderStatsCard = require("../src/cards/stats-card");
-const blacklist = require("../src/common/blacklist");
-const { isLocaleAvailable } = require("../src/translations");
+} from "../src/common/utils";
+import fetchStats from "../src/fetchers/stats-fetcher";
+import renderStatsCard from "../src/cards/stats-card";
+import blacklist from "../src/common/blacklist";
+import { isLocaleAvailable } from "../src/translations";
+import * as dotenv from "dotenv";
 
-module.exports = async (req, res) => {
+dotenv.config();
+
+export default async (req, res) => {
   const {
     username,
     hide,

diff --git a/api/pin.js b/api/pin.js
@@ -1,16 +1,15 @@
-require("dotenv").config();
-const {
+import {
   renderError,
   parseBoolean,
   clampValue,
   CONSTANTS,
-} = require("../src/common/utils");
-const fetchRepo = require("../src/fetchers/repo-fetcher");
-const renderRepoCard = require("../src/cards/repo-card");
-const blacklist = require("../src/common/blacklist");
-const { isLocaleAvailable } = require("../src/translations");
+} from "../src/common/utils";
+import fetchRepo from "../src/fetchers/repo-fetcher";
+import renderRepoCard from "../src/cards/repo-card";
+import blacklist from "../src/common/blacklist";
+import { isLocaleAvailable } from "../src/translations";
 
-module.exports = async (req, res) => {
+export default async (req, res) => {
   const {
     username,
     repo,

diff --git a/api/top-langs.js b/api/top-langs.js
@@ -1,17 +1,19 @@
-require("dotenv").config();
-const {
+import {
   renderError,
   clampValue,
   parseBoolean,
   parseArray,
   CONSTANTS,
-} = require("../src/common/utils");
-const fetchTopLanguages = require("../src/fetchers/top-languages-fetcher");
-const renderTopLanguages = require("../src/cards/top-languages-card");
-const blacklist = require("../src/common/blacklist");
-const { isLocaleAvailable } = require("../src/translations");
+} from "../src/common/utils";
+import fetchTopLanguages from "../src/fetchers/top-languages-fetcher";
+import { renderTopLanguages } from "../src/cards/top-languages-card";
+import blacklist from "../src/common/blacklist";
+import { isLocaleAvailable } from "../src/translations";
+import * as dotenv from "dotenv";
 
-module.exports = async (req, res) => {
+dotenv.config();
+
+export default async (req, res) => {
   const {
     username,
     hide,

diff --git a/api/wakatime.js b/api/wakatime.js
@@ -1,16 +1,18 @@
-require("dotenv").config();
-const {
+import {
   renderError,
   parseBoolean,
   clampValue,
   parseArray,
   CONSTANTS,
-} = require("../src/common/utils");
-const { isLocaleAvailable } = require("../src/translations");
-const { fetchWakatimeStats } = require("../src/fetchers/wakatime-fetcher");
-const wakatimeCard = require("../src/cards/wakatime-card");
+} from "../src/common/utils";
+import { isLocaleAvailable } from "../src/translations";
+import fetchWakatimeStats from "../src/fetchers/wakatime-fetcher";
+import wakatimeCard from "../src/cards/wakatime-card";
+import * as dotenv from "dotenv";
 
-module.exports = async (req, res) => {
+dotenv.config();
+
+export default async (req, res) => {
   const {
     username,
     title_color,

diff --git a/jest.config.js b/jest.config.js
@@ -1,3 +1,5 @@
-module.exports = {
+export default {
   clearMocks: true,
+  transform: {},
+  testEnvironment: "jsdom",
 };
diff --git a/package.json b/package.json
@@ -3,9 +3,11 @@
   "version": "1.0.0",
   "description": "Dynamically generate stats for your github readmes",
   "main": "index.js",
+  "type": "module",
   "scripts": {
-    "test": "jest --coverage",
-    "test:watch": "jest --watch",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --coverage",
+    "test:watch": "node --experimental-vm-modules node_modules/jest/bin/jest.js --watch",
+    "test:update:snapshot": "node --experimental-vm-modules node_modules/jest/bin/jest.js -u",
     "theme-readme-gen": "node scripts/generate-theme-doc",
     "preview-theme": "node scripts/preview-theme",
     "generate-langs-json": "node scripts/generate-langs-json",
@@ -20,14 +22,15 @@
   "devDependencies": {
     "@actions/core": "^1.2.4",
     "@actions/github": "^4.0.0",
-    "@testing-library/dom": "^7.20.0",
-    "@testing-library/jest-dom": "^5.11.0",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "jest-environment-jsdom": "^29.0.3",
+    "jest": "^29.0.3",
     "@uppercod/css-to-object": "^1.1.1",
     "axios-mock-adapter": "^1.18.1",
     "color-contrast-checker": "^2.1.0",
     "hjson": "^3.2.2",
     "husky": "^4.2.5",
-    "jest": "^26.1.0",
     "js-yaml": "^4.1.0",
     "lodash.snakecase": "^4.1.1",
     "parse-diff": "^0.7.0",
@@ -38,6 +41,7 @@
     "dotenv": "^8.2.0",
     "emoji-name-map": "^1.2.8",
     "github-username-regex": "^1.0.0",
+    "upgrade": "^1.1.0",
     "word-wrap": "^1.2.3"
   },
   "husky": {

diff --git a/scripts/generate-langs-json.js b/scripts/generate-langs-json.js
@@ -1,6 +1,6 @@
-const fs = require("fs");
-const jsYaml = require("js-yaml");
-const axios = require("axios");
+import axios from "axios";
+import fs from "fs";
+import jsYaml from "js-yaml";
 
 const LANGS_FILEPATH = "./src/common/languageColors.json";
 

diff --git a/scripts/generate-theme-doc.js b/scripts/generate-theme-doc.js
@@ -1,5 +1,5 @@
-const theme = require("../themes/index");
-const fs = require("fs");
+import fs from "fs";
+import { themes } from "../themes/index";
 
 const TARGET_FILE = "./themes/README.md";
 const REPO_CARD_LINKS_FLAG = "<!-- REPO_CARD_LINKS -->";
@@ -54,7 +54,7 @@ const createStatMdLink = (theme) => {
 };
 
 const generateLinks = (fn) => {
-  return Object.keys(theme)
+  return Object.keys(themes)
     .map((name) => fn(name))
     .join("");
 };
@@ -65,7 +65,7 @@ const createTableItem = ({ link, label, isRepoCard }) => {
 };
 const generateTable = ({ isRepoCard }) => {
   const rows = [];
-  const themes = Object.keys(theme).filter(
+  const themes = Object.keys(themes).filter(
     (name) => name !== (!isRepoCard ? "default_repocard" : "default"),
   );
 

diff --git a/scripts/preview-theme.js b/scripts/preview-theme.js
@@ -1,11 +1,12 @@
-const core = require("@actions/core");
-const github = require("@actions/github");
-const parse = require("parse-diff");
-const Hjson = require("hjson");
-const snakeCase = require("lodash.snakecase");
-const ColorContrastChecker = require("color-contrast-checker");
+import core from "@actions/core";
+import github from "@actions/github";
+import ColorContrastChecker from "color-contrast-checker";
+import * as dotenv from "dotenv";
+import Hjson from "hjson";
+import snakeCase from "lodash.snakecase";
+import parse from "parse-diff";
 
-require("dotenv").config();
+dotenv.config();
 
 const OWNER = "anuraghazra";
 const REPO = "github-readme-stats";
@@ -76,10 +77,10 @@ function getGrsLink(colors) {
 }
 
 const themeContribGuidelines = `
-  \rHi, thanks for the theme contribution, please read our theme [contribution guidelines](https://github.com/anuraghazra/github-readme-stats/blob/master/CONTRIBUTING.md#themes-contribution).  
+  \rHi, thanks for the theme contribution, please read our theme [contribution guidelines](https://github.com/anuraghazra/github-readme-stats/blob/master/CONTRIBUTING.md#themes-contribution).
   \rWe are currently only accepting color combinations from any VSCode theme or themes which have good color combination to minimize bloating the themes collection.
 
-  \r> Also note that if this theme is exclusively for your personal use, then instead of adding it to our theme collection you can use card [customization options](https://github.com/anuraghazra/github-readme-stats#customization) 
+  \r> Also note that if this theme is exclusively for your personal use, then instead of adding it to our theme collection you can use card [customization options](https://github.com/anuraghazra/github-readme-stats#customization)
 `;
 
 async function run() {
@@ -128,7 +129,7 @@ async function run() {
         issue_number: pullRequestId,
         body: `
         \r**${COMMENT_TITLE}**
-        
+
         \rCannot create theme preview
 
         ${themeContribGuidelines}
@@ -167,16 +168,16 @@ async function run() {
       owner: OWNER,
       repo: REPO,
       body: `
-      \r**${COMMENT_TITLE}**  
-      
+      \r**${COMMENT_TITLE}**
+
       \r${warnings.map((warning) => `- :warning: ${warning}\n`).join("")}
 
       \ntitle_color: <code>#${titleColor}</code> | icon_color: <code>#${iconColor}</code> | text_color: <code>#${textColor}</code> | bg_color: <code>#${bgColor}</code>
-      
+
       \r[Preview Link](${url})
 
       \r[![](${url})](${url})
-      
+
       ${themeContribGuidelines}
       `,
     });

diff --git a/scripts/push-theme-readme.sh b/scripts/push-theme-readme.sh
@@ -11,4 +11,4 @@ git checkout -b $BRANCH_NAME
 git add --all
 git commit --message "docs(theme): Auto update theme readme" || exit 0
 git remote add origin-$BRANCH_NAME https://${PERSONAL_TOKEN}@github.com/${GH_REPO}.git
-git push --force --quiet --set-upstream origin-$BRANCH_NAME $BRANCH_NAME
+git push --force --quiet --set-upstream origin-$BRANCH_NAME $BRANCH_NAME
diff --git a/src/calculateRank.js b/src/calculateRank.js
@@ -57,8 +57,8 @@ function calculateRank({
     issues * ISSUES_OFFSET +
     stargazers * STARS_OFFSET +
     prs * PRS_OFFSET +
-    followers * FOLLOWERS_OFFSET + 
-    totalRepos * REPO_OFFSET 
+    followers * FOLLOWERS_OFFSET +
+    totalRepos * REPO_OFFSET
   ) / 100;
 
   const normalizedScore = normalcdf(score, TOTAL_VALUES, ALL_OFFSETS) * 100;
@@ -74,4 +74,5 @@ function calculateRank({
   return { level, score: normalizedScore };
 }
 
-module.exports = calculateRank;
+export { calculateRank };
+export default calculateRank;
diff --git a/src/cards/repo-card.js b/src/cards/repo-card.js
@@ -1,17 +1,17 @@
 // @ts-check
-const {
-  kFormatter,
+import { Card } from "../common/Card";
+import { I18n } from "../common/I18n";
+import { icons } from "../common/icons";
+import {
   encodeHTML,
-  getCardColors,
   flexLayout,
-  wrapTextMultiline,
+  getCardColors,
+  kFormatter,
   measureText,
   parseEmojis,
-} = require("../common/utils");
-const I18n = require("../common/I18n");
-const Card = require("../common/Card");
-const icons = require("../common/icons");
-const { repoCardLocales } = require("../translations");
+  wrapTextMultiline,
+} from "../common/utils";
+import { repoCardLocales } from "../translations";
 
 /**
  * @param {string} label
@@ -185,4 +185,5 @@ const renderRepoCard = (repo, options = {}) => {
   `);
 };
 
-module.exports = renderRepoCard;
+export { renderRepoCard };
+export default renderRepoCard;
diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js
@@ -1,16 +1,16 @@
 // @ts-check
-const I18n = require("../common/I18n");
-const Card = require("../common/Card");
-const icons = require("../common/icons");
-const { getStyles } = require("../getStyles");
-const { statCardLocales } = require("../translations");
-const {
-  kFormatter,
-  flexLayout,
+import { Card } from "../common/Card";
+import { I18n } from "../common/I18n";
+import { icons } from "../common/icons";
+import {
   clampValue,
-  measureText,
+  flexLayout,
   getCardColors,
-} = require("../common/utils");
+  kFormatter,
+  measureText,
+} from "../common/utils";
+import { getStyles } from "../getStyles";
+import { statCardLocales } from "../translations";
 
 const createTextNode = ({
   icon,
@@ -300,4 +300,5 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
   `);
 };
 
-module.exports = renderStatsCard;
+export { renderStatsCard };
+export default renderStatsCard;
diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js
@@ -1,16 +1,16 @@
 // @ts-check
-const Card = require("../common/Card");
-const I18n = require("../common/I18n");
-const { langCardLocales } = require("../translations");
-const { createProgressNode } = require("../common/createProgressNode");
-const {
+import { Card } from "../common/Card";
+import { createProgressNode } from "../common/createProgressNode";
+import { I18n } from "../common/I18n";
+import {
+  chunkArray,
   clampValue,
-  getCardColors,
   flexLayout,
+  getCardColors,
   lowercaseTrim,
   measureText,
-  chunkArray,
-} = require("../common/utils");
+} from "../common/utils";
+import { langCardLocales } from "../translations";
 
 const DEFAULT_CARD_WIDTH = 300;
 const MIN_CARD_WIDTH = 230;
@@ -311,5 +311,4 @@ const renderTopLanguages = (topLangs, options = {}) => {
   `);
 };
 
-module.exports = renderTopLanguages;
-module.exports.MIN_CARD_WIDTH = MIN_CARD_WIDTH;
+export { renderTopLanguages, MIN_CARD_WIDTH };