Improve treeshaking by setting package.json sideEffects #1332

mattcosta7 · 2021-07-17T14:28:47Z

Adds a sideEffects declaration in package.json to ensure that bundlers can effectively treeshake unused code.

This is especially useful for treeshaking files that simply re-export other files, such as the index.ts entries. Without this change, everything exported in this way is included in the final minified build, since bundlers cannot determine whether it's safe to treeshake those re-exports

2 files seems to contain side effects, related to initializing a polyfill, in focusTrap and focusZone. I added in line comments to this pr denoting those areas

Closes #1331

Merge checklist

I tested this by installing in my project, making these changes locally and then generating a tar from this project and consuming that in my project, verifying that everything seems to work as intended. I don't consume every component though, so additional testing with a canary build would be best to ensure compatibility across the board

Analyzed outputs from my consuming project using source-map-explorer

Before:

After:

…aking

changeset-bot · 2021-07-17T14:28:49Z

🦋 Changeset detected

Latest commit: e756f91

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2021-07-17T14:28:52Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-components/CSrYSvG1M874xzKa8oudmC2NWa75
✅ Preview: https://primer-components-git-fork-mattcosta7-fix-side-effects-primer.vercel.app

mattcosta7 · 2021-07-17T14:32:11Z

package.json

@@ -5,6 +5,10 @@
  "main": "lib/index.js",
  "module": "lib-esm/index.js",
  "typings": "lib/index.d.ts",
