Allow decorator API to accept HOC-style wrappers

[tmeasday]

As per @shilman in https://gist.github.com/shilman/792dc25550daa9c2bf37238f4ef7a398:

We are moving to a "wrapper" style API for addons/decorators:

type story = (context) => renderable
type wrapper = story => story

Which can be used like:

.add('name', aWrapper(() => <story/>));

However, currently the decorator API takes something slightly different:

type decorator = (story, context) => renderable

It's conceptually the same, but different in practice.

Proposal:

• In 3.3: Allow addDecorator to take both decorator and wrapper style functions.

• In 3.4 (or sooner): deprecate the decorator style.

• In 4.0: only allow wrappers.

Implementation.

Decorators are applied (in each app layer) in a line like this:

const fn = decorators.reduce(
  (decorated, decorator) => context => decorator(() => decorated(context), context),
  getStory
);

However, we can inspect the output of decorator(...) and see if it's

1. A renderable (an React Element or an object in vue). (the old decorator case)
2. Another function (the new story). (the new wrapper case).

In case 2, we can then just execute it.

So the new code looks like:

const fn = decorators.reduce(
  (decorated, decorator) => context => {
     if (decorator.length === 2) {
       // old case
       return decorator(() => decorated(context), context);
     }

     const newDecorated = decorator(() => decorated(context));

     // new case
     if (typeof newDecorated === function) {
       return newDecorated(context);
     }
     
     // old case, decorator doesn't consider context
     return newDecorated;
  },
  getStory
);

Phew! Confusing. But I think it works.

[shilman]

Yes, confusing as a transition path, but hopefully simple and uniform and powerful once we get through it! Thanks for putting this together!

[stale]

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. We do try to do some housekeeping every once in a while so inactive issues will get closed after 90 days. Thanks!

[stale]

Hey there, it's me again! I am going to help our maintainers close this issue so they can focus on development efforts 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!