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

improve vue integration

Browse Source
This commit is contained in:
Oliver Hoff 2018-12-20 03:50:08 +01:00
parent 03c4c0f67a
commit 9f0ce22c72
5 changed files with 89 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.js
View File

@ -2,12 +2,15 @@
import Vue from 'vue';
function getRenderedTree(story, context) {
const storyElement = story.render(context);
const component = story.render(context);
const Constructor = Vue.extend(storyElement);
const vm = new Constructor().$mount();
const vm = new Vue({
render(h) {
return h(component);
},
});
return vm.$el;
return vm.$mount().$el;
}
export default getRenderedTree;

76
app/vue/src/client/preview/index.js
View File

@ -1,30 +1,72 @@
import { start } from '@storybook/core/client';
import Vue from 'vue';
import './globals';
import render from './render';
const createWrapperComponent = Target => ({
functional: true,
render(h, c) {
return h(Target, c.data, c.children);
},
});
const decorateStory = (getStory, decorators) =>
decorators.reduce(
(decorated, decorator) => context => {
const story = () => decorated(context);
let decoratedStory = decorator(story, context);
export const WRAPS = 'STORYBOOK_WRAPS';
export const VALUES = 'STORYBOOK_VALUES';
if (typeof decoratedStory === 'string') {
decoratedStory = { template: decoratedStory };
function extractProps(component) {
return Object.entries(component.options.props || {})
.map(([name, def]) => ({ [name]: def.default }))
.reduce((wrap, prop) => ({ ...wrap, ...prop }), {});
}
function prepare(rawStory, innerStory) {
let story = rawStory;
// eslint-disable-next-line no-underscore-dangle
if (!story._isVue) {
if (typeof story === 'string') {
story = { template: story };
}
if (innerStory) {
story.components = { ...(story.components || {}), story: innerStory };
}
story = Vue.extend(story);
} else if (story.options[WRAPS]) {
return story;
}
return Vue.extend({
[WRAPS]: story,
[VALUES]: { ...(innerStory ? innerStory.options[VALUES] : {}), ...extractProps(story) },
functional: true,
render(h, { data, parent, children }) {
return h(
story,
{
...data,
props: { ...(data.props || {}), ...(parent.$root[VALUES] || {}) },
},
children
);
},
});
}
function decorateStory(getStory, decorators) {
return decorators.reduce(
(decorated, decorator) => context => {
let story;
const decoratedStory = decorator(() => {
story = decorated(context);
return story;
}, context);
if (!story) {
story = decorated(context);
}
decoratedStory.components = decoratedStory.components || {};
decoratedStory.components.story = createWrapperComponent(story());
return decoratedStory;
if (decoratedStory === story) {
return story;
}
return prepare(decoratedStory, story);
},
getStory
context => prepare(getStory(context))
);
}
const { clientApi, configApi, forceReRender } = start(render, { decorateStory });

24
app/vue/src/client/preview/render.js
View File

@ -1,24 +1,17 @@
import { stripIndents } from 'common-tags';
import Vue from 'vue';
import { VALUES } from '.';
let root = null;
function getComponentProxy(component) {
return Object.entries(component.props || {})
.map(([name, def]) => ({ [name]: def.default }))
.reduce((wrap, prop) => ({ ...wrap, ...prop }), {});
}
function renderRoot(component, proxy) {
function renderRoot(component) {
root = new Vue({
el: '#root',
beforeCreate() {
this.proxy = proxy;
data() {
return { [VALUES]: component.options[VALUES] };
},
render(h) {
const props = this.proxy;
return h('div', { attrs: { id: 'root' } }, [h(component, { props })]);
return h('div', { attrs: { id: 'root' } }, [h(component)]);
},
});
}
@ -49,15 +42,12 @@ export default function render({
showMain();
const proxy = getComponentProxy(component);
// at component creation || refresh by HMR
if (!root || !forceRender) {
if (root) root.$destroy();
renderRoot(component, proxy);
renderRoot(component);
} else {
root.proxy = proxy;
root.$forceUpdate();
root[VALUES] = component.options[VALUES];
}
}

26
examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
View File

@ -7,28 +7,12 @@ exports[`Storyshots Addon|Centered rounded 1`] = `
<div
style="margin: auto; max-height: 100%;"
>
<div
style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
<button
class="button rounded"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
<div
style="margin: auto; max-height: 100%;"
>
<div
style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
>
<div
style="margin: auto; max-height: 100%;"
>
<button
class="button rounded"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
A Button with rounded edges!
</button>
</div>
</div>
</div>
</div>
A Button with rounded edges!
</button>
</div>
</div>
`;

38
examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot
View File

@ -5,21 +5,13 @@ exports[`Storyshots Custom|Decorator for Vue render 1`] = `
style="border: medium solid blue;"
>
<div
style="border: medium solid blue;"
style="border: medium solid red;"
>
<div
style="border: medium solid blue;"
<button
class="button"
>
<div
style="border: medium solid red;"
>
<button
class="button"
>
renders component: MyButton!
</button>
</div>
</div>
renders component: MyButton!
</button>
</div>
</div>
`;
@ -29,22 +21,14 @@ exports[`Storyshots Custom|Decorator for Vue template 1`] = `
style="border: medium solid blue;"
>
<div
style="border: medium solid blue;"
style="border: medium solid red;"
>
<div
style="border: medium solid blue;"
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
<div
style="border: medium solid red;"
>
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
MyButton with template!
</button>
</div>
</div>
MyButton with template!
</button>
</div>
</div>
`;