LUIS: Fast and agile React component catalogue, test runner and snaphost manager that is in love with Typescript.

TL;DR

LUIS (List of UIS)is the React component catalogue that uses the power of FuseBox to display and live reload React components almost instantly, independent of the size of the application.

Following are stats for my application with 976 typescript sources and 56 imported packages:

StoryBook — Start 36 seconds, Hot Module Reload with sourcemaps 9 seconds

LUIS — Start 400 ms, Hot Module Reload with sourcemaps 750 ms.

Moreover, Luis runs your tests in the browser, tests and manages the server-side snapshots, displays possible differences and updates them when necessary.


Introduction

First, React changed the way we develop web applications. Then, StoryBook changed the way we develop React components, harnessing the power of Webpack over the way we bundle javascript applications. StoryBook community developed powerful plugins, such as StoryShots, a convenient way of generating Jest snap-shots, or Spec Runner, that allows to execute and display test result next to your stories. I guess that here we could end our story.

But … along came FuseBox, a bundler so fast that left all its competitors eating the dust, introducing first-class support for Typescript, an amazing, type-safe superclass of javascript language.

So … It’s time for a new kid on the block, LUIS, speed junkie who’s deeply in love with Typescript. LUIS is fully compatible with StoryBook API using: storiesOf, add, addWithInfo commands to define your stories. As a result, you can conveniently tests your existing storybooks in the new environment.

Yet, LUIS introduces many new features, such as folders and snapshots management, and encourages to use the well known BDD (test) notation instead of storybook one. Check out following example of a story in LUIS.

And this is LUIS’s UI, show in the Profile story. Please note, how describe statements created folders User and Profile.

Luis’s API is simple:

  • describe: creates a new folder for stories.
  • story: creates a new story, story needs to return a React component.
  • decorator: adds a new decorator that wraps all stories in the folder and all its subfolders where decorator is defined.
  • tests: wraps all your tests and assures that all contained tests are only executed during testing phase and not during the story display (simply, prohibits running the tests when story is displayed). You do not need to use test function.
  • action: creates a new action handler that displays action properties in the LUIS UI
  • it: a new test case
  • xit, xdescribe: an ignored test case
  • Of course you can use original storybook methods: storiesOf, add, addWithInfo

The easiest way to start with LUIS is to clone the LUIS repo and follow instructions on how you can run LUIS’s UI or a standalone app.

LUIS exists in the form of a package as well, exposing all the necessary UIs and handlers and can be imported into your existing application, yet in the current FuseBox implementation, the hot module reload does not work properly with React Components served from the external package.

Please give LUIS a go, fasten your seat belts and enjoy the ride! I will welcome any feedback.