Save the preview frame URL as the story changes.

Sometimes when there are problems with HMR, we end up doing a
hard-reload of the preview iframe, whilst leaving the main window.

As the preview iframe didn't change its URL ever, this led to problems
where the old (usually original) story was loaded in such circumstances.

See #614 and #1328

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);