Vue: Replace vue-docgen-api with Volar vue-component-meta

[chakAs3]

Closes #22090 #21606 #23313 #25582 #25305 #24621 #22209 #21684 #19233 #16301

and other issues

Current PR status / open points

Status from: 18 February 2024

• waiting for vue-component-meta: checker not working with tsconfig that uses references vuejs/language-tools#3896. Alternatively we have to implement a temporary workaround because currently projects that use references in their tsconfig will miss all component docs in Storybook
• Performance issues need testing if they still exists. If they exist, we might need to only include .vue files by default and add a framework option to also include ts,js,jsx and tsx files

Volar can be enabled with:

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/vue3-vite';

const config: StorybookConfig = {
  framework: {
    name: '@storybook/vue3-vite',
    options: {
      docgen: "vue-component-meta"
    },
  },
};

export default config;

What I did

replace vue-docgen-api with official vue language tools by Volar ( vue-meta-component ) with a better type definition, more features, and regular updates by @johnsoncodehk.

What benefits are we getting? :

Added Props type definition extraction

• String (e.g. 'Foo')
• Array of strings (e.g. ['Baz', 'Bar', 'Foo'])
• Number (e.g. 1)
• Union types with optional values (e.g. 'Foo' | undefined)
• Union types (e.g. 'Foo' | 'Baz')
• Object with inline properties (e.g. { foo: 'Foo' })
• Object with nested properties (e.g. { nestedProp: 'Nested Prop' })
• Object with intersection types (e.g. { nestedProp: 'Nested Prop', additionalProp: 'Additional Prop' })
• Array of objects with properties (e.g. [{ foo: 'Foo' }])
• Literal types (e.g. ['Uncategorized', 'Display', 'Addons'])
• Enum types (e.g. MyEnum.Small)
• Recursive object types (e.g. { recursive: { recursive: { recursive: 'recursive' } } })

Added props description and tag annotation support :

This PR adds the ability to include descriptions and tag annotations for props in Vue components. The following examples demonstrate how to use this new feature:

Props Description

To provide a description for a prop, add a description property to the prop object. Here is an example:

interface MyComponentProps {
  /**
   * The name of the user
   */
  name: string;
  /**
   * The category of the component
   * @required
   * @default 'Uncategorized'
   */
  category: string;
}

export default {
  name: "MyComponent",
  props: {
    name: {
      type: String,
      required: true,
      description: "The name of the user",
    },
    category: {
      type: String,
      default: "Uncategorized",
      tags: ["required", "default: Uncategorized"],
    },
  },
  // rest of the component's logic
};

Props Tag Annotation

To add a tag annotation to a prop, add a tags property to the prop object. This can be useful for documenting things like default values or required props. Here is an example:

props: {
  // @required
  // @default 'Uncategorized'
  category: {
    type: String,
    tags: ['required', 'default: Uncategorized']
  }
}

These new features can make documentation more organized and useful for other developers, so be sure to take advantage of them in your Vue components.

Added support control generation

• Ability to generate Storybook controls based on Vue component's props type definitions

This new feature enables developers to generate Storybook controls for their Vue components, using simple props type definitions as a guide. Here's an example of how it might look like:

<script>
enum MyEnum {
	Small,
	Medium,
	Large,
}

const categories = [
	'Uncategorized',
	'Content',
	'Interaction',
	'Display',
	'Forms',
	'Addons',
] as const;

type MyCategories = typeof categories[number];

type MyProps = {
  /**
	 * description enum value
	 */
	enumValue: MyEnum,
	/**
	 * description literal type alias that require context
	 */
	literalFromContext: MyCategories,
}

withDefaults(defineProps<MyProps>(), {
	bar: 1,
	baz: () => ['foo', 'bar'],
});
</script>

Events types extraction

Note:
Due to technical limitations of Volar / vue language features, JSDoc / descriptions for emits can not be extracted.

<script setup lang="ts">
type MyFooEvent = "foo";

interface MyEvents {
  (event: MyFooEvent, data?: { foo: string }): void;
  (event: "bar", value: { year: number; title?: any }): void;
  (e: "baz"): void;
}

const emit = defineEmits<MyEvents>();
</script>

Added slots types definition extraction

we can get slots type definition from Vue component and display them on the component docs table

<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>

<script setup lang="ts"></script>

Added "Exposed" methods and properties types definition extraction

With the release of Vue 3.2 a new composition tool was made available for us, called expose.
to make methods and properties available to the parent. and made the type available #3399

Now we can extract these exposed and display them on docs table in section called exposed

<script setup lang="ts">
import { ref } from "vue";

const label = ref("Button");
const count = ref(100);

defineExpose({
  /**
   * a label string
   */
  label,
  /**
   * a count number
   */
  count,
});
</script>

In addition to generating Storybook controls for Vue components based on their props, events, slots and exposed type definitions, the new feature also allows this meta extraction from all types of Vue components, including functional, composition / options API components, and from both .vue or .ts files. This makes it easier for developers to test their components and ensure that they are working as intended.

Here's an example of a TypeScript Vue component:

//  .ts-component.ts
export default defineComponent({
  props: {
    /**
     * string foo
     */
    foo: {
      type: String,
      required: true,
    },
    /**
     * optional number bar
     */
    bar: {
      type: Number,
    },
  },
  setup(props) {
    return () => h("pre", JSON.stringify(props, null, 2));
  },
});

