make route handling more explicit

This commit is contained in:
Rich Harris
2018-01-21 15:41:13 -05:00
parent 03ce2ea998
commit fc631c4866
10 changed files with 120 additions and 69 deletions

View File

@@ -4,7 +4,7 @@ import * as fs from 'fs';
import * as path from 'path';
import mkdirp from 'mkdirp';
import rimraf from 'rimraf';
import * as compilers from './utils/compilers.js';
import get_compilers from './get_compilers.js';
import create_app from './utils/create_app.js';
import generate_asset_cache from './generate_asset_cache.js';
@@ -28,7 +28,7 @@ export default function build({ dest, dev, entry, src }) {
}
}
const { client, server } = compilers.get_compilers(); // TODO refactor
const { client, server } = get_compilers();
client.run((err, client_stats) => {
handleErrors(err, client_stats);

View File

@@ -1,6 +1,7 @@
import * as path from 'path';
import glob from 'glob';
export default function create_routes(files) {
export default function create_routes({ src, files = glob.sync('**/*.+(html|js|mjs)', { cwd: src }) }) {
const routes = files
.map(file => {
if (/(^|\/|\\)_/.test(file)) return;

View File

@@ -2,7 +2,7 @@ import * as fs from 'fs';
import * as path from 'path';
import glob from 'glob';
import { create_templates, render } from './templates.js';
import * as route_manager from './route_manager.js';
import create_routes from './create_routes.js';
function ensure_array(thing) {
return Array.isArray(thing) ? thing : [thing]; // omg webpack what the HELL are you doing
@@ -18,6 +18,8 @@ export default function generate_asset_cache({ src, dest, dev, client_info, serv
const service_worker = generate_service_worker({ chunk_files, src });
const index = generate_index(main_file);
const routes = create_routes({ src }); // TODO rename update
if (dev) {
fs.writeFileSync(path.join(dest, 'service-worker.js'), service_worker);
fs.writeFileSync(path.join(dest, 'index.html'), index);
@@ -34,7 +36,8 @@ export default function generate_asset_cache({ src, dest, dev, client_info, serv
return lookup;
}, {}),
routes: route_manager.routes.reduce((lookup, route) => {
// TODO confusing that `routes` refers to an array *and* a lookup
routes: routes.reduce((lookup, route) => {
lookup[route.id] = `/client/${ensure_array(client_info.assetsByChunkName[route.id])[0]}`;
return lookup;
}, {}),
@@ -54,10 +57,10 @@ export default function generate_asset_cache({ src, dest, dev, client_info, serv
function generate_service_worker({ chunk_files, src }) {
const assets = glob.sync('**', { cwd: 'assets', nodir: true });
route_manager.update({ src }); // TODO refactor
const routes = create_routes({ src }); // TODO refactor
const route_code = `[${
route_manager.routes
routes
.filter(route => route.type === 'page')
.map(route => `{ pattern: ${route.pattern} }`)
.join(', ')

View File

@@ -1,7 +1,7 @@
import * as path from 'path';
import relative from 'require-relative';
export function get_compilers() {
export default function get_compilers() {
const webpack = relative('webpack', process.cwd());
return {

View File

@@ -1,11 +1,10 @@
import * as route_manager from './route_manager.js';
import * as templates from './templates.js';
import * as compilers from './utils/compilers.js';
export { default as build } from './build.js';
export { default as export } from './export.js';
export { default as generate_asset_cache } from './generate_asset_cache.js';
export { default as get_compilers } from './get_compilers.js';
export { default as create_routes } from './create_routes.js';
export { default as create_app } from './utils/create_app.js';
export { default as create_routes } from './utils/create_routes.js';
export { compilers, route_manager, templates };
export { templates };

View File

@@ -1,12 +0,0 @@
import glob from 'glob';
import create_routes from './utils/create_routes.js';
export let routes;
export function update({ src }) {
routes = create_routes(
glob.sync('**/*.+(html|js|mjs)', { cwd: src })
);
return routes;
}

View File

@@ -1,16 +1,14 @@
import * as fs from 'fs';
import * as path from 'path';
import * as route_manager from '../route_manager.js';
import { create_templates } from '../templates.js';
import create_routes from '../create_routes.js';
// import { create_templates } from '../templates.js';
function posixify(file) {
return file.replace(/[/\\]/g, '/');
}
function create_app({ src, dev, entry }) {
// const { routes } = route_manager;
route_manager.update({ src });
const { routes } = route_manager;
const routes = create_routes({ src });
function create_client_main() {
const template = fs.readFileSync('templates/main.js', 'utf-8');
@@ -68,31 +66,31 @@ function create_app({ src, dev, entry }) {
create_server_routes();
}
export function start_watching({ src }) {
const chokidar = require('chokidar');
// export function start_watching({ src }) {
// const chokidar = require('chokidar');
const watch = (glob, callback) => {
const watcher = chokidar.watch(glob, {
ignoreInitial: true,
persistent: false
});
// const watch = (glob, callback) => {
// const watcher = chokidar.watch(glob, {
// ignoreInitial: true,
// persistent: false
// });
watcher.on('add', callback);
watcher.on('change', callback);
watcher.on('unlink', callback);
};
// watcher.on('add', callback);
// watcher.on('change', callback);
// watcher.on('unlink', callback);
// };
watch('templates/main.js', create_app);
// watch('templates/main.js', create_app);
watch('routes/**/*.+(html|js|mjs)', () => {
route_manager.update({ src });
create_app();
});
// watch('routes/**/*.+(html|js|mjs)', () => {
// route_manager.update({ src });
// create_app();
// });
watch('templates/**.html', () => {
create_templates();
// TODO reload current page?
});
}
// watch('templates/**.html', () => {
// create_templates();
// // TODO reload current page?
// });
// }
export default create_app;

View File

@@ -1,7 +1,7 @@
import * as fs from 'fs';
import * as path from 'path';
import chalk from 'chalk';
import { compilers, generate_asset_cache } from 'sapper/core.js';
import { generate_asset_cache, create_routes } from 'sapper/core.js';
import { dest } from '../config.js';
function deferred() {
@@ -15,7 +15,7 @@ function deferred() {
return d;
}
export default function create_watcher() {
export default function create_watcher({ compilers, src, onroutes }) {
const deferreds = {
client: deferred(),
server: deferred()
@@ -59,6 +59,36 @@ export default function create_watcher() {
});
}
const chokidar = require('chokidar');
function watch_files(pattern, callback) {
const watcher = chokidar.watch(pattern, {
ignoreInitial: true,
persistent: false
});
watcher.on('add', callback);
watcher.on('change', callback);
watcher.on('unlink', callback);
// watch('templates/main.js', create_app);
// watch('routes/**/*.+(html|js|mjs)', () => {
// route_manager.update({ src });
// create_app();
// });
// watch('templates/**.html', () => {
// create_templates();
// // TODO reload current page?
// });
}
watch_files('routes/**/*.+(html|js|mjs)', () => {
const routes = create_routes({ src });
onroutes(routes);
});
const watcher = {
ready: invalidate(),
client: watch_compiler('client'),

View File

@@ -4,7 +4,7 @@ import mkdirp from 'mkdirp';
import rimraf from 'rimraf';
import serialize from 'serialize-javascript';
import escape_html from 'escape-html';
import { route_manager, templates, create_app, compilers, generate_asset_cache } from 'sapper/core.js';
import { create_routes, templates, create_app, get_compilers, generate_asset_cache } from 'sapper/core.js';
import create_watcher from './create_watcher.js';
import { dest, dev, entry, src } from '../config.js';
@@ -14,7 +14,16 @@ function connect_dev() {
create_app({ dev, entry, src });
const watcher = create_watcher();
const compilers = get_compilers();
let routes;
const watcher = create_watcher({
compilers,
on_routes_update: _ => {
routes = _;
}
});
let asset_cache;
@@ -55,7 +64,7 @@ function connect_dev() {
fn: pathname => asset_cache.client.chunks[pathname]
}),
get_route_handler(() => asset_cache),
get_route_handler(() => asset_cache, () => routes),
get_not_found_handler(() => asset_cache)
]);
@@ -76,6 +85,8 @@ function connect_prod() {
server_info: read_json(path.join(dest, 'stats.server.json'))
});
const routes = create_routes({ src }); // TODO rename update
const middleware = compose_handlers([
set_req_pathname,
@@ -100,7 +111,7 @@ function connect_prod() {
fn: pathname => asset_cache.client.chunks[pathname]
}),
get_route_handler(() => asset_cache),
get_route_handler(() => asset_cache, () => routes),
get_not_found_handler(() => asset_cache)
]);
@@ -132,7 +143,7 @@ function get_asset_handler(opts) {
const resolved = Promise.resolve();
function get_route_handler(fn) {
function get_route_handler(get_assets, get_routes) {
function handle_route(route, req, res, next, { client, server }) {
req.params = route.exec(req.pathname);
@@ -204,8 +215,9 @@ function get_route_handler(fn) {
resolved
.then(() => {
for (const route of route_manager.routes) {
if (route.test(url)) return handle_route(route, req, res, next, fn());
const routes = get_routes();
for (const route of routes) {
if (route.test(url)) return handle_route(route, req, res, next, get_assets());
}
// no matching route — 404

View File

@@ -3,7 +3,9 @@ const { create_routes } = require('../../core.js');
describe('create_routes', () => {
it('sorts routes correctly', () => {
const routes = create_routes(['index.html', 'about.html', '[wildcard].html', 'post/foo.html', 'post/[id].html', 'post/bar.html']);
const routes = create_routes({
files: ['index.html', 'about.html', '[wildcard].html', 'post/foo.html', 'post/[id].html', 'post/bar.html']
});
assert.deepEqual(
routes.map(r => r.file),
@@ -19,7 +21,9 @@ describe('create_routes', () => {
});
it('generates params', () => {
const routes = create_routes(['index.html', 'about.html', '[wildcard].html', 'post/[id].html']);
const routes = create_routes({
files: ['index.html', 'about.html', '[wildcard].html', 'post/[id].html']
});
let file;
let params;
@@ -38,7 +42,9 @@ describe('create_routes', () => {
});
it('ignores files and directories with leading underscores', () => {
const routes = create_routes(['index.html', '_foo.html', 'a/_b/c/d.html', 'e/f/g/h.html', 'i/_j.html']);
const routes = 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.file),
@@ -50,8 +56,12 @@ describe('create_routes', () => {
});
it('matches /foo/:bar before /:baz/qux', () => {
const a = create_routes(['foo/[bar].html', '[baz]/qux.html']);
const b = create_routes(['[baz]/qux.html', 'foo/[bar].html']);
const a = create_routes({
files: ['foo/[bar].html', '[baz]/qux.html']
});
const b = create_routes({
files: ['[baz]/qux.html', 'foo/[bar].html']
});
assert.deepEqual(
a.map(r => r.file),
@@ -66,16 +76,22 @@ describe('create_routes', () => {
it('fails if routes are indistinguishable', () => {
assert.throws(() => {
create_routes(['[foo].html', '[bar]/index.html']);
create_routes({
files: ['[foo].html', '[bar]/index.html']
});
}, /The \[foo\].html and \[bar\]\/index.html routes clash/);
assert.throws(() => {
create_routes(['foo.html', 'foo.js']);
create_routes({
files: ['foo.html', 'foo.js']
});
}, /The foo.html and foo.js routes clash/);
});
it('matches nested routes', () => {
const route = create_routes(['settings/[submenu].html'])[0];
const route = create_routes({
files: ['settings/[submenu].html']
})[0];
assert.deepEqual(route.exec('/settings/foo'), {
submenu: 'foo'
@@ -87,7 +103,9 @@ describe('create_routes', () => {
});
it('prefers index routes to nested routes', () => {
const routes = create_routes(['settings/[submenu].html', 'settings.html']);
const routes = create_routes({
files: ['settings/[submenu].html', 'settings.html']
});
assert.deepEqual(
routes.map(r => r.file),
@@ -96,7 +114,9 @@ describe('create_routes', () => {
});
it('matches deeply nested routes', () => {
const route = create_routes(['settings/[a]/[b]/index.html'])[0];
const route = create_routes({
files: ['settings/[a]/[b]/index.html']
})[0];
assert.deepEqual(route.exec('/settings/foo/bar'), {
a: 'foo',