Compare commits

...

42 Commits

Author SHA1 Message Date
Rich Harris
b75ae7ba96 -> v0.14.2 2018-07-14 21:05:39 -04:00
Rich Harris
091e38082e Merge pull request #307 from sveltejs/unsafe-replacements
prevent unsafe replacements of preloaded data etc
2018-07-15 02:05:20 +01:00
Rich Harris
74acf93c7a prevent unsafe replacements of preloaded data etc 2018-07-14 20:56:05 -04:00
Rich Harris
0e3775397f Merge pull request #306 from sveltejs/refactor-route-generation
Refactor route generation
2018-07-05 08:25:59 -04:00
Rich Harris
8dc52a04e4 split pages and server routes into separate arrays 2018-07-05 08:14:07 -04:00
Rich Harris
008b607c01 generate pages and server routes separately 2018-07-04 10:53:41 -04:00
Rich Harris
d01a407137 -> v0.14.1 2018-07-02 10:24:54 -04:00
Rich Harris
c0c717d9ec Merge pull request #283 from elcobvg/feature/route-regexp
Feature: use regexp in routes
2018-07-02 10:23:30 -04:00
Elco Brouwer von Gonzenbach
4f011bfc37 Convert whitespace to tabs. Add some unit tests for create routes 2018-07-02 11:52:17 +07:00
Elco Brouwer von Gonzenbach
6c4ab32cf0 Sync update to sapper 0.14.0 2018-06-29 06:57:01 +07:00
Rich Harris
09b4dc1b9a -> v0.14.0 2018-06-28 13:35:21 -04:00
Rich Harris
bdd5a54527 Merge pull request #301 from sveltejs/gh-297
treat foo/index.json.js as foo.json.js
2018-06-28 13:27:57 -04:00
Rich Harris
b7bb4db8c1 treat foo/index.json.js as foo.json.js - fixes #297 2018-06-28 13:20:41 -04:00
Rich Harris
5b5f33d3cf error on 4xx.html and 5xx.html 2018-06-28 12:57:59 -04:00
Rich Harris
9611656b76 Merge pull request #300 from sveltejs/gh-293
[WIP] simplify rendering of error pages
2018-06-28 12:52:41 -04:00
Rich Harris
e9a71774d5 Merge pull request #299 from sveltejs/gh-270
return a Promise from goto
2018-06-28 12:18:32 -04:00
Rich Harris
2205b8aec5 oops 2018-06-28 12:03:27 -04:00
Rich Harris
5c4e4d5d36 only navigate if route is found - fixes #279 2018-06-28 11:45:38 -04:00
Rich Harris
e87247493f replace 4xx.html and 5xx.html with _error.html 2018-06-28 11:38:21 -04:00
Rich Harris
0aeb63a05b simplify rendering of error pages 2018-06-27 18:35:41 -04:00
Rich Harris
57eeb5659a return a Promise from goto - fixes #270 2018-06-27 17:32:20 -04:00
Rich Harris
f821c19528 -> v0.13.6 2018-06-27 17:20:45 -04:00
Rich Harris
b9a120164a Merge pull request #298 from sveltejs/gh-296
fix req.baseUrl synthesis
2018-06-27 17:19:55 -04:00
Rich Harris
087356f781 fix req.baseUrl synthesis 2018-06-27 16:57:04 -04:00
Rich Harris
31110a5326 -> v0.13.5 2018-06-26 18:30:46 -04:00
Rich Harris
667a68768c Merge pull request #294 from sveltejs/gh-289
fix handling of fatal errors
2018-06-26 18:29:56 -04:00
Rich Harris
5075981a90 fix handling of fatal errors - fixes #289 2018-06-26 13:49:11 -04:00
Rich Harris
611dc4f6be -> v0.13.4 2018-06-18 22:45:51 -04:00
Rich Harris
0b43eaa992 blur active element on navigation - fixes #287 2018-06-18 22:44:55 -04:00
Rich Harris
47cdc1c4c8 wait until server restarts before emitting hot reload update 2018-06-18 22:31:10 -04:00
Rich Harris
31c071ad72 Merge branch 'master' of github.com:sveltejs/sapper 2018-06-18 12:22:42 -04:00
Rich Harris
e91edaee12 Merge pull request #286 from sveltejs/invalidate-client-assets
always refresh client_assets in dev
2018-06-18 12:22:37 -04:00
Rich Harris
34c1fee5db Merge branch 'master' of github.com:sveltejs/sapper 2018-06-17 13:02:13 -04:00
Rich Harris
5375422633 Merge pull request #285 from sveltejs/event-on-exit
emit a fatal event if server crashes
2018-06-17 13:02:03 -04:00
Rich Harris
1dafe934b0 initialise rebuild stats 2018-06-17 13:01:51 -04:00
Rich Harris
e1a33c6a9b always refresh client_assets in dev 2018-06-17 13:00:27 -04:00
Rich Harris
0800fa016b emit a fatal event if server crashes 2018-06-16 20:18:32 -04:00
Rich Harris
8f3454c3b1 -> v0.13.3 2018-06-16 13:49:44 -04:00
Rich Harris
f0d7a1aaab change fatal events to be clonable, for IPC purposes 2018-06-16 13:49:19 -04:00
Elco Brouwer von Gonzenbach
0e2c2ca101 Correct errors in param pattern and matching patterns 2018-06-13 10:00:39 +07:00
Elco Brouwer von Gonzenbach
8015be8069 Correct spacing 2018-06-12 09:15:54 +07:00
Elco Brouwer von Gonzenbach
e39ad59589 Add regexp option to routes 2018-06-12 09:11:54 +07:00
17 changed files with 703 additions and 520 deletions

