Restore bundle size optimization for BlueprintJS icons (#45)

* Move `requiredBlueprintIcons.js` shim into HDU to avoid creating a breaking change dependency with hoist-react, and to generally make this optimization more self-contained.
* Update the shim to conform to Blueprint 4.x requirements.
* Restores a nice reduction in bundle size that was presumably lost back with hoist-react v50's update to BP v4.x.

---------

Co-authored-by: Anselm McClain <[email protected]>

CHANGELOG.md

@@ -2,12 +2,15 @@
 
 ## v7.0.0-SNAPSHOT
 
-* Updated special transformations for the FontAwesome icon dependencies to include their "thin" package, which was added
-  to hoist-react last year and was not being properly tree-shaken.
 * Updated Babel configuration to enable key transforms via preset-env `includes` directive. Resolves issue with outdated
   plugin names in the prior config causing errors like "cannot find package @babel/plugin-proposal-class-properties"
   for apps that updated to Babel 7.22 (several key transforms were released under new names with the 7.22 release -
   see https://github.com/babel/babel/pull/15614).
+* Updated special transformations for the FontAwesome icon dependencies to include their "thin" package, which was added
+  to hoist-react last year and was not being properly tree-shaken.
+* Updated minimal shim for required-only BlueprintJS icons to restore another bundle size reduction that had been lost
+  with the update to Blueprint 4.x back in Hoist React v50. Update required a new path for import transformations and
+  moved the shim file from hoist-react to this project.
 
 ### 📚 Libraries
 

README.md

@@ -116,6 +116,12 @@ own ESLint config by specifying their `.eslintrc` file as simply:
 If required, rules and other settings extended from this base configuration can be overridden at the
 app level.
 
+### Hoist Dev Utils Development
+
+To develop improvements to this library, clone its repo into your workspace alongside a project 
+that uses Hoist-React, like [Toolbox](https://github.com/xh/toolbox).  Then follow the instructions for 
+[yarn link](https://classic.yarnpkg.com/lang/en/docs/cli/link/) to symlink to this repo.
+
 ------------------------------------------
 
 ☎️ [email protected] | <https://xh.io>

configureWebpack.js

@@ -196,7 +196,8 @@ async function configureWebpack(env) {
 
     const srcPath = path.resolve(basePath, 'src'),
         outPath = path.resolve(basePath, 'build'),
-        publicAssetsPath = path.resolve(basePath, 'public');
+        publicAssetsPath = path.resolve(basePath, 'public'),
+        hoistDevUtilsPath = path.resolve(basePath, 'node_modules/@xh/hoist-dev-utils');
 
     // Resolve Hoist as either a sibling (inline, checked-out) project or a downloaded package
     const hoistPath = inlineHoist
@@ -232,10 +233,9 @@ async function configureWebpack(env) {
         copyPublicAssets && fs.existsSync(path.resolve(publicAssetsPath, 'apple-touch-icon.png'));
     if (appleTouchIconExists) logMsg(`  > apple-touch-icon.png`);
 
-    // Resolve Hoist-based path to replacement Blueprint icons (if available, requires HR >= v35.2.
-    const bpIconStubsPath = path.resolve(hoistPath, 'static/requiredBlueprintIcons.js'),
-        bpIconStubsExist = fs.existsSync(bpIconStubsPath),
-        loadAllBlueprintJsIcons = env.loadAllBlueprintJsIcons === true || !bpIconStubsExist;
+    // Resolve path to lightweight shim for Blueprint icons bundled with this project.
+    const bpIconStubsPath = path.resolve(hoistDevUtilsPath, 'static/requiredBlueprintIcons.js'),
+        loadAllBlueprintJsIcons = env.loadAllBlueprintJsIcons === true;
 
     // Resolve path to script for preflight checks. With HR >= v36.1 this routine has been broken
     // out into a standalone JS file to avoid the use of inline script tags. Script will be left
@@ -263,10 +263,7 @@ async function configureWebpack(env) {
 
     // Also get a handle on the nested @xh/hoist-dev-utils/node_modules path - dev-utils dependencies
     // (namely loaders) can be installed here due to the vagaries of node module version / conflict resolution.
-    const devUtilsNodeModulesPath = path.resolve(
-        basePath,
-        'node_modules/@xh/hoist-dev-utils/node_modules'
-    );
+    const devUtilsNodeModulesPath = path.resolve(hoistDevUtilsPath, 'node_modules');
 
     // Determine source map (devtool) mode.
     let devtool;
@@ -624,7 +621,7 @@ async function configureWebpack(env) {
             // Load only the BlueprintJS icons used by Hoist-React components.
             !loadAllBlueprintJsIcons
                 ? new webpack.NormalModuleReplacementPlugin(
-                      /.*\/generated\/iconSvgPaths.*/,
+                      /.*\/@blueprintjs\/icons\/lib\/esm\/iconSvgPaths.*/,
                       bpIconStubsPath
                   )
                 : undefined,

static/README.md

@@ -0,0 +1,5 @@
+# Build-related files
+
+* `requiredBlueprintIcons.js` - included by hoist-dev-utils >= v6.2 as a (very) streamlined replacement for the
+  full set of Blueprint JS icons otherwise required by that library. See the comment at the top of the file for
+  additional details and links.

static/requiredBlueprintIcons.js

@@ -0,0 +1,36 @@
+/**
+ * This file replaces the MUCH larger versions included within the blueprintjs/icons dependency,
+ * which itself is required by Blueprint core. This file is swapped in at build-time by the
+ * `@xh/hoist-dev-utils` webpack config to only bundle the icons required by BP-based Hoist React
+ * components, nicely reducing overall app bundle size.
+ *
+ * For further details, see https://github.com/xh/hoist-react/issues/1963,
+ * and https://github.com/xh/hoist-dev-utils/issues/44.
+ * See the dev-utils `configureWebpack()` method for the implementation referencing this file.
+ */
+export const IconSvgPaths16 = {
+    // used on context menu menuItem when a menu has submenus
+    'caret-right': ['M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z'],
+    // used in datepicker's calendar scroll
+    'chevron-left': ['M7.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C5.11 7.47 5 7.72 5 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L7.41 8z'],
+    'chevron-right': ['M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z'],
+    // used on toast close buttons
+    'cross': ['M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z'],
+    // used on datepicker's month picker
+    'double-caret-vertical': ['M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z'],
+    // used on dialog close buttons
+    'small-cross': ['M9.41 8l2.29-2.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42L6.59 8 4.3 10.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l2.29 2.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z']
+
+};
+export const IconSvgPaths20 = {
+    'caret-right': ['M14 10c0-.31-.15-.57-.37-.76l.01-.01-6-5-.01.01C7.46 4.1 7.24 4 7 4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1 .24 0 .46-.1.63-.24l.01.01 6-5-.01-.01c.22-.19.37-.45.37-.76z'],
+    'chevron-left': ['M8.41 10l5.29-5.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-6 6c-.18.18-.29.43-.29.71 0 .28.11.53.29.71l6 6a1.003 1.003 0 001.42-1.42L8.41 10z'],
+    'chevron-right': ['M13.71 9.29l-6-6a1.003 1.003 0 00-1.42 1.42l5.3 5.29-5.29 5.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l6-6c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z'],
+    'cross': ['M11.41 10l4.29-4.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-4.29-4.3a1.003 1.003 0 00-1.42 1.42L8.59 10 4.3 14.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4.29-4.3 4.29 4.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10z'],
+    'double-caret-vertical': ['M5 9h10c.55 0 1-.45 1-1 0-.24-.1-.46-.24-.63l.01-.01-5-6-.01.01C10.57 1.15 10.31 1 10 1s-.57.15-.76.37l-.01-.01-5 6 .01.01C4.1 7.54 4 7.76 4 8c0 .55.45 1 1 1zm10 2H5c-.55 0-1 .45-1 1 0 .24.1.46.24.63l-.01.01 5 6 .01-.01c.19.22.45.37.76.37s.57-.15.76-.37l.01.01 5-6-.01-.01c.14-.17.24-.39.24-.63 0-.55-.45-1-1-1z'],
+    'small-cross': ['M11.41 10l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L8.59 10 5.3 13.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l3.29-3.3 3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10z']
+};
+
+export function iconNameToPathsRecordKey(name) {
+    return name
+}