đ ď¸ Function libraries, customizable overlays, and user properties
Functions and utility libraries
For those times when you just want to sprinkle in a bit of code into your designâyou can now access some common npm library functions such as lodash, dayjs, date-fns, uuid, and many more.
Simply add the library youâre interested in from the insertion menu under Code Libraries, and call into it with the $$ prefixâfor instance, to generate a random UUID:
$$.uuid.v4()
Plus, much like how you can register code components from your codebaseâyou can register your own functions as well, with PLASMIC.registerFunction()!
Like the built-in code components, the built-in libraries also support tree-shaking optimizations, so unused functions wonât add to the bundle size of page.
Customizable overlays
You can now insert popovers, tooltips, dialogs, and drawers that you can completely customize the look and feel of! This includes customizable entrance and exit animations, and they are built with accessibility in mind.
These add to Plasmicâs collection of customizable (âheadlessâ) components, alongside Select, Text Input, Button, Switch, and Checkbox. With these, you can completely change their look and create bespoke design systems that are functional and highly accessible.
Under the hood, these are powered by the React Aria and Radix UI libraries, and default to styling based on shadcn/ui.
More headless components to come, so tell us what youâd like to see!
User custom properties and user setup
When building apps with user logins, you have access to a âcurrentUserâ variable that provides the userâs email and roles.
However, many applications also have other per-user data, such as detailed profile data, team associations, etc. This is often stored in a database row per user.
Itâs now possible to have this additional user data always directly available on the âcurrentUserâ variable. This way, you donât have to always manually add separate backend queries for this data on every page/componentâthe data will always be fetched and made available.
Furthermore, with the Condition Guard component, you can create flows in your application that direct users to first complete some setup process, for instance to fill out their name and profile information before admitting them further into the application.
Check out the docs and video walkthroughs!
And more
CMS API now supports limit and offset params, and supports a count endpoint that returns the number of records matching a query
Generated code now has significantly shorter CSS class names, resulting in 20% smaller uncompressed payloads
Many more bug fixes and improvements!
Thatâs a wrap! Go play with the latest changes and tell us what you think!