Vue API decorator improvements

[tmeasday]

It's possible to write simple "DOM wrapping" decorators in the new Vue API, but a bit clunky:

addDecorator((storyFn, context) => {
  const options = storyFn();
  return {
     template: `<div class="foo">${options.template}</div>`,
     ...options,
  };
});

It would be cool if somehow we registered the story as story as per the Vue component API and allowed you to write instead:

addDecorator(() => ({
  template: `<div class="foo"><story/></div>`,
});

I'm not quite sure how to do that ;) but it seems conceptually possible anyway. Would love to hear thoughts.

[kazupon]

Vue is possible to write simple DOM wrapping like story component due to be able to write HOC.
The below link helps us a lot:
vuejs/vue#6201

I'll try to support decorator for Vue.

[tmeasday]

@kazupon am I right to say if we follow those patterns, we would want to get passed a Vue Component instance rather than a set of options (which is basically the input to new Component()), which is what is currently passed around?

I do wonder whether the storybook API should be something like:

.add('name', new Component(options));

Rather than:

.add('name', () => options);

I'm not really sure and far from a Vue expert, so of course I totally defer to your opinion here, just wanted to point something out about decorators that I noticed when working on knobs stuff.

[kazupon]

close due to released v3.2.8