mirror of
https://github.com/kevin-DL/sapper.git
synced 2026-01-13 11:35:28 +00:00
Compare commits
30 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b75ae7ba96 | ||
|
|
091e38082e | ||
|
|
74acf93c7a | ||
|
|
0e3775397f | ||
|
|
8dc52a04e4 | ||
|
|
008b607c01 | ||
|
|
d01a407137 | ||
|
|
c0c717d9ec | ||
|
|
4f011bfc37 | ||
|
|
6c4ab32cf0 | ||
|
|
09b4dc1b9a | ||
|
|
bdd5a54527 | ||
|
|
b7bb4db8c1 | ||
|
|
5b5f33d3cf | ||
|
|
9611656b76 | ||
|
|
e9a71774d5 | ||
|
|
2205b8aec5 | ||
|
|
5c4e4d5d36 | ||
|
|
e87247493f | ||
|
|
0aeb63a05b | ||
|
|
57eeb5659a | ||
|
|
f821c19528 | ||
|
|
b9a120164a | ||
|
|
087356f781 | ||
|
|
31110a5326 | ||
|
|
667a68768c | ||
|
|
5075981a90 | ||
|
|
0e2c2ca101 | ||
|
|
8015be8069 | ||
|
|
e39ad59589 |
24
CHANGELOG.md
24
CHANGELOG.md
@@ -1,5 +1,29 @@
|
||||
# sapper changelog
|
||||
|
||||
## 0.14.2
|
||||
|
||||
* Prevent unsafe replacements ([#307](https://github.com/sveltejs/sapper/pull/307))
|
||||
|
||||
## 0.14.1
|
||||
|
||||
* Route parameters can be qualified with regex characters ([#283](https://github.com/sveltejs/sapper/pull/283))
|
||||
|
||||
## 0.14.0
|
||||
|
||||
* `4xx.html` and `5xx.html` are replaced with `_error.html` ([#209](https://github.com/sveltejs/sapper/issues/209))
|
||||
* Treat `foo/index.json.js` and `foo.json.js` as equivalents ([#297](https://github.com/sveltejs/sapper/issues/297))
|
||||
* Return a promise from `goto` ([#270](https://github.com/sveltejs/sapper/issues/270))
|
||||
* Use store when rendering error pages ([#293](https://github.com/sveltejs/sapper/issues/293))
|
||||
* Prevent console errors when visiting an error page ([#279](https://github.com/sveltejs/sapper/issues/279))
|
||||
|
||||
## 0.13.6
|
||||
|
||||
* Fix `baseUrl` synthesis ([#296](https://github.com/sveltejs/sapper/issues/296))
|
||||
|
||||
## 0.13.5
|
||||
|
||||
* Fix handling of fatal errors ([#289](https://github.com/sveltejs/sapper/issues/289))
|
||||
|
||||
## 0.13.4
|
||||
|
||||
* Focus `<body>` after navigation ([#287](https://github.com/sveltejs/sapper/issues/287))
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sapper",
|
||||
"version": "0.13.4",
|
||||
"version": "0.14.2",
|
||||
"description": "Military-grade apps, engineered by Svelte",
|
||||
"main": "dist/middleware.ts.js",
|
||||
"bin": {
|
||||
|
||||
@@ -33,6 +33,7 @@ class Watcher extends EventEmitter {
|
||||
server: Deferred;
|
||||
};
|
||||
|
||||
crashed: boolean;
|
||||
restarting: boolean;
|
||||
current_build: {
|
||||
changed: Set<string>;
|
||||
@@ -130,10 +131,16 @@ class Watcher extends EventEmitter {
|
||||
// TODO watch the configs themselves?
|
||||
const compilers = create_compilers({ webpack: this.dirs.webpack });
|
||||
|
||||
let log = '';
|
||||
|
||||
const emitFatal = () => {
|
||||
this.emit('fatal', <events.FatalEvent>{
|
||||
message: `Server crashed`
|
||||
message: `Server crashed`,
|
||||
log
|
||||
});
|
||||
|
||||
this.crashed = true;
|
||||
this.proc = null;
|
||||
};
|
||||
|
||||
this.watch(compilers.server, {
|
||||
@@ -149,18 +156,30 @@ class Watcher extends EventEmitter {
|
||||
|
||||
this.deferreds.client.promise.then(() => {
|
||||
const restart = () => {
|
||||
ports.wait(this.port).then((() => {
|
||||
this.emit('ready', <events.ReadyEvent>{
|
||||
port: this.port,
|
||||
process: this.proc
|
||||
});
|
||||
log = '';
|
||||
this.crashed = false;
|
||||
|
||||
this.deferreds.server.fulfil();
|
||||
ports.wait(this.port)
|
||||
.then((() => {
|
||||
this.emit('ready', <events.ReadyEvent>{
|
||||
port: this.port,
|
||||
process: this.proc
|
||||
});
|
||||
|
||||
this.dev_server.send({
|
||||
status: 'completed'
|
||||
this.deferreds.server.fulfil();
|
||||
|
||||
this.dev_server.send({
|
||||
status: 'completed'
|
||||
});
|
||||
}))
|
||||
.catch(err => {
|
||||
if (this.crashed) return;
|
||||
|
||||
this.emit('fatal', <events.FatalEvent>{
|
||||
message: `Server is not listening on port ${this.port}`,
|
||||
log
|
||||
});
|
||||
});
|
||||
}));
|
||||
};
|
||||
|
||||
if (this.proc) {
|
||||
@@ -180,10 +199,12 @@ class Watcher extends EventEmitter {
|
||||
});
|
||||
|
||||
this.proc.stdout.on('data', chunk => {
|
||||
log += chunk;
|
||||
this.emit('stdout', chunk);
|
||||
});
|
||||
|
||||
this.proc.stderr.on('data', chunk => {
|
||||
log += chunk;
|
||||
this.emit('stderr', chunk);
|
||||
});
|
||||
|
||||
@@ -301,7 +322,7 @@ class Watcher extends EventEmitter {
|
||||
if (err) {
|
||||
this.emit('error', <events.ErrorEvent>{
|
||||
type: name,
|
||||
error: err
|
||||
message: err.message
|
||||
});
|
||||
} else {
|
||||
const messages = format_messages(stats);
|
||||
|
||||
@@ -12,6 +12,7 @@ export type ErrorEvent = {
|
||||
|
||||
export type FatalEvent = {
|
||||
message: string;
|
||||
log?: string;
|
||||
};
|
||||
|
||||
export type InvalidEvent = {
|
||||
|
||||
@@ -36,11 +36,12 @@ export function dev(opts: { port: number, open: boolean }) {
|
||||
|
||||
watcher.on('error', (event: events.ErrorEvent) => {
|
||||
console.log(`${colors.red(`✗ ${event.type}`)}`);
|
||||
console.log(`${colors.red(event.error.message)}`);
|
||||
console.log(`${colors.red(event.message)}`);
|
||||
});
|
||||
|
||||
watcher.on('fatal', (event: events.FatalEvent) => {
|
||||
console.log(`${colors.bold.red(`> ${event.error.message}`)}`);
|
||||
console.log(`${colors.bold.red(`> ${event.message}`)}`);
|
||||
if (event.log) console.log(event.log);
|
||||
});
|
||||
|
||||
watcher.on('build', (event: events.BuildEvent) => {
|
||||
|
||||
@@ -32,38 +32,42 @@ export function create_serviceworker_manifest({ routes, client_files }: {
|
||||
|
||||
export const shell = [\n\t${client_files.map((x: string) => `"${x}"`).join(',\n\t')}\n];
|
||||
|
||||
export const routes = [\n\t${routes.filter((r: Route) => r.type === 'page' && !/^_[45]xx$/.test(r.id)).map((r: Route) => `{ pattern: ${r.pattern} }`).join(',\n\t')}\n];
|
||||
export const routes = [\n\t${routes.pages.filter(r => r.id !== '_error').map((r: Route) => `{ pattern: ${r.pattern} }`).join(',\n\t')}\n];
|
||||
`.replace(/^\t\t/gm, '').trim();
|
||||
|
||||
write_if_changed(`${locations.app()}/manifest/service-worker.js`, code);
|
||||
}
|
||||
|
||||
function generate_client(routes: Route[], path_to_routes: string, dev_port?: number) {
|
||||
const page_ids = new Set(routes.pages.map(page => page.id));
|
||||
const server_routes_to_ignore = routes.server_routes.filter(route => !page_ids.has(route.id));
|
||||
|
||||
const pages = routes.pages.filter(page => page.id !== '_error');
|
||||
const error_route = routes.pages.find(page => page.id === '_error');
|
||||
|
||||
let code = `
|
||||
// This file is generated by Sapper — do not edit it!
|
||||
export const routes = [
|
||||
${routes
|
||||
.map(route => {
|
||||
const page = route.handlers.find(({ type }) => type === 'page');
|
||||
|
||||
if (!page) {
|
||||
return `{ pattern: ${route.pattern}, ignore: true }`;
|
||||
}
|
||||
export const routes = {
|
||||
ignore: [${server_routes_to_ignore.map(route => route.pattern).join(', ')}],
|
||||
|
||||
pages: [
|
||||
${pages.map(page => {
|
||||
const file = posixify(`${path_to_routes}/${page.file}`);
|
||||
|
||||
if (route.id === '_4xx' || route.id === '_5xx') {
|
||||
return `{ error: '${route.id.slice(1)}', load: () => import(/* webpackChunkName: "${route.id}" */ '${file}') }`;
|
||||
if (page.id === '_error') {
|
||||
return `{ error: true, load: () => import(/* webpackChunkName: "${page.id}" */ '${file}') }`;
|
||||
}
|
||||
|
||||
const params = route.params.length === 0
|
||||
const params = page.params.length === 0
|
||||
? '{}'
|
||||
: `{ ${route.params.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;
|
||||
: `{ ${page.params.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;
|
||||
|
||||
return `{ pattern: ${route.pattern}, params: ${route.params.length > 0 ? `match` : `()`} => (${params}), load: () => import(/* webpackChunkName: "${route.id}" */ '${file}') }`;
|
||||
})
|
||||
.join(',\n\t')}
|
||||
];`.replace(/^\t\t/gm, '').trim();
|
||||
return `{ pattern: ${page.pattern}, params: ${page.params.length > 0 ? `match` : `()`} => (${params}), load: () => import(/* webpackChunkName: "${page.id}" */ '${file}') }`;
|
||||
}).join(',\n\t\t\t\t')}
|
||||
],
|
||||
|
||||
error: () => import(/* webpackChunkName: '_error' */ '${posixify(`${path_to_routes}/${error_route.file}`)}')
|
||||
};`.replace(/^\t\t/gm, '').trim();
|
||||
|
||||
if (dev()) {
|
||||
const sapper_dev_client = posixify(
|
||||
@@ -83,43 +87,46 @@ function generate_client(routes: Route[], path_to_routes: string, dev_port?: num
|
||||
}
|
||||
|
||||
function generate_server(routes: Route[], path_to_routes: string) {
|
||||
const error_route = routes.pages.find(page => page.id === '_error');
|
||||
|
||||
const imports = [].concat(
|
||||
routes.server_routes.map(route =>
|
||||
`import * as route_${route.id} from '${posixify(`${path_to_routes}/${route.file}`)}';`),
|
||||
routes.pages.map(page =>
|
||||
`import page_${page.id} from '${posixify(`${path_to_routes}/${page.file}`)}';`),
|
||||
`import error from '${posixify(`${path_to_routes}/${error_route.file}`)}';`
|
||||
);
|
||||
|
||||
let code = `
|
||||
// This file is generated by Sapper — do not edit it!
|
||||
${routes
|
||||
.map(route =>
|
||||
route.handlers
|
||||
.map(({ type, file }, index) => {
|
||||
const module = posixify(`${path_to_routes}/${file}`);
|
||||
|
||||
return type === 'page'
|
||||
? `import ${route.id}${index} from '${module}';`
|
||||
: `import * as ${route.id}${index} from '${module}';`;
|
||||
})
|
||||
.join('\n')
|
||||
)
|
||||
.join('\n')}
|
||||
|
||||
export const routes = [
|
||||
${routes
|
||||
.map(route => {
|
||||
const handlers = route.handlers
|
||||
.map(({ type }, index) =>
|
||||
`{ type: '${type}', module: ${route.id}${index} }`)
|
||||
.join(', ');
|
||||
|
||||
if (route.id === '_4xx' || route.id === '_5xx') {
|
||||
return `{ error: '${route.id.slice(1)}', handlers: [${handlers}] }`;
|
||||
}
|
||||
${imports.join('\n')}
|
||||
|
||||
export const routes = {
|
||||
server_routes: [
|
||||
${routes.server_routes.map(route => {
|
||||
const params = route.params.length === 0
|
||||
? '{}'
|
||||
: `{ ${route.params.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;
|
||||
|
||||
return `{ id: '${route.id}', pattern: ${route.pattern}, params: ${route.params.length > 0 ? `match` : `()`} => (${params}), handlers: [${handlers}] }`;
|
||||
})
|
||||
.join(',\n\t')
|
||||
return `{ id: '${route.id}', pattern: ${route.pattern}, params: ${route.params.length > 0 ? `match` : `()`} => (${params}), handlers: route_${route.id} }`;
|
||||
}).join(',\n\t\t\t\t')}
|
||||
],
|
||||
|
||||
pages: [
|
||||
${routes.pages.map(page => {
|
||||
const params = page.params.length === 0
|
||||
? '{}'
|
||||
: `{ ${page.params.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;
|
||||
|
||||
return `{ id: '${page.id}', pattern: ${page.pattern}, params: ${page.params.length > 0 ? `match` : `()`} => (${params}), handler: page_${page.id} }`;
|
||||
}).join(',\n\t\t\t\t')}
|
||||
],
|
||||
|
||||
error: {
|
||||
error: true,
|
||||
handler: error
|
||||
}
|
||||
];`.replace(/^\t\t/gm, '').trim();
|
||||
};`.replace(/^\t\t/gm, '').trim();
|
||||
|
||||
return code;
|
||||
}
|
||||
@@ -3,81 +3,53 @@ import glob from 'glob';
|
||||
import { locations } from '../config';
|
||||
import { Route } from '../interfaces';
|
||||
|
||||
export default function create_routes({ files } = { files: glob.sync('**/*.*', { cwd: locations.routes(), dot: true, nodir: true }) }) {
|
||||
const routes: Route[] = files
|
||||
.filter((file: string) => !/(^|\/|\\)_/.test(file))
|
||||
export default function create_routes({
|
||||
files
|
||||
} = {
|
||||
files: glob.sync('**/*.*', {
|
||||
cwd: locations.routes(),
|
||||
dot: true,
|
||||
nodir: true
|
||||
})
|
||||
}) {
|
||||
const all_routes = files
|
||||
.filter((file: string) => !/(^|\/|\\)(_(?!error\.html)|\.(?!well-known))/.test(file))
|
||||
.map((file: string) => {
|
||||
if (/(^|\/|\\)(_|\.(?!well-known))/.test(file)) return;
|
||||
|
||||
if (/]\[/.test(file)) {
|
||||
throw new Error(`Invalid route ${file} — parameters must be separated`);
|
||||
}
|
||||
|
||||
const base = file.replace(/\.[^/.]+$/, '');
|
||||
const parts = base.split('/'); // glob output is always posix-style
|
||||
if (parts[parts.length - 1] === 'index') parts.pop();
|
||||
|
||||
return {
|
||||
files: [file],
|
||||
base,
|
||||
parts
|
||||
};
|
||||
})
|
||||
.filter(Boolean)
|
||||
.filter((a, index, array) => {
|
||||
const found = array.slice(index + 1).find(b => a.base === b.base);
|
||||
if (found) found.files.push(...a.files);
|
||||
return !found;
|
||||
})
|
||||
.sort((a, b) => {
|
||||
if (a.parts[0] === '4xx' || a.parts[0] === '5xx') return -1;
|
||||
if (b.parts[0] === '4xx' || b.parts[0] === '5xx') return 1;
|
||||
|
||||
const max = Math.max(a.parts.length, b.parts.length);
|
||||
|
||||
for (let i = 0; i < max; i += 1) {
|
||||
const a_part = a.parts[i];
|
||||
const b_part = b.parts[i];
|
||||
|
||||
if (!a_part) return -1;
|
||||
if (!b_part) return 1;
|
||||
|
||||
const a_sub_parts = get_sub_parts(a_part);
|
||||
const b_sub_parts = get_sub_parts(b_part);
|
||||
const max = Math.max(a_sub_parts.length, b_sub_parts.length);
|
||||
|
||||
for (let i = 0; i < max; i += 1) {
|
||||
const a_sub_part = a_sub_parts[i];
|
||||
const b_sub_part = b_sub_parts[i];
|
||||
|
||||
if (!a_sub_part) return 1; // b is more specific, so goes first
|
||||
if (!b_sub_part) return -1;
|
||||
|
||||
if (a_sub_part.dynamic !== b_sub_part.dynamic) {
|
||||
return a_sub_part.dynamic ? 1 : -1;
|
||||
}
|
||||
|
||||
if (!a_sub_part.dynamic && a_sub_part.content !== b_sub_part.content) {
|
||||
return (
|
||||
(b_sub_part.content.length - a_sub_part.content.length) ||
|
||||
(a_sub_part.content < b_sub_part.content ? -1 : 1)
|
||||
);
|
||||
}
|
||||
}
|
||||
if (file === '4xx.html' || file === '5xx.html') {
|
||||
throw new Error('As of Sapper 0.14, 4xx.html and 5xx.html should be replaced with _error.html');
|
||||
}
|
||||
|
||||
const base = file.replace(/\.[^/.]+$/, '');
|
||||
const parts = base.split('/'); // glob output is always posix-style
|
||||
if (/^index(\..+)?/.test(parts[parts.length - 1])) {
|
||||
const part = parts.pop();
|
||||
if (parts.length > 0) parts[parts.length - 1] += part.slice(5);
|
||||
}
|
||||
|
||||
throw new Error(`The ${a.base} and ${b.base} routes clash`);
|
||||
})
|
||||
.map(({ files, base, parts }) => {
|
||||
const id = (
|
||||
parts.join('_').replace(/[[\]]/g, '$').replace(/^\d/, '_$&').replace(/[^a-zA-Z0-9_$]/g, '_')
|
||||
) || '_';
|
||||
) || '_';
|
||||
|
||||
const type = file.endsWith('.html') ? 'page' : 'route';
|
||||
|
||||
const params: string[] = [];
|
||||
const param_pattern = /\[([^\]]+)\]/g;
|
||||
const match_patterns: Record<string, string> = {};
|
||||
const param_pattern = /\[([^\(\]]+)(?:\((.+?)\))?\]/g;
|
||||
|
||||
let match;
|
||||
while (match = param_pattern.exec(base)) {
|
||||
params.push(match[1]);
|
||||
if (typeof match[2] !== 'undefined') {
|
||||
if (/[\(\)\?\:]/.exec(match[2])) {
|
||||
throw new Error('Sapper does not allow (, ), ? or : in RegExp routes yet');
|
||||
}
|
||||
// Make a map of the regexp patterns
|
||||
match_patterns[match[1]] = `(${match[2]}?)`;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO can we do all this with sub-parts? or does
|
||||
@@ -90,8 +62,14 @@ export default function create_routes({ files } = { files: glob.sync('**/*.*', {
|
||||
const dynamic = ~part.indexOf('[');
|
||||
|
||||
if (dynamic) {
|
||||
const matcher = part.replace(param_pattern, `([^\/]+?)`);
|
||||
pattern_string = nested ? `(?:\\/${matcher}${pattern_string})?` : `\\/${matcher}${pattern_string}`;
|
||||
// Get keys from part and replace with stored match patterns
|
||||
const keys = part.replace(/\(.*?\)/, '').split(/[\[\]]/).filter((x, i) => { if (i % 2) return x });
|
||||
let matcher = part;
|
||||
keys.forEach(k => {
|
||||
const key_pattern = new RegExp('\\[' + k + '(?:\\((.+?)\\))?\\]');
|
||||
matcher = matcher.replace(key_pattern, match_patterns[k] || `([^/]+?)`);
|
||||
})
|
||||
pattern_string = (nested && type === 'page') ? `(?:\\/${matcher}${pattern_string})?` : `\\/${matcher}${pattern_string}`;
|
||||
} else {
|
||||
nested = false;
|
||||
pattern_string = `\\/${part}${pattern_string}`;
|
||||
@@ -116,20 +94,9 @@ export default function create_routes({ files } = { files: glob.sync('**/*.*', {
|
||||
|
||||
return {
|
||||
id,
|
||||
handlers: files.map(file => ({
|
||||
type: path.extname(file) === '.html' ? 'page' : 'route',
|
||||
file
|
||||
})).sort((a, b) => {
|
||||
if (a.type === 'page' && b.type === 'route') {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (a.type === 'route' && b.type === 'page') {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
}),
|
||||
base,
|
||||
type,
|
||||
file,
|
||||
pattern,
|
||||
test,
|
||||
exec,
|
||||
@@ -138,11 +105,76 @@ export default function create_routes({ files } = { files: glob.sync('**/*.*', {
|
||||
};
|
||||
});
|
||||
|
||||
return routes;
|
||||
const pages = all_routes
|
||||
.filter(r => r.type === 'page')
|
||||
.sort(comparator);
|
||||
|
||||
const server_routes = all_routes
|
||||
.filter(r => r.type === 'route')
|
||||
.sort(comparator);
|
||||
|
||||
return { pages, server_routes };
|
||||
}
|
||||
|
||||
function comparator(a, b) {
|
||||
if (a.parts[0] === '_error') return -1;
|
||||
if (b.parts[0] === '_error') return 1;
|
||||
|
||||
const max = Math.max(a.parts.length, b.parts.length);
|
||||
|
||||
for (let i = 0; i < max; i += 1) {
|
||||
const a_part = a.parts[i];
|
||||
const b_part = b.parts[i];
|
||||
|
||||
if (!a_part) return -1;
|
||||
if (!b_part) return 1;
|
||||
|
||||
const a_sub_parts = get_sub_parts(a_part);
|
||||
const b_sub_parts = get_sub_parts(b_part);
|
||||
const max = Math.max(a_sub_parts.length, b_sub_parts.length);
|
||||
|
||||
for (let i = 0; i < max; i += 1) {
|
||||
const a_sub_part = a_sub_parts[i];
|
||||
const b_sub_part = b_sub_parts[i];
|
||||
|
||||
if (!a_sub_part) return 1; // b is more specific, so goes first
|
||||
if (!b_sub_part) return -1;
|
||||
|
||||
if (a_sub_part.dynamic !== b_sub_part.dynamic) {
|
||||
return a_sub_part.dynamic ? 1 : -1;
|
||||
}
|
||||
|
||||
if (!a_sub_part.dynamic && a_sub_part.content !== b_sub_part.content) {
|
||||
return (
|
||||
(b_sub_part.content.length - a_sub_part.content.length) ||
|
||||
(a_sub_part.content < b_sub_part.content ? -1 : 1)
|
||||
);
|
||||
}
|
||||
|
||||
// If both parts dynamic, check for regexp patterns
|
||||
if (a_sub_part.dynamic && b_sub_part.dynamic) {
|
||||
const regexp_pattern = /\((.*?)\)/;
|
||||
const a_match = regexp_pattern.exec(a_sub_part.content);
|
||||
const b_match = regexp_pattern.exec(b_sub_part.content);
|
||||
|
||||
if (!a_match && b_match) {
|
||||
return 1; // No regexp, so less specific than b
|
||||
}
|
||||
if (!b_match && a_match) {
|
||||
return -1;
|
||||
}
|
||||
if (a_match && b_match && a_match[1] !== b_match[1]) {
|
||||
return b_match[1].length - a_match[1].length;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error(`The ${a.base} and ${b.base} routes clash`);
|
||||
}
|
||||
|
||||
function get_sub_parts(part: string) {
|
||||
return part.split(/[\[\]]/)
|
||||
return part.split(/\[(.+)\]/)
|
||||
.map((content, i) => {
|
||||
if (!content) return null;
|
||||
return {
|
||||
|
||||
@@ -61,8 +61,13 @@ export default function middleware({ App, routes, store }: {
|
||||
const middleware = compose_handlers([
|
||||
(req: Req, res: ServerResponse, next: () => void) => {
|
||||
if (req.baseUrl === undefined) {
|
||||
req.baseUrl = req.originalUrl
|
||||
? req.originalUrl.slice(0, -req.url.length)
|
||||
let { originalUrl } = req;
|
||||
if (req.url === '/' && originalUrl[originalUrl.length - 1] !== '/') {
|
||||
originalUrl += '/';
|
||||
}
|
||||
|
||||
req.baseUrl = originalUrl
|
||||
? originalUrl.slice(0, -req.url.length)
|
||||
: '';
|
||||
}
|
||||
|
||||
@@ -103,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;
|
||||
@@ -146,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()
|
||||
@@ -157,292 +238,162 @@ 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'));
|
||||
|
||||
function handle_route(route: RouteObject, req: Req, res: ServerResponse) {
|
||||
req.params = route.params(route.pattern.exec(req.path));
|
||||
const { server_routes, pages } = routes;
|
||||
const error_route = routes.error;
|
||||
|
||||
const handlers = route.handlers[Symbol.iterator]();
|
||||
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));
|
||||
|
||||
function next() {
|
||||
const chunks: Record<string, string> = get_chunks();
|
||||
const chunks: Record<string, string> = get_chunks();
|
||||
|
||||
try {
|
||||
const { value: handler, done } = handlers.next();
|
||||
|
||||
if (done) {
|
||||
handle_error(req, res, 404, 'Not found');
|
||||
return;
|
||||
}
|
||||
|
||||
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])
|
||||
.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 };
|
||||
|
||||
let redirect: { statusCode: number, location: string };
|
||||
let 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) => {
|
||||
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 => {
|
||||
error = { statusCode: 500, message: err };
|
||||
}).then(preloaded => {
|
||||
if (redirect) {
|
||||
res.statusCode = redirect.statusCode;
|
||||
res.setHeader('Location', `${req.baseUrl}/${redirect.location}`);
|
||||
res.end();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
handle_error(req, res, error.statusCode, 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.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) {
|
||||
handle_error(req, res, 500, error);
|
||||
}
|
||||
}
|
||||
|
||||
next();
|
||||
}
|
||||
|
||||
const not_found_route = routes.find((route: RouteObject) => route.error === '4xx');
|
||||
const error_route = routes.find((route: RouteObject) => route.error === '5xx');
|
||||
|
||||
function handle_error(req: Req, res: ServerResponse, statusCode: number, message: Error | string) {
|
||||
res.statusCode = statusCode;
|
||||
res.setHeader('Content-Type', 'text/html');
|
||||
|
||||
const error = message instanceof Error ? message : new Error(message);
|
||||
// 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(', ');
|
||||
|
||||
const not_found = statusCode >= 400 && statusCode < 500;
|
||||
res.setHeader('Link', link);
|
||||
|
||||
const route = not_found
|
||||
? not_found_route
|
||||
: error_route;
|
||||
const store = store_getter ? store_getter(req) : null;
|
||||
const props = { params: req.params, query: req.query, path: req.path };
|
||||
|
||||
function render_page({ head, css, html }) {
|
||||
const page = template()
|
||||
.replace('%sapper.base%', `<base href="${req.baseUrl}/">`)
|
||||
.replace('%sapper.scripts%', `<script>__SAPPER__={baseUrl: "${req.baseUrl}"}</script><script src='${req.baseUrl}/client/${get_chunks().main}'></script>`)
|
||||
.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.end(page);
|
||||
if (route.error) {
|
||||
props.error = error instanceof Error ? error : { message: error };
|
||||
props.status = status;
|
||||
}
|
||||
|
||||
function handle_notfound() {
|
||||
const title: string = not_found
|
||||
? 'Not found'
|
||||
: `Internal server error: ${error.message}`;
|
||||
let redirect: { statusCode: number, location: string };
|
||||
let preload_error: { statusCode: number, message: Error | string };
|
||||
|
||||
render_page({ head: '', css: null, html: title });
|
||||
}
|
||||
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 (route) {
|
||||
const handlers = route.handlers[Symbol.iterator]();
|
||||
if (opts) {
|
||||
opts = Object.assign({}, opts);
|
||||
|
||||
function next() {
|
||||
const { value: handler, done } = handlers.next();
|
||||
const include_cookies = (
|
||||
opts.credentials === 'include' ||
|
||||
opts.credentials === 'same-origin' && parsed.origin === `http://127.0.0.1:${process.env.PORT}`
|
||||
);
|
||||
|
||||
if (done) {
|
||||
handle_notfound();
|
||||
} else if (handler.type === 'page') {
|
||||
render_page(handler.module.render({
|
||||
status: statusCode,
|
||||
error
|
||||
}, {
|
||||
store: store_getter && store_getter(req)
|
||||
}));
|
||||
} else {
|
||||
const handle_method = mod[method_export];
|
||||
if (handle_method) {
|
||||
handle_method(req, res, next);
|
||||
} else {
|
||||
next();
|
||||
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;
|
||||
}
|
||||
|
||||
next();
|
||||
} else {
|
||||
handle_notfound();
|
||||
}
|
||||
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_error(req, res, 404, 'Not found');
|
||||
handle_route(error_route, req, res, 404, 'Not found');
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ export let component: Component;
|
||||
let target: Node;
|
||||
let store: Store;
|
||||
let routes: Route[];
|
||||
let errors: { '4xx': Route, '5xx': Route };
|
||||
let error_route: Route;
|
||||
|
||||
const history = typeof window !== 'undefined' ? window.history : {
|
||||
pushState: (state: any, title: string, href: string) => {},
|
||||
@@ -30,12 +30,15 @@ function select_route(url: URL): Target {
|
||||
|
||||
const path = url.pathname.slice(manifest.baseUrl.length);
|
||||
|
||||
for (const route of routes) {
|
||||
const match = route.pattern.exec(path);
|
||||
if (match) {
|
||||
if (route.ignore) return null;
|
||||
// avoid accidental clashes between server routes and pages
|
||||
if (routes.ignore.some(pattern => pattern.test(path))) return;
|
||||
|
||||
const params = route.params(match);
|
||||
for (let i = 0; i < routes.pages.length; i += 1) {
|
||||
const page = routes.pages[i];
|
||||
|
||||
const match = page.pattern.exec(path);
|
||||
if (match) {
|
||||
const params = page.params(match);
|
||||
|
||||
const query: Record<string, string | true> = {};
|
||||
if (url.search.length > 0) {
|
||||
@@ -44,7 +47,7 @@ function select_route(url: URL): Target {
|
||||
query[key] = value || true;
|
||||
})
|
||||
}
|
||||
return { url, route, props: { params, query, path } };
|
||||
return { url, route: page, props: { params, query, path } };
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -117,11 +120,7 @@ function prepare_route(Page: ComponentConstructor, props: RouteData) {
|
||||
error = { statusCode: 500, message: err };
|
||||
}).then(preloaded => {
|
||||
if (error) {
|
||||
const route = error.statusCode >= 400 && error.statusCode < 500
|
||||
? errors['4xx']
|
||||
: errors['5xx'];
|
||||
|
||||
return route.load().then(({ default: Page }: { default: ComponentConstructor }) => {
|
||||
return error_route().then(({ default: Page }: { default: ComponentConstructor }) => {
|
||||
const err = error.message instanceof Error ? error.message : new Error(error.message);
|
||||
Object.assign(props, { status: error.statusCode, error: err });
|
||||
return { Page, props, redirect: null };
|
||||
@@ -133,7 +132,7 @@ function prepare_route(Page: ComponentConstructor, props: RouteData) {
|
||||
});
|
||||
}
|
||||
|
||||
function navigate(target: Target, id: number) {
|
||||
function navigate(target: Target, id: number): Promise<any> {
|
||||
if (id) {
|
||||
// popstate or initial navigation
|
||||
cid = id;
|
||||
@@ -212,7 +211,11 @@ function handle_popstate(event: PopStateEvent) {
|
||||
if (event.state) {
|
||||
const url = new URL(window.location.href);
|
||||
const target = select_route(url);
|
||||
navigate(target, event.state.id);
|
||||
if (target) {
|
||||
navigate(target, event.state.id);
|
||||
} else {
|
||||
window.location.href = window.location.href;
|
||||
}
|
||||
} else {
|
||||
// hashchange
|
||||
cid = ++uid;
|
||||
@@ -261,11 +264,8 @@ export function init(opts: { App: ComponentConstructor, target: Node, routes: Ro
|
||||
|
||||
App = opts.App;
|
||||
target = opts.target;
|
||||
routes = opts.routes.filter(r => !r.error);
|
||||
errors = {
|
||||
'4xx': opts.routes.find(r => r.error === '4xx'),
|
||||
'5xx': opts.routes.find(r => r.error === '5xx')
|
||||
};
|
||||
routes = opts.routes;
|
||||
error_route = opts.routes.error;
|
||||
|
||||
if (opts && opts.store) {
|
||||
store = opts.store(manifest.store);
|
||||
@@ -293,32 +293,32 @@ export function init(opts: { App: ComponentConstructor, target: Node, routes: Ro
|
||||
history.replaceState({ id: uid }, '', href);
|
||||
|
||||
const target = select_route(new URL(window.location.href));
|
||||
return navigate(target, uid);
|
||||
if (target) return navigate(target, uid);
|
||||
});
|
||||
}
|
||||
|
||||
export function goto(href: string, opts = { replaceState: false }) {
|
||||
const target = select_route(new URL(href, document.baseURI));
|
||||
let promise;
|
||||
|
||||
if (target) {
|
||||
navigate(target, null);
|
||||
promise = navigate(target, null);
|
||||
if (history) history[opts.replaceState ? 'replaceState' : 'pushState']({ id: cid }, '', href);
|
||||
} else {
|
||||
window.location.href = href;
|
||||
promise = new Promise(f => {}); // never resolves
|
||||
}
|
||||
|
||||
return promise;
|
||||
}
|
||||
|
||||
export function prefetchRoutes(pathnames: string[]) {
|
||||
if (!routes) throw new Error(`You must call init() first`);
|
||||
|
||||
return routes
|
||||
return routes.pages
|
||||
.filter(route => {
|
||||
if (!pathnames) return true;
|
||||
return pathnames.some(pathname => {
|
||||
return route.error
|
||||
? route.error === pathname
|
||||
: route.pattern.test(pathname)
|
||||
});
|
||||
return pathnames.some(pathname => route.pattern.test(pathname));
|
||||
})
|
||||
.reduce((promise: Promise<any>, route) => {
|
||||
return promise.then(route.load);
|
||||
|
||||
@@ -17,7 +17,7 @@ export interface Component {
|
||||
export type Route = {
|
||||
pattern: RegExp;
|
||||
load: () => Promise<{ default: ComponentConstructor }>;
|
||||
error?: string;
|
||||
error?: boolean;
|
||||
params?: (match: RegExpExecArray) => Record<string, string>;
|
||||
ignore?: boolean;
|
||||
};
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
<svelte:head>
|
||||
<title>Internal server error</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Internal server error</h1>
|
||||
<p>{error.message}</p>
|
||||
@@ -2,5 +2,5 @@
|
||||
<title>{status}</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Not found</h1>
|
||||
<h1>{status}</h1>
|
||||
<p>{error.message}</p>
|
||||
@@ -6,15 +6,21 @@
|
||||
|
||||
<p>This is the 'about' page. There's not much here.</p>
|
||||
|
||||
<button class='goto' on:click='goto("blog/what-is-sapper")'>What is Sapper?</button>
|
||||
<button class='prefetch' on:click='prefetch("blog/why-the-name")'>Why the name?</button>
|
||||
|
||||
<script>
|
||||
import { goto, prefetch } from '../../../runtime.js';
|
||||
|
||||
export default {
|
||||
oncreate() {
|
||||
window.goto = goto;
|
||||
},
|
||||
|
||||
ondestroy() {
|
||||
window.goto = null;
|
||||
},
|
||||
|
||||
methods: {
|
||||
goto,
|
||||
prefetch
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import posts from './blog/_posts.js';
|
||||
import posts from './_posts.js';
|
||||
|
||||
const contents = JSON.stringify(posts.map(post => {
|
||||
return {
|
||||
9
test/app/routes/unsafe-replacement.html
Normal file
9
test/app/routes/unsafe-replacement.html
Normal file
@@ -0,0 +1,9 @@
|
||||
$&
|
||||
|
||||
<script>
|
||||
export default {
|
||||
preload() {
|
||||
return '$&';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -281,9 +281,7 @@ function run({ mode, basepath = '' }) {
|
||||
return nightmare
|
||||
.goto(`${base}/about`)
|
||||
.init()
|
||||
.click('.goto')
|
||||
.wait(url => window.location.pathname === url, `${basepath}/blog/what-is-sapper`)
|
||||
.wait(100)
|
||||
.evaluate(() => window.goto('blog/what-is-sapper'))
|
||||
.title()
|
||||
.then(title => {
|
||||
assert.equal(title, 'What is Sapper?');
|
||||
@@ -441,7 +439,7 @@ function run({ mode, basepath = '' }) {
|
||||
})
|
||||
.then(() => nightmare.page.title())
|
||||
.then(title => {
|
||||
assert.equal(title, 'Not found')
|
||||
assert.equal(title, '404')
|
||||
});
|
||||
});
|
||||
|
||||
@@ -456,7 +454,7 @@ function run({ mode, basepath = '' }) {
|
||||
})
|
||||
.then(() => nightmare.page.title())
|
||||
.then(title => {
|
||||
assert.equal(title, 'Not found');
|
||||
assert.equal(title, '404');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -468,7 +466,7 @@ function run({ mode, basepath = '' }) {
|
||||
})
|
||||
.then(() => nightmare.page.title())
|
||||
.then(title => {
|
||||
assert.equal(title, 'Internal server error')
|
||||
assert.equal(title, '500')
|
||||
});
|
||||
});
|
||||
|
||||
@@ -483,7 +481,7 @@ function run({ mode, basepath = '' }) {
|
||||
})
|
||||
.then(() => nightmare.page.title())
|
||||
.then(title => {
|
||||
assert.equal(title, 'Internal server error');
|
||||
assert.equal(title, '500');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -621,6 +619,16 @@ function run({ mode, basepath = '' }) {
|
||||
assert.equal(name, 'BODY');
|
||||
});
|
||||
});
|
||||
|
||||
it('replaces %sapper.xxx% tags safely', () => {
|
||||
return nightmare
|
||||
.goto(`${base}/unsafe-replacement`)
|
||||
.init()
|
||||
.page.html()
|
||||
.then(html => {
|
||||
assert.equal(html.indexOf('%sapper'), -1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('headers', () => {
|
||||
|
||||
@@ -2,30 +2,8 @@ const assert = require('assert');
|
||||
const { create_routes } = require('../../dist/core.ts.js');
|
||||
|
||||
describe('create_routes', () => {
|
||||
it('sorts handlers correctly', () => {
|
||||
const routes = create_routes({
|
||||
files: ['foo.html', 'foo.js']
|
||||
});
|
||||
|
||||
assert.deepEqual(
|
||||
routes.map(r => r.handlers),
|
||||
[
|
||||
[
|
||||
{
|
||||
type: 'route',
|
||||
file: 'foo.js'
|
||||
},
|
||||
{
|
||||
type: 'page',
|
||||
file: 'foo.html'
|
||||
}
|
||||
]
|
||||
]
|
||||
)
|
||||
});
|
||||
|
||||
it('encodes characters not allowed in path', () => {
|
||||
const routes = create_routes({
|
||||
const { server_routes } = create_routes({
|
||||
files: [
|
||||
'"',
|
||||
'#',
|
||||
@@ -34,7 +12,7 @@ describe('create_routes', () => {
|
||||
});
|
||||
|
||||
assert.deepEqual(
|
||||
routes.map(r => r.pattern),
|
||||
server_routes.map(r => r.pattern),
|
||||
[
|
||||
/^\/%22\/?$/,
|
||||
/^\/%23\/?$/,
|
||||
@@ -44,35 +22,70 @@ describe('create_routes', () => {
|
||||
});
|
||||
|
||||
it('sorts routes correctly', () => {
|
||||
const routes = create_routes({
|
||||
files: ['index.html', 'about.html', 'post/f[xx].html', '[wildcard].html', 'post/foo.html', 'post/[id].html', 'post/bar.html', 'post/[id].json.js']
|
||||
const { pages, server_routes } = create_routes({
|
||||
files: [
|
||||
'index.html',
|
||||
'about.html',
|
||||
'post/f[xx].html',
|
||||
'[wildcard].html',
|
||||
'post/foo.html',
|
||||
'post/[id].html',
|
||||
'post/bar.html',
|
||||
'post/[id].json.js',
|
||||
'post/[id([0-9-a-z]{3,})].html',
|
||||
]
|
||||
});
|
||||
|
||||
assert.deepEqual(
|
||||
routes.map(r => r.handlers[0].file),
|
||||
pages.map(r => r.file),
|
||||
[
|
||||
'index.html',
|
||||
'about.html',
|
||||
'post/bar.html',
|
||||
'post/foo.html',
|
||||
'post/f[xx].html',
|
||||
'post/[id].json.js',
|
||||
'post/[id([0-9-a-z]{3,})].html', // RegExp is more specific
|
||||
'post/[id].html',
|
||||
'[wildcard].html'
|
||||
]
|
||||
);
|
||||
|
||||
assert.deepEqual(
|
||||
server_routes.map(r => r.file),
|
||||
[
|
||||
'post/[id].json.js'
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
it('distinguishes and sorts regexp routes correctly', () => {
|
||||
const { pages } = create_routes({
|
||||
files: [
|
||||
'[slug].html',
|
||||
'[slug([a-z]{2})].html',
|
||||
'[slug([0-9-a-z]{3,})].html',
|
||||
]
|
||||
});
|
||||
|
||||
assert.deepEqual(
|
||||
pages.map(r => r.file),
|
||||
[
|
||||
'[slug([0-9-a-z]{3,})].html',
|
||||
'[slug([a-z]{2})].html',
|
||||
'[slug].html',
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
it('prefers index page to nested route', () => {
|
||||
let routes = create_routes({
|
||||
let { pages, server_routes } = create_routes({
|
||||
files: [
|
||||
'api/examples/[slug].js',
|
||||
'api/examples/index.js',
|
||||
'blog/[slug].html',
|
||||
'api/gists/[id].js',
|
||||
'api/gists/index.js',
|
||||
'4xx.html',
|
||||
'5xx.html',
|
||||
'_error.html',
|
||||
'blog/index.html',
|
||||
'blog/rss.xml.js',
|
||||
'guide/index.html',
|
||||
@@ -81,15 +94,20 @@ describe('create_routes', () => {
|
||||
});
|
||||
|
||||
assert.deepEqual(
|
||||
routes.map(r => r.handlers[0].file),
|
||||
pages.map(r => r.file),
|
||||
[
|
||||
'4xx.html',
|
||||
'5xx.html',
|
||||
'_error.html',
|
||||
'index.html',
|
||||
'guide/index.html',
|
||||
'blog/index.html',
|
||||
'blog/[slug].html'
|
||||
]
|
||||
);
|
||||
|
||||
assert.deepEqual(
|
||||
server_routes.map(r => r.file),
|
||||
[
|
||||
'blog/rss.xml.js',
|
||||
'blog/[slug].html',
|
||||
'api/examples/index.js',
|
||||
'api/examples/[slug].js',
|
||||
'api/gists/index.js',
|
||||
@@ -97,10 +115,9 @@ describe('create_routes', () => {
|
||||
]
|
||||
);
|
||||
|
||||
routes = create_routes({
|
||||
({ pages, server_routes } = create_routes({
|
||||
files: [
|
||||
'4xx.html',
|
||||
'5xx.html',
|
||||
'_error.html',
|
||||
'api/blog/[slug].js',
|
||||
'api/blog/index.js',
|
||||
'api/guide/contents.js',
|
||||
@@ -114,40 +131,63 @@ describe('create_routes', () => {
|
||||
'index.html',
|
||||
'repl/index.html'
|
||||
]
|
||||
});
|
||||
}));
|
||||
|
||||
assert.deepEqual(
|
||||
routes.map(r => r.handlers[0].file),
|
||||
pages.map(r => r.file),
|
||||
[
|
||||
'4xx.html',
|
||||
'5xx.html',
|
||||
'_error.html',
|
||||
'index.html',
|
||||
'guide/index.html',
|
||||
'blog/index.html',
|
||||
'blog/rss.xml.js',
|
||||
'blog/[slug].html',
|
||||
'repl/index.html'
|
||||
]
|
||||
);
|
||||
|
||||
assert.deepEqual(
|
||||
server_routes.map(r => r.file),
|
||||
[
|
||||
'blog/rss.xml.js',
|
||||
'gist/create.js',
|
||||
'gist/[id].js',
|
||||
'repl/index.html',
|
||||
'api/guide/index.js',
|
||||
'api/guide/contents.js',
|
||||
'api/blog/index.js',
|
||||
'api/blog/[slug].js',
|
||||
]
|
||||
);
|
||||
|
||||
// RegExp routes
|
||||
({ pages } = create_routes({
|
||||
files: [
|
||||
'blog/[slug].html',
|
||||
'blog/index.html',
|
||||
'blog/[slug([^0-9]+)].html',
|
||||
]
|
||||
}));
|
||||
|
||||
assert.deepEqual(
|
||||
pages.map(r => r.file),
|
||||
[
|
||||
'blog/index.html',
|
||||
'blog/[slug([^0-9]+)].html',
|
||||
'blog/[slug].html',
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
it('generates params', () => {
|
||||
const routes = create_routes({
|
||||
const { pages } = create_routes({
|
||||
files: ['index.html', 'about.html', '[wildcard].html', 'post/[id].html']
|
||||
});
|
||||
|
||||
let file;
|
||||
let params;
|
||||
for (let i = 0; i < routes.length; i += 1) {
|
||||
const route = routes[i];
|
||||
for (let i = 0; i < pages.length; i += 1) {
|
||||
const route = pages[i];
|
||||
if (params = route.exec('/post/123')) {
|
||||
file = route.handlers[0].file;
|
||||
file = route.file;
|
||||
break;
|
||||
}
|
||||
}
|
||||
@@ -159,12 +199,12 @@ describe('create_routes', () => {
|
||||
});
|
||||
|
||||
it('ignores files and directories with leading underscores', () => {
|
||||
const routes = create_routes({
|
||||
const { pages } = create_routes({
|
||||
files: ['index.html', '_foo.html', 'a/_b/c/d.html', 'e/f/g/h.html', 'i/_j.html']
|
||||
});
|
||||
|
||||
assert.deepEqual(
|
||||
routes.map(r => r.handlers[0].file),
|
||||
pages.map(r => r.file),
|
||||
[
|
||||
'index.html',
|
||||
'e/f/g/h.html'
|
||||
@@ -173,13 +213,13 @@ describe('create_routes', () => {
|
||||
});
|
||||
|
||||
it('ignores files and directories with leading dots except .well-known', () => {
|
||||
const routes = create_routes({
|
||||
files: ['.well-known', '.unknown']
|
||||
const { server_routes } = create_routes({
|
||||
files: ['.well-known/dnt-policy.txt.js', '.unknown/foo.txt.js']
|
||||
});
|
||||
|
||||
assert.deepEqual(
|
||||
routes.map(r => r.handlers[0].file),
|
||||
['.well-known']
|
||||
server_routes.map(r => r.file),
|
||||
['.well-known/dnt-policy.txt.js']
|
||||
);
|
||||
});
|
||||
|
||||
@@ -192,12 +232,12 @@ describe('create_routes', () => {
|
||||
});
|
||||
|
||||
assert.deepEqual(
|
||||
a.map(r => r.handlers[0].file),
|
||||
a.pages.map(r => r.file),
|
||||
['foo/[bar].html', '[baz]/qux.html']
|
||||
);
|
||||
|
||||
assert.deepEqual(
|
||||
b.map(r => r.handlers[0].file),
|
||||
b.pages.map(r => r.file),
|
||||
['foo/[bar].html', '[baz]/qux.html']
|
||||
);
|
||||
});
|
||||
@@ -208,49 +248,56 @@ describe('create_routes', () => {
|
||||
files: ['[foo].html', '[bar]/index.html']
|
||||
});
|
||||
}, /The \[foo\] and \[bar\]\/index routes clash/);
|
||||
|
||||
assert.throws(() => {
|
||||
create_routes({
|
||||
files: ['[foo([0-9-a-z]+)].html', '[bar([0-9-a-z]+)]/index.html']
|
||||
});
|
||||
}, /The \[foo\(\[0-9-a-z\]\+\)\] and \[bar\(\[0-9-a-z\]\+\)\]\/index routes clash/);
|
||||
});
|
||||
|
||||
it('matches nested routes', () => {
|
||||
const route = create_routes({
|
||||
files: ['settings/[submenu].html']
|
||||
})[0];
|
||||
|
||||
assert.deepEqual(route.exec('/settings/foo'), {
|
||||
it('matches nested routes', () => {
|
||||
const page = create_routes({
|
||||
files: ['settings/[submenu].html']
|
||||
}).pages[0];
|
||||
|
||||
assert.deepEqual(page.exec('/settings/foo'), {
|
||||
submenu: 'foo'
|
||||
});
|
||||
|
||||
assert.deepEqual(route.exec('/settings'), {
|
||||
assert.deepEqual(page.exec('/settings'), {
|
||||
submenu: null
|
||||
});
|
||||
});
|
||||
|
||||
it('prefers index routes to nested routes', () => {
|
||||
const routes = create_routes({
|
||||
const { pages } = create_routes({
|
||||
files: ['settings/[submenu].html', 'settings.html']
|
||||
});
|
||||
|
||||
assert.deepEqual(
|
||||
routes.map(r => r.handlers[0].file),
|
||||
pages.map(r => r.file),
|
||||
['settings.html', 'settings/[submenu].html']
|
||||
);
|
||||
});
|
||||
|
||||
it('matches deeply nested routes', () => {
|
||||
const route = create_routes({
|
||||
const page = create_routes({
|
||||
files: ['settings/[a]/[b]/index.html']
|
||||
})[0];
|
||||
}).pages[0];
|
||||
|
||||
assert.deepEqual(route.exec('/settings/foo/bar'), {
|
||||
assert.deepEqual(page.exec('/settings/foo/bar'), {
|
||||
a: 'foo',
|
||||
b: 'bar'
|
||||
});
|
||||
|
||||
assert.deepEqual(route.exec('/settings/foo'), {
|
||||
assert.deepEqual(page.exec('/settings/foo'), {
|
||||
a: 'foo',
|
||||
b: null
|
||||
});
|
||||
|
||||
assert.deepEqual(route.exec('/settings'), {
|
||||
assert.deepEqual(page.exec('/settings'), {
|
||||
a: null,
|
||||
b: null
|
||||
});
|
||||
@@ -259,7 +306,7 @@ describe('create_routes', () => {
|
||||
it('matches a dynamic part within a part', () => {
|
||||
const route = create_routes({
|
||||
files: ['things/[slug].json.js']
|
||||
})[0];
|
||||
}).server_routes[0];
|
||||
|
||||
assert.deepEqual(route.exec('/things/foo.json'), {
|
||||
slug: 'foo'
|
||||
@@ -269,7 +316,7 @@ describe('create_routes', () => {
|
||||
it('matches multiple dynamic parts within a part', () => {
|
||||
const route = create_routes({
|
||||
files: ['things/[id]_[slug].json.js']
|
||||
})[0];
|
||||
}).server_routes[0];
|
||||
|
||||
assert.deepEqual(route.exec('/things/someid_someslug.json'), {
|
||||
id: 'someid',
|
||||
@@ -284,4 +331,36 @@ describe('create_routes', () => {
|
||||
});
|
||||
}, /Invalid route \[foo\]\[bar\]\.js — parameters must be separated/);
|
||||
});
|
||||
|
||||
it('errors when trying to use reserved characters in route regexp', () => {
|
||||
assert.throws(() => {
|
||||
create_routes({
|
||||
files: ['[lang([a-z]{2}(?:-[a-z]{2,4})?)]']
|
||||
});
|
||||
}, /Sapper does not allow \(, \), \? or \: in RegExp routes yet/);
|
||||
});
|
||||
|
||||
it('errors on 4xx.html', () => {
|
||||
assert.throws(() => {
|
||||
create_routes({
|
||||
files: ['4xx.html']
|
||||
});
|
||||
}, /As of Sapper 0.14, 4xx.html and 5xx.html should be replaced with _error.html/);
|
||||
});
|
||||
|
||||
it('errors on 5xx.html', () => {
|
||||
assert.throws(() => {
|
||||
create_routes({
|
||||
files: ['5xx.html']
|
||||
});
|
||||
}, /As of Sapper 0.14, 4xx.html and 5xx.html should be replaced with _error.html/);
|
||||
});
|
||||
|
||||
it('treats foo/index.json.js the same as foo.json.js', () => {
|
||||
const route = create_routes({
|
||||
files: ['foo/index.json.js']
|
||||
}).server_routes[0];
|
||||
|
||||
assert.ok(route.test('/foo.json'));
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user