feat: allow to specify metadata using a `defineMeta` function

[tobiasdiez]

Todo:

• hoist component out of the vue setup function
• add ts support for defineMeta

[tobiasdiez]

@floroz any idea concerning the second point? The generated code currently looks like

const _sfc_main = {
        setup(__props, { expose: __expose }) {
          __expose();
          const MyComponent = {};
          const __returned__ = { MyComponent };
          Object.defineProperty(__returned__, \\"__isScriptSetup\\", {
            enumerable: false,
            value: true,
          });
          return __returned__;
        },
      };
      export default {
        component: MyComponent,
        //decorators: [ ... ],
        parameters: {},
      };

So vue is encapsulating everything in the setup method, which is almost by design. The easiest way would be to simply not support defineMeta in script setup but only script.

[floroz]

@floroz any idea concerning the second point? The generated code currently looks like

const _sfc_main = {
        setup(__props, { expose: __expose }) {
          __expose();
          const MyComponent = {};
          const __returned__ = { MyComponent };
          Object.defineProperty(__returned__, \\"__isScriptSetup\\", {
            enumerable: false,
            value: true,
          });
          return __returned__;
        },
      };
      export default {
        component: MyComponent,
        //decorators: [ ... ],
        parameters: {},
      };

So vue is encapsulating everything in the setup method, which is almost by design. The easiest way would be to simply not support defineMeta in script setup but only script.

@tobiasdiez so we are unable to reference the parameters of defineMeta in the scope of the meta default export.

Supporting only script instead of script setup I assume would mean only being able to use the Options API instead of Composition in Vue SFC Story, which would probably defeat the purpose of this addon, since the main selling point is the DX for modern Vue syntax.

I will need some time to play around with the Vue compiler output to gain a better understanding as this seems quite a heavy roadblock to enable more advanced features...

[tobiasdiez]

I would compare this to export default in plain vue. In this case, you also need to use script instead of script setup. On the positive side, the following works and should cover most cases:

<script setup lang="ts">
  import Button from './Button.vue'
  defineMeta({
    title: 'Button',
    component: Button,
  })
  </script>

its just when you reference variables that you need to use plain script:

<script lang="ts">
  import Button from './Button.vue'
  const title = 'Button'
  defineMeta({
    title,
    component: Button,
  })
  </script>