Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Restore bundle size optimization for BlueprintJS icons #45

Merged
merged 10 commits into from
May 31, 2023
7 changes: 5 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
6 changes: 6 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
17 changes: 7 additions & 10 deletions configureWebpack.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down
5 changes: 5 additions & 0 deletions static/README.md
Original file line number Diff line number Diff line change
@@ -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.
36 changes: 36 additions & 0 deletions static/requiredBlueprintIcons.js
Original file line number Diff line number Diff line change
@@ -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
}