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

refactor some webpack stuff, support service worker generation

Browse Source
This commit is contained in:
Rich Harris
2017-12-14 15:38:41 -05:00
parent 6e769496ec
commit b8c03d330b
2 changed files with 47 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
connect.js
View File

@@ -37,7 +37,8 @@ module.exports = function connect(opts) {
return async function(req, res, next) { return async function(req, res, next) {
const url = req.url.replace(/\?.+/, ''); const url = req.url.replace(/\?.+/, '');
if (url.startsWith('/client/')) { if (url === '/service-worker.js' || url.startsWith('/client/')) {
await webpack_compiler.ready;
res.set({ res.set({
'Content-Type': 'application/javascript' 'Content-Type': 'application/javascript'
}); });
@@ -53,21 +54,21 @@ module.exports = function connect(opts) {
try { try {
for (const route of routes) { for (const route of routes) {
if (route.test(url)) { if (route.test(url)) {
await webpack_compiler.ready;
req.params = route.exec(url); req.params = route.exec(url);
const chunk = await webpack_compiler.get_chunk(route.id); const chunk = webpack_compiler.chunks[route.id];
const mod = require(chunk); const mod = require(path.resolve(dest, 'server', chunk));
if (route.type === 'page') { if (route.type === 'page') {
const main = await webpack_compiler.client_main;
let data = { params: req.params, query: req.query }; let data = { params: req.params, query: req.query };
if (mod.default.preload) data = Object.assign(data, await mod.default.preload(data)); if (mod.default.preload) data = Object.assign(data, await mod.default.preload(data));
const { html, head, css } = mod.default.render(data); const { html, head, css } = mod.default.render(data);
const page = templates.render(200, { const page = templates.render(200, {
main, main: webpack_compiler.client_main,
html, html,
head: `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`, head: `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`,
styles: (css && css.code ? `<style>${css.code}</style>` : '') styles: (css && css.code ? `<style>${css.code}</style>` : '')

61
utils/create_webpack_compiler.js
View File

@@ -1,8 +1,9 @@
const fs = require('fs'); const fs = require('fs');
const path = require('path'); const path = require('path');
const glob = require('glob');
const webpack = require('webpack'); const webpack = require('webpack');
module.exports = function create_webpack_compiler(out, routes, dev) { module.exports = function create_webpack_compiler(dest, routes, dev) {
const compiler = {}; const compiler = {};
const client = webpack( const client = webpack(
@@ -28,34 +29,52 @@ module.exports = function create_webpack_compiler(out, routes, dev) {
// TODO server // TODO server
} else { } else {
compiler.client_main = new Promise((fulfil, reject) => { compiler.ready = Promise.all([
client.run((err, stats) => { new Promise((fulfil, reject) => {
console.log(stats.toString({ colors: true })); client.run((err, stats) => {
console.log(stats.toString({ colors: true }));
if (err || stats.hasErrors()) { const info = stats.toJson();
reject(err || stats.toJson().errors[0]);
}
const filename = stats.toJson().assetsByChunkName.main; if (err || stats.hasErrors()) {
fulfil(`/client/${filename}`); reject(err || info.errors[0]);
}); }
});
const chunks = new Promise((fulfil, reject) => { compiler.client_main = `/client/${info.assetsByChunkName.main}`;
server.run((err, stats) => { compiler.assets = info.assets.map(asset => `/client/${asset.name}`);
console.log(stats.toString({ colors: true }));
if (err || stats.hasErrors()) { fulfil();
reject(err || stats.toJson().errors[0]); });
} }),
fulfil(stats.toJson().assetsByChunkName); new Promise((fulfil, reject) => {
}); server.run((err, stats) => {
console.log(stats.toString({ colors: true }));
const info = stats.toJson();
if (err || stats.hasErrors()) {
reject(err || info.errors[0]);
}
compiler.chunks = info.assetsByChunkName;
fulfil();
});
})
]).then(() => {
const assets = glob.sync('**', { cwd: 'assets' });
const service_worker = fs.readFileSync('templates/service-worker.js', 'utf-8')
.replace('__timestamp__', Date.now())
.replace('__assets__', JSON.stringify(assets))
.replace('__javascript__', JSON.stringify(compiler.assets));
fs.writeFileSync(path.resolve(dest, 'service-worker.js'), service_worker);
}); });
compiler.get_chunk = async id => { compiler.get_chunk = async id => {
const assetsByChunkName = await chunks; return path.resolve(dest, 'server', compiler.chunks[id]);
return path.resolve(out, 'server', assetsByChunkName[id]);
}; };
} }