feat: Editable Composed Stories

[lyleaigbedion]

Please take a look and see if this makes sense.

I haven't fully tested it as yet but I have rendered stories from a composed library with this feature and I do see the code and example.

I'll wire it up later and confirm if the editing part works as expected.

[lyleaigbedion]

I have confirmed that I can in fact use the live code editor if both storybooks have been setup as per the README instructions.

I've also added an example and how to run it

[JeremyRH]

I don't really like the host storybook having to do extra stuff to support this. I wonder if it's worth it to try and refactor things.
Imagine if the preview frame already has everything needed to render a component including all dependencies. It just receives code from the editor through channel messages, no more cross frame global references (createStore) and no more dependencies (availableImports).
Getting the editor to have correct types for a library would require messages being passed from the preview frame to the parent frame with the editor. I think type definitions can be passed as a string through channel messages from the preview frame.

It's not clear to me how to set up the preview frame with all dependencies pre-added/bundled. Finding a good place for that would be nice. It does stop the story from defining its own dependencies which may be a problem for some users though...

[lyleaigbedion]

I'm taking a shot at the refactor and I'm curious about your last line:

It does stop the story from defining its own dependencies which may be a problem for some users though...

Can you elaborate?

[JeremyRH]

You can currently define available imports (dependencies) per story. If all available imports/dependencies were defined in the same place for a storybook, some users may find this is not compatible with whatever they may have done before.

Edit: I see you kept availableImports. I wonder how those work with a composed storybook.

[lyleaigbedion]

Okay so I also added more comments on what I did there.

[lyleaigbedion]

Tried my hand at the refactor.

It is a much cleaner implementation.

I have a few apps I need to try this on will report back later on them. (or push more changes)

[lyleaigbedion]

Tested my apps and wow that was alot.

It should work in full now and even pass type hinting context in the composed SB

[lyleaigbedion]

@JeremyRH I think it can be reviewed again.

[JeremyRH]

Thank you for all your work on this! I'll try to find time to test this before the new year but am on vacation until January 3rd. Here is my plan:

• Investigate registerLiveEditPreview()
  • How does it interact with existing setupMonaco()?
  • Does it work with multiple hosted storybooks using the storybook-addon-code-editor?
  • Does it work if the host storybook does not even use storybook-addon-code-editor?
• Use a debugger to see exactly how channels work
  • Are there any edge cases or race conditions with updated use of channels?
• Should we remove availableImports from makeLiveEditStory()? It may be confusing to have this and registerLiveEditPreview() imports. But this would be a breaking change.
• createStore() seems fundamentally broken with composed storybooks. Should we remove it?
• Documentation/comment clean up. There are some things like "Zero host configuration" which was part of this PR discussion but does not need to be checked in. You usually state what is needed in docs, not what is not needed.