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

refactor some stuff

Browse Source
This commit is contained in:
Rich Harris
2017-12-14 07:53:17 -05:00
parent 608fdb7533
commit a87cac2481
3 changed files with 68 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
runtime/app.js
View File

@@ -1,21 +1,76 @@
const detach = node => {
node.parentNode.removeChild(node);
};
let component;
const app = { const app = {
init(callback) { init(target, routes) {
function navigate(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 {
// 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);
if (match) {
params = route.params(match);
route.load().then(render);
return true;
}
}
}
window.addEventListener('click', event => { window.addEventListener('click', event => {
let a = event.target; let a = event.target;
while (a && a.nodeName !== 'A') a = a.parentNode; 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);
} }
}); });
window.addEventListener('popstate', event => { window.addEventListener('popstate', event => {
callback(window.location); navigate(window.location);
}); });
callback(window.location); navigate(window.location);
} }
}; };

51
templates/main.js
View File

@@ -1,50 +1,5 @@
import app from '__app__'; import app from '__app__';
const target = document.querySelector('__selector__'); app.init(document.querySelector('__selector__'), [
let component; __routes__
]);
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;
});

28
utils/create_app.js
View File

@@ -9,34 +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('__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);
}; };