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

support HMR

Browse Source
This commit is contained in:
Rich Harris
2017-12-16 20:10:49 -05:00
parent 08ff7ad234
commit e4936375db
7 changed files with 546 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
lib/index.js
View File

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