Add Vue 3 Decorator support

[zes-richard]

as #72 accurately pointed out Vue support was missing from the addon.

I made an attempt to add support.

My initial tests seem to be working, but unfortunately, a custom Vue Component is needed outside of this addon when I tried adding Vue directly to this addon the Global JSX definition collided and I did not see a way to resolve this.

[lifeiscontent]

@zes-richard thank you very much for your contribution, I'll see if I can get this merged today! :)

[lifeiscontent]

@zes-richard sorry, I tried to figure this out, it turns out storybook 7 is changing the addon API so this code would probably break in the next version. I'm going to talk to the team to figure out what the best steps are to move forward with this.

Thanks!

[shilman]

Nice one! @lifeiscontent asked me the best way to do "renderer-specific decorators", so here's my quick take:

1. Reorganize the code a bit so that you maybe have a "react", "vue", etc. (whatever you support).
2. Rather than having different presets for each renderer, you could have a single preset that looks like:

export async function config(entry: unknown[] = [], options: any): unknown[] {
  const framework = await options.presets.apply('framework');
  const frameworkName = (typeof framework === 'string') ? framework : framework.name;
  if(/react/.test(frameworkName)) {
     return [...entry, require.resolve('./react/addDecorator')];
  }
  else if(/vue/.test(frameworkName)) {
     return [...entry, require.resolve('./vue/addDecorator')];
  }
  throw new Error(`Addon-apollo-client: unsupported framework "${frameworkName}"`);
}

Notes:

• We should probably provide some utilities for this in the core, but don't at the moment
• This requires that the user set "framework" in their main.js, which should be standard in 6.5 and above
• In SB7, the definition of "framework" has changed, and it will probably be better to check for presets.apply("renderer") instead so that you'll get support for "cra"/"nextjs" and other 7.0 frameworks. But the same approach should apply.

[fabis94]

Nice PR! Any possibility of this being released soon with SB 7.0 support?

[lifeiscontent]

@fabis94 that's the plan! Just waiting for the release and hoping @zes-richard can follow up as I don't have a super great footing with vue ecosystem.

[MidasLamb]

Hey, I'm using storybook 7.0.0-beta.36 and used the original branch from the PR locally. In order to make it work I had to run npm run build after updating the module in tsconfig.json to es6 instead of CommonJS. (I'm using Vue3 and Vite), not sure if this helps w.r.t. to the earlier comments about a refactor for SB7

[lifeiscontent]

@shilman do you have some suggestions how to move the needle forward here now that Version 7 is out?

[lifeiscontent]

@zes-richard do you have time to sync on this?

[erwan-joly]

@lifeiscontent what would be needed to get this merged ?
I'm currently working on a vue3 project and would love to add this plugin as the one I've used for react :)

[lifeiscontent]

@erwan-joly I'm not sure, I don't use Vue, but if someone wants to take it on, I'm happy to get it in, I've been casually chatting with the storybook team on how to support multiple frameworks, but I am also not currently using apollo so I've been spending my time on other projects and just updating when storybook updates / have free time.

[erwan-joly]

Had a quick look at it and it works well (got it from the dist on my personal branch) so i think this can be merged when you have some time.

I didn't need the extra vue @zes-richard was talking about with this current structure I think it mainly depends on how things are setup.

export interface MockedProviderOptions<TSerializedCache = NonNullable<unknown>> {
  mocks?: ReadonlyArray<MockedResponse>;
  addTypename?: boolean;
  defaultOptions?: DefaultOptions;
  cache?: ApolloCache<TSerializedCache>;
  resolvers?: Resolvers;
  childProps?: object;
  children?: unknown;
  link?: ApolloLink;
}

export const createApolloClient = (options: MockedProviderOptions = {}) => {
  return new ApolloClient({
    cache: options.cache || new Cache({ addTypename: options.addTypename }),
    defaultOptions: options.defaultOptions,
    link: options.link || new MockLink(options.mocks || [], options.addTypename),
    resolvers: options.resolvers,
  });
};

setup((app, context) => {
  const apolloClient = createApolloClient(context?.parameters?.apolloClient);
  app.provide(DefaultApolloClient, apolloClient);
});

const decorators = [];

const preview: Preview = {
  decorators,
};

export default preview;

[lifeiscontent]

@erwan-joly can you make a PR? I'll review and cut a release, as I said I don't use vue so I don't really have time to setup a project and test it out.

[erwan-joly]

@erwan-joly can you make a PR? I'll review and cut a release, as I said I don't use vue so I don't really have time to setup a project and test it out.

This is the PR. Didn’t had to change anything to make it works. Just had a slightly different setup but the code is the same

[erwan-joly]

@lifeiscontent can this PR be reviewed and merged ? I think apart from the package lock the rest is mainly new code so unlikely to cause any issues with existing code and does work :)