storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.68k stars 9.32k forks source link

Suggestion: Expose Vue setup composition API #11204

Closed MechJosh0 closed 4 years ago

MechJosh0 commented 4 years ago

Is your feature request related to a problem? Please describe. Using Vue composition API you can use the setup method when initiating Vue. This provides whatever is done here into every component, like a global action.

When using Storybook you cannot access this feature as Storybook doesn't initiate Vue in that way, or at least make it available. To have the same effect you have to perform the same action in every story setup method.

Describe the solution you'd like

// ./storybook/preview.ts
import { configure, setup } from '@storybook/vue';
import Vue from 'vue';
import VueCompositionApi, { provide } from "@vue/composition-api";
import { DefaultApolloClient, apolloClient } from "../apolloConfiguration";

Vue.use(VueCompositionApi);

// Something like this - Just anyway to access the `setup` property
configure({
    setup(): any {
        provide(DefaultApolloClient, apolloClient);
    }
}, module)

configure(require.context('../src', true, /\.stories\.ts$/), module);

Describe alternatives you've considered The current solution to this issue, as mentioned above, is to run whatever you want inside each story.

In my use-case, I would like to attach my Apollo Client. To do this I have to install it by providing it in the setup when starting Vue. As this is not currently possible, I'm having to do this inside every Story, for example:

import { defineComponent, provide } from "@vue/composition-api";
import User from "../User.vue";
import { DefaultApolloClient, apolloClient } from "../apolloConfiguration";

export default {
    title: "User",
    component: User
};

export const user: any = (args: { [key: string]: string | boolean }) =>
    defineComponent({
        components: {
            User,
        },
        template: `<User />`,
        setup() {
            provide(DefaultApolloClient, apolloClient);
        },
    });

Are you able to assist bring the feature to reality? no

Additional context I'm using Storybook 6, Vue composition API and Vue Apollo 4 which are all in late beta versions.

stale[bot] commented 4 years ago

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] commented 4 years ago

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!