diff --git a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts b/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts index 54ac30cbb9dd..a263635a44f8 100644 --- a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts +++ b/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts @@ -50,6 +50,26 @@ export async function vueComponentMeta(tsconfigPath = 'tsconfig.json'): Promise< const exportName = exportNames[index]; + // we remove nested object schemas here since they are not used inside Storybook (we don't generate controls for object properties) + // and they can cause "out of memory" issues for large/complex schemas (e.g. HTMLElement) + // it also reduced the bundle size when running "Storybook build" when such schemas are used + (['props', 'exposed'] as const).forEach((key) => { + meta[key].forEach((value) => { + if (typeof value.schema !== 'object') return; + + // we need to use Object.defineProperty here since schema is a getter so we can not set it directly + Object.defineProperty(value, 'schema', { + configurable: true, + enumerable: true, + value: { + kind: value.schema.kind, + type: value.schema.type, + // note that value.schema.schema is not included here (see comment above) + }, + }); + }); + }); + const exposed = // the meta also includes duplicated entries in the "exposed" array with "on" // prefix (e.g. onClick instead of click), so we need to filter them out here diff --git a/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap b/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap index cbe74a47b7d6..39e2654bcff4 100644 --- a/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap +++ b/code/renderers/vue3/src/docs/__snapshots__/extractArgTypes.test.ts.snap @@ -157,12 +157,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 "value": { "name": "object", "required": false, - "value": { - "nestedProp": { - "name": "string", - "required": true, - }, - }, + "value": {}, }, }, }, @@ -183,12 +178,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 "value": { "name": "object", "required": false, - "value": { - "nestedProp": { - "name": "string", - "required": true, - }, - }, + "value": {}, }, }, }, @@ -279,12 +269,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 "type": { "name": "object", "required": true, - "value": { - "foo": { - "name": "string", - "required": true, - }, - }, + "value": {}, }, }, "literalFromContext": { @@ -325,12 +310,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 "type": { "name": "object", "required": true, - "value": { - "nestedProp": { - "name": "string", - "required": true, - }, - }, + "value": {}, }, }, "nestedIntersection": { @@ -347,16 +327,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 "type": { "name": "object", "required": true, - "value": { - "additionalProp": { - "name": "string", - "required": true, - }, - "nestedProp": { - "name": "string", - "required": true, - }, - }, + "value": {}, }, }, "nestedOptional": { @@ -377,22 +348,12 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 { "name": "object", "required": false, - "value": { - "nestedProp": { - "name": "string", - "required": true, - }, - }, + "value": {}, }, { "name": "object", "required": false, - "value": { - "nestedProp": { - "name": "string", - "required": true, - }, - }, + "value": {}, }, ], }, @@ -411,13 +372,7 @@ exports[`extractArgTypes (vue-docgen-api) > should extract props for component 1 "type": { "name": "object", "required": false, - "value": { - "recursive": { - "name": "other", - "required": true, - "value": "MyNestedRecursiveProps", - }, - }, + "value": {}, }, }, "stringArray": { diff --git a/code/renderers/vue3/src/docs/extractArgTypes.ts b/code/renderers/vue3/src/docs/extractArgTypes.ts index 76c52cc755a7..31f4d19dc163 100644 --- a/code/renderers/vue3/src/docs/extractArgTypes.ts +++ b/code/renderers/vue3/src/docs/extractArgTypes.ts @@ -1,3 +1,4 @@ +import type { VueDocgenInfo, VueDocgenInfoEntry, VueDocgenPlugin } from '@storybook/vue3-vite'; import type { ExtractedProp } from 'storybook/internal/docs-tools'; import { convert, @@ -6,7 +7,6 @@ import { type ArgTypesExtractor, } from 'storybook/internal/docs-tools'; import type { SBType, StrictArgTypes, StrictInputType } from 'storybook/internal/types'; -import type { VueDocgenInfo, VueDocgenInfoEntry, VueDocgenPlugin } from '@storybook/vue3-vite'; type PropertyMetaSchema = VueDocgenInfoEntry<'vue-component-meta', 'props'>['schema']; @@ -283,17 +283,12 @@ export const convertVueComponentMetaProp = ( }; } - // recursively/deeply convert all properties of the object case 'object': return { name: 'object', - value: Object.entries(schema.schema ?? {}).reduce>( - (obj, [propName, propSchema]) => { - obj[propName] = convertVueComponentMetaProp(propSchema); - return obj; - }, - {} - ), + // while Storybook generates simple JSON object controls, nested schemas don't have specialized controls + // so we don't need to recursively map the object schema here + value: {}, required, };