Support for Named Export Component

The PR introduces support for named export components in Vue. With this enhancement, you can now have multiple components exported from a single file using named exports. This provides greater flexibility and organization in structuring your Vue components.

You can do something like this

// ./component.ts
export const ComponentA = defineComponent({
  name: "MyCompo1",
  props: {
    /**
     * This is a description of the prop
     * @values 'small', 'medium', 'large'
     * @defaultValue 'medium'
     * @control select
     * @group Size
     * */
    size: {
      type: String as PropType<"small" | "medium" | "large">,
      default: "medium",
    },
    /**
     * This is a description of the prop
     * @defaultValue false
     * @control color
     * @group Style
     * */
    backgroundColor: {
      type: String,
      default: "red",
    },
  },
  setup(props: any) {
    return () => h("pre", JSON.stringify(props, null, 2));
  },
});

export const ComponentB = defineComponent(
  (props: MyProps) => () => h("Pre", `${JSON.stringify(props)}`),
  { props: ["foo", "bar"] }
);

Component Meta Extraction from Various File Types

The PR extends the component meta extraction functionality to support multiple file types, including .vue, .js, .ts, .tsx, and .jsx. Regardless of the file extension, you can now extract component metadata seamlessly. This improvement enables a unified approach to extracting component meta across different file formats, ensuring consistent and efficient development workflows.

so you can have something like :

// ./components.tsx
export const JSXComponent = defineComponent({
  props: {
    /**
     * label for the JSXComponent
     */
    label: String,
    /**
     * counter for the JSXComponent
     * @default 0
     * @type Number
     * @example 1
     */
    counter: Number,
  },
  name: "JSXComponent",
  setup(props, { emit }) {
    return () => (
      <>
        <h4>JSX Component</h4>
      </>
    );
  },
});

By incorporating these new features, we aim to enhance the flexibility and extensibility of Vue components, making it easier to manage and extract metadata across various file types and export configurations.

Please review this PR and provide your feedback. Your contributions and suggestions are highly appreciated.

Thank you!

How to test

1. Run a sandbox for template, e.g. yarn task --task sandbox --start-from auto --template vue3-vite/default-ts
2. Open Storybook in your browser

-->

Checklist

• Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
• Make sure to add/update documentation regarding your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Maintainers

• If this PR should be tested against many or all sandboxes,
  make sure to add the ci:merged or ci:daily GH label to it.
• Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

This pull request has been released as version 0.0.0-pr-22285-sha-f910dccb. Try it out in a new sandbox by running npx storybook@0.0.0-pr-22285-sha-f910dccb sandbox or in an existing project with npx storybook@0.0.0-pr-22285-sha-f910dccb upgrade.

More information

Published version	0.0.0-pr-22285-sha-f910dccb
Triggered by	@kasperpeulen
Repository	storybookjs/storybook
Branch	chaks/vue-component-meta
Commit	f910dccb
Datetime	Fri Feb 23 15:33:14 UTC 2024 (1708702394)
Workflow run	8021473651

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=22285

[socket-security]

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

