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

Separate build step (closes #21)

Browse Source
This commit is contained in:
Rich Harris
2017-12-18 15:38:56 -05:00
committed by GitHub
parent d0dd1d6cc9
commit 8da3ca16ab
13 changed files with 1088 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
lib/index.js
View File

@@ -4,91 +4,137 @@ 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 route_manager = require('./route_manager.js');
const templates = require('./templates.js');
const create_app = require('./utils/create_app.js');
const create_compiler = require('./utils/create_compiler.js');
const create_watcher = require('./utils/create_watcher.js');
const compilers = require('./utils/compilers.js');
const generate_asset_cache = require('./utils/generate_asset_cache.js');
const escape_html = require('escape-html');
const { src, dest, dev } = require('./config.js');
module.exports = function connect(opts) {
let routes = create_routes(
glob.sync('**/*.+(html|js|mjs)', { cwd: src })
);
function connect_dev() {
// create main.js and server-routes.js
// TODO update on changes
create_app();
create_app(src, dest, routes, opts);
const watcher = create_watcher();
const client = webpack(
require(path.resolve('webpack.client.config.js'))
);
let asset_cache;
const server = webpack(
require(path.resolve('webpack.server.config.js'))
);
return compose_handlers([
require('webpack-hot-middleware')(compilers.client, {
reload: true,
path: '/__webpack_hmr',
heartbeat: 10 * 1000
}),
const compiler = create_compiler(
client,
server,
dest,
routes,
dev
);
async function handle_webpack_generated_files(req, res, next) {
if (req.pathname.startsWith('/client/')) {
await compiler.ready;
res.set({
'Content-Type': 'application/javascript',
'Cache-Control': 'max-age=31536000'
});
res.end(compiler.asset_cache[req.pathname]);
} else {
async (req, res, next) => {
asset_cache = await watcher.ready;
next();
}
}
},
async function handle_index(req, res, next) {
if (req.pathname === '/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();
}
}
set_req_pathname,
async function handle_service_worker(req, res, next) {
if (req.pathname === '/service-worker.js') {
await compiler.ready;
res.set({
'Content-Type': 'application/javascript',
'Cache-Control': dev ? 'no-cache' : 'max-age=600'
});
res.end(compiler.service_worker);
} else {
next();
}
}
get_asset_handler({
filter: pathname => pathname === '/index.html',
type: 'text/html',
cache: 'max-age=600',
fn: () => asset_cache.client.index
}),
async function handle_route(req, res, next) {
get_asset_handler({
filter: pathname => pathname === '/service-worker.js',
type: 'application/javascript',
cache: 'max-age=600',
fn: () => asset_cache.client.service_worker
}),
get_asset_handler({
filter: pathname => pathname.startsWith('/client/'),
type: 'application/javascript',
cache: 'max-age=31536000',
fn: pathname => asset_cache.client.chunks[pathname]
}),
get_route_handler(() => asset_cache),
not_found
]);
}
function connect_prod() {
const asset_cache = generate_asset_cache(
read_json(path.join(dest, 'stats.client.json')),
read_json(path.join(dest, 'stats.server.json'))
);
return compose_handlers([
set_req_pathname,
get_asset_handler({
filter: pathname => pathname === '/index.html',
type: 'text/html',
cache: 'max-age=600',
fn: () => asset_cache.client.index
}),
get_asset_handler({
filter: pathname => pathname === '/service-worker.js',
type: 'application/javascript',
cache: 'max-age=600',
fn: () => asset_cache.client.service_worker
}),
get_asset_handler({
filter: pathname => pathname.startsWith('/client/'),
type: 'application/javascript',
cache: 'max-age=31536000',
fn: pathname => asset_cache.client.chunks[pathname]
}),
get_route_handler(() => asset_cache),
not_found
]);
}
module.exports = dev ? connect_dev : connect_prod;
function set_req_pathname(req, res, next) {
req.pathname = req.url.replace(/\?.+/, '');
next();
}
function get_asset_handler(opts) {
return (req, res, next) => {
if (!opts.filter(req.pathname)) return next();
res.set({
'Content-Type': opts.type,
'Cache-Control': opts.cache
});
res.end(opts.fn(req.pathname));
};
}
function get_route_handler(fn) {
return async function handle_route(req, res, next) {
const url = req.pathname;
const { client, server } = fn();
// whatever happens, we're going to serve some HTML
res.set({
'Content-Type': 'text/html'
});
try {
for (const route of routes) {
for (const route of route_manager.routes) {
if (route.test(url)) {
await compiler.ready;
req.params = route.exec(url);
const mod = require(compiler.server_routes)[route.id];
const mod = require(server.entry)[route.id];
if (route.type === 'page') {
let data = { params: req.params, query: req.query };
@@ -97,7 +143,7 @@ module.exports = function connect(opts) {
const { html, head, css } = mod.render(data);
const page = templates.render(200, {
main: compiler.client_main,
main: client.main_file,
html,
head: `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`,
styles: (css && css.code ? `<style>${css.code}</style>` : '')
@@ -116,12 +162,7 @@ module.exports = function connect(opts) {
}
}
res.status(404).end(templates.render(404, {
title: 'Not found',
status: 404,
method: req.method,
url
}));
next();
} catch(err) {
res.status(500).end(templates.render(500, {
title: (err && err.name) || 'Internal server error',
@@ -131,25 +172,16 @@ module.exports = function connect(opts) {
}));
}
}
}
const handler = compose_handlers([
dev && require('webpack-hot-middleware')(client, {
reload: true,
path: '/__webpack_hmr',
heartbeat: 10 * 1000
}),
handle_index,
handle_service_worker,
handle_webpack_generated_files,
handle_route
].filter(Boolean));
return function(req, res, next) {
req.pathname = req.url.replace(/\?.+/, '');
handler(req, res, next);
};
};
function not_found(req, res) {
res.status(404).end(templates.render(404, {
title: 'Not found',
status: 404,
method: req.method,
url
}));
}
function compose_handlers(handlers) {
return (req, res, next) => {
@@ -169,4 +201,8 @@ function compose_handlers(handlers) {
go();
}
}
function read_json(file) {
return JSON.parse(fs.readFileSync(file, 'utf-8'));
}