chore: add verify-bundle-isolation to workspace plugin, cleanup deps and onboard react-components to track base hooks creep - #36587
Merged
Martin Hochel (Hotell) merged 2 commits intoAug 24, 2026
Conversation
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
BaseHooks.fixture.js imports all 103 use*Base_unstable hooks from the 39 suite dependencies that export them. Named imports, since a namespace import would retain every styled component and defeat the check. Baselines what base hooks currently drag in as tracked debt: tabster (55 modules across 22 packages, via useArrowNavigationGroup and useFocusFinders), Griffel (react-combobox Listbox styles, react-positioning SafeZoneArea) and react-motion (react-nav useNavCategoryItem). The four styled monosize fixtures in the same folder are left unlisted, so they are measured for bytes without being held to an isolation guarantee they were never meant to carry.
Martin Hochel (Hotell)
force-pushed
the
chore/bundle-isolation-react-components
branch
from
August 19, 2026 17:49
75847d1 to
27d1495
Compare
The target was copy-pasted into each consuming project.json, and each consumer
declared the tool as a devDependency purely to create an nx graph edge so cache
and affected stayed correct.
The plugin now infers the target from the presence of bundle-isolation.config.json,
the same way bundle-size is inferred from a bundle-size directory, and a
{workspaceRoot} input on the tool covers both cache invalidation and affected -
the convention already used by the rit targets. Both devDependencies go away.
Martin Hochel (Hotell)
changed the title
Victor Genaev (mainframev)
approved these changes
Aug 21, 2026
Martin Hochel (Hotell)
deleted the
chore/bundle-isolation-react-components
branch
August 24, 2026 09:17
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Previous Behavior
@fluentui/react-componentshad no bundle isolation guarantee —bundle-size/BaseHooks.fixture.jscontained only// TODO add all base hooks.The
verify-bundle-isolationtarget was also copy-pasted into each consumingproject.json, and each consumer declared the tool as a devDependency purely to create an Nx graph edge so cache andaffectedstayed correct.New Behavior
1. Base hooks are now guarded
BaseHooks.fixture.jsimports all 103use*Base_unstablehooks from the 39 suite dependencies that export them, enumerated from theetc/*.api.mdrollups.Named imports are deliberate — a namespace import would retain every styled component and make the check meaningless. The narrow result (11 Griffel modules, not 200+) confirms tree shaking works and the findings below are real reachability.
Forbidden:
tabster,@griffel/*,@fluentui/react-icons,@fluentui/react-motion.The base hooks are not clean. Three violations, recorded as tracked debt rather than fixed here:
tabsterreact-tabster/lib/hooks/useTabster.js— 55 base-hook modules across 22 packages, mostlyuseArrowNavigationGroup/useFocusFinders. e.g.useToolbarBase_unstablecallsuseArrowNavigationGroupdirectly.@griffel/*react-combobox/.../Listbox/useListboxStyles.styles.js,react-positioning/.../SafeZoneArea.styles.js@fluentui/react-motionreact-nav/.../useNavCategoryItem.js(createPresenceComponentVariant)Griffel and motion look like bugs — a base hook should not reach a
*.styles.js. tabster is a design question: base hooks own keyboard/focus behaviour and tabster is that layer, so it may not belong inforbiddenPackagesfor this suite at all. Worth deciding before anyone tries to pay that debt down.The four monosize fixtures in the same folder stay unlisted — still measured for bytes, not held to a guarantee they were never meant to carry. They report as
SKIPPED.2. The target is inferred by the workspace plugin
buildVerifyBundleIsolationTargetkeys off the presence ofbundle-isolation.config.json, exactly asbuildBundleSizeTargetkeys off abundle-size/directory. Bothproject.jsonblocks and both devDependencies are deleted; adding a config file is now the entire setup.A
{workspaceRoot}/tools/verify-bundle-isolation/**input replaces the graph edge for both cache invalidation andaffected— the convention therittargets already use. Verified: with no graph edge to the tool, both consumers still appear innx show projects --affected --files=tools/verify-bundle-isolation/src/report.ts.Verification
react-components→PASS WITH DEBT - 1 fixture, 4 skipped, 0 regressions, 4 allowed violations; preview →PASSreact-buttonif (false)) fails itsourceResolvedempty on every fixture, proving built output was bundled@fluentui/react-iconsimport in the fixture producesREGRESSION+ exit 1Related Issue(s)