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

Vue: add default CSF3 render function

Browse Source
This commit is contained in:
Yann Braga 2022-01-18 22:46:46 +01:00
parent 9909f9a39e
commit c81a1a0001
2 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/vue/src/client/preview/index.ts
View File

@ -5,7 +5,7 @@ import { ClientStoryApi, Loadable } from '@storybook/addons';
import './globals';
import { IStorybookSection } from './types';
import { VueFramework } from './types-6-0';
import { renderToDOM } from './render';
import { renderToDOM, render } from './render';
import { decorateStory } from './decorateStory';
const framework = 'vue';
@ -20,7 +20,7 @@ interface ClientApi extends ClientStoryApi<VueFramework['storyResult']> {
load: (...args: any[]) => void;
}
const api = start(renderToDOM, { decorateStory });
const api = start(renderToDOM, { decorateStory, render });
export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({

16
app/vue/src/client/preview/render.ts
View File

@ -1,6 +1,7 @@
import dedent from 'ts-dedent';
import Vue from 'vue';
import { RenderContext } from '@storybook/store';
import { ArgsStoryFn } from '@storybook/csf';
import { VueFramework } from './types-6-0';
export const COMPONENT = 'STORYBOOK_COMPONENT';
@ -19,6 +20,21 @@ const root = new Vue({
},
});
export const render: ArgsStoryFn<VueFramework> = (props, context) => {
const { id, component: Component } = context;
if (!Component) {
throw new Error(
`Unable to render story ${id} as the component annotation is missing from the default export`
);
}
return {
render(h) {
return h(Component, { props });
},
};
};
export function renderToDOM(
{
title,