diff --git a/CHANGELOG.md b/CHANGELOG.md index 79c7a17..c1c57d4 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index 3d9029b..bf05d07 100644 --- a/README.md +++ b/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. + ------------------------------------------ ☎️ info@xh.io | diff --git a/configureWebpack.js b/configureWebpack.js index 01092f3..04fe060 100644 --- a/configureWebpack.js +++ b/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, diff --git a/static/README.md b/static/README.md new file mode 100644 index 0000000..255253e --- /dev/null +++ b/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. diff --git a/static/requiredBlueprintIcons.js b/static/requiredBlueprintIcons.js new file mode 100644 index 0000000..9a0960d --- /dev/null +++ b/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 +} \ No newline at end of file