Componentry V4.1 🆙

Componentry V4.1 upgrades the library utility prop API. The entire set of resources for utility props has been consolidated, improved, and made available outside the library.

V4.1 improvement highlights:

• Transforming utility props to utility classes is 15x-50x faster
• Adds support for arbitrary values in utility props
• New utility props: borderRadius, boxShadow, flexGrow, flexShrink, zIndex
• Consolidates border utility API and provides a Tailwind plugin for border styles
• Adds a Theme type for TS users and a createTheme fn to simplify theme creation
• Adds a ComponentryProvider context provider for accessing theme in components

Utility props performance

Transformation of utility props to utility classes is 15x-50x faster depending on the number of utility props used by a component. This was actually a simple update in the library to use a switch statement to assemble classes instead of using clsx to generate them.

Even though it was a simple update the impact is huge, components now have an even smaller runtime overhead than before. For a component tree with 1500 components, the additional time to mount, and to rerender are ~10ms and ~15ms compared to a simple component using a static className.

This means that Componentry components like Block, Flex, and Text can be used to create consistent layouts and typography with an almost-nothing performance impact.

Theming upgrades

Utilities related to application theming are now more available and more configurable. A new utility, createTheme provides the same mechanism for merging theme customizations with Componentry defaults as previously provided, now with control over when that occurs.

Explicitly creating the theme allows using the new ThemeProvider context component along with the useTheme hook to create a single theme used by the PostCSS styles plugin and application components.

For the created theme a new type, Theme, is available. Module augmentation is supported with Theme to enable TS users to work with a type safe theme API.