Using with Storybook HTML (which doesn't seem to like promises) about twing-loader

[MichaelAllenWarner]

@philwolstenholme and whoever else this helps:

You can work around the Promise issue in Storybook HTML by using Storybook's (experimental) loaders feature. A story itself cannot be an async function, but you can set it to render the result of an async loader.

The pattern I'm using looks like this:

import button from './button.twig';
import { ButtonSpan } from './ButtonSpan.stories';

export default { title: 'Button' };

// never call this directly (only gets called by Storybook);
// EVERY Twig-story should be a function that looks like this.
export const Button = (_, { loaded: { component } }) => component;

// THIS is what you call directly if there's need
Button.render = async args => {
  // Rendering logic goes here.
  // If, instead of `include` or `embed`, you'd like to
  // inject another Twig-story directly (e.g., if you have
  // `{{ buttonSpan }}` in `button.twig`), `await` its `render()` method:
  const buttonSpan = await ButtonSpan.render({ text: args.text });
  // Same goes for any `.twig` imports used directly:
  const renderedButton = await button({ buttonSpan });
  return renderedButton;
};

Button.args = {
  text: 'some button text'
};

This works in conjunction with the following global loader, set in preview.js:

export const loaders = [
  async ({ args, originalStoryFn }) => {
    if (originalStoryFn.render) {
      const component = await originalStoryFn.render(args);
      return { component };
    }
  }
];

[philwolstenholme]

Thinking about it a bit more, the issue here is probably that I am using Storybook HTML, and if I were to use Storybook with a JS flavour then the async nature would probably be fine.

[philwolstenholme]

If I switch to using

    "twing": "2.3.7",
    "twing-loader": "2.0.2"

Then this works fine:

const template = require('./button.twig');

export default {
  title: 'Components/Button',
};

export const Default = () =>
  template({
    message: 'bar',
  });

But it feels unprofessional to use 2 major versions older version of a dependency on a new project…