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

replace 4xx.html and 5xx.html with _error.html

Browse Source
This commit is contained in:
Rich Harris
2018-06-28 11:38:21 -04:00
parent 0aeb63a05b
commit e87247493f
10 changed files with 38 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/core/create_manifests.ts
View File

@@ -52,8 +52,8 @@ function generate_client(routes: Route[], path_to_routes: string, dev_port?: num
const file = posixify(`${path_to_routes}/${page.file}`); const file = posixify(`${path_to_routes}/${page.file}`);
if (route.id === '_4xx' || route.id === '_5xx') { if (route.id === '_error') {
return `{ error: '${route.id.slice(1)}', load: () => import(/* webpackChunkName: "${route.id}" */ '${file}') }`; return `{ error: true, load: () => import(/* webpackChunkName: "${route.id}" */ '${file}') }`;
} }
const params = route.params.length === 0 const params = route.params.length === 0
@@ -107,8 +107,8 @@ function generate_server(routes: Route[], path_to_routes: string) {
`{ type: '${type}', module: ${route.id}${index} }`) `{ type: '${type}', module: ${route.id}${index} }`)
.join(', '); .join(', ');
if (route.id === '_4xx' || route.id === '_5xx') { if (route.id === '_error') {
return `{ error: '${route.id.slice(1)}', handlers: [${handlers}] }`; return `{ error: true, handlers: [${handlers}] }`;
} }
const params = route.params.length === 0 const params = route.params.length === 0

8
src/core/create_routes.ts
View File

