mirror of
https://github.com/kevin-DL/sapper.git
synced 2026-01-14 20:14:39 +00:00
support HMR
This commit is contained in:
Rich Harris
191
lib/index.js
191
lib/index.js
@@ -3,6 +3,7 @@ const path = require('path');
|
||||
const glob = require('glob');
|
||||
const rimraf = require('rimraf');
|
||||
const mkdirp = require('mkdirp');
|
||||
const webpack = require('webpack');
|
||||
const create_routes = require('./utils/create_routes.js');
|
||||
const templates = require('./templates.js');
|
||||
const create_app = require('./utils/create_app.js');
|
||||
@@ -20,15 +21,65 @@ module.exports = function connect(opts) {
|
||||
|
||||
create_app(src, dest, routes, opts);
|
||||
|
||||
const client = webpack(
|
||||
require(path.resolve('webpack.client.config.js'))
|
||||
);
|
||||
|
||||
const server = webpack(
|
||||
require(path.resolve('webpack.server.config.js'))
|
||||
);
|
||||
|
||||
const compiler = create_compiler(
|
||||
client,
|
||||
server,
|
||||
dest,
|
||||
routes,
|
||||
dev
|
||||
);
|
||||
|
||||
return async function(req, res, next) {
|
||||
const url = req.url.replace(/\?.+/, '');
|
||||
const dev_middleware = dev ? require('webpack-dev-middleware')(client, {
|
||||
noInfo: true,
|
||||
logLevel: 'silent',
|
||||
publicPath: '/client/'
|
||||
}) : null;
|
||||
|
||||
const hot_middleware = dev ? require('webpack-hot-middleware')(client, {
|
||||
reload: true,
|
||||
path: '/__webpack_hmr',
|
||||
heartbeat: 10 * 1000
|
||||
}) : null;
|
||||
|
||||
async function handle_webpack_generated_files(url, req, res, next) {
|
||||
if (dev) {
|
||||
dev_middleware(req, res, () => {
|
||||
hot_middleware(req, res, next);
|
||||
});
|
||||
} else {
|
||||
if (url.startsWith('/client/')) {
|
||||
await compiler.ready;
|
||||
res.set({
|
||||
'Content-Type': 'application/javascript',
|
||||
'Cache-Control': 'max-age=31536000'
|
||||
});
|
||||
res.end(compiler.asset_cache[url]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handle_index(url, req, res, next) {
|
||||
if (url === '/index.html') {
|
||||
await compiler.ready;
|
||||
res.set({
|
||||
'Content-Type': 'text/html',
|
||||
'Cache-Control': dev ? 'no-cache' : 'max-age=600'
|
||||
});
|
||||
res.end(compiler.shell);
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
}
|
||||
|
||||
async function handle_service_worker(url, req, res, next) {
|
||||
if (url === '/service-worker.js') {
|
||||
await compiler.ready;
|
||||
res.set({
|
||||
@@ -36,94 +87,90 @@ module.exports = function connect(opts) {
|
||||
'Cache-Control': dev ? 'no-cache' : 'max-age=600'
|
||||
});
|
||||
res.end(compiler.service_worker);
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
}
|
||||
|
||||
else if (url === '/index.html') {
|
||||
await compiler.ready;
|
||||
res.set({
|
||||
'Content-Type': 'text/html',
|
||||
'Cache-Control': dev ? 'no-cache' : 'max-age=600'
|
||||
});
|
||||
res.end(compiler.shell);
|
||||
}
|
||||
async function handle_route(url, req, res) {
|
||||
// whatever happens, we're going to serve some HTML
|
||||
res.set({
|
||||
'Content-Type': 'text/html'
|
||||
});
|
||||
|
||||
else if (url.startsWith('/client/')) {
|
||||
await compiler.ready;
|
||||
res.set({
|
||||
'Content-Type': 'application/javascript',
|
||||
'Cache-Control': 'max-age=31536000'
|
||||
});
|
||||
res.end(compiler.asset_cache[url]);
|
||||
}
|
||||
try {
|
||||
for (const route of routes) {
|
||||
if (route.test(url)) {
|
||||
await compiler.ready;
|
||||
|
||||
else {
|
||||
// whatever happens, we're going to serve some HTML
|
||||
res.set({
|
||||
'Content-Type': 'text/html'
|
||||
});
|
||||
req.params = route.exec(url);
|
||||
|
||||
try {
|
||||
for (const route of routes) {
|
||||
if (route.test(url)) {
|
||||
await compiler.ready;
|
||||
const mod = require(compiler.server_routes)[route.id];
|
||||
|
||||
req.params = route.exec(url);
|
||||
if (route.type === 'page') {
|
||||
let data = { params: req.params, query: req.query };
|
||||
if (mod.preload) data = Object.assign(data, await mod.preload(data));
|
||||
|
||||
const mod = require(compiler.server_routes)[route.id];
|
||||
const { html, head, css } = mod.render(data);
|
||||
|
||||
if (route.type === 'page') {
|
||||
let data = { params: req.params, query: req.query };
|
||||
if (mod.preload) data = Object.assign(data, await mod.preload(data));
|
||||
const page = templates.render(200, {
|
||||
main: compiler.client_main,
|
||||
html,
|
||||
head: `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`,
|
||||
styles: (css && css.code ? `<style>${css.code}</style>` : '')
|
||||
});
|
||||
|
||||
const { html, head, css } = mod.render(data);
|
||||
res.status(200);
|
||||
res.end(page);
|
||||
}
|
||||
|
||||
const page = templates.render(200, {
|
||||
main: compiler.client_main,
|
||||
html,
|
||||
head: `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`,
|
||||
styles: (css && css.code ? `<style>${css.code}</style>` : '')
|
||||
});
|
||||
else {
|
||||
const handler = mod[req.method.toLowerCase()];
|
||||
if (handler) {
|
||||
if (handler.length === 2) {
|
||||
handler(req, res);
|
||||
} else {
|
||||
const data = await handler(req);
|
||||
|
||||
res.status(200);
|
||||
res.end(page);
|
||||
}
|
||||
|
||||
else {
|
||||
const handler = mod[req.method.toLowerCase()];
|
||||
if (handler) {
|
||||
if (handler.length === 2) {
|
||||
handler(req, res);
|
||||
// TODO headers, error handling
|
||||
if (typeof data === 'string') {
|
||||
res.end(data);
|
||||
} else {
|
||||
const data = await handler(req);
|
||||
|
||||
// TODO headers, error handling
|
||||
if (typeof data === 'string') {
|
||||
res.end(data);
|
||||
} else {
|
||||
res.end(JSON.stringify(data));
|
||||
}
|
||||
res.end(JSON.stringify(data));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
res.status(404).end(templates.render(404, {
|
||||
title: 'Not found',
|
||||
status: 404,
|
||||
method: req.method,
|
||||
url
|
||||
}));
|
||||
} catch(err) {
|
||||
res.status(500).end(templates.render(500, {
|
||||
title: (err && err.name) || 'Internal server error',
|
||||
url,
|
||||
error: escape_html(err && (err.details || err.message || err) || 'Unknown error'),
|
||||
stack: err && err.stack.split('\n').slice(1).join('\n')
|
||||
}));
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
res.status(404).end(templates.render(404, {
|
||||
title: 'Not found',
|
||||
status: 404,
|
||||
method: req.method,
|
||||
url
|
||||
}));
|
||||
} catch(err) {
|
||||
res.status(500).end(templates.render(500, {
|
||||
title: (err && err.name) || 'Internal server error',
|
||||
url,
|
||||
error: escape_html(err && (err.details || err.message || err) || 'Unknown error'),
|
||||
stack: err && err.stack.split('\n').slice(1).join('\n')
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
return async function(req, res, next) {
|
||||
const url = req.url.replace(/\?.+/, '');
|
||||
|
||||
handle_index(url, req, res, () => {
|
||||
handle_service_worker(url, req, res, () => {
|
||||
handle_webpack_generated_files(url, req, res, () => {
|
||||
handle_route(url, req, res);
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
};
|
||||
@@ -25,7 +25,7 @@ module.exports = function create_app(src, dest, routes, options) {
|
||||
|
||||
// need to fudge the mtime, because webpack is soft in the head
|
||||
const stats = fs.statSync(main_built);
|
||||
fs.utimesSync(main_built, stats.atimeMs - 9999, stats.mtimeMs - 9999);
|
||||
fs.utimesSync(main_built, stats.atimeMs - 999999, stats.mtimeMs - 999999);
|
||||
}
|
||||
|
||||
function create_server_routes() {
|
||||
@@ -42,7 +42,7 @@ module.exports = function create_app(src, dest, routes, options) {
|
||||
fs.writeFileSync(server_routes, `${imports}\n\n${exports}`);
|
||||
|
||||
const stats = fs.statSync(server_routes);
|
||||
fs.utimesSync(server_routes, stats.atimeMs - 9999, stats.mtimeMs - 9999);
|
||||
fs.utimesSync(server_routes, stats.atimeMs - 999999, stats.mtimeMs - 999999);
|
||||
}
|
||||
|
||||
// TODO in dev mode, watch files
|
||||
|
||||
@@ -1,141 +1,148 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const glob = require('glob');
|
||||
const webpack = require('webpack');
|
||||
const hot_middleware = require('webpack-hot-middleware');
|
||||
const chalk = require('chalk');
|
||||
const { dev } = require('../config.js');
|
||||
const templates = require('../templates.js');
|
||||
|
||||
module.exports = function create_webpack_compiler(dest, routes, dev) {
|
||||
module.exports = function create_compiler(client, server, dest, routes, dev) {
|
||||
const compiler = {};
|
||||
|
||||
function go() {
|
||||
const client = webpack(
|
||||
require(path.resolve('webpack.client.config.js'))
|
||||
);
|
||||
function client_updated(stats) {
|
||||
console.log(stats.toString({ colors: true }));
|
||||
|
||||
const server = webpack(
|
||||
require(path.resolve('webpack.server.config.js'))
|
||||
);
|
||||
const info = stats.toJson();
|
||||
|
||||
function client_updated(err, stats, reject) {
|
||||
console.log(stats.toString({ colors: true }));
|
||||
compiler.client_main = `/client/${info.assetsByChunkName.main}`;
|
||||
compiler.assets = info.assets.map(asset => `/client/${asset.name}`);
|
||||
|
||||
const info = stats.toJson();
|
||||
|
||||
if (err || stats.hasErrors()) {
|
||||
reject(err || info.errors[0]);
|
||||
}
|
||||
|
||||
compiler.client_main = `/client/${info.assetsByChunkName.main}`;
|
||||
compiler.assets = info.assets.map(asset => `/client/${asset.name}`);
|
||||
|
||||
compiler.asset_cache = {};
|
||||
compiler.assets.forEach(file => {
|
||||
compiler.asset_cache[file] = fs.readFileSync(path.join(dest, file), 'utf-8');
|
||||
});
|
||||
}
|
||||
|
||||
function server_updated(err, stats, reject) {
|
||||
console.log(stats.toString({ colors: true }));
|
||||
|
||||
const info = stats.toJson();
|
||||
|
||||
if (err || stats.hasErrors()) {
|
||||
reject(err || info.errors[0]);
|
||||
}
|
||||
|
||||
compiler.server_routes = path.resolve(dest, 'server', info.assetsByChunkName.server_routes);
|
||||
compiler.chunks = info.assetsByChunkName;
|
||||
}
|
||||
|
||||
function both_updated() {
|
||||
const assets = glob.sync('**', { cwd: 'assets', nodir: true });
|
||||
|
||||
const route_code = `[${
|
||||
routes
|
||||
.filter(route => route.type === 'page')
|
||||
.map(route => `{ pattern: ${route.pattern} }`)
|
||||
.join(', ')
|
||||
}]`;
|
||||
|
||||
compiler.service_worker = fs.readFileSync('templates/service-worker.js', 'utf-8')
|
||||
.replace('__timestamp__', Date.now())
|
||||
.replace('__assets__', JSON.stringify(assets))
|
||||
.replace('__shell__', JSON.stringify(compiler.assets.concat('/index.html')))
|
||||
.replace('__routes__', route_code);
|
||||
|
||||
compiler.shell = templates.render(200, {
|
||||
styles: '',
|
||||
head: '',
|
||||
html: '<noscript>Please enable JavaScript!</noscript>',
|
||||
main: compiler.client_main
|
||||
});
|
||||
|
||||
// useful for debugging, but the files are served from memory
|
||||
fs.writeFileSync(path.resolve(dest, 'service-worker.js'), compiler.service_worker);
|
||||
fs.writeFileSync(path.resolve(dest, 'index.html'), compiler.shell);
|
||||
}
|
||||
|
||||
if (dev) {
|
||||
compiler.hot_middleware = hot_middleware(client);
|
||||
|
||||
let client_is_ready = false;
|
||||
let server_is_ready = false;
|
||||
|
||||
let fulfil;
|
||||
let reject;
|
||||
|
||||
const invalidate = () => new Promise((f, r) => {
|
||||
fulfil = f;
|
||||
reject = r;
|
||||
});
|
||||
|
||||
compiler.ready = invalidate();
|
||||
|
||||
client.plugin('invalid', () => {
|
||||
client_is_ready = false;
|
||||
compiler.ready = invalidate();
|
||||
});
|
||||
|
||||
server.plugin('invalid', () => {
|
||||
server_is_ready = false;
|
||||
compiler.ready = invalidate();
|
||||
});
|
||||
|
||||
client.watch({}, (err, stats) => {
|
||||
client_updated(err, stats, reject);
|
||||
client_is_ready = true;
|
||||
if (server_is_ready) fulfil();
|
||||
});
|
||||
|
||||
server.watch({}, (err, stats) => {
|
||||
server_updated(err, stats, reject);
|
||||
server_is_ready = true;
|
||||
if (client_is_ready) fulfil();
|
||||
});
|
||||
} else {
|
||||
compiler.ready = Promise.all([
|
||||
new Promise((fulfil, reject) => {
|
||||
client.run((err, stats) => {
|
||||
client_updated(err, stats, reject);
|
||||
fulfil();
|
||||
});
|
||||
}),
|
||||
|
||||
new Promise((fulfil, reject) => {
|
||||
server.run((err, stats) => {
|
||||
server_updated(err, stats, reject);
|
||||
fulfil();
|
||||
});
|
||||
})
|
||||
]).then(both_updated);
|
||||
}
|
||||
const fs = client.outputFileSystem;
|
||||
compiler.asset_cache = {};
|
||||
compiler.assets.forEach(file => {
|
||||
compiler.asset_cache[file] = fs.readFileSync(path.join(dest, file), 'utf-8');
|
||||
});
|
||||
}
|
||||
|
||||
// TODO rerun go when routes are added/renamed
|
||||
// (or webpack config/templates change?)
|
||||
go();
|
||||
function server_updated(stats) {
|
||||
console.log(stats.toString({ colors: true }));
|
||||
|
||||
const info = stats.toJson();
|
||||
compiler.server_routes = path.resolve(dest, 'server', info.assetsByChunkName.server_routes);
|
||||
compiler.chunks = info.assetsByChunkName;
|
||||
}
|
||||
|
||||
function both_updated() {
|
||||
const assets = glob.sync('**', { cwd: 'assets', nodir: true });
|
||||
|
||||
const route_code = `[${
|
||||
routes
|
||||
.filter(route => route.type === 'page')
|
||||
.map(route => `{ pattern: ${route.pattern} }`)
|
||||
.join(', ')
|
||||
}]`;
|
||||
|
||||
compiler.service_worker = fs.readFileSync('templates/service-worker.js', 'utf-8')
|
||||
.replace('__timestamp__', Date.now())
|
||||
.replace('__assets__', JSON.stringify(assets))
|
||||
.replace('__shell__', JSON.stringify(compiler.assets.concat('/index.html')))
|
||||
.replace('__routes__', route_code);
|
||||
|
||||
compiler.shell = templates.render(200, {
|
||||
styles: '',
|
||||
head: '',
|
||||
html: '<noscript>Please enable JavaScript!</noscript>',
|
||||
main: compiler.client_main
|
||||
});
|
||||
|
||||
// useful for debugging, but the files are served from memory
|
||||
fs.writeFileSync(path.resolve(dest, 'service-worker.js'), compiler.service_worker);
|
||||
fs.writeFileSync(path.resolve(dest, 'index.html'), compiler.shell);
|
||||
}
|
||||
|
||||
if (dev) {
|
||||
let client_is_ready = false;
|
||||
let server_is_ready = false;
|
||||
|
||||
let fulfil;
|
||||
let reject;
|
||||
|
||||
const invalidate = () => new Promise((f, r) => {
|
||||
fulfil = f;
|
||||
reject = r;
|
||||
});
|
||||
|
||||
compiler.ready = invalidate();
|
||||
|
||||
client.plugin('invalid', filename => {
|
||||
console.log(chalk.red(`client bundle invalidated, file changed: ${chalk.bold(filename)}`));
|
||||
client_is_ready = false;
|
||||
compiler.ready = invalidate();
|
||||
});
|
||||
|
||||
client.plugin('done', stats => {
|
||||
if (stats.hasErrors()) {
|
||||
reject(stats.toJson().errors[0]);
|
||||
} else {
|
||||
client_updated(stats);
|
||||
}
|
||||
|
||||
client_is_ready = true;
|
||||
if (server_is_ready) fulfil();
|
||||
});
|
||||
|
||||
client.plugin('failed', reject);
|
||||
|
||||
server.plugin('invalid', filename => {
|
||||
console.log(chalk.red(`server bundle invalidated, file changed: ${chalk.bold(filename)}`));
|
||||
server_is_ready = false;
|
||||
compiler.ready = invalidate();
|
||||
});
|
||||
|
||||
server.plugin('done', stats => {
|
||||
if (stats.hasErrors()) {
|
||||
reject(stats.toJson().errors[0]);
|
||||
} else {
|
||||
server_updated(stats);
|
||||
}
|
||||
|
||||
server_is_ready = true;
|
||||
if (client_is_ready) fulfil();
|
||||
});
|
||||
|
||||
server.plugin('failed', reject);
|
||||
|
||||
// client is already being watched by the middleware,
|
||||
// so we only need to start the server compiler
|
||||
server.watch({}, (err, stats) => {
|
||||
if (stats.hasErrors()) {
|
||||
reject(stats.toJson().errors[0]);
|
||||
} else {
|
||||
server_updated(stats);
|
||||
server_is_ready = true;
|
||||
if (client_is_ready) fulfil();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
compiler.ready = Promise.all([
|
||||
new Promise((fulfil, reject) => {
|
||||
client.run((err, stats) => {
|
||||
if (stats.hasErrors()) {
|
||||
reject(stats.toJson().errors[0]);
|
||||
} else {
|
||||
client_updated(stats);
|
||||
}
|
||||
fulfil();
|
||||
});
|
||||
}),
|
||||
|
||||
new Promise((fulfil, reject) => {
|
||||
server.run((err, stats) => {
|
||||
server_updated(err, stats, reject);
|
||||
fulfil();
|
||||
});
|
||||
})
|
||||
]).then(both_updated);
|
||||
}
|
||||
|
||||
return compiler;
|
||||
};
|
||||
Reference in New Issue
Block a user