mirror of
https://github.com/kevin-DL/sapper.git
synced 2026-01-15 12:24:47 +00:00
Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
6e769496ec | ||
|
|
e46aceb2fe | ||
|
|
a87cac2481 | ||
|
|
608fdb7533 | ||
|
|
80166b5a7d | ||
|
|
24b259f80b |
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "sapper",
|
"name": "sapper",
|
||||||
"version": "0.0.10",
|
"version": "0.0.13",
|
||||||
"description": "Combat-ready apps, engineered by Svelte",
|
"description": "Combat-ready apps, engineered by Svelte",
|
||||||
"main": "connect.js",
|
"main": "connect.js",
|
||||||
"directories": {
|
"directories": {
|
||||||
|
|||||||
@@ -1,21 +1,103 @@
|
|||||||
|
const detach = node => {
|
||||||
|
node.parentNode.removeChild(node);
|
||||||
|
};
|
||||||
|
|
||||||
|
let component;
|
||||||
|
|
||||||
const app = {
|
const app = {
|
||||||
init(callback) {
|
init(target, routes) {
|
||||||
|
function select_route(url) {
|
||||||
|
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);
|
||||||
|
|
||||||
|
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 (callback(new URL(a.href))) {
|
if (navigate(new URL(a.href))) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
history.pushState({}, '', a.href);
|
history.pushState({}, '', a.href);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
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 => {
|
||||||
callback(window.location);
|
navigate(new URL(window.location));
|
||||||
});
|
});
|
||||||
|
|
||||||
callback(window.location);
|
navigate(new URL(window.location));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,47 +1,5 @@
|
|||||||
import app from 'sapper/runtime/app.js';
|
import app from '__app__';
|
||||||
import { detachNode } from 'svelte/shared.js';
|
|
||||||
|
|
||||||
const target = document.querySelector('__selector__');
|
app.init(document.querySelector('__selector__'), [
|
||||||
let component;
|
__routes__
|
||||||
|
]);
|
||||||
app.init(url => {
|
|
||||||
if (url.origin !== window.location.origin) return;
|
|
||||||
|
|
||||||
let match;
|
|
||||||
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 {
|
|
||||||
// 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) detachNode(start.nextSibling);
|
|
||||||
detachNode(start);
|
|
||||||
detachNode(end);
|
|
||||||
}
|
|
||||||
|
|
||||||
target.innerHTML = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
component = new mod.default({
|
|
||||||
target,
|
|
||||||
data: Object.assign(route, preloaded),
|
|
||||||
hydrate: !!component
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// ROUTES
|
|
||||||
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
@@ -9,33 +9,18 @@ module.exports = function create_app(src, dest, routes, options) {
|
|||||||
const code = routes
|
const code = routes
|
||||||
.filter(route => route.type === 'page')
|
.filter(route => route.type === 'page')
|
||||||
.map(route => {
|
.map(route => {
|
||||||
const condition = route.dynamic.length === 0 ?
|
const params = route.dynamic.length === 0 ?
|
||||||
`url.pathname === '/${route.parts.join('/')}'` :
|
'{}' :
|
||||||
`match = ${route.pattern}.exec(url.pathname)`;
|
`{ ${route.dynamic.map((part, i) => `${part}: match[${i + 1}]`).join(', ') } }`;
|
||||||
|
|
||||||
const lines = [];
|
return `{ pattern: ${route.pattern}, params: match => (${params}), load: () => import('${src}/${route.file}') }`
|
||||||
|
|
||||||
route.dynamic.forEach((part, i) => {
|
|
||||||
lines.push(
|
|
||||||
`params.${part} = match[${i + 1}];`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
lines.push(
|
|
||||||
`import('${src}/${route.file}').then(render);`
|
|
||||||
);
|
|
||||||
|
|
||||||
return `
|
|
||||||
if (${condition}) {
|
|
||||||
${lines.join(`\n\t\t\t\t\t`)}
|
|
||||||
}
|
|
||||||
`.replace(/^\t{3}/gm, '').trim();
|
|
||||||
})
|
})
|
||||||
.join(' else ') + ' else return false;';
|
.join(',\n\t');
|
||||||
|
|
||||||
const main = template
|
const main = template
|
||||||
|
.replace('__app__', path.resolve(__dirname, '../runtime/app.js'))
|
||||||
.replace('__selector__', options.selector || 'main')
|
.replace('__selector__', options.selector || 'main')
|
||||||
.replace('// ROUTES', code);
|
.replace('__routes__', code);
|
||||||
|
|
||||||
fs.writeFileSync(path.join(dest, 'main.js'), main);
|
fs.writeFileSync(path.join(dest, 'main.js'), main);
|
||||||
};
|
};
|
||||||
Reference in New Issue
Block a user