GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 07:21:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2261 from storybooks/replace-state

Browse Source 
Use replaceState instead of pushState when the story stays the same
This commit is contained in:
Filipp Riabchun 2017-11-08 13:17:46 +03:00 committed by GitHub
commit fdbde92f91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
lib/ui/src/modules/ui/configs/handle_routing.js
View File

@ -40,7 +40,7 @@ export function getUrlState(data) {
}; };
} }
export function changeUrl(clientStore) { export function changeUrl(clientStore, usePush) {
// Do not change the URL if we are inside a popState event. // Do not change the URL if we are inside a popState event.
if (config.insidePopState) return; if (config.insidePopState) return;
@ -48,7 +48,7 @@ export function changeUrl(clientStore) {
if (!data.selectedKind) return; if (!data.selectedKind) return;
const state = getUrlState(data); const state = getUrlState(data);
window.history.pushState(state, '', state.url); window.history[usePush ? 'pushState' : 'replaceState'](state, '', state.url);
} }
export function updateStore(queryParams, actions) { export function updateStore(queryParams, actions) {
@ -92,8 +92,22 @@ export default function({ clientStore }, actions) {
// handle initial URL // handle initial URL
handleInitialUrl(actions, window.location); handleInitialUrl(actions, window.location);
const data = clientStore.getAll();
let prevKind = data.selectedKind;
let prevStory = data.selectedStory;
// subscribe to clientStore and change the URL // subscribe to clientStore and change the URL
clientStore.subscribe(() => changeUrl(clientStore)); clientStore.subscribe(() => {
const { selectedKind, selectedStory } = clientStore.getAll();
// use pushState only when a new story is selected
const usePush =
prevKind != null &&
prevStory != null &&
(selectedKind !== prevKind || selectedStory !== prevStory);
changeUrl(clientStore, usePush);
prevKind = selectedKind;
prevStory = selectedStory;
});
changeUrl(clientStore); changeUrl(clientStore);
// handle back button // handle back button

14
lib/ui/src/modules/ui/configs/handle_routing.test.js
View File

@ -10,7 +10,7 @@ describe('manager.ui.config.handle_routing', () => {
config.insidePopState = false; config.insidePopState = false;
}); });
test('should put the correct URL and state to pushState', done => { test('should put the correct URL and state to replaceState', done => {
const state = { const state = {
selectedKind: 'kk', selectedKind: 'kk',
selectedStory: 'ss', selectedStory: 'ss',
@ -31,7 +31,7 @@ describe('manager.ui.config.handle_routing', () => {
const url = const url =
'?customText=test&selectedKind=kk&selectedStory=ss&full=0&down=1&left=1&panelRight=1&downPanel=pp'; '?customText=test&selectedKind=kk&selectedStory=ss&full=0&down=1&left=1&panelRight=1&downPanel=pp';
const pushState = { const replaceState = {
url, url,
selectedKind: 'kk', selectedKind: 'kk',
selectedStory: 'ss', selectedStory: 'ss',
@ -42,16 +42,16 @@ describe('manager.ui.config.handle_routing', () => {
downPanel: 'pp', downPanel: 'pp',
customText: 'test', customText: 'test',
}; };
const originalPushState = window.history.pushState; const originalReplaceState = window.history.replaceState;
window.history.pushState = (s, t, u) => { window.history.replaceState = (s, t, u) => {
expect(s).toEqual(pushState); expect(s).toEqual(replaceState);
expect(u).toBe(pushState.url); expect(u).toBe(replaceState.url);
done(); done();
}; };
changeUrl(clientStore); changeUrl(clientStore);
window.history.pushState = originalPushState; window.history.replaceState = originalReplaceState;
}); });
}); });