README.md for Glimmer Support for Storybook

README.md

Glimmer Support for Storybook

What?

• Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular etc. For more details please check : Storybook documentation.
• GlimmerJs is not one of the supported engines for Storybook.
• This PR builds support for GlimmerJs on Storybook through the @glimmerx/storybook package.
• The final goal is to contribute it back to the core Storybook repository.

[photo of storybook]

Why?

• Storybook would allow you to develop, render, and test glimmer components easily.
• Storybook provides an easy way to mock hard to reach states for a component.
• Storybook is extensible allowing developers to build custom flows via Storybook add-ons.

[photo of stories code]

How?

Supporting a new rendering engine on Storybook involves the following changes:

• Adding support for performing server side compilation of stories (specific component use cases) with that render engine's syntax
• Adding support for client side rendering of a selected story

For Glimmer support we

• Integrate babel plugin(s) to read and compile Glimmer Single File component stories. E.g. preact's babel plugin integration.
  • This logic is triggered when you build storybook i.e. when you run:

   $ yarn build-storybook
   // or
   $ yarn start-storybook
  

• Implement a Storybook's renderMain() method that renders a given Glimmer story using the above server side compiled Js code. E.g. preact's renderMain() method.
  • This logic is triggered when you visit the storybook app OR when you select a specific story

   // file: @glimmerx/storybook's /src/client/preview/render.tsx
   function renderMain({
    storyFn,
    selectedKind,
    selectedStory,
    showMain,
    showError,
  }) {
    // render the selected Glimmer component & return markup
  }
  

[photo of component code]