Sign in

Devon Govett

@devongovett.me
4.3K followers 78 following 504 posts

I write javascript

PostsRepliesMedia
Devon Govett @devongovett.me · 01/09/2026
New React Aria release! 🧭 New NavigationTree component, perfect for sidebars. Supports expandable items, sections, keyboard navigation, action buttons, etc. ⌛️ Menu async load more 📝 TokenField selection updates 📱 iOS overlay positioning fixes react-aria.adobe.com/releases/v1-...
Screenshot of NavigationTree showing a list with Home, Files expanded with Photos and Videos nested, and Shared which is not expanded. Each item has an action menu.
0223
Devon Govett @devongovett.me · 27/08/2026
Unfortunately Firefox does not support mask-clip: text. There is an alternative using the non-standard -moz-element() function but this appears to disable GPU acceleration.
130
Devon Govett @devongovett.me · 27/08/2026
Text shimmer animations are usually very CPU intensive (~20% for one line of text). Animating background-position is not GPU accelerated, so the browser re-paints every frame. I found an alternative using a CSS mask which only animates a transform. Down to < 2% CPU usage. codepen.io/editor/devon...
2484
Devon Govett @devongovett.me · 19/08/2026
Fun CSS demo I built today: automatically compute a partially transparent white or black color that meets a target WCAG contrast ratio against an arbitrary background color. No JavaScript needed. 😃 codepen.io/editor/devon...
1406
Devon Govett @devongovett.me · 07/08/2026
Are you planning to expose compiler APIs in Go as well? Parcel 3 supports native plugins and I was experimenting with compiling TS via cgo but I had to fork it to access some internal modules.
100
Devon Govett @devongovett.me · 31/07/2026
New React Aria components! 🚀 🔗 PreviewTrigger – build accessible hover popovers 🐭 Context menu trigger for mouse, keyboard, and touch 🪙 TokenField (alpha) – a text input with inline tokens 📋 Editable table cells 🎹 Keyboard shortcuts 🪝 New hook docs react-aria.adobe.com/releases/v1-...
2515
Devon Govett @devongovett.me · 17/07/2026
Exciting news: React Aria is now a first-class component base in shadcn/ui! Initialize a new project with `--base aria`, or use shadcn/create to build and customize your own component library. ui.shadcn.com/docs/changel...
screenshot of shadcn/create showing supported component libraries: Base UI, React Aria, and Radix UI.
4724
Devon Govett @devongovett.me · 27/06/2026
Can you post on that issue a list of ones you use and why? We started by marking everything that was exported but undocumented as private but can consider making things public if there are good reasons.
100
Devon Govett @devongovett.me · 21/06/2026
IMO navigation is a destructive action that could cause you to lose state so the preview card being available to all is an important accessibility feature. Long press definitely seems like the standard way to do it on touch devices.
010
Devon Govett @devongovett.me · 18/06/2026
React Aria Components v1.19.0 is out! ✨ Autocomplete supports inline completions (e.g. mentions), and a new Popover API enables positioning relative to the cursor. Also, text inputs can now be nested in GridList and Tree without breaking arrow key navigation! react-aria.adobe.com/releases/v1-...
1322
Devon Govett @devongovett.me · 28/05/2026
React Aria release! 📆 Calendar multi-select, week/day views, month/year pickers, weeksInMonth ⚓️ RangeCalendar unavailable anchor date ✅ Checkbox/Radio/Switch description and error message 👢 TableFooter ⛽️ SliderFill 💯 Non-object collection items 🧪 New test utils react-aria.adobe.com/releases/v1-...
0453
Devon Govett @devongovett.me · 18/05/2026
Lol it did port the code back to rust and now it looks very similar to lightningcss 😅
0160
Devon Govett @devongovett.me · 17/05/2026
Finally had time to write up some thoughts on what I need help with and the project philosophy: github.com/parcel-bundl...
github.com
Improving lightningcss maintenance - please help! · parcel-bundler lightningcss · Discussion #1241
Lightning CSS usage has skyrocketed in the last year. It is now used in almost every major modern build tool, including Next.js, Vite, Rspack, Tailwind, Parcel, Bun (a port), etc. npm downloads hav...
1110
Devon Govett @devongovett.me · 07/05/2026
Dude, are you in my head reading my mind? 😅 I feel so many of the same things. I’m a bit behind though, still kinda stuck in part 5. Really hard to let go of the craft.
2100
Devon Govett @devongovett.me · 15/04/2026
We consolidated our packages to reduce dependencies by over 90%, making future upgrades much easier, and improving tree shaking, build times, component discoverability, and micro-frontend support. Learn more about the migration process in the release notes! react-aria.adobe.com/releases/v1-...
react-aria.adobe.com
v1.17.0 | React Aria
This release brings support for several long-awaited features, including support for expandable rows in Table, window scrolling in Virtualizer, and horizontally virtualized GridLists and ListBoxes. We...
060
Devon Govett @devongovett.me · 15/04/2026
Expandable table rows enable a macOS Finder-like combination of a tree and a table, integrating with keyboard navigation, selection, and drag and drop.
1110
Devon Govett @devongovett.me · 15/04/2026
Huge React Aria release! 🏝️ Expandable table rows 📉 90% fewer dependencies 🔥 Sub-path imports – improved tree shaking, faster builds, and easier discoverability 🪟 Virtualizer window scrolling ➡️ GridList horizontal orientation 💾 NumberField and RangeCalendar commit behavior
1657
Devon Govett @devongovett.me · 28/03/2026
The namespace for “react-aria-components” includes everything though, even stuff you wouldn’t use in a ComboBox. “react-aria-components/ComboBox” only includes ComboBox related components.
010
Devon Govett @devongovett.me · 28/03/2026
The ComboBox subpath only includes components that are part of a ComboBox. For example Table is not included, but Input is.
120
Devon Govett @devongovett.me · 28/03/2026
A free side-benefit of subpath imports is that you can easily discover what child components are supported using TypeScript autocomplete.
Code example:

import * as RAC from 'react-aria-components/ComboBox';

<RAC.ComboBox>
  <RAC.Label>Label</RAC.Label>
  <RAC.Input />
  <RAC.Button />
  <RAC.FieldError />
  <RAC.Popover>
    <RAC.ListBox>
      <RAC.ListBoxItem>Item</RAC.ListBoxItem>
      <RAC.ListBoxItem>Item</RAC.ListBoxItem>
    </RAC.ListBox>
  </RAC.Popover>
</RAC.ComboBox>
3321
Devon Govett @devongovett.me · 25/03/2026
Our own. We consolidated individual packages for each component down into one with subpaths. This RFC has all the details: github.com/adobe/react-...
github.com
260
Devon Govett @devongovett.me · 25/03/2026
Depends on your bundler. Most of them do a pretty good job already, but some setups (e.g. micro frontend environments) don't. Subpaths can also improve build performance by letting the bundler parse less code, but again, that depends.
120
Devon Govett @devongovett.me · 25/03/2026
This has been an absolute nightmare to test against every bundler both old and new, with different typescript settings, jest configs, using scoped packages and not, etc. Months of work to make it a backwards compatible opt-in update. I hope it's worth it! 😅
1301
Devon Govett @devongovett.me · 25/03/2026
The next version of React Aria has 90% fewer dependencies (from 127 down to just 13). It also supports subpath imports, e.g. "react-aria-components/Button". This means easier upgrades, faster builds, more effective tree shaking, and improved micro-frontend support. 🚀
41053
Devon Govett @devongovett.me · 12/03/2026
Now that Lightning CSS is a core ecosystem dependency, I need to improve this. I'll be reaching out to these tools soon to try to bring on representatives as maintainers. If you're interested, please reach out as well. Hopefully we can get a good core team established and speed up the process a bit.
4211
Devon Govett @devongovett.me · 12/03/2026
This is incredible, but tbh I could use some help with maintenance. I appreciate sponsorships, but unfortunately this does not magically create more time for me to work on it. CSS is evolving quickly and it's hard to keep up with everything as a solo dev. I'm sorry if my slowness has affected you.
2211
Devon Govett @devongovett.me · 12/03/2026
Looks like Vite 8 is using Lightning CSS as the default CSS minifier! Most next-generation build tools are now using it, including Turbopack, Rspack, Tailwind, Parcel, Bun (a port), and now Vite. ⚡️
Lightning CSS is now used for CSS minification by default. You can use the build.cssMinify: 'esbuild' option to switch back to esbuild. Note that you need to install esbuild as a devDependency.
21555
Devon Govett @devongovett.me · 11/03/2026
Interesting, even for long term maintenance? Do you plan to keep the JS version as the source of truth and continuously port changes to Rust, or only maintain the Rust version in the future?
110
Devon Govett @devongovett.me · 11/03/2026
Oh sweet! Just curious - did you end up trying static Hermes for this?
100
Devon Govett @devongovett.me · 04/03/2026
Multi-select ComboBox was one of our most requested features. It works just like Select: set selectionMode=multiple, and use the ComboBoxValue component to render the selected values. You can show a TagGroup, a textual list, or any custom component. react-aria.adobe.com/ComboBox#tag...
<ComboBox>
  <Input />
  <ComboBoxValue>
    {({selectedItems}) => (
      <TagGroup items={selectedItems}>
        {item => <Tag>{item.name}</Tag>}
      </TagGroup>
    )}
  </ComboBoxValue>
