If you know storybook well, you may know what storysource addon is. The addon lets you see the caller code responsible for displaying the story (I mean the component) in preview. This looked pretty straightforward and efficient. (see https://storybooks-official.netlify.com/)
Since then, several developers wanted to edit the story while on the screen without needing an editor. The intent, as illustrated in react-live is proven to be appealing because it transforms a documentation site into a playground. (https://react-live.kitten.sh/)
One developer wrote an adaptation for react live in storybook : https://github.com/vertexbz/storybook-addon-react-live-edit.
I personally think it is useful to work with as a consumer of a library, but as a developer, the addon does not offer the possibility to change the component behavior itself.
So I am seizing the opportunity to look into the existing storysource addon and to know how we can extract a “story” as a “project”. I can do that by implementing a webpack loader which can instrument the source code while loading the modules.
The following snippet is showing how you can load a source file and its dependencies (local + external modules) recursively until you get a project ready to be extracted
Here is the result in the editor :
Next steps are really challenging but not impossible : vue files parsing to find the pictures and templates, ability to require an entire directory (with require(‘./stories’) and to define a global config. I am not there yet, but I think this does not prevent me from working.