fix: Fixes #219 (editing a story causes a full reload of the app)

[lauriharpf]

Note: Breaks fast reloading of storiesOf -format

With this change, editing the storiesOf-format stories (e.g. Button.stories.tsx under /examples/native/components/PromiseTest) starts throwing an error (see screenshot).

Don't know why that happens. Perhaps fast reloading Button.stories.tsx causes the storiesOf(..).add call to get re-run? Adding a storyStore.startConfiguring() call (see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-store-immutable-outside-of-configuration ) prior to m.hot.accept() does not help.

UX for CSF stories the next-6.0 branch (=without this fix)

https://user-images.githubusercontent.com/6605505/125520359-da2fe881-c503-47b5-b78b-04152ad990aa.mov

UX for CSF stories this branch

https://user-images.githubusercontent.com/6605505/125580674-10993194-3246-456e-b3e6-557a78ebdc91.mov

Issue: #219

What I did

Changed how the CSF stories get reloaded.

Had to use the FORCE_RE_RENDER workaround to get fast reload changes to be immediately reflected on the UI.

How to test

See the steps to reproduce the issue at https://github.com/storybookjs/react-native/issues/219. Basically, edit a CSF story (e.g. Boolean.stories.tsx) while the app is running.

• Does this need a new example in examples/native? no, not in my opinion
• Does this need an update to the documentation? no, not in my opinion

If your answer is yes to any of these, please make sure to include it in your PR.

[intergalacticspacehighway]

@lauriharpf I tried your changes. It works in version 6! Thank you. I faced one issue while testing in version 6. It clears all the decorators in the initial load too. Do you have any pointers on why that might be happening?

[dannyhw]

@intergalacticspacehighway can you explain what you mean by it clearing all the decorators? What do you see happening?

[intergalacticspacehighway]

@dannyhw thanks for quick response. I think this line clears the decorators.

I am using a ThemeProvider as a decorator as shown below.

export const decorators = [
	Story => (
		<DripsyProvider theme={theme}>
			<Story />
		</DripsyProvider>
	),
]

When I tried this PR, the stories where not able to access the Provider. i.e. the decorator was getting removed. Interestingly when I tried removing this line, stories were able to access the Provider, but on refresh I get a warning from this line that said you cannot add a duplicate decorator.

I hope this answers your question. Let me know if you need a reproducible demo. Thank you!

[dannyhw]

fixed in #384