Ignoring: npm/@babel/helper-create-class-features-plugin@7.23.10, npm/@babel/helper-define-polyfill-provider@0.5.0, npm/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.23.7, npm/@babel/plugin-proposal-decorators@7.23.9, npm/@babel/plugin-proposal-private-property-in-object@7.21.11, npm/@babel/plugin-syntax-decorators@7.23.3, npm/@babel/plugin-syntax-flow@7.23.3, npm/@babel/plugin-transform-async-generator-functions@7.23.9, npm/@babel/plugin-transform-classes@7.23.8, npm/@babel/plugin-transform-flow-strip-types@7.23.3, npm/@babel/plugin-transform-modules-systemjs@7.23.9, npm/@babel/plugin-transform-object-assign@7.23.3, npm/@babel/plugin-transform-runtime@7.23.9, npm/@babel/plugin-transform-typescript@7.23.6, npm/@babel/preset-env@7.23.9, npm/@babel/preset-flow@7.23.3, npm/@babel/register@7.23.7, npm/@babel/runtime@7.12.18, npm/@esbuild/android-arm64@0.18.20, npm/@esbuild/android-arm@0.18.20, npm/@esbuild/android-x64@0.18.20, npm/@esbuild/darwin-arm64@0.18.20, npm/@esbuild/darwin-x64@0.18.20, npm/@esbuild/freebsd-arm64@0.18.20, npm/@esbuild/freebsd-x64@0.18.20, npm/@esbuild/linux-arm64@0.18.20, npm/@esbuild/linux-arm@0.18.20, npm/@esbuild/linux-ia32@0.18.20, npm/@esbuild/linux-loong64@0.18.20, npm/@esbuild/linux-mips64el@0.18.20, npm/@esbuild/linux-ppc64@0.18.20, npm/@esbuild/linux-riscv64@0.18.20, npm/@esbuild/linux-s390x@0.18.20, npm/@esbuild/linux-x64@0.18.20, npm/@esbuild/netbsd-x64@0.18.20, npm/@esbuild/openbsd-x64@0.18.20, npm/@esbuild/sunos-x64@0.18.20, npm/@esbuild/win32-arm64@0.18.20, npm/@esbuild/win32-ia32@0.18.20, npm/@esbuild/win32-x64@0.18.20, npm/@jridgewell/resolve-uri@3.1.2, npm/@jridgewell/trace-mapping@0.3.22, npm/@storybook/addon-a11y@7.2.0-alpha.0, npm/@storybook/addon-actions@7.2.0-alpha.0, npm/@storybook/addon-backgrounds@7.2.0-alpha.0, npm/@storybook/addon-controls@7.2.0-alpha.0, npm/@storybook/addon-docs@7.2.0-alpha.0, npm/@storybook/addon-highlight@7.2.0-alpha.0, npm/@storybook/addon-links@7.2.0-alpha.0, npm/@storybook/addon-storysource@7.2.0-alpha.0, npm/@storybook/addon-viewport@7.2.0-alpha.0, npm/@storybook/addons@7.2.0-alpha.0, npm/@storybook/blocks@7.2.0-alpha.0, npm/@storybook/builder-manager@7.2.0-alpha.0, npm/@storybook/builder-webpack5@7.2.0-alpha.0, npm/@storybook/channels@7.2.0-alpha.0, npm/@storybook/cli@7.2.0-alpha.0, npm/@storybook/client-api@7.2.0-alpha.0, npm/@storybook/client-logger@7.2.0-alpha.0, npm/@storybook/codemod@7.2.0-alpha.0, npm/@storybook/components@7.2.0-alpha.0, npm/@storybook/core-common@7.2.0-alpha.0, npm/@storybook/core-events@7.2.0-alpha.0, npm/@storybook/core-server@7.2.0-alpha.0, npm/@storybook/core-webpack@7.2.0-alpha.0, npm/@storybook/csf-plugin@7.2.0-alpha.0, npm/@storybook/csf-tools@7.2.0-alpha.0, npm/@storybook/docs-mdx@0.1.0, npm/@storybook/docs-tools@7.2.0-alpha.0, npm/@storybook/ember@7.2.0-alpha.0, npm/@storybook/manager-api@7.2.0-alpha.0, npm/@storybook/manager@7.2.0-alpha.0, npm/@storybook/node-logger@7.2.0-alpha.0, npm/@storybook/postinstall@7.2.0-alpha.0, npm/@storybook/preview-api@7.2.0-alpha.0, npm/@storybook/preview@7.2.0-alpha.0, npm/@storybook/react-dom-shim@7.2.0-alpha.0, npm/@storybook/router@7.2.0-alpha.0, npm/@storybook/source-loader@7.2.0-alpha.0, npm/@storybook/store@7.2.0-alpha.0, npm/@storybook/telemetry@7.2.0-alpha.0, npm/@storybook/theming@7.2.0-alpha.0, npm/@storybook/types@7.2.0-alpha.0, npm/@swc/core-darwin-arm64@1.4.2, npm/@swc/core-darwin-x64@1.4.2, npm/@swc/core-linux-arm-gnueabihf@1.4.2, npm/@swc/core-linux-arm64-gnu@1.4.2, npm/@swc/core-linux-arm64-musl@1.4.2, npm/@swc/core-linux-x64-gnu@1.4.2, npm/@swc/core-linux-x64-musl@1.4.2, npm/@swc/core-win32-arm64-msvc@1.4.2, npm/@swc/core-win32-ia32-msvc@1.4.2, npm/@swc/core-win32-x64-msvc@1.4.2, npm/@swc/core@1.4.2, npm/@swc/counter@0.1.3, npm/@swc/types@0.1.5, npm/@types/babel__core@7.20.5, npm/@types/babel__generator@7.6.8, npm/@types/babel__template@7.4.4, npm/@types/babel__traverse@7.20.5, npm/@types/body-parser@1.19.5, npm/@types/connect@3.4.38, npm/@types/cross-spawn@6.0.6, npm/@types/detect-port@1.3.5, npm/@types/doctrine@0.0.3, npm/@types/ejs@3.1.5, npm/@types/emscripten@1.39.10, npm/@types/eslint-scope@3.7.7, npm/@types/eslint@8.56.2, npm/@types/express-serve-static-core@4.17.43, npm/@types/express@4.17.21, npm/@types/find-cache-dir@3.2.1, npm/@types/fs-extra@5.1.0, npm/@types/glob@8.1.0, npm/@types/graceful-fs@4.1.9, npm/@types/hast@2.3.10, npm/@types/html-minifier-terser@6.1.0, npm/@types/http-errors@2.0.4, npm/@types/istanbul-lib-coverage@2.0.6, npm/@types/istanbul-lib-report@3.0.3, npm/@types/istanbul-reports@3.0.4, npm/@types/json-schema@7.0.15, npm/@types/lodash@4.14.202, npm/@types/mdx@2.0.11, npm/@types/mime-types@2.1.4, npm/@types/mime@1.3.5, npm/@types/minimatch@3.0.5, npm/@types/minimatch@5.1.2, npm/@types/node-fetch@2.6.11, npm/@types/node@16.18.82, npm/@types/node@20.11.19, npm/@types/normalize-package-data@2.4.4, npm/@types/parse-json@4.0.2, npm/@types/pretty-hrtime@1.0.3, npm/@types/prop-types@15.7.11, npm/@types/qs@6.9.11, npm/@types/range-parser@1.2.7, npm/@types/react@18.2.57, npm/@types/rimraf@2.0.5, npm/@types/scheduler@0.16.8, npm/@types/semver@7.5.7, npm/@types/send@0.17.4, npm/@types/serve-static@1.15.5, npm/@types/symlink-or-copy@1.2.2, npm/@types/unist@2.0.10, npm/@types/yargs-parser@21.0.3, npm/@types/yargs@17.0.32, npm/@webassemblyjs/ast@1.11.6, npm/@webassemblyjs/floating-point-hex-parser@1.11.6, npm/@webassemblyjs/helper-api-error@1.11.6, npm/@webassemblyjs/helper-buffer@1.11.6, npm/@webassemblyjs/helper-numbers@1.11.6, npm/@webassemblyjs/helper-wasm-bytecode@1.11.6, npm/@webassemblyjs/helper-wasm-section@1.11.6, npm/@webassemblyjs/ieee754@1.11.6, npm/@webassemblyjs/leb128@1.11.6, npm/@webassemblyjs/utf8@1.11.6, npm/@webassemblyjs/wasm-edit@1.11.6, npm/@webassemblyjs/wasm-gen@1.11.6, npm/@webassemblyjs/wasm-opt@1.11.6, npm/@webassemblyjs/wasm-parser@1.11.6, npm/@webassemblyjs/wast-printer@1.11.6, npm/@xtuc/ieee754@1.2.0, npm/@xtuc/long@4.2.2, npm/@yarnpkg/esbuild-plugin-pnp@3.0.0-rc.15, npm/@yarnpkg/fslib@2.10.3, npm/@yarnpkg/libzip@2.3.0, npm/accepts@1.3.8, npm/acorn-import-assertions@1.9.0, npm/acorn@8.11.3, npm/address@1.2.2, npm/agent-base@5.1.1, npm/aggregate-error@3.1.0, npm/ajv-formats@2.1.1, npm/ajv-keywords@3.5.2, npm/ajv@8.12.0, npm/amd-name-resolver@1.3.1, npm/amdefine@1.0.1, npm/ansi-html-community@0.0.8, npm/ansi-regex@5.0.1, npm/ansi-styles@3.2.1, npm/anymatch@3.1.3, npm/app-root-dir@1.0.2, npm/argparse@1.0.10, npm/aria-hidden@1.2.3, npm/array-equal@1.0.2, npm/array-flatten@1.1.1, npm/array-union@2.1.0, npm/assert@2.1.0, npm/ast-types@0.13.3, npm/ast-types@0.15.2, npm/async-disk-cache@1.3.5, npm/async-limiter@1.0.1, npm/async-promise-queue@1.0.5, npm/async@2.6.4, npm/async@3.2.5, npm/asynckit@0.4.0, npm/available-typed-arrays@1.0.7, npm/axe-core@4.8.4, npm/babel-core@7.0.0-bridge.0, npm/babel-loader@8.3.0, npm/babel-loader@9.1.3, npm/babel-plugin-debug-macros@0.3.4, npm/babel-plugin-ember-data-packages-polyfill@0.1.2, npm/babel-plugin-ember-modules-api-polyfill@2.13.4, npm/babel-plugin-ember-modules-api-polyfill@3.5.0, npm/babel-plugin-filter-imports@4.0.0, npm/babel-plugin-istanbul@6.1.1, npm/babel-plugin-module-resolver@3.2.0, npm/babel-plugin-named-exports-order@0.0.2, npm/babel-plugin-polyfill-corejs2@0.4.8, npm/babel-plugin-polyfill-corejs3@0.9.0, npm/babel-plugin-polyfill-regenerator@0.5.5, npm/balanced-match@1.0.2, npm/base64-js@1.5.1, npm/better-opn@3.0.2, npm/big-integer@1.6.52, npm/binary-extensions@2.2.0, npm/binaryextensions@2.3.0, npm/bl@4.1.0, npm/blank-object@1.0.2, npm/body-parser@1.20.1, npm/boolbase@1.0.0, npm/bplist-parser@0.2.0, npm/brace-expansion@1.1.11, npm/brace-expansion@2.0.1, npm/braces@3.0.2, npm/broccoli-babel-transpiler@7.8.1, npm/broccoli-concat@4.2.5, npm/broccoli-debug@0.6.5, npm/broccoli-file-creator@2.1.1, npm/broccoli-funnel@2.0.2, npm/broccoli-kitchen-sink-helpers@0.3.1, npm/broccoli-merge-trees@3.0.2, npm/broccoli-merge-trees@4.2.0, npm/broccoli-node-api@1.7.0, npm/broccoli-node-info@2.2.0, npm/broccoli-output-wrapper@3.2.5, npm/broccoli-persistent-filter@2.3.1, npm/broccoli-plugin@1.3.1, npm/broccoli-plugin@4.0.7, npm/broccoli-source@2.1.2, npm/browser-assert@1.2.1, npm/browserify-zlib@0.1.4, npm/browserify-zlib@0.2.0, npm/browserslist@4.23.0, npm/bser@2.1.1, npm/buffer-crc32@0.2.13, npm/buffer-from@1.1.2, npm/buffer@5.7.1, npm/bytes@3.0.0, npm/bytes@3.1.2, npm/calculate-cache-key-for-tree@2.0.0, npm/call-bind@1.0.7, npm/callsites@3.1.0, npm/camel-case@4.1.2, npm/camelcase@5.3.1, npm/can-symlink@1.0.0, npm/caniuse-lite@1.0.30001589, npm/case-sensitive-paths-webpack-plugin@2.4.0, npm/chalk@4.1.2, npm/character-entities-legacy@1.1.4, npm/character-entities@1.2.4, npm/character-reference-invalid@1.1.4, npm/chokidar@3.6.0, npm/chownr@2.0.0, npm/chrome-trace-event@1.0.3, npm/ci-info@3.9.0, npm/citty@0.1.6, npm/clean-css@5.3.3, npm/clean-stack@2.2.0, npm/clean-up-path@1.0.0, npm/cli-cursor@3.1.0, npm/cli-spinners@2.9.2, npm/cli-table3@0.6.3, npm/clone-deep@4.0.1, npm/clone@1.0.4, npm/clone@2.1.2, npm/color-convert@1.9.3, npm/color-convert@2.0.1, npm/color-name@1.1.3, npm/color-name@1.1.4, npm/colorette@2.0.20, npm/combined-stream@1.0.8, npm/comma-separated-tokens@1.0.8, npm/commander@8.3.0, npm/common-path-prefix@3.0.0, npm/commondir@1.0.1, npm/compressible@2.0.18, npm/compression@1.7.4, npm/concat-map@0.0.1, npm/concat-stream@1.6.2, npm/consola@3.2.3, npm/constants-browserify@1.0.0, npm/content-disposition@0.5.4, npm/content-type@1.0.5, npm/cookie-signature@1.0.6, npm/cookie@0.5.0, npm/core-js-compat@3.36.0, npm/core-util-is@1.0.3, npm/cosmiconfig@7.1.0, npm/cross-env@7.0.3, npm/cross-spawn@7.0.3, npm/crypto-random-string@2.0.0, npm/css-loader@6.10.0, npm/css-select@4.3.0, npm/css-what@6.1.0, npm/cssesc@3.0.0, npm/csstype@3.1.3, npm/debug@2.6.9, npm/debug@4.3.4, npm/deepmerge@4.3.1, npm/default-browser-id@3.0.0, npm/defaults@1.0.4, npm/define-data-property@1.1.4, npm/define-lazy-prop@2.0.0, npm/define-properties@1.2.1, npm/defu@6.1.4, npm/del@6.1.1, npm/delayed-stream@1.0.0, npm/depd@2.0.0, npm/dequal@2.0.3, npm/destroy@1.2.0, npm/detect-indent@6.1.0, npm/detect-node-es@1.1.0, npm/detect-package-manager@2.0.1, npm/detect-port@1.5.1, npm/dir-glob@3.0.1, npm/doctrine@3.0.0, npm/dom-converter@0.2.0, npm/dom-serializer@1.4.1, npm/domelementtype@2.3.0, npm/domhandler@4.3.1, npm/domutils@2.8.0, npm/dot-case@3.0.4, npm/dotenv-expand@10.0.0, npm/dotenv@16.4.5, npm/duplexify@3.7.1, npm/eastasianwidth@0.2.0, npm/editions@1.3.4, npm/ee-first@1.1.1, npm/ejs@3.1.9, npm/electron-to-chromium@1.4.679, npm/ember-cli-babel-plugin-helpers@1.1.1, npm/ember-cli-babel@7.26.11, npm/ember-cli-get-component-path-option@1.0.0, npm/ember-cli-is-package-missing@1.0.0, npm/ember-cli-normalize-entity-name@1.0.0, npm/ember-cli-path-utils@1.0.0, npm/ember-cli-string-utils@1.1.0, npm/ember-cli-version-checker@4.1.1, npm/ember-cli-version-checker@5.1.2, npm/ember-rfc176-data@0.3.18, npm/ember-router-generator@2.0.0, npm/ember-source@3.24.7, npm/ember-source@3.28.12, npm/emoji-regex@8.0.0, npm/emojis-list@3.0.0, npm/encodeurl@1.0.2, npm/end-of-stream@1.4.4, npm/enhanced-resolve@5.15.0, npm/ensure-posix-path@1.1.1, npm/entities@2.2.0, npm/envinfo@7.11.1, npm/error-ex@1.3.2, npm/esbuild-plugin-alias@0.2.1, npm/esbuild-register@3.5.0, npm/esbuild@0.18.20, npm/escalade@3.1.2, npm/escape-html@1.0.3, npm/escape-string-regexp@1.0.5, npm/eslint-scope@5.1.1, npm/esprima@4.0.1, npm/esrecurse@4.3.0, npm/estraverse@4.3.0, npm/estraverse@5.3.0, npm/esutils@2.0.3, npm/etag@1.8.1, npm/events@3.3.0, npm/execa@5.1.1, npm/execa@8.0.1, npm/express@4.18.2, npm/extend@3.0.2, npm/extract-zip@1.7.0, npm/fast-deep-equal@3.1.3, npm/fast-glob@3.3.2, npm/fast-json-stable-stringify@2.1.0, npm/fast-ordered-set@1.0.3, npm/fast-sourcemap-concat@2.1.1, npm/fastq@1.17.1, npm/fault@1.0.4, npm/fb-watchman@2.0.2, npm/fd-slicer@1.1.0, npm/fetch-retry@5.0.6, npm/file-system-cache@2.3.0, npm/filelist@1.0.4, npm/fill-range@7.0.1, npm/finalhandler@1.2.0, npm/find-babel-config@1.2.0, npm/find-cache-dir@3.3.2, npm/find-cache-dir@4.0.0, npm/find-index@1.1.1, npm/find-up@2.1.0, npm/find-up@5.0.0, npm/find-up@6.3.0, npm/fixturify-project@1.10.0, npm/fixturify@1.3.0, npm/flow-parser@0.229.0, npm/for-each@0.3.3, npm/foreground-child@3.1.1, npm/fork-ts-checker-webpack-plugin@8.0.0, npm/form-data@4.0.0, npm/format@0.2.2, npm/forwarded@0.2.0, npm/fresh@0.5.2, npm/fs-constants@1.0.0, npm/fs-extra@11.1.1, npm/fs-extra@11.2.0, npm/fs-extra@5.0.0, npm/fs-extra@7.0.1, npm/fs-extra@8.1.0, npm/fs-merger@3.2.1, npm/fs-minipass@2.1.0, npm/fs-monkey@1.0.5, npm/fs-tree-diff@0.5.9, npm/fs-tree-diff@2.0.1, npm/fs-updater@1.0.4, npm/fs.realpath@1.0.0, npm/function-bind@1.1.2, npm/gensync@1.0.0-beta.2, npm/get-intrinsic@1.2.4, npm/get-nonce@1.0.1, npm/get-npm-tarball-url@2.1.0, npm/get-package-type@0.1.0, npm/get-port@5.1.1, npm/get-stream@6.0.1, npm/get-stream@8.0.1, npm/giget@1.2.1, npm/github-slugger@1.5.0, npm/glob-parent@5.1.2, npm/glob-to-regexp@0.4.1, npm/glob@10.3.10, npm/glob@5.0.15, npm/globals@11.12.0, npm/globby@11.1.0, npm/gopd@1.0.1, npm/graceful-fs@4.2.11, npm/gunzip-maybe@1.4.2, npm/handlebars@4.7.8, npm/has-flag@3.0.0, npm/has-flag@4.0.0, npm/has-property-descriptors@1.0.2, npm/has-proto@1.0.3, npm/has-symbols@1.0.3, npm/has-tostringtag@1.0.2, npm/hash-for-dep@1.5.1, npm/hasown@2.0.1, npm/hast-util-parse-selector@2.2.5, npm/hastscript@6.0.0, npm/he@1.2.0, npm/heimdalljs-logger@0.1.10, npm/heimdalljs@0.2.6, npm/highlight.js@10.7.3, npm/hosted-git-info@2.8.9, npm/html-entities@2.4.0, npm/html-minifier-terser@6.1.0, npm/html-webpack-plugin@5.6.0, npm/htmlparser2@6.1.0, npm/http-errors@2.0.0, npm/https-proxy-agent@4.0.0, npm/human-signals@2.1.0, npm/human-signals@5.0.0, npm/iconv-lite@0.4.24, npm/icss-utils@5.1.0, npm/ieee754@1.2.1, npm/ignore@5.3.1, npm/import-fresh@3.3.0, npm/imurmurhash@0.1.4, npm/indent-string@4.0.0, npm/inflection@1.13.4, npm/inflight@1.0.6, npm/inherits@2.0.4, npm/invariant@2.2.4, npm/ip@2.0.1, npm/ipaddr.js@1.9.1, npm/is-absolute-url@3.0.3, npm/is-alphabetical@1.0.4, npm/is-alphanumerical@1.0.4, npm/is-arguments@1.1.1, npm/is-arrayish@0.2.1, npm/is-binary-path@2.1.0, npm/is-callable@1.2.7, npm/is-core-module@2.13.1, npm/is-decimal@1.0.4, npm/is-deflate@1.0.0, npm/is-docker@2.2.1, npm/is-extglob@2.1.1, npm/is-fullwidth-code-point@3.0.0, npm/is-generator-function@1.0.10, npm/is-glob@4.0.3, npm/is-gzip@1.0.0, npm/is-hexadecimal@1.0.4, npm/is-interactive@1.0.0, npm/is-nan@1.3.2, npm/is-number@7.0.0, npm/is-path-cwd@2.2.0, npm/is-path-inside@3.0.3, npm/is-plain-object@2.0.4, npm/is-stream@2.0.1, npm/is-stream@3.0.0, npm/is-typed-array@1.1.13, npm/is-unicode-supported@0.1.0, npm/is-wsl@2.2.0, npm/isarray@1.0.0, npm/isarray@2.0.5, npm/isexe@2.0.0, npm/isobject@3.0.1, npm/istanbul-lib-coverage@3.2.2, npm/istanbul-lib-instrument@5.2.1, npm/istextorbinary@2.1.0, npm/jackspeak@2.3.6, npm/jake@10.8.7, npm/jest-haste-map@29.7.0, npm/jest-regex-util@29.6.3, npm/jest-util@29.7.0, npm/jest-worker@29.7.0, npm/jquery@3.7.1, npm/js-tokens@4.0.0, npm/jscodeshift@0.14.0, npm/jsesc@2.5.2, npm/json-parse-even-better-errors@2.3.1, npm/json-schema-traverse@1.0.0, npm/json-stable-stringify@1.1.1, npm/json5@0.5.1, npm/json5@2.2.3, npm/jsonfile@4.0.0, npm/jsonfile@6.1.0, npm/jsonify@0.0.1, npm/kind-of@6.0.3, npm/kleur@3.0.3, npm/lazy-universal-dotenv@4.0.0, npm/leven@3.1.0, npm/lines-and-columns@1.2.4, npm/loader-runner@4.3.0, npm/locate-path@2.0.0, npm/locate-path@6.0.0, npm/locate-path@7.2.0, npm/lodash.debounce@4.0.8, npm/lodash.merge@4.6.2, npm/lodash.omit@4.5.0, npm/lodash.uniq@4.5.0, npm/lodash@4.17.21, npm/log-symbols@4.1.0, npm/loose-envify@1.4.0, npm/lower-case@2.0.2, npm/lowlight@1.20.0, npm/lru-cache@10.2.0, npm/make-dir@3.1.0, npm/makeerror@1.0.12, npm/map-or-similar@1.5.0, npm/markdown-to-jsx@7.4.1, npm/matcher-collection@1.1.2, npm/matcher-collection@2.0.1, npm/mdast-util-definitions@4.0.0, npm/mdast-util-to-string@1.1.0, npm/media-typer@0.3.0, npm/memfs@3.6.0, npm/memoizerific@1.11.3, npm/memory-streams@0.1.3, npm/merge-descriptors@1.0.1, npm/merge-stream@2.0.0, npm/merge-trees@2.0.0, npm/merge2@1.4.1, npm/methods@1.1.2, npm/micromatch@4.0.5, npm/mime-db@1.52.0, npm/mime-types@2.1.35, npm/mime@1.6.0, npm/mimic-fn@2.1.0, npm/mimic-fn@4.0.0, npm/minimatch@3.1.2, npm/minimatch@5.1.6, npm/minimist@1.2.8, npm/minipass@3.3.6, npm/minipass@7.0.4, npm/minizlib@2.1.2, npm/mkdirp-classic@0.5.3, npm/mkdirp@0.5.6, npm/mktemp@0.4.0, npm/ms@2.0.0, npm/ms@2.1.2, npm/nanoid@3.3.7, npm/negotiator@0.6.3, npm/neo-async@2.6.2, npm/no-case@3.0.4, npm/node-abort-controller@3.1.1, npm/node-dir@0.1.17, npm/node-fetch-native@1.6.2, npm/node-fetch@2.7.0, npm/node-int64@0.4.0, npm/node-releases@2.0.14, npm/normalize-package-data@2.5.0, npm/normalize-path@3.0.0, npm/npm-run-path@4.0.1, npm/npm-run-path@5.2.0, npm/nth-check@2.1.1, npm/nypm@0.3.6, npm/object-assign@4.1.1, npm/object-hash@1.3.1, npm/object-inspect@1.13.1, npm/object-is@1.1.5, npm/object-keys@1.1.1, npm/object.assign@4.1.5, npm/ohash@1.1.3, npm/on-finished@2.4.1, npm/on-headers@1.0.2, npm/once@1.4.0, npm/onetime@5.1.2, npm/onetime@6.0.0, npm/open@8.4.2, npm/ora@5.4.1, npm/os-browserify@0.3.0, npm/os-tmpdir@1.0.2, npm/p-limit@1.3.0, npm/p-limit@2.3.0, npm/p-limit@3.1.0, npm/p-limit@4.0.0, npm/p-locate@2.0.0, npm/p-locate@4.1.0, npm/p-locate@5.0.0, npm/p-locate@6.0.0, npm/p-map@4.0.0, npm/p-try@1.0.0, npm/p-try@2.2.0, npm/pako@0.2.9, npm/pako@1.0.11, npm/param-case@3.0.4, npm/parent-module@1.0.1, npm/parse-entities@2.0.0, npm/parse-json@5.2.0, npm/parseurl@1.3.3, npm/pascal-case@3.1.2, npm/path-browserify@1.0.1, npm/path-exists@5.0.0, npm/path-is-absolute@1.0.1, npm/path-key@3.1.1, npm/path-key@4.0.0, npm/path-parse@1.0.7, npm/path-posix@1.0.0, npm/path-root-regex@0.1.2, npm/path-root@0.1.1, npm/path-scurry@1.10.1, npm/path-to-regexp@0.1.7, npm/path-type@4.0.0, npm/pathe@1.1.2, npm/peek-stream@1.1.3, npm/pend@1.2.0, npm/picocolors@1.0.0, npm/picomatch@2.3.1, npm/pify@4.0.1, npm/pirates@4.0.6, npm/pkg-dir@4.2.0, npm/pkg-dir@5.0.0, npm/pkg-dir@7.0.0, npm/pkg-up@2.0.0, npm/polished@4.3.1, npm/postcss-modules-extract-imports@3.0.0, npm/postcss-modules-local-by-default@4.0.4, npm/postcss-modules-scope@3.1.1, npm/postcss-modules-values@4.0.0, npm/postcss-selector-parser@6.0.15, npm/postcss-value-parser@4.2.0, npm/pretty-error@4.0.0, npm/pretty-hrtime@1.0.3, npm/prismjs@1.29.0, npm/private@0.1.8, npm/process-nextick-args@2.0.1, npm/process@0.11.10, npm/progress@2.0.3, npm/promise-map-series@0.2.3, npm/promise-map-series@0.3.0, npm/prompts@2.4.2, npm/prop-types@15.8.1, npm/property-information@5.6.0, npm/proxy-addr@2.0.7, npm/proxy-from-env@1.1.0, npm/pump@3.0.0, npm/pumpify@1.5.1, npm/qs@6.11.0, npm/readable-stream@2.3.8, npm/readable-stream@3.6.2, npm/recast@0.18.10, npm/recast@0.21.5, npm/resolve-from@4.0.0, npm/resolve-package-path@1.2.7, npm/resolve-package-path@2.0.0, npm/rimraf@3.0.2, npm/rsvp@3.2.1, npm/rsvp@3.6.2, npm/safe-buffer@5.1.2, npm/schema-utils@2.7.1, npm/schema-utils@3.3.0, npm/semver@7.6.0, npm/signal-exit@3.0.7, npm/source-map@0.4.4, npm/string-width@4.2.3, npm/string_decoder@1.1.1, npm/string_decoder@1.3.0, npm/strip-ansi@6.0.1, npm/strip-final-newline@3.0.0, npm/supports-color@5.5.0, npm/supports-color@8.1.1, npm/tmp@0.0.28, npm/tslib@1.14.1, npm/universalify@2.0.1, npm/walk-sync@1.1.4, npm/walk-sync@2.2.0, npm/write-file-atomic@2.4.3, npm/yallist@3.1.1, npm/yocto-queue@0.1.0

