run webpack in watch mode during dev

This commit is contained in:
Rich Harris
2017-12-16 16:50:46 -05:00
parent 71ed3864b7
commit 5995b7ae6a
6 changed files with 54 additions and 31 deletions

View File

@@ -69,14 +69,13 @@ module.exports = function connect(opts) {
req.params = route.exec(url);
const chunk = compiler.chunks[route.id];
const mod = require(path.resolve(dest, 'server', chunk));
const mod = require(compiler.server_routes)[route.id];
if (route.type === 'page') {
let data = { params: req.params, query: req.query };
if (mod.default.preload) data = Object.assign(data, await mod.default.preload(data));
if (mod.preload) data = Object.assign(data, await mod.preload(data));
const { html, head, css } = mod.default.render(data);
const { html, head, css } = mod.render(data);
const page = templates.render(200, {
main: compiler.client_main,

View File

@@ -11,4 +11,6 @@ exports.dest = path.resolve(
process.env.SAPPER_DEST || '.sapper'
);
exports.main_built = path.resolve('templates/.main.tmp.js');
exports.main_built = path.resolve('templates/.main.tmp.js');
exports.server_routes = path.resolve(exports.dest, 'server-routes.js');

View File

@@ -1,30 +1,51 @@
const fs = require('fs');
const path = require('path');
const { main_built } = require('../config.js');
const template = fs.readFileSync('templates/main.js', 'utf-8');
const { dest, main_built, server_routes } = require('../config.js');
module.exports = function create_app(src, dest, routes, options) {
// TODO in dev mode, watch files
function create_client_main() {
const template = fs.readFileSync('templates/main.js', 'utf-8');
const code = `[${
routes
.filter(route => route.type === 'page')
const code = `[${
routes
.filter(route => route.type === 'page')
.map(route => {
const params = route.dynamic.length === 0 ?
'{}' :
`{ ${route.dynamic.map((part, i) => `${part}: match[${i + 1}]`).join(', ') } }`;
return `{ pattern: ${route.pattern}, params: match => (${params}), load: () => import(/* webpackChunkName: "${route.id}" */ '${src}/${route.file}') }`
})
.join(', ')
}]`;
const main = template.replace('__routes__', code);
fs.writeFileSync(main_built, main);
// 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);
}
function create_server_routes() {
const imports = routes
.map(route => {
const params = route.dynamic.length === 0 ?
'{}' :
`{ ${route.dynamic.map((part, i) => `${part}: match[${i + 1}]`).join(', ') } }`;
return `{ pattern: ${route.pattern}, params: match => (${params}), load: () => import(/* webpackChunkName: "${route.id}" */ '${src}/${route.file}') }`
return route.type === 'page' ?
`import ${route.id} from '${src}/${route.file}';` :
`import * as ${route.id} from '${src}/${route.file}';`;
})
.join(', ')
}]`;
.join('\n');
const main = template.replace('__routes__', code);
const exports = `export { ${routes.map(route => route.id)} };`;
fs.writeFileSync(main_built, main);
fs.writeFileSync(server_routes, `${imports}\n\n${exports}`);
// 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);
const stats = fs.statSync(server_routes);
fs.utimesSync(server_routes, stats.atimeMs - 9999, stats.mtimeMs - 9999);
}
// TODO in dev mode, watch files
create_client_main();
create_server_routes();
};

View File

@@ -44,6 +44,7 @@ module.exports = function create_webpack_compiler(dest, routes, dev) {
reject(err || info.errors[0]);
}
compiler.server_routes = path.resolve(dest, 'server', info.assetsByChunkName.server_routes);
compiler.chunks = info.assetsByChunkName;
}

View File

@@ -8,7 +8,9 @@ module.exports = function create_matchers(files) {
const parts = file.replace(/\.(html|js|mjs)$/, '').split(path.sep);
if (parts[parts.length - 1] === 'index') parts.pop();
const id = parts.join('_').replace(/[[\]]/g, '$') || '_';
const id = (
parts.join('_').replace(/[[\]]/g, '$').replace(/^\d/, '_$&').replace(/[^a-zA-Z0-9_$]/g, '_')
) || '_';
const dynamic = parts
.filter(part => part[0] === '[')

View File

@@ -1,6 +1,6 @@
const path = require('path');
const route_manager = require('../lib/route_manager.js');
const { src, dest, dev, main_built } = require('../lib/config.js');
const { src, dest, dev, main_built, server_routes } = require('../lib/config.js');
module.exports = {
dev,
@@ -24,11 +24,9 @@ module.exports = {
server: {
entry: () => {
const entries = {};
route_manager.routes.forEach(route => {
entries[route.id] = path.resolve(src, route.file);
});
return entries;
return {
server_routes
}
},
output: () => {