(window) url slice
Opened this issue · 2 comments
Goal
- make URL properties available in slice( hash, url params, etc. )
- watch for
window.location
changes - change
window.location
- change
hash
and navigate in-window - ?
APIs to be exposed:
- window.location
- new URL(document.location).searchParams
- Navigate to a new page
- Reloading the current page
- reload with hash
Non-goals
history
API
data slice
would populate URI props
URL change
To invoke the URL change, the property from URI defined as attribute
would trigger the window.location
change:
<location href="abc"/>
would change the page URL. Due to page reload, the state of custom element would be lost.<location hash="abc"/>
would navigate the page to #hash<location href="."/>
would reload the page, the state of custom element would be lost.- ?
non-window URLs
src
attribute would bind the element to given URL instead of window.location
How to detect when window.location
changed to update the data slice
?
stackoverflow suggest to use heavy weaponry of MutationObserver
on body
. 😧
On other hand, it also suggest to hook to hashchange
and the popstate
events of the window. Which is straight and light.
Unnecessary updates prevention. popstate event can be emitted or not during the page load. To avoid transformation on value which is already in place during page(DCE) load, the check against current slot value has to be in place.
in 0.0.10 release location-element implements read to slice capabilities, no update.