Extend component meta

[romhml]

What problem does this feature solve?

It would be usefull for library authors to be able to extend component metas. In @nuxt/ui for example we're using something similar for our devtools, allowing us to pass default property values and examples to preview components (Here's an example).

What does the proposed solution look like?

We could define a new macro defineComponentMeta(meta: Record<string, any>) that can be used within a component. Its content would be parsed and injected into the component's meta by the meta checker.

<script setup lang="ts">
const props = defineProps<{ foo: string }>()

extendComponentMeta({
    bar: 'baz'
})
</script>

<template>
    <span />
</template>

Which would result in the following meta:

{
    bar: 'baz',
    props: [ /* ... */ ],
    // ...
}

I can look into the implementation if needed.

[KazariEX]

This requires runtime support (just drops it), you can try implementing this feature.

[romhml]

@KazariEX I submitted a draft implementation with some questions. I'll continue working on it and look into the runtime support too.

[romhml]

Hey! I managed to implement something on my own to achieve similar result (at runtime though). I'll continue working on implementing a macro by extending the meta checker on my own, since I don't think it makes a lot of sense to introduce it here (and in the vue runtime).

Thanks for your help @KazariEX :)