diff --git a/app/vue/src/client/preview/index.ts b/app/vue/src/client/preview/index.ts
index 14f10b1c1be1..f54a026fad13 100644
--- a/app/vue/src/client/preview/index.ts
+++ b/app/vue/src/client/preview/index.ts
@@ -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 {
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).addParameters({
diff --git a/app/vue/src/client/preview/render.ts b/app/vue/src/client/preview/render.ts
index 2f82dd7fa706..ca27f025ea09 100644
--- a/app/vue/src/client/preview/render.ts
+++ b/app/vue/src/client/preview/render.ts
@@ -1,6 +1,8 @@
+/* eslint-disable no-underscore-dangle */
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 +21,40 @@ const root = new Vue({
},
});
+export const render: ArgsStoryFn = (props, context) => {
+ const { id, component: Component } = context;
+ const component = Component as VueFramework['component'] & {
+ __docgenInfo?: { displayName: string };
+ props: Record;
+ };
+
+ if (!component) {
+ throw new Error(
+ `Unable to render story ${id} as the component annotation is missing from the default export`
+ );
+ }
+
+ let componentName = 'component';
+
+ // if there is a name property, we either use it or preprend with sb- in case it's an invalid name
+ if (component.name) {
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore isReservedTag is an internal function from Vue, might be changed in future releases
+ const isReservedTag = Vue.config.isReservedTag && Vue.config.isReservedTag(component.name);
+
+ componentName = isReservedTag ? `sb-${component.name}` : component.name;
+ } else if (component.__docgenInfo?.displayName) {
+ // otherwise, we use the displayName from docgen, if present
+ componentName = component.__docgenInfo?.displayName;
+ }
+
+ return {
+ props: component.props,
+ components: { [componentName]: component },
+ template: `<${componentName} v-bind="$props" />`,
+ };
+};
+
export function renderToDOM(
{
title,
diff --git a/examples/vue-kitchen-sink/src/stories/Button.vue b/examples/vue-kitchen-sink/src/stories/Button.vue
index 4a20dfb5f9ac..9f09d21e4a74 100644
--- a/examples/vue-kitchen-sink/src/stories/Button.vue
+++ b/examples/vue-kitchen-sink/src/stories/Button.vue
@@ -6,7 +6,9 @@
@click="onClick"
@dblclick="onDoubleClick"
>
- !
+
+ {{label}}!
+
@@ -23,6 +25,9 @@
color: {
type: String,
default: '#42b983'
+ },
+ label: {
+ type: String
}
},
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
index 96a1f7415697..19c3ffeaec4e 100644
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
@@ -5,8 +5,7 @@ exports[`Storyshots Addon/Actions Action and method 1`] = `
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
- Click me to log the action!
-
+ Click me to log the action
`;
@@ -15,8 +14,7 @@ exports[`Storyshots Addon/Actions Action only 1`] = `
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
- Click me to log the action!
-
+ Click me to log the action
`;
@@ -25,8 +23,7 @@ exports[`Storyshots Addon/Actions Multiple actions 1`] = `
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
- (Double) click me to log the action!
-
+ (Double) click me to log the action
`;
@@ -35,7 +32,6 @@ exports[`Storyshots Addon/Actions Multiple actions, object 1`] = `
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
- (Double) click me to log the action!
-
+ (Double) click me to log the action
`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-controls.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-controls.stories.storyshot
index 9e9705b5c650..da54aa7b5071 100644
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-controls.stories.storyshot
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-controls.stories.storyshot
@@ -8,8 +8,7 @@ exports[`Storyshots Addon/Controls Rounded 1`] = `
class="button rounded"
style="color: rgb(255, 0, 0); border-color: #f00;"
>
- A Button with rounded edges!
-
+ A Button with rounded edges
`;
@@ -22,8 +21,7 @@ exports[`Storyshots Addon/Controls Square 1`] = `
class="button"
style="color: rgb(0, 0, 255); border-color: #00f;"
>
- A Button with square edges!
-
+ A Button with square edges
`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot
index 829b529042e9..12182d4dc46e 100644
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot
@@ -5,7 +5,6 @@ exports[`Storyshots Addon/Links Go to welcome 1`] = `
class="button rounded"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
- This buttons links to Welcome!
-
+ This buttons links to Welcome
`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/core-template.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/core-template.stories.storyshot
index d4da5fd31ce6..dbc7a33e429c 100644
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/core-template.stories.storyshot
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/core-template.stories.storyshot
@@ -5,7 +5,6 @@ exports[`Storyshots Core/Template string only 1`] = `
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
- A Button with square edges!
-
+ A Button with square edges
`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot
index 737307a65abf..037ca9020eee 100644
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot
@@ -11,8 +11,7 @@ exports[`Storyshots Custom/Decorator for Vue Render 1`] = `
class="button"
style="color: pink; border-color: pink;"
>
- renders component: MyButton!
-
+ renders component: MyButton
@@ -29,8 +28,7 @@ exports[`Storyshots Custom/Decorator for Vue Template 1`] = `
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
- MyButton with template!
-
+ MyButton with template
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-rendering.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-rendering.stories.storyshot
index cea7424ece37..8bc34ce45ca9 100644
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-rendering.stories.storyshot
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-rendering.stories.storyshot
@@ -5,8 +5,7 @@ exports[`Storyshots Custom/Method for rendering Vue JSX 1`] = `
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
- MyButton rendered with JSX!
-
+ MyButton rendered with JSX
`;
@@ -31,7 +30,7 @@ exports[`Storyshots Custom/Method for rendering Vue Template 1`] = `
exports[`Storyshots Custom/Method for rendering Vue pre-registered component 1`] = `
- This component was pre-registered in .storybook/config.js
+ This component was pre-registered in .storybook/preview.js
@@ -39,8 +38,7 @@ exports[`Storyshots Custom/Method for rendering Vue pre-registered component 1`]
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
- MyButton rendered in a template!
-
+ MyButton rendered in a template
`;
@@ -87,8 +82,7 @@ exports[`Storyshots Custom/Method for rendering Vue vuex + actions 1`] = `
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
- with vuex: 0!
-
+ with vuex: 0
`;
@@ -97,7 +91,6 @@ exports[`Storyshots Custom/Method for rendering Vue whatever you want 1`] = `
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
- with awesomeness: 0!
-
+ with awesomeness: 0
`;
diff --git a/examples/vue-kitchen-sink/src/stories/components/__snapshots__/button.stories.storyshot b/examples/vue-kitchen-sink/src/stories/components/__snapshots__/button.stories.storyshot
index e89a25c25a84..d4a278b9df2f 100644
--- a/examples/vue-kitchen-sink/src/stories/components/__snapshots__/button.stories.storyshot
+++ b/examples/vue-kitchen-sink/src/stories/components/__snapshots__/button.stories.storyshot
@@ -5,8 +5,7 @@ exports[`Storyshots Button Rounded 1`] = `
class="button rounded"
style="color: rgb(255, 0, 0); border-color: #f00;"
>
- A Button with rounded edges!
-
+ A Button with rounded edges
`;
@@ -15,7 +14,17 @@ exports[`Storyshots Button Square 1`] = `
class="button"
style="color: rgb(0, 0, 255); border-color: #00f;"
>
- A Button with square edges!
+ A Button with square edges
+
+`;
+exports[`Storyshots Button With Default Render 1`] = `
+
`;
diff --git a/examples/vue-kitchen-sink/src/stories/components/button.stories.js b/examples/vue-kitchen-sink/src/stories/components/button.stories.js
index 36ed1818287f..fee26cad5fd2 100644
--- a/examples/vue-kitchen-sink/src/stories/components/button.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/components/button.stories.js
@@ -27,3 +27,11 @@ Square.args = {
color: '#00f',
label: 'A Button with square edges',
};
+
+export const WithDefaultRender = {
+ args: {
+ rounded: true,
+ color: '#fba',
+ label: 'Button with default render',
+ },
+};
diff --git a/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js b/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
index 7d6d97193d73..b9a04272346e 100644
--- a/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
@@ -100,12 +100,12 @@ export const WhateverYouWant = () => ({
WhateverYouWant.storyName = 'whatever you want';
export const PreRegisteredComponent = () => ({
- /* By pre-registering component in config.js,
+ /* By pre-registering component in preview.js,
* the need to register all components with each story is removed.
* You'll only need the template */
template: `
- This component was pre-registered in .storybook/config.js
+ This component was pre-registered in .storybook/preview.js MyButton rendered in a template