GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 07:21:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactory and optimisation .

Browse Source
This commit is contained in:
chakir qatab 2023-01-16 01:16:51 +04:00
parent 1695dda5a7
commit 33551817ef
1 changed files with 13 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
code/renderers/vue3/src/docs/sourceDecorator.ts
View File

@ -68,22 +68,20 @@ function generateAttributesSource(_args: Args, argTypes: ArgTypes, byRef?: boole
['children', 'slots'].indexOf(argTypes[key]?.table?.category) === -1 || !argTypes[key] // remove slots and children ['children', 'slots'].indexOf(argTypes[key]?.table?.category) === -1 || !argTypes[key] // remove slots and children
) )
.map((key) => { .map((key) => {
const akey = key.replace(/([A-Z])/g, '-$1').toLowerCase(); const akey =
argTypes[key]?.table?.category !== 'events' // is event
? key
.replace(/([A-Z])/g, '-$1')
.replace(/^on-/, 'v-on:')
.replace(/^:/, '')
.toLowerCase()
: `v-on:${key}`;
args[akey] = args[key]; args[akey] = args[key];
if (
(typeof args[key] === 'function' && !argTypes[key]?.type) ||
argTypes[key]?.table?.category === 'events'
) {
args[`:${akey}`] = '() => {}';
if (!akey.startsWith('on')) delete args[`:${akey}`]; // remove the event key
return `:${akey}`;
}
return akey; return akey;
}) })
.filter((key, index, self) => self.indexOf(key) === index); // remove duplicated keys .filter((key, index, self) => self.indexOf(key) === index); // remove duplicated keys
// generate the source code for each key and filter out empty strings
const camelCase = (str: string) => str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
const camelCase = (str: string) => str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
const source = argsKeys const source = argsKeys
.map((key) => .map((key) =>
generateAttributeSource( generateAttributeSource(
@ -92,20 +90,16 @@ function generateAttributesSource(_args: Args, argTypes: ArgTypes, byRef?: boole
argTypes[key] argTypes[key]
) )
) )
.filter((item) => item !== '')
.join(' '); .join(' ');
return source; return source;
} }
function generateAttributeSource( function generateAttributeSource(
_key: string, key: string,
value: Args[keyof Args], value: Args[keyof Args],
argType: ArgTypes[keyof ArgTypes] argType: ArgTypes[keyof ArgTypes]
): string { ): string {
const toKey = (key: string) => key.replace(/([A-Z])/g, '-$1').toLowerCase();
const key = toKey(_key); // .replace(':on-', 'on-');
if (!value) { if (!value) {
return ''; return '';
} }
@ -114,8 +108,8 @@ function generateAttributeSource(
return key; return key;
} }
if (typeof value === 'function' || argType?.table?.category === 'events' || argType?.action) { if (key.startsWith('v-on:')) {
return `:${key}='${value}'`; return `${key}='() => {}'`;
} }
if (typeof value === 'string') { if (typeof value === 'string') {
@ -295,7 +289,7 @@ export const sourceDecorator = (storyFn: any, context: StoryContext<Renderer>) =
useEffect(() => { useEffect(() => {
if (!skip && source) { if (!skip && source) {
channel.emit(SNIPPET_RENDERED, (context || {}).id, source, 'html'); channel.emit(SNIPPET_RENDERED, (context || {}).id, source, 'vue');
} }
}); });