totole/sapper
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper.git synced 2026-01-19 05:45:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

implement prefetching anchors with rel=prefetch

Browse Source
This commit is contained in:
Rich Harris
2017-12-14 08:21:32 -05:00
parent a87cac2481
commit e46aceb2fe
1 changed files with 73 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
runtime/app.js
View File

@@ -6,58 +6,69 @@ let component;
const app = { const app = {
init(target, routes) { init(target, routes) {
function navigate(url) { function select_route(url) {
if (url.origin !== window.location.origin) return; if (url.origin !== window.location.origin) return null;
let match; for (const route of routes) {
let params = {};
const query = {};
function render(mod) {
const route = { query, params };
Promise.resolve(
mod.default.preload ? mod.default.preload(route) : {}
).then(preloaded => {
if (component) {
component.destroy();
} else {
// first load — remove SSR'd <head> contents
const start = document.querySelector('#sapper-head-start');
let end = document.querySelector('#sapper-head-end');
if (start && end) {
while (start.nextSibling !== end) detach(start.nextSibling);
detach(start);
detach(end);
}
// preload additional routes
routes.reduce((promise, route) => promise.then(route.load), Promise.resolve());
}
component = new mod.default({
target,
data: Object.assign(route, preloaded),
hydrate: !!component
});
});
}
for (let i = 0; i < routes.length; i += 1) {
const route = routes[i];
const match = route.pattern.exec(url.pathname); const match = route.pattern.exec(url.pathname);
if (match) { if (match) {
params = route.params(match); const params = route.params(match);
route.load().then(render);
return true; const query = {};
for (const [key, value] of url.searchParams) query[key] = value || true;
return { route, data: { params, query } };
} }
} }
} }
function render(Component, data) {
Promise.resolve(
Component.preload ? Component.preload(data) : {}
).then(preloaded => {
if (component) {
component.destroy();
} else {
// first load — remove SSR'd <head> contents
const start = document.querySelector('#sapper-head-start');
let end = document.querySelector('#sapper-head-end');
if (start && end) {
while (start.nextSibling !== end) detach(start.nextSibling);
detach(start);
detach(end);
}
// preload additional routes
routes.reduce((promise, route) => promise.then(route.load), Promise.resolve());
}
component = new Component({
target,
data: Object.assign(data, preloaded),
hydrate: !!component
});
});
}
function navigate(url) {
const selected = select_route(url);
if (selected) {
selected.route.load().then(mod => {
render(mod.default, selected.data);
});
return true;
}
}
function findAnchor(node) {
while (node && node.nodeName !== 'A') node = node.parentNode;
return node;
}
window.addEventListener('click', event => { window.addEventListener('click', event => {
let a = event.target; const a = findAnchor(event.target);
while (a && a.nodeName !== 'A') a = a.parentNode;
if (!a) return; if (!a) return;
if (navigate(new URL(a.href))) { if (navigate(new URL(a.href))) {
@@ -66,11 +77,27 @@ const app = {
} }
}); });
function preload(event) {
const a = findAnchor(event.target);
if (!a || a.rel !== 'prefetch') return;
const selected = select_route(new URL(a.href));
if (selected) {
selected.route.load().then(mod => {
if (mod.default.preload) mod.default.preload(selected.data);
});
}
}
window.addEventListener('touchstart', preload);
window.addEventListener('mouseover', preload);
window.addEventListener('popstate', event => { window.addEventListener('popstate', event => {
navigate(window.location); navigate(new URL(window.location));
}); });
navigate(window.location); navigate(new URL(window.location));
} }
}; };