{};
+ level = level.props.child;
+ }
+
+ const { html, head, css } = manifest.root.render(data, {
store
});
@@ -349,6 +442,7 @@ function get_page_handler(App: Component, routes: RouteObject[], store_getter: (
.join('');
let inline_script = `__SAPPER__={${[
+ error && `error:1`,
`baseUrl: "${req.baseUrl}"`,
serialized.preloaded && `preloaded: ${serialized.preloaded}`,
serialized.store && `store: ${serialized.store}`
@@ -359,7 +453,7 @@ function get_page_handler(App: Component, routes: RouteObject[], store_getter: (
inline_script += `if ('serviceWorker' in navigator) navigator.serviceWorker.register('${req.baseUrl}/service-worker.js');`;
}
- const page = template()
+ const body = template()
.replace('%sapper.base%', () => ``)
.replace('%sapper.scripts%', () => `${scripts}`)
.replace('%sapper.html%', () => html)
@@ -367,7 +461,7 @@ function get_page_handler(App: Component, routes: RouteObject[], store_getter: (
.replace('%sapper.styles%', () => (css && css.code ? `` : ''));
res.statusCode = status;
- res.end(page);
+ res.end(body);
if (process.send) {
process.send({
@@ -377,9 +471,17 @@ function get_page_handler(App: Component, routes: RouteObject[], store_getter: (
method: req.method,
status: 200,
type: 'text/html',
- body: page
+ body
});
}
+ }).catch(err => {
+ if (error) {
+ // we encountered an error while rendering the error page — oops
+ res.statusCode = 500;
+ res.end(`${escape_html(err.message)}`);
+ } else {
+ handle_error(req, res, 500, err);
+ }
});
}
@@ -387,13 +489,13 @@ function get_page_handler(App: Component, routes: RouteObject[], store_getter: (
if (!server_routes.some(route => route.pattern.test(req.path))) {
for (const page of pages) {
if (page.pattern.test(req.path)) {
- handle_route(page, req, res);
+ handle_page(page, req, res);
return;
}
}
}
- handle_route(error_route, req, res, 404, 'Not found');
+ handle_error(req, res, 404, 'Not found');
};
}
@@ -424,3 +526,15 @@ function try_serialize(data: any) {
return null;
}
}
+
+function escape_html(html: string) {
+ const chars: Record = {
+ '"' : 'quot',
+ "'": '#39',
+ '&': 'amp',
+ '<' : 'lt',
+ '>' : 'gt'
+ };
+
+ return html.replace(/["'&<>]/g, c => `&${chars[c]};`);
+}
\ No newline at end of file
diff --git a/src/runtime/index.ts b/src/runtime/index.ts
index e149c47..ffc68c5 100644
--- a/src/runtime/index.ts
+++ b/src/runtime/index.ts
@@ -1,14 +1,39 @@
import { detach, findAnchor, scroll_state, which } from './utils';
-import { Component, ComponentConstructor, Params, Query, Route, RouteData, ScrollPosition, Store, Target } from './interfaces';
+import { Component, ComponentConstructor, Params, Query, Redirect, Manifest, RouteData, ScrollPosition, Store, Target } from './interfaces';
-const manifest = typeof window !== 'undefined' && window.__SAPPER__;
+const initial_data = typeof window !== 'undefined' && window.__SAPPER__;
-export let App: ComponentConstructor;
-export let component: Component;
+export let root: Component;
let target: Node;
let store: Store;
-let routes: Route[];
-let error_route: Route;
+let manifest: Manifest;
+let segments: string[] = [];
+
+type RootProps = {
+ path: string;
+ params: Record;
+ query: Record;
+ child: Child;
+};
+
+type Child = {
+ segment?: string;
+ props?: any;
+ component?: Component;
+};
+
+const root_props: RootProps = {
+ path: null,
+ params: null,
+ query: null,
+ child: {
+ segment: null,
+ component: null,
+ props: {}
+ }
+};
+
+export { root as component }; // legacy reasons — drop in a future version
const history = typeof window !== 'undefined' ? window.history : {
pushState: (state: any, title: string, href: string) => {},
@@ -26,45 +51,50 @@ if ('scrollRestoration' in history) {
function select_route(url: URL): Target {
if (url.origin !== window.location.origin) return null;
- if (!url.pathname.startsWith(manifest.baseUrl)) return null;
+ if (!url.pathname.startsWith(initial_data.baseUrl)) return null;
- const path = url.pathname.slice(manifest.baseUrl.length);
+ const path = url.pathname.slice(initial_data.baseUrl.length);
// avoid accidental clashes between server routes and pages
- if (routes.ignore.some(pattern => pattern.test(path))) return;
+ if (manifest.ignore.some(pattern => pattern.test(path))) return;
- for (let i = 0; i < routes.pages.length; i += 1) {
- const page = routes.pages[i];
+ for (let i = 0; i < manifest.pages.length; i += 1) {
+ const page = manifest.pages[i];
const match = page.pattern.exec(path);
if (match) {
- const params = page.params(match);
-
const query: Record = {};
if (url.search.length > 0) {
url.search.slice(1).split('&').forEach(searchParam => {
const [, key, value] = /([^=]+)=(.*)/.exec(searchParam);
query[key] = value || true;
- })
+ });
}
- return { url, route: page, props: { params, query, path } };
+ return { url, path, page, match, query };
}
}
}
let current_token: {};
-function render(Page: ComponentConstructor, props: any, scroll: ScrollPosition, token: {}) {
+function render(data: any, changed_from: number, scroll: ScrollPosition, token: {}) {
if (current_token !== token) return;
- const data = {
- Page,
- props,
- preloading: false
- };
+ 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;
+ level = level.props.child;
+ }
- if (component) {
- component.set(data);
+ const { component } = level;
+ level.component = null;
+ root.set({ child: data.child });
+
+ // then render new stuff
+ level.component = component;
+ root.set(data);
} else {
// first load — remove SSR'd contents
const start = document.querySelector('#sapper-head-start');
@@ -76,7 +106,9 @@ function render(Page: ComponentConstructor, props: any, scroll: ScrollPosition,
detach(end);
}
- component = new App({
+ Object.assign(data, root_data);
+
+ root = new manifest.root({
target,
data,
store,
@@ -87,52 +119,149 @@ function render(Page: ComponentConstructor, props: any, scroll: ScrollPosition,
if (scroll) {
window.scrollTo(scroll.x, scroll.y);
}
+
+ Object.assign(root_props, data);
+ ready = true;
}
-function prepare_route(Page: ComponentConstructor, props: RouteData) {
- let redirect: { statusCode: number, location: string } = null;
+function changed(a: Record, b: Record) {
+ return JSON.stringify(a) !== JSON.stringify(b);
+}
+
+let root_preload: Promise;
+let root_data: any;
+
+function prepare_page(target: Target): Promise<{
+ redirect?: Redirect;
+ data?: any;
+ changed_from?: number;
+}> {
+ if (root) {
+ root.set({ preloading: true });
+ }
+
+ const { page, path, query } = target;
+ const new_segments = path.split('/').filter(Boolean);
+ let changed_from = 0;
+
+ while (
+ segments[changed_from] &&
+ new_segments[changed_from] &&
+ segments[changed_from] === new_segments[changed_from]
+ ) changed_from += 1;
+
+ let redirect: Redirect = null;
let error: { statusCode: number, message: Error | string } = null;
- if (!Page.preload) {
- return { Page, props, redirect, error };
- }
-
- if (!component && manifest.preloaded) {
- return { Page, props: Object.assign(props, manifest.preloaded), redirect, error };
- }
-
- if (component) {
- component.set({
- preloading: true
- });
- }
-
- return Promise.resolve(Page.preload.call({
+ const preload_context = {
store,
fetch: (url: string, opts?: any) => window.fetch(url, opts),
redirect: (statusCode: number, location: string) => {
+ if (redirect && (redirect.statusCode !== statusCode || redirect.location !== location)) {
+ throw new Error(`Conflicting redirects`);
+ }
redirect = { statusCode, location };
},
error: (statusCode: number, message: Error | string) => {
error = { statusCode, message };
}
- }, props)).catch(err => {
+ };
+
+ if (!root_preload) {
+ root_preload = manifest.root.preload
+ ? initial_data.preloaded[0] || manifest.root.preload.call(preload_context, {
+ path,
+ query,
+ params: {}
+ })
+ : {};
+ }
+
+ return Promise.all(page.parts.map(async (part, i) => {
+ if (i < changed_from) return null;
+
+ const { default: Component } = await part.component();
+ const req = {
+ path,
+ query,
+ params: part.params ? part.params(target.match) : {}
+ };
+
+ const preloaded = ready || !initial_data.preloaded[i + 1]
+ ? Component.preload ? await Component.preload.call(preload_context, req) : {}
+ : initial_data.preloaded[i + 1];
+
+ return { Component, preloaded };
+ })).catch(err => {
error = { statusCode: 500, message: err };
- }).then(preloaded => {
- if (error) {
- return error_route().then(({ default: Page }: { default: ComponentConstructor }) => {
- const err = error.message instanceof Error ? error.message : new Error(error.message);
- Object.assign(props, { status: error.statusCode, error: err });
- return { Page, props, redirect: null };
- });
+ return [];
+ }).then(async results => {
+ if (!root_data) root_data = await root_preload;
+
+ if (redirect) {
+ return { redirect };
}
- Object.assign(props, preloaded)
- return { Page, props, redirect };
+ segments = new_segments;
+
+ const get_params = page.parts[page.parts.length - 1].params || (() => ({}));
+ const params = get_params(target.match);
+
+ if (error) {
+ const props = {
+ path,
+ query,
+ params,
+ error: typeof error.message === 'string' ? new Error(error.message) : error.message,
+ status: error.statusCode
+ };
+
+ return {
+ data: Object.assign({}, props, {
+ preloading: false,
+ child: {
+ component: manifest.error,
+ props
+ }
+ })
+ };
+ }
+
+ const props = { path, query };
+ const data = {
+ path,
+ preloading: false,
+ child: Object.assign({}, root_props.child)
+ };
+ if (changed(query, root_props.query)) data.query = query;
+ if (changed(params, root_props.params)) data.params = params;
+
+ let level = data.child;
+ for (let i = 0; i < page.parts.length; i += 1) {
+ const part = page.parts[i];
+ 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);
+ } 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 = level.props.child;
+ }
+
+ return { data, changed_from };
});
}
-function navigate(target: Target, id: number): Promise {
+async function navigate(target: Target, id: number): Promise {
if (id) {
// popstate or initial navigation
cid = id;
@@ -148,20 +277,19 @@ function navigate(target: Target, id: number): Promise {
const loaded = prefetching && prefetching.href === target.url.href ?
prefetching.promise :
- target.route.load().then(mod => prepare_route(mod.default, target.props));
+ prepare_page(target);
prefetching = null;
const token = current_token = {};
+ const { redirect, data, changed_from } = await loaded;
- return loaded.then(({ Page, props, redirect }) => {
- if (redirect) {
- return goto(redirect.location, { replaceState: true });
- }
-
- render(Page, props, scroll_history[id], token);
+ if (redirect) {
+ await goto(redirect.location, { replaceState: true });
+ } else {
+ render(data, changed_from, scroll_history[id], token);
document.activeElement.blur();
- });
+ }
}
function handle_click(event: MouseEvent) {
@@ -225,16 +353,16 @@ function handle_popstate(event: PopStateEvent) {
let prefetching: {
href: string;
- promise: Promise<{ Page: ComponentConstructor, props: any }>;
+ promise: Promise<{ redirect?: Redirect, data?: any, changed_from?: number }>;
} = null;
export function prefetch(href: string) {
- const selected = select_route(new URL(href, document.baseURI));
+ const target: Target = select_route(new URL(href, document.baseURI));
- if (selected && (!prefetching || href !== prefetching.href)) {
+ if (target && (!prefetching || href !== prefetching.href)) {
prefetching = {
href,
- promise: selected.route.load().then(mod => prepare_route(mod.default, selected.props))
+ promise: prepare_page(target)
};
}
}
@@ -256,19 +384,28 @@ function trigger_prefetch(event: MouseEvent | TouchEvent) {
}
let inited: boolean;
+let ready = false;
-export function init(opts: { App: ComponentConstructor, target: Node, routes: Route[], store?: (data: any) => Store }) {
+export function init(opts: {
+ App: ComponentConstructor,
+ target: Node,
+ manifest: Manifest,
+ store?: (data: any) => Store,
+ routes?: any // legacy
+}) {
if (opts instanceof HTMLElement) {
throw new Error(`The signature of init(...) has changed — see https://sapper.svelte.technology/guide#0-11-to-0-12 for more information`);
}
- App = opts.App;
+ if (opts.routes) {
+ throw new Error(`As of Sapper 0.15, opts.routes should be opts.manifest`);
+ }
+
target = opts.target;
- routes = opts.routes;
- error_route = opts.routes.error;
+ manifest = opts.manifest;
if (opts && opts.store) {
- store = opts.store(manifest.store);
+ store = opts.store(initial_data.store);
}
if (!inited) { // this check makes HMR possible
@@ -292,8 +429,10 @@ export function init(opts: { App: ComponentConstructor, target: Node, routes: Ro
history.replaceState({ id: uid }, '', href);
- const target = select_route(new URL(window.location.href));
- if (target) return navigate(target, uid);
+ if (!initial_data.error) {
+ const target = select_route(new URL(window.location.href));
+ if (target) return navigate(target, uid);
+ }
});
}
@@ -313,9 +452,9 @@ export function goto(href: string, opts = { replaceState: false }) {
}
export function prefetchRoutes(pathnames: string[]) {
- if (!routes) throw new Error(`You must call init() first`);
+ if (!manifest) throw new Error(`You must call init() first`);
- return routes.pages
+ return manifest.pages
.filter(route => {
if (!pathnames) return true;
return pathnames.some(pathname => route.pattern.test(pathname));
diff --git a/src/runtime/interfaces.ts b/src/runtime/interfaces.ts
index 00f814c..5fbc381 100644
--- a/src/runtime/interfaces.ts
+++ b/src/runtime/interfaces.ts
@@ -11,15 +11,23 @@ export interface ComponentConstructor {
};
export interface Component {
+ set: (data: any) => void;
destroy: () => void;
}
-export type Route = {
+export type Page = {
pattern: RegExp;
- load: () => Promise<{ default: ComponentConstructor }>;
- error?: boolean;
- params?: (match: RegExpExecArray) => Record;
- ignore?: boolean;
+ parts: Array<{
+ component: () => Promise<{ default: ComponentConstructor }>;
+ params?: (match: RegExpExecArray) => Record;
+ }>;
+};
+
+export type Manifest = {
+ ignore: RegExp[];
+ root: ComponentConstructor;
+ error: () => Promise<{ default: ComponentConstructor }>;
+ pages: Page[]
};
export type ScrollPosition = {
@@ -29,6 +37,13 @@ export type ScrollPosition = {
export type Target = {
url: URL;
- route: Route;
- props: RouteData;
+ path: string;
+ page: Page;
+ match: RegExpExecArray;
+ query: Record;
+};
+
+export type Redirect = {
+ statusCode: number;
+ location: string;
};
\ No newline at end of file
diff --git a/test/app/app/App.html b/test/app/app/App.html
deleted file mode 100644
index a7bf15f..0000000
--- a/test/app/app/App.html
+++ /dev/null
@@ -1,6 +0,0 @@
-{#if preloading}
-