This sums up my findings when writing https://github.com/kapouer/window-page.
A web page is defined by its url
Bootstrap initial document that loads scripts and stylesheets.
Scripts and stylesheets loaded during route are available.
Build document depending on
Document has been built.
Modify document depending on
Initialize User Interface (animations and stuff).
Register event listeners on document's body.
Cleanup User Interface.
Unregister event listeners on document's body.
document.visibilityState == "prerendering"
Two equivalent scenarios:
- server-side prerendering (jsdom...)
- browser prerendering (safari...)
The functions bound to these phases must be run:
and document is serialized as HTML.
All other cases.
Prerendered HTML is loaded along with scripts and styles, then the functions bound to these phases must be run:
Can happen through History API, or by following links, submitting forms, etc...
All of which must be properly intercepted.
If only current
query changes, only the functions bound to this phase must be run:
Otherwise it is:
route replaces current document by fetching a prerendered document:
route, build, patch phases will typically fetch data through HTTP: credentials can be passed along to these requests if needed.
In this framework it must be done manually, either by calling directly an element's update method, or firing an event on current document, or delegating to a singleton manager.
- at the time of writing the module, asynchronous events were not a thing yet, so i had to implement my own promise chains and double them with synchronous events to be able to listen for changes even before the router library was not yet loaded (which can be needed when doing complicated stuff with iframes).