mirror of
https://github.com/kevin-DL/sapper.git
synced 2026-01-13 11:35:28 +00:00
Rich Harris
@@ -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<string, string>;
|
||||
query: Record<string, string>;
|
||||
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<string, string | true> = {};
|
||||
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 <head> 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<string, string | true>, b: Record<string, string | true>) {
|
||||
return JSON.stringify(a) !== JSON.stringify(b);
|
||||
}
|
||||
|
||||
let root_preload: Promise<any>;
|
||||
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<any> {
|
||||
async function navigate(target: Target, id: number): Promise<any> {
|
||||
if (id) {
|
||||
// popstate or initial navigation
|
||||
cid = id;
|
||||
@@ -148,20 +277,19 @@ function navigate(target: Target, id: number): Promise<any> {
|
||||
|
||||
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));
|
||||
|
||||
@@ -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<string, string>;
|
||||
ignore?: boolean;
|
||||
parts: Array<{
|
||||
component: () => Promise<{ default: ComponentConstructor }>;
|
||||
params?: (match: RegExpExecArray) => Record<string, string>;
|
||||
}>;
|
||||
};
|
||||
|
||||
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<string, string | true>;
|
||||
};
|
||||
|
||||
export type Redirect = {
|
||||
statusCode: number;
|
||||
location: string;
|
||||
};
|
||||
Reference in New Issue
Block a user