Vue Language Plugin for type inference of `defineMeta` and `args`

[tobiasdiez]

At the moment, one needs to pass the meta object to the Story component to get the correct types for args etc. The idea would be to add a language plugin that does this automatically. So the following code would work and provide proper types for args

<script setup lang="ts">
import Button from "./b-button.vue";

defineMeta({
  component: Button,
  args: {
    label: 'Click',
    variant: 'primary',
  }
})

</script>

<template>
<Story v-slot="{ args }">
   <Button :label="args.label" /> <!-- the value here is "Click"-->
</Story>
<!-- Args can be overridden locally by passing them to the Story component   -->
<Story v-slot="{ args }" :args="{ label: 'Custom Label'}">
   <Button :label="args.label"/> <!-- the value here is "Custom Label"-->
</Story>
</template>

References:

• "Documentation" of VueLanguagePlugin: https://github.com/vuejs/language-tools/blob/67be01c444db79aa105a47ebca376c29f0e5e609/packages/language-core/lib/types.ts#L80-L88
• https://github.com/vue-macros/vue-macros as examples for defining vue language plugins

[JoJk0]

Temporary TS workaround: declaring it globally via .d.ts file:

// defineMeta.d.ts
import type { Meta } from '@storybook/vue3'

declare global {
  /**
   * Vue compiler macro for defining metadata for a Storybook SFC story.
   */
  const defineMeta: <T extends Component>(meta: Meta<T>) => Meta<T>
}