From 70b5cc86dc795fe4afee84936b593153d7ab6c6c Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 28 Aug 2018 17:56:46 -0400 Subject: [PATCH] replace client_assets.json with build.json, include bundler name --- src/api/build.ts | 5 ++++- src/api/dev.ts | 5 ++++- src/cli.ts | 4 ++-- src/cli/build.ts | 2 +- src/cli/export.ts | 2 +- src/middleware.ts | 28 ++++++++++++++++------------ 6 files changed, 28 insertions(+), 18 deletions(-) diff --git a/src/api/build.ts b/src/api/build.ts index 152dc43..1f66bcf 100644 --- a/src/api/build.ts +++ b/src/api/build.ts @@ -64,7 +64,10 @@ async function execute(emitter: EventEmitter, { result: client_result }); - fs.writeFileSync(path.join(dest, 'client_assets.json'), JSON.stringify(client_result.assetsByChunkName)); + fs.writeFileSync(path.join(dest, 'build.json'), JSON.stringify({ + bundler, + assets: client_result.assetsByChunkName + })); const server_stats = await server.compile(); emitter.emit('build', { diff --git a/src/api/dev.ts b/src/api/dev.ts index 49fbab2..d7a4506 100644 --- a/src/api/dev.ts +++ b/src/api/dev.ts @@ -271,7 +271,10 @@ class Watcher extends EventEmitter { }, handle_result: (result: CompileResult) => { - fs.writeFileSync(path.join(dest, 'client_assets.json'), JSON.stringify(result.assetsByChunkName, null, ' ')); + fs.writeFileSync(path.join(dest, 'build.json'), JSON.stringify({ + bundler: this.bundler, + assets: result.assetsByChunkName + }, null, ' ')); this.deferreds.client.fulfil(); const client_files = result.assets.map((file: string) => `client/${file}`); diff --git a/src/cli.ts b/src/cli.ts index 6b09f06..302859a 100755 --- a/src/cli.ts +++ b/src/cli.ts @@ -20,7 +20,7 @@ prog.command('dev') prog.command('build [dest]') .describe('Create a production-ready version of your app') .option('-p, --port', 'Default of process.env.PORT', '3000') - .option('--bundler', 'Specify a bundler (rollup or webpack)', 'auto') + .option('--bundler', 'Specify a bundler (rollup or webpack, blank for auto)') .example(`build custom-dir -p 4567`) .action(async (dest = 'build', opts: { port: string, bundler?: string }) => { console.log(`> Building...`); @@ -68,7 +68,7 @@ prog.command('export [dest]') .option('--build-dir', 'Specify a custom temporary build directory', '.sapper/prod') .option('--basepath', 'Specify a base path') .option('--timeout', 'Milliseconds to wait for a page (--no-timeout to disable)', 5000) - .option('--bundler', 'Specify a bundler (rollup or webpack)', 'auto') + .option('--bundler', 'Specify a bundler (rollup or webpack, blank for auto)') .action(async (dest = 'export', opts: { build: boolean, bundler?: string, diff --git a/src/cli/build.ts b/src/cli/build.ts index e1a7e87..f00dafb 100644 --- a/src/cli/build.ts +++ b/src/cli/build.ts @@ -1,5 +1,5 @@ import { build as _build } from '../api/build'; -import * as colors from 'kleur'; +import colors from 'kleur'; import { locations } from '../config'; import validate_bundler from './utils/validate_bundler'; diff --git a/src/cli/export.ts b/src/cli/export.ts index 052e9b9..04aa0f9 100644 --- a/src/cli/export.ts +++ b/src/cli/export.ts @@ -1,5 +1,5 @@ import { exporter as _exporter } from '../api/export'; -import * as colors from 'kleur'; +import colors from 'kleur'; import prettyBytes from 'pretty-bytes'; import { locations } from '../config'; diff --git a/src/middleware.ts b/src/middleware.ts index 8d999cb..ea28340 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -282,9 +282,9 @@ function get_page_handler( ) { const output = locations.dest(); - const get_chunks = dev() - ? () => JSON.parse(fs.readFileSync(path.join(output, 'client_assets.json'), 'utf-8')) - : (assets => () => assets)(JSON.parse(fs.readFileSync(path.join(output, 'client_assets.json'), 'utf-8'))); + const get_build_info = dev() + ? () => JSON.parse(fs.readFileSync(path.join(output, 'build.json'), 'utf-8')) + : (assets => () => assets)(JSON.parse(fs.readFileSync(path.join(output, 'build.json'), 'utf-8'))); const template = dev() ? () => fs.readFileSync(`${locations.app()}/template.html`, 'utf-8') @@ -303,19 +303,22 @@ function get_page_handler( } function handle_page(page: Page, req: Req, res: ServerResponse, status = 200, error: Error | string = null) { - const chunks: Record = get_chunks(); + const build_info: { + bundler: 'rollup' | 'webpack', + assets: Record + } = get_build_info(); res.setHeader('Content-Type', 'text/html'); // preload main.js and current route // TODO detect other stuff we can preload? images, CSS, fonts? - let preloaded_chunks = Array.isArray(chunks.main) ? chunks.main : [chunks.main]; + let preloaded_chunks = Array.isArray(build_info.assets.main) ? build_info.assets.main : [build_info.assets.main]; if (!error) { page.parts.forEach(part => { if (!part) return; // using concat because it could be a string or an array. thanks webpack! - preloaded_chunks = preloaded_chunks.concat(chunks[part.name]); + preloaded_chunks = preloaded_chunks.concat(build_info.assets[part.name]); }); } @@ -481,11 +484,12 @@ function get_page_handler( store }); - let scripts = [] - .concat(chunks.main) // chunks main might be an array. it might not! thanks, webpack - .filter(file => !file.match(/\.map$/)) - .map(file => ``) - .join(''); + const file = [].concat(build_info.assets.main).filter(file => file && /\.js$/.test(file))[0]; + const main = `${req.baseUrl}/client/${file}`; + + const script = build_info.bundler === 'rollup' + ? `` + : ``; let inline_script = `__SAPPER__={${[ error && `error:1`, @@ -501,7 +505,7 @@ function get_page_handler( const body = template() .replace('%sapper.base%', () => ``) - .replace('%sapper.scripts%', () => `${scripts}`) + .replace('%sapper.scripts%', () => `${script}`) .replace('%sapper.html%', () => html) .replace('%sapper.head%', () => `${head}`) .replace('%sapper.styles%', () => (css && css.code ? `` : ''));