@blueprintjs/icons 4.6.1 → 4.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@blueprintjs/icons",
-    "version": "4.6.1",
+    "version": "4.6.3",
     "description": "Components, fonts, icons, and css files for creating and displaying icons.",
     "main": "lib/cjs/index.js",
     "module": "lib/esm/index.js",
@@ -25,7 +25,7 @@
         "dist:bundle": "cross-env NODE_ENV=production webpack",
         "dist:css": "css-dist lib/css/*.css",
         "dist:verify": "assert-package-layout",
-        "generate-icon-src": "node scripts/generate-icon-fonts.js && node scripts/generate-icon-paths.js",
+        "generate-icon-src": "node scripts/generate-icon-fonts.mjs && node scripts/generate-icon-paths.mjs",
         "lint": "run-p lint:scss lint:es",
         "lint:scss": "sass-lint",
         "lint:es": "es-lint",
@@ -43,6 +43,7 @@
     "devDependencies": {
         "@blueprintjs/node-build-scripts": "^6.0.0",
         "@blueprintjs/test-commons": "^1.1.0",
+        "@types/svgo": "~1.3.6",
         "enzyme": "^3.11.0",
         "fantasticon": "^1.2.3",
         "mocha": "^10.0.0",

package/scripts/common.mjs

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2021 Palantir Technologies, Inc. All rights reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// @ts-check
+
+import { readFileSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+export const scriptsDir = fileURLToPath(new URL(".", import.meta.url));
+export const iconResourcesDir = resolve(scriptsDir, "../../../resources/icons");
+export const generatedSrcDir = resolve(scriptsDir, "../src/generated");
+export const NS = "bp4";
+
+/**
+ * @typedef {Object} IconMetadata
+ * @property {string} displayName - "Icon name" for display
+ * @property {string} iconName - `icon-name` for IconName and CSS class
+ * @property {string} tags - comma separated list of tags describing this icon
+ * @property {string} group - group to which this icon belongs
+ * @property {string} content - unicode character for icon glyph in font
+ * @property {number} codepoint - icon font codepoint
+ */
+
+// TODO(adahiya): replace this with `await import("../icons.json", { assert: { type: "json" } })` in Node 17.5+
+/** @type {IconMetadata[]} */
+export const iconsMetadata = JSON.parse(readFileSync(resolve(scriptsDir, "../icons.json"), { encoding: "utf8" })).sort(
+    (a, b) => a.iconName.localeCompare(b.iconName),
+);
+
+/**
+ * Writes lines to given filename in GENERATED_SRC_DIR.
+ *
+ * @param {string} filename
+ * @param {Array<string>} lines
+ */
+export function writeLinesToFile(filename, ...lines) {
+    const outputPath = join(generatedSrcDir, filename);
+    const contents = [...lines, ""].join("\n");
+    writeFileSync(outputPath, contents);
+}

package/scripts/{generate-icon-fonts.js → generate-icon-fonts.mjs}

@@ -17,40 +17,45 @@
  * @fileoverview Generates icon fonts and codepoints from SVG sources
  */
 
-const { generateFonts: runFantasticon, FontAssetType, OtherAssetType } = require("fantasticon");
-const { getLogger } = require("fantasticon/lib/cli/logger");
-const fs = require("fs");
-const path = require("path");
+// @ts-check
 
-const iconsMetadata = require("../icons.json");
-const { RESOURCES_DIR, GENERATED_SRC_DIR, NS } = require("./common");
+import { FontAssetType, OtherAssetType, generateFonts as runFantasticon } from "fantasticon";
+import { getLogger } from "fantasticon/lib/cli/logger.js";
+import { mkdirSync } from "node:fs";
+import { join, resolve } from "node:path";
+
+import { generatedSrcDir, iconResourcesDir, iconsMetadata, NS, scriptsDir } from "./common.mjs";
 
 const logger = getLogger();
+
+/** @type {import("fantasticon/lib/utils/codepoints").CodepointsMap} */
 const codepoints = {};
 
-(async function () {
-    for (const icon of iconsMetadata) {
-        if (Object.values(codepoints).indexOf(icon.codepoint) !== -1) {
-            throw new Error(
-                `[generate-icon-fonts] Invalid metadata entry in icons.json: icon "${icon.iconName}" cannot have codepoint ${icon.codepoint}, it is already in use.`,
-            );
-        }
-        codepoints[icon.iconName] = icon.codepoint;
+for (const icon of iconsMetadata) {
+    if (Object.values(codepoints).indexOf(icon.codepoint) !== -1) {
+        throw new Error(
+            `[generate-icon-fonts] Invalid metadata entry in icons.json: icon "${icon.iconName}" cannot have codepoint ${icon.codepoint}, it is already in use.`,
+        );
     }
+    codepoints[icon.iconName] = icon.codepoint;
+}
 
-    logger.start();
-    await Promise.all([
-        connectToLogger(generateFonts(16, `${NS}-icon-standard`)),
-        connectToLogger(generateFonts(20, `${NS}-icon-large`)),
-    ]);
-})();
+logger.start();
+await Promise.all([
+    connectToLogger(generateFonts(16, `${NS}-icon-standard`)),
+    connectToLogger(generateFonts(20, `${NS}-icon-large`)),
+]);
 
+/**
+ * @param {number} size
+ * @param {string} prefix
+ */
 async function generateFonts(size, prefix) {
-    fs.mkdirSync(path.join(GENERATED_SRC_DIR, `${size}px/paths`), { recursive: true });
+    mkdirSync(join(generatedSrcDir, `${size}px/paths`), { recursive: true });
     return runFantasticon({
         name: `blueprint-icons-${size}`,
-        inputDir: path.join(RESOURCES_DIR, `${size}px`),
-        outputDir: path.join(GENERATED_SRC_DIR, `${size}px`),
+        inputDir: join(iconResourcesDir, `${size}px`),
+        outputDir: join(generatedSrcDir, `${size}px`),
         normalize: true,
         descent: 0,
         // N.B. Important: we need to scale up the font height so that the icons do not get visually degraded
@@ -62,11 +67,11 @@ async function generateFonts(size, prefix) {
         assetTypes: [OtherAssetType.CSS, OtherAssetType.SCSS, OtherAssetType.TS],
         templates: {
             // N.B. in icons-20, we don't generate CSS or the codepoints since we expect them to be the same as icons-16
-            scss: path.resolve(__dirname, `./icons-${size}.scss.hbs`),
-            css: path.resolve(__dirname, "./icons.css.hbs"),
+            scss: resolve(scriptsDir, `./icons-${size}.scss.hbs`),
+            css: resolve(scriptsDir, "./icons.css.hbs"),
         },
         pathOptions: {
-            scss: path.join(GENERATED_SRC_DIR, `${size}px`, "_icon-variables.scss"),
+            scss: join(generatedSrcDir, `${size}px`, "_icon-variables.scss"),
         },
         codepoints,
         tag: "i",
@@ -74,6 +79,10 @@ async function generateFonts(size, prefix) {
     });
 }
 
+/**
+ * @param {Promise<import("fantasticon/lib/core/runner").RunnerResults>} runner
+ * @returns {Promise<void>}
+ */
 function connectToLogger(runner) {
     return runner.then(results => logger.results(results)).catch(error => logger.error(error));
 }

package/scripts/{generate-icon-paths.js → generate-icon-paths.mjs}

@@ -15,55 +15,49 @@
 
 /**
  * @fileoverview Generates SVG paths used in <Icon> React components
- * N.B. we expect ../src/generated/ to contain SVG definitions of all the icons already
+ *
+ * Important: we expect ../src/generated/ to contain SVG definitions of all the icons already before this script runs.
  */
 
-const { pascalCase } = require("change-case");
-const fs = require("fs");
-const path = require("path");
+// @ts-check
+
+import { pascalCase } from "change-case";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
 // Note: we had issues with this approach using svgo v2.x, so for now we stick with v1.x
 // With v2.x, some shapes within the icon SVGs would not get converted to paths correctly,
 // resulting in invalid d="..." attributes rendered by the <Icon> component.
-const SVGO = require("svgo");
-
-/**
- * @typedef {Object} IconMetadata
- * @property {string} displayName - "Icon name" for display
- * @property {string} iconName - `icon-name` for IconName and CSS class
- * @property {string} tags - comma separated list of tags describing this icon
- * @property {string} group - group to which this icon belongs
- * @property {string} content - unicode character for icon glyph in font
- */
+import SVGO from "svgo";
 
-/** @type {IconMetadata[]} */
-const ICONS_METADATA = require("../icons.json").sort((a, b) => a.iconName.localeCompare(b.iconName));
-const { RESOURCES_DIR, writeLinesToFile } = require("./common");
+import { iconResourcesDir, iconsMetadata, writeLinesToFile } from "./common.mjs";
 
 const svgo = new SVGO({ plugins: [{ convertShapeToPath: { convertArcs: true } }] });
-const ICON_NAMES = ICONS_METADATA.map(icon => icon.iconName);
 
-(async () => {
-    for (const iconSize of [16, 20]) {
-        const iconPaths = await getIconPaths(iconSize);
+const ICON_NAMES = iconsMetadata.map(icon => icon.iconName);
+
+/** @type {[16, 20]} */
+const ICON_SIZES = [16, 20];
 
-        for (const [iconName, pathStrings] of Object.entries(iconPaths)) {
-            const line =
-                pathStrings.length > 0
-                    ? `export default [${pathStrings.join(", ")}];`
-                    : // special case for "blank" icon - we need an explicit typedef
-                      `const p: string[] = []; export default p;`;
+for (const iconSize of ICON_SIZES) {
+    const iconPaths = await getIconPaths(iconSize);
 
-            writeLinesToFile(`${iconSize}px/paths/${iconName}.ts`, line);
-        }
+    for (const [iconName, pathStrings] of Object.entries(iconPaths)) {
+        const line =
+            pathStrings.length > 0
+                ? `export default [${pathStrings.join(", ")}];`
+                : // special case for "blank" icon - we need an explicit typedef
+                  `const p: string[] = []; export default p;`;
 
-        console.info(`Writing index file for ${iconSize}px icon kit paths...`);
-        writeLinesToFile(
-            `${iconSize}px/paths/index.ts`,
-            ...ICON_NAMES.map(iconName => `export { default as ${pascalCase(iconName)} } from "./${iconName}";`),
-        );
-        console.info("Done.");
+        writeLinesToFile(`${iconSize}px/paths/${iconName}.ts`, line);
     }
-})();
+
+    console.info(`Writing index file for ${iconSize}px icon kit paths...`);
+    writeLinesToFile(
+        `${iconSize}px/paths/index.ts`,
+        ...ICON_NAMES.map(iconName => `export { default as ${pascalCase(iconName)} } from "./${iconName}";`),
+    );
+    console.info("Done.");
+}
 
 /**
  * Loads SVG file for each icon, extracts path strings `d="path-string"`,
@@ -75,8 +69,8 @@ async function getIconPaths(iconSize) {
     /** @type Record<string, string[]> */
     const iconPaths = {};
     for (const iconName of ICON_NAMES) {
-        const filepath = path.join(RESOURCES_DIR, `${iconSize}px/${iconName}.svg`);
-        const svg = fs.readFileSync(filepath, "utf-8");
+        const filepath = join(iconResourcesDir, `${iconSize}px/${iconName}.svg`);
+        const svg = readFileSync(filepath, "utf-8");
         const optimizedSvg = await svgo.optimize(svg, { path: filepath });
         const pathStrings = (optimizedSvg.data.match(/ d="[^"]+"/g) || [])
             // strip off leading 'd="'