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

split pages and server routes into separate arrays

Browse Source
This commit is contained in:
Rich Harris
2018-07-05 08:14:07 -04:00
parent 008b607c01
commit 8dc52a04e4
5 changed files with 287 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

442
src/middleware.ts
View File

@@ -108,7 +108,8 @@ export default function middleware({ App, routes, store }: {
cache_control: 'max-age=31536000'
}),
get_route_handler(App, routes, store)
get_server_route_handler(routes.server_routes),
get_page_handler(App, routes, store)
].filter(Boolean));
return middleware;
@@ -151,7 +152,82 @@ function serve({ prefix, pathname, cache_control }: {
};
}
function get_route_handler(App: Component, routes: RouteObject[], store_getter: (req: Req) => Store) {
function get_server_route_handler(routes: RouteObject[]) {
function handle_route(route, req, res, next) {
req.params = route.params(route.pattern.exec(req.path));
const method = req.method.toLowerCase();
// 'delete' cannot be exported from a module because it is a keyword,
// so check for 'del' instead
const method_export = method === 'delete' ? 'del' : method;
const handle_method = route.handlers[method_export];
if (handle_method) {
if (process.env.SAPPER_EXPORT) {
const { write, end, setHeader } = res;
const chunks: any[] = [];
const headers: Record<string, string> = {};
// intercept data so that it can be exported
res.write = function(chunk: any) {
chunks.push(new Buffer(chunk));
write.apply(res, arguments);
};
res.setHeader = function(name: string, value: string) {
headers[name.toLowerCase()] = value;
setHeader.apply(res, arguments);
};
res.end = function(chunk?: any) {
if (chunk) chunks.push(new Buffer(chunk));
end.apply(res, arguments);
process.send({
__sapper__: true,
event: 'file',
url: req.url,
method: req.method,
status: res.statusCode,
type: headers['content-type'],
body: Buffer.concat(chunks).toString()
});
};
}
const handle_next = (err?: Error) => {
if (err) {
console.error(err.stack);
res.statusCode = 500;
res.end(err.message);
} else {
process.nextTick(next);
}
};
try {
handle_method(req, res, handle_next);
} catch (err) {
handle_next(err);
}
} else {
// no matching handler for method
process.nextTick(next);
}
}
return function find_route(req: Req, res: ServerResponse, next) {
for (const route of routes) {
if (route.pattern.test(req.path)) {
handle_route(route, req, res, next);
return;
}
}
next();
};
}
function get_page_handler(App: Component, routes: RouteObject[], store_getter: (req: Req) => Store) {
const output = locations.dest();
const get_chunks = dev()
@@ -162,247 +238,159 @@ function get_route_handler(App: Component, routes: RouteObject[], store_getter:
? () => fs.readFileSync(`${locations.app()}/template.html`, 'utf-8')
: (str => () => str)(fs.readFileSync(`${locations.dest()}/template.html`, 'utf-8'));
const error_route = routes.find((route: RouteObject) => route.error);
const { server_routes, pages } = routes;
const error_route = routes.error;
function handle_route(route: RouteObject, req: Req, res: ServerResponse, status = 200, error: Error | string = null) {
req.params = error
? {}
: route.params(route.pattern.exec(req.path));
const handlers = route.handlers[Symbol.iterator]();
const chunks: Record<string, string> = get_chunks();
function next() {
const chunks: Record<string, string> = get_chunks();
res.setHeader('Content-Type', 'text/html');
try {
const { value: handler, done } = handlers.next();
// preload main.js and current route
// TODO detect other stuff we can preload? images, CSS, fonts?
const link = []
.concat(chunks.main, chunks[route.id] || chunks._error) // TODO this is gross
.filter(file => !file.match(/\.map$/))
.map(file => `<${req.baseUrl}/client/${file}>;rel="preload";as="script"`)
.join(', ');
if (done) {
if (route.error) {
// there was an error rendering the error page!
res.statusCode = status;
res.end(error instanceof Error ? error.message : error);
} else {
handle_route(error_route, req, res, 404, 'Not found');
}
res.setHeader('Link', link);
return;
}
const store = store_getter ? store_getter(req) : null;
const props = { params: req.params, query: req.query, path: req.path };
const mod = handler.module;
if (handler.type === 'page') {
res.setHeader('Content-Type', 'text/html');
// preload main.js and current route
// TODO detect other stuff we can preload? images, CSS, fonts?
const link = []
.concat(chunks.main, chunks[route.id] || chunks._error) // TODO this is gross
.filter(file => !file.match(/\.map$/))
.map(file => `<${req.baseUrl}/client/${file}>;rel="preload";as="script"`)
.join(', ');
res.setHeader('Link', link);
const store = store_getter ? store_getter(req) : null;
const props = { params: req.params, query: req.query, path: req.path };
if (route.error) {
props.error = error instanceof Error ? error : { message: error };
props.status = status;
}
let redirect: { statusCode: number, location: string };
let preload_error: { statusCode: number, message: Error | string };
Promise.resolve(
mod.preload ? mod.preload.call({
redirect: (statusCode: number, location: string) => {
redirect = { statusCode, location };
},
error: (statusCode: number, message: Error | string) => {
preload_error = { statusCode, message };
},
fetch: (url: string, opts?: any) => {
const parsed = new URL(url, `http://127.0.0.1:${process.env.PORT}${req.baseUrl ? req.baseUrl + '/' :''}`);
if (opts) {
opts = Object.assign({}, opts);
const include_cookies = (
opts.credentials === 'include' ||
opts.credentials === 'same-origin' && parsed.origin === `http://127.0.0.1:${process.env.PORT}`
);
if (include_cookies) {
const cookies: Record<string, string> = {};
if (!opts.headers) opts.headers = {};
const str = []
.concat(
cookie.parse(req.headers.cookie || ''),
cookie.parse(opts.headers.cookie || ''),
cookie.parse(res.getHeader('Set-Cookie') || '')
)
.map(cookie => {
return Object.keys(cookie)
.map(name => `${name}=${encodeURIComponent(cookie[name])}`)
.join('; ');
})
.filter(Boolean)
.join(', ');
opts.headers.cookie = str;
}
}
return fetch(parsed.href, opts);
},
store
}, req) : {}
).catch(err => {
preload_error = { statusCode: 500, message: err };
}).then(preloaded => {
if (redirect) {
res.statusCode = redirect.statusCode;
res.setHeader('Location', `${req.baseUrl}/${redirect.location}`);
res.end();
return;
}
if (preload_error) {
handle_route(error_route, req, res, preload_error.statusCode, preload_error.message);
return;
}
const serialized = {
preloaded: mod.preload && try_serialize(preloaded),
store: store && try_serialize(store.get())
};
Object.assign(props, preloaded);
const { html, head, css } = App.render({ Page: mod, props }, {
store
});
let scripts = []
.concat(chunks.main) // chunks main might be an array. it might not! thanks, webpack
.filter(file => !file.match(/\.map$/))
.map(file => `<script src='${req.baseUrl}/client/${file}'></script>`)
.join('');
let inline_script = `__SAPPER__={${[
`baseUrl: "${req.baseUrl}"`,
serialized.preloaded && `preloaded: ${serialized.preloaded}`,
serialized.store && `store: ${serialized.store}`
].filter(Boolean).join(',')}};`;
const has_service_worker = fs.existsSync(path.join(locations.dest(), 'service-worker.js'));
if (has_service_worker) {
inline_script += `if ('serviceWorker' in navigator) navigator.serviceWorker.register('${req.baseUrl}/service-worker.js');`;
}
const page = template()
.replace('%sapper.base%', `<base href="${req.baseUrl}/">`)
.replace('%sapper.scripts%', `<script>${inline_script}</script>${scripts}`)
.replace('%sapper.html%', html)
.replace('%sapper.head%', `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
.replace('%sapper.styles%', (css && css.code ? `<style>${css.code}</style>` : ''));
res.statusCode = status;
res.end(page);
if (process.send) {
process.send({
__sapper__: true,
event: 'file',
url: req.url,
method: req.method,
status: 200,
type: 'text/html',
body: page
});
}
});
}
else {
const method = req.method.toLowerCase();
// 'delete' cannot be exported from a module because it is a keyword,
// so check for 'del' instead
const method_export = method === 'delete' ? 'del' : method;
const handle_method = mod[method_export];
if (handle_method) {
if (process.env.SAPPER_EXPORT) {
const { write, end, setHeader } = res;
const chunks: any[] = [];
const headers: Record<string, string> = {};
// intercept data so that it can be exported
res.write = function(chunk: any) {
chunks.push(new Buffer(chunk));
write.apply(res, arguments);
};
res.setHeader = function(name: string, value: string) {
headers[name.toLowerCase()] = value;
setHeader.apply(res, arguments);
};
res.end = function(chunk?: any) {
if (chunk) chunks.push(new Buffer(chunk));
end.apply(res, arguments);
process.send({
__sapper__: true,
event: 'file',
url: req.url,
method: req.method,
status: res.statusCode,
type: headers['content-type'],
body: Buffer.concat(chunks).toString()
});
};
}
const handle_bad_result = (err?: Error) => {
if (err) {
console.error(err.stack);
res.statusCode = 500;
res.end(err.message);
} else {
process.nextTick(next);
}
};
try {
handle_method(req, res, handle_bad_result);
} catch (err) {
handle_bad_result(err);
}
} else {
// no matching handler for method
process.nextTick(next);
}
}
} catch (error) {
if (route.error) {
// there was an error rendering the error page!
res.statusCode = status;
res.end(error instanceof Error ? error.message : error);
} else {
handle_route(error_route, req, res, 500, error || 'Internal server error');
}
}
if (route.error) {
props.error = error instanceof Error ? error : { message: error };
props.status = status;
}
next();
let redirect: { statusCode: number, location: string };
let preload_error: { statusCode: number, message: Error | string };
Promise.resolve(
route.handler.preload ? route.handler.preload.call({
redirect: (statusCode: number, location: string) => {
redirect = { statusCode, location };
},
error: (statusCode: number, message: Error | string) => {
preload_error = { statusCode, message };
},
fetch: (url: string, opts?: any) => {
const parsed = new URL(url, `http://127.0.0.1:${process.env.PORT}${req.baseUrl ? req.baseUrl + '/' :''}`);
if (opts) {
opts = Object.assign({}, opts);
const include_cookies = (
opts.credentials === 'include' ||
opts.credentials === 'same-origin' && parsed.origin === `http://127.0.0.1:${process.env.PORT}`
);
if (include_cookies) {
const cookies: Record<string, string> = {};
if (!opts.headers) opts.headers = {};
const str = []
.concat(
cookie.parse(req.headers.cookie || ''),
cookie.parse(opts.headers.cookie || ''),
cookie.parse(res.getHeader('Set-Cookie') || '')
)
.map(cookie => {
return Object.keys(cookie)
.map(name => `${name}=${encodeURIComponent(cookie[name])}`)
.join('; ');
})
.filter(Boolean)
.join(', ');
opts.headers.cookie = str;
}
}
return fetch(parsed.href, opts);
},
store
}, req) : {}
).catch(err => {
preload_error = { statusCode: 500, message: err };
}).then(preloaded => {
if (redirect) {
res.statusCode = redirect.statusCode;
res.setHeader('Location', `${req.baseUrl}/${redirect.location}`);
res.end();
return;
}
if (preload_error) {
handle_route(error_route, req, res, preload_error.statusCode, preload_error.message);
return;
}
const serialized = {
preloaded: route.handler.preload && try_serialize(preloaded),
store: store && try_serialize(store.get())
};
Object.assign(props, preloaded);
const { html, head, css } = App.render({ Page: route.handler, props }, {
store
});
let scripts = []
.concat(chunks.main) // chunks main might be an array. it might not! thanks, webpack
.filter(file => !file.match(/\.map$/))
.map(file => `<script src='${req.baseUrl}/client/${file}'></script>`)
.join('');
let inline_script = `__SAPPER__={${[
`baseUrl: "${req.baseUrl}"`,
serialized.preloaded && `preloaded: ${serialized.preloaded}`,
serialized.store && `store: ${serialized.store}`
].filter(Boolean).join(',')}};`;
const has_service_worker = fs.existsSync(path.join(locations.dest(), 'service-worker.js'));
if (has_service_worker) {
inline_script += `if ('serviceWorker' in navigator) navigator.serviceWorker.register('${req.baseUrl}/service-worker.js');`;
}
const page = template()
.replace('%sapper.base%', `<base href="${req.baseUrl}/">`)
.replace('%sapper.scripts%', `<script>${inline_script}</script>${scripts}`)
.replace('%sapper.html%', html)
.replace('%sapper.head%', `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
.replace('%sapper.styles%', (css && css.code ? `<style>${css.code}</style>` : ''));
res.statusCode = status;
res.end(page);
if (process.send) {
process.send({
__sapper__: true,
event: 'file',
url: req.url,
method: req.method,
status: 200,
type: 'text/html',
body: page
});
}
});
}
return function find_route(req: Req, res: ServerResponse) {
for (const route of routes) {
if (!route.error && route.pattern.test(req.path)) return handle_route(route, req, res);
if (!server_routes.some(route => route.pattern.test(req.path))) {
for (const page of pages) {
if (page.pattern.test(req.path)) {
handle_route(page, req, res);
return;
}
}
}
handle_route(error_route, req, res, 404, 'Not found');