youtube / spfjs

A lightweight JS framework for fast navigation and page updates from YouTube
https://youtube.github.io/spfjs/
MIT License
2.23k stars 147 forks source link

Handle url change with spf.process & url in response #401

Closed tchiotludo closed 8 years ago

tchiotludo commented 8 years ago

Hello,

To be honest, I'm not really sure about this PR. The method spf.process don't allow any options but I see that spf.nav.response.process will change the current url if type: "navigate" & url in response.

Here is a use case :

What do you think of this PR ? Is it something that make sens ?

Thanks

tchiotludo commented 8 years ago

I also just see the back button is not working

When I look at the log, the history push is called :

[spf] 5.610s: nav.navigate  (url= https://localhost/users/form?userId=1 options= undefined )
[spf] 5.612s: nav.navigate_  https://localhost/users/form?userId=1 Object {} $spf$nav$Info$$ {current: "https://localhost/users", history: false, $original$: "", position: null, $referer$: "https://localhost/users"…}
[spf] 5.619s: nav.cancelAllPrefetchesExcept https://localhost/users/form?userId=1
[spf] 5.621s: nav.request.send  https://localhost/users/form?userId=1 Object {method: undefined, headers: undefined, $postData$: undefined, type: "navigate", current: "https://localhost/users"…}
[spf] 5.622s:     request url  https://localhost/users/form?userId=1
[spf] 5.624s:     sending XHR
[spf] 5.627s:     updating history to scroll position [0, 0]
[spf] 5.631s: history.replace  null
[spf] 5.632s:     replaceState:   url= https://localhost/users state= Object {spf-referer: "", spf-timestamp: 1460393746470.49, spf-position: Array[2]}
[spf] 5.635s: history.add  https://localhost/users/form?userId=1
[spf] 5.636s:     pushState:   url= https://localhost/users/form?userId=1 state= Object {spf-referer: "https://localhost/users", spf-timestamp: 1460393746474.385}
[spf] 5.655s: nav.handleClick  evt= MouseEvent {isTrusted: true, screenX: 1531, screenY: 404, clientX: 1531, clientY: 193…}
[spf] 5.672s: nav.request.handleHeadersFromXHR_  https://localhost/users/form?userId=1 XMLHttpRequest {timing: Object, readyState: 2, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload…}
[spf] 5.674s:     response is non-multipart
[spf] 5.675s: nav.request.handleChunkFromXHR_  https://localhost/users/form?userId=1 Object {extra: "", chunk: "{"title":"email@gmail.com, TestSite","url":"\/fr\…\/>\n<\/div>\n<\/div>\n<\/form>\n","aside":null}}"}
[spf] 5.677s:     skipping non-multipart response
[spf] 5.679s: nav.request.handleCompleteFromXHR_  https://localhost/users/form?userId=1 Object {extra: "", complete: "{"title":"email@gmail.com, TestSite","url":"\/fr\…\/>\n<\/div>\n<\/div>\n<\/form>\n","aside":null}}"}
[spf] 5.681s: spf.nav.response.extract [Object]
[spf] 5.692s: nav.request.done_ https://localhost/users/form?userId=1 Object {method: "GET", headers: undefined, $postData$: undefined, type: "navigate", current: "https://localhost/users"…} Object {spfUrl: "https://localhost/users/form?userId=1", startTime: 1460393746465, fetchStart: 1460393746465, spfPrefetched: false, spfCached: false…} Object {title: "email@gmail.com, TestSite", url: "/fr/backoffice/users/form?userId=1", body: Object} true
[spf] 5.699s: nav.response.process  Object {title: "email@gmail.com, TestSite", url: "/fr/backoffice/users/form?userId=1", body: Object, cacheKey: "history https://localhost/users/form?userId=1", timing: Object} $spf$nav$Info$$ {current: "https://localhost/users", history: false, $original$: "", position: null, $referer$: "https://localhost/users"…}
https://localhost/users/form?userId=1 https://localhost/users/form?userId=1
[spf] 5.704s:   process task queued: body name 1
[spf] 5.706s:   process task queued: body title 2
[spf] 5.707s:   process task queued: body breadcrumb 3
[spf] 5.711s:   process task queued: body main 4
[spf] 5.712s:   process task queued: body aside 5
[spf] 5.712s:   process task queued: timing-for-body 6
[spf] 5.713s:   process task queued: callback 7
[spf] 5.713s:   process run process https://localhost/users/form?userId=1 true
[spf] 5.715s:     scrolling to top
[spf] 5.724s:   process task done: timing-for-body
[spf] 5.821s:   process task done: body aside
[spf] 5.823s:   process task done: body main
[spf] 5.824s:   process task done: body title
[spf] 8.849s: nav.handleClick  evt= MouseEvent {isTrusted: true, screenX: 1545, screenY: 642, clientX: 1545, clientY: 431…}
[spf] 8.851s:     ignoring click without link class
[spf] 8.983s: nav.response.process  Object {title: "Utilisateurs, TestSite", url: "/fr/backoffice/users", body: Object} $spf$nav$Info$$ {current: "https://localhost/users/form?userId=1", history: false, $original$: "", position: null, $referer$: "https://localhost/users/form?userId=1"…}
https://localhost/users https://localhost/users/form?userId=1
[spf] 8.985s:   update history with response url
[spf] 8.986s: history.replace  /fr/backoffice/users
[spf] 8.987s:     replaceState:   url= /fr/backoffice/users state= Object {spf-referer: "https://localhost/users", spf-timestamp: 1460393749825.935}
[spf] 8.989s:   process task queued: body name 1
[spf] 8.989s:   process task queued: body title 2
[spf] 8.990s:   process task queued: body breadcrumb 3
[spf] 8.990s:   process task queued: body main 4
[spf] 8.991s:   process task queued: body aside 5
[spf] 8.991s:   process task queued: timing-for-body 6
[spf] 8.992s:   process task queued: callback 7
[spf] 8.992s:   process run process https://localhost/users true
[spf] 8.993s:     scrolling to top
[spf] 9.000s:   process task done: timing-for-body
[spf] 9.003s:   process task done: body aside
[spf] 9.004s:   process task done: body main
[spf] 9.006s:   process task done: body title

especially these lines :

[spf] 5.631s: history.replace  null
[spf] 5.632s:     replaceState:   url= https://localhost/users state= Object {spf-referer: "", spf-timestamp: 1460393746470.49, spf-position: Array[2]}
[spf] 5.635s: history.add  https://localhost/users/form?userId=1

[spf] 8.985s:   update history with response url
[spf] 8.986s: history.replace  /fr/backoffice/users

When i use standard navigate, we have a history.add and through the process method we have a history.replace, that seems weird.

Does i'm looking the wrong way for my use case ?

Thanks

DavidCPhillips commented 8 years ago

I'm a little confused by your use case. spf.process is specifically designed to do page updates that aren't part of a navigation, which is why history replaces instead of adds.

Is there a reason you can't use spf.navigate to actually make the requests (and do the processing)?

tchiotludo commented 8 years ago

My fault, spf.navigate works well on my case, I didn't see the options for doing POST on this method. Thank for giving me the right direction, I really appreciate.

The only thing that is missing is on the onError, we are kind of blindness, i hope this PR #402 make sens.