totole/sapper
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper.git synced 2026-01-12 03:05:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #273 from sveltejs/gh-272

Browse Source 
[WIP] expose dev, build, export APIs
This commit is contained in:
Rich Harris
2018-05-28 19:47:08 -04:00
committed by GitHub
parent 86f71e1faf 78be6aa343
commit 43bf6e8d8a
16 changed files with 865 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
api.js Normal file
View File

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

26
package.json
View File

@@ -24,18 +24,18 @@
"cookie": "^0.3.1",
"devalue": "^1.0.1",
"glob": "^7.1.2",
"html-minifier": "^3.5.11",
"html-minifier": "^3.5.16",
"mkdirp": "^0.5.1",
"node-fetch": "^2.1.1",
"port-authority": "^1.0.2",
"pretty-bytes": "^4.0.2",
"pretty-bytes": "^5.0.0",
"pretty-ms": "^3.1.0",
"require-relative": "^0.8.7",
"rimraf": "^2.6.2",
"sade": "^1.4.0",
"sade": "^1.4.1",
"sander": "^0.6.0",
"source-map-support": "^0.5.5",
"tslib": "^1.9.0",
"source-map-support": "^0.5.6",
"tslib": "^1.9.1",
"url-parse": "^1.2.0",
"webpack-format-messages": "^2.0.1"
},
@@ -45,23 +45,23 @@
"@types/rimraf": "^2.0.2",
"compression": "^1.7.1",
"eslint": "^4.13.1",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-import": "^2.12.0",
"express": "^4.16.3",
"mocha": "^5.0.4",
"mocha": "^5.2.0",
"nightmare": "^3.0.0",
"npm-run-all": "^4.1.2",
"polka": "^0.3.4",
"rollup": "^0.58.2",
"npm-run-all": "^4.1.3",
"polka": "^0.4.0",
"rollup": "^0.59.2",
"rollup-plugin-commonjs": "^9.1.3",
"rollup-plugin-json": "^2.3.0",
"rollup-plugin-json": "^3.0.0",
"rollup-plugin-string": "^2.0.2",
"rollup-plugin-typescript": "^0.8.1",
"serve-static": "^1.13.2",
"svelte": "^2.4.4",
"svelte": "^2.6.3",
"svelte-loader": "^2.9.0",
"typescript": "^2.8.3",
"walk-sync": "^0.3.2",
"webpack": "^4.1.0"
"webpack": "^4.8.3"
},
"scripts": {
"cy:open": "cypress open",

8
rollup.config.js
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);
}
});
});
}

422
src/api/dev.ts Normal file
View File

@@ -0,0 +1,422 @@
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 prettyMs from 'pretty-ms';
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;
};
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>{
error: new Error(`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 });
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(() => {
this.dev_server.send({
status: 'completed'
});
const restart = () => {
ports.wait(this.port).then((() => {
this.emit('ready', <events.ReadyEvent>{
port: this.port,
process: this.proc
});
this.deferreds.server.fulfil();
}));
};
if (this.proc) {
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']
});
});
}
});
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(),
rebuilding: new Set(),
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,
error: err
});
} 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;
});
}
}
class DevServer {
clients: Set<http.ServerResponse>;
_: 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);
setInterval(() => {
this.send(null);
});
}
close() {
this._.close();
}
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__) 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;
}
}
}

43
src/api/interfaces.ts Normal file
View File

@@ -0,0 +1,43 @@
import * as child_process from 'child_process';
export type ReadyEvent = {
port: number;
process: child_process.ChildProcess;
};
export type ErrorEvent = {
type: string;
error: Error;
};
export type FatalEvent = {
error: Error;
};
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 = {}

0
src/cli/utils/minify_html.ts → src/api/utils/minify_html.ts
View File

96
src/cli/build.ts
View File

@@ -1,78 +1,32 @@
import * as fs from 'fs';
import * as path from 'path';
import { build as _build } from '../api/build';
import * as colors from 'ansi-colors';
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 { 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(`${colors.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(`${colors.inverse(`\nbuilt client`)}`);
console.log(client_stats.toString({ colors: true }));
fs.writeFileSync(path.join(output, 'client_info.json'), JSON.stringify({
assets: client_stats.toJson().assetsByChunkName
}));
const server_stats = await compile(server);
console.log(`${colors.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(`${colors.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);
}
});
}
}

