Ariakit vue exploration with port of Heading #4984
Draft
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR is an exploration of writing Ariakit's components in Vue. I'm mostly using Openverse as a convenient development environment for testing, without needing to scaffold all the Vue compiler things in the ariakit repo (which does not look like it will be simple).
I'm also exploring ways of implementing the composition model that Ariakit relies on, namely the
as
prop. Vue requires explicit declarations for the top-level named props of a component, and does not support conditional prop types, so it isn't possible to follow ariakit React's model of joining theas
component's props with the ariakit component's props.Another thing I'd like to explore further is whether certain components are better suited as directives, or could be supported as a directive or a component. I tried to find a way to do that with heading, but because it relies on the injected heading context, and directives don't support inject/provide, it isn't possible (at least not without ugly hacks!).
Testing Instructions
Check out the AHeading and AHeadingLevel component. Compare them to https://ariakit.org/components/heading. Try them out in Storybook (
ov j p frontend storybook
) and on the 404 page (ov nuxt
and visit localhost:8443/does-not-exist).Checklist
Update index.md
).main
) or a parent feature branch.ov just catalog/generate-docs
for catalogPRs) or the media properties generator (
ov just catalog/generate-docs media-props
for the catalog or
ov just api/generate-docs
for the API) where applicable.Developer Certificate of Origin
Developer Certificate of Origin