Merge pull request #2349 from storybooks/1328-fix-hmr-failure

Save the preview frame URL as the story changes.

Author: Hypnosphi

app/angular/src/client/preview/init.js

@@ -1,4 +1,6 @@
 import keyEvents from '@storybook/ui/dist/libs/key_events';
+import qs from 'qs';
+
 import { selectStory } from './actions';
 
 export default function(context) {
@@ -8,6 +10,19 @@ export default function(context) {
     reduxStore.dispatch(selectStory(queryParams.selectedKind, queryParams.selectedStory));
   }
 
+  // Keep whichever of these are set that we don't override when stories change
+  const originalQueryParams = queryParams;
+  reduxStore.subscribe(() => {
+    const { selectedKind, selectedStory } = reduxStore.getState();
+
+    const queryString = qs.stringify({
+      ...originalQueryParams,
+      selectedKind,
+      selectedStory,
+    });
+    window.history.pushState({}, '', `?${queryString}`);
+  });
+
   // Handle keyEvents and pass them to the parent.
   window.onkeydown = e => {
     const parsedEvent = keyEvents(e);

app/react/src/client/preview/init.js

@@ -1,4 +1,6 @@
 import keyEvents from '@storybook/ui/dist/libs/key_events';
+import qs from 'qs';
+
 import { selectStory } from './actions';
 
 export default function(context) {
@@ -8,6 +10,19 @@ export default function(context) {
     reduxStore.dispatch(selectStory(queryParams.selectedKind, queryParams.selectedStory));
   }
 
+  // Keep whichever of these are set that we don't override when stories change
+  const originalQueryParams = queryParams;
+  reduxStore.subscribe(() => {
+    const { selectedKind, selectedStory } = reduxStore.getState();
+
+    const queryString = qs.stringify({
+      ...originalQueryParams,
+      selectedKind,
+      selectedStory,
+    });
+    window.history.pushState({}, '', `?${queryString}`);
+  });
+
   // Handle keyEvents and pass them to the parent.
   window.onkeydown = e => {
     const parsedEvent = keyEvents(e);

app/vue/src/client/preview/init.js

@@ -1,4 +1,6 @@
 import keyEvents from '@storybook/ui/dist/libs/key_events';
+import qs from 'qs';
+
 import { selectStory } from './actions';
 
 export default function(context) {
@@ -8,6 +10,19 @@ export default function(context) {
     reduxStore.dispatch(selectStory(queryParams.selectedKind, queryParams.selectedStory));
   }
 
+  // Keep whichever of these are set that we don't override when stories change
+  const originalQueryParams = queryParams;
+  reduxStore.subscribe(() => {
+    const { selectedKind, selectedStory } = reduxStore.getState();
+
+    const queryString = qs.stringify({
+      ...originalQueryParams,
+      selectedKind,
+      selectedStory,
+    });
+    window.history.pushState({}, '', `?${queryString}`);
+  });
+
   // Handle keyEvents and pass them to the parent.
   window.onkeydown = e => {
     const parsedEvent = keyEvents(e);