354
src/cli/dev.ts
View File

@@ -1,323 +1,77 @@
import * as fs from 'fs';
import * as path from 'path';
import * as net from 'net';
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(`${colors.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(`${colors.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${colors.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.error.message)}`);
});
compiler.watch({}, (err: Error, stats: any) => {
if (err) {
console.log(`${colors.red(`✗ ${name}`)}`);
console.log(`${colors.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.error.message}`)}`);
});
if (messages.errors.length > 0) {
console.log(`${colors.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(`${colors.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(`${colors.bold.green(`✔ ${name}`)} ${colors.gray(`(${prettyMs(info.time)})`)}`);
}
result(info);
const hidden = event.errors.filter(e => e.duplicate).length;
if (hidden > 0) {
console.log(`${hidden} duplicate ${hidden === 1 ? 'error' : 'errors'} hidden\n`);
}
} else if (event.warnings.length) {
console.log(`${colors.bold.yellow(`• ${event.type}`)}`);
event.warnings.filter(e => !e.duplicate).forEach(warning => {
console.log(warning.message);
});
const hidden = event.warnings.filter(e => e.duplicate).length;
if (hidden > 0) {
console.log(`${hidden} duplicate ${hidden === 1 ? 'warning' : 'warnings'} hidden\n`);
}
} else {
console.log(`${colors.bold.green(`✔ ${event.type}`)} ${colors.gray(`(${prettyMs(event.duration)})`)}`);
}
});
} catch (err) {
console.log(`${colors.bold.red(`> ${err.message}`)}`);
process.exit(1);
}
watch(compilers.server, {
name: 'server',
invalid: filename => {
restart_build(filename);
// TODO print message
deferreds.server = deferred();
},
result: info => {
// TODO log compile errors/warnings
fs.writeFileSync(path.join(dir, 'server_info.json'), JSON.stringify(info, null, ' '));
deferreds.client.promise.then(() => {
function restart() {
ports.wait(port).then(deferreds.server.fulfil);
}
if (proc) {
proc.kill();
proc.on('exit', restart);
} else {
restart();
}
proc = child_process.fork(`${dir}/server.js`, [], {
cwd: process.cwd(),
env: Object.assign({
PORT: port
}, process.env)
});
});
}
});
let first = true;
watch(compilers.client, {
name: 'client',
invalid: filename => {
restart_build(filename);
deferreds.client = deferred();
// TODO we should delete old assets. due to a webpack bug
// i don't even begin to comprehend, this is apparently
// quite difficult
},
result: info => {
fs.writeFileSync(path.join(dir, 'client_info.json'), JSON.stringify({
assets: info.assetsByChunkName
}, null, ' '));
deferreds.client.fulfil();
const client_files = info.assets.map((chunk: { name: string }) => `client/${chunk.name}`);
deferreds.server.promise.then(() => {
hot_update_server.send({
status: 'completed'
});
if (first) {
first = false;
console.log(`${colors.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);
});
}
}

123
src/cli/export.ts
View File

@@ -1,106 +1,35 @@
import * as child_process from 'child_process';
import * as path from 'path';
import * as sander from 'sander';
import { exporter as _exporter } from '../api/export';
import * as colors from 'ansi-colors';
import cheerio from 'cheerio';
import URL from 'url-parse';
import fetch from 'node-fetch';
import * as ports from 'port-authority';
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(`${colors.bold.cyan(file)} ${colors.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(`${colors.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());
}
}

16
src/core/create_compilers.ts
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)
};
}

1
src/core/create_manifests.ts
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';

5
src/middleware.ts
View File

@@ -8,7 +8,6 @@ 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';
@@ -60,7 +59,7 @@ export default function middleware({ App, routes, store }: {
const output = locations.dest();
const client_info = JSON.parse(fs.readFileSync(path.join(output, 'client_info.json'), 'utf-8'));
const client_assets = JSON.parse(fs.readFileSync(path.join(output, 'client_assets.json'), 'utf-8'));
const middleware = compose_handlers([
(req: Req, res: ServerResponse, next: () => void) => {
@@ -97,7 +96,7 @@ export default function middleware({ App, routes, store }: {
cache_control: 'max-age=31536000'
}),
get_route_handler(client_info.assets, App, routes, store)
get_route_handler(client_assets, App, routes, store)
].filter(Boolean));
return middleware;