mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 08:31:06 +08:00
Vue: Clean up docs preset
This commit is contained in:
Michael Shilman
parent
24e4128942
commit
a84f75a75e
@ -4,7 +4,6 @@ import { prepareForInline } from './prepareForInline';
|
||||
import { sourceDecorator } from './sourceDecorator';
|
||||
|
||||
export const parameters = {
|
||||
foobar: 'baz',
|
||||
docs: {
|
||||
inlineStories: true,
|
||||
iframeHeight: 120,
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
import { extractComponentDescription } from '@storybook/docs-tools';
|
||||
import { extractArgTypes } from './extractArgTypes';
|
||||
import { prepareForInline } from './prepareForInline';
|
||||
import { sourceDecorator } from './sourceDecorator';
|
||||
|
||||
console.log('hello2');
|
||||
|
||||
export const parameters = {
|
||||
foobar: 'baz',
|
||||
docs: {
|
||||
inlineStories: true,
|
||||
iframeHeight: 120,
|
||||
prepareForInline,
|
||||
extractArgTypes,
|
||||
extractComponentDescription,
|
||||
},
|
||||
};
|
||||
|
||||
export const decorators = [sourceDecorator];
|
||||
@ -1,86 +0,0 @@
|
||||
import type { StrictArgTypes } from '@storybook/csf';
|
||||
import type { ArgTypesExtractor, DocgenInfo, PropDef } from '@storybook/docs-tools';
|
||||
import { hasDocgen, extractComponentProps, convert } from '@storybook/docs-tools';
|
||||
|
||||
const SECTIONS = ['props', 'events', 'slots', 'methods'];
|
||||
|
||||
/**
|
||||
* Check if "@values" tag is defined within docgenInfo.
|
||||
* If true, then propDef is mutated.
|
||||
*/
|
||||
function isEnum(propDef: PropDef, docgenInfo: DocgenInfo): false | PropDef {
|
||||
// cast as any, since "values" doesn't exist in DocgenInfo type
|
||||
const { type, values } = docgenInfo as any;
|
||||
const matched = Array.isArray(values) && values.length && type.name !== 'enum';
|
||||
|
||||
if (!matched) return false;
|
||||
|
||||
const enumString = values.join(', ');
|
||||
let { summary } = propDef.type;
|
||||
summary = summary ? `${summary}: ${enumString}` : enumString;
|
||||
|
||||
Object.assign(propDef.type, {
|
||||
...propDef.type,
|
||||
name: 'enum',
|
||||
value: values,
|
||||
summary,
|
||||
});
|
||||
return propDef;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {Array} result
|
||||
* @returns {PropDef} result.def - propDef
|
||||
* @returns {boolean} result.isChanged - flag whether propDef is mutated or not.
|
||||
* this is needed to prevent sbType from performing convert(docgenInfo).
|
||||
*/
|
||||
function verifyPropDef(propDef: PropDef, docgenInfo: DocgenInfo): [PropDef, boolean] {
|
||||
let def = propDef;
|
||||
let isChanged = false;
|
||||
|
||||
// another callback can be added here.
|
||||
// callback is mutually exclusive from each other.
|
||||
const callbacks = [isEnum];
|
||||
for (let i = 0, len = callbacks.length; i < len; i += 1) {
|
||||
const matched = callbacks[i](propDef, docgenInfo);
|
||||
if (matched) {
|
||||
def = matched;
|
||||
isChanged = true;
|
||||
}
|
||||
}
|
||||
|
||||
return [def, isChanged];
|
||||
}
|
||||
|
||||
export const extractArgTypes: ArgTypesExtractor = (component) => {
|
||||
if (!hasDocgen(component)) {
|
||||
return null;
|
||||
}
|
||||
const results: StrictArgTypes = {};
|
||||
SECTIONS.forEach((section) => {
|
||||
const props = extractComponentProps(component, section);
|
||||
props.forEach(({ propDef, docgenInfo, jsDocTags }) => {
|
||||
const [result, isPropDefChanged] = verifyPropDef(propDef, docgenInfo);
|
||||
const { name, type, description, defaultValue: defaultSummary, required } = result;
|
||||
|
||||
let sbType;
|
||||
if (isPropDefChanged) {
|
||||
sbType = type;
|
||||
} else {
|
||||
sbType = section === 'props' ? convert(docgenInfo) : { name: 'void' };
|
||||
}
|
||||
results[name] = {
|
||||
name,
|
||||
description,
|
||||
type: { required, ...sbType },
|
||||
table: {
|
||||
type,
|
||||
jsDocTags,
|
||||
defaultValue: defaultSummary,
|
||||
category: section,
|
||||
},
|
||||
};
|
||||
});
|
||||
});
|
||||
return results;
|
||||
};
|
||||
@ -1,39 +0,0 @@
|
||||
import React from 'react';
|
||||
import Vue from 'vue';
|
||||
import type { StoryContext, PartialStoryFn } from '@storybook/csf';
|
||||
import type { VueFramework } from '../types-6-0';
|
||||
|
||||
// Inspired by https://github.com/egoist/vue-to-react,
|
||||
// modified to store args as props in the root store
|
||||
|
||||
// FIXME get this from @storybook/vue
|
||||
const COMPONENT = 'STORYBOOK_COMPONENT';
|
||||
const VALUES = 'STORYBOOK_VALUES';
|
||||
|
||||
export const prepareForInline = (
|
||||
storyFn: PartialStoryFn<VueFramework>,
|
||||
{ args }: StoryContext<VueFramework>
|
||||
) => {
|
||||
const component = storyFn();
|
||||
const el = React.useRef(null);
|
||||
|
||||
// FIXME: This recreates the Vue instance every time, which should be optimized
|
||||
React.useEffect(() => {
|
||||
const root = new Vue({
|
||||
el: el.current,
|
||||
data() {
|
||||
return {
|
||||
[COMPONENT]: component,
|
||||
[VALUES]: args,
|
||||
};
|
||||
},
|
||||
render(h) {
|
||||
const children = this[COMPONENT] ? [h(this[COMPONENT])] : undefined;
|
||||
return h('div', { attrs: { id: 'root' } }, children);
|
||||
},
|
||||
});
|
||||
return () => root.$destroy();
|
||||
});
|
||||
|
||||
return React.createElement('div', null, React.createElement('div', { ref: el }));
|
||||
};
|
||||
@ -1,144 +0,0 @@
|
||||
/* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */
|
||||
|
||||
import { ComponentOptions } from 'vue';
|
||||
import Vue from 'vue/dist/vue';
|
||||
import { vnodeToString } from './sourceDecorator';
|
||||
|
||||
expect.addSnapshotSerializer({
|
||||
print: (val: any) => val,
|
||||
test: (val) => typeof val === 'string',
|
||||
});
|
||||
|
||||
const getVNode = (Component: ComponentOptions<any, any, any>) => {
|
||||
const vm = new Vue({
|
||||
render(h: (c: any) => unknown) {
|
||||
return h(Component);
|
||||
},
|
||||
}).$mount();
|
||||
|
||||
return vm.$children[0]._vnode;
|
||||
};
|
||||
|
||||
describe('vnodeToString', () => {
|
||||
it('basic', () => {
|
||||
expect(
|
||||
vnodeToString(
|
||||
getVNode({
|
||||
template: `<button>Button</button>`,
|
||||
})
|
||||
)
|
||||
).toMatchInlineSnapshot(`<button >Button</button>`);
|
||||
});
|
||||
|
||||
it('static class', () => {
|
||||
expect(
|
||||
vnodeToString(
|
||||
getVNode({
|
||||
template: `<button class="foo bar">Button</button>`,
|
||||
})
|
||||
)
|
||||
).toMatchInlineSnapshot(`<button class="foo bar">Button</button>`);
|
||||
});
|
||||
|
||||
it('string dynamic class', () => {
|
||||
expect(
|
||||
vnodeToString(
|
||||
getVNode({
|
||||
template: `<button :class="'foo'">Button</button>`,
|
||||
})
|
||||
)
|
||||
).toMatchInlineSnapshot(`<button class="foo">Button</button>`);
|
||||
});
|
||||
|
||||
it('non-string dynamic class', () => {
|
||||
expect(
|
||||
vnodeToString(
|
||||
getVNode({
|
||||
template: `<button :class="1">Button</button>`,
|
||||
})
|
||||
)
|
||||
).toMatchInlineSnapshot(`<button >Button</button>`);
|
||||
});
|
||||
|
||||
it('array dynamic class', () => {
|
||||
expect(
|
||||
vnodeToString(
|
||||
getVNode({
|
||||
template: `<button :class="['foo', null, false, 0, {bar: true, baz: false}]">Button</button>`,
|
||||
})
|
||||
)
|
||||
).toMatchInlineSnapshot(`<button class="foo bar">Button</button>`);
|
||||
});
|
||||
|
||||
it('object dynamic class', () => {
|
||||
expect(
|
||||
vnodeToString(
|
||||
getVNode({
|
||||
template: `<button :class="{foo: true, bar: false}">Button</button>`,
|
||||
})
|
||||
)
|
||||
).toMatchInlineSnapshot(`<button class="foo">Button</button>`);
|
||||
});
|
||||
|
||||
it('merge dynamic and static classes', () => {
|
||||
expect(
|
||||
vnodeToString(
|
||||
getVNode({
|
||||
template: `<button class="foo" :class="{bar: null, baz: 1}">Button</button>`,
|
||||
})
|
||||
)
|
||||
).toMatchInlineSnapshot(`<button class="foo baz">Button</button>`);
|
||||
});
|
||||
|
||||
it('attributes', () => {
|
||||
const MyComponent: ComponentOptions<any, any, any> = {
|
||||
props: ['propA', 'propB', 'propC', 'propD', 'propE', 'propF', 'propG'],
|
||||
template: '<div/>',
|
||||
};
|
||||
|
||||
expect(
|
||||
vnodeToString(
|
||||
getVNode({
|
||||
components: { MyComponent },
|
||||
data(): { props: Record<string, any> } {
|
||||
return {
|
||||
props: {
|
||||
propA: 'propA',
|
||||
propB: 1,
|
||||
propC: null,
|
||||
propD: {
|
||||
foo: 'bar',
|
||||
},
|
||||
propE: true,
|
||||
propF() {
|
||||
const foo = 'bar';
|
||||
|
||||
return foo;
|
||||
},
|
||||
propG: undefined,
|
||||
},
|
||||
};
|
||||
},
|
||||
template: `<my-component v-bind="props"/>`,
|
||||
})
|
||||
)
|
||||
).toMatchInlineSnapshot(
|
||||
`<my-component propE :propD='{"foo":"bar"}' :propC="null" :propB="1" propA="propA"/>`
|
||||
);
|
||||
});
|
||||
|
||||
it('children', () => {
|
||||
expect(
|
||||
vnodeToString(
|
||||
getVNode({
|
||||
template: `
|
||||
<div>
|
||||
<form>
|
||||
<button>Button</button>
|
||||
</form>
|
||||
</div>`,
|
||||
})
|
||||
)
|
||||
).toMatchInlineSnapshot(`<div ><form ><button >Button</button></form></div>`);
|
||||
});
|
||||
});
|
||||
@ -1,242 +0,0 @@
|
||||
/* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */
|
||||
|
||||
import type { StoryContext } from '@storybook/csf';
|
||||
import { addons } from '@storybook/addons';
|
||||
import { logger } from '@storybook/client-logger';
|
||||
import type Vue from 'vue';
|
||||
|
||||
import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
|
||||
import type { VueFramework } from '../types-6-0';
|
||||
|
||||
export const skipSourceRender = (context: StoryContext<VueFramework>) => {
|
||||
const sourceParams = context?.parameters.docs?.source;
|
||||
const isArgsStory = context?.parameters.__isArgsStory;
|
||||
|
||||
// always render if the user forces it
|
||||
if (sourceParams?.type === SourceType.DYNAMIC) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// never render if the user is forcing the block to render code, or
|
||||
// if the user provides code, or if it's not an args story.
|
||||
return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
|
||||
};
|
||||
|
||||
export const sourceDecorator = (storyFn: any, context: StoryContext<VueFramework>) => {
|
||||
const story = storyFn();
|
||||
console.log({ story });
|
||||
|
||||
// See ../react/jsxDecorator.tsx
|
||||
if (skipSourceRender(context)) {
|
||||
return story;
|
||||
}
|
||||
|
||||
const channel = addons.getChannel();
|
||||
|
||||
const storyComponent = getStoryComponent(story.options.STORYBOOK_WRAPS);
|
||||
|
||||
return {
|
||||
components: {
|
||||
Story: story,
|
||||
},
|
||||
// We need to wait until the wrapper component to be mounted so Vue runtime
|
||||
// struct VNode tree. We get `this._vnode == null` if switch to `created`
|
||||
// lifecycle hook.
|
||||
mounted() {
|
||||
// Theoretically this does not happens but we need to check it.
|
||||
if (!this._vnode) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const storyNode = lookupStoryInstance(this, storyComponent);
|
||||
|
||||
const code = vnodeToString(storyNode._vnode);
|
||||
|
||||
const emitFormattedTemplate = async () => {
|
||||
const prettier = await import('prettier/standalone');
|
||||
const prettierHtml = await import('prettier/parser-html');
|
||||
|
||||
channel.emit(
|
||||
SNIPPET_RENDERED,
|
||||
(context || {}).id,
|
||||
prettier.format(`<template>${code}</template>`, {
|
||||
parser: 'vue',
|
||||
plugins: [prettierHtml],
|
||||
// Because the parsed vnode missing spaces right before/after the surround tag,
|
||||
// we always get weird wrapped code without this option.
|
||||
htmlWhitespaceSensitivity: 'ignore',
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
emitFormattedTemplate();
|
||||
} catch (e) {
|
||||
logger.warn(`Failed to generate dynamic story source: ${e}`);
|
||||
}
|
||||
},
|
||||
template: '<story />',
|
||||
};
|
||||
};
|
||||
|
||||
export function vnodeToString(vnode: Vue.VNode): string {
|
||||
const attrString = [
|
||||
...(vnode.data?.slot ? ([['slot', vnode.data.slot]] as [string, any][]) : []),
|
||||
['class', stringifyClassAttribute(vnode)],
|
||||
...(vnode.componentOptions?.propsData ? Object.entries(vnode.componentOptions.propsData) : []),
|
||||
...(vnode.data?.attrs ? Object.entries(vnode.data.attrs) : []),
|
||||
]
|
||||
.filter(([name], index, list) => list.findIndex((item) => item[0] === name) === index)
|
||||
.map(([name, value]) => stringifyAttr(name, value))
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
|
||||
if (!vnode.componentOptions) {
|
||||
// Non-component elements (div, span, etc...)
|
||||
if (vnode.tag) {
|
||||
if (!vnode.children) {
|
||||
return `<${vnode.tag} ${attrString}/>`;
|
||||
}
|
||||
|
||||
return `<${vnode.tag} ${attrString}>${vnode.children.map(vnodeToString).join('')}</${
|
||||
vnode.tag
|
||||
}>`;
|
||||
}
|
||||
|
||||
// TextNode
|
||||
if (vnode.text) {
|
||||
if (/[<>"&]/.test(vnode.text)) {
|
||||
return `{{\`${vnode.text.replace(/`/g, '\\`')}\`}}`;
|
||||
}
|
||||
|
||||
return vnode.text;
|
||||
}
|
||||
|
||||
// Unknown
|
||||
return '';
|
||||
}
|
||||
|
||||
// Probably users never see the "unknown-component". It seems that vnode.tag
|
||||
// is always set.
|
||||
const tag = vnode.componentOptions.tag || vnode.tag || 'unknown-component';
|
||||
|
||||
if (!vnode.componentOptions.children) {
|
||||
return `<${tag} ${attrString}/>`;
|
||||
}
|
||||
|
||||
return `<${tag} ${attrString}>${vnode.componentOptions.children
|
||||
.map(vnodeToString)
|
||||
.join('')}</${tag}>`;
|
||||
}
|
||||
|
||||
function stringifyClassAttribute(vnode: Vue.VNode): string | undefined {
|
||||
if (!vnode.data || (!vnode.data.staticClass && !vnode.data.class)) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return (
|
||||
[...(vnode.data.staticClass?.split(' ') ?? []), ...normalizeClassBinding(vnode.data.class)]
|
||||
.filter(Boolean)
|
||||
.join(' ') || undefined
|
||||
);
|
||||
}
|
||||
|
||||
// https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes
|
||||
function normalizeClassBinding(binding: unknown): readonly string[] {
|
||||
if (!binding) {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (typeof binding === 'string') {
|
||||
return [binding];
|
||||
}
|
||||
|
||||
if (binding instanceof Array) {
|
||||
// To handle an object-in-array binding smartly, we use recursion
|
||||
return binding.map(normalizeClassBinding).reduce((a, b) => [...a, ...b], []);
|
||||
}
|
||||
|
||||
if (typeof binding === 'object') {
|
||||
return Object.entries(binding)
|
||||
.filter(([, active]) => !!active)
|
||||
.map(([className]) => className);
|
||||
}
|
||||
|
||||
// Unknown class binding
|
||||
return [];
|
||||
}
|
||||
|
||||
function stringifyAttr(attrName: string, value?: any): string | null {
|
||||
if (typeof value === 'undefined' || typeof value === 'function') {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (value === true) {
|
||||
return attrName;
|
||||
}
|
||||
|
||||
if (typeof value === 'string') {
|
||||
return `${attrName}=${quote(value)}`;
|
||||
}
|
||||
|
||||
// TODO: Better serialization (unquoted object key, Symbol/Classes, etc...)
|
||||
// Seems like Prettier don't format JSON-look object (= when keys are quoted)
|
||||
return `:${attrName}=${quote(JSON.stringify(value))}`;
|
||||
}
|
||||
|
||||
function quote(value: string) {
|
||||
return value.includes(`"`) && !value.includes(`'`)
|
||||
? `'${value}'`
|
||||
: `"${value.replace(/"/g, '"')}"`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Skip decorators and grab a story component itself.
|
||||
* https://github.com/pocka/storybook-addon-vue-info/pull/113
|
||||
*/
|
||||
function getStoryComponent(w: any) {
|
||||
let matched = w;
|
||||
|
||||
while (
|
||||
matched &&
|
||||
matched.options &&
|
||||
matched.options.components &&
|
||||
matched.options.components.story &&
|
||||
matched.options.components.story.options &&
|
||||
matched.options.components.story.options.STORYBOOK_WRAPS
|
||||
) {
|
||||
matched = matched.options.components.story.options.STORYBOOK_WRAPS;
|
||||
}
|
||||
return matched;
|
||||
}
|
||||
|
||||
interface VueInternal {
|
||||
// We need to access this private property, in order to grab the vnode of the
|
||||
// component instead of the "vnode of the parent of the component".
|
||||
// Probably it's safe to rely on this because vm.$vnode is a reference for this.
|
||||
// https://github.com/vuejs/vue/issues/6070#issuecomment-314389883
|
||||
_vnode: Vue.VNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Find the story's instance from VNode tree.
|
||||
*/
|
||||
function lookupStoryInstance(instance: Vue, storyComponent: any): (Vue & VueInternal) | null {
|
||||
if (
|
||||
instance.$vnode &&
|
||||
instance.$vnode.componentOptions &&
|
||||
instance.$vnode.componentOptions.Ctor === storyComponent
|
||||
) {
|
||||
return instance as Vue & VueInternal;
|
||||
}
|
||||
|
||||
for (let i = 0, l = instance.$children.length; i < l; i += 1) {
|
||||
const found = lookupStoryInstance(instance.$children[i], storyComponent);
|
||||
|
||||
if (found) {
|
||||
return found;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user