View File

@@ -1,5 +1,42 @@
# sapper changelog # 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))
* Fix timing of hot reload updates
* Emit `fatal` event if server crashes ([#285](https://github.com/sveltejs/sapper/pull/285))
* Emit `stdout` and `stderr` events on dev watcher ([#285](https://github.com/sveltejs/sapper/pull/285))
* Always refresh client assets in dev ([#286](https://github.com/sveltejs/sapper/pull/286))
* Correctly initialise rebuild stats
## 0.13.3
* Make `fatal` events clonable for IPC purposes
## 0.13.2 ## 0.13.2
* Emit a `basepath` event ([#284](https://github.com/sveltejs/sapper/pull/284)) * Emit a `basepath` event ([#284](https://github.com/sveltejs/sapper/pull/284))

View File

@@ -1,6 +1,6 @@
{ {
"name": "sapper", "name": "sapper",
"version": "0.13.2", "version": "0.14.2",
"description": "Military-grade apps, engineered by Svelte", "description": "Military-grade apps, engineered by Svelte",
"main": "dist/middleware.ts.js", "main": "dist/middleware.ts.js",
"bin": { "bin": {

View File

@@ -33,6 +33,7 @@ class Watcher extends EventEmitter {
server: Deferred; server: Deferred;
}; };
crashed: boolean;
restarting: boolean; restarting: boolean;
current_build: { current_build: {
changed: Set<string>; changed: Set<string>;
@@ -90,7 +91,7 @@ class Watcher extends EventEmitter {
if (this.port) { if (this.port) {
if (!await ports.check(this.port)) { if (!await ports.check(this.port)) {
this.emit('fatal', <events.FatalEvent>{ this.emit('fatal', <events.FatalEvent>{
error: new Error(`Port ${this.port} is unavailable`) message: `Port ${this.port} is unavailable`
}); });
return; return;
} }
@@ -130,6 +131,18 @@ class Watcher extends EventEmitter {
// TODO watch the configs themselves? // TODO watch the configs themselves?
const compilers = create_compilers({ webpack: this.dirs.webpack }); const compilers = create_compilers({ webpack: this.dirs.webpack });
let log = '';
const emitFatal = () => {
this.emit('fatal', <events.FatalEvent>{
message: `Server crashed`,
log
});
this.crashed = true;
this.proc = null;
};
this.watch(compilers.server, { this.watch(compilers.server, {
name: 'server', name: 'server',
@@ -142,22 +155,35 @@ class Watcher extends EventEmitter {
fs.writeFileSync(path.join(dest, 'server_info.json'), JSON.stringify(info, null, ' ')); fs.writeFileSync(path.join(dest, 'server_info.json'), JSON.stringify(info, null, ' '));
this.deferreds.client.promise.then(() => { this.deferreds.client.promise.then(() => {
this.dev_server.send({
status: 'completed'
});
const restart = () => { const restart = () => {
ports.wait(this.port).then((() => { log = '';
this.emit('ready', <events.ReadyEvent>{ this.crashed = false;
port: this.port,
process: this.proc
});
this.deferreds.server.fulfil(); ports.wait(this.port)
})); .then((() => {
this.emit('ready', <events.ReadyEvent>{
port: this.port,
process: this.proc
});
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) { if (this.proc) {
this.proc.removeListener('exit', emitFatal);
this.proc.kill(); this.proc.kill();
this.proc.on('exit', restart); this.proc.on('exit', restart);
} else { } else {
@@ -172,6 +198,16 @@ class Watcher extends EventEmitter {
stdio: ['ipc'] stdio: ['ipc']
}); });
this.proc.stdout.on('data', chunk => {
log += chunk;
this.emit('stdout', chunk);
});
this.proc.stderr.on('data', chunk => {
log += chunk;
this.emit('stderr', chunk);
});
this.proc.on('message', message => { this.proc.on('message', message => {
if (message.__sapper__ && message.event === 'basepath') { if (message.__sapper__ && message.event === 'basepath') {
this.emit('basepath', { this.emit('basepath', {
@@ -179,6 +215,8 @@ class Watcher extends EventEmitter {
}); });
} }
}); });
this.proc.on('exit', emitFatal);
}); });
} }
}); });
@@ -250,8 +288,8 @@ class Watcher extends EventEmitter {
this.restarting = true; this.restarting = true;
this.current_build = { this.current_build = {
changed: new Set(), changed: new Set([filename]),
rebuilding: new Set(), rebuilding: new Set([type]),
unique_warnings: new Set(), unique_warnings: new Set(),
unique_errors: new Set() unique_errors: new Set()
}; };
@@ -284,7 +322,7 @@ class Watcher extends EventEmitter {
if (err) { if (err) {
this.emit('error', <events.ErrorEvent>{ this.emit('error', <events.ErrorEvent>{
type: name, type: name,
error: err message: err.message
}); });
} else { } else {
const messages = format_messages(stats); const messages = format_messages(stats);

View File

@@ -7,11 +7,12 @@ export type ReadyEvent = {
export type ErrorEvent = { export type ErrorEvent = {
type: string; type: string;
error: Error; message: string;
}; };
export type FatalEvent = { export type FatalEvent = {
error: Error; message: string;
log?: string;
}; };
export type InvalidEvent = { export type InvalidEvent = {

View File

@@ -36,11 +36,12 @@ export function dev(opts: { port: number, open: boolean }) {
watcher.on('error', (event: events.ErrorEvent) => { watcher.on('error', (event: events.ErrorEvent) => {
console.log(`${colors.red(`${event.type}`)}`); 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) => { 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) => { watcher.on('build', (event: events.BuildEvent) => {

View File

@@ -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 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(); `.replace(/^\t\t/gm, '').trim();
write_if_changed(`${locations.app()}/manifest/service-worker.js`, code); write_if_changed(`${locations.app()}/manifest/service-worker.js`, code);
} }
function generate_client(routes: Route[], path_to_routes: string, dev_port?: number) { 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 = ` let code = `
// This file is generated by Sapper — do not edit it! // This file is generated by Sapper — do not edit it!
export const routes = [ export const routes = {
${routes ignore: [${server_routes_to_ignore.map(route => route.pattern).join(', ')}],
.map(route => {
const page = route.handlers.find(({ type }) => type === 'page');
if (!page) {
return `{ pattern: ${route.pattern}, ignore: true }`;
}
pages: [
${pages.map(page => {
const file = posixify(`${path_to_routes}/${page.file}`); const file = posixify(`${path_to_routes}/${page.file}`);
if (route.id === '_4xx' || route.id === '_5xx') { if (page.id === '_error') {
return `{ error: '${route.id.slice(1)}', load: () => import(/* webpackChunkName: "${route.id}" */ '${file}') }`; 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}') }`; return `{ pattern: ${page.pattern}, params: ${page.params.length > 0 ? `match` : `()`} => (${params}), load: () => import(/* webpackChunkName: "${page.id}" */ '${file}') }`;
}) }).join(',\n\t\t\t\t')}
.join(',\n\t')} ],
];`.replace(/^\t\t/gm, '').trim();
error: () => import(/* webpackChunkName: '_error' */ '${posixify(`${path_to_routes}/${error_route.file}`)}')
};`.replace(/^\t\t/gm, '').trim();
if (dev()) { if (dev()) {
const sapper_dev_client = posixify( 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) { 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 = ` let code = `
// This file is generated by Sapper — do not edit it! // This file is generated by Sapper — do not edit it!
${routes ${imports.join('\n')}
.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}] }`;
}
export const routes = {
server_routes: [
${routes.server_routes.map(route => {
const params = route.params.length === 0 const params = route.params.length === 0
? '{}' ? '{}'
: `{ ${route.params.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`; : `{ ${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}] }`; return `{ id: '${route.id}', pattern: ${route.pattern}, params: ${route.params.length > 0 ? `match` : `()`} => (${params}), handlers: route_${route.id} }`;
}) }).join(',\n\t\t\t\t')}
.join(',\n\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; return code;
} }

View File

@@ -3,81 +3,53 @@ import glob from 'glob';
import { locations } from '../config'; import { locations } from '../config';
import { Route } from '../interfaces'; 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({
const routes: Route[] = files files
.filter((file: string) => !/(^|\/|\\)_/.test(file)) } = {
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) => { .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`);
} }
const base = file.replace(/\.[^/.]+$/, ''); if (file === '4xx.html' || file === '5xx.html') {
const parts = base.split('/'); // glob output is always posix-style throw new Error('As of Sapper 0.14, 4xx.html and 5xx.html should be replaced with _error.html');
if (parts[parts.length - 1] === 'index') parts.pop(); }
return { const base = file.replace(/\.[^/.]+$/, '');
files: [file], const parts = base.split('/'); // glob output is always posix-style
base, if (/^index(\..+)?/.test(parts[parts.length - 1])) {
parts const part = parts.pop();
}; if (parts.length > 0) parts[parts.length - 1] += part.slice(5);
})
.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)
);
}
}
} }
throw new Error(`The ${a.base} and ${b.base} routes clash`);
})
.map(({ files, base, parts }) => {
const id = ( const id = (
parts.join('_').replace(/[[\]]/g, '$').replace(/^\d/, '_$&').replace(/[^a-zA-Z0-9_$]/g, '_') parts.join('_').replace(/[[\]]/g, '$').replace(/^\d/, '_$&').replace(/[^a-zA-Z0-9_$]/g, '_')
) || '_'; ) || '_';
const type = file.endsWith('.html') ? 'page' : 'route';
const params: string[] = []; const params: string[] = [];
const param_pattern = /\[([^\]]+)\]/g; const match_patterns: Record<string, string> = {};
const param_pattern = /\[([^\(\]]+)(?:\((.+?)\))?\]/g;
let match; let match;
while (match = param_pattern.exec(base)) { while (match = param_pattern.exec(base)) {
params.push(match[1]); 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 // 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('['); const dynamic = ~part.indexOf('[');
if (dynamic) { if (dynamic) {
const matcher = part.replace(param_pattern, `([^\/]+?)`); // Get keys from part and replace with stored match patterns
pattern_string = nested ? `(?:\\/${matcher}${pattern_string})?` : `\\/${matcher}${pattern_string}`; 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 { } else {
nested = false; nested = false;
pattern_string = `\\/${part}${pattern_string}`; pattern_string = `\\/${part}${pattern_string}`;
@@ -116,20 +94,9 @@ export default function create_routes({ files } = { files: glob.sync('**/*.*', {
return { return {
id, id,
handlers: files.map(file => ({ base,
type: path.extname(file) === '.html' ? 'page' : 'route', type,
file file,
})).sort((a, b) => {
if (a.type === 'page' && b.type === 'route') {
return 1;
}
if (a.type === 'route' && b.type === 'page') {
return -1;
}
return 0;
}),
pattern, pattern,
test, test,
exec, 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) { function get_sub_parts(part: string) {
return part.split(/[\[\]]/) return part.split(/\[(.+)\]/)
.map((content, i) => { .map((content, i) => {
if (!content) return null; if (!content) return null;
return { return {

View File

@@ -56,15 +56,18 @@ export default function middleware({ App, routes, store }: {
const output = locations.dest(); const output = locations.dest();
const client_assets = JSON.parse(fs.readFileSync(path.join(output, 'client_assets.json'), 'utf-8'));
let emitted_basepath = false; let emitted_basepath = false;
const middleware = compose_handlers([ const middleware = compose_handlers([
(req: Req, res: ServerResponse, next: () => void) => { (req: Req, res: ServerResponse, next: () => void) => {
if (req.baseUrl === undefined) { if (req.baseUrl === undefined) {
req.baseUrl = req.originalUrl let { originalUrl } = req;
? req.originalUrl.slice(0, -req.url.length) if (req.url === '/' && originalUrl[originalUrl.length - 1] !== '/') {
originalUrl += '/';
}
req.baseUrl = originalUrl
? originalUrl.slice(0, -req.url.length)
: ''; : '';
} }
@@ -105,7 +108,8 @@ export default function middleware({ App, routes, store }: {
cache_control: 'max-age=31536000' cache_control: 'max-age=31536000'
}), }),
get_route_handler(client_assets, App, routes, store) get_server_route_handler(routes.server_routes),
get_page_handler(App, routes, store)
].filter(Boolean)); ].filter(Boolean));
return middleware; return middleware;
@@ -148,295 +152,248 @@ function serve({ prefix, pathname, cache_control }: {
}; };
} }
function get_route_handler(chunks: Record<string, string>, App: Component, routes: RouteObject[], store_getter: (req: Req) => Store) { function get_server_route_handler(routes: RouteObject[]) {
const template = dev() function handle_route(route, req, res, next) {
? () => 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)); req.params = route.params(route.pattern.exec(req.path));
const handlers = route.handlers[Symbol.iterator](); 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> = {};
function next() { // intercept data so that it can be exported
try { res.write = function(chunk: any) {
const { value: handler, done } = handlers.next(); chunks.push(new Buffer(chunk));
write.apply(res, arguments);
};
if (done) { res.setHeader = function(name: string, value: string) {
handle_error(req, res, 404, 'Not found'); headers[name.toLowerCase()] = value;
return; setHeader.apply(res, arguments);
} };
const mod = handler.module; res.end = function(chunk?: any) {
if (chunk) chunks.push(new Buffer(chunk));
end.apply(res, arguments);
if (handler.type === 'page') { process.send({
res.setHeader('Content-Type', 'text/html'); __sapper__: true,
event: 'file',
// preload main.js and current route url: req.url,
// TODO detect other stuff we can preload? images, CSS, fonts? method: req.method,
const link = [] status: res.statusCode,
.concat(chunks.main, chunks[route.id]) type: headers['content-type'],
.filter(file => !file.match(/\.map$/)) body: Buffer.concat(chunks).toString()
.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
});
}
}); });
};
}
const handle_next = (err?: Error) => {
if (err) {
console.error(err.stack);
res.statusCode = 500;
res.end(err.message);
} else {
process.nextTick(next);
} }
};
else { try {
const method = req.method.toLowerCase(); handle_method(req, res, handle_next);
// 'delete' cannot be exported from a module because it is a keyword, } catch (err) {
// so check for 'del' instead handle_next(err);
const method_export = method === 'delete' ? 'del' : method; }
const handle_method = mod[method_export]; } else {
if (handle_method) { // no matching handler for method
if (process.env.SAPPER_EXPORT) { process.nextTick(next);
const { write, end, setHeader } = res; }
const chunks: any[] = []; }
const headers: Record<string, string> = {};
// intercept data so that it can be exported return function find_route(req: Req, res: ServerResponse, next) {
res.write = function(chunk: any) { for (const route of routes) {
chunks.push(new Buffer(chunk)); if (route.pattern.test(req.path)) {
write.apply(res, arguments); handle_route(route, req, res, next);
}; return;
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(); next();
} };
}
const not_found_route = routes.find((route: RouteObject) => route.error === '4xx'); function get_page_handler(App: Component, routes: RouteObject[], store_getter: (req: Req) => Store) {
const error_route = routes.find((route: RouteObject) => route.error === '5xx'); const output = locations.dest();
const get_chunks = dev()
? () => JSON.parse(fs.readFileSync(path.join(output, 'client_assets.json'), 'utf-8'))
: (assets => () => assets)(JSON.parse(fs.readFileSync(path.join(output, 'client_assets.json'), 'utf-8')));
const template = dev()
? () => fs.readFileSync(`${locations.app()}/template.html`, 'utf-8')
: (str => () => str)(fs.readFileSync(`${locations.dest()}/template.html`, 'utf-8'));
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 chunks: Record<string, string> = get_chunks();
function handle_error(req: Req, res: ServerResponse, statusCode: number, message: Error | string) {
res.statusCode = statusCode;
res.setHeader('Content-Type', 'text/html'); 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 const store = store_getter ? store_getter(req) : null;
? not_found_route const props = { params: req.params, query: req.query, path: req.path };
: error_route;
function render_page({ head, css, html }) { if (route.error) {
const page = template() props.error = error instanceof Error ? error : { message: error };
.replace('%sapper.base%', `<base href="${req.baseUrl}/">`) props.status = status;
.replace('%sapper.scripts%', `<script>__SAPPER__={baseUrl: "${req.baseUrl}"}</script><script src='${req.baseUrl}/client/${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);
} }
function handle_notfound() { let redirect: { statusCode: number, location: string };
const title: string = not_found let preload_error: { statusCode: number, message: Error | string };
? 'Not found'
: `Internal server error: ${error.message}`;
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) { if (opts) {
const handlers = route.handlers[Symbol.iterator](); opts = Object.assign({}, opts);
function next() { const include_cookies = (
const { value: handler, done } = handlers.next(); opts.credentials === 'include' ||
opts.credentials === 'same-origin' && parsed.origin === `http://127.0.0.1:${process.env.PORT}`
);
if (done) { if (include_cookies) {
handle_notfound(); const cookies: Record<string, string> = {};
} else if (handler.type === 'page') { if (!opts.headers) opts.headers = {};
render_page(handler.module.render({
status: statusCode, const str = []
error .concat(
}, { cookie.parse(req.headers.cookie || ''),
store: store_getter && store_getter(req) cookie.parse(opts.headers.cookie || ''),
})); cookie.parse(res.getHeader('Set-Cookie') || '')
} else { )
const handle_method = mod[method_export]; .map(cookie => {
if (handle_method) { return Object.keys(cookie)
handle_method(req, res, next); .map(name => `${name}=${encodeURIComponent(cookie[name])}`)
} else { .join('; ');
next(); })
.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(); if (preload_error) {
} else { handle_route(error_route, req, res, preload_error.statusCode, preload_error.message);
handle_notfound(); 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) { return function find_route(req: Req, res: ServerResponse) {
for (const route of routes) { if (!server_routes.some(route => route.pattern.test(req.path))) {
if (!route.error && route.pattern.test(req.path)) return handle_route(route, req, res); 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');
}; };
} }

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) => {},
@@ -30,12 +30,15 @@ function select_route(url: URL): Target {
const path = url.pathname.slice(manifest.baseUrl.length); const path = url.pathname.slice(manifest.baseUrl.length);
for (const route of routes) { // avoid accidental clashes between server routes and pages
const match = route.pattern.exec(path); if (routes.ignore.some(pattern => pattern.test(path))) return;
if (match) {
if (route.ignore) return null;
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> = {}; const query: Record<string, string | true> = {};
if (url.search.length > 0) { if (url.search.length > 0) {
@@ -44,7 +47,7 @@ function select_route(url: URL): Target {
query[key] = value || true; 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 }; error = { statusCode: 500, message: err };
}).then(preloaded => { }).then(preloaded => {
if (error) { if (error) {
const route = error.statusCode >= 400 && error.statusCode < 500 return error_route().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 };
@@ -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) { if (id) {
// popstate or initial navigation // popstate or initial navigation
cid = id; cid = id;
@@ -161,6 +160,7 @@ function navigate(target: Target, id: number) {
} }
render(Page, props, scroll_history[id], token); render(Page, props, scroll_history[id], token);
document.activeElement.blur();
}); });
} }
@@ -211,7 +211,11 @@ function handle_popstate(event: PopStateEvent) {
if (event.state) { if (event.state) {
const url = new URL(window.location.href); const url = new URL(window.location.href);
const target = select_route(url); 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 { } else {
// hashchange // hashchange
cid = ++uid; cid = ++uid;
@@ -260,11 +264,8 @@ 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;
errors = { error_route = opts.routes.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);
@@ -292,32 +293,32 @@ export function init(opts: { App: ComponentConstructor, target: Node, routes: Ro
history.replaceState({ id: uid }, '', href); history.replaceState({ id: uid }, '', href);
const target = select_route(new URL(window.location.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 }) { export function goto(href: string, opts = { replaceState: false }) {
const target = select_route(new URL(href, document.baseURI)); const target = select_route(new URL(href, document.baseURI));
let promise;
if (target) { if (target) {
navigate(target, null); promise = navigate(target, null);
if (history) history[opts.replaceState ? 'replaceState' : 'pushState']({ id: cid }, '', href); if (history) history[opts.replaceState ? 'replaceState' : 'pushState']({ id: cid }, '', href);
} else { } else {
window.location.href = href; window.location.href = href;
promise = new Promise(f => {}); // never resolves
} }
return promise;
} }
export function prefetchRoutes(pathnames: string[]) { export function prefetchRoutes(pathnames: string[]) {
if (!routes) throw new Error(`You must call init() first`); if (!routes) throw new Error(`You must call init() first`);
return routes return routes.pages
.filter(route => { .filter(route => {
if (!pathnames) return true; if (!pathnames) return true;
return pathnames.some(pathname => { return pathnames.some(pathname => route.pattern.test(pathname));
return route.error
? route.error === pathname
: route.pattern.test(pathname)
});
}) })
.reduce((promise: Promise<any>, route) => { .reduce((promise: Promise<any>, route) => {
return promise.then(route.load); return promise.then(route.load);

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;
}; };

View File

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

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>

View File

@@ -6,15 +6,21 @@
<p>This is the 'about' page. There's not much here.</p> <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> <button class='prefetch' on:click='prefetch("blog/why-the-name")'>Why the name?</button>
<script> <script>
import { goto, prefetch } from '../../../runtime.js'; import { goto, prefetch } from '../../../runtime.js';
export default { export default {
oncreate() {
window.goto = goto;
},
ondestroy() {
window.goto = null;
},
methods: { methods: {
goto,
prefetch prefetch
} }
}; };

View File

@@ -1,4 +1,4 @@
import posts from './blog/_posts.js'; import posts from './_posts.js';
const contents = JSON.stringify(posts.map(post => { const contents = JSON.stringify(posts.map(post => {
return { return {

View File

@@ -0,0 +1,9 @@
$&
<script>
export default {
preload() {
return '$&';
}
};
</script>

View File

@@ -281,9 +281,7 @@ function run({ mode, basepath = '' }) {
return nightmare return nightmare
.goto(`${base}/about`) .goto(`${base}/about`)
.init() .init()
.click('.goto') .evaluate(() => window.goto('blog/what-is-sapper'))
.wait(url => window.location.pathname === url, `${basepath}/blog/what-is-sapper`)
.wait(100)
.title() .title()
.then(title => { .then(title => {
assert.equal(title, 'What is Sapper?'); assert.equal(title, 'What is Sapper?');
@@ -441,7 +439,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 +454,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 +466,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 +481,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');
}); });
}); });
@@ -608,6 +606,29 @@ function run({ mode, basepath = '' }) {
it('emits a basepath', () => { it('emits a basepath', () => {
assert.equal(captured_basepath, basepath); assert.equal(captured_basepath, basepath);
}); });
// skipped because Nightmare doesn't seem to focus the <a> correctly
it.skip('resets the active element after navigation', () => {
return nightmare
.goto(base)
.init()
.click('a[href="about"]')
.wait(100)
.evaluate(() => document.activeElement.nodeName)
.then(name => {
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', () => { describe('headers', () => {

View File

@@ -2,30 +2,8 @@ const assert = require('assert');
const { create_routes } = require('../../dist/core.ts.js'); const { create_routes } = require('../../dist/core.ts.js');
describe('create_routes', () => { 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', () => { it('encodes characters not allowed in path', () => {
const routes = create_routes({ const { server_routes } = create_routes({
files: [ files: [
'"', '"',
'#', '#',
@@ -34,7 +12,7 @@ describe('create_routes', () => {
}); });
assert.deepEqual( assert.deepEqual(
routes.map(r => r.pattern), server_routes.map(r => r.pattern),
[ [
/^\/%22\/?$/, /^\/%22\/?$/,
/^\/%23\/?$/, /^\/%23\/?$/,
@@ -44,35 +22,70 @@ describe('create_routes', () => {
}); });
it('sorts routes correctly', () => { it('sorts routes correctly', () => {
const routes = create_routes({ 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'] 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( assert.deepEqual(
routes.map(r => r.handlers[0].file), pages.map(r => r.file),
[ [
'index.html', 'index.html',
'about.html', 'about.html',
'post/bar.html', 'post/bar.html',
'post/foo.html', 'post/foo.html',
'post/f[xx].html', 'post/f[xx].html',
'post/[id].json.js', 'post/[id([0-9-a-z]{3,})].html', // RegExp is more specific
'post/[id].html', 'post/[id].html',
'[wildcard].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', () => { it('prefers index page to nested route', () => {
let routes = create_routes({ let { pages, server_routes } = create_routes({
files: [ files: [
'api/examples/[slug].js', 'api/examples/[slug].js',
'api/examples/index.js', 'api/examples/index.js',
'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',
@@ -81,15 +94,20 @@ describe('create_routes', () => {
}); });
assert.deepEqual( assert.deepEqual(
routes.map(r => r.handlers[0].file), pages.map(r => r.file),
[ [
'4xx.html', '_error.html',
'5xx.html',
'index.html', 'index.html',
'guide/index.html', 'guide/index.html',
'blog/index.html', 'blog/index.html',
'blog/[slug].html'
]
);
assert.deepEqual(
server_routes.map(r => r.file),
[
'blog/rss.xml.js', 'blog/rss.xml.js',
'blog/[slug].html',
'api/examples/index.js', 'api/examples/index.js',
'api/examples/[slug].js', 'api/examples/[slug].js',
'api/gists/index.js', 'api/gists/index.js',
@@ -97,10 +115,9 @@ describe('create_routes', () => {
] ]
); );
routes = create_routes({ ({ pages, server_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',
@@ -114,40 +131,63 @@ describe('create_routes', () => {
'index.html', 'index.html',
'repl/index.html' 'repl/index.html'
] ]
}); }));
assert.deepEqual( assert.deepEqual(
routes.map(r => r.handlers[0].file), pages.map(r => r.file),
[ [
'4xx.html', '_error.html',
'5xx.html',
'index.html', 'index.html',
'guide/index.html', 'guide/index.html',
'blog/index.html', 'blog/index.html',
'blog/rss.xml.js',
'blog/[slug].html', 'blog/[slug].html',
'repl/index.html'
]
);
assert.deepEqual(
server_routes.map(r => r.file),
[
'blog/rss.xml.js',
'gist/create.js', 'gist/create.js',
'gist/[id].js', 'gist/[id].js',
'repl/index.html',
'api/guide/index.js', 'api/guide/index.js',
'api/guide/contents.js', 'api/guide/contents.js',
'api/blog/index.js', 'api/blog/index.js',
'api/blog/[slug].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', () => { it('generates params', () => {
const routes = create_routes({ const { pages } = create_routes({
files: ['index.html', 'about.html', '[wildcard].html', 'post/[id].html'] files: ['index.html', 'about.html', '[wildcard].html', 'post/[id].html']
}); });
let file; let file;
let params; let params;
for (let i = 0; i < routes.length; i += 1) { for (let i = 0; i < pages.length; i += 1) {
const route = routes[i]; const route = pages[i];
if (params = route.exec('/post/123')) { if (params = route.exec('/post/123')) {
file = route.handlers[0].file; file = route.file;
break; break;
} }
} }
@@ -159,12 +199,12 @@ describe('create_routes', () => {
}); });
it('ignores files and directories with leading underscores', () => { 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'] files: ['index.html', '_foo.html', 'a/_b/c/d.html', 'e/f/g/h.html', 'i/_j.html']
}); });
assert.deepEqual( assert.deepEqual(
routes.map(r => r.handlers[0].file), pages.map(r => r.file),
[ [
'index.html', 'index.html',
'e/f/g/h.html' 'e/f/g/h.html'
@@ -173,13 +213,13 @@ describe('create_routes', () => {
}); });
it('ignores files and directories with leading dots except .well-known', () => { it('ignores files and directories with leading dots except .well-known', () => {
const routes = create_routes({ const { server_routes } = create_routes({
files: ['.well-known', '.unknown'] files: ['.well-known/dnt-policy.txt.js', '.unknown/foo.txt.js']
}); });
assert.deepEqual( assert.deepEqual(
routes.map(r => r.handlers[0].file), server_routes.map(r => r.file),
['.well-known'] ['.well-known/dnt-policy.txt.js']
); );
}); });
@@ -192,12 +232,12 @@ describe('create_routes', () => {
}); });
assert.deepEqual( assert.deepEqual(
a.map(r => r.handlers[0].file), a.pages.map(r => r.file),
['foo/[bar].html', '[baz]/qux.html'] ['foo/[bar].html', '[baz]/qux.html']
); );
assert.deepEqual( assert.deepEqual(
b.map(r => r.handlers[0].file), b.pages.map(r => r.file),
['foo/[bar].html', '[baz]/qux.html'] ['foo/[bar].html', '[baz]/qux.html']
); );
}); });
@@ -208,49 +248,56 @@ describe('create_routes', () => {
files: ['[foo].html', '[bar]/index.html'] files: ['[foo].html', '[bar]/index.html']
}); });
}, /The \[foo\] and \[bar\]\/index routes clash/); }, /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' submenu: 'foo'
}); });
assert.deepEqual(route.exec('/settings'), { assert.deepEqual(page.exec('/settings'), {
submenu: null submenu: null
}); });
}); });
it('prefers index routes to nested routes', () => { it('prefers index routes to nested routes', () => {
const routes = create_routes({ const { pages } = create_routes({
files: ['settings/[submenu].html', 'settings.html'] files: ['settings/[submenu].html', 'settings.html']
}); });
assert.deepEqual( assert.deepEqual(
routes.map(r => r.handlers[0].file), pages.map(r => r.file),
['settings.html', 'settings/[submenu].html'] ['settings.html', 'settings/[submenu].html']
); );
}); });
it('matches deeply nested routes', () => { it('matches deeply nested routes', () => {
const route = create_routes({ const page = create_routes({
files: ['settings/[a]/[b]/index.html'] 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', a: 'foo',
b: 'bar' b: 'bar'
}); });
assert.deepEqual(route.exec('/settings/foo'), { assert.deepEqual(page.exec('/settings/foo'), {
a: 'foo', a: 'foo',
b: null b: null
}); });
assert.deepEqual(route.exec('/settings'), { assert.deepEqual(page.exec('/settings'), {
a: null, a: null,
b: null b: null
}); });
@@ -259,7 +306,7 @@ describe('create_routes', () => {
it('matches a dynamic part within a part', () => { it('matches a dynamic part within a part', () => {
const route = create_routes({ const route = create_routes({
files: ['things/[slug].json.js'] files: ['things/[slug].json.js']
})[0]; }).server_routes[0];
assert.deepEqual(route.exec('/things/foo.json'), { assert.deepEqual(route.exec('/things/foo.json'), {
slug: 'foo' slug: 'foo'
@@ -269,7 +316,7 @@ describe('create_routes', () => {
it('matches multiple dynamic parts within a part', () => { it('matches multiple dynamic parts within a part', () => {
const route = create_routes({ const route = create_routes({
files: ['things/[id]_[slug].json.js'] files: ['things/[id]_[slug].json.js']
})[0]; }).server_routes[0];
assert.deepEqual(route.exec('/things/someid_someslug.json'), { assert.deepEqual(route.exec('/things/someid_someslug.json'), {
id: 'someid', id: 'someid',
@@ -284,4 +331,36 @@ describe('create_routes', () => {
}); });
}, /Invalid route \[foo\]\[bar\]\.js — parameters must be separated/); }, /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'));
});
}); });