Refactor scripts in scripts/ (#4931)

- Rename `titleToFilename` to `titleToSlug`
- Fix indentation where necessary
- Use quotes internally consistently (to reduce the diff size, unfortunately this is the opposite quote from what we use in other projects)
- Update comments & documentation
- Construct file paths

And more...

scripts/build-package.js

@@ -2,29 +2,30 @@
 /**
  * @fileoverview
  * Compiles our icons into static .js files that can be imported in the browser
- * and are tree-shakeable.
- * The static .js files go in icons/{filename}.js.
- * Also generates an index.js that exports all icons by title, but is not tree-shakeable
+ * and are tree-shakeable. The static .js files go in icons/{filename}.js. Also
+ * generates an index.js that exports all icons by title, but is not
+ * tree-shakeable
  */
 
 const fs = require("fs");
+const path = require("path");
 const util = require("util");
 const minify = require("uglify-js").minify;
 
 const UTF8 = "utf8";
 
-const dataFile = "../_data/simple-icons.json";
-const indexFile = `${__dirname}/../index.js`;
-const iconsDir = `${__dirname}/../icons`;
+const dataFile = path.resolve(__dirname, "..", "_data", "simple-icons.json");
+const indexFile = path.resolve(__dirname, "..", "index.js");
+const iconsDir = path.resolve(__dirname, "..", "icons");
 
-const indexTemplateFile = `${__dirname}/templates/index.js`;
-const iconObjectTemplateFile = `${__dirname}/templates/icon-object.js`;
+const indexTemplateFile = path.resolve(__dirname, "templates", "index.js");
+const iconObjectTemplateFile = path.resolve(__dirname, "templates", "icon-object.js");
 
 const indexTemplate = fs.readFileSync(indexTemplateFile, UTF8);
 const iconObjectTemplate = fs.readFileSync(iconObjectTemplateFile, UTF8);
 
 const data = require(dataFile);
-const { titleToFilename } = require("./utils");
+const { titleToSlug } = require("./utils.js");
 
 // Local helper functions
 function escape(value) {
@@ -43,32 +44,30 @@ function iconToObject(icon) {
     escape(icon.hex)
   );
 }
+function minifyAndWrite(filepath, rawJavaScript) {
+  const { error, code } = minify(rawJavaScript);
+  if (error) {
+    console.error(error);
+    process.exit(1);
+  } else {
+    fs.writeFileSync(filepath, code);
+  }
+}
 
 // 'main'
 const icons = [];
 data.icons.forEach(icon => {
-    const filename = titleToFilename(icon.title);
-    icon.svg = fs.readFileSync(`${iconsDir}/${filename}.svg`, UTF8).replace(/\r?\n/, '');
-    icon.slug = filename;
-    icons.push(icon);
-
-    // write the static .js file for the icon
-    const { error, code } = minify(`module.exports=${iconToObject(icon)};`);
-    if (error) {
-      console.error(error);
-      process.exit(1);
-    } else {
-      fs.writeFileSync(`${iconsDir}/${filename}.js`, code);
-    }
+  const filename = titleToSlug(icon.title);
+  const svgFilepath = path.resolve(iconsDir, `${filename}.svg`);
+  icon.svg = fs.readFileSync(svgFilepath, UTF8).replace(/\r?\n/, '');
+  icon.slug = filename;
+  icons.push(icon);
 
+  // write the static .js file for the icon
+  const jsFilepath = path.resolve(iconsDir, `${filename}.js`);
+  minifyAndWrite(jsFilepath, `module.exports=${iconToObject(icon)};`);
 });
 
 // write our generic index.js
 const rawIndexJs = util.format(indexTemplate, icons.map(iconToKeyValue).join(','));
-const { error, code } = minify(rawIndexJs);
-if (error) {
-  console.error(error);
-  process.exit(1);
-} else {
-  fs.writeFileSync(indexFile, code);
-}
+minifyAndWrite(indexFile, rawIndexJs);

scripts/get-filename.js

@@ -1,22 +1,19 @@
 #!/usr/bin/env node
 /**
  * @fileoverview
- * Takes a brand name as argument and outputs the corresonding filename to
- * standard output.
+ * Script that takes a brand name as argument and outputs the corresponding
+ * icon SVG filename to standard output.
  */
 
-const utils = require('./utils.js');
+const utils = require("./utils.js");
 
 if (process.argv.length < 3) {
-  console.error("Provide a brand name as argument")
+  console.error("Provide a brand name as argument");
+  process.exit(1);
 } else {
-  let brandName = "";
-  for (let i = 2; i < process.argv.length; i++) {
-    brandName += ` ${process.argv[i]}`;
-  }
+  const brandName = process.argv.slice(3)
+    .reduce((acc, arg) => `${acc} ${arg}`, process.argv[2]);
 
-  brandName = brandName.substring(1);
-
-  const filename = utils.titleToFilename(brandName);
-  console.log(`For '${brandName}' use the filename '${filename}.svg'`);
+  const filename = utils.titleToSlug(brandName);
+  console.log(`For '${brandName}' use the file 'icons/${filename}.svg'`);
 }

scripts/lint.js

@@ -1,6 +1,8 @@
 #!/usr/bin/env node
 /**
- * @fileoverview Lints for the package that can't be implemented in the existing linters (e.g. jsonlint/svglint)
+ * @fileoverview
+ * Linters for the package that can't easily be implemented in the existing
+ * linters (e.g. jsonlint/svglint).
  */
 
 const fs = require("fs");
@@ -8,12 +10,13 @@ const path = require("path");
 
 const { diffLinesUnified } = require("jest-diff");
 
-const simpleIconsData = require("../_data/simple-icons.json");
-const simpleIconsDataFile = path.resolve(
-  __dirname, "..", "_data", "simple-icons.json");
+const UTF8 = "utf8";
+
+const dataFile = path.resolve( __dirname, "..", "_data", "simple-icons.json");
+const data = require(dataFile);
 
 /**
- * Contains our tests so they can be isolated from eachother; I don't think each test is worth its own file
+ * Contains our tests so they can be isolated from each other.
  * @type {{[k:string]: () => (string|undefined)}}
  */
 const TESTS = {
@@ -29,38 +32,38 @@ const TESTS = {
       return invalidEntries;
     };
 
-    const invalids = simpleIconsData.icons.reduce(collector, []);
+    const invalids = data.icons.reduce(collector, []);
     if (invalids.length) {
       return `Some icons aren't in alphabetical order:
         ${invalids.map(icon => icon.title).join(", ")}`;
     }
   },
 
-  /* Check the prettification of the data file */
+  /* Check the formatting of the data file */
   prettified: function() {
-    const simpleIconsDataString = fs.readFileSync(
-      simpleIconsDataFile, "utf8").replace(/\r\n/g, '\n');
-    const simpleIconsDataPretty = `${JSON.stringify(simpleIconsData, null, "    ")}\n`;
-    if (simpleIconsDataString !== simpleIconsDataPretty) {
-      const dataDiff = diffLinesUnified(simpleIconsDataString.split("\n"),
-                                        simpleIconsDataPretty.split("\n"),
-                                        {
-                                          expand: false,
-                                          omitAnnotationLines: true
-                                        });
-      return `Data file is not prettified:\n\n${dataDiff}`;
+    const dataString = fs.readFileSync(dataFile, UTF8).replace(/\r\n/g, '\n');
+    const dataPretty = `${JSON.stringify(data, null, "    ")}\n`;
+    if (dataString !== dataPretty) {
+      const dataDiff = diffLinesUnified(
+        dataString.split("\n"),
+        dataPretty.split("\n"),
+        {
+          expand: false,
+          omitAnnotationLines: true
+        },
+      );
+
+      return `Data file is formatted incorrectly:\n\n${dataDiff}`;
     }
   }
 };
 
-// execute all tests and log potential errors
+// execute all tests and log all errors
 const errors = Object.keys(TESTS)
   .map(k => TESTS[k]())
   .filter(Boolean);
 
-if (errors.length) {
-  errors.forEach(error => {
-    console.error(`\u001b[31m${error}\u001b[0m`);
-  });
+if (errors.length > 0) {
+  errors.forEach(error => console.error(`\u001b[31m${error}\u001b[0m`));
   process.exit(1);
 }

scripts/utils.js

@@ -1,38 +1,43 @@
-module.exports = {
-    /**
-     * Converts a brand title into a filename (not a full path)
-     * @param {String} title The title to convert
-     */
-    titleToFilename: title => (
-        title.toLowerCase()
-            .replace(/\+/g, "plus")
-            .replace(/^\./, "dot-")
-            .replace(/\.$/, "-dot")
-            .replace(/\./g, "-dot-")
-            .replace(/^&/, "and-")
-            .replace(/&$/, "-and")
-            .replace(/&/g, "-and-")
-            .replace(/đ/g, "d")
-            .replace(/ħ/g, "h")
-            .replace(/ı/g, "i")
-            .replace(/ĸ/g, "k")
-            .replace(/ŀ/g, "l")
-            .replace(/ł/g, "l")
-            .replace(/ß/g, "ss")
-            .replace(/ŧ/g, "t")
-            .normalize("NFD")
-            .replace(/[\u0300-\u036f]/g, "")
-            .replace(/[^a-z0-9_\-]/g, "")
-    ),
+/**
+ * @fileoverview
+ * Some common utilities for scripts.
+ */
 
-    /**
-     * Converts a brand title in HTML friendly format into a brand title (as it
-     * is seen in simple-icons.json)
-     * @param {String} htmlFriendlyTitle The title to convert
-     */
-    htmlFriendlyToTitle: htmlFriendlyTitle => (
-      htmlFriendlyTitle
-        .replace(/'/g, "’")
-        .replace(/&/g, "&")
-    )
+module.exports = {
+  /**
+   * Converts a brand title into a slug/filename.
+   * @param {String} title The title to convert
+   */
+  titleToSlug: title => (
+    title.toLowerCase()
+      .replace(/\+/g, "plus")
+      .replace(/^\./, "dot-")
+      .replace(/\.$/, "-dot")
+      .replace(/\./g, "-dot-")
+      .replace(/^&/, "and-")
+      .replace(/&$/, "-and")
+      .replace(/&/g, "-and-")
+      .replace(/đ/g, "d")
+      .replace(/ħ/g, "h")
+      .replace(/ı/g, "i")
+      .replace(/ĸ/g, "k")
+      .replace(/ŀ/g, "l")
+      .replace(/ł/g, "l")
+      .replace(/ß/g, "ss")
+      .replace(/ŧ/g, "t")
+      .normalize("NFD")
+      .replace(/[\u0300-\u036f]/g, "")
+      .replace(/[^a-z0-9_\-]/g, "")
+  ),
+
+  /**
+   * Converts a brand title in HTML/SVG friendly format into a brand title (as
+   * it is seen in simple-icons.json)
+   * @param {String} htmlFriendlyTitle The title to convert
+   */
+  htmlFriendlyToTitle: htmlFriendlyTitle => (
+    htmlFriendlyTitle
+      .replace(/'/g, "’")
+      .replace(/&/g, "&")
+  ),
 }

tests/icons.test.js

@@ -1,8 +1,8 @@
 const { icons } = require('../_data/simple-icons.json');
-const { titleToFilename } = require('../scripts/utils.js');
+const { titleToSlug } = require('../scripts/utils.js');
 
 icons.forEach(icon => {
-  const filename = titleToFilename(icon.title);
+  const filename = titleToSlug(icon.title);
   const subject = require(`../icons/${filename}.js`);
 
   test(`${icon.title} has a "title"`, () => {

tests/index.test.js

@@ -1,6 +1,6 @@
 const { icons } = require('../_data/simple-icons.json');
 const simpleIcons = require('../index.js');
-const { titleToFilename } = require("../scripts/utils.js");
+const { titleToSlug } = require("../scripts/utils.js");
 
 icons.forEach(icon => {
   const subject = simpleIcons[icon.title];
@@ -38,7 +38,7 @@ icons.forEach(icon => {
   });
 
   test(`${icon.title} can be found by it's slug`, () => {
-    const name = titleToFilename(icon.title);
+    const name = titleToSlug(icon.title);
     const found = simpleIcons.get(name);
     expect(found).toBeDefined();
     expect(found.title).toEqual(icon.title);