Compare commits

..

104 Commits

Author SHA1 Message Date
Rich Harris
b75ae7ba96 -> v0.14.2 2018-07-14 21:05:39 -04:00
Rich Harris
091e38082e Merge pull request #307 from sveltejs/unsafe-replacements
prevent unsafe replacements of preloaded data etc
2018-07-15 02:05:20 +01:00
Rich Harris
74acf93c7a prevent unsafe replacements of preloaded data etc 2018-07-14 20:56:05 -04:00
Rich Harris
0e3775397f Merge pull request #306 from sveltejs/refactor-route-generation
Refactor route generation
2018-07-05 08:25:59 -04:00
Rich Harris
8dc52a04e4 split pages and server routes into separate arrays 2018-07-05 08:14:07 -04:00
Rich Harris
008b607c01 generate pages and server routes separately 2018-07-04 10:53:41 -04:00
Rich Harris
d01a407137 -> v0.14.1 2018-07-02 10:24:54 -04:00
Rich Harris
c0c717d9ec Merge pull request #283 from elcobvg/feature/route-regexp
Feature: use regexp in routes
2018-07-02 10:23:30 -04:00
Elco Brouwer von Gonzenbach
4f011bfc37 Convert whitespace to tabs. Add some unit tests for create routes 2018-07-02 11:52:17 +07:00
Elco Brouwer von Gonzenbach
6c4ab32cf0 Sync update to sapper 0.14.0 2018-06-29 06:57:01 +07:00
Rich Harris
09b4dc1b9a -> v0.14.0 2018-06-28 13:35:21 -04:00
Rich Harris
bdd5a54527 Merge pull request #301 from sveltejs/gh-297
treat foo/index.json.js as foo.json.js
2018-06-28 13:27:57 -04:00
Rich Harris
b7bb4db8c1 treat foo/index.json.js as foo.json.js - fixes #297 2018-06-28 13:20:41 -04:00
Rich Harris
5b5f33d3cf error on 4xx.html and 5xx.html 2018-06-28 12:57:59 -04:00
Rich Harris
9611656b76 Merge pull request #300 from sveltejs/gh-293
[WIP] simplify rendering of error pages
2018-06-28 12:52:41 -04:00
Rich Harris
e9a71774d5 Merge pull request #299 from sveltejs/gh-270
return a Promise from goto
2018-06-28 12:18:32 -04:00
Rich Harris
2205b8aec5 oops 2018-06-28 12:03:27 -04:00
Rich Harris
5c4e4d5d36 only navigate if route is found - fixes #279 2018-06-28 11:45:38 -04:00
Rich Harris
e87247493f replace 4xx.html and 5xx.html with _error.html 2018-06-28 11:38:21 -04:00
Rich Harris
0aeb63a05b simplify rendering of error pages 2018-06-27 18:35:41 -04:00
Rich Harris
57eeb5659a return a Promise from goto - fixes #270 2018-06-27 17:32:20 -04:00
Rich Harris
f821c19528 -> v0.13.6 2018-06-27 17:20:45 -04:00
Rich Harris
b9a120164a Merge pull request #298 from sveltejs/gh-296
fix req.baseUrl synthesis
2018-06-27 17:19:55 -04:00
Rich Harris
087356f781 fix req.baseUrl synthesis 2018-06-27 16:57:04 -04:00
Rich Harris
31110a5326 -> v0.13.5 2018-06-26 18:30:46 -04:00
Rich Harris
667a68768c Merge pull request #294 from sveltejs/gh-289
fix handling of fatal errors
2018-06-26 18:29:56 -04:00
Rich Harris
5075981a90 fix handling of fatal errors - fixes #289 2018-06-26 13:49:11 -04:00
Rich Harris
611dc4f6be -> v0.13.4 2018-06-18 22:45:51 -04:00
Rich Harris
0b43eaa992 blur active element on navigation - fixes #287 2018-06-18 22:44:55 -04:00
Rich Harris
47cdc1c4c8 wait until server restarts before emitting hot reload update 2018-06-18 22:31:10 -04:00
Rich Harris
31c071ad72 Merge branch 'master' of github.com:sveltejs/sapper 2018-06-18 12:22:42 -04:00
Rich Harris
e91edaee12 Merge pull request #286 from sveltejs/invalidate-client-assets
always refresh client_assets in dev
2018-06-18 12:22:37 -04:00
Rich Harris
34c1fee5db Merge branch 'master' of github.com:sveltejs/sapper 2018-06-17 13:02:13 -04:00
Rich Harris
5375422633 Merge pull request #285 from sveltejs/event-on-exit
emit a fatal event if server crashes
2018-06-17 13:02:03 -04:00
Rich Harris
1dafe934b0 initialise rebuild stats 2018-06-17 13:01:51 -04:00
Rich Harris
e1a33c6a9b always refresh client_assets in dev 2018-06-17 13:00:27 -04:00
Rich Harris
0800fa016b emit a fatal event if server crashes 2018-06-16 20:18:32 -04:00
Rich Harris
8f3454c3b1 -> v0.13.3 2018-06-16 13:49:44 -04:00
Rich Harris
f0d7a1aaab change fatal events to be clonable, for IPC purposes 2018-06-16 13:49:19 -04:00
Rich Harris
8240595d70 -> v0.13.2 2018-06-15 10:58:55 -04:00
Rich Harris
658d8dd50c Merge pull request #284 from sveltejs/emit-basepath
Emit basepath event
2018-06-15 10:57:04 -04:00
Rich Harris
9eeeaa24c1 emit a basepath event on first run 2018-06-14 17:20:46 -04:00
Rich Harris
9c4a3592ff remove some unused code 2018-06-14 16:34:16 -04:00
Elco Brouwer von Gonzenbach
0e2c2ca101 Correct errors in param pattern and matching patterns 2018-06-13 10:00:39 +07:00
Elco Brouwer von Gonzenbach
8015be8069 Correct spacing 2018-06-12 09:15:54 +07:00
Elco Brouwer von Gonzenbach
e39ad59589 Add regexp option to routes 2018-06-12 09:11:54 +07:00
Rich Harris
be7cff4818 -> v0.13.1 2018-06-05 14:41:12 -04:00
Rich Harris
d6632cf312 Merge pull request #281 from sveltejs/gh-276
reinstate ten second interval between heartbeats
2018-06-05 20:40:17 +02:00
Rich Harris
f6e012ec73 reinstate ten second interval between heartbeats - fixes #276 2018-06-05 14:35:37 -04:00
Rich Harris
087acd5765 -> v0.13.0 2018-05-28 19:49:40 -04:00
Rich Harris
43bf6e8d8a Merge pull request #273 from sveltejs/gh-272
[WIP] expose dev, build, export APIs
2018-05-28 19:47:08 -04:00
Rich Harris
78be6aa343 add api.js 2018-05-28 18:04:18 -04:00
Rich Harris
8ba57969c2 oops 2018-05-26 12:39:44 -04:00
Rich Harris
58d2f605fc expose find_page method 2018-05-26 12:31:52 -04:00
Rich Harris
e0b4319c7d preserve webpack stats, write client assets elsewhere 2018-05-26 12:31:43 -04:00
Rich Harris
98d0df4320 work around webpack silliness 2018-05-23 22:05:40 -04:00
Rich Harris
6aa3ce4f05 make stdout etc available via api 2018-05-23 21:56:35 -04:00
Rich Harris
046db325f1 update deps 2018-05-23 20:41:48 -04:00
Rich Harris
1a4bace5f4 add dev API 2018-05-23 09:05:24 -04:00
Rich Harris
0dbf75f100 create API for exporting 2018-05-22 11:57:24 -04:00
Rich Harris
4f49fd8d5c create build API 2018-05-22 11:32:06 -04:00
Rich Harris
86f71e1faf Merge pull request #268 from lukeed/dep/colors
Update colors dep
2018-05-22 08:01:23 -04:00
Luke Edwards
147e2c64b5 update webpack-format-messages 2018-05-17 13:03:25 -07:00
Luke Edwards
9063057b0c swap clorox —> ansi-colors 2018-05-15 09:00:55 -07:00
Rich Harris
25f0d94595 -> v0.12.0 2018-05-05 10:00:58 -04:00
Rich Harris
8155df2e22 Merge branch 'gh-157' 2018-05-05 09:58:12 -04:00
Rich Harris
bb51470004 Merge pull request #259 from sveltejs/gh-157
switch to single App component model
2018-05-05 09:57:28 -04:00
Rich Harris
53446e2ec7 Merge branch 'master' into gh-157 2018-05-05 09:45:04 -04:00
Rich Harris
c4c09550eb Merge pull request #260 from sveltejs/another-sorting-bug
fix sorting
2018-05-05 09:43:16 -04:00
Rich Harris
da47fdec96 fix sorting 2018-05-05 09:38:24 -04:00
Rich Harris
971342ac7a set preloading: true when appropriate 2018-05-04 23:23:41 -04:00
Rich Harris
3becc1cbe2 error on incorrect init args 2018-05-04 23:06:10 -04:00
Rich Harris
8ee5346900 switch to single App component model (#157) 2018-05-04 22:46:41 -04:00
Rich Harris
9e4b79c6ff Merge pull request #258 from sveltejs/gh-208
exit with code 1 if build/export fails
2018-05-04 17:48:29 -04:00
Rich Harris
4ec1c65395 exit with code 1 if build/export fails - fixes #208 2018-05-04 17:42:37 -04:00
Rich Harris
c743d11b3b -> v0.11.1 2018-05-04 17:22:34 -04:00
Rich Harris
b525eb6480 get tests passing 2018-05-04 17:19:39 -04:00
Rich Harris
210d03fb06 Merge branch 'collision' of https://github.com/akihikodaki/sapper into akihikodaki-collision 2018-05-04 17:08:55 -04:00
Rich Harris
0685cc4cbe Merge branch 'master' of github.com:sveltejs/sapper 2018-05-04 17:08:47 -04:00
Rich Harris
9e2d0a7fbc Merge branch 'master' into collision 2018-05-04 17:05:18 -04:00
Rich Harris
a751a3b731 Merge pull request #254 from akihikodaki/dot_strict
Ignore files and directories with leading dots except .well-known
2018-05-04 17:04:27 -04:00
Rich Harris
bc7faeeab9 remove unused esm package 2018-05-04 16:55:57 -04:00
Rich Harris
a88c1de2f6 Merge pull request #256 from johnmuhl/esm
replace discontinued @std/esm package with esm
2018-05-04 16:53:35 -04:00
john muhl
a231795c4c replace discontinued @std/esm package with esm 2018-05-04 13:56:17 -05:00
Akihiko Odaki
ba7525c676 Ignore files and directories with leading dots except .well-known 2018-05-04 22:18:23 +09:00
Rich Harris
4843e9a40a -> v0.11.0 2018-05-03 23:51:04 -04:00
Rich Harris
ca4a1ca9b0 Merge pull request #251 from sveltejs/client-info
only save the bits of client_info we need
2018-05-03 23:49:30 -04:00
Rich Harris
ad7c872ee3 Merge pull request #250 from sveltejs/gh-240
implement --launcher
2018-05-03 23:49:06 -04:00
Rich Harris
4f98324a8a oops, missed one 2018-05-03 23:46:41 -04:00
Rich Harris
1fcf3f79ee only save the bits of client_info we need 2018-05-03 23:42:19 -04:00
Rich Harris
0b5741194a Merge pull request #205 from sveltejs/gh-140
prefetch on mouse stop
2018-05-03 23:31:08 -04:00
Rich Harris
9653d4c6ce Merge pull request #249 from sveltejs/gh-241
allow process.env.NODE_ENV to be overridden when building
2018-05-03 23:30:55 -04:00
Rich Harris
4fa5ed5e2c simplify 2018-05-03 23:30:09 -04:00
Rich Harris
f4eac2515f fix tests 2018-05-03 23:23:02 -04:00
Rich Harris
1a5364ae9d on second thoughts, default to build/index.js 2018-05-03 23:16:56 -04:00
Rich Harris
d7a9074c69 implement --launcher 2018-05-03 23:04:05 -04:00
Rich Harris
00adb53802 allow process.env.NODE_ENV to be overridden when building (#241) 2018-05-03 22:21:00 -04:00
Rich Harris
b10edddc96 cheat 2018-05-03 22:01:14 -04:00
Rich Harris
93b2d12438 Merge branch 'master' into gh-140 2018-05-03 21:54:52 -04:00
Rich Harris
7303e811be update tests, move test app to v2 2018-05-03 21:54:23 -04:00
Rich Harris
992d89027d Merge branch 'master' into collision 2018-05-03 21:44:28 -04:00
Akihiko Odaki
917dd60cc3 Allow to have middleware for the path same with a HTML page
HTTP allows to change the type of the content to serve by Accept field in
the request. The middleware for the path same with a HTML page will
be inserted before the HTML renderer, and can take advantage of this
feature, using expressjs's "accepts" method, for example.
2018-04-15 23:11:08 +09:00
Rich Harris
a6b1527fd3 try using mousemove in tests 2018-03-18 21:53:13 -04:00
Rich Harris
c2f3a2aac0 prefetch on mouse stop (#140) 2018-03-18 21:41:47 -04:00
43 changed files with 1821 additions and 1012 deletions

View File

@@ -1,5 +1,70 @@
# sapper changelog
## 0.14.2
* Prevent unsafe replacements ([#307](https://github.com/sveltejs/sapper/pull/307))
## 0.14.1
* Route parameters can be qualified with regex characters ([#283](https://github.com/sveltejs/sapper/pull/283))
## 0.14.0
* `4xx.html` and `5xx.html` are replaced with `_error.html` ([#209](https://github.com/sveltejs/sapper/issues/209))
* Treat `foo/index.json.js` and `foo.json.js` as equivalents ([#297](https://github.com/sveltejs/sapper/issues/297))
* Return a promise from `goto` ([#270](https://github.com/sveltejs/sapper/issues/270))
* Use store when rendering error pages ([#293](https://github.com/sveltejs/sapper/issues/293))
* Prevent console errors when visiting an error page ([#279](https://github.com/sveltejs/sapper/issues/279))
## 0.13.6
* Fix `baseUrl` synthesis ([#296](https://github.com/sveltejs/sapper/issues/296))
## 0.13.5
* Fix handling of fatal errors ([#289](https://github.com/sveltejs/sapper/issues/289))
## 0.13.4
* Focus `<body>` after navigation ([#287](https://github.com/sveltejs/sapper/issues/287))
* Fix timing of hot reload updates
* Emit `fatal` event if server crashes ([#285](https://github.com/sveltejs/sapper/pull/285))
* Emit `stdout` and `stderr` events on dev watcher ([#285](https://github.com/sveltejs/sapper/pull/285))
* Always refresh client assets in dev ([#286](https://github.com/sveltejs/sapper/pull/286))
* Correctly initialise rebuild stats
## 0.13.3
* Make `fatal` events clonable for IPC purposes
## 0.13.2
* 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))
* Allow server routes to sit in front of pages ([#236](https://github.com/sveltejs/sapper/pull/236))
## 0.11.0
* Create launcher file ([#240](https://github.com/sveltejs/sapper/issues/240))
* Only keep necessary parts of webpack stats ([#251](https://github.com/sveltejs/sapper/pull/251))
* Allow `NODE_ENV` to be overridden when building ([#241](https://github.com/sveltejs/sapper/issues/241))
## 0.10.7
* Allow routes to have a leading `.` ([#243](https://github.com/sveltejs/sapper/pull/243))

1
api.js Normal file
View File

@@ -0,0 +1 @@
module.exports = require('./dist/api.ts.js');

View File

@@ -1,6 +1,6 @@
{
"name": "sapper",
"version": "0.10.7",
"version": "0.14.2",
"description": "Military-grade apps, engineered by Svelte",
"main": "dist/middleware.ts.js",
"bin": {
@@ -18,53 +18,50 @@
"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.4",
"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": {
"@std/esm": "^0.25.3",
"@types/glob": "^5.0.34",
"@types/mkdirp": "^0.5.2",
"@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",
"get-port": "^3.2.0",
"mocha": "^5.0.4",
"mocha": "^5.2.0",
"nightmare": "^3.0.0",
"npm-run-all": "^4.1.2",
"polka": "^0.3.4",
"rollup": "^0.57.0",
"rollup-plugin-commonjs": "^9.1.0",
"rollup-plugin-json": "^2.3.0",
"npm-run-all": "^4.1.3",
"polka": "^0.4.0",
"rollup": "^0.59.2",
"rollup-plugin-commonjs": "^9.1.3",
"rollup-plugin-json": "^3.0.0",
"rollup-plugin-string": "^2.0.2",
"rollup-plugin-typescript": "^0.8.1",
"serve-static": "^1.13.2",
"svelte": "^1.57.4",
"svelte-loader": "^2.5.1",
"ts-node": "^5.0.1",
"typescript": "^2.6.2",
"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",

View File

@@ -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
View 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
View 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
View 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('', '') // careful — there is a special character at the beginning of this string
.replace('', '')
.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
View 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
View 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
View 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 = {}

View File

@@ -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';
@@ -21,10 +21,12 @@ prog.command('dev')
prog.command('build [dest]')
.describe('Create a production-ready version of your app')
.action(async (dest = 'build') => {
.option('-p, --port', 'Default of process.env.PORT', '3000')
.example(`build custom-dir -p 4567`)
.action(async (dest = 'build', opts: { port: string }) => {
console.log(`> Building...`);
process.env.NODE_ENV = 'production';
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
process.env.SAPPER_DEST = dest;
const start = Date.now();
@@ -32,9 +34,23 @@ prog.command('build [dest]')
try {
const { build } = await import('./cli/build');
await build();
console.error(`\n> Finished in ${elapsed(start)}. Type ${clorox.bold.cyan(dest === 'build' ? 'npx sapper start' : `npx sapper start ${dest}`)} to run the app.`);
const launcher = path.resolve(dest, 'index.js');
fs.writeFileSync(launcher, `
// generated by sapper build at ${new Date().toISOString()}
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
process.env.SAPPER_DEST = __dirname;
process.env.PORT = process.env.PORT || ${opts.port || 3000};
console.log('Starting server on port ' + process.env.PORT);
require('./server.js');
`.replace(/^\t+/gm, '').trim());
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);
}
});
@@ -65,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);
}
});
@@ -77,4 +94,4 @@ prog.parse(process.argv);
function elapsed(start: number) {
return prettyMs(Date.now() - start);
}
}

View File

@@ -1,76 +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(client_stats.toJson()));
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);
}
});
}
}

View File

@@ -1,321 +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(info, 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);
});
}
}

View File

@@ -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());
}
}

View File

@@ -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}`);
}
}

View File

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

View File

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

View File

@@ -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';
@@ -33,36 +32,42 @@ export function create_serviceworker_manifest({ routes, client_files }: {
export const shell = [\n\t${client_files.map((x: string) => `"${x}"`).join(',\n\t')}\n];
export const routes = [\n\t${routes.filter((r: Route) => r.type === 'page' && !/^_[45]xx$/.test(r.id)).map((r: Route) => `{ pattern: ${r.pattern} }`).join(',\n\t')}\n];
export const routes = [\n\t${routes.pages.filter(r => r.id !== '_error').map((r: Route) => `{ pattern: ${r.pattern} }`).join(',\n\t')}\n];
`.replace(/^\t\t/gm, '').trim();
write_if_changed(`${locations.app()}/manifest/service-worker.js`, code);
}
function generate_client(routes: Route[], path_to_routes: string, dev_port?: number) {
const page_ids = new Set(routes.pages.map(page => page.id));
const server_routes_to_ignore = routes.server_routes.filter(route => !page_ids.has(route.id));
const pages = routes.pages.filter(page => page.id !== '_error');
const error_route = routes.pages.find(page => page.id === '_error');
let code = `
// This file is generated by Sapper — do not edit it!
export const routes = [
${routes
.map(route => {
if (route.type !== 'page') {
return `{ pattern: ${route.pattern}, ignore: true }`;
export const routes = {
ignore: [${server_routes_to_ignore.map(route => route.pattern).join(', ')}],
pages: [
${pages.map(page => {
const file = posixify(`${path_to_routes}/${page.file}`);
if (page.id === '_error') {
return `{ error: true, load: () => import(/* webpackChunkName: "${page.id}" */ '${file}') }`;
}
const file = posixify(`${path_to_routes}/${route.file}`);
if (route.id === '_4xx' || route.id === '_5xx') {
return `{ error: '${route.id.slice(1)}', load: () => import(/* webpackChunkName: "${route.id}" */ '${file}') }`;
}
const params = route.params.length === 0
const params = page.params.length === 0
? '{}'
: `{ ${route.params.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;
: `{ ${page.params.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;
return `{ pattern: ${route.pattern}, params: ${route.params.length > 0 ? `match` : `()`} => (${params}), load: () => import(/* webpackChunkName: "${route.id}" */ '${file}') }`;
})
.join(',\n\t')}
];`.replace(/^\t\t/gm, '').trim();
return `{ pattern: ${page.pattern}, params: ${page.params.length > 0 ? `match` : `()`} => (${params}), load: () => import(/* webpackChunkName: "${page.id}" */ '${file}') }`;
}).join(',\n\t\t\t\t')}
],
error: () => import(/* webpackChunkName: '_error' */ '${posixify(`${path_to_routes}/${error_route.file}`)}')
};`.replace(/^\t\t/gm, '').trim();
if (dev()) {
const sapper_dev_client = posixify(
@@ -82,35 +87,46 @@ function generate_client(routes: Route[], path_to_routes: string, dev_port?: num
}
function generate_server(routes: Route[], path_to_routes: string) {
const error_route = routes.pages.find(page => page.id === '_error');
const imports = [].concat(
routes.server_routes.map(route =>
`import * as route_${route.id} from '${posixify(`${path_to_routes}/${route.file}`)}';`),
routes.pages.map(page =>
`import page_${page.id} from '${posixify(`${path_to_routes}/${page.file}`)}';`),
`import error from '${posixify(`${path_to_routes}/${error_route.file}`)}';`
);
let code = `
// This file is generated by Sapper — do not edit it!
${routes
.map(route => {
const file = posixify(`${path_to_routes}/${route.file}`);
return route.type === 'page'
? `import ${route.id} from '${file}';`
: `import * as ${route.id} from '${file}';`;
})
.join('\n')}
export const routes = [
${routes
.map(route => {
const file = posixify(`../../${route.file}`);
if (route.id === '_4xx' || route.id === '_5xx') {
return `{ error: '${route.id.slice(1)}', module: ${route.id} }`;
}
${imports.join('\n')}
export const routes = {
server_routes: [
${routes.server_routes.map(route => {
const params = route.params.length === 0
? '{}'
: `{ ${route.params.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;
return `{ id: '${route.id}', type: '${route.type}', pattern: ${route.pattern}, params: ${route.params.length > 0 ? `match` : `()`} => (${params}), module: ${route.id} }`;
})
.join(',\n\t')
return `{ id: '${route.id}', pattern: ${route.pattern}, params: ${route.params.length > 0 ? `match` : `()`} => (${params}), handlers: route_${route.id} }`;
}).join(',\n\t\t\t\t')}
],
pages: [
${routes.pages.map(page => {
const params = page.params.length === 0
? '{}'
: `{ ${page.params.map((part, i) => `${part}: match[${i + 1}]`).join(', ')} }`;
return `{ id: '${page.id}', pattern: ${page.pattern}, params: ${page.params.length > 0 ? `match` : `()`} => (${params}), handler: page_${page.id} }`;
}).join(',\n\t\t\t\t')}
],
error: {
error: true,
handler: error
}
];`.replace(/^\t\t/gm, '').trim();
};`.replace(/^\t\t/gm, '').trim();
return code;
}

View File

@@ -3,28 +3,53 @@ import glob from 'glob';
import { locations } from '../config';
import { Route } from '../interfaces';
export default function create_routes({ files } = { files: glob.sync('**/*.*', { cwd: locations.routes(), dot: true, nodir: true }) }) {
const routes: Route[] = files
export default function create_routes({
files
} = {
files: glob.sync('**/*.*', {
cwd: locations.routes(),
dot: true,
nodir: true
})
}) {
const all_routes = files
.filter((file: string) => !/(^|\/|\\)(_(?!error\.html)|\.(?!well-known))/.test(file))
.map((file: string) => {
if (/(^|\/|\\)_/.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);
}
const id = (
parts.join('_').replace(/[[\]]/g, '$').replace(/^\d/, '_$&').replace(/[^a-zA-Z0-9_$]/g, '_')
) || '_';
) || '_';
const type = file.endsWith('.html') ? 'page' : 'route';
const params: string[] = [];
const param_pattern = /\[([^\]]+)\]/g;
const match_patterns: Record<string, string> = {};
const param_pattern = /\[([^\(\]]+)(?:\((.+?)\))?\]/g;
let match;
while (match = param_pattern.exec(base)) {
params.push(match[1]);
if (typeof match[2] !== 'undefined') {
if (/[\(\)\?\:]/.exec(match[2])) {
throw new Error('Sapper does not allow (, ), ? or : in RegExp routes yet');
}
// Make a map of the regexp patterns
match_patterns[match[1]] = `(${match[2]}?)`;
}
}
// TODO can we do all this with sub-parts? or does
@@ -37,8 +62,14 @@ export default function create_routes({ files } = { files: glob.sync('**/*.*', {
const dynamic = ~part.indexOf('[');
if (dynamic) {
const matcher = part.replace(param_pattern, `([^\/]+?)`);
pattern_string = nested ? `(?:\\/${matcher}${pattern_string})?` : `\\/${matcher}${pattern_string}`;
// Get keys from part and replace with stored match patterns
const keys = part.replace(/\(.*?\)/, '').split(/[\[\]]/).filter((x, i) => { if (i % 2) return x });
let matcher = part;
keys.forEach(k => {
const key_pattern = new RegExp('\\[' + k + '(?:\\((.+?)\\))?\\]');
matcher = matcher.replace(key_pattern, match_patterns[k] || `([^/]+?)`);
})
pattern_string = (nested && type === 'page') ? `(?:\\/${matcher}${pattern_string})?` : `\\/${matcher}${pattern_string}`;
} else {
nested = false;
pattern_string = `\\/${part}${pattern_string}`;
@@ -63,7 +94,8 @@ export default function create_routes({ files } = { files: glob.sync('**/*.*', {
return {
id,
type: path.extname(file) === '.html' ? 'page' : 'route',
base,
type,
file,
pattern,
test,
@@ -71,53 +103,78 @@ export default function create_routes({ files } = { files: glob.sync('**/*.*', {
parts,
params
};
})
.filter(Boolean)
.sort((a: Route, b: Route) => {
if (a.file === '4xx.html' || a.file === '5xx.html') return -1;
if (b.file === '4xx.html' || b.file === '5xx.html') return 1;
const max = Math.max(a.parts.length, b.parts.length);
for (let i = 0; i < max; i += 1) {
const a_part = a.parts[i];
const b_part = b.parts[i];
if (!a_part) return -1;
if (!b_part) return 1;
const a_sub_parts = get_sub_parts(a_part);
const b_sub_parts = get_sub_parts(b_part);
const max = Math.max(a_sub_parts.length, b_sub_parts.length);
for (let i = 0; i < max; i += 1) {
const a_sub_part = a_sub_parts[i];
const b_sub_part = b_sub_parts[i];
if (!a_sub_part) return 1; // b is more specific, so goes first
if (!b_sub_part) return -1;
if (a_sub_part.dynamic !== b_sub_part.dynamic) {
return a_sub_part.dynamic ? 1 : -1;
}
if (!a_sub_part.dynamic && a_sub_part.content !== b_sub_part.content) {
return (
(b_sub_part.content.length - a_sub_part.content.length) ||
(a_sub_part.content < b_sub_part.content ? -1 : 1)
);
}
}
}
throw new Error(`The ${a.file} and ${b.file} routes clash`);
});
return routes;
const pages = all_routes
.filter(r => r.type === 'page')
.sort(comparator);
const server_routes = all_routes
.filter(r => r.type === 'route')
.sort(comparator);
return { pages, server_routes };
}
function comparator(a, b) {
if (a.parts[0] === '_error') return -1;
if (b.parts[0] === '_error') return 1;
const max = Math.max(a.parts.length, b.parts.length);
for (let i = 0; i < max; i += 1) {
const a_part = a.parts[i];
const b_part = b.parts[i];
if (!a_part) return -1;
if (!b_part) return 1;
const a_sub_parts = get_sub_parts(a_part);
const b_sub_parts = get_sub_parts(b_part);
const max = Math.max(a_sub_parts.length, b_sub_parts.length);
for (let i = 0; i < max; i += 1) {
const a_sub_part = a_sub_parts[i];
const b_sub_part = b_sub_parts[i];
if (!a_sub_part) return 1; // b is more specific, so goes first
if (!b_sub_part) return -1;
if (a_sub_part.dynamic !== b_sub_part.dynamic) {
return a_sub_part.dynamic ? 1 : -1;
}
if (!a_sub_part.dynamic && a_sub_part.content !== b_sub_part.content) {
return (
(b_sub_part.content.length - a_sub_part.content.length) ||
(a_sub_part.content < b_sub_part.content ? -1 : 1)
);
}
// If both parts dynamic, check for regexp patterns
if (a_sub_part.dynamic && b_sub_part.dynamic) {
const regexp_pattern = /\((.*?)\)/;
const a_match = regexp_pattern.exec(a_sub_part.content);
const b_match = regexp_pattern.exec(b_sub_part.content);
if (!a_match && b_match) {
return 1; // No regexp, so less specific than b
}
if (!b_match && a_match) {
return -1;
}
if (a_match && b_match && a_match[1] !== b_match[1]) {
return b_match[1].length - a_match[1].length;
}
}
}
}
throw new Error(`The ${a.base} and ${b.base} routes clash`);
}
function get_sub_parts(part: string) {
return part.split(/[\[\]]/)
return part.split(/\[(.+)\]/)
.map((content, i) => {
if (!content) return null;
return {

View File

@@ -1,7 +1,9 @@
export type Route = {
id: string;
type: 'page' | 'route';
file: string;
handlers: {
type: 'page' | 'route';
file: string;
}[];
pattern: RegExp;
test: (url: string) => boolean;
exec: (url: string) => Record<string, string>;

View File

@@ -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,8 @@ export default function middleware({ routes, store }: {
cache_control: 'max-age=31536000'
}),
get_route_handler(client_info.assetsByChunkName, routes, store)
get_server_route_handler(routes.server_routes),
get_page_handler(App, routes, store)
].filter(Boolean));
return middleware;
@@ -133,255 +152,248 @@ function serve({ prefix, pathname, cache_control }: {
};
}
const resolved = Promise.resolve();
function get_server_route_handler(routes: RouteObject[]) {
function handle_route(route, req, res, next) {
req.params = route.params(route.pattern.exec(req.path));
const method = req.method.toLowerCase();
// 'delete' cannot be exported from a module because it is a keyword,
// so check for 'del' instead
const method_export = method === 'delete' ? 'del' : method;
const handle_method = route.handlers[method_export];
if (handle_method) {
if (process.env.SAPPER_EXPORT) {
const { write, end, setHeader } = res;
const chunks: any[] = [];
const headers: Record<string, string> = {};
// intercept data so that it can be exported
res.write = function(chunk: any) {
chunks.push(new Buffer(chunk));
write.apply(res, arguments);
};
res.setHeader = function(name: string, value: string) {
headers[name.toLowerCase()] = value;
setHeader.apply(res, arguments);
};
res.end = function(chunk?: any) {
if (chunk) chunks.push(new Buffer(chunk));
end.apply(res, arguments);
process.send({
__sapper__: true,
event: 'file',
url: req.url,
method: req.method,
status: res.statusCode,
type: headers['content-type'],
body: Buffer.concat(chunks).toString()
});
};
}
const handle_next = (err?: Error) => {
if (err) {
console.error(err.stack);
res.statusCode = 500;
res.end(err.message);
} else {
process.nextTick(next);
}
};
try {
handle_method(req, res, handle_next);
} catch (err) {
handle_next(err);
}
} else {
// no matching handler for method
process.nextTick(next);
}
}
return function find_route(req: Req, res: ServerResponse, next) {
for (const route of routes) {
if (route.pattern.test(req.path)) {
handle_route(route, req, res, next);
return;
}
}
next();
};
}
function get_page_handler(App: Component, routes: RouteObject[], store_getter: (req: Req) => Store) {
const output = locations.dest();
const get_chunks = dev()
? () => 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 { server_routes, pages } = routes;
const error_route = routes.error;
const mod = route.module;
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));
if (route.type === 'page') {
res.setHeader('Content-Type', 'text/html');
const chunks: Record<string, string> = get_chunks();
// preload main.js and current route
// TODO detect other stuff we can preload? images, CSS, fonts?
const link = []
.concat(chunks.main, chunks[route.id])
.filter(file => !file.match(/\.map$/))
.map(file => `<${req.baseUrl}/client/${file}>;rel="preload";as="script"`)
.join(', ');
res.setHeader('Link', link);
const store = store_getter ? store_getter(req) : null;
const data = { params: req.params, query: req.query };
let redirect: { statusCode: number, location: string };
let error: { statusCode: number, message: Error | string };
Promise.resolve(
mod.preload ? mod.preload.call({
redirect: (statusCode: number, location: string) => {
redirect = { statusCode, location };
},
error: (statusCode: number, message: Error | string) => {
error = { statusCode, message };
},
fetch: (url: string, opts?: any) => {
const parsed = new URL(url, `http://127.0.0.1:${process.env.PORT}${req.baseUrl ? req.baseUrl + '/' :''}`);
if (opts) {
opts = Object.assign({}, opts);
const include_cookies = (
opts.credentials === 'include' ||
opts.credentials === 'same-origin' && parsed.origin === `http://127.0.0.1:${process.env.PORT}`
);
if (include_cookies) {
const cookies: Record<string, string> = {};
if (!opts.headers) opts.headers = {};
const str = []
.concat(
cookie.parse(req.headers.cookie || ''),
cookie.parse(opts.headers.cookie || ''),
cookie.parse(res.getHeader('Set-Cookie') || '')
)
.map(cookie => {
return Object.keys(cookie)
.map(name => `${name}=${encodeURIComponent(cookie[name])}`)
.join('; ');
})
.filter(Boolean)
.join(', ');
opts.headers.cookie = str;
}
}
return fetch(parsed.href, opts);
},
store
}, req) : {}
).catch(err => {
error = { statusCode: 500, message: err };
}).then(preloaded => {
if (redirect) {
res.statusCode = redirect.statusCode;
res.setHeader('Location', `${req.baseUrl}/${redirect.location}`);
res.end();
return;
}
if (error) {
handle_error(req, res, error.statusCode, error.message);
return;
}
const serialized = {
preloaded: mod.preload && try_serialize(preloaded),
store: store && try_serialize(store.get())
};
Object.assign(data, preloaded);
const { html, head, css } = mod.render(data, {
store
});
let scripts = []
.concat(chunks.main) // chunks main might be an array. it might not! thanks, webpack
.filter(file => !file.match(/\.map$/))
.map(file => `<script src='${req.baseUrl}/client/${file}'></script>`)
.join('');
let inline_script = `__SAPPER__={${[
`baseUrl: "${req.baseUrl}"`,
serialized.preloaded && `preloaded: ${serialized.preloaded}`,
serialized.store && `store: ${serialized.store}`
].filter(Boolean).join(',')}};`;
const has_service_worker = fs.existsSync(path.join(locations.dest(), 'service-worker.js'));
if (has_service_worker) {
inline_script += `if ('serviceWorker' in navigator) navigator.serviceWorker.register('${req.baseUrl}/service-worker.js');`;
}
const page = template()
.replace('%sapper.base%', `<base href="${req.baseUrl}/">`)
.replace('%sapper.scripts%', `<script>${inline_script}</script>${scripts}`)
.replace('%sapper.html%', html)
.replace('%sapper.head%', `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
.replace('%sapper.styles%', (css && css.code ? `<style>${css.code}</style>` : ''));
res.end(page);
if (process.send) {
process.send({
__sapper__: true,
url: req.url,
method: req.method,
status: 200,
type: 'text/html',
body: page
});
}
});
}
else {
const method = req.method.toLowerCase();
// 'delete' cannot be exported from a module because it is a keyword,
// so check for 'del' instead
const method_export = method === 'delete' ? 'del' : method;
const handler = mod[method_export];
if (handler) {
if (process.env.SAPPER_EXPORT) {
const { write, end, setHeader } = res;
const chunks: any[] = [];
const headers: Record<string, string> = {};
// intercept data so that it can be exported
res.write = function(chunk: any) {
chunks.push(new Buffer(chunk));
write.apply(res, arguments);
};
res.setHeader = function(name: string, value: string) {
headers[name.toLowerCase()] = value;
setHeader.apply(res, arguments);
};
res.end = function(chunk?: any) {
if (chunk) chunks.push(new Buffer(chunk));
end.apply(res, arguments);
process.send({
__sapper__: true,
url: req.url,
method: req.method,
status: res.statusCode,
type: headers['content-type'],
body: Buffer.concat(chunks).toString()
});
};
}
const handle_bad_result = (err?: Error) => {
if (err) {
console.error(err.stack);
res.statusCode = 500;
res.end(err.message);
} else {
handle_error(req, res, 404, 'Not found');
}
};
try {
handler(req, res, handle_bad_result);
} catch (err) {
handle_bad_result(err);
}
} else {
// no matching handler for method — 404
handle_error(req, res, 404, 'Not found');
}
}
}
const not_found_route = routes.find((route: RouteObject) => route.error === '4xx');
const error_route = routes.find((route: RouteObject) => route.error === '5xx');
function handle_error(req: Req, res: ServerResponse, statusCode: number, message: Error | string) {
res.statusCode = statusCode;
res.setHeader('Content-Type', 'text/html');
const error = message instanceof Error ? message : new Error(message);
// preload main.js and current route
// TODO detect other stuff we can preload? images, CSS, fonts?
const link = []
.concat(chunks.main, chunks[route.id] || chunks._error) // TODO this is gross
.filter(file => !file.match(/\.map$/))
.map(file => `<${req.baseUrl}/client/${file}>;rel="preload";as="script"`)
.join(', ');
const not_found = statusCode >= 400 && statusCode < 500;
res.setHeader('Link', link);
const route = not_found
? not_found_route
: error_route;
const store = store_getter ? store_getter(req) : null;
const props = { params: req.params, query: req.query, path: req.path };
const title: string = not_found
? 'Not found'
: `Internal server error: ${error.message}`;
if (route.error) {
props.error = error instanceof Error ? error : { message: error };
props.status = status;
}
const rendered = route ? route.module.render({
status: statusCode,
error
}, {
store: store_getter && store_getter(req)
}) : { head: '', css: null, html: title };
let redirect: { statusCode: number, location: string };
let preload_error: { statusCode: number, message: Error | string };
const { head, css, html } = rendered;
Promise.resolve(
route.handler.preload ? route.handler.preload.call({
redirect: (statusCode: number, location: string) => {
redirect = { statusCode, location };
},
error: (statusCode: number, message: Error | string) => {
preload_error = { statusCode, message };
},
fetch: (url: string, opts?: any) => {
const parsed = new URL(url, `http://127.0.0.1:${process.env.PORT}${req.baseUrl ? req.baseUrl + '/' :''}`);
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>` : ''));
if (opts) {
opts = Object.assign({}, opts);
res.end(page);
const include_cookies = (
opts.credentials === 'include' ||
opts.credentials === 'same-origin' && parsed.origin === `http://127.0.0.1:${process.env.PORT}`
);
if (include_cookies) {
const cookies: Record<string, string> = {};
if (!opts.headers) opts.headers = {};
const str = []
.concat(
cookie.parse(req.headers.cookie || ''),
cookie.parse(opts.headers.cookie || ''),
cookie.parse(res.getHeader('Set-Cookie') || '')
)
.map(cookie => {
return Object.keys(cookie)
.map(name => `${name}=${encodeURIComponent(cookie[name])}`)
.join('; ');
})
.filter(Boolean)
.join(', ');
opts.headers.cookie = str;
}
}
return fetch(parsed.href, opts);
},
store
}, req) : {}
).catch(err => {
preload_error = { statusCode: 500, message: err };
}).then(preloaded => {
if (redirect) {
res.statusCode = redirect.statusCode;
res.setHeader('Location', `${req.baseUrl}/${redirect.location}`);
res.end();
return;
}
if (preload_error) {
handle_route(error_route, req, res, preload_error.statusCode, preload_error.message);
return;
}
const serialized = {
preloaded: route.handler.preload && try_serialize(preloaded),
store: store && try_serialize(store.get())
};
Object.assign(props, preloaded);
const { html, head, css } = App.render({ Page: route.handler, props }, {
store
});
let scripts = []
.concat(chunks.main) // chunks main might be an array. it might not! thanks, webpack
.filter(file => !file.match(/\.map$/))
.map(file => `<script src='${req.baseUrl}/client/${file}'></script>`)
.join('');
let inline_script = `__SAPPER__={${[
`baseUrl: "${req.baseUrl}"`,
serialized.preloaded && `preloaded: ${serialized.preloaded}`,
serialized.store && `store: ${serialized.store}`
].filter(Boolean).join(',')}};`;
const has_service_worker = fs.existsSync(path.join(locations.dest(), 'service-worker.js'));
if (has_service_worker) {
inline_script += `if ('serviceWorker' in navigator) navigator.serviceWorker.register('${req.baseUrl}/service-worker.js');`;
}
const page = template()
.replace('%sapper.base%', () => `<base href="${req.baseUrl}/">`)
.replace('%sapper.scripts%', () => `<script>${inline_script}</script>${scripts}`)
.replace('%sapper.html%', () => html)
.replace('%sapper.head%', () => `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
.replace('%sapper.styles%', () => (css && css.code ? `<style>${css.code}</style>` : ''));
res.statusCode = status;
res.end(page);
if (process.send) {
process.send({
__sapper__: true,
event: 'file',
url: req.url,
method: req.method,
status: 200,
type: 'text/html',
body: page
});
}
});
}
return function find_route(req: Req, res: ServerResponse) {
try {
for (const route of routes) {
if (!route.error && route.pattern.test(req.path)) return handle_route(route, req, res);
if (!server_routes.some(route => route.pattern.test(req.path))) {
for (const page of pages) {
if (page.pattern.test(req.path)) {
handle_route(page, req, res);
return;
}
}
handle_error(req, res, 404, 'Not found');
} catch (error) {
handle_error(req, res, 500, error);
}
handle_route(error_route, req, res, 404, 'Not found');
};
}
@@ -405,10 +417,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);

View File

@@ -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,14 +28,17 @@ 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);
// avoid accidental clashes between server routes and pages
if (routes.ignore.some(pattern => pattern.test(path))) return;
for (let i = 0; i < routes.pages.length; i += 1) {
const page = routes.pages[i];
const match = page.pattern.exec(path);
if (match) {
if (route.ignore) return null;
const params = route.params(match);
const params = page.params(match);
const query: Record<string, string | true> = {};
if (url.search.length > 0) {
@@ -43,18 +47,24 @@ function select_route(url: URL): Target {
query[key] = value || true;
})
}
return { url, route, data: { params, query } };
return { url, route: page, 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 +75,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 +116,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().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 +148,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 +211,11 @@ function handle_popstate(event: PopStateEvent) {
if (event.state) {
const url = new URL(window.location.href);
const target = select_route(url);
navigate(target, event.state.id);
if (target) {
navigate(target, event.state.id);
} else {
window.location.href = window.location.href;
}
} else {
// hashchange
cid = ++uid;
@@ -208,21 +225,30 @@ 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) {
const selected = select_route(new URL(href, document.baseURI));
if (selected) {
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))
};
}
}
function handle_touchstart_mouseover(event: MouseEvent | TouchEvent) {
let mousemove_timeout: NodeJS.Timer;
function handle_mousemove(event: MouseEvent) {
clearTimeout(mousemove_timeout);
mousemove_timeout = setTimeout(() => {
trigger_prefetch(event);
}, 20);
}
function trigger_prefetch(event: MouseEvent | TouchEvent) {
const a: HTMLAnchorElement = <HTMLAnchorElement>findAnchor(<Node>event.target);
if (!a || a.rel !== 'prefetch') return;
@@ -231,13 +257,15 @@ function handle_touchstart_mouseover(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;
error_route = opts.routes.error;
if (opts && opts.store) {
store = opts.store(manifest.store);
@@ -248,8 +276,8 @@ export function init(_target: Node, _routes: Route[], opts?: { store?: (data: an
window.addEventListener('popstate', handle_popstate);
// prefetch
window.addEventListener('touchstart', handle_touchstart_mouseover);
window.addEventListener('mouseover', handle_touchstart_mouseover);
window.addEventListener('touchstart', trigger_prefetch);
window.addEventListener('mousemove', handle_mousemove);
inited = true;
}
@@ -265,32 +293,32 @@ 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[]) {
if (!routes) throw new Error(`You must call init() first`);
return routes
return routes.pages
.filter(route => {
if (!pathnames) return true;
return pathnames.some(pathname => {
return route.error
? route.error === pathname
: route.pattern.test(pathname)
});
return pathnames.some(pathname => route.pattern.test(pathname));
})
.reduce((promise: Promise<any>, route) => {
return promise.then(route.load);

View File

@@ -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
View File

@@ -0,0 +1,6 @@
{#if preloading}
<progress class='preloading-progress' value=0.5/>
{/if}
<svelte:component this={Page} {...props}/>

View File

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

View File

@@ -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({

View File

@@ -1,6 +0,0 @@
<:Head>
<title>{{status}}</title>
</:Head>
<h1>Not found</h1>
<p>{{error.message}}</p>

View File

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

View File

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

View File

@@ -1,20 +1,26 @@
<:Head>
<svelte:head>
<title>About</title>
</:Head>
</svelte:head>
<h1>About this site</h1>
<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
}
};

View File

@@ -1,11 +1,11 @@
<:Head>
<title>{{post.title}}</title>
</:Head>
<svelte:head>
<title>{post.title}</title>
</svelte:head>
<h1>{{post.title}}</h1>
<h1>{post.title}</h1>
<div class='content'>
{{{post.html}}}
{@html post.html}
</div>
<script>

View File

@@ -1,17 +1,17 @@
<:Head>
<svelte:head>
<title>Blog</title>
</:Head>
</svelte:head>
<h1>Recent posts</h1>
<ul>
{{#each posts as post}}
{#each posts as post}
<!-- we're using the non-standard `rel=prefetch` attribute to
tell Sapper to load the data for the page as soon as
the user hovers over the link or taps it, instead of
waiting for the 'click' event -->
<li><a rel='prefetch' href='blog/{{post.slug}}'>{{post.title}}</a></li>
{{/each}}
<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
{/each}
</ul>
<script>

View File

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

View File

@@ -1,4 +1,4 @@
<h1>{{message}}</h1>
<h1>{message}</h1>
<script>
export default {

View File

@@ -1,6 +1,6 @@
<:Head>
<svelte:head>
<title>Sapper project template</title>
</:Head>
</svelte:head>
<h1>Great success!</h1>
@@ -11,7 +11,7 @@
<a href='blog/nope'>broken link</a>
<a href='blog/throw-an-error'>error link</a>
<a href='credentials?creds=include'>credentials</a>
<a rel=prefetch class='{{page === "blog" ? "selected" : ""}}' href='blog'>blog</a>
<a rel=prefetch class='{page === "blog" ? "selected" : ""}' href='blog'>blog</a>
<div class='hydrate-test'></div>

View File

@@ -1,4 +1,4 @@
<h1>{{foo.bar()}}</h1>
<h1>{foo.bar()}</h1>
<script>
export default {

View File

@@ -1,4 +1,4 @@
<h1>{{set.has('x')}}</h1>
<h1>{set.has('x')}</h1>
<script>
export default {

View File

@@ -1,4 +1,4 @@
<p>URL is {{url}}</p>
<p>URL is {url}</p>
<script>
export default {

View File

@@ -1 +1 @@
<h1>{{$title}}</h1>
<h1>{$title}</h1>

View File

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

View File

@@ -1,3 +1,4 @@
const fs = require('fs');
const path = require('path');
const assert = require('assert');
const Nightmare = require('nightmare');
@@ -38,6 +39,7 @@ describe('sapper', function() {
rimraf.sync('export');
rimraf.sync('build');
rimraf.sync('.sapper');
rimraf.sync('start.js');
this.timeout(process.env.CI ? 30000 : 10000);
@@ -131,6 +133,7 @@ function run({ mode, basepath = '' }) {
let capture;
let base;
let captured_basepath;
const nightmare = new Nightmare();
@@ -148,7 +151,7 @@ function run({ mode, basepath = '' }) {
before(() => {
const promise = mode === 'production'
? exec(`node ${cli} build`).then(() => ports.find(3000))
? exec(`node ${cli} build -l`).then(() => ports.find(3000))
: ports.find(3000).then(port => {
exec(`node ${cli} dev`);
return ports.wait(port).then(() => port);
@@ -160,6 +163,10 @@ function run({ mode, basepath = '' }) {
const dir = mode === 'production' ? 'build' : '.sapper';
if (mode === 'production') {
assert.ok(fs.existsSync('build/index.js'));
}
proc = require('child_process').fork(`${dir}/server.js`, {
cwd: process.cwd(),
env: {
@@ -173,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);
});
@@ -268,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?');
@@ -301,14 +312,17 @@ function run({ mode, basepath = '' }) {
});
});
it('reuses prefetch promise', () => {
it.skip('reuses prefetch promise', () => {
return nightmare
.goto(`${base}/blog`)
.init()
.then(() => {
return capture(() => {
return nightmare
.mouseover('[href="blog/what-is-sapper"]')
.evaluate(() => {
const a = document.querySelector('[href="blog/what-is-sapper"]');
a.dispatchEvent(new MouseEvent('mousemove'));
})
.wait(200);
});
})
@@ -425,7 +439,7 @@ function run({ mode, basepath = '' }) {
})
.then(() => nightmare.page.title())
.then(title => {
assert.equal(title, 'Not found')
assert.equal(title, '404')
});
});
@@ -440,7 +454,7 @@ function run({ mode, basepath = '' }) {
})
.then(() => nightmare.page.title())
.then(title => {
assert.equal(title, 'Not found');
assert.equal(title, '404');
});
});
@@ -452,7 +466,7 @@ function run({ mode, basepath = '' }) {
})
.then(() => nightmare.page.title())
.then(title => {
assert.equal(title, 'Internal server error')
assert.equal(title, '500')
});
});
@@ -467,7 +481,7 @@ function run({ mode, basepath = '' }) {
})
.then(() => nightmare.page.title())
.then(title => {
assert.equal(title, 'Internal server error');
assert.equal(title, '500');
});
});
@@ -565,6 +579,56 @@ 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');
});
});
it('replaces %sapper.xxx% tags safely', () => {
return nightmare
.goto(`${base}/unsafe-replacement`)
.init()
.page.html()
.then(html => {
assert.equal(html.indexOf('%sapper'), -1);
});
});
});
describe('headers', () => {

View File

@@ -2,8 +2,8 @@ const assert = require('assert');
const { create_routes } = require('../../dist/core.ts.js');
describe('create_routes', () => {
it('encodes caharcters not allowed in path', () => {
const routes = create_routes({
it('encodes characters not allowed in path', () => {
const { server_routes } = create_routes({
files: [
'"',
'#',
@@ -12,7 +12,7 @@ describe('create_routes', () => {
});
assert.deepEqual(
routes.map(r => r.pattern),
server_routes.map(r => r.pattern),
[
/^\/%22\/?$/,
/^\/%23\/?$/,
@@ -22,35 +22,70 @@ describe('create_routes', () => {
});
it('sorts routes correctly', () => {
const routes = create_routes({
files: ['index.html', 'about.html', 'post/f[xx].html', '[wildcard].html', 'post/foo.html', 'post/[id].html', 'post/bar.html', 'post/[id].json.js']
const { pages, server_routes } = create_routes({
files: [
'index.html',
'about.html',
'post/f[xx].html',
'[wildcard].html',
'post/foo.html',
'post/[id].html',
'post/bar.html',
'post/[id].json.js',
'post/[id([0-9-a-z]{3,})].html',
]
});
assert.deepEqual(
routes.map(r => r.file),
pages.map(r => r.file),
[
'index.html',
'about.html',
'post/bar.html',
'post/foo.html',
'post/f[xx].html',
'post/[id].json.js',
'post/[id([0-9-a-z]{3,})].html', // RegExp is more specific
'post/[id].html',
'[wildcard].html'
]
);
assert.deepEqual(
server_routes.map(r => r.file),
[
'post/[id].json.js'
]
);
});
it('distinguishes and sorts regexp routes correctly', () => {
const { pages } = create_routes({
files: [
'[slug].html',
'[slug([a-z]{2})].html',
'[slug([0-9-a-z]{3,})].html',
]
});
assert.deepEqual(
pages.map(r => r.file),
[
'[slug([0-9-a-z]{3,})].html',
'[slug([a-z]{2})].html',
'[slug].html',
]
);
});
it('prefers index page to nested route', () => {
let routes = create_routes({
let { pages, server_routes } = create_routes({
files: [
'api/examples/[slug].js',
'api/examples/index.js',
'blog/[slug].html',
'api/gists/[id].js',
'api/gists/index.js',
'4xx.html',
'5xx.html',
'_error.html',
'blog/index.html',
'blog/rss.xml.js',
'guide/index.html',
@@ -59,15 +94,20 @@ describe('create_routes', () => {
});
assert.deepEqual(
routes.map(r => r.file),
pages.map(r => r.file),
[
'4xx.html',
'5xx.html',
'_error.html',
'index.html',
'guide/index.html',
'blog/index.html',
'blog/[slug].html'
]
);
assert.deepEqual(
server_routes.map(r => r.file),
[
'blog/rss.xml.js',
'blog/[slug].html',
'api/examples/index.js',
'api/examples/[slug].js',
'api/gists/index.js',
@@ -75,10 +115,9 @@ describe('create_routes', () => {
]
);
routes = create_routes({
({ pages, server_routes } = create_routes({
files: [
'4xx.html',
'5xx.html',
'_error.html',
'api/blog/[slug].js',
'api/blog/index.js',
'api/guide/contents.js',
@@ -92,38 +131,61 @@ describe('create_routes', () => {
'index.html',
'repl/index.html'
]
});
}));
assert.deepEqual(
routes.map(r => r.file),
pages.map(r => r.file),
[
'4xx.html',
'5xx.html',
'_error.html',
'index.html',
'guide/index.html',
'blog/index.html',
'blog/rss.xml.js',
'blog/[slug].html',
'repl/index.html'
]
);
assert.deepEqual(
server_routes.map(r => r.file),
[
'blog/rss.xml.js',
'gist/create.js',
'gist/[id].js',
'repl/index.html',
'api/guide/index.js',
'api/guide/contents.js',
'api/blog/index.js',
'api/blog/[slug].js',
]
);
// RegExp routes
({ pages } = create_routes({
files: [
'blog/[slug].html',
'blog/index.html',
'blog/[slug([^0-9]+)].html',
]
}));
assert.deepEqual(
pages.map(r => r.file),
[
'blog/index.html',
'blog/[slug([^0-9]+)].html',
'blog/[slug].html',
]
);
});
it('generates params', () => {
const routes = create_routes({
const { pages } = create_routes({
files: ['index.html', 'about.html', '[wildcard].html', 'post/[id].html']
});
let file;
let params;
for (let i = 0; i < routes.length; i += 1) {
const route = routes[i];
for (let i = 0; i < pages.length; i += 1) {
const route = pages[i];
if (params = route.exec('/post/123')) {
file = route.file;
break;
@@ -137,12 +199,12 @@ describe('create_routes', () => {
});
it('ignores files and directories with leading underscores', () => {
const routes = create_routes({
const { pages } = create_routes({
files: ['index.html', '_foo.html', 'a/_b/c/d.html', 'e/f/g/h.html', 'i/_j.html']
});
assert.deepEqual(
routes.map(r => r.file),
pages.map(r => r.file),
[
'index.html',
'e/f/g/h.html'
@@ -150,6 +212,17 @@ describe('create_routes', () => {
);
});
it('ignores files and directories with leading dots except .well-known', () => {
const { server_routes } = create_routes({
files: ['.well-known/dnt-policy.txt.js', '.unknown/foo.txt.js']
});
assert.deepEqual(
server_routes.map(r => r.file),
['.well-known/dnt-policy.txt.js']
);
});
it('matches /foo/:bar before /:baz/qux', () => {
const a = create_routes({
files: ['foo/[bar].html', '[baz]/qux.html']
@@ -159,12 +232,12 @@ describe('create_routes', () => {
});
assert.deepEqual(
a.map(r => r.file),
a.pages.map(r => r.file),
['foo/[bar].html', '[baz]/qux.html']
);
assert.deepEqual(
b.map(r => r.file),
b.pages.map(r => r.file),
['foo/[bar].html', '[baz]/qux.html']
);
});
@@ -174,56 +247,57 @@ describe('create_routes', () => {
create_routes({
files: ['[foo].html', '[bar]/index.html']
});
}, /The \[foo\].html and \[bar\]\/index.html routes clash/);
}, /The \[foo\] and \[bar\]\/index routes clash/);
assert.throws(() => {
create_routes({
files: ['foo.html', 'foo.js']
files: ['[foo([0-9-a-z]+)].html', '[bar([0-9-a-z]+)]/index.html']
});
}, /The foo.html and foo.js routes clash/);
}, /The \[foo\(\[0-9-a-z\]\+\)\] and \[bar\(\[0-9-a-z\]\+\)\]\/index routes clash/);
});
it('matches nested routes', () => {
const route = create_routes({
files: ['settings/[submenu].html']
})[0];
assert.deepEqual(route.exec('/settings/foo'), {
it('matches nested routes', () => {
const page = create_routes({
files: ['settings/[submenu].html']
}).pages[0];
assert.deepEqual(page.exec('/settings/foo'), {
submenu: 'foo'
});
assert.deepEqual(route.exec('/settings'), {
assert.deepEqual(page.exec('/settings'), {
submenu: null
});
});
it('prefers index routes to nested routes', () => {
const routes = create_routes({
const { pages } = create_routes({
files: ['settings/[submenu].html', 'settings.html']
});
assert.deepEqual(
routes.map(r => r.file),
pages.map(r => r.file),
['settings.html', 'settings/[submenu].html']
);
});
it('matches deeply nested routes', () => {
const route = create_routes({
const page = create_routes({
files: ['settings/[a]/[b]/index.html']
})[0];
}).pages[0];
assert.deepEqual(route.exec('/settings/foo/bar'), {
assert.deepEqual(page.exec('/settings/foo/bar'), {
a: 'foo',
b: 'bar'
});
assert.deepEqual(route.exec('/settings/foo'), {
assert.deepEqual(page.exec('/settings/foo'), {
a: 'foo',
b: null
});
assert.deepEqual(route.exec('/settings'), {
assert.deepEqual(page.exec('/settings'), {
a: null,
b: null
});
@@ -232,7 +306,7 @@ describe('create_routes', () => {
it('matches a dynamic part within a part', () => {
const route = create_routes({
files: ['things/[slug].json.js']
})[0];
}).server_routes[0];
assert.deepEqual(route.exec('/things/foo.json'), {
slug: 'foo'
@@ -242,7 +316,7 @@ describe('create_routes', () => {
it('matches multiple dynamic parts within a part', () => {
const route = create_routes({
files: ['things/[id]_[slug].json.js']
})[0];
}).server_routes[0];
assert.deepEqual(route.exec('/things/someid_someslug.json'), {
id: 'someid',
@@ -257,4 +331,36 @@ describe('create_routes', () => {
});
}, /Invalid route \[foo\]\[bar\]\.js — parameters must be separated/);
});
it('errors when trying to use reserved characters in route regexp', () => {
assert.throws(() => {
create_routes({
files: ['[lang([a-z]{2}(?:-[a-z]{2,4})?)]']
});
}, /Sapper does not allow \(, \), \? or \: in RegExp routes yet/);
});
it('errors on 4xx.html', () => {
assert.throws(() => {
create_routes({
files: ['4xx.html']
});
}, /As of Sapper 0.14, 4xx.html and 5xx.html should be replaced with _error.html/);
});
it('errors on 5xx.html', () => {
assert.throws(() => {
create_routes({
files: ['5xx.html']
});
}, /As of Sapper 0.14, 4xx.html and 5xx.html should be replaced with _error.html/);
});
it('treats foo/index.json.js the same as foo.json.js', () => {
const route = create_routes({
files: ['foo/index.json.js']
}).server_routes[0];
assert.ok(route.test('/foo.json'));
});
});