build(ui-icons): remove fs-extra dep

Author: benelan

package-lock.json

@@ -1,9 +1,11 @@
-const fs = require("fs-extra");
+const { existsSync, mkdirSync } = require("fs");
 const optimize = require("./optimize");
 const generatePathFile = require("./path-data");
 
 module.exports = function () {
-  fs.ensureDirSync("js");
+  if (!existsSync("js")) {
+    mkdirSync("js");
+  }
 
   return optimize("*.svg")
     .then(() => optimize("icons/*.svg", true))

packages/calcite-ui-icons/bin/build.js

@@ -1,4 +1,4 @@
-const fs = require("fs-extra");
+const { readFile, writeFile } = require("fs/promises");
 const { glob } = require("glob");
 const SVGO = require("svgo");
 const progress = require("cli-progress");
@@ -32,18 +32,17 @@ let options = {
  * @return {Promise}
  */
 function optimizeIcons(filePaths, svgo, bar) {
-  var num = 0;
+  let num = 0;
   return Promise.all(
-    filePaths.map((path) => {
-      return fs
-        .readFile(path, "utf-8")
+    filePaths.map((path) =>
+      readFile(path, "utf-8")
         .then((svg) => svgo.optimize(svg, { path }))
         .then((result) => {
           num++;
           bar.update(num);
-          return fs.writeFile(path, result.data, "utf-8");
-        });
-    }),
+          return writeFile(path, result.data, "utf-8");
+        }),
+    ),
   );
 }
 
@@ -58,10 +57,13 @@ module.exports = function (files, remove) {
     return Promise.resolve(true);
   }
   options.plugins[0] = { cleanupIDs: { remove } };
