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

Use replaceState instead of pushState when the story stays the same

Browse Source
This commit is contained in:
hypnos 2017-11-08 03:23:25 +03:00
parent 5c14f6771e
commit 1920ed1a04
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.
if (config.insidePopState) return;
@ -48,7 +48,7 @@ export function changeUrl(clientStore) {
if (!data.selectedKind) return;
const state = getUrlState(data);
window.history.pushState(state, '', state.url);
window.history[usePush ? 'pushState' : 'replaceState'](state, '', state.url);
}
export function updateStore(queryParams, actions) {
@ -92,8 +92,22 @@ export default function({ clientStore }, actions) {
// handle initial URL
handleInitialUrl(actions, window.location);
const data = clientStore.getAll();
let prevKind = data.selectedKind;
let prevStory = data.selectedStory;
// 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);
// 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;
});
test('should put the correct URL and state to pushState', done => {
test('should put the correct URL and state to replaceState', done => {
const state = {
selectedKind: 'kk',
selectedStory: 'ss',
@ -31,7 +31,7 @@ describe('manager.ui.config.handle_routing', () => {
const url =
'?customText=test&selectedKind=kk&selectedStory=ss&full=0&down=1&left=1&panelRight=1&downPanel=pp';
const pushState = {
const replaceState = {
url,
selectedKind: 'kk',
selectedStory: 'ss',
@ -42,16 +42,16 @@ describe('manager.ui.config.handle_routing', () => {
downPanel: 'pp',
customText: 'test',
};
const originalPushState = window.history.pushState;
window.history.pushState = (s, t, u) => {
expect(s).toEqual(pushState);
expect(u).toBe(pushState.url);
const originalReplaceState = window.history.replaceState;
window.history.replaceState = (s, t, u) => {
expect(s).toEqual(replaceState);
expect(u).toBe(replaceState.url);
done();
};
changeUrl(clientStore);
window.history.pushState = originalPushState;
window.history.replaceState = originalReplaceState;
});
});