Vue: Support defineModel and slots without bindings for vue-component-meta docgen plugin

code/frameworks/vue3-vite/package.json

@@ -53,7 +53,7 @@
     "find-package-json": "^1.2.0",
     "magic-string": "^0.30.0",
     "typescript": "^5.0.0",
-    "vue-component-meta": "^1.8.27",
+    "vue-component-meta": "^2.0.7",
     "vue-docgen-api": "^4.75.1"
   },
   "devDependencies": {

code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts

@@ -5,8 +5,8 @@ import path from 'path';
 import type { PluginOption } from 'vite';
 import {
   TypeMeta,
-  createComponentMetaChecker,
-  createComponentMetaCheckerByJsonConfig,
+  createChecker,
+  createCheckerByJson,
   type ComponentMeta,
   type MetaCheckerOptions,
 } from 'vue-component-meta';
@@ -28,7 +28,7 @@ export async function vueComponentMeta(): Promise<PluginOption> {
   const include = /\.(vue|ts|js|tsx|jsx)$/;
   const filter = createFilter(include, exclude);
 
-  const checker = await createChecker();
+  const checker = await createCheckerWithWorkaround();
 
   return {
     name: 'storybook:vue-component-meta-plugin',
@@ -127,8 +127,10 @@ export async function vueComponentMeta(): Promise<PluginOption> {
 
 /**
  * Creates the vue-component-meta checker to use for extracting component meta/docs.
+ * Includes a workaround for projects using references in their tsconfig.json which
+ * is currently not supported by vue-component-meta.
  */
-async function createChecker() {
+async function createCheckerWithWorkaround() {
   const checkerOptions: MetaCheckerOptions = {
     forceUseTs: true,
     noDeclarations: true,
@@ -138,11 +140,7 @@ async function createChecker() {
   const projectRoot = getProjectRoot();
   const projectTsConfigPath = path.join(projectRoot, 'tsconfig.json');
 
-  const defaultChecker = createComponentMetaCheckerByJsonConfig(
-    projectRoot,
-    { include: ['**/*'] },
-    checkerOptions
-  );
+  const defaultChecker = createCheckerByJson(projectRoot, { include: ['**/*'] }, checkerOptions);
 
   // prefer the tsconfig.json file of the project to support alias resolution etc.
   if (await fileExists(projectTsConfigPath)) {
@@ -155,7 +153,7 @@ async function createChecker() {
       // TODO: paths/aliases are not resolvable, find workaround for this
       return defaultChecker;
     }
-    return createComponentMetaChecker(projectTsConfigPath, checkerOptions);
+    return createChecker(projectTsConfigPath, checkerOptions);
   }
 
   return defaultChecker;

code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineModel.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Component from './define-model/component.vue';
+
+const meta = {
+  component: Component,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+export default meta;
+
+export const Default: Story = {
+  args: {
+    modelValue: 'Test value',
+  },
+};

code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineSlots.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Component from './define-slots/component.vue';
+
+const meta = {
+  component: Component,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+export default meta;
+
+export const Default: Story = {
+  args: {
+    default: ({ num }) => `Default slot { num=${num} }`,
+    named: ({ str }) => `Named slot { str=${str} }`,
+    vbind: ({ num, str }) => `Named v-bind slot { num=${num}, str=${str} }`,
+  },
+};

code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/define-model/component.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const model = defineModel<string>();
+</script>
+
+<template>
+  {{ model }}
+</template>

code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/define-slots/component.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineSlots<{
+  /** Some description for "no-bind" slot. */
+  'no-bind'(): any;
+  /** Some description for "default" slot. */
+  default(props: { num: number }): any;
+  /** Some description for "named" slot. */
+  named(props: { str: string }): any;
+  /** Some description for "vbind" slot. */
+  vbind(props: { num: number; str: string }): any;
+}>();
+</script>
+
+<template>
+  <slot name="no-bind"></slot>
+  <br />
+  <slot :num="123"></slot>
+  <br />
+  <slot name="named" str="str"></slot>
+  <br />
+  <slot name="vbind" v-bind="{ num: 123, str: 'str' }"></slot>
+</template>

code/yarn.lock

@@ -6854,7 +6854,7 @@ __metadata:
     magic-string: "npm:^0.30.0"
     typescript: "npm:^5.3.2"
     vite: "npm:^4.0.0"
-    vue-component-meta: "npm:^1.8.27"
+    vue-component-meta: "npm:^2.0.7"
     vue-docgen-api: "npm:^4.75.1"
   peerDependencies:
     vite: ^4.0.0 || ^5.0.0
@@ -8689,12 +8689,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@volar/language-core@npm:1.11.1, @volar/language-core@npm:~1.11.1":
-  version: 1.11.1
-  resolution: "@volar/language-core@npm:1.11.1"
+"@volar/language-core@npm:2.1.4, @volar/language-core@npm:~2.1.3":
+  version: 2.1.4
+  resolution: "@volar/language-core@npm:2.1.4"
   dependencies:
-    "@volar/source-map": "npm:1.11.1"
-  checksum: 92c4439e3a9ccc534c970031388c318740f6fa032283d03e136c6c8c0228f549c68a7c363af1a28252617a0dca6069e14028329ac906d5acf1912931d0cdcb69
+    "@volar/source-map": "npm:2.1.4"
+  checksum: b1817f479b7ac396a173de9bc1432cfb6ea64555901e3ea8004d6ae585430f0f2dfd83fbe1413ec003e64cb3769ea79f55fccc9784d87f27f0e40eff1b2bab5c
   languageName: node
   linkType: hard
 
@@ -8707,12 +8707,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@volar/source-map@npm:1.11.1, @volar/source-map@npm:~1.11.1":
-  version: 1.11.1
-  resolution: "@volar/source-map@npm:1.11.1"
+"@volar/source-map@npm:2.1.4":
+  version: 2.1.4
+  resolution: "@volar/source-map@npm:2.1.4"
   dependencies:
-    muggle-string: "npm:^0.3.1"
-  checksum: 0bfc639889802705f8036ea8b2052a95a4d691a68bc2b6744ba8b9d312d887393dd3278101180a5ee5304972899d493972a483afafd41e097968746c77d724cb
+    muggle-string: "npm:^0.4.0"
+  checksum: 246f2ddc41cf47950f7e6c9da5f78a0f87142ee85823379a574d2beed4a048bc8dd87d3f95debe78a3bb52efbca4fe1625edc3d0bbb7c5313d23651fc6f7b035
   languageName: node
   linkType: hard
 
@@ -8725,13 +8725,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@volar/typescript@npm:~1.11.1":
-  version: 1.11.1
-  resolution: "@volar/typescript@npm:1.11.1"
+"@volar/typescript@npm:~2.1.3":
+  version: 2.1.4
+  resolution: "@volar/typescript@npm:2.1.4"
   dependencies:
-    "@volar/language-core": "npm:1.11.1"
+    "@volar/language-core": "npm:2.1.4"
     path-browserify: "npm:^1.0.1"
-  checksum: 86fe153db3a14d8eb3632784a1d7fcbfbfb51fa5517c3878bfdd49ee8d15a83b1a09f9c589454b7396454c104d3a8e2db3a987dc99b37c33816772fc3e292bf2
+  checksum: 62158d6e3cd1b29d06fe519ae676f47f61b685127ed09f97c9365c37647cce236e7f6f4b0259456da4b735fd4e355f71e1efc298dbec08677bafd8b02ac37b36
   languageName: node
   linkType: hard
 
@@ -8760,6 +8760,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/compiler-core@npm:3.4.21":
+  version: 3.4.21
+  resolution: "@vue/compiler-core@npm:3.4.21"
+  dependencies:
+    "@babel/parser": "npm:^7.23.9"
+    "@vue/shared": "npm:3.4.21"
+    entities: "npm:^4.5.0"
+    estree-walker: "npm:^2.0.2"
+    source-map-js: "npm:^1.0.2"
+  checksum: 3ee871b95e17948d10375093c8dd3265923f844528a24ac67512c201ddb9b628021c010565f3e50f2e551b217c502e80a7901384f616a977a04f81e68c64a37c
+  languageName: node
+  linkType: hard
+
 "@vue/compiler-core@npm:3.4.5, @vue/compiler-core@npm:^3.0.0":
   version: 3.4.5
   resolution: "@vue/compiler-core@npm:3.4.5"
@@ -8803,6 +8816,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/compiler-dom@npm:^3.4.0":
+  version: 3.4.21
+  resolution: "@vue/compiler-dom@npm:3.4.21"
+  dependencies:
+    "@vue/compiler-core": "npm:3.4.21"
+    "@vue/shared": "npm:3.4.21"
+  checksum: b4a1099eddacded2663d12388b48088ca0be0d8969a070476f49e4e65da9b22851fc897cc693662b178e7e7fdee98fcf9ea3617a1f626c3a1b2089815cb1264e
+  languageName: node
+  linkType: hard
+
 "@vue/compiler-sfc@npm:3.0.0":
   version: 3.0.0
   resolution: "@vue/compiler-sfc@npm:3.0.0"
@@ -8915,25 +8938,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/language-core@npm:1.8.27":
-  version: 1.8.27
-  resolution: "@vue/language-core@npm:1.8.27"
+"@vue/language-core@npm:2.0.7":
+  version: 2.0.7
+  resolution: "@vue/language-core@npm:2.0.7"
   dependencies:
-    "@volar/language-core": "npm:~1.11.1"
-    "@volar/source-map": "npm:~1.11.1"
-    "@vue/compiler-dom": "npm:^3.3.0"
-    "@vue/shared": "npm:^3.3.0"
+    "@volar/language-core": "npm:~2.1.3"
+    "@vue/compiler-dom": "npm:^3.4.0"
+    "@vue/shared": "npm:^3.4.0"
     computeds: "npm:^0.0.1"
     minimatch: "npm:^9.0.3"
-    muggle-string: "npm:^0.3.1"
     path-browserify: "npm:^1.0.1"
     vue-template-compiler: "npm:^2.7.14"
   peerDependencies:
     typescript: "*"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 2018214d8ce2643d19e8e84eddaeacddca28b2980984d7916d97f97556c3716be184cf9f8c4f506d072a11f265401e3bc0391117cf7cfcc1e4a25048f4432dc7
+  checksum: c4da8e077c50cbc2d3bfb112d63ed6112aa0fd834ca63fbc3e2b6f2fdd58fdb3dbd5ad9e3332e373c330f049fac2f8465e4063790e24efafd95572087f896b74
   languageName: node
   linkType: hard
 
@@ -9036,6 +9057,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/shared@npm:3.4.21, @vue/shared@npm:^3.4.0":
+  version: 3.4.21
+  resolution: "@vue/shared@npm:3.4.21"
+  checksum: 79cba4228c3c1769ba8024302d7dbebf6ed1b77fb2e7a69e635cdebaa1c18b409e9c27ce27ccbe3a98e702a7e2dae1b87754d87f0b29adfe2a8f9e1e7c7899d5
+  languageName: node
+  linkType: hard
+
 "@vue/shared@npm:3.4.5, @vue/shared@npm:^3.3.0":
   version: 3.4.5
   resolution: "@vue/shared@npm:3.4.5"
@@ -21277,6 +21305,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"muggle-string@npm:^0.4.0":
+  version: 0.4.1
+  resolution: "muggle-string@npm:0.4.1"
+  checksum: e914b63e24cd23f97e18376ec47e4ba3aa24365e4776212b666add2e47bb158003212980d732c49abf3719568900af7861873844a6e2d3a7ca7e86952c0e99e9
+  languageName: node
+  linkType: hard
+
 "multicast-dns@npm:^7.2.5":
   version: 7.2.5
   resolution: "multicast-dns@npm:7.2.5"
@@ -29382,27 +29417,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-component-meta@npm:^1.8.27":
-  version: 1.8.27
-  resolution: "vue-component-meta@npm:1.8.27"
+"vue-component-meta@npm:^2.0.7":
+  version: 2.0.7
+  resolution: "vue-component-meta@npm:2.0.7"
   dependencies:
-    "@volar/typescript": "npm:~1.11.1"
-    "@vue/language-core": "npm:1.8.27"
+    "@volar/typescript": "npm:~2.1.3"
+    "@vue/language-core": "npm:2.0.7"
     path-browserify: "npm:^1.0.1"
-    vue-component-type-helpers: "npm:1.8.27"
+    vue-component-type-helpers: "npm:2.0.7"
   peerDependencies:
     typescript: "*"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 40884b316940e6995a6e7f9e5cbe5536b5c6e380acfd5b1d24914511972a241550c04474f4fffdf6305b1c9962b1137b5fd6183dc309127d3a268fe7d8d85df9
-  languageName: node
-  linkType: hard
-
-"vue-component-type-helpers@npm:1.8.27":
-  version: 1.8.27
-  resolution: "vue-component-type-helpers@npm:1.8.27"
-  checksum: 3403d70951e422162321e810f54f23f11ee5d2642631d2ca2cb1de18e5d35a0b7b05dd1f9bd02a0ae77dfa0b80751d826865d98f928ae6d6fbce9303406c9820
+  checksum: 1c7fce41afc2cafe85b7477763da069e06091b4a30bb7fb09e8479f9a4c2bb5b8aa7a5c805a8af68b4bed54fbb435485f91a1a2dfa1332377dfa98acef03ca4d
   languageName: node
   linkType: hard
 
@@ -29413,6 +29441,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-component-type-helpers@npm:2.0.7":
+  version: 2.0.7
+  resolution: "vue-component-type-helpers@npm:2.0.7"
+  checksum: c350a06e2dec5a3856ac9ef7cc4fd00c1a59a13b812f885dcab8636cf6dd3951d0f66fd8adbee8b49445294f65b48848f115699a8dc654e0b5b09611739df420
+  languageName: node
+  linkType: hard
+
 "vue-component-type-helpers@npm:latest":
   version: 1.8.15
   resolution: "vue-component-type-helpers@npm:1.8.15"