-  svgo = new SVGO(options);
+  let svgo = new SVGO(options);
   return glob(files).then((iconPaths) => {
     const format = "  \x1b[32m {bar} {percentage}% | {value}/{total} \x1b[0m";
-    const bar = new progress.SingleBar({ format }, progress.Presets.shades_classic);
+    const bar = new progress.SingleBar(
+      { format },
+      progress.Presets.shades_classic,
+    );
     bar.start(iconPaths.length, 0);
     return optimizeIcons(iconPaths, svgo, bar).then(() => {
       bar.stop();

packages/calcite-ui-icons/bin/optimize.js

@@ -1,5 +1,8 @@
 const camelCase = require("camelcase");
-const fs = require("fs-extra");
+const {
+  promises: { writeFile, readFile },
+  readFileSync,
+} = require("fs");
 const { glob } = require("glob");
 const { parse } = require("svgson");
 const path = require("path");
@@ -30,10 +33,11 @@ function formatSVG(svg) {
 function getPaths(svg) {
   const bbPaths = ["M0 0h16v16H0z", "M0 0h24v24H0z", "M0 0h32v32H0z"];
   return svg.children
-    .filter(
-      (child) => child.name === "path" && bbPaths.indexOf(child.attributes.d) === -1,
-    ) // filter out bounding box paths
-    .map((child) => ({ opacity: child.attributes.opacity, d: child.attributes.d }));
+    .filter((child) => child.name === "path" && bbPaths.indexOf(child.attributes.d) === -1) // filter out bounding box paths
+    .map((child) => ({
+      opacity: child.attributes.opacity,
+      d: child.attributes.d,
+    }));
 }
 
 /**
@@ -64,17 +68,12 @@ function getSize(name) {
  */
 function readSVG(fileName) {
   return new Promise((resolve, reject) =>
-    fs
-      .readFile(fileName, "utf-8")
-      .then((svg) =>
-        parse(svg).then((contents) => resolve({ file: fileName, contents })),
-      ),
+    readFile(fileName, "utf-8").then((svg) => parse(svg).then((contents) => resolve({ file: fileName, contents }))),
   );
 }
 
 module.exports = function generatePathFile() {
-  let banner =
-    "// File generated automatically by path-data.js, do not edit directly\n";
+  let banner = "// File generated automatically by path-data.js, do not edit directly\n";
   let jsFile = `${banner}`;
   let tsFile = `
 ${banner}
@@ -89,11 +88,10 @@ export type CalciteIconPath = string | CalciteMultiPathEntry[];
     .then((files) => files.map(formatSVG))
     .then((files) => {
       let icons = {};
-      let keywords = JSON.parse(fs.readFileSync("docs/keywords.json", "utf-8"));
+      let keywords = JSON.parse(readFileSync("docs/keywords.json", "utf-8"));
       files.forEach((file) => {
         // add to json file
-        icons[file.variant] = icons[file.variant] ||
-          keywords[file.variant] || { alias: [], category: "", release: "" };
+        icons[file.variant] = icons[file.variant] || keywords[file.variant] || { alias: [], category: "", release: "" };
         var icon = icons[file.variant];
         const firstPath = file.paths[0] || { d: "" }; // back up for "blank" icon
         const paths = file.paths.length > 1 ? file.paths : firstPath.d;
@@ -109,12 +107,8 @@ export type CalciteIconPath = string | CalciteMultiPathEntry[];
           }
         }
         // add to ts and js files
-        const variant = file.variant.match(/^\d/)
-          ? `i${file.variant}`
-          : file.variant;
-        const camelCaseName = camelCase(
-          `${file.filled ? base : variant}-${file.size}${file.filled ? "-f" : ""}`,
-        );
+        const variant = file.variant.match(/^\d/) ? `i${file.variant}` : file.variant;
+        const camelCaseName = camelCase(`${file.filled ? base : variant}-${file.size}${file.filled ? "-f" : ""}`);
         jsFile += `export {${camelCaseName}} from "./js/${camelCaseName}.js";\n`;
 
         let contents, tsContents;
@@ -129,18 +123,14 @@ export type CalciteIconPath = string | CalciteMultiPathEntry[];
           tsContents = `export const ${camelCaseName}: CalciteMultiPathEntry[];\n`;
         }
 
-        fs.writeFile(`js/${camelCaseName}.js`, contents, "utf8");
-        fs.writeFile(`js/${camelCaseName}.d.ts`, tsContents, "utf8");
-        fs.writeFile(`js/${camelCaseName}.json`, JSON.stringify(paths), "utf8");
+        writeFile(`js/${camelCaseName}.js`, contents, "utf8");
+        writeFile(`js/${camelCaseName}.d.ts`, tsContents, "utf8");
+        writeFile(`js/${camelCaseName}.json`, JSON.stringify(paths), "utf8");
       });
       let promises = [
-        fs.writeFile(
-          "docs/icons.json",
-          JSON.stringify({ version, icons }),
-          "utf8",
-        ),
-        fs.writeFile("index.d.ts", tsFile, "utf8"),
-        fs.writeFile("index.js", jsFile, "utf8"),
+        writeFile("docs/icons.json", JSON.stringify({ version, icons }), "utf8"),
+        writeFile("index.d.ts", tsFile, "utf8"),
+        writeFile("index.js", jsFile, "utf8"),
       ];
       return Promise.all(promises);
     });

packages/calcite-ui-icons/bin/path-data.js

@@ -47,7 +47,7 @@
     "convert-all-desktop:size": "node bin/convert-mobile.js -o \"../desktop-output\" -i \"16\" -s",
     "convert-all-ios": "node bin/convert-mobile.js -o \"../mobile-output\" -p \"ios\" -i \"24\"",
     "convert-all-ios:size": "node bin/convert-mobile.js -o \"../mobile-output\" -p \"ios\" -s",
-    "copy-assets": "cpy \"../../node_modules/calcite-web/dist/js/calcite-web.min.js\" \"../../node_modules/calcite-web/dist/css/calcite-web.min.css\" \"./docs/resources\" --flat",
+    "copy-assets": "cpy \"./node_modules/calcite-web/dist/js/calcite-web.min.js\" \"./node_modules/calcite-web/dist/css/calcite-web.min.css\" \"./docs/resources\" --flat",
     "optimize": "node bin/cli.js",
     "spriter": "node bin/spriter.js",
     "start": "npm run copy-assets && node bin/server.js"
@@ -58,7 +58,6 @@
     "camelcase": "6.3.0",
     "cli-progress": "^3.12.0",
     "debounce": "^2.1.0",
-    "fs-extra": "7.0.1",
     "glob": "^11.0.0",
     "svg2img": "1.0.0-beta.2",
     "svgo": "^1.3.0",