+  "sideEffects": [
+    "(lib|lib-esm)/behaviors/focusZone.js",
+    "(lib|lib-esm)/behaviors/focusTrap.js"


This polyfill call is the side effect

mattcosta7 · 2021-07-17T14:32:14Z

package.json

@@ -5,6 +5,10 @@
  "main": "lib/index.js",
  "module": "lib-esm/index.js",
  "typings": "lib/index.d.ts",
+  "sideEffects": [
+    "(lib|lib-esm)/behaviors/focusZone.js",


This polyfill call is the side effect

mattcosta7 · 2021-07-17T14:37:58Z

package-lock.json

@@ -1,6 +1,6 @@
 {
  "name": "@primer/components",
-  "version": "28.2.3",
+  "version": "28.2.5",


this just pulled the version number forward to the package-lock, since it appears it wasn't updated when the last version numbers were bumped

colebemis

Thank you, @mattcosta7 ❤️

* fix: mark sideEffects free * fix: update sideEffects delcaration in package.json to improve treeshaking * fix: update sideEffects delcaration in package.json to improve treeshaking * fix: BaseStyles doesnt use sideeffects * chore: add changeset

* add utility props to Box * update box docs * export box props * update snapshots * Create green-worms-nail.md * AvatarStack story in storybook * Update .changeset/green-worms-nail.md Co-authored-by: Cole Bemis <colebemis@github.com> * Update docs/content/Box.md Co-authored-by: Cole Bemis <colebemis@github.com> * Remove duplicate border system prop definitions * Remove duplicate grid system props definitions * Update FlexProps definition * Remove duplicate position system prop definitions * Update Box documentation * Update BoxProps * Update Box docs * Update Box props * fix: Type 'DropdownButton' as 'button' (#1318) * fix: Type 'DropdownButton' as 'button' * chore: Update snapshots * chore: Set test directory via config rather than flag (#1319) * feat(useFocusZone): update active-descendant on mousemove (#1308) * fix: Split `<Item>` labels (#1320) * fix: Separate 'Item' content into 'label' and 'description' * fix: Only add 'aria-describedby' when 'description' exists * fix: Memoize 'id' so 'Item's and labels match * fix: Don’t rely on 'id' which is possibly not globally-unique * fix: Restore semi-full-width 'Item' dividers, without giving up the semantic nesting. By “semantic nesting”, I mean that the 'Item' label and description are now siblings, which is preferable to the previous implementation, where the description node was a child of the label node. As a general principle, we should align DOM hierarchies with information hierarchies. An analogy: If I were using a bulleted list to describe a dog, I would not indent its breed as a second-level bullet beneath the bullet for its name, because a dog’s breed is not dependent/derived data from its name. Similarly, description is not dependent/derived from label, and so should not be nested in DOM. * fix: Reduce styled-components class permutations. https://www.joshwcomeau.com/css/styled-components/ * feat(Overlay): slide away from anchor based on position (#1322) * feat(Overlay): slide away from anchor based on position * fix: handle position changes when re-opening AnchoredOverlay * refactor: use js animation for slide to fix safari * fix: Tests were failing with Axe violations - https://dequeuniversity.com/rules/axe/4.1/aria-dialog-name - https://dequeuniversity.com/rules/axe/4.2/presentation-role-conflict - https://www.w3.org/TR/wai-aria-practices-1.1/examples/menu-button/menu-button-links.html First, 'Overlay's aren’t 'listbox'es, because (when used in 'DropdownMenu' or 'ActionMenu') they contain 'menuitem's, 'menuitemradio's, or 'menuitemcheckbox'es. Second, 'Overlay's aren’t 'dialog's, because (as demonstrated in the WAI ARIA practices page linked above), 'menu's need not be contained in a 'dialog', and also (as noted in the 'aria-dialog-name' link above), 'dialog's must have an 'aria-label', 'aria-labelledby', or 'title', but neither 'DropdownMenu' nor 'ActionMenu' have any kind of header element that could be used for this. Third, if 'Overlay's are 'none', they can’t be focusable (as noted in the 'presentation-role-conflict' link above), but one of our hooks (maybe 'FocusTrap', maybe 'FocusZone') was setting 'tabIndex' to '0' (in the test component), because it did not contain a focusable child. This PR adds a focusable button child so the 'none' 'Overlay' container won’t receive 'tabIndex' '0'. * fix: Resolve lint errors Co-authored-by: Clay Miller <clay@smockle.com> * Generate prop documentation (#1323) * Add new filesystem source * Add component metadata type * Create Props component * Update props table * Handle empty and error states * Add required label * Update required prop styles * Clean up code comments * Remove filesystem plugin * Remove extra markdown file * Add component comment Co-authored-by: Clay Miller <clay@smockle.com> * Improve treeshaking by setting package.json sideEffects (#1332) * fix: mark sideEffects free * fix: update sideEffects delcaration in package.json to improve treeshaking * fix: update sideEffects delcaration in package.json to improve treeshaking * fix: BaseStyles doesnt use sideeffects * chore: add changeset * Update Box documentation * Update BoxProps * Update Box docs * Update Box props * Remove AvatarStack story * Update .changeset/green-worms-nail.md Co-authored-by: Cole Bemis <colebemis@github.com> Co-authored-by: Clay Miller <clay@smockle.com> Co-authored-by: Dusty Greif <dgreif@users.noreply.github.com> Co-authored-by: Matthew Costabile <mattcosta7@github.com>

mattcosta7 added 3 commits July 15, 2021 18:36

fix: mark sideEffects free

f95d318

fix: update sideEffects delcaration in package.json to improve treesh…

05cef34

…aking

fix: update sideEffects delcaration in package.json to improve treesh…

929b8bf

…aking

vercel bot temporarily deployed to Preview July 17, 2021 14:28 Inactive

fix: BaseStyles doesnt use sideeffects

9bd047a

mattcosta7 commented Jul 17, 2021

View reviewed changes

vercel bot temporarily deployed to Preview July 17, 2021 14:33 Inactive

mattcosta7 commented Jul 17, 2021

View reviewed changes

chore: add changeset

e756f91

vercel bot temporarily deployed to Preview July 17, 2021 14:42 Inactive

mattcosta7 changed the title ~~Fix/side effects~~ Improve treeshaking by setting package.json sideEffects Jul 17, 2021

colebemis approved these changes Jul 19, 2021

View reviewed changes

colebemis merged commit ec11d7b into primer:main Jul 19, 2021

github-actions bot mentioned this pull request Jul 19, 2021

Release Tracking #1324

Merged

mattcosta7 mentioned this pull request Dec 11, 2021

Add side effects false to package.json #1719

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve treeshaking by setting package.json sideEffects #1332

Improve treeshaking by setting package.json sideEffects #1332

mattcosta7 commented Jul 17, 2021 •

edited

Loading

changeset-bot bot commented Jul 17, 2021 •

edited

Loading

vercel bot commented Jul 17, 2021 •

edited

Loading

mattcosta7 Jul 17, 2021

mattcosta7 Jul 17, 2021

mattcosta7 Jul 17, 2021

colebemis left a comment

Improve treeshaking by setting package.json sideEffects #1332

Improve treeshaking by setting package.json sideEffects #1332

Conversation

mattcosta7 commented Jul 17, 2021 • edited Loading

Merge checklist

changeset-bot bot commented Jul 17, 2021 • edited Loading

🦋 Changeset detected

vercel bot commented Jul 17, 2021 • edited Loading

mattcosta7 Jul 17, 2021

Choose a reason for hiding this comment

mattcosta7 Jul 17, 2021

Choose a reason for hiding this comment

mattcosta7 Jul 17, 2021

Choose a reason for hiding this comment

colebemis left a comment

Choose a reason for hiding this comment

mattcosta7 commented Jul 17, 2021 •

edited

Loading

changeset-bot bot commented Jul 17, 2021 •

edited

Loading

vercel bot commented Jul 17, 2021 •

edited

Loading