totole/sapper
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper.git synced 2026-01-19 22:05:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

client-side rendering

Browse Source
This commit is contained in:
Rich Harris
2018-07-16 14:07:06 -04:00
parent 9dc5ba569f
commit f221281f8a
3 changed files with 116 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/middleware.ts
View File

@@ -271,7 +271,7 @@ function get_page_handler(routes: RouteObject, store_getter: (req: Req) => Store
res.setHeader('Link', link); res.setHeader('Link', link);
const store = store_getter ? store_getter(req) : null; const store = store_getter ? store_getter(req) : null;
const props = { params: req.params, query: req.query, path: req.path }; const props = { query: req.query, path: req.path };
// TODO reinstate this! // TODO reinstate this!
// if (page.error) { // if (page.error) {
@@ -353,12 +353,14 @@ function get_page_handler(routes: RouteObject, store_getter: (req: Req) => Store
const serialized = { const serialized = {
preloaded: page.parts.map((part, i) => { preloaded: page.parts.map((part, i) => {
return part.component.preload && try_serialize(preloaded[i]); return part.component.preload ? try_serialize(preloaded[i]) : null;
}), }),
store: store && try_serialize(store.get()) store: store && try_serialize(store.get())
}; };
const data = Object.assign({}, props, { console.log(serialized.preloaded);
const data = Object.assign({}, props, { params: req.params }, {
child: {} child: {}
}); });
let level = data.child; let level = data.child;
@@ -387,7 +389,7 @@ function get_page_handler(routes: RouteObject, store_getter: (req: Req) => Store
let inline_script = `__SAPPER__={${[ let inline_script = `__SAPPER__={${[
`baseUrl: "${req.baseUrl}"`, `baseUrl: "${req.baseUrl}"`,
serialized.preloaded && `preloaded: ${serialized.preloaded}`, serialized.preloaded && `preloaded: [${serialized.preloaded}]`,
serialized.store && `store: ${serialized.store}` serialized.store && `store: ${serialized.store}`
].filter(Boolean).join(',')}};`; ].filter(Boolean).join(',')}};`;

152
src/runtime/index.ts
View File

@@ -1,13 +1,14 @@
import { detach, findAnchor, scroll_state, which } from './utils'; 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, Routes, RouteData, ScrollPosition, Store, Target } from './interfaces';
const manifest = typeof window !== 'undefined' && window.__SAPPER__; const initial_data = typeof window !== 'undefined' && window.__SAPPER__;
export let component: Component; export let root: Component;
let target: Node; let target: Node;
let store: Store; let store: Store;
let routes: Route[]; let routes: Routes;
let error_route: Route;
export { root as component }; // legacy reasons — drop in a future version
const history = typeof window !== 'undefined' ? window.history : { const history = typeof window !== 'undefined' ? window.history : {
pushState: (state: any, title: string, href: string) => {}, pushState: (state: any, title: string, href: string) => {},
@@ -25,9 +26,9 @@ if ('scrollRestoration' in history) {
function select_route(url: URL): Target { function select_route(url: URL): Target {
if (url.origin !== window.location.origin) return null; 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 // avoid accidental clashes between server routes and pages
if (routes.ignore.some(pattern => pattern.test(path))) return; if (routes.ignore.some(pattern => pattern.test(path))) return;
@@ -37,33 +38,25 @@ function select_route(url: URL): Target {
const match = page.pattern.exec(path); const match = page.pattern.exec(path);
if (match) { if (match) {
const params = page.params(match);
const query: Record<string, string | true> = {}; const query: Record<string, string | true> = {};
if (url.search.length > 0) { if (url.search.length > 0) {
url.search.slice(1).split('&').forEach(searchParam => { url.search.slice(1).split('&').forEach(searchParam => {
const [, key, value] = /([^=]+)=(.*)/.exec(searchParam); const [, key, value] = /([^=]+)=(.*)/.exec(searchParam);
query[key] = value || true; query[key] = value || true;
}) });
} }
return { url, route: page, props: { params, query, path } }; return { url, path, page, match, query };
} }
} }
} }
let current_token: {}; let current_token: {};
function render(Page: ComponentConstructor, props: any, scroll: ScrollPosition, token: {}) { function render(data: any, scroll: ScrollPosition, token: {}) {
if (current_token !== token) return; if (current_token !== token) return;
const data = { if (root) {
Page, root.set(data);
props,
preloading: false
};
if (component) {
component.set(data);
} else { } else {
// first load — remove SSR'd <head> contents // first load — remove SSR'd <head> contents
const start = document.querySelector('#sapper-head-start'); const start = document.querySelector('#sapper-head-start');
@@ -75,7 +68,7 @@ function render(Page: ComponentConstructor, props: any, scroll: ScrollPosition,
detach(end); detach(end);
} }
component = new App({ root = new routes.root({
target, target,
data, data,
store, store,
@@ -88,50 +81,84 @@ function render(Page: ComponentConstructor, props: any, scroll: ScrollPosition,
} }
} }
function prepare_route(Page: ComponentConstructor, props: RouteData) { function prepare_page(target: Target): Promise<{
let redirect: { statusCode: number, location: string } = null; redirect?: Redirect;
data?: any
}> {
const { page, path, query } = target;
let redirect: Redirect = null;
let error: { statusCode: number, message: Error | string } = null; let error: { statusCode: number, message: Error | string } = null;
if (!Page.preload) { const preload_context = {
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({
store, store,
fetch: (url: string, opts?: any) => window.fetch(url, opts), fetch: (url: string, opts?: any) => window.fetch(url, opts),
redirect: (statusCode: number, location: string) => { redirect: (statusCode: number, location: string) => {
if (redirect && (redirect.statusCode !== statusCode || redirect.location !== location)) {
throw new Error(`Conflicting redirects`);
}
redirect = { statusCode, location }; redirect = { statusCode, location };
}, },
error: (statusCode: number, message: Error | string) => { error: (statusCode: number, message: Error | string) => {
error = { statusCode, message }; error = { statusCode, message };
} }
}, props)).catch(err => { };
return Promise.all(page.parts.map(async part => {
const { default: Component } = await part.component();
const req = {
path,
query,
params: part.params ? part.params(target.match) : {}
};
return {
Component,
preloaded: Component.preload
? await Component.preload.call(preload_context, req)
: {}
};
})).catch(err => {
error = { statusCode: 500, message: err }; error = { statusCode: 500, message: err };
}).then(preloaded => { return [];
}).then(results => {
if (error) { if (error) {
return error_route().then(({ default: Page }: { default: ComponentConstructor }) => { console.error('TODO', error);
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 };
});
} }
Object.assign(props, preloaded) if (redirect) {
return { Page, props, redirect }; return { redirect };
}
const get_params = page.parts[page.parts.length - 1].params || (() => ({}));
const params = get_params(target.match);
// TODO skip unchanged segments
const props = { path, query };
const data = { path, query, params, child: {} };
let level = data.child;
for (let i = 0; i < page.parts.length; i += 1) {
const part = page.parts[i];
const get_params = page.parts[page.parts.length - 1].params || (() => ({}));
Object.assign(level, {
// TODO segment
props: Object.assign({}, props, {
params: get_params(target.match),
}, results[i].preloaded),
component: results[i].Component
});
if (i < results.length - 1) {
level.props.child = {};
}
level = level.props.child;
}
return { data };
}); });
} }
function navigate(target: Target, id: number): Promise<any> { async function navigate(target: Target, id: number): Promise<any> {
if (id) { if (id) {
// popstate or initial navigation // popstate or initial navigation
cid = id; cid = id;
@@ -147,20 +174,19 @@ function navigate(target: Target, id: number): Promise<any> {
const loaded = prefetching && prefetching.href === target.url.href ? const loaded = prefetching && prefetching.href === target.url.href ?
prefetching.promise : prefetching.promise :
target.route.load().then(mod => prepare_route(mod.default, target.props)); prepare_page(target);
prefetching = null; prefetching = null;
const token = current_token = {}; const token = current_token = {};
const { redirect, data } = await loaded;
return loaded.then(({ Page, props, redirect }) => { if (redirect) {
if (redirect) { await goto(redirect.location, { replaceState: true });
return goto(redirect.location, { replaceState: true }); } else {
} render(data, scroll_history[id], token);
render(Page, props, scroll_history[id], token);
document.activeElement.blur(); document.activeElement.blur();
}); }
} }
function handle_click(event: MouseEvent) { function handle_click(event: MouseEvent) {
@@ -224,16 +250,16 @@ function handle_popstate(event: PopStateEvent) {
let prefetching: { let prefetching: {
href: string; href: string;
promise: Promise<{ Page: ComponentConstructor, props: any }>; promise: Promise<{ redirect?: Redirect, data?: any }>;
} = null; } = null;
export function prefetch(href: string) { 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 = { prefetching = {
href, href,
promise: selected.route.load().then(mod => prepare_route(mod.default, selected.props)) promise: prepare_page(target)
}; };
} }
} }
@@ -256,18 +282,16 @@ function trigger_prefetch(event: MouseEvent | TouchEvent) {
let inited: boolean; let inited: boolean;
export function init(opts: { App: ComponentConstructor, target: Node, routes: Route[], store?: (data: any) => Store }) { export function init(opts: { App: ComponentConstructor, target: Node, routes: Routes, store?: (data: any) => Store }) {
if (opts instanceof HTMLElement) { 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`); 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;
target = opts.target; target = opts.target;
routes = opts.routes; routes = opts.routes;
error_route = opts.routes.error;
if (opts && opts.store) { if (opts && opts.store) {
store = opts.store(manifest.store); store = opts.store(initial_data.store);
} }
if (!inited) { // this check makes HMR possible if (!inited) { // this check makes HMR possible

29
src/runtime/interfaces.ts
View File

@@ -11,15 +11,23 @@ export interface ComponentConstructor {
}; };
export interface Component { export interface Component {
set: (data: any) => void;
destroy: () => void; destroy: () => void;
} }
export type Route = { export type Page = {
pattern: RegExp; pattern: RegExp;
load: () => Promise<{ default: ComponentConstructor }>; parts: Array<{
error?: boolean; component: () => Promise<{ default: ComponentConstructor }>;
params?: (match: RegExpExecArray) => Record<string, string>; params?: (match: RegExpExecArray) => Record<string, string>;
ignore?: boolean; }>;
};
export type Routes = {
ignore: RegExp[];
root: ComponentConstructor;
error: () => Promise<{ default: ComponentConstructor }>;
pages: Page[]
}; };
export type ScrollPosition = { export type ScrollPosition = {
@@ -29,6 +37,13 @@ export type ScrollPosition = {
export type Target = { export type Target = {
url: URL; url: URL;
route: Route; path: string;
props: RouteData; page: Page;
match: RegExpExecArray;
query: Record<string, string | true>;
};
export type Redirect = {
statusCode: number;
location: string;
}; };