Re-apply #2349 to shilman/refactor-core

This didn't apply at all cleanly as it involved adding code to each framework's `init.js`, which was removed in the refactor.

Here we do better; we simply abstract the job of URL<->redux store syncing to the core library.

app/angular/package.json

@@ -60,7 +60,6 @@
     "postcss-flexbugs-fixes": "^3.0.0",
     "postcss-loader": "^2.0.5",
     "prop-types": "^15.5.10",
-    "qs": "^6.4.0",
     "raw-loader": "^0.5.1",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",

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

@@ -1,10 +1,16 @@
 import { window, navigator } from 'global';
 import { createStore } from 'redux';
-import qs from 'qs';
 import addons from '@storybook/addons';
 import createChannel from '@storybook/channel-postmessage';
 import { handleKeyboardShortcuts } from '@storybook/ui/dist/libs/key_events';
-import { StoryStore, ClientApi, ConfigApi, Actions, reducer } from '@storybook/core/client';
+import {
+  StoryStore,
+  ClientApi,
+  ConfigApi,
+  Actions,
+  reducer,
+  syncUrlWithStore,
+} from '@storybook/core/client';
 import render from './render';
 
 // check whether we're running on node/browser
@@ -28,11 +34,7 @@ if (isBrowser) {
   addons.setChannel(channel);
   Object.assign(context, { channel });
 
-  // handle query params
-  const queryParams = qs.parse(window.location.search.substring(1));
-  if (queryParams.selectedKind) {
-    reduxStore.dispatch(Actions.selectStory(queryParams.selectedKind, queryParams.selectedStory));
-  }
+  syncUrlWithStore(reduxStore);
 
   // Handle keyboard shortcuts
   window.onkeydown = handleKeyboardShortcuts(channel);

app/react/package.json

@@ -68,7 +68,6 @@
     "postcss-flexbugs-fixes": "^3.2.0",
     "postcss-loader": "^2.0.9",
     "prop-types": "^15.6.0",
-    "qs": "^6.5.1",
     "redux": "^3.7.2",
     "request": "^2.83.0",
     "serve-favicon": "^2.4.5",

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

@@ -1,10 +1,16 @@
 import { createStore } from 'redux';
 import addons from '@storybook/addons';
-import qs from 'qs';
 import { navigator, window } from 'global';
 import createChannel from '@storybook/channel-postmessage';
 import { handleKeyboardShortcuts } from '@storybook/ui/dist/libs/key_events';
-import { StoryStore, ClientApi, ConfigApi, Actions, reducer } from '@storybook/core/client';
+import {
+  StoryStore,
+  ClientApi,
+  ConfigApi,
+  Actions,
+  reducer,
+  syncUrlWithStore,
+} from '@storybook/core/client';
 
 import render from './render';
 
@@ -31,11 +37,7 @@ if (isBrowser) {
   addons.setChannel(channel);
   Object.assign(context, { channel });
 
-  // handle query params
-  const queryParams = qs.parse(window.location.search.substring(1));
-  if (queryParams.selectedKind) {
-    reduxStore.dispatch(Actions.selectStory(queryParams.selectedKind, queryParams.selectedStory));
-  }
+  syncUrlWithStore(reduxStore);
 
   // Handle keyboard shortcuts
   window.onkeydown = handleKeyboardShortcuts(channel);

app/vue/package.json

@@ -60,7 +60,6 @@
     "postcss-flexbugs-fixes": "^3.2.0",
     "postcss-loader": "^2.0.9",
     "prop-types": "^15.6.0",
-    "qs": "^6.5.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "redux": "^3.7.2",

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

@@ -1,10 +1,16 @@
 import { createStore } from 'redux';
-import qs from 'qs';
 import addons from '@storybook/addons';
 import createChannel from '@storybook/channel-postmessage';
 import { navigator, window } from 'global';
 import { handleKeyboardShortcuts } from '@storybook/ui/dist/libs/key_events';
-import { StoryStore, ClientApi, ConfigApi, Actions, reducer } from '@storybook/core/client';
+import {
+  StoryStore,
+  ClientApi,
+  ConfigApi,
+  Actions,
+  reducer,
+  syncUrlWithStore,
+} from '@storybook/core/client';
 
 import render from './render';
 
@@ -47,11 +53,7 @@ if (isBrowser) {
   addons.setChannel(channel);
   Object.assign(context, { channel });
 
-  // handle query params
-  const queryParams = qs.parse(window.location.search.substring(1));
-  if (queryParams.selectedKind) {
-    reduxStore.dispatch(Actions.selectStory(queryParams.selectedKind, queryParams.selectedStory));
-  }
+  syncUrlWithStore(reduxStore);
 
   // Handle keyboard shortcuts
   window.onkeydown = handleKeyboardShortcuts(channel);

lib/core/package.json

@@ -19,7 +19,8 @@
   "dependencies": {
     "@storybook/client-logger": "^3.3.3",
     "events": "^1.1.1",
-    "global": "^4.3.2"
+    "global": "^4.3.2",
+    "qs": "^6.5.1"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0"

lib/core/src/client/preview/index.js

@@ -3,5 +3,6 @@ import ClientApi from './client_api';
 import ConfigApi from './config_api';
 import StoryStore from './story_store';
 import reducer from './reducer';
+import syncUrlWithStore from './syncUrlWithStore';
 
-export default { Actions, ClientApi, ConfigApi, StoryStore, reducer };
+export default { Actions, ClientApi, ConfigApi, StoryStore, reducer, syncUrlWithStore };

lib/core/src/client/preview/syncUrlWithStore.js

@@ -0,0 +1,26 @@
+import qs from 'qs';
+import { window } from 'global';
+import { selectStory } from './actions';
+
+// Ensure the story in the redux store and on the preview URL are in sync.
+// In theory we should listen to pushState events but given it's an iframe
+// the user can't actually change the URL.
+// We should change this if we support a "preview only" mode in the future.
+export default function syncUrlToStore(reduxStore) {
+  // handle query params
+  const queryParams = qs.parse(window.location.search.substring(1));
+  if (queryParams.selectedKind) {
+    reduxStore.dispatch(selectStory(queryParams.selectedKind, queryParams.selectedStory));
+  }
+
+  reduxStore.subscribe(() => {
+    const { selectedKind, selectedStory } = reduxStore.getState();
+
+    const queryString = qs.stringify({
+      ...queryParams,
+      selectedKind,
+      selectedStory,
+    });
+    window.history.pushState({}, '', `?${queryString}`);
+  });
+}