Playground notification when fixture source changes

[ovidiuch]

What's up?

Extracted from Slack

@alp82

hot loading seems to have a slight issue. when changing a fixture i get [HMR] App is up to date. in the console but i need to click on the fixture name in the left tree to see the updated version

@skidding

There are two types of HMR use cases inside Cosmos:

1. Component source changes, you want to get the latest component code but preserve the fixture state (which might’ve evolved as you played with your component)
2. Fixture source changes, and you want it to update automatically

I think 1) is the most valuable, but in this case you’d like 2) as well, which is understandable

The problem with 2) is you might be in a valuable state where you don’t want the fixture to reset no matter what happens, because that’s the state you’re testing at the moment and you only want component to update via HMR. Lately I found no easy way to distinguish between 1) and 2) so I prioritized on usecase 1). Does this make sense?

And the reason why this only occurs now is because fixture.component means a fixture file will always be invalidated by a component change, so it’s difficult to tell whether the source of the fixture actually changed or was it just the component.

@alp82

yes this makes perfect sense. i was experiencing 2) indeed. and i agree that 1) is much more important

@skidding

But there are possible solutions for the future:

1. A isFixturePristine flag which defaults to true and gets set to false on the first state change. Then on HMR type 2) we’ll only auto reload fixture if isFixturePristine=true
2. Have a nice notification bar at the top of the Playground: “The fixture source has changed. [Click here] to reload”

Mkay, tell me more...

We both found 2) more appealing. Having a "Fixture source changed. [Click here] to reload." notification seems like an elegant solution.

[ovidiuch]

Fixtures now update by default on HMR. Changes in the props/state panels are also preserved unless the changed values were also changed in the fixture, in which case the fixture changes override the changes made in the UI.