From 3b7f12e40b0a176a897a7f6323e257e660d3f4db Mon Sep 17 00:00:00 2001 From: Ossama Sybesma Date: Tue, 5 Sep 2023 14:56:21 +0000 Subject: [PATCH 1/3] fix: Added options parameter --- code/frameworks/vue3-vite/src/plugins/vue-docgen.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts b/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts index 6bed6a1fed98..b233d92a60cf 100644 --- a/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts +++ b/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts @@ -3,7 +3,7 @@ import type { PluginOption } from 'vite'; import { createFilter } from 'vite'; import MagicString from 'magic-string'; -export function vueDocgen(): PluginOption { +export function vueDocgen(options): PluginOption { const include = /\.(vue)$/; const filter = createFilter(include); @@ -13,7 +13,7 @@ export function vueDocgen(): PluginOption { async transform(src: string, id: string) { if (!filter(id)) return undefined; - const metaData = await parse(id); + const metaData = await parse(id, options); const metaSource = JSON.stringify(metaData); const s = new MagicString(src); s.append(`;_sfc_main.__docgenInfo = ${metaSource}`); From c28e6808b138bac693e40c1728baad6f1f1972b0 Mon Sep 17 00:00:00 2001 From: Ossama Sybesma Date: Thu, 7 Sep 2023 07:07:02 +0000 Subject: [PATCH 2/3] feat: Vue docgen options --- code/frameworks/vue-vite/src/types.ts | 2 ++ code/frameworks/vue3-vite/src/plugins/vue-docgen.ts | 4 ++-- code/frameworks/vue3-vite/src/preset.ts | 4 +++- code/frameworks/vue3-vite/src/types.ts | 2 ++ 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/code/frameworks/vue-vite/src/types.ts b/code/frameworks/vue-vite/src/types.ts index e5ba544f554c..02412b374d85 100644 --- a/code/frameworks/vue-vite/src/types.ts +++ b/code/frameworks/vue-vite/src/types.ts @@ -1,11 +1,13 @@ import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'; import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite'; +import type { DocGenOptions } from 'vue-docgen-api'; type FrameworkName = '@storybook/vue-vite'; type BuilderName = '@storybook/builder-vite'; export type FrameworkOptions = { builder?: BuilderOptions; + docgenOptions?: DocGenOptions; }; type StorybookConfigFramework = { diff --git a/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts b/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts index b233d92a60cf..0b83ae75116d 100644 --- a/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts +++ b/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts @@ -1,9 +1,9 @@ -import { parse } from 'vue-docgen-api'; +import { DocGenOptions, parse } from 'vue-docgen-api'; import type { PluginOption } from 'vite'; import { createFilter } from 'vite'; import MagicString from 'magic-string'; -export function vueDocgen(options): PluginOption { +export function vueDocgen(options?: DocGenOptions): PluginOption { const include = /\.(vue)$/; const filter = createFilter(include); diff --git a/code/frameworks/vue3-vite/src/preset.ts b/code/frameworks/vue3-vite/src/preset.ts index b987f0381c0b..2c2d9be5f184 100644 --- a/code/frameworks/vue3-vite/src/preset.ts +++ b/code/frameworks/vue3-vite/src/preset.ts @@ -22,8 +22,10 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets plugins.push(vue()); } + const framework = await presets.apply('framework'); + // Add docgen plugin - plugins.push(vueDocgen()); + plugins.push(vueDocgen(typeof framework === 'string' ? undefined : framework.options.docgenOptions)); return mergeConfig(config, { plugins, diff --git a/code/frameworks/vue3-vite/src/types.ts b/code/frameworks/vue3-vite/src/types.ts index 1461f586aeed..fdce85ae8ece 100644 --- a/code/frameworks/vue3-vite/src/types.ts +++ b/code/frameworks/vue3-vite/src/types.ts @@ -1,11 +1,13 @@ import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'; import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite'; +import type { DocGenOptions } from 'vue-docgen-api'; type FrameworkName = '@storybook/vue3-vite'; type BuilderName = '@storybook/builder-vite'; export type FrameworkOptions = { builder?: BuilderOptions; + docgenOptions?: DocGenOptions; }; type StorybookConfigFramework = { From 9eb32038e4e1ce31b1b885ed181e6d9d33018633 Mon Sep 17 00:00:00 2001 From: Ossama Sybesma Date: Thu, 7 Sep 2023 08:18:57 +0000 Subject: [PATCH 3/3] docs: Configration for docgen --- code/addons/docs/vue/README.md | 22 ++++++++++------------ code/addons/docs/vue3/README.md | 22 ++++++++++------------ 2 files changed, 20 insertions(+), 24 deletions(-) diff --git a/code/addons/docs/vue/README.md b/code/addons/docs/vue/README.md index 17156db24017..2a64c4e31f40 100644 --- a/code/addons/docs/vue/README.md +++ b/code/addons/docs/vue/README.md @@ -36,24 +36,22 @@ export default { ## Preset options -The `addon-docs` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app: +The `framework` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app: ```js import * as path from 'path'; export default { - addons: [ - { - name: '@storybook/addon-docs', - options: { - vueDocgenOptions: { - alias: { - '@': path.resolve(__dirname, '../'), - }, - }, - }, + framework: { + name: '@storybook/vue-vite', + options: { + docgenOptions: { + alias: { + '@': path.resolve(__dirname, '../'), + } + } }, - ], + }, }; ``` diff --git a/code/addons/docs/vue3/README.md b/code/addons/docs/vue3/README.md index 4d79d29fad1d..4882247474cb 100644 --- a/code/addons/docs/vue3/README.md +++ b/code/addons/docs/vue3/README.md @@ -36,24 +36,22 @@ export default { ## Preset options -The `addon-docs` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app: +The `framework` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app: ```js import * as path from 'path'; export default { - addons: [ - { - name: '@storybook/addon-docs', - options: { - vueDocgenOptions: { - alias: { - '@': path.resolve(__dirname, '../'), - }, - }, - }, + framework: { + name: '@storybook/vue3-vite', + options: { + docgenOptions: { + alias: { + '@': path.resolve(__dirname, '../'), + } + } }, - ], + }, }; ```