totole/sapper
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper.git synced 2026-01-21 06:45:00 +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

65
runtime/app.js
View File

@@ -6,18 +6,25 @@ 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;
for (const route of routes) {
const match = route.pattern.exec(url.pathname);
if (match) {
const params = route.params(match);
let match;
let params = {};
const query = {}; const query = {};
for (const [key, value] of url.searchParams) query[key] = value || true;
function render(mod) { return { route, data: { params, query } };
const route = { query, params }; }
}
}
function render(Component, data) {
Promise.resolve( Promise.resolve(
mod.default.preload ? mod.default.preload(route) : {} Component.preload ? Component.preload(data) : {}
).then(preloaded => { ).then(preloaded => {
if (component) { if (component) {
component.destroy(); component.destroy();
@@ -36,28 +43,32 @@ const app = {
routes.reduce((promise, route) => promise.then(route.load), Promise.resolve()); routes.reduce((promise, route) => promise.then(route.load), Promise.resolve());
} }
component = new mod.default({ component = new Component({
target, target,
data: Object.assign(route, preloaded), data: Object.assign(data, preloaded),
hydrate: !!component hydrate: !!component
}); });
}); });
} }
for (let i = 0; i < routes.length; i += 1) { function navigate(url) {
const route = routes[i]; const selected = select_route(url);
const match = route.pattern.exec(url.pathname); if (selected) {
if (match) { selected.route.load().then(mod => {
params = route.params(match); render(mod.default, selected.data);
route.load().then(render); });
return true; 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));
} }
}; };