<ComboBox>
050
Devon Govett @devongovett.me · 04/03/2026
New React Aria release! ✅ Multi-select ComboBox with customizable selection rendering (e.g. TagGroup) 🏝️ Tree sections – create labeled groups of items 💯 Better NumberField paste handling 📆 Improved Calendar month and year dropdown behavior 🐞 Lots of bug fixes! react-aria.adobe.com/releases/v1-...
3424
Devon Govett @devongovett.me · 28/02/2026
All of these issues apply to popover too. In many cases, popovers _are_ dialogs from an a11y pov. Again, it’s great if all your deps use top layer.
010
Devon Govett @devongovett.me · 28/02/2026
For example, if top layer had been defined such that it rendered in the same z-index stacking context as the body, it could interoperate with pre-existing overlays (essentially acting like a native portal instead of a whole separate layer).
000
Devon Govett @devongovett.me · 28/02/2026
Yes as I said in the post if all of your dependencies use top-layer, and you don't care about the user's browser extensions, it's good. It's a chicken and egg problem. Ideally the CSS standards would create an easier migration path.
210
Devon Govett @devongovett.me · 27/02/2026
This can totally be implemented using existing patterns. Dialogs themselves don't have to be modal. You can have multiple dialogs open at once all of which are visible and interactive simultaneously. Basically these layers: - app (inert) - modal backdrop - dialog - dialog
030
Devon Govett @devongovett.me · 27/02/2026
From a purely technical perspective that's correct but it's also pretty user-hostile. There's no real accessibility problem with these exceptions - screen readers simply see the extra content as visible like a sighted user would. The "modal" is all content above the backdrop, not just the dialog.
260
Devon Govett @devongovett.me · 27/02/2026
I think toasts are a pretty common one that should live above dialogs. Also support chat widgets or even AI assistants these days might need to be accessed even while dialogs are opened.
140
Devon Govett @devongovett.me · 27/02/2026
I'm often asked why you would use a JS library like React Aria for modals instead of the HTML <dialog> element, so I wrote up a detailed response. One of the main features of <dialog> (top layer) is also one of its weaknesses. github.com/adobe/react-...
github.com
Modal a11y · adobe react-spectrum · Discussion #9696
Hi, I have 2 questions related to the Modal component. In the documentation example, I tells us to use <Dialog> inside the modal. Why is it internally a <section role="dialog"> instead of a <dialog...
4629
Devon Govett @devongovett.me · 26/02/2026
Macros allow you to generate JS values, functions, and even assets like CSS at build time. The result is inlined into the compiled JS bundle. parceljs.org/features/mac... We use macros for React Spectrum's CSS-in-JS library to generate atomic CSS at build time.
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<div className={style({backgroundColor: 'red-400', color: 'white'})}>
  {/* ... */}
</div>
070
Devon Govett @devongovett.me · 26/02/2026
unplugin-parcel-macros brings Parcel's build-time macro support to other bundlers, including Vite, Webpack, Rollup, and Esbuild. v0.2.0 adds support for WASM, so it works in browser environments like Stackblitz too! github.com/devongovett/...
import regexgen from 'regexgen' with {type: 'macro'};

