ariakit Ariakit Solid

This issue tracks the progress of the implementation of Ariakit Solid, a port of Ariakit React to Solid.

[!IMPORTANT]

The current batch of work is happening at https://github.com/ariakit/ariakit/pull/4378

[!TIP]

If you want to contribute, please read the contributing guide and this GitHub discussion

Milestones

"🟡" means "currently in progress"

[x] https://github.com/ariakit/ariakit/pull/4116 - extremely limited functionality - ⚠ DON'T USE ⚠
[ ] 🟡 Polish foundations: prop chaining pattern, polymorphism, contributing guide, etc.
[ ] 🟡 "Basic" primitives: implement the simpler and more low-level primitives.
[ ] Examples and test: set up the infrastructure to create examples and tests, similar to Ariakit React.
[ ] Benchmarking: set up performance testing infrastructure, possibly with comparisons to Ariakit React and/or other Solid UI components.
[ ] "Advanced" primitives: implement the more complex primitives that depend on lower-level primitives.
[ ] Website: integrate the Solid flavor into the website, in the form of documentation, guides, examples, etc.
[ ] Alpha release: an initial "complete" release to gather feedback and find any bugs or fundamental problems we didn't catch earlier.
[ ] Beta release: a more broad release to prepare for stable.
[ ] Stable release and public announcement: 🎉

Components

"⚠" marks components that are tied to low-level framework features and might require more work to port than other components, due to fundamental differences between React and Solid.

[ ] button
[ ] checkbox
[ ] collection ⚠
[ ] combobox
[ ] command
[ ] composite
[ ] dialog
[ ] disclosure
[x] focus-trap
[ ] focusable
[ ] form
[x] group
[x] heading
[ ] hovercard
[ ] menu
[ ] menubar
[ ] popover
[ ] portal ⚠
[ ] radio
[x] role
[ ] select
[x] separator
[ ] tab
[ ] tag
[ ] toolbar
[ ] tooltip
[x] visually-hidden

Base features

[x] "system"
[x] basic types
[x] render prop
- [x] "clone element" API
- [x] function API
[x] wrapElement prop
[x] "hooks" pattern
[ ] stores
[ ] collections

Dependency/progress map

I made the following graph that represents the dependencies between components. Keep in mind:

Components already implemented are colored green. I keep the image up-to-date in this issue, so it's a good way to understand the progress at a glance.
The "See TODO" annotations are temporary, in the future those will be replaced with references to other views since it's impossible to represent all components and their dependencies in a single view. For example, it might say "See #6" referring to view number 6.

Sep 16 '24 20:09 DaniGuardiola

Are you open for help? How can we help best?

Nov 28 '24 10:11 baptisteArno

@baptisteArno Join the discord is where there's chatter happening https://discord.gg/gcffYWHDyC

Jan 01 '25 02:01 waynevanson

Hi there folks! Thanks for the interest. See https://github.com/ariakit/ariakit/discussions/4322 @baptisteArno @waynevanson

I'm also around in Discord.

Jan 06 '25 02:01 DaniGuardiola

Here's a good start btw: https://github.com/ariakit/ariakit/pull/4116#issuecomment-2572094453

Jan 06 '25 02:01 DaniGuardiola