Repository navigation
perf(ui): make @rozenite/ui tree-shakeable - #557
Merged
Merged
Conversation
Compound components are built with a top-level Object.assign(Root, {...}).
Rollup cannot prove that call side-effect free, so importing any one
component from @rozenite/ui kept every compound component and the
@base-ui/react modules behind them. Annotate those calls (and the cva /
createContext / cn calls at module scope) with /* @__PURE__ */ so bundlers can
drop the ones a consumer never uses.
cva() base classes, the Text label variant and the control surfaces still called cn() at module scope, which kept tailwind-merge in every bundle even for a consumer that only imports a token such as sizeHeight (13.6 kB gzip, now 0.1 kB).
Only the stylesheets have side effects, so bundlers may drop any other module the consumer does not use.
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
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.
Description
@rozenite/uiis now tree-shaken in plugin builds: a panel bundles only the components it uses./* @__PURE__ */. That covers 21 compound components built withObject.assign(Root, { … }), 11cva(...), 6createContext(...), thecn(...)calls nested incvaarguments, and onenew Set. The annotations survive intodist/index.js.sideEffects:"sideEffects": ["*.css"]inpackage.json, sostyles.cssandfonts.cssstay side-effectful.src/tree-shaking.test.tsbundles the built package with Vite's production build.Button-only entry may contain only thebuttoncomponent, under 20 kB gzipped.No component code or API changed.
Related Issue
Closes #556
Context
Before this, importing only
Buttonbundled 96 of the library's 124 component parts and their@base-ui/reactdependencies.ButtonDialogReal panels, gzipped JS from forced builds:
preserveModules(one file per component) was evaluated but not adopted.distinstead of 3. It can be a follow-up if those users matter.Testing
git fetch origin main && pnpm checks:affected && pnpm test:affected: passed. The new test takes about 2–3 s and has a 60 s timeout, so it doesn't flake when Turborepo runs suites in parallel.pnpm release:plan: passed.dist(not the source alias) and compared with the source build. Dialog, Tabs, Sidebar, Menu, Toast, Split, Select, ConfirmDialog, and the Design refresh panel in dark and light give identical screenshots.