View full report↗︎

Next steps

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/foo@1.0.0 or ignore all packages with @SocketSecurity ignore-all

[larsrickert]

Just to add a personal anecdote, I'm using component-meta in our product to help generate docs for our design system, the forceTs option was prohibitively slow for us. For 125 components that went from ~15s to just under ~4s

Unfortunately this didn't improve performance in my tests :/

[larsrickert]

@kasperpeulen As discussed:

• framework option is added and defaults to "vue-docgen-api"
• only thing left to do is to document the change so people are aware of the new feature :) Is the MIGRATION.md the right place for this? Seems like only breaking changes are added there, not new features.

[kasperpeulen]

Right, as it is not breaking anymore it doesn't have to be added to MIGRATION.md.
We will update the documentation cc @kylegach and probably do 8.0 feature post about it cc @joevaugh4n

[chakAs3]

Right, as it is not breaking anymore it doesn't have to be added to MIGRATION.md. We will update the documentation cc @kylegach and probably do 8.0 feature post about it cc @joevaugh4n

It's fantastic to see this PR evolving nicely! Huge thanks to everyone involved for their contributions. While the documentation may need some refinement with @kylegach to fit into the official docs, I'm eager to assist with that. Additionally, I'm keen to collaborate on the blog post with @joevaugh4n. Big kudos to @kasperpeulen & @larsrickert for their efforts! 👍 🚀

