h5web icon indicating copy to clipboard operation
h5web copied to clipboard

Refactor export menu with new headless UI library

Open axelboc opened this issue 1 year ago • 4 comments

react-aria-menubutton is no longer maintained. It is still on React 17 and CommonJS, which is causing issues in our Cypress tests and for consumer applications.

In this PR, I'm starting the migration to another headless UI library called Ariakit, which seems like a well-maintained, featureful, Typescript-first library. I've considered and discarded other options:

  • React Aria from Adobe — I'm not a fan of the fact that it renders class names by default;
  • Headless UI from Tailwind — the number of components is quite limited, which might be a hindrance in the future;
  • Reach UI — no longer maintained

I'll continue the migration in separate PRs.

axelboc avatar Feb 07 '24 15:02 axelboc

I'll investigate the strange failing tests tomorrow...

axelboc avatar Feb 07 '24 15:02 axelboc

/approve

axelboc avatar Mar 26 '24 14:03 axelboc

Upgrading to the latest version of ariakit solved the error I was having in the tests.

Sweet !

loichuder avatar Mar 26 '24 15:03 loichuder

On hold, as I noticed that this PR increases the bundle size by more than 100 kB, which seems highly unreasonable for just a popover menu. I'll investigate.

axelboc avatar Apr 04 '24 09:04 axelboc

I've tried with React Aria (in branch react-aria) and I get an increase of 185 kB ... still by refactoring only the Export menu.

Mind blowing...

axelboc avatar May 07 '24 13:05 axelboc

Superseded by #1642

axelboc avatar May 16 '24 09:05 axelboc