mirror of
https://github.com/kevin-DL/sapper.git
synced 2026-01-13 11:35:28 +00:00
Compare commits
69 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d01a407137 | ||
|
|
c0c717d9ec | ||
|
|
4f011bfc37 | ||
|
|
6c4ab32cf0 | ||
|
|
09b4dc1b9a | ||
|
|
bdd5a54527 | ||
|
|
b7bb4db8c1 | ||
|
|
5b5f33d3cf | ||
|
|
9611656b76 | ||
|
|
e9a71774d5 | ||
|
|
2205b8aec5 | ||
|
|
5c4e4d5d36 | ||
|
|
e87247493f | ||
|
|
0aeb63a05b | ||
|
|
57eeb5659a | ||
|
|
f821c19528 | ||
|
|
b9a120164a | ||
|
|
087356f781 | ||
|
|
31110a5326 | ||
|
|
667a68768c | ||
|
|
5075981a90 | ||
|
|
611dc4f6be | ||
|
|
0b43eaa992 | ||
|
|
47cdc1c4c8 | ||
|
|
31c071ad72 | ||
|
|
e91edaee12 | ||
|
|
34c1fee5db | ||
|
|
5375422633 | ||
|
|
1dafe934b0 | ||
|
|
e1a33c6a9b | ||
|
|
0800fa016b | ||
|
|
8f3454c3b1 | ||
|
|
f0d7a1aaab | ||
|
|
8240595d70 | ||
|
|
658d8dd50c | ||
|
|
9eeeaa24c1 | ||
|
|
9c4a3592ff | ||
|
|
0e2c2ca101 | ||
|
|
8015be8069 | ||
|
|
e39ad59589 | ||
|
|
be7cff4818 | ||
|
|
d6632cf312 | ||
|
|
f6e012ec73 | ||
|
|
087acd5765 | ||
|
|
43bf6e8d8a | ||
|
|
78be6aa343 | ||
|
|
8ba57969c2 | ||
|
|
58d2f605fc | ||
|
|
e0b4319c7d | ||
|
|
98d0df4320 | ||
|
|
6aa3ce4f05 | ||
|
|
046db325f1 | ||
|
|
1a4bace5f4 | ||
|
|
0dbf75f100 | ||
|
|
4f49fd8d5c | ||
|
|
86f71e1faf | ||
|
|
147e2c64b5 | ||
|
|
9063057b0c | ||
|
|
25f0d94595 | ||
|
|
8155df2e22 | ||
|
|
bb51470004 | ||
|
|
53446e2ec7 | ||
|
|
c4c09550eb | ||
|
|
da47fdec96 | ||
|
|
971342ac7a | ||
|
|
3becc1cbe2 | ||
|
|
8ee5346900 | ||
|
|
9e4b79c6ff | ||
|
|
4ec1c65395 |
50
CHANGELOG.md
50
CHANGELOG.md
@@ -1,5 +1,55 @@
|
||||
# sapper changelog
|
||||
|
||||
## 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
|
||||
|
||||
* Emit a `basepath` event ([#284](https://github.com/sveltejs/sapper/pull/284))
|
||||
|
||||
## 0.13.1
|
||||
|
||||
* Reinstate ten-second interval between dev server heartbeats ([#276](https://github.com/sveltejs/sapper/issues/276))
|
||||
|
||||
## 0.13.0
|
||||
|
||||
* Expose `dev`, `build`, `export` and `find_page` APIs ([#272](https://github.com/sveltejs/sapper/issues/272))
|
||||
|
||||
## 0.12.0
|
||||
|
||||
* Each app has a single `<App>` component. See the [migration guide](https://sapper.svelte.technology/guide#0-11-to-0-12) for more information ([#157](https://github.com/sveltejs/sapper/issues/157))
|
||||
* Process exits with error code 1 if build/export fails ([#208](https://github.com/sveltejs/sapper/issues/208))
|
||||
|
||||
## 0.11.1
|
||||
|
||||
* Limit routes with leading dots to `.well-known` URIs ([#252](https://github.com/sveltejs/sapper/issues/252))
|
||||
|
||||
32
package.json
32
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sapper",
|
||||
"version": "0.11.1",
|
||||
"version": "0.14.1",
|
||||
"description": "Military-grade apps, engineered by Svelte",
|
||||
"main": "dist/middleware.ts.js",
|
||||
"bin": {
|
||||
@@ -18,26 +18,26 @@
|
||||
"test": "test"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-colors": "^2.0.1",
|
||||
"cheerio": "^1.0.0-rc.2",
|
||||
"chokidar": "^2.0.3",
|
||||
"clorox": "^1.0.3",
|
||||
"cookie": "^0.3.1",
|
||||
"devalue": "^1.0.1",
|
||||
"glob": "^7.1.2",
|
||||
"html-minifier": "^3.5.11",
|
||||
"html-minifier": "^3.5.16",
|
||||
"mkdirp": "^0.5.1",
|
||||
"node-fetch": "^2.1.1",
|
||||
"port-authority": "^1.0.2",
|
||||
"pretty-bytes": "^4.0.2",
|
||||
"pretty-bytes": "^5.0.0",
|
||||
"pretty-ms": "^3.1.0",
|
||||
"require-relative": "^0.8.7",
|
||||
"rimraf": "^2.6.2",
|
||||
"sade": "^1.4.0",
|
||||
"sade": "^1.4.1",
|
||||
"sander": "^0.6.0",
|
||||
"source-map-support": "^0.5.5",
|
||||
"tslib": "^1.9.0",
|
||||
"source-map-support": "^0.5.6",
|
||||
"tslib": "^1.9.1",
|
||||
"url-parse": "^1.2.0",
|
||||
"webpack-format-messages": "^1.0.2"
|
||||
"webpack-format-messages": "^2.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/glob": "^5.0.34",
|
||||
@@ -45,23 +45,23 @@
|
||||
"@types/rimraf": "^2.0.2",
|
||||
"compression": "^1.7.1",
|
||||
"eslint": "^4.13.1",
|
||||
"eslint-plugin-import": "^2.8.0",
|
||||
"eslint-plugin-import": "^2.12.0",
|
||||
"express": "^4.16.3",
|
||||
"mocha": "^5.0.4",
|
||||
"mocha": "^5.2.0",
|
||||
"nightmare": "^3.0.0",
|
||||
"npm-run-all": "^4.1.2",
|
||||
"polka": "^0.3.4",
|
||||
"rollup": "^0.58.2",
|
||||
"npm-run-all": "^4.1.3",
|
||||
"polka": "^0.4.0",
|
||||
"rollup": "^0.59.2",
|
||||
"rollup-plugin-commonjs": "^9.1.3",
|
||||
"rollup-plugin-json": "^2.3.0",
|
||||
"rollup-plugin-json": "^3.0.0",
|
||||
"rollup-plugin-string": "^2.0.2",
|
||||
"rollup-plugin-typescript": "^0.8.1",
|
||||
"serve-static": "^1.13.2",
|
||||
"svelte": "^2.4.4",
|
||||
"svelte": "^2.6.3",
|
||||
"svelte-loader": "^2.9.0",
|
||||
"typescript": "^2.8.3",
|
||||
"walk-sync": "^0.3.2",
|
||||
"webpack": "^4.1.0"
|
||||
"webpack": "^4.8.3"
|
||||
},
|
||||
"scripts": {
|
||||
"cy:open": "cypress open",
|
||||
|
||||
@@ -25,7 +25,13 @@ export default [
|
||||
},
|
||||
|
||||
{
|
||||
input: [`src/cli.ts`, `src/core.ts`, `src/middleware.ts`, `src/webpack.ts`],
|
||||
input: [
|
||||
`src/api.ts`,
|
||||
`src/cli.ts`,
|
||||
`src/core.ts`,
|
||||
`src/middleware.ts`,
|
||||
`src/webpack.ts`
|
||||
],
|
||||
output: {
|
||||
dir: 'dist',
|
||||
format: 'cjs',
|
||||
|
||||
6
src/api.ts
Normal file
6
src/api.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { dev } from './api/dev';
|
||||
import { build } from './api/build';
|
||||
import { exporter } from './api/export';
|
||||
import { find_page } from './api/find_page';
|
||||
|
||||
export { dev, build, exporter, find_page };
|
||||
111
src/api/build.ts
Normal file
111
src/api/build.ts
Normal file
@@ -0,0 +1,111 @@
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import mkdirp from 'mkdirp';
|
||||
import rimraf from 'rimraf';
|
||||
import { EventEmitter } from 'events';
|
||||
import { minify_html } from './utils/minify_html';
|
||||
import { create_compilers, create_main_manifests, create_routes, create_serviceworker_manifest } from '../core'
|
||||
import { locations } from '../config';
|
||||
import * as events from './interfaces';
|
||||
|
||||
export function build(opts: {}) {
|
||||
const emitter = new EventEmitter();
|
||||
|
||||
execute(emitter, opts).then(
|
||||
() => {
|
||||
emitter.emit('done', <events.DoneEvent>{}); // TODO do we need to pass back any info?
|
||||
},
|
||||
error => {
|
||||
emitter.emit('error', <events.ErrorEvent>{
|
||||
error
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
return emitter;
|
||||
}
|
||||
|
||||
async function execute(emitter: EventEmitter, {
|
||||
dest = 'build',
|
||||
app = 'app',
|
||||
webpack = 'webpack',
|
||||
routes = 'routes'
|
||||
} = {}) {
|
||||
mkdirp.sync(dest);
|
||||
rimraf.sync(path.join(dest, '**/*'));
|
||||
|
||||
// minify app/template.html
|
||||
// TODO compile this to a function? could be quicker than str.replace(...).replace(...).replace(...)
|
||||
const template = fs.readFileSync(`${app}/template.html`, 'utf-8');
|
||||
|
||||
// remove this in a future version
|
||||
if (template.indexOf('%sapper.base%') === -1) {
|
||||
const error = new Error(`As of Sapper v0.10, your template.html file must include %sapper.base% in the <head>`);
|
||||
error.code = `missing-sapper-base`;
|
||||
throw error;
|
||||
}
|
||||
|
||||
fs.writeFileSync(`${dest}/template.html`, minify_html(template));
|
||||
|
||||
const route_objects = create_routes();
|
||||
|
||||
// create app/manifest/client.js and app/manifest/server.js
|
||||
create_main_manifests({ routes: route_objects });
|
||||
|
||||
const { client, server, serviceworker } = create_compilers({ webpack });
|
||||
|
||||
const client_stats = await compile(client);
|
||||
emitter.emit('build', <events.BuildEvent>{
|
||||
type: 'client',
|
||||
// TODO duration/warnings
|
||||
webpack_stats: client_stats
|
||||
});
|
||||
|
||||
const client_info = client_stats.toJson();
|
||||
fs.writeFileSync(path.join(dest, 'client_info.json'), JSON.stringify(client_info));
|
||||
fs.writeFileSync(path.join(dest, 'client_assets.json'), JSON.stringify(client_info.assetsByChunkName));
|
||||
|
||||
const server_stats = await compile(server);
|
||||
emitter.emit('build', <events.BuildEvent>{
|
||||
type: 'server',
|
||||
// TODO duration/warnings
|
||||
webpack_stats: server_stats
|
||||
});
|
||||
|
||||
let serviceworker_stats;
|
||||
|
||||
if (serviceworker) {
|
||||
create_serviceworker_manifest({
|
||||
routes: route_objects,
|
||||
client_files: client_stats.toJson().assets.map((chunk: { name: string }) => `client/${chunk.name}`)
|
||||
});
|
||||
|
||||
serviceworker_stats = await compile(serviceworker);
|
||||
|
||||
emitter.emit('build', <events.BuildEvent>{
|
||||
type: 'serviceworker',
|
||||
// TODO duration/warnings
|
||||
webpack_stats: serviceworker_stats
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function compile(compiler: any) {
|
||||
return new Promise((fulfil, reject) => {
|
||||
compiler.run((err: Error, stats: any) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (stats.hasErrors()) {
|
||||
console.error(stats.toString({ colors: true }));
|
||||
reject(new Error(`Encountered errors while building app`));
|
||||
}
|
||||
|
||||
else {
|
||||
fulfil(stats);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
471
src/api/dev.ts
Normal file
471
src/api/dev.ts
Normal file
@@ -0,0 +1,471 @@
|
||||
import * as path from 'path';
|
||||
import * as fs from 'fs';
|
||||
import * as http from 'http';
|
||||
import * as child_process from 'child_process';
|
||||
import * as ports from 'port-authority';
|
||||
import mkdirp from 'mkdirp';
|
||||
import rimraf from 'rimraf';
|
||||
import format_messages from 'webpack-format-messages';
|
||||
import { locations } from '../config';
|
||||
import { EventEmitter } from 'events';
|
||||
import { create_routes, create_main_manifests, create_compilers, create_serviceworker_manifest } from '../core';
|
||||
import * as events from './interfaces';
|
||||
|
||||
export function dev(opts) {
|
||||
return new Watcher(opts);
|
||||
}
|
||||
|
||||
class Watcher extends EventEmitter {
|
||||
dirs: {
|
||||
app: string;
|
||||
dest: string;
|
||||
routes: string;
|
||||
webpack: string;
|
||||
}
|
||||
port: number;
|
||||
closed: boolean;
|
||||
|
||||
dev_server: DevServer;
|
||||
proc: child_process.ChildProcess;
|
||||
filewatchers: Array<{ close: () => void }>;
|
||||
deferreds: {
|
||||
client: Deferred;
|
||||
server: Deferred;
|
||||
};
|
||||
|
||||
crashed: boolean;
|
||||
restarting: boolean;
|
||||
current_build: {
|
||||
changed: Set<string>;
|
||||
rebuilding: Set<string>;
|
||||
unique_warnings: Set<string>;
|
||||
unique_errors: Set<string>;
|
||||
}
|
||||
|
||||
constructor({
|
||||
app = locations.app(),
|
||||
dest = locations.dest(),
|
||||
routes = locations.routes(),
|
||||
webpack = 'webpack',
|
||||
port = +process.env.PORT
|
||||
}: {
|
||||
app: string,
|
||||
dest: string,
|
||||
routes: string,
|
||||
webpack: string,
|
||||
port: number
|
||||
}) {
|
||||
super();
|
||||
|
||||
this.dirs = { app, dest, routes, webpack };
|
||||
this.port = port;
|
||||
this.closed = false;
|
||||
|
||||
this.filewatchers = [];
|
||||
|
||||
this.current_build = {
|
||||
changed: new Set(),
|
||||
rebuilding: new Set(),
|
||||
unique_errors: new Set(),
|
||||
unique_warnings: new Set()
|
||||
};
|
||||
|
||||
// remove this in a future version
|
||||
const template = fs.readFileSync(path.join(app, 'template.html'), 'utf-8');
|
||||
if (template.indexOf('%sapper.base%') === -1) {
|
||||
const error = new Error(`As of Sapper v0.10, your template.html file must include %sapper.base% in the <head>`);
|
||||
error.code = `missing-sapper-base`;
|
||||
throw error;
|
||||
}
|
||||
|
||||
process.env.NODE_ENV = 'development';
|
||||
|
||||
process.on('exit', () => {
|
||||
this.close();
|
||||
});
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
async init() {
|
||||
if (this.port) {
|
||||
if (!await ports.check(this.port)) {
|
||||
this.emit('fatal', <events.FatalEvent>{
|
||||
message: `Port ${this.port} is unavailable`
|
||||
});
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
this.port = await ports.find(3000);
|
||||
}
|
||||
|
||||
const { dest } = this.dirs;
|
||||
rimraf.sync(dest);
|
||||
mkdirp.sync(dest);
|
||||
|
||||
const dev_port = await ports.find(10000);
|
||||
|
||||
const routes = create_routes();
|
||||
create_main_manifests({ routes, dev_port });
|
||||
|
||||
this.dev_server = new DevServer(dev_port);
|
||||
|
||||
this.filewatchers.push(
|
||||
watch_files(locations.routes(), ['add', 'unlink'], () => {
|
||||
const routes = create_routes();
|
||||
create_main_manifests({ routes, dev_port });
|
||||
}),
|
||||
|
||||
watch_files(`${locations.app()}/template.html`, ['change'], () => {
|
||||
this.dev_server.send({
|
||||
action: 'reload'
|
||||
});
|
||||
})
|
||||
);
|
||||
|
||||
this.deferreds = {
|
||||
server: new Deferred(),
|
||||
client: new Deferred()
|
||||
};
|
||||
|
||||
// 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`,
|
||||
log
|
||||
});
|
||||
|
||||
this.crashed = true;
|
||||
this.proc = null;
|
||||
};
|
||||
|
||||
this.watch(compilers.server, {
|
||||
name: 'server',
|
||||
|
||||
invalid: filename => {
|
||||
this.restart(filename, 'server');
|
||||
this.deferreds.server = new Deferred();
|
||||
},
|
||||
|
||||
result: info => {
|
||||
fs.writeFileSync(path.join(dest, 'server_info.json'), JSON.stringify(info, null, ' '));
|
||||
|
||||
this.deferreds.client.promise.then(() => {
|
||||
const restart = () => {
|
||||
log = '';
|
||||
this.crashed = false;
|
||||
|
||||
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) {
|
||||
this.proc.removeListener('exit', emitFatal);
|
||||
this.proc.kill();
|
||||
this.proc.on('exit', restart);
|
||||
} else {
|
||||
restart();
|
||||
}
|
||||
|
||||
this.proc = child_process.fork(`${dest}/server.js`, [], {
|
||||
cwd: process.cwd(),
|
||||
env: Object.assign({
|
||||
PORT: this.port
|
||||
}, process.env),
|
||||
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 => {
|
||||
if (message.__sapper__ && message.event === 'basepath') {
|
||||
this.emit('basepath', {
|
||||
basepath: message.basepath
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.proc.on('exit', emitFatal);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
let first = true;
|
||||
|
||||
this.watch(compilers.client, {
|
||||
name: 'client',
|
||||
|
||||
invalid: filename => {
|
||||
this.restart(filename, 'client');
|
||||
this.deferreds.client = new Deferred();
|
||||
|
||||
// TODO we should delete old assets. due to a webpack bug
|
||||
// i don't even begin to comprehend, this is apparently
|
||||
// quite difficult
|
||||
},
|
||||
|
||||
result: info => {
|
||||
fs.writeFileSync(path.join(dest, 'client_info.json'), JSON.stringify(info));
|
||||
fs.writeFileSync(path.join(dest, 'client_assets.json'), JSON.stringify(info.assetsByChunkName, null, ' '));
|
||||
this.deferreds.client.fulfil();
|
||||
|
||||
const client_files = info.assets.map((chunk: { name: string }) => `client/${chunk.name}`);
|
||||
|
||||
create_serviceworker_manifest({
|
||||
routes: create_routes(),
|
||||
client_files
|
||||
});
|
||||
|
||||
// we need to wait a beat before watching the service
|
||||
// worker, because of some webpack nonsense
|
||||
setTimeout(watch_serviceworker, 100);
|
||||
}
|
||||
});
|
||||
|
||||
let watch_serviceworker = compilers.serviceworker
|
||||
? () => {
|
||||
watch_serviceworker = noop;
|
||||
|
||||
this.watch(compilers.serviceworker, {
|
||||
name: 'service worker',
|
||||
|
||||
result: info => {
|
||||
fs.writeFileSync(path.join(dest, 'serviceworker_info.json'), JSON.stringify(info, null, ' '));
|
||||
}
|
||||
});
|
||||
}
|
||||
: noop;
|
||||
}
|
||||
|
||||
close() {
|
||||
if (this.closed) return;
|
||||
this.closed = true;
|
||||
|
||||
this.dev_server.close();
|
||||
|
||||
if (this.proc) this.proc.kill();
|
||||
this.filewatchers.forEach(watcher => {
|
||||
watcher.close();
|
||||
});
|
||||
}
|
||||
|
||||
restart(filename: string, type: string) {
|
||||
if (this.restarting) {
|
||||
this.current_build.changed.add(filename);
|
||||
this.current_build.rebuilding.add(type);
|
||||
} else {
|
||||
this.restarting = true;
|
||||
|
||||
this.current_build = {
|
||||
changed: new Set([filename]),
|
||||
rebuilding: new Set([type]),
|
||||
unique_warnings: new Set(),
|
||||
unique_errors: new Set()
|
||||
};
|
||||
|
||||
process.nextTick(() => {
|
||||
this.emit('invalid', <events.InvalidEvent>{
|
||||
changed: Array.from(this.current_build.changed),
|
||||
invalid: {
|
||||
server: this.current_build.rebuilding.has('server'),
|
||||
client: this.current_build.rebuilding.has('client'),
|
||||
serviceworker: this.current_build.rebuilding.has('serviceworker'),
|
||||
}
|
||||
});
|
||||
|
||||
this.restarting = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
watch(compiler: any, { name, invalid = noop, result }: {
|
||||
name: string,
|
||||
invalid?: (filename: string) => void;
|
||||
result: (stats: any) => void;
|
||||
}) {
|
||||
compiler.hooks.invalid.tap('sapper', (filename: string) => {
|
||||
invalid(filename);
|
||||
});
|
||||
|
||||
compiler.watch({}, (err: Error, stats: any) => {
|
||||
if (err) {
|
||||
this.emit('error', <events.ErrorEvent>{
|
||||
type: name,
|
||||
message: err.message
|
||||
});
|
||||
} else {
|
||||
const messages = format_messages(stats);
|
||||
const info = stats.toJson();
|
||||
|
||||
this.emit('build', {
|
||||
type: name,
|
||||
|
||||
duration: info.time,
|
||||
|
||||
errors: messages.errors.map((message: string) => {
|
||||
const duplicate = this.current_build.unique_errors.has(message);
|
||||
this.current_build.unique_errors.add(message);
|
||||
|
||||
return mungeWebpackError(message, duplicate);
|
||||
}),
|
||||
|
||||
warnings: messages.warnings.map((message: string) => {
|
||||
const duplicate = this.current_build.unique_warnings.has(message);
|
||||
this.current_build.unique_warnings.add(message);
|
||||
|
||||
return mungeWebpackError(message, duplicate);
|
||||
}),
|
||||
});
|
||||
|
||||
result(info);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const locPattern = /\((\d+):(\d+)\)$/;
|
||||
|
||||
function mungeWebpackError(message: string, duplicate: boolean) {
|
||||
// TODO this is all a bit rube goldberg...
|
||||
const lines = message.split('\n');
|
||||
|
||||
const file = lines.shift()
|
||||
.replace('[7m', '') // careful — there is a special character at the beginning of this string
|
||||
.replace('[27m', '')
|
||||
.replace('./', '');
|
||||
|
||||
let line = null;
|
||||
let column = null;
|
||||
|
||||
const match = locPattern.exec(lines[0]);
|
||||
if (match) {
|
||||
lines[0] = lines[0].replace(locPattern, '');
|
||||
line = +match[1];
|
||||
column = +match[2];
|
||||
}
|
||||
|
||||
return {
|
||||
file,
|
||||
line,
|
||||
column,
|
||||
message: lines.join('\n'),
|
||||
originalMessage: message,
|
||||
duplicate
|
||||
};
|
||||
}
|
||||
|
||||
class Deferred {
|
||||
promise: Promise<any>;
|
||||
fulfil: (value?: any) => void;
|
||||
reject: (error: Error) => void;
|
||||
|
||||
constructor() {
|
||||
this.promise = new Promise((fulfil, reject) => {
|
||||
this.fulfil = fulfil;
|
||||
this.reject = reject;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const INTERVAL = 10000;
|
||||
|
||||
class DevServer {
|
||||
clients: Set<http.ServerResponse>;
|
||||
interval: NodeJS.Timer;
|
||||
_: http.Server;
|
||||
|
||||
constructor(port: number, interval = 10000) {
|
||||
this.clients = new Set();
|
||||
|
||||
this._ = http.createServer((req, res) => {
|
||||
if (req.url !== '/__sapper__') return;
|
||||
|
||||
req.socket.setKeepAlive(true);
|
||||
res.writeHead(200, {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
'Access-Control-Allow-Headers': 'Cache-Control',
|
||||
'Content-Type': 'text/event-stream;charset=utf-8',
|
||||
'Cache-Control': 'no-cache, no-transform',
|
||||
'Connection': 'keep-alive',
|
||||
// While behind nginx, event stream should not be buffered:
|
||||
// http://nginx.org/docs/http/ngx_http_proxy_module.html#proxy_buffering
|
||||
'X-Accel-Buffering': 'no'
|
||||
});
|
||||
|
||||
res.write('\n');
|
||||
|
||||
this.clients.add(res);
|
||||
req.on('close', () => {
|
||||
this.clients.delete(res);
|
||||
});
|
||||
});
|
||||
|
||||
this._.listen(port);
|
||||
|
||||
this.interval = setInterval(() => {
|
||||
this.send(null);
|
||||
}, INTERVAL);
|
||||
}
|
||||
|
||||
close() {
|
||||
this._.close();
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
|
||||
send(data: any) {
|
||||
this.clients.forEach(client => {
|
||||
client.write(`data: ${JSON.stringify(data)}\n\n`);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function noop() {}
|
||||
|
||||
function watch_files(pattern: string, events: string[], callback: () => void) {
|
||||
const chokidar = require('chokidar');
|
||||
|
||||
const watcher = chokidar.watch(pattern, {
|
||||
persistent: true,
|
||||
ignoreInitial: true,
|
||||
disableGlobbing: true
|
||||
});
|
||||
|
||||
events.forEach(event => {
|
||||
watcher.on(event, callback);
|
||||
});
|
||||
|
||||
return {
|
||||
close: () => watcher.close()
|
||||
};
|
||||
}
|
||||
131
src/api/export.ts
Normal file
131
src/api/export.ts
Normal file
@@ -0,0 +1,131 @@
|
||||
import * as child_process from 'child_process';
|
||||
import * as path from 'path';
|
||||
import * as sander from 'sander';
|
||||
import cheerio from 'cheerio';
|
||||
import URL from 'url-parse';
|
||||
import fetch from 'node-fetch';
|
||||
import * as ports from 'port-authority';
|
||||
import { EventEmitter } from 'events';
|
||||
import { minify_html } from './utils/minify_html';
|
||||
import { locations } from '../config';
|
||||
import * as events from './interfaces';
|
||||
|
||||
export function exporter(opts: {}) {
|
||||
const emitter = new EventEmitter();
|
||||
|
||||
execute(emitter, opts).then(
|
||||
() => {
|
||||
emitter.emit('done', <events.DoneEvent>{}); // TODO do we need to pass back any info?
|
||||
},
|
||||
error => {
|
||||
emitter.emit('error', <events.ErrorEvent>{
|
||||
error
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
return emitter;
|
||||
}
|
||||
|
||||
async function execute(emitter: EventEmitter, {
|
||||
build = 'build',
|
||||
dest = 'export',
|
||||
basepath = ''
|
||||
} = {}) {
|
||||
const export_dir = path.join(dest, basepath);
|
||||
|
||||
// Prep output directory
|
||||
sander.rimrafSync(export_dir);
|
||||
|
||||
sander.copydirSync('assets').to(export_dir);
|
||||
sander.copydirSync(build, 'client').to(export_dir, 'client');
|
||||
|
||||
if (sander.existsSync(build, 'service-worker.js')) {
|
||||
sander.copyFileSync(build, 'service-worker.js').to(export_dir, 'service-worker.js');
|
||||
}
|
||||
|
||||
if (sander.existsSync(build, 'service-worker.js.map')) {
|
||||
sander.copyFileSync(build, 'service-worker.js.map').to(export_dir, 'service-worker.js.map');
|
||||
}
|
||||
|
||||
const port = await ports.find(3000);
|
||||
|
||||
const origin = `http://localhost:${port}`;
|
||||
|
||||
const proc = child_process.fork(path.resolve(`${build}/server.js`), [], {
|
||||
cwd: process.cwd(),
|
||||
env: Object.assign({
|
||||
PORT: port,
|
||||
NODE_ENV: 'production',
|
||||
SAPPER_DEST: build,
|
||||
SAPPER_EXPORT: 'true'
|
||||
}, process.env)
|
||||
});
|
||||
|
||||
const seen = new Set();
|
||||
const saved = new Set();
|
||||
|
||||
proc.on('message', message => {
|
||||
if (!message.__sapper__ || message.event !== 'file') return;
|
||||
|
||||
let file = new URL(message.url, origin).pathname.slice(1);
|
||||
let { body } = message;
|
||||
|
||||
if (saved.has(file)) return;
|
||||
saved.add(file);
|
||||
|
||||
const is_html = message.type === 'text/html';
|
||||
|
||||
if (is_html) {
|
||||
file = file === '' ? 'index.html' : `${file}/index.html`;
|
||||
body = minify_html(body);
|
||||
}
|
||||
|
||||
emitter.emit('file', <events.FileEvent>{
|
||||
file,
|
||||
size: body.length
|
||||
});
|
||||
|
||||
sander.writeFileSync(export_dir, file, body);
|
||||
});
|
||||
|
||||
async function handle(url: URL) {
|
||||
const r = await fetch(url.href);
|
||||
const range = ~~(r.status / 100);
|
||||
|
||||
if (range >= 4) {
|
||||
emitter.emit('failure', <events.FailureEvent>{
|
||||
status: r.status,
|
||||
pathname: url.pathname
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (range === 2) {
|
||||
if (r.headers.get('Content-Type') === 'text/html') {
|
||||
const body = await r.text();
|
||||
const $ = cheerio.load(body);
|
||||
const urls: URL[] = [];
|
||||
|
||||
const base = new URL($('base').attr('href') || '/', url.href);
|
||||
|
||||
$('a[href]').each((i: number, $a) => {
|
||||
const url = new URL($a.attribs.href, base.href);
|
||||
|
||||
if (url.origin === origin && !seen.has(url.pathname)) {
|
||||
seen.add(url.pathname);
|
||||
urls.push(url);
|
||||
}
|
||||
});
|
||||
|
||||
for (const url of urls) {
|
||||
await handle(url);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return ports.wait(port)
|
||||
.then(() => handle(new URL(`/${basepath}`, origin))) // TODO all static routes
|
||||
.then(() => proc.kill());
|
||||
}
|
||||
16
src/api/find_page.ts
Normal file
16
src/api/find_page.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import * as glob from 'glob';
|
||||
import { locations } from '../config';
|
||||
import { create_routes } from '../core';
|
||||
|
||||
export function find_page(pathname: string, files: string[] = glob.sync('**/*.*', { cwd: locations.routes(), dot: true, nodir: true })) {
|
||||
const routes = create_routes({ files });
|
||||
|
||||
for (let i = 0; i < routes.length; i += 1) {
|
||||
const route = routes[i];
|
||||
|
||||
if (route.pattern.test(pathname)) {
|
||||
const page = route.handlers.find(handler => handler.type === 'page');
|
||||
if (page) return page.file;
|
||||
}
|
||||
}
|
||||
}
|
||||
44
src/api/interfaces.ts
Normal file
44
src/api/interfaces.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import * as child_process from 'child_process';
|
||||
|
||||
export type ReadyEvent = {
|
||||
port: number;
|
||||
process: child_process.ChildProcess;
|
||||
};
|
||||
|
||||
export type ErrorEvent = {
|
||||
type: string;
|
||||
message: string;
|
||||
};
|
||||
|
||||
export type FatalEvent = {
|
||||
message: string;
|
||||
log?: string;
|
||||
};
|
||||
|
||||
export type InvalidEvent = {
|
||||
changed: string[];
|
||||
invalid: {
|
||||
client: boolean;
|
||||
server: boolean;
|
||||
serviceworker: boolean;
|
||||
}
|
||||
};
|
||||
|
||||
export type BuildEvent = {
|
||||
type: string;
|
||||
errors: Array<{ message: string, duplicate: boolean }>;
|
||||
warnings: Array<{ message: string, duplicate: boolean }>;
|
||||
duration: number;
|
||||
webpack_stats: any;
|
||||
}
|
||||
|
||||
export type FileEvent = {
|
||||
file: string;
|
||||
size: number;
|
||||
}
|
||||
|
||||
export type FailureEvent = {
|
||||
|
||||
}
|
||||
|
||||
export type DoneEvent = {}
|
||||
10
src/cli.ts
10
src/cli.ts
@@ -2,7 +2,7 @@ import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import * as child_process from 'child_process';
|
||||
import sade from 'sade';
|
||||
import * as clorox from 'clorox';
|
||||
import * as colors from 'ansi-colors';
|
||||
import prettyMs from 'pretty-ms';
|
||||
// import upgrade from './cli/upgrade';
|
||||
import * as ports from 'port-authority';
|
||||
@@ -47,9 +47,10 @@ prog.command('build [dest]')
|
||||
require('./server.js');
|
||||
`.replace(/^\t+/gm, '').trim());
|
||||
|
||||
console.error(`\n> Finished in ${elapsed(start)}. Type ${clorox.bold.cyan(`node ${dest}`)} to run the app.`);
|
||||
console.error(`\n> Finished in ${elapsed(start)}. Type ${colors.bold.cyan(`node ${dest}`)} to run the app.`);
|
||||
} catch (err) {
|
||||
console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
|
||||
process.exit(1);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -80,9 +81,10 @@ prog.command('export [dest]')
|
||||
|
||||
const { exporter } = await import('./cli/export');
|
||||
await exporter(dest, opts);
|
||||
console.error(`\n> Finished in ${elapsed(start)}. Type ${clorox.bold.cyan(`npx serve ${dest}`)} to run the app.`);
|
||||
console.error(`\n> Finished in ${elapsed(start)}. Type ${colors.bold.cyan(`npx serve ${dest}`)} to run the app.`);
|
||||
} catch (err) {
|
||||
console.error(err ? err.details || err.stack || err.message || err : 'Unknown error');
|
||||
process.exit(1);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -92,4 +94,4 @@ prog.parse(process.argv);
|
||||
|
||||
function elapsed(start: number) {
|
||||
return prettyMs(Date.now() - start);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,78 +1,32 @@
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import * as clorox from 'clorox';
|
||||
import mkdirp from 'mkdirp';
|
||||
import rimraf from 'rimraf';
|
||||
import { minify_html } from './utils/minify_html';
|
||||
import { create_compilers, create_main_manifests, create_routes, create_serviceworker_manifest } from '../core'
|
||||
import { build as _build } from '../api/build';
|
||||
import * as colors from 'ansi-colors';
|
||||
import { locations } from '../config';
|
||||
|
||||
export async function build() {
|
||||
const output = locations.dest();
|
||||
|
||||
mkdirp.sync(output);
|
||||
rimraf.sync(path.join(output, '**/*'));
|
||||
|
||||
// minify app/template.html
|
||||
// TODO compile this to a function? could be quicker than str.replace(...).replace(...).replace(...)
|
||||
const template = fs.readFileSync(`${locations.app()}/template.html`, 'utf-8');
|
||||
|
||||
// remove this in a future version
|
||||
if (template.indexOf('%sapper.base%') === -1) {
|
||||
console.log(`${clorox.bold.red(`> As of Sapper v0.10, your template.html file must include %sapper.base% in the <head>`)}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
fs.writeFileSync(`${output}/template.html`, minify_html(template));
|
||||
|
||||
const routes = create_routes();
|
||||
|
||||
// create app/manifest/client.js and app/manifest/server.js
|
||||
create_main_manifests({ routes });
|
||||
|
||||
const { client, server, serviceworker } = create_compilers();
|
||||
|
||||
const client_stats = await compile(client);
|
||||
console.log(`${clorox.inverse(`\nbuilt client`)}`);
|
||||
console.log(client_stats.toString({ colors: true }));
|
||||
fs.writeFileSync(path.join(output, 'client_info.json'), JSON.stringify({
|
||||
assets: client_stats.toJson().assetsByChunkName
|
||||
}));
|
||||
|
||||
const server_stats = await compile(server);
|
||||
console.log(`${clorox.inverse(`\nbuilt server`)}`);
|
||||
console.log(server_stats.toString({ colors: true }));
|
||||
|
||||
let serviceworker_stats;
|
||||
|
||||
if (serviceworker) {
|
||||
create_serviceworker_manifest({
|
||||
routes,
|
||||
client_files: client_stats.toJson().assets.map((chunk: { name: string }) => `client/${chunk.name}`)
|
||||
});
|
||||
|
||||
serviceworker_stats = await compile(serviceworker);
|
||||
console.log(`${clorox.inverse(`\nbuilt service worker`)}`);
|
||||
console.log(serviceworker_stats.toString({ colors: true }));
|
||||
}
|
||||
}
|
||||
|
||||
function compile(compiler: any) {
|
||||
export function build() {
|
||||
return new Promise((fulfil, reject) => {
|
||||
compiler.run((err: Error, stats: any) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
process.exit(1);
|
||||
}
|
||||
try {
|
||||
const emitter = _build({
|
||||
dest: locations.dest(),
|
||||
app: locations.app(),
|
||||
routes: locations.routes(),
|
||||
webpack: 'webpack'
|
||||
});
|
||||
|
||||
if (stats.hasErrors()) {
|
||||
console.error(stats.toString({ colors: true }));
|
||||
reject(new Error(`Encountered errors while building app`));
|
||||
}
|
||||
emitter.on('build', event => {
|
||||
console.log(colors.inverse(`\nbuilt ${event.type}`));
|
||||
console.log(event.webpack_stats.toString({ colors: true }));
|
||||
});
|
||||
|
||||
else {
|
||||
fulfil(stats);
|
||||
}
|
||||
});
|
||||
emitter.on('error', event => {
|
||||
reject(event.error);
|
||||
});
|
||||
|
||||
emitter.on('done', event => {
|
||||
fulfil();
|
||||
});
|
||||
} catch (err) {
|
||||
console.log(`${colors.bold.red(`> ${err.message}`)}`);
|
||||
process.exit(1);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
357
src/cli/dev.ts
357
src/cli/dev.ts
@@ -1,323 +1,78 @@
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import * as net from 'net';
|
||||
import * as clorox from 'clorox';
|
||||
import * as colors from 'ansi-colors';
|
||||
import * as child_process from 'child_process';
|
||||
import * as http from 'http';
|
||||
import mkdirp from 'mkdirp';
|
||||
import rimraf from 'rimraf';
|
||||
import format_messages from 'webpack-format-messages';
|
||||
import prettyMs from 'pretty-ms';
|
||||
import * as ports from 'port-authority';
|
||||
import { locations } from '../config';
|
||||
import { create_compilers, create_main_manifests, create_routes, create_serviceworker_manifest } from '../core';
|
||||
import { dev as _dev } from '../api/dev';
|
||||
import * as events from '../api/interfaces';
|
||||
|
||||
type Deferred = {
|
||||
promise?: Promise<any>;
|
||||
fulfil?: (value?: any) => void;
|
||||
reject?: (err: Error) => void;
|
||||
}
|
||||
export function dev(opts: { port: number, open: boolean }) {
|
||||
try {
|
||||
const watcher = _dev(opts);
|
||||
|
||||
function deferred() {
|
||||
const d: Deferred = {};
|
||||
let first = true;
|
||||
|
||||
d.promise = new Promise((fulfil, reject) => {
|
||||
d.fulfil = fulfil;
|
||||
d.reject = reject;
|
||||
});
|
||||
watcher.on('ready', (event: events.ReadyEvent) => {
|
||||
if (first) {
|
||||
console.log(`${colors.bold.cyan(`> Listening on http://localhost:${event.port}`)}`);
|
||||
if (opts.open) child_process.exec(`open http://localhost:${event.port}`);
|
||||
first = false;
|
||||
}
|
||||
|
||||
return d;
|
||||
}
|
||||
// TODO clear screen?
|
||||
|
||||
function create_hot_update_server(port: number, interval = 10000) {
|
||||
const clients = new Set();
|
||||
event.process.stdout.on('data', data => {
|
||||
process.stdout.write(data);
|
||||
});
|
||||
|
||||
const server = http.createServer((req, res) => {
|
||||
if (req.url !== '/__sapper__') return;
|
||||
|
||||
req.socket.setKeepAlive(true);
|
||||
res.writeHead(200, {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
'Access-Control-Allow-Headers': 'Cache-Control',
|
||||
'Content-Type': 'text/event-stream;charset=utf-8',
|
||||
'Cache-Control': 'no-cache, no-transform',
|
||||
'Connection': 'keep-alive',
|
||||
// While behind nginx, event stream should not be buffered:
|
||||
// http://nginx.org/docs/http/ngx_http_proxy_module.html#proxy_buffering
|
||||
'X-Accel-Buffering': 'no'
|
||||
event.process.stderr.on('data', data => {
|
||||
process.stderr.write(data);
|
||||
});
|
||||
});
|
||||
|
||||
res.write('\n');
|
||||
|
||||
clients.add(res);
|
||||
req.on('close', () => {
|
||||
clients.delete(res);
|
||||
});
|
||||
});
|
||||
|
||||
server.listen(port);
|
||||
|
||||
function send(data: any) {
|
||||
clients.forEach(client => {
|
||||
client.write(`data: ${JSON.stringify(data)}\n\n`);
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(() => {
|
||||
send(null)
|
||||
}, interval);
|
||||
|
||||
return { send };
|
||||
}
|
||||
|
||||
export async function dev(opts: { port: number, open: boolean }) {
|
||||
// remove this in a future version
|
||||
const template = fs.readFileSync(path.join(locations.app(), 'template.html'), 'utf-8');
|
||||
if (template.indexOf('%sapper.base%') === -1) {
|
||||
console.log(`${clorox.bold.red(`> As of Sapper v0.10, your template.html file must include %sapper.base% in the <head>`)}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
process.env.NODE_ENV = 'development';
|
||||
|
||||
let port = opts.port || +process.env.PORT;
|
||||
|
||||
if (port) {
|
||||
if (!await ports.check(port)) {
|
||||
console.log(`${clorox.bold.red(`> Port ${port} is unavailable`)}`);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
port = await ports.find(3000);
|
||||
}
|
||||
|
||||
const dir = locations.dest();
|
||||
rimraf.sync(dir);
|
||||
mkdirp.sync(dir);
|
||||
|
||||
const dev_port = await ports.find(10000);
|
||||
|
||||
const routes = create_routes();
|
||||
create_main_manifests({ routes, dev_port });
|
||||
|
||||
const hot_update_server = create_hot_update_server(dev_port);
|
||||
|
||||
watch_files(locations.routes(), ['add', 'unlink'], () => {
|
||||
const routes = create_routes();
|
||||
create_main_manifests({ routes, dev_port });
|
||||
});
|
||||
|
||||
watch_files(`${locations.app()}/template.html`, ['change'], () => {
|
||||
hot_update_server.send({
|
||||
action: 'reload'
|
||||
});
|
||||
});
|
||||
|
||||
let proc: child_process.ChildProcess;
|
||||
|
||||
process.on('exit', () => {
|
||||
// sometimes webpack crashes, so we need to kill our children
|
||||
if (proc) proc.kill();
|
||||
});
|
||||
|
||||
const deferreds = {
|
||||
server: deferred(),
|
||||
client: deferred()
|
||||
};
|
||||
|
||||
let restarting = false;
|
||||
let build = {
|
||||
unique_warnings: new Set(),
|
||||
unique_errors: new Set()
|
||||
};
|
||||
|
||||
function restart_build(filename: string) {
|
||||
if (restarting) return;
|
||||
|
||||
restarting = true;
|
||||
build = {
|
||||
unique_warnings: new Set(),
|
||||
unique_errors: new Set()
|
||||
};
|
||||
|
||||
process.nextTick(() => {
|
||||
restarting = false;
|
||||
watcher.on('invalid', (event: events.InvalidEvent) => {
|
||||
const changed = event.changed.map(filename => path.relative(process.cwd(), filename)).join(', ');
|
||||
console.log(`\n${colors.bold.cyan(changed)} changed. rebuilding...`);
|
||||
});
|
||||
|
||||
console.log(`\n${clorox.bold.cyan(path.relative(process.cwd(), filename))} changed. rebuilding...`);
|
||||
}
|
||||
|
||||
// TODO watch the configs themselves?
|
||||
const compilers = create_compilers();
|
||||
|
||||
function watch(compiler: any, { name, invalid = noop, error = noop, result }: {
|
||||
name: string,
|
||||
invalid?: (filename: string) => void;
|
||||
error?: (error: Error) => void;
|
||||
result: (stats: any) => void;
|
||||
}) {
|
||||
compiler.hooks.invalid.tap('sapper', (filename: string) => {
|
||||
invalid(filename);
|
||||
watcher.on('error', (event: events.ErrorEvent) => {
|
||||
console.log(`${colors.red(`✗ ${event.type}`)}`);
|
||||
console.log(`${colors.red(event.message)}`);
|
||||
});
|
||||
|
||||
compiler.watch({}, (err: Error, stats: any) => {
|
||||
if (err) {
|
||||
console.log(`${clorox.red(`✗ ${name}`)}`);
|
||||
console.log(`${clorox.red(err.message)}`);
|
||||
error(err);
|
||||
} else {
|
||||
const messages = format_messages(stats);
|
||||
const info = stats.toJson();
|
||||
watcher.on('fatal', (event: events.FatalEvent) => {
|
||||
console.log(`${colors.bold.red(`> ${event.message}`)}`);
|
||||
if (event.log) console.log(event.log);
|
||||
});
|
||||
|
||||
if (messages.errors.length > 0) {
|
||||
console.log(`${clorox.bold.red(`✗ ${name}`)}`);
|
||||
watcher.on('build', (event: events.BuildEvent) => {
|
||||
if (event.errors.length) {
|
||||
console.log(`${colors.bold.red(`✗ ${event.type}`)}`);
|
||||
|
||||
const filtered = messages.errors.filter((message: string) => {
|
||||
return !build.unique_errors.has(message);
|
||||
});
|
||||
event.errors.filter(e => !e.duplicate).forEach(error => {
|
||||
console.log(error.message);
|
||||
});
|
||||
|
||||
filtered.forEach((message: string) => {
|
||||
build.unique_errors.add(message);
|
||||
console.log(message);
|
||||
});
|
||||
|
||||
const hidden = messages.errors.length - filtered.length;
|
||||
if (hidden > 0) {
|
||||
console.log(`${hidden} duplicate ${hidden === 1 ? 'error' : 'errors'} hidden\n`);
|
||||
}
|
||||
} else {
|
||||
if (messages.warnings.length > 0) {
|
||||
console.log(`${clorox.bold.yellow(`• ${name}`)}`);
|
||||
|
||||
const filtered = messages.warnings.filter((message: string) => {
|
||||
return !build.unique_warnings.has(message);
|
||||
});
|
||||
|
||||
filtered.forEach((message: string) => {
|
||||
build.unique_warnings.add(message);
|
||||
console.log(`${message}\n`);
|
||||
});
|
||||
|
||||
const hidden = messages.warnings.length - filtered.length;
|
||||
if (hidden > 0) {
|
||||
console.log(`${hidden} duplicate ${hidden === 1 ? 'warning' : 'warnings'} hidden\n`);
|
||||
}
|
||||
} else {
|
||||
console.log(`${clorox.bold.green(`✔ ${name}`)} ${clorox.gray(`(${prettyMs(info.time)})`)}`);
|
||||
}
|
||||
|
||||
result(info);
|
||||
const hidden = event.errors.filter(e => e.duplicate).length;
|
||||
if (hidden > 0) {
|
||||
console.log(`${hidden} duplicate ${hidden === 1 ? 'error' : 'errors'} hidden\n`);
|
||||
}
|
||||
} else if (event.warnings.length) {
|
||||
console.log(`${colors.bold.yellow(`• ${event.type}`)}`);
|
||||
|
||||
event.warnings.filter(e => !e.duplicate).forEach(warning => {
|
||||
console.log(warning.message);
|
||||
});
|
||||
|
||||
const hidden = event.warnings.filter(e => e.duplicate).length;
|
||||
if (hidden > 0) {
|
||||
console.log(`${hidden} duplicate ${hidden === 1 ? 'warning' : 'warnings'} hidden\n`);
|
||||
}
|
||||
} else {
|
||||
console.log(`${colors.bold.green(`✔ ${event.type}`)} ${colors.gray(`(${prettyMs(event.duration)})`)}`);
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
console.log(`${colors.bold.red(`> ${err.message}`)}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
watch(compilers.server, {
|
||||
name: 'server',
|
||||
|
||||
invalid: filename => {
|
||||
restart_build(filename);
|
||||
// TODO print message
|
||||
deferreds.server = deferred();
|
||||
},
|
||||
|
||||
result: info => {
|
||||
// TODO log compile errors/warnings
|
||||
|
||||
fs.writeFileSync(path.join(dir, 'server_info.json'), JSON.stringify(info, null, ' '));
|
||||
|
||||
deferreds.client.promise.then(() => {
|
||||
function restart() {
|
||||
ports.wait(port).then(deferreds.server.fulfil);
|
||||
}
|
||||
|
||||
if (proc) {
|
||||
proc.kill();
|
||||
proc.on('exit', restart);
|
||||
} else {
|
||||
restart();
|
||||
}
|
||||
|
||||
proc = child_process.fork(`${dir}/server.js`, [], {
|
||||
cwd: process.cwd(),
|
||||
env: Object.assign({
|
||||
PORT: port
|
||||
}, process.env)
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
let first = true;
|
||||
|
||||
watch(compilers.client, {
|
||||
name: 'client',
|
||||
|
||||
invalid: filename => {
|
||||
restart_build(filename);
|
||||
deferreds.client = deferred();
|
||||
|
||||
// TODO we should delete old assets. due to a webpack bug
|
||||
// i don't even begin to comprehend, this is apparently
|
||||
// quite difficult
|
||||
},
|
||||
|
||||
result: info => {
|
||||
fs.writeFileSync(path.join(dir, 'client_info.json'), JSON.stringify({
|
||||
assets: info.assetsByChunkName
|
||||
}, null, ' '));
|
||||
deferreds.client.fulfil();
|
||||
|
||||
const client_files = info.assets.map((chunk: { name: string }) => `client/${chunk.name}`);
|
||||
|
||||
deferreds.server.promise.then(() => {
|
||||
hot_update_server.send({
|
||||
status: 'completed'
|
||||
});
|
||||
|
||||
if (first) {
|
||||
first = false;
|
||||
console.log(`${clorox.bold.cyan(`> Listening on http://localhost:${port}`)}`);
|
||||
if (opts.open) child_process.exec(`open http://localhost:${port}`);
|
||||
}
|
||||
});
|
||||
|
||||
create_serviceworker_manifest({
|
||||
routes: create_routes(),
|
||||
client_files
|
||||
});
|
||||
|
||||
watch_serviceworker();
|
||||
}
|
||||
});
|
||||
|
||||
let watch_serviceworker = compilers.serviceworker
|
||||
? function() {
|
||||
watch_serviceworker = noop;
|
||||
|
||||
watch(compilers.serviceworker, {
|
||||
name: 'service worker',
|
||||
|
||||
result: info => {
|
||||
fs.writeFileSync(path.join(dir, 'serviceworker_info.json'), JSON.stringify(info, null, ' '));
|
||||
}
|
||||
});
|
||||
}
|
||||
: noop;
|
||||
}
|
||||
|
||||
function noop() {}
|
||||
|
||||
function watch_files(pattern: string, events: string[], callback: () => void) {
|
||||
const chokidar = require('chokidar');
|
||||
|
||||
const watcher = chokidar.watch(pattern, {
|
||||
persistent: true,
|
||||
ignoreInitial: true,
|
||||
disableGlobbing: true
|
||||
});
|
||||
|
||||
events.forEach(event => {
|
||||
watcher.on(event, callback);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,106 +1,35 @@
|
||||
import * as child_process from 'child_process';
|
||||
import * as path from 'path';
|
||||
import * as sander from 'sander';
|
||||
import * as clorox from 'clorox';
|
||||
import cheerio from 'cheerio';
|
||||
import URL from 'url-parse';
|
||||
import fetch from 'node-fetch';
|
||||
import * as ports from 'port-authority';
|
||||
import { exporter as _exporter } from '../api/export';
|
||||
import * as colors from 'ansi-colors';
|
||||
import prettyBytes from 'pretty-bytes';
|
||||
import { minify_html } from './utils/minify_html';
|
||||
import { locations } from '../config';
|
||||
|
||||
export async function exporter(export_dir: string, { basepath = '' }) {
|
||||
const build_dir = locations.dest();
|
||||
export function exporter(export_dir: string, { basepath = '' }) {
|
||||
return new Promise((fulfil, reject) => {
|
||||
try {
|
||||
const emitter = _exporter({
|
||||
build: locations.dest(),
|
||||
dest: export_dir,
|
||||
basepath
|
||||
});
|
||||
|
||||
export_dir = path.join(export_dir, basepath);
|
||||
emitter.on('file', event => {
|
||||
console.log(`${colors.bold.cyan(event.file)} ${colors.gray(`(${prettyBytes(event.size)})`)}`);
|
||||
});
|
||||
|
||||
// Prep output directory
|
||||
sander.rimrafSync(export_dir);
|
||||
emitter.on('failure', event => {
|
||||
console.log(`${colors.red(`> Received ${event.status} response when fetching ${event.pathname}`)}`);
|
||||
});
|
||||
|
||||
sander.copydirSync('assets').to(export_dir);
|
||||
sander.copydirSync(build_dir, 'client').to(export_dir, 'client');
|
||||
emitter.on('error', event => {
|
||||
reject(event.error);
|
||||
});
|
||||
|
||||
if (sander.existsSync(build_dir, 'service-worker.js')) {
|
||||
sander.copyFileSync(build_dir, 'service-worker.js').to(export_dir, 'service-worker.js');
|
||||
}
|
||||
|
||||
if (sander.existsSync(build_dir, 'service-worker.js.map')) {
|
||||
sander.copyFileSync(build_dir, 'service-worker.js.map').to(export_dir, 'service-worker.js.map');
|
||||
}
|
||||
|
||||
const port = await ports.find(3000);
|
||||
|
||||
const origin = `http://localhost:${port}`;
|
||||
|
||||
const proc = child_process.fork(path.resolve(`${build_dir}/server.js`), [], {
|
||||
cwd: process.cwd(),
|
||||
env: Object.assign({
|
||||
PORT: port,
|
||||
NODE_ENV: 'production',
|
||||
SAPPER_DEST: build_dir,
|
||||
SAPPER_EXPORT: 'true'
|
||||
}, process.env)
|
||||
emitter.on('done', event => {
|
||||
fulfil();
|
||||
});
|
||||
} catch (err) {
|
||||
console.log(`${colors.bold.red(`> ${err.message}`)}`);
|
||||
process.exit(1);
|
||||
}
|
||||
});
|
||||
|
||||
const seen = new Set();
|
||||
const saved = new Set();
|
||||
|
||||
proc.on('message', message => {
|
||||
if (!message.__sapper__) return;
|
||||
|
||||
let file = new URL(message.url, origin).pathname.slice(1);
|
||||
let { body } = message;
|
||||
|
||||
if (saved.has(file)) return;
|
||||
saved.add(file);
|
||||
|
||||
const is_html = message.type === 'text/html';
|
||||
|
||||
if (is_html) {
|
||||
file = file === '' ? 'index.html' : `${file}/index.html`;
|
||||
body = minify_html(body);
|
||||
}
|
||||
|
||||
console.log(`${clorox.bold.cyan(file)} ${clorox.gray(`(${prettyBytes(body.length)})`)}`);
|
||||
|
||||
sander.writeFileSync(export_dir, file, body);
|
||||
});
|
||||
|
||||
async function handle(url: URL) {
|
||||
const r = await fetch(url.href);
|
||||
const range = ~~(r.status / 100);
|
||||
|
||||
if (range >= 4) {
|
||||
console.log(`${clorox.red(`> Received ${r.status} response when fetching ${url.pathname}`)}`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (range === 2) {
|
||||
if (r.headers.get('Content-Type') === 'text/html') {
|
||||
const body = await r.text();
|
||||
const $ = cheerio.load(body);
|
||||
const urls: URL[] = [];
|
||||
|
||||
const base = new URL($('base').attr('href') || '/', url.href);
|
||||
|
||||
$('a[href]').each((i: number, $a) => {
|
||||
const url = new URL($a.attribs.href, base.href);
|
||||
|
||||
if (url.origin === origin && !seen.has(url.pathname)) {
|
||||
seen.add(url.pathname);
|
||||
urls.push(url);
|
||||
}
|
||||
});
|
||||
|
||||
for (const url of urls) {
|
||||
await handle(url);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return ports.wait(port)
|
||||
.then(() => handle(new URL(`/${basepath}`, origin))) // TODO all static routes
|
||||
.then(() => proc.kill());
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import * as child_process from 'child_process';
|
||||
import * as clorox from 'clorox';
|
||||
import * as colors from 'ansi-colors';
|
||||
import * as ports from 'port-authority';
|
||||
|
||||
export async function start(dir: string, opts: { port: number, open: boolean }) {
|
||||
@@ -11,13 +11,13 @@ export async function start(dir: string, opts: { port: number, open: boolean })
|
||||
const server = path.resolve(dir, 'server.js');
|
||||
|
||||
if (!fs.existsSync(server)) {
|
||||
console.log(`${clorox.bold.red(`> ${dir}/server.js does not exist — type ${clorox.bold.cyan(dir === 'build' ? `npx sapper build` : `npx sapper build ${dir}`)} to create it`)}`);
|
||||
console.log(`${colors.bold.red(`> ${dir}/server.js does not exist — type ${colors.bold.cyan(dir === 'build' ? `npx sapper build` : `npx sapper build ${dir}`)} to create it`)}`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (port) {
|
||||
if (!await ports.check(port)) {
|
||||
console.log(`${clorox.bold.red(`> Port ${port} is unavailable`)}`);
|
||||
console.log(`${colors.bold.red(`> Port ${port} is unavailable`)}`);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
@@ -34,6 +34,6 @@ export async function start(dir: string, opts: { port: number, open: boolean })
|
||||
});
|
||||
|
||||
await ports.wait(port);
|
||||
console.log(`${clorox.bold.cyan(`> Listening on http://localhost:${port}`)}`);
|
||||
console.log(`${colors.bold.cyan(`> Listening on http://localhost:${port}`)}`);
|
||||
if (opts.open) child_process.exec(`open http://localhost:${port}`);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import * as fs from 'fs';
|
||||
import * as clorox from 'clorox';
|
||||
import * as colors from 'ansi-colors';
|
||||
|
||||
export default async function upgrade() {
|
||||
const upgraded = [
|
||||
@@ -27,10 +27,10 @@ async function upgrade_sapper_main() {
|
||||
|
||||
if (/\%sapper\.main\%/.test(template)) {
|
||||
if (!pattern.test(template)) {
|
||||
console.log(`${clorox.red(`Could not replace %sapper.main% in ${file}`)}`);
|
||||
console.log(`${colors.red(`Could not replace %sapper.main% in ${file}`)}`);
|
||||
} else {
|
||||
write(file, template.replace(pattern, `%sapper.scripts%`));
|
||||
console.log(`${clorox.green(`Replaced %sapper.main% in ${file}`)}`);
|
||||
console.log(`${colors.green(`Replaced %sapper.main% in ${file}`)}`);
|
||||
replaced = true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
import * as path from 'path';
|
||||
import relative from 'require-relative';
|
||||
|
||||
export default function create_compilers() {
|
||||
const webpack = relative('webpack', process.cwd());
|
||||
export default function create_compilers({ webpack }: { webpack: string }) {
|
||||
const wp = relative('webpack', process.cwd());
|
||||
|
||||
const serviceworker_config = try_require(path.resolve('webpack/service-worker.config.js'));
|
||||
const serviceworker_config = try_require(path.resolve(`${webpack}/service-worker.config.js`));
|
||||
|
||||
return {
|
||||
client: webpack(
|
||||
require(path.resolve('webpack/client.config.js'))
|
||||
client: wp(
|
||||
require(path.resolve(`${webpack}/client.config.js`))
|
||||
),
|
||||
|
||||
server: webpack(
|
||||
require(path.resolve('webpack/server.config.js'))
|
||||
server: wp(
|
||||
require(path.resolve(`${webpack}/server.config.js`))
|
||||
),
|
||||
|
||||
serviceworker: serviceworker_config && webpack(serviceworker_config)
|
||||
serviceworker: serviceworker_config && wp(serviceworker_config)
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import * as glob from 'glob';
|
||||
import create_routes from './create_routes';
|
||||
import { posixify, write_if_changed } from './utils';
|
||||
import { dev, locations } from '../config';
|
||||
import { Route } from '../interfaces';
|
||||
@@ -53,8 +52,8 @@ function generate_client(routes: Route[], path_to_routes: string, dev_port?: num
|
||||
|
||||
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 (route.id === '_error') {
|
||||
return `{ error: true, load: () => import(/* webpackChunkName: "${route.id}" */ '${file}') }`;
|
||||
}
|
||||
|
||||
const params = route.params.length === 0
|
||||
@@ -108,8 +107,8 @@ function generate_server(routes: Route[], path_to_routes: string) {
|
||||
`{ type: '${type}', module: ${route.id}${index} }`)
|
||||
.join(', ');
|
||||
|
||||
if (route.id === '_4xx' || route.id === '_5xx') {
|
||||
return `{ error: '${route.id.slice(1)}', handlers: [${handlers}] }`;
|
||||
if (route.id === '_error') {
|
||||
return `{ error: true, handlers: [${handlers}] }`;
|
||||
}
|
||||
|
||||
const params = route.params.length === 0
|
||||
|
||||
@@ -5,17 +5,22 @@ 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))
|
||||
.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`);
|
||||
}
|
||||
|
||||
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 (parts[parts.length - 1] === 'index') parts.pop();
|
||||
if (/^index(\..+)?/.test(parts[parts.length - 1])) {
|
||||
const part = parts.pop();
|
||||
if (parts.length > 0) parts[parts.length - 1] += part.slice(5);
|
||||
}
|
||||
|
||||
return {
|
||||
files: [file],
|
||||
@@ -30,12 +35,10 @@ export default function create_routes({ files } = { files: glob.sync('**/*.*', {
|
||||
return !found;
|
||||
})
|
||||
.sort((a, b) => {
|
||||
const max = Math.max(a.parts.length, b.parts.length);
|
||||
if (a.parts[0] === '_error') return -1;
|
||||
if (b.parts[0] === '_error') return 1;
|
||||
|
||||
if (max === 1) {
|
||||
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];
|
||||
@@ -65,6 +68,23 @@ export default function create_routes({ files } = { files: glob.sync('**/*.*', {
|
||||
(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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -76,10 +96,18 @@ export default function create_routes({ files } = { files: glob.sync('**/*.*', {
|
||||
) || '_';
|
||||
|
||||
const params: string[] = [];
|
||||
const param_pattern = /\[([^\]]+)\]/g;
|
||||
const match_patterns: object = {};
|
||||
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
|
||||
@@ -92,7 +120,13 @@ export default function create_routes({ files } = { files: glob.sync('**/*.*', {
|
||||
const dynamic = ~part.indexOf('[');
|
||||
|
||||
if (dynamic) {
|
||||
const matcher = part.replace(param_pattern, `([^\/]+?)`);
|
||||
// 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 ? `(?:\\/${matcher}${pattern_string})?` : `\\/${matcher}${pattern_string}`;
|
||||
} else {
|
||||
nested = false;
|
||||
@@ -144,7 +178,7 @@ export default function create_routes({ files } = { files: glob.sync('**/*.*', {
|
||||
}
|
||||
|
||||
function get_sub_parts(part: string) {
|
||||
return part.split(/[\[\]]/)
|
||||
return part.split(/\[(.+)\]/)
|
||||
.map((content, i) => {
|
||||
if (!content) return null;
|
||||
return {
|
||||
|
||||
@@ -1,16 +1,12 @@
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import { resolve, URL } from 'url';
|
||||
import { URL } from 'url';
|
||||
import { ClientRequest, ServerResponse } from 'http';
|
||||
import cookie from 'cookie';
|
||||
import mkdirp from 'mkdirp';
|
||||
import rimraf from 'rimraf';
|
||||
import devalue from 'devalue';
|
||||
import fetch from 'node-fetch';
|
||||
import { lookup } from './middleware/mime';
|
||||
import { create_routes, create_compilers } from './core';
|
||||
import { locations, dev } from './config';
|
||||
import { Route, Template } from './interfaces';
|
||||
import sourceMapSupport from 'source-map-support';
|
||||
|
||||
sourceMapSupport.install();
|
||||
@@ -20,14 +16,7 @@ type RouteObject = {
|
||||
type: 'page' | 'route';
|
||||
pattern: RegExp;
|
||||
params: (match: RegExpMatchArray) => Record<string, string>;
|
||||
module: {
|
||||
render: (data: any, opts: { store: Store }) => {
|
||||
head: string;
|
||||
css: { code: string, map: any };
|
||||
html: string
|
||||
},
|
||||
preload: (data: any) => any | Promise<any>
|
||||
};
|
||||
module: Component;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
@@ -47,22 +36,51 @@ interface Req extends ClientRequest {
|
||||
headers: Record<string, string>;
|
||||
}
|
||||
|
||||
export default function middleware({ routes, store }: {
|
||||
interface Component {
|
||||
render: (data: any, opts: { store: Store }) => {
|
||||
head: string;
|
||||
css: { code: string, map: any };
|
||||
html: string
|
||||
},
|
||||
preload: (data: any) => any | Promise<any>
|
||||
}
|
||||
|
||||
export default function middleware({ App, routes, store }: {
|
||||
App: Component,
|
||||
routes: RouteObject[],
|
||||
store: (req: Req) => Store
|
||||
}) {
|
||||
if (!App) {
|
||||
throw new Error(`As of 0.12, you must supply an App component to Sapper — see https://sapper.svelte.technology/guide#0-11-to-0-12 for more information`);
|
||||
}
|
||||
|
||||
const output = locations.dest();
|
||||
|
||||
const client_info = JSON.parse(fs.readFileSync(path.join(output, 'client_info.json'), 'utf-8'));
|
||||
let emitted_basepath = false;
|
||||
|
||||
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)
|
||||
: '';
|
||||
}
|
||||
|
||||
if (!emitted_basepath && process.send) {
|
||||
process.send({
|
||||
__sapper__: true,
|
||||
event: 'basepath',
|
||||
basepath: req.baseUrl
|
||||
});
|
||||
|
||||
emitted_basepath = true;
|
||||
}
|
||||
|
||||
if (req.path === undefined) {
|
||||
req.path = req.url.replace(/\?.*/, '');
|
||||
}
|
||||
@@ -90,7 +108,7 @@ export default function middleware({ routes, store }: {
|
||||
cache_control: 'max-age=31536000'
|
||||
}),
|
||||
|
||||
get_route_handler(client_info.assets, routes, store)
|
||||
get_route_handler(App, routes, store)
|
||||
].filter(Boolean));
|
||||
|
||||
return middleware;
|
||||
@@ -133,24 +151,41 @@ function serve({ prefix, pathname, cache_control }: {
|
||||
};
|
||||
}
|
||||
|
||||
const resolved = Promise.resolve();
|
||||
function get_route_handler(App: Component, routes: RouteObject[], store_getter: (req: Req) => Store) {
|
||||
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')));
|
||||
|
||||
function get_route_handler(chunks: Record<string, string>, routes: RouteObject[], store_getter: (req: Req) => Store) {
|
||||
const template = dev()
|
||||
? () => 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 error_route = routes.find((route: RouteObject) => route.error);
|
||||
|
||||
function handle_route(route: RouteObject, req: Req, res: ServerResponse, status = 200, error: Error | string = null) {
|
||||
req.params = error
|
||||
? {}
|
||||
: route.params(route.pattern.exec(req.path));
|
||||
|
||||
const handlers = route.handlers[Symbol.iterator]();
|
||||
|
||||
function next() {
|
||||
const chunks: Record<string, string> = get_chunks();
|
||||
|
||||
try {
|
||||
const { value: handler, done } = handlers.next();
|
||||
|
||||
if (done) {
|
||||
handle_error(req, res, 404, 'Not found');
|
||||
if (route.error) {
|
||||
// there was an error rendering the error page!
|
||||
res.statusCode = status;
|
||||
res.end(error instanceof Error ? error.message : error);
|
||||
} else {
|
||||
handle_route(error_route, req, res, 404, 'Not found');
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -162,7 +197,7 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
|
||||
// preload main.js and current route
|
||||
// TODO detect other stuff we can preload? images, CSS, fonts?
|
||||
const link = []
|
||||
.concat(chunks.main, chunks[route.id])
|
||||
.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(', ');
|
||||
@@ -170,10 +205,15 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
|
||||
res.setHeader('Link', link);
|
||||
|
||||
const store = store_getter ? store_getter(req) : null;
|
||||
const data = { params: req.params, query: req.query };
|
||||
const props = { params: req.params, query: req.query, path: req.path };
|
||||
|
||||
if (route.error) {
|
||||
props.error = error instanceof Error ? error : { message: error };
|
||||
props.status = status;
|
||||
}
|
||||
|
||||
let redirect: { statusCode: number, location: string };
|
||||
let error: { statusCode: number, message: Error | string };
|
||||
let preload_error: { statusCode: number, message: Error | string };
|
||||
|
||||
Promise.resolve(
|
||||
mod.preload ? mod.preload.call({
|
||||
@@ -181,7 +221,7 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
|
||||
redirect = { statusCode, location };
|
||||
},
|
||||
error: (statusCode: number, message: Error | string) => {
|
||||
error = { statusCode, message };
|
||||
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 + '/' :''}`);
|
||||
@@ -221,7 +261,7 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
|
||||
store
|
||||
}, req) : {}
|
||||
).catch(err => {
|
||||
error = { statusCode: 500, message: err };
|
||||
preload_error = { statusCode: 500, message: err };
|
||||
}).then(preloaded => {
|
||||
if (redirect) {
|
||||
res.statusCode = redirect.statusCode;
|
||||
@@ -231,8 +271,8 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
|
||||
return;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
handle_error(req, res, error.statusCode, error.message);
|
||||
if (preload_error) {
|
||||
handle_route(error_route, req, res, preload_error.statusCode, preload_error.message);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -240,9 +280,9 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
|
||||
preloaded: mod.preload && try_serialize(preloaded),
|
||||
store: store && try_serialize(store.get())
|
||||
};
|
||||
Object.assign(data, preloaded);
|
||||
Object.assign(props, preloaded);
|
||||
|
||||
const { html, head, css } = mod.render(data, {
|
||||
const { html, head, css } = App.render({ Page: mod, props }, {
|
||||
store
|
||||
});
|
||||
|
||||
@@ -270,11 +310,13 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
|
||||
.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,
|
||||
@@ -314,6 +356,7 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
|
||||
|
||||
process.send({
|
||||
__sapper__: true,
|
||||
event: 'file',
|
||||
url: req.url,
|
||||
method: req.method,
|
||||
status: res.statusCode,
|
||||
@@ -344,84 +387,25 @@ function get_route_handler(chunks: Record<string, string>, routes: RouteObject[]
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
handle_error(req, res, 500, error);
|
||||
if (route.error) {
|
||||
// there was an error rendering the error page!
|
||||
res.statusCode = status;
|
||||
res.end(error instanceof Error ? error.message : error);
|
||||
} else {
|
||||
handle_route(error_route, req, res, 500, error || 'Internal server error');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
const not_found = statusCode >= 400 && statusCode < 500;
|
||||
|
||||
const route = not_found
|
||||
? not_found_route
|
||||
: error_route;
|
||||
|
||||
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/${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() {
|
||||
const title: string = not_found
|
||||
? 'Not found'
|
||||
: `Internal server error: ${error.message}`;
|
||||
|
||||
render_page({ head: '', css: null, html: title });
|
||||
}
|
||||
|
||||
if (route) {
|
||||
const handlers = route.handlers[Symbol.iterator]();
|
||||
|
||||
function next() {
|
||||
const { value: handler, done } = handlers.next();
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
next();
|
||||
} else {
|
||||
handle_notfound();
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
handle_error(req, res, 404, 'Not found');
|
||||
handle_route(error_route, req, res, 404, 'Not found');
|
||||
};
|
||||
}
|
||||
|
||||
@@ -445,10 +429,6 @@ function compose_handlers(handlers: Handler[]) {
|
||||
};
|
||||
}
|
||||
|
||||
function read_json(file: string) {
|
||||
return JSON.parse(fs.readFileSync(file, 'utf-8'));
|
||||
}
|
||||
|
||||
function try_serialize(data: any) {
|
||||
try {
|
||||
return devalue(data);
|
||||
|
||||
@@ -3,11 +3,12 @@ import { Component, ComponentConstructor, Params, Query, Route, RouteData, Scrol
|
||||
|
||||
const manifest = typeof window !== 'undefined' && window.__SAPPER__;
|
||||
|
||||
export let App: ComponentConstructor;
|
||||
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) => {},
|
||||
@@ -27,10 +28,10 @@ function select_route(url: URL): Target {
|
||||
if (url.origin !== window.location.origin) return null;
|
||||
if (!url.pathname.startsWith(manifest.baseUrl)) return null;
|
||||
|
||||
const pathname = url.pathname.slice(manifest.baseUrl.length);
|
||||
const path = url.pathname.slice(manifest.baseUrl.length);
|
||||
|
||||
for (const route of routes) {
|
||||
const match = route.pattern.exec(pathname);
|
||||
const match = route.pattern.exec(path);
|
||||
if (match) {
|
||||
if (route.ignore) return null;
|
||||
|
||||
@@ -43,18 +44,24 @@ function select_route(url: URL): Target {
|
||||
query[key] = value || true;
|
||||
})
|
||||
}
|
||||
return { url, route, data: { params, query } };
|
||||
return { url, route, props: { params, query, path } };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let current_token: {};
|
||||
|
||||
function render(Component: ComponentConstructor, data: any, scroll: ScrollPosition, token: {}) {
|
||||
function render(Page: ComponentConstructor, props: any, scroll: ScrollPosition, token: {}) {
|
||||
if (current_token !== token) return;
|
||||
|
||||
const data = {
|
||||
Page,
|
||||
props,
|
||||
preloading: false
|
||||
};
|
||||
|
||||
if (component) {
|
||||
component.destroy();
|
||||
component.set(data);
|
||||
} else {
|
||||
// first load — remove SSR'd <head> contents
|
||||
const start = document.querySelector('#sapper-head-start');
|
||||
@@ -65,33 +72,39 @@ function render(Component: ComponentConstructor, data: any, scroll: ScrollPositi
|
||||
detach(start);
|
||||
detach(end);
|
||||
}
|
||||
}
|
||||
|
||||
component = new Component({
|
||||
target,
|
||||
data,
|
||||
store,
|
||||
hydrate: !component
|
||||
});
|
||||
component = new App({
|
||||
target,
|
||||
data,
|
||||
store,
|
||||
hydrate: true
|
||||
});
|
||||
}
|
||||
|
||||
if (scroll) {
|
||||
window.scrollTo(scroll.x, scroll.y);
|
||||
}
|
||||
}
|
||||
|
||||
function prepare_route(Component: ComponentConstructor, data: RouteData) {
|
||||
function prepare_route(Page: ComponentConstructor, props: RouteData) {
|
||||
let redirect: { statusCode: number, location: string } = null;
|
||||
let error: { statusCode: number, message: Error | string } = null;
|
||||
|
||||
if (!Component.preload) {
|
||||
return { Component, data, redirect, error };
|
||||
if (!Page.preload) {
|
||||
return { Page, props, redirect, error };
|
||||
}
|
||||
|
||||
if (!component && manifest.preloaded) {
|
||||
return { Component, data: Object.assign(data, manifest.preloaded), redirect, error };
|
||||
return { Page, props: Object.assign(props, manifest.preloaded), redirect, error };
|
||||
}
|
||||
|
||||
return Promise.resolve(Component.preload.call({
|
||||
if (component) {
|
||||
component.set({
|
||||
preloading: true
|
||||
});
|
||||
}
|
||||
|
||||
return Promise.resolve(Page.preload.call({
|
||||
store,
|
||||
fetch: (url: string, opts?: any) => window.fetch(url, opts),
|
||||
redirect: (statusCode: number, location: string) => {
|
||||
@@ -100,27 +113,23 @@ function prepare_route(Component: ComponentConstructor, data: RouteData) {
|
||||
error: (statusCode: number, message: Error | string) => {
|
||||
error = { statusCode, message };
|
||||
}
|
||||
}, data)).catch(err => {
|
||||
}, props)).catch(err => {
|
||||
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: Component }: { default: ComponentConstructor }) => {
|
||||
return error_route.load().then(({ default: Page }: { default: ComponentConstructor }) => {
|
||||
const err = error.message instanceof Error ? error.message : new Error(error.message);
|
||||
Object.assign(data, { status: error.statusCode, error: err });
|
||||
return { Component, data, redirect: null };
|
||||
Object.assign(props, { status: error.statusCode, error: err });
|
||||
return { Page, props, redirect: null };
|
||||
});
|
||||
}
|
||||
|
||||
Object.assign(data, preloaded)
|
||||
return { Component, data, redirect };
|
||||
Object.assign(props, preloaded)
|
||||
return { Page, props, redirect };
|
||||
});
|
||||
}
|
||||
|
||||
function navigate(target: Target, id: number) {
|
||||
function navigate(target: Target, id: number): Promise<any> {
|
||||
if (id) {
|
||||
// popstate or initial navigation
|
||||
cid = id;
|
||||
@@ -136,18 +145,19 @@ function navigate(target: Target, id: number) {
|
||||
|
||||
const loaded = prefetching && prefetching.href === target.url.href ?
|
||||
prefetching.promise :
|
||||
target.route.load().then(mod => prepare_route(mod.default, target.data));
|
||||
target.route.load().then(mod => prepare_route(mod.default, target.props));
|
||||
|
||||
prefetching = null;
|
||||
|
||||
const token = current_token = {};
|
||||
|
||||
return loaded.then(({ Component, data, redirect }) => {
|
||||
return loaded.then(({ Page, props, redirect }) => {
|
||||
if (redirect) {
|
||||
return goto(redirect.location, { replaceState: true });
|
||||
}
|
||||
|
||||
render(Component, data, scroll_history[id], token);
|
||||
render(Page, props, scroll_history[id], token);
|
||||
document.activeElement.blur();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -198,7 +208,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;
|
||||
@@ -208,7 +222,7 @@ function handle_popstate(event: PopStateEvent) {
|
||||
|
||||
let prefetching: {
|
||||
href: string;
|
||||
promise: Promise<{ Component: ComponentConstructor, data: any }>;
|
||||
promise: Promise<{ Page: ComponentConstructor, props: any }>;
|
||||
} = null;
|
||||
|
||||
export function prefetch(href: string) {
|
||||
@@ -217,7 +231,7 @@ export function prefetch(href: string) {
|
||||
if (selected && (!prefetching || href !== prefetching.href)) {
|
||||
prefetching = {
|
||||
href,
|
||||
promise: selected.route.load().then(mod => prepare_route(mod.default, selected.data))
|
||||
promise: selected.route.load().then(mod => prepare_route(mod.default, selected.props))
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -240,13 +254,15 @@ function trigger_prefetch(event: MouseEvent | TouchEvent) {
|
||||
|
||||
let inited: boolean;
|
||||
|
||||
export function init(_target: Node, _routes: Route[], opts?: { store?: (data: any) => Store }) {
|
||||
target = _target;
|
||||
routes = _routes.filter(r => !r.error);
|
||||
errors = {
|
||||
'4xx': _routes.find(r => r.error === '4xx'),
|
||||
'5xx': _routes.find(r => r.error === '5xx')
|
||||
};
|
||||
export function init(opts: { App: ComponentConstructor, target: Node, routes: Route[], store?: (data: any) => Store }) {
|
||||
if (opts instanceof HTMLElement) {
|
||||
throw new Error(`The signature of init(...) has changed — see https://sapper.svelte.technology/guide#0-11-to-0-12 for more information`);
|
||||
}
|
||||
|
||||
App = opts.App;
|
||||
target = opts.target;
|
||||
routes = opts.routes.filter(r => !r.error);
|
||||
error_route = opts.routes.find(r => r.error);
|
||||
|
||||
if (opts && opts.store) {
|
||||
store = opts.store(manifest.store);
|
||||
@@ -274,19 +290,23 @@ export function init(_target: Node, _routes: Route[], opts?: { store?: (data: an
|
||||
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[]) {
|
||||
|
||||
@@ -3,11 +3,11 @@ import { Store } from '../interfaces';
|
||||
export { Store };
|
||||
export type Params = Record<string, string>;
|
||||
export type Query = Record<string, string | true>;
|
||||
export type RouteData = { params: Params, query: Query };
|
||||
export type RouteData = { params: Params, query: Query, path: string };
|
||||
|
||||
export interface ComponentConstructor {
|
||||
new (options: { target: Node, data: any, store: Store, hydrate: boolean }): Component;
|
||||
preload: (data: { params: Params, query: Query }) => Promise<any>;
|
||||
preload: (props: { params: Params, query: Query }) => Promise<any>;
|
||||
};
|
||||
|
||||
export interface Component {
|
||||
@@ -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;
|
||||
};
|
||||
@@ -30,5 +30,5 @@ export type ScrollPosition = {
|
||||
export type Target = {
|
||||
url: URL;
|
||||
route: Route;
|
||||
data: RouteData;
|
||||
props: RouteData;
|
||||
};
|
||||
6
test/app/app/App.html
Normal file
6
test/app/app/App.html
Normal file
@@ -0,0 +1,6 @@
|
||||
{#if preloading}
|
||||
<progress class='preloading-progress' value=0.5/>
|
||||
{/if}
|
||||
|
||||
<svelte:component this={Page} {...props}/>
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
import { init, prefetchRoutes } from '../../../runtime.js';
|
||||
import { Store } from 'svelte/store.js';
|
||||
import { routes } from './manifest/client.js';
|
||||
import App from './App.html';
|
||||
|
||||
window.init = () => {
|
||||
return init(document.querySelector('#sapper'), routes, {
|
||||
return init({
|
||||
target: document.querySelector('#sapper'),
|
||||
App,
|
||||
routes,
|
||||
store: data => new Store(data)
|
||||
});
|
||||
};
|
||||
|
||||
@@ -5,6 +5,7 @@ import serve from 'serve-static';
|
||||
import sapper from '../../../dist/middleware.ts.js';
|
||||
import { Store } from 'svelte/store.js';
|
||||
import { routes } from './manifest/server.js';
|
||||
import App from './App.html'
|
||||
|
||||
let pending;
|
||||
let ended;
|
||||
@@ -86,6 +87,7 @@ const middlewares = [
|
||||
},
|
||||
|
||||
sapper({
|
||||
App,
|
||||
routes,
|
||||
store: () => {
|
||||
return new Store({
|
||||
|
||||
@@ -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 {
|
||||
@@ -133,6 +133,7 @@ function run({ mode, basepath = '' }) {
|
||||
let capture;
|
||||
|
||||
let base;
|
||||
let captured_basepath;
|
||||
|
||||
const nightmare = new Nightmare();
|
||||
|
||||
@@ -179,7 +180,13 @@ function run({ mode, basepath = '' }) {
|
||||
let handler;
|
||||
|
||||
proc.on('message', message => {
|
||||
if (message.__sapper__) return;
|
||||
if (message.__sapper__) {
|
||||
if (message.event === 'basepath') {
|
||||
captured_basepath = basepath;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (handler) handler(message);
|
||||
});
|
||||
|
||||
@@ -274,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?');
|
||||
@@ -434,7 +439,7 @@ function run({ mode, basepath = '' }) {
|
||||
})
|
||||
.then(() => nightmare.page.title())
|
||||
.then(title => {
|
||||
assert.equal(title, 'Not found')
|
||||
assert.equal(title, '404')
|
||||
});
|
||||
});
|
||||
|
||||
@@ -449,7 +454,7 @@ function run({ mode, basepath = '' }) {
|
||||
})
|
||||
.then(() => nightmare.page.title())
|
||||
.then(title => {
|
||||
assert.equal(title, 'Not found');
|
||||
assert.equal(title, '404');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -461,7 +466,7 @@ function run({ mode, basepath = '' }) {
|
||||
})
|
||||
.then(() => nightmare.page.title())
|
||||
.then(title => {
|
||||
assert.equal(title, 'Internal server error')
|
||||
assert.equal(title, '500')
|
||||
});
|
||||
});
|
||||
|
||||
@@ -476,7 +481,7 @@ function run({ mode, basepath = '' }) {
|
||||
})
|
||||
.then(() => nightmare.page.title())
|
||||
.then(title => {
|
||||
assert.equal(title, 'Internal server error');
|
||||
assert.equal(title, '500');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -574,6 +579,46 @@ function run({ mode, basepath = '' }) {
|
||||
assert.ok(html.indexOf('service-worker.js') !== -1);
|
||||
});
|
||||
});
|
||||
|
||||
it('sets preloading true when appropriate', () => {
|
||||
return nightmare
|
||||
.goto(base)
|
||||
.init()
|
||||
.click('a[href="slow-preload"]')
|
||||
.wait(100)
|
||||
.evaluate(() => {
|
||||
const progress = document.querySelector('progress');
|
||||
return !!progress;
|
||||
})
|
||||
.then(hasProgressIndicator => {
|
||||
assert.ok(hasProgressIndicator);
|
||||
})
|
||||
.then(() => nightmare.evaluate(() => window.fulfil()))
|
||||
.then(() => nightmare.evaluate(() => {
|
||||
const progress = document.querySelector('progress');
|
||||
return !!progress;
|
||||
}))
|
||||
.then(hasProgressIndicator => {
|
||||
assert.ok(!hasProgressIndicator);
|
||||
});
|
||||
});
|
||||
|
||||
it('emits a 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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('headers', () => {
|
||||
|
||||
@@ -45,7 +45,17 @@ 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']
|
||||
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(
|
||||
@@ -56,6 +66,7 @@ describe('create_routes', () => {
|
||||
'post/bar.html',
|
||||
'post/foo.html',
|
||||
'post/f[xx].html',
|
||||
'post/[id([0-9-a-z]{3,})].html', // RegExp is more specific
|
||||
'post/[id].json.js',
|
||||
'post/[id].html',
|
||||
'[wildcard].html'
|
||||
@@ -63,6 +74,25 @@ describe('create_routes', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('distinguishes and sorts regexp routes correctly', () => {
|
||||
const routes = create_routes({
|
||||
files: [
|
||||
'[slug].html',
|
||||
'[slug([a-z]{2})].html',
|
||||
'[slug([0-9-a-z]{3,})].html',
|
||||
]
|
||||
});
|
||||
|
||||
assert.deepEqual(
|
||||
routes.map(r => r.handlers[0].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({
|
||||
files: [
|
||||
@@ -71,8 +101,7 @@ describe('create_routes', () => {
|
||||
'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',
|
||||
@@ -83,8 +112,7 @@ describe('create_routes', () => {
|
||||
assert.deepEqual(
|
||||
routes.map(r => r.handlers[0].file),
|
||||
[
|
||||
'4xx.html',
|
||||
'5xx.html',
|
||||
'_error.html',
|
||||
'index.html',
|
||||
'guide/index.html',
|
||||
'blog/index.html',
|
||||
@@ -99,8 +127,7 @@ describe('create_routes', () => {
|
||||
|
||||
routes = create_routes({
|
||||
files: [
|
||||
'4xx.html',
|
||||
'5xx.html',
|
||||
'_error.html',
|
||||
'api/blog/[slug].js',
|
||||
'api/blog/index.js',
|
||||
'api/guide/contents.js',
|
||||
@@ -119,8 +146,7 @@ describe('create_routes', () => {
|
||||
assert.deepEqual(
|
||||
routes.map(r => r.handlers[0].file),
|
||||
[
|
||||
'4xx.html',
|
||||
'5xx.html',
|
||||
'_error.html',
|
||||
'index.html',
|
||||
'guide/index.html',
|
||||
'blog/index.html',
|
||||
@@ -135,6 +161,24 @@ describe('create_routes', () => {
|
||||
'api/blog/[slug].js',
|
||||
]
|
||||
);
|
||||
|
||||
// RegExp routes
|
||||
routes = create_routes({
|
||||
files: [
|
||||
'blog/[slug].html',
|
||||
'blog/index.html',
|
||||
'blog/[slug([^0-9]+)].html',
|
||||
]
|
||||
});
|
||||
|
||||
assert.deepEqual(
|
||||
routes.map(r => r.handlers[0].file),
|
||||
[
|
||||
'blog/index.html',
|
||||
'blog/[slug([^0-9]+)].html',
|
||||
'blog/[slug].html',
|
||||
]
|
||||
);
|
||||
});
|
||||
|
||||
it('generates params', () => {
|
||||
@@ -208,8 +252,15 @@ 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']
|
||||
@@ -284,4 +335,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']
|
||||
})[0];
|
||||
|
||||
assert.ok(route.test('/foo.json'));
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user