[chakAs3]

i rather suggest to call it vue-component-meta (the package namee) to be more specific as Volar is the larger it includes all vue language tools

const config: StorybookConfig = {
  framework: {
    name: '@storybook/vue3-vite',
    options: {
      docgen: 'vue-component-meta', // defaults to vue-docgen-api
    },
  },
};

[chakAs3]

In this way, we are also able to improve the performance in the meantime without blocking this PR.
Maybe @IanVS @ndelangen or @joshwooding have some tips how they did this with react-docgen-typescript.
I guess we might somehow be able to scan lazy load one component at a time? Instead of all at startup.

i think the actual problem with performance is due to files transform, Volar is so fast because it does extract meta via static code analysis.
Maybe generating virtual component meta files in build time will eliminate completely this issue.

[kasperpeulen]

i think the actual problem with performance is due to files transform, Volar is so fast because it does extract meta via static code analysis.
Maybe generating virtual component meta files in build time will eliminate completely this issue.

Interesting, let's experiment with that in 8.x.

[kasperpeulen]

Thanks so much @chakAs3 and @larsrickert

[thomasaull]

Thanks guys for all your work on it!

[larsrickert]

Great that we got this PR ready 🚀 Special thanks to @kasperpeulen and @chakAs3 and everyone testing out the changes!

tl;dr: To use the new improved docgen plugin, just set the following and enjoy (once its released^^):

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/vue3-vite';

const config: StorybookConfig = {
  framework: {
    name: '@storybook/vue3-vite',
    options: {
      docgen: "vue-component-meta"
    },
  },
};

export default config;

[ianjamieson]

For others that might also be stuck, I needed to explicitly define my tsconfig.app.json file as well, as documented here.

Resulting in a config like this

import type { StorybookConfig } from '@storybook/vue3-vite';

const config: StorybookConfig = {
   // ... everything else
  'framework': {
    'name': '@storybook/vue3-vite',
    'options': {
      docgen: {
        plugin: 'vue-component-meta',
        tsconfig: 'tsconfig.app.json',
      },
    }
  }
};
export default config;