@@ -5,10 +5,8 @@ import { Route } from '../interfaces';
export default function create_routes({ files } = { files: glob.sync('**/*.*', { cwd: locations.routes(), dot: true, nodir: true }) }) { export default function create_routes({ files } = { files: glob.sync('**/*.*', { cwd: locations.routes(), dot: true, nodir: true }) }) {
const routes: Route[] = files const routes: Route[] = files
.filter((file: string) => !/(^|\/|\\)_/.test(file)) .filter((file: string) => !/(^|\/|\\)(_(?!error\.html)|\.(?!well-known))/.test(file))
.map((file: string) => { .map((file: string) => {
if (/(^|\/|\\)(_|\.(?!well-known))/.test(file)) return;
if (/]\[/.test(file)) { if (/]\[/.test(file)) {
throw new Error(`Invalid route ${file} — parameters must be separated`); throw new Error(`Invalid route ${file} — parameters must be separated`);
} }
@@ -30,8 +28,8 @@ export default function create_routes({ files } = { files: glob.sync('**/*.*', {
return !found; return !found;
}) })
.sort((a, b) => { .sort((a, b) => {
if (a.parts[0] === '4xx' || a.parts[0] === '5xx') return -1; if (a.parts[0] === '_error') return -1;
if (b.parts[0] === '4xx' || b.parts[0] === '5xx') return 1; if (b.parts[0] === '_error') return 1;
const max = Math.max(a.parts.length, b.parts.length); const max = Math.max(a.parts.length, b.parts.length);

23
src/middleware.ts
View File

@@ -162,8 +162,7 @@ function get_route_handler(App: Component, routes: RouteObject[], store_getter:
? () => fs.readFileSync(`${locations.app()}/template.html`, 'utf-8') ? () => fs.readFileSync(`${locations.app()}/template.html`, 'utf-8')
: (str => () => str)(fs.readFileSync(`${locations.dest()}/template.html`, 'utf-8')); : (str => () => str)(fs.readFileSync(`${locations.dest()}/template.html`, 'utf-8'));
const not_found_route = routes.find((route: RouteObject) => route.error === '4xx'); const error_route = routes.find((route: RouteObject) => route.error);
const error_route = routes.find((route: RouteObject) => route.error === '5xx');
function handle_route(route: RouteObject, req: Req, res: ServerResponse, status = 200, error: Error | string = null) { function handle_route(route: RouteObject, req: Req, res: ServerResponse, status = 200, error: Error | string = null) {
req.params = error req.params = error
@@ -184,7 +183,7 @@ function get_route_handler(App: Component, routes: RouteObject[], store_getter:
res.statusCode = status; res.statusCode = status;
res.end(error instanceof Error ? error.message : error); res.end(error instanceof Error ? error.message : error);
} else { } else {
handle_route(not_found_route, req, res, 404, 'Not found'); handle_route(error_route, req, res, 404, 'Not found');
} }
return; return;
@@ -198,7 +197,7 @@ function get_route_handler(App: Component, routes: RouteObject[], store_getter:
// preload main.js and current route // preload main.js and current route
// TODO detect other stuff we can preload? images, CSS, fonts? // TODO detect other stuff we can preload? images, CSS, fonts?
const link = [] const link = []
.concat(chunks.main, chunks[route.id] || chunks[`_${route.error}`]) // TODO this is gross .concat(chunks.main, chunks[route.id] || chunks._error) // TODO this is gross
.filter(file => !file.match(/\.map$/)) .filter(file => !file.match(/\.map$/))
.map(file => `<${req.baseUrl}/client/${file}>;rel="preload";as="script"`) .map(file => `<${req.baseUrl}/client/${file}>;rel="preload";as="script"`)
.join(', '); .join(', ');
@@ -208,6 +207,11 @@ function get_route_handler(App: Component, routes: RouteObject[], store_getter:
const store = store_getter ? store_getter(req) : null; const store = store_getter ? store_getter(req) : null;
const props = { params: req.params, query: req.query, path: req.path }; 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 redirect: { statusCode: number, location: string };
let preload_error: { statusCode: number, message: Error | string }; let preload_error: { statusCode: number, message: Error | string };
@@ -306,6 +310,7 @@ function get_route_handler(App: Component, routes: RouteObject[], store_getter:
.replace('%sapper.head%', `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`) .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>` : '')); .replace('%sapper.styles%', (css && css.code ? `<style>${css.code}</style>` : ''));
res.statusCode = status;
res.end(page); res.end(page);
if (process.send) { if (process.send) {
@@ -382,7 +387,13 @@ function get_route_handler(App: Component, routes: RouteObject[], store_getter:
} }
} }
} catch (error) { } catch (error) {
handle_route(error_route, req, res, 500, error || 'Internal server 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');
}
} }
} }
@@ -394,7 +405,7 @@ function get_route_handler(App: Component, routes: RouteObject[], store_getter:
if (!route.error && route.pattern.test(req.path)) return handle_route(route, req, res); if (!route.error && route.pattern.test(req.path)) return handle_route(route, req, res);
} }
handle_route(not_found_route, req, res, 404, 'Not found'); handle_route(error_route, req, res, 404, 'Not found');
}; };
} }

13
src/runtime/index.ts
View File

@@ -8,7 +8,7 @@ export let component: Component;
let target: Node; let target: Node;
let store: Store; let store: Store;
let routes: Route[]; let routes: Route[];
let errors: { '4xx': Route, '5xx': Route }; let error_route: Route;
const history = typeof window !== 'undefined' ? window.history : { const history = typeof window !== 'undefined' ? window.history : {
pushState: (state: any, title: string, href: string) => {}, pushState: (state: any, title: string, href: string) => {},
@@ -117,11 +117,7 @@ function prepare_route(Page: ComponentConstructor, props: RouteData) {
error = { statusCode: 500, message: err }; error = { statusCode: 500, message: err };
}).then(preloaded => { }).then(preloaded => {
if (error) { if (error) {
const route = error.statusCode >= 400 && error.statusCode < 500 return error_route.load().then(({ default: Page }: { default: ComponentConstructor }) => {
? errors['4xx']
: errors['5xx'];
return route.load().then(({ default: Page }: { default: ComponentConstructor }) => {
const err = error.message instanceof Error ? error.message : new Error(error.message); const err = error.message instanceof Error ? error.message : new Error(error.message);
Object.assign(props, { status: error.statusCode, error: err }); Object.assign(props, { status: error.statusCode, error: err });
return { Page, props, redirect: null }; return { Page, props, redirect: null };
@@ -262,10 +258,7 @@ export function init(opts: { App: ComponentConstructor, target: Node, routes: Ro
App = opts.App; App = opts.App;
target = opts.target; target = opts.target;
routes = opts.routes.filter(r => !r.error); routes = opts.routes.filter(r => !r.error);
errors = { error_route = opts.routes.find(r => r.error);
'4xx': opts.routes.find(r => r.error === '4xx'),
'5xx': opts.routes.find(r => r.error === '5xx')
};
if (opts && opts.store) { if (opts && opts.store) {
store = opts.store(manifest.store); store = opts.store(manifest.store);

2
src/runtime/interfaces.ts
View File

@@ -17,7 +17,7 @@ export interface Component {
export type Route = { export type Route = {
pattern: RegExp; pattern: RegExp;
load: () => Promise<{ default: ComponentConstructor }>; load: () => Promise<{ default: ComponentConstructor }>;
error?: string; error?: boolean;
params?: (match: RegExpExecArray) => Record<string, string>; params?: (match: RegExpExecArray) => Record<string, string>;
ignore?: boolean; ignore?: boolean;
}; };

6
test/app/routes/5xx.html
View File

@@ -1,6 +0,0 @@
<svelte:head>
<title>Internal server error</title>
</svelte:head>
<h1>Internal server error</h1>
<p>{error.message}</p>

2
test/app/routes/4xx.html → test/app/routes/_error.html
View File

@@ -2,5 +2,5 @@
<title>{status}</title> <title>{status}</title>
</svelte:head> </svelte:head>
<h1>Not found</h1> <h1>{status}</h1>
<p>{error.message}</p> <p>{error.message}</p>

2
test/app/routes/blog/[slug].html
View File

@@ -19,7 +19,7 @@
return this.error(500, 'something went wrong'); return this.error(500, 'something went wrong');
} }
return fetch(`blog/${slug}.json`).then(r => { return fetch(`blog/${slug}.json`).then(async r => {
if (r.status === 200) { if (r.status === 200) {
return r.json().then(post => ({ post })); return r.json().then(post => ({ post }));
this.error(r.status, '') this.error(r.status, '')

8
test/common/test.js
View File

@@ -441,7 +441,7 @@ function run({ mode, basepath = '' }) {
}) })
.then(() => nightmare.page.title()) .then(() => nightmare.page.title())
.then(title => { .then(title => {
assert.equal(title, 'Not found') assert.equal(title, '404')
}); });
}); });
@@ -456,7 +456,7 @@ function run({ mode, basepath = '' }) {
}) })
.then(() => nightmare.page.title()) .then(() => nightmare.page.title())
.then(title => { .then(title => {
assert.equal(title, 'Not found'); assert.equal(title, '404');
}); });
}); });
@@ -468,7 +468,7 @@ function run({ mode, basepath = '' }) {
}) })
.then(() => nightmare.page.title()) .then(() => nightmare.page.title())
.then(title => { .then(title => {
assert.equal(title, 'Internal server error') assert.equal(title, '500')
}); });
}); });
@@ -483,7 +483,7 @@ function run({ mode, basepath = '' }) {
}) })
.then(() => nightmare.page.title()) .then(() => nightmare.page.title())
.then(title => { .then(title => {
assert.equal(title, 'Internal server error'); assert.equal(title, '500');
}); });
}); });

12
test/unit/create_routes.test.js
View File

@@ -71,8 +71,7 @@ describe('create_routes', () => {
'blog/[slug].html', 'blog/[slug].html',
'api/gists/[id].js', 'api/gists/[id].js',
'api/gists/index.js', 'api/gists/index.js',
'4xx.html', '_error.html',
'5xx.html',
'blog/index.html', 'blog/index.html',
'blog/rss.xml.js', 'blog/rss.xml.js',
'guide/index.html', 'guide/index.html',
@@ -83,8 +82,7 @@ describe('create_routes', () => {
assert.deepEqual( assert.deepEqual(
routes.map(r => r.handlers[0].file), routes.map(r => r.handlers[0].file),
[ [
'4xx.html', '_error.html',
'5xx.html',
'index.html', 'index.html',
'guide/index.html', 'guide/index.html',
'blog/index.html', 'blog/index.html',
@@ -99,8 +97,7 @@ describe('create_routes', () => {
routes = create_routes({ routes = create_routes({
files: [ files: [
'4xx.html', '_error.html',
'5xx.html',
'api/blog/[slug].js', 'api/blog/[slug].js',
'api/blog/index.js', 'api/blog/index.js',
'api/guide/contents.js', 'api/guide/contents.js',
@@ -119,8 +116,7 @@ describe('create_routes', () => {
assert.deepEqual( assert.deepEqual(
routes.map(r => r.handlers[0].file), routes.map(r => r.handlers[0].file),
[ [
'4xx.html', '_error.html',
'5xx.html',
'index.html', 'index.html',
'guide/index.html', 'guide/index.html',
'blog/index.html', 'blog/index.html',