diff --git a/src/api/build.ts b/src/api/build.ts index 941c126..5fa9e6a 100644 --- a/src/api/build.ts +++ b/src/api/build.ts @@ -55,7 +55,7 @@ async function execute(emitter: EventEmitter, { const route_objects = create_routes(); // create app/manifest/client.js and app/manifest/server.js - create_main_manifests({ routes: route_objects }); + create_main_manifests({ bundler, routes: route_objects }); const { client, server, serviceworker } = create_compilers(validate_bundler(bundler), { webpack, rollup }); @@ -69,7 +69,7 @@ async function execute(emitter: EventEmitter, { fs.writeFileSync(path.join(dest, 'build.json'), JSON.stringify({ bundler, shimport: bundler === 'rollup' && require('shimport/package.json').version, - assets: client_result.assetsByChunkName + assets: client_result.assets })); const server_stats = await server.compile(); @@ -84,7 +84,7 @@ async function execute(emitter: EventEmitter, { if (serviceworker) { create_serviceworker_manifest({ routes: route_objects, - client_files: client_result.assets.map((file: string) => `client/${file}`) + client_files: client_result.chunks.map((file: string) => `client/${file}`) }); serviceworker_stats = await serviceworker.compile(); diff --git a/src/api/dev.ts b/src/api/dev.ts index 3813fe8..e3c4f4b 100644 --- a/src/api/dev.ts +++ b/src/api/dev.ts @@ -129,7 +129,7 @@ class Watcher extends EventEmitter { try { const routes = create_routes(); - create_main_manifests({ routes, dev_port: this.dev_port }); + create_main_manifests({ bundler: this.bundler, routes, dev_port: this.dev_port }); } catch (err) { this.emit('fatal', { message: err.message @@ -150,11 +150,11 @@ class Watcher extends EventEmitter { }, () => { const routes = create_routes(); - create_main_manifests({ routes, dev_port: this.dev_port }); + create_main_manifests({ bundler: this.bundler, routes, dev_port: this.dev_port }); try { const routes = create_routes(); - create_main_manifests({ routes, dev_port: this.dev_port }); + create_main_manifests({ bundler: this.bundler, routes, dev_port: this.dev_port }); } catch (err) { this.emit('error', { message: err.message @@ -285,7 +285,7 @@ class Watcher extends EventEmitter { fs.writeFileSync(path.join(dest, 'build.json'), JSON.stringify({ bundler: this.bundler, shimport: this.bundler === 'rollup' && require('shimport/package.json').version, - assets: result.assetsByChunkName + assets: result.assets }, null, ' ')); const client_files = result.assets.map((file: string) => `client/${file}`); diff --git a/src/core/create_compilers.ts b/src/core/create_compilers.ts index b5ed879..40c99a1 100644 --- a/src/core/create_compilers.ts +++ b/src/core/create_compilers.ts @@ -17,8 +17,8 @@ export class CompileResult { duration: number; errors: CompileError[]; warnings: CompileError[]; - assets: string[]; - assetsByChunkName: Record; + chunks: string[]; + assets: Record; } class RollupResult extends CompileResult { @@ -32,15 +32,15 @@ class RollupResult extends CompileResult { this.errors = compiler.errors.map(munge_rollup_warning_or_error); this.warnings = compiler.warnings.map(munge_rollup_warning_or_error); // TODO emit this as they happen - this.assets = compiler.chunks.map(chunk => chunk.fileName); + this.chunks = compiler.chunks.map(chunk => chunk.fileName); // TODO populate this properly. We don't have namedcompiler. chunks, as in // webpack, but we can have a route -> [chunk] map or something - this.assetsByChunkName = {}; + this.assets = {}; compiler.chunks.forEach(chunk => { if (compiler.input in chunk.modules) { - this.assetsByChunkName.main = chunk.fileName; + this.assets.main = chunk.fileName; } }); @@ -110,8 +110,8 @@ class WebpackResult extends CompileResult { this.duration = info.time; - this.assets = info.assets.map((chunk: { name: string }) => chunk.name); - this.assetsByChunkName = info.assetsByChunkName; + this.chunks = info.assets.map((chunk: { name: string }) => chunk.name); + this.assets = info.assetsByChunkName; } print() { diff --git a/src/core/create_manifests.ts b/src/core/create_manifests.ts index 8152312..518f692 100644 --- a/src/core/create_manifests.ts +++ b/src/core/create_manifests.ts @@ -5,7 +5,8 @@ import { posixify, write_if_changed } from './utils'; import { dev, locations } from '../config'; import { Page, PageComponent, ServerRoute } from '../interfaces'; -export function create_main_manifests({ routes, dev_port }: { +export function create_main_manifests({ bundler, routes, dev_port }: { + bundler: string, routes: { components: PageComponent[], pages: Page[], server_routes: ServerRoute[] }; dev_port?: number; }) { @@ -14,7 +15,7 @@ export function create_main_manifests({ routes, dev_port }: { const path_to_routes = path.relative(manifest_dir, locations.routes()); - const client_manifest = generate_client(routes, path_to_routes, dev_port); + const client_manifest = generate_client(routes, path_to_routes, bundler, dev_port); const server_manifest = generate_server(routes, path_to_routes); write_if_changed( @@ -48,6 +49,7 @@ export function create_serviceworker_manifest({ routes, client_files }: { function generate_client( routes: { root: PageComponent, components: PageComponent[], pages: Page[], server_routes: ServerRoute[] }, path_to_routes: string, + bundler: string, dev_port?: number ) { const page_ids = new Set(routes.pages.map(page => @@ -61,10 +63,15 @@ function generate_client( import root from '${get_file(path_to_routes, routes.root)}'; import error from '${posixify(`${path_to_routes}/_error.html`)}'; - ${routes.components.map(component => - `const ${component.name} = () => - import(/* webpackChunkName: "${component.name}" */ '${get_file(path_to_routes, component)}');`) - .join('\n')} + ${routes.components.map(component => { + const annotation = bundler === 'webpack' + ? `/* webpackChunkName: "${component.name}" */ ` + : ''; + + const source = get_file(path_to_routes, component); + + return `const ${component.name} = () => import(${annotation}'${source}');`; + }).join('\n')} export const manifest = { ignore: [${server_routes_to_ignore.map(route => route.pattern).join(', ')}], diff --git a/src/core/create_routes.ts b/src/core/create_routes.ts index c69cac1..96ac8c0 100644 --- a/src/core/create_routes.ts +++ b/src/core/create_routes.ts @@ -128,12 +128,12 @@ export default function create_routes(cwd = locations.routes()) { components.push(component); if (item.basename === 'index.html') { pages.push({ - pattern: get_pattern(parent_segments), + pattern: get_pattern(parent_segments, true), parts }); } else { pages.push({ - pattern: get_pattern(segments), + pattern: get_pattern(segments, true), parts }); } @@ -142,7 +142,7 @@ export default function create_routes(cwd = locations.routes()) { else { server_routes.push({ name: `route_${get_slug(item.file)}`, - pattern: get_pattern(segments), + pattern: get_pattern(segments, false), file: item.file, params: params }); @@ -276,7 +276,7 @@ function get_slug(file: string) { }); } -function get_pattern(segments: Part[][]) { +function get_pattern(segments: Part[][], add_trailing_slash: boolean) { return new RegExp( `^` + segments.map(segment => { @@ -290,6 +290,6 @@ function get_pattern(segments: Part[][]) { .replace(/%5D/g, ']'); }).join(''); }).join('') + - '\\\/?$' + (add_trailing_slash ? '\\\/?$' : '$') ); } \ No newline at end of file diff --git a/test/unit/create_routes/index.ts b/test/unit/create_routes/index.ts index 6c61bc3..02f8483 100644 --- a/test/unit/create_routes/index.ts +++ b/test/unit/create_routes/index.ts @@ -53,14 +53,14 @@ describe('create_routes', () => { assert.deepEqual(server_routes, [ { name: 'route_blog_json', - pattern: /^\/blog.json\/?$/, + pattern: /^\/blog.json$/, file: 'blog/index.json.js', params: [] }, { name: 'route_blog_$slug_json', - pattern: /^\/blog\/([^\/]+?).json\/?$/, + pattern: /^\/blog\/([^\/]+?).json$/, file: 'blog/[slug].json.js', params: ['slug'] }