Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 203 commits into from
Feb 23, 2024

Conversation

chakAs3
Copy link
Contributor

@chakAs3 chakAs3 commented Apr 27, 2023

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

and other issues

Current PR status / open points

Status from: 18 February 2024

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' } } })
image

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

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

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

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

@chakAs3 chakAs3 added maintenance User-facing maintenance tasks vue vue3 labels Apr 27, 2023
@chakAs3 chakAs3 added the ci:daily Run the CI jobs that normally run in the daily job. label Apr 27, 2023
@JReinhold JReinhold marked this pull request as draft May 1, 2023 14:17
@socket-security
Copy link

socket-security bot commented May 8, 2023

👍 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

@chakAs3 chakAs3 changed the title WIP: replacing vue-docgen-api with Volar vue-component-meta Vue: replacing vue-docgen-api with Volar vue-component-meta May 22, 2023
@chakAs3 chakAs3 marked this pull request as ready for review May 22, 2023 11:07
@larsrickert
Copy link
Contributor

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
Copy link
Contributor

@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
Copy link
Contributor

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
Copy link
Contributor Author

chakAs3 commented Feb 22, 2024

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
Copy link
Contributor Author

chakAs3 commented Feb 22, 2024

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
Copy link
Contributor Author

chakAs3 commented Feb 22, 2024

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
Copy link
Contributor

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.

Copy link
Contributor

@kasperpeulen kasperpeulen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks so much @chakAs3 and @larsrickert

@thomasaull
Copy link

Thanks guys for all your work on it!

@larsrickert
Copy link
Contributor

larsrickert commented Feb 23, 2024

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;

@kasperpeulen kasperpeulen added this pull request to the merge queue Feb 23, 2024
@kasperpeulen kasperpeulen removed this pull request from the merge queue due to the queue being cleared Feb 23, 2024
@kasperpeulen kasperpeulen merged commit 2a8d0b9 into next Feb 23, 2024
107 of 108 checks passed
@kasperpeulen kasperpeulen deleted the chaks/vue-component-meta branch February 23, 2024 16:16
@github-actions github-actions bot mentioned this pull request Feb 23, 2024
16 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ci:daily Run the CI jobs that normally run in the daily job. maintenance User-facing maintenance tasks vue vue3
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: vue-docgen-plugin cannot parse functional component