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