// Compile a regex at build time.
// The output is inlined into the bundle.
const regex = regexgen(['foobar', 'foobaz', 'foozap', 'fooza']);
3232
Devon Govett @devongovett.me · 04/02/2026
Install the new React Aria agent skills to help your AI coding tools access the docs: $ npx skills add react-aria.adobe.com
010
Devon Govett @devongovett.me · 04/02/2026
The `render` prop receives DOM props and component state, allowing you to render router links with pre-fetching support, drive animations, reuse your existing presentational components, etc. react-aria.adobe.com/customizatio...
import {Button} from 'react-aria-components';
import {motion} from 'motion/react';

<Button
  render={(domProps, {isPressed}) => (
    <motion.button
      {...domProps}
      animate={{scale: isPressed ? 0.9 : 1}} />
  )}>
  Press me
</Button>
130
Devon Govett @devongovett.me · 04/02/2026
New React Aria release! 🎁 New `render` prop – customize DOM element, integrate router links & animation libraries 📆 Improved DateField UX – constrain invalid dates on blur instead of while typing 🤖 Agent skills 🔎 Improved doc search 🐞 80+ bug fixes react-aria.adobe.com/releases/v1-...
react-aria.adobe.com
v1.15.0 | React Aria
New year, new release, and the shine hasn’t worn off from our new documentation website! This month’s release includes expanded customization options via a new render prop, greater input flexibility i...
1375
Devon Govett @devongovett.me · 23/01/2026
You can also: • Render framework link components with support for pre-fetching. • Reuse presentational components with styles and behaviors. We implemented a few guardrails to help avoid breaking behavior/a11y. See all the details and leave your feedback on the PR: github.com/adobe/react-...
github.com
feat: Add `render` prop to allow customizing DOM element by devongovett · Pull Request #9499 · adobe/react-spectrum
Closes #5476, closes #5321, closes #9470, closes #9450 This adds an often-requested feature: the ability to customize the element rendered by React Aria Components and merge behavior/styles with cu...
081
Devon Govett @devongovett.me · 23/01/2026
In the next version of React Aria Components, you can use the `render` prop to customize the rendered DOM element. This also receives the component state, which makes it easy to drive animations.
import {Button} from 'react-aria-components';
import {motion} from 'motion/react';

<Button
  render={(domProps, {isPressed}) => (
    <motion.button
      {...domProps}
      animate={{scale: isPressed ? 0.9 : 1}} />
  )}>
  Press me
</Button>
3551
Reposted by Devon Govett
Firefox for Web Developers @webdevs.firefox.com · 13/01/2026
Firefox 147 just landed & it's pretty huge in terms of web features: 🎉 CSS anchor positioning 🎉 The navigation API 🎉 View transition types 🎉 Brotli support in Compression/DecompressionStream 🎉 CSS module imports And more! developer.mozilla.org/en-US/docs/Mo…
developer.mozilla.org
Firefox 147 release notes for developers (Beta) - Mozilla | MDN
This article provides information about the changes in Firefox 147 that affect developers. Firefox 147 is the current Beta version of Firefox and ships on January 13, 2026.
933065
Devon Govett @devongovett.me · 07/01/2026
Looks like the React Conf talks are up! Here's mine where I attempted to explain how React Server Components actually work in ~10 minutes. 😅 www.youtube.com/watch?v=E6A2...
youtube.com
How Parcel Bundles React Server Components
YouTube video by React Conf
0151
Devon Govett @devongovett.me · 05/01/2026
One thing I'd say is that the overhead of tracking everything is not free. I think it makes sense if you have slow compilation steps, or need very low latency (e.g. IDE autocomplete). But if transforms are fast already, then the bookkeeping overhead becomes noticeable.
020
Devon Govett @devongovett.me · 04/01/2026
Parcel v2 was implemented like this. We call them requests, and they are all tracked in a graph. Only requests with changed dependencies re-run. Turbopack takes this even further, with super granular function-level tracking.
170
Devon Govett @devongovett.me · 30/12/2025
It supports some TypeScript/Flow types as well. I didn’t get this working yet but someone shared a benchmark showing it was ~10x faster with types than without.
160