From 731d4f535cf190ce0b9e73da679e4e64a21513d6 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 23 Jul 2018 16:31:00 -0400 Subject: [PATCH] skip layout components where none is provided - fixes #312 --- src/core/create_manifests.ts | 4 ++++ src/core/create_routes.ts | 24 +++++++++-------------- src/middleware.ts | 15 ++++++++++++--- src/runtime/index.ts | 33 +++++++++++++++++++++----------- test/unit/create_routes/index.js | 16 +++++++++------- 5 files changed, 56 insertions(+), 36 deletions(-) diff --git a/src/core/create_manifests.ts b/src/core/create_manifests.ts index be6990d..b2149fd 100644 --- a/src/core/create_manifests.ts +++ b/src/core/create_manifests.ts @@ -79,6 +79,8 @@ function generate_client( pattern: ${page.pattern}, parts: [ ${page.parts.map(part => { + if (part === null) return 'null'; + if (part.params.length > 0) { const props = part.params.map((param, i) => `${param}: match[${i + 1}]`); return `{ component: ${part.component.name}, params: match => ({ ${props.join(', ')} }) }`; @@ -150,6 +152,8 @@ function generate_server( pattern: ${page.pattern}, parts: [ ${page.parts.map(part => { + if (part === null) return 'null'; + const props = [ `name: "${part.component.name}"`, `component: ${part.component.name}` diff --git a/src/core/create_routes.ts b/src/core/create_routes.ts index 6129ddb..98d20a1 100644 --- a/src/core/create_routes.ts +++ b/src/core/create_routes.ts @@ -101,27 +101,21 @@ export default function create_routes(cwd = locations.routes()) { if (item.is_dir) { const index = path.join(dir, item.basename, '_layout.html'); - const layout = fs.existsSync(index) - ? { - name: `${get_slug(item.file)}__layout`, - file: `${item.file}/_layout.html` - } - : null; - if (layout) { - components.push(layout); - } else if (components.indexOf(default_layout) === -1) { - components.push(default_layout); - } + const component = fs.existsSync(index) && { + name: `${get_slug(item.file)}__layout`, + file: `${item.file}/_layout.html` + }; + + if (component) components.push(component); walk( path.join(dir, item.basename), segments, params, - stack.concat({ - component: layout || default_layout, - params - }) + component + ? stack.concat({ component, params }) + : stack.concat(null) ); } diff --git a/src/middleware.ts b/src/middleware.ts index 1d2c1b4..d764d42 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -292,6 +292,8 @@ function get_page_handler(manifest: Manifest, store_getter: (req: Req) => Store) let preloaded_chunks = Array.isArray(chunks.main) ? chunks.main : [chunks.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]); }); @@ -366,6 +368,8 @@ function get_page_handler(manifest: Manifest, store_getter: (req: Req) => Store) : {}; Promise.all([root_preloaded].concat(page.parts.map(part => { + if (!part) return null; + return part.component.preload ? part.component.preload.call(preload_context, { path: req.path, @@ -411,23 +415,28 @@ function get_page_handler(manifest: Manifest, store_getter: (req: Req) => Store) const data = Object.assign({}, props, preloaded[0], { params: {}, - child: {} + child: { + segment: segments[0] + } }); let level = data.child; for (let i = 0; i < page.parts.length; i += 1) { const part = page.parts[i]; + if (!part) continue; + const get_params = part.params || (() => ({})); Object.assign(level, { - segment: segments[i], component: part.component, props: Object.assign({}, props, { params: get_params(match) }, preloaded[i + 1]) }); - level.props.child = {}; + level.props.child = { + segment: segments[i + 1] + }; level = level.props.child; } diff --git a/src/runtime/index.ts b/src/runtime/index.ts index ffc68c5..3b58fa5 100644 --- a/src/runtime/index.ts +++ b/src/runtime/index.ts @@ -77,14 +77,14 @@ function select_route(url: URL): Target { let current_token: {}; -function render(data: any, changed_from: number, scroll: ScrollPosition, token: {}) { +function render(data: any, nullable_depth: number, scroll: ScrollPosition, token: {}) { if (current_token !== token) return; if (root) { // first, clear out highest-level root component let level = data.child; - for (let i = 0; i < changed_from; i += 1) { - if (i === changed_from) break; + for (let i = 0; i < nullable_depth; i += 1) { + if (i === nullable_depth) break; level = level.props.child; } @@ -134,7 +134,7 @@ let root_data: any; function prepare_page(target: Target): Promise<{ redirect?: Redirect; data?: any; - changed_from?: number; + nullable_depth?: number; }> { if (root) { root.set({ preloading: true }); @@ -179,6 +179,7 @@ function prepare_page(target: Target): Promise<{ return Promise.all(page.parts.map(async (part, i) => { if (i < changed_from) return null; + if (!part) return null; const { default: Component } = await part.component(); const req = { @@ -231,33 +232,43 @@ function prepare_page(target: Target): Promise<{ const data = { path, preloading: false, - child: Object.assign({}, root_props.child) + child: Object.assign({}, root_props.child, { + segment: new_segments[0] + }) }; if (changed(query, root_props.query)) data.query = query; if (changed(params, root_props.params)) data.params = params; let level = data.child; + let nullable_depth = 0; + for (let i = 0; i < page.parts.length; i += 1) { const part = page.parts[i]; + if (!part) continue; + const get_params = part.params || (() => ({})); if (i < changed_from) { level.props.path = path; level.props.query = query; level.props.child = Object.assign({}, level.props.child); + + nullable_depth += 1; } else { - level.segment = new_segments[i]; level.component = results[i].Component; level.props = Object.assign({}, level.props, props, { params: get_params(target.match), }, results[i].preloaded); - level.props.child = {}; + + level.props.child = { + segment: new_segments[i + 1] + }; } level = level.props.child; } - return { data, changed_from }; + return { data, nullable_depth }; }); } @@ -282,12 +293,12 @@ async function navigate(target: Target, id: number): Promise { prefetching = null; const token = current_token = {}; - const { redirect, data, changed_from } = await loaded; + const { redirect, data, nullable_depth } = await loaded; if (redirect) { await goto(redirect.location, { replaceState: true }); } else { - render(data, changed_from, scroll_history[id], token); + render(data, nullable_depth, scroll_history[id], token); document.activeElement.blur(); } } @@ -353,7 +364,7 @@ function handle_popstate(event: PopStateEvent) { let prefetching: { href: string; - promise: Promise<{ redirect?: Redirect, data?: any, changed_from?: number }>; + promise: Promise<{ redirect?: Redirect, data?: any, nullable_depth?: number }>; } = null; export function prefetch(href: string) { diff --git a/test/unit/create_routes/index.js b/test/unit/create_routes/index.js index 9ba83e5..5380b89 100644 --- a/test/unit/create_routes/index.js +++ b/test/unit/create_routes/index.js @@ -36,6 +36,7 @@ describe('create_routes', () => { { pattern: /^\/blog\/?$/, parts: [ + null, { component: blog, params: [] } ] }, @@ -43,6 +44,7 @@ describe('create_routes', () => { { pattern: /^\/blog\/([^\/]+?)\/?$/, parts: [ + null, { component: blog_$slug, params: ['slug'] } ] } @@ -100,15 +102,15 @@ describe('create_routes', () => { it('sorts routes correctly', () => { const { pages } = create_routes(path.join(__dirname, 'samples/sorting')); - assert.deepEqual(pages.map(p => p.parts.map(part => part.component.file)), [ + assert.deepEqual(pages.map(p => p.parts.map(part => part && part.component.file)), [ ['index.html'], ['about.html'], - ['post/index.html'], - ['post/bar.html'], - ['post/foo.html'], - ['post/f[xx].html'], - ['post/[id([0-9-a-z]{3,})].html'], - ['post/[id].html'], + [null, 'post/index.html'], + [null, 'post/bar.html'], + [null, 'post/foo.html'], + [null, 'post/f[xx].html'], + [null, 'post/[id([0-9-a-z]{3,})].html'], + [null, 'post/[id].html'], ['[wildcard].html'] ]); });