mirror of
https://github.com/kevin-DL/sapper.git
synced 2026-01-13 19:45:26 +00:00
move app logic into templates (#444)
This commit is contained in:
Rich Harris
343
templates/src/client/app.ts
Normal file
343
templates/src/client/app.ts
Normal file
@@ -0,0 +1,343 @@
|
||||
import { Manifest, Target, ScrollPosition, Component, Redirect, ComponentLoader, ComponentConstructor, RootProps } from './types';
|
||||
import goto from './goto';
|
||||
|
||||
export const manifest: Manifest = __MANIFEST__;
|
||||
|
||||
let ready = false;
|
||||
let root_component: Component;
|
||||
let segments: string[] = [];
|
||||
let current_token: {};
|
||||
let root_preload: Promise<any>;
|
||||
let root_data: any;
|
||||
|
||||
const root_props: RootProps = {
|
||||
path: null,
|
||||
params: null,
|
||||
query: null,
|
||||
child: {
|
||||
segment: null,
|
||||
component: null,
|
||||
props: {}
|
||||
}
|
||||
};
|
||||
|
||||
export let prefetching: {
|
||||
href: string;
|
||||
promise: Promise<{ redirect?: Redirect, data?: any, nullable_depth?: number }>;
|
||||
} = null;
|
||||
export function set_prefetching(href, promise) {
|
||||
prefetching = { href, promise };
|
||||
}
|
||||
|
||||
export let store;
|
||||
export function set_store(fn) {
|
||||
store = fn(initial_data.store);
|
||||
}
|
||||
|
||||
export let target: Node;
|
||||
export function set_target(element) {
|
||||
target = element;
|
||||
}
|
||||
|
||||
export let uid = 1;
|
||||
export function set_uid(n) {
|
||||
uid = n;
|
||||
}
|
||||
|
||||
export let cid: number;
|
||||
export function set_cid(n) {
|
||||
cid = n;
|
||||
}
|
||||
|
||||
export const initial_data = typeof window !== 'undefined' && window.__SAPPER__;
|
||||
|
||||
export const history = typeof window !== 'undefined' ? window.history : {
|
||||
pushState: (state: any, title: string, href: string) => {},
|
||||
replaceState: (state: any, title: string, href: string) => {},
|
||||
scrollRestoration: ''
|
||||
};
|
||||
|
||||
export const scroll_history: Record<string, ScrollPosition> = {};
|
||||
|
||||
export function select_route(url: URL): Target {
|
||||
if (url.origin !== window.location.origin) return null;
|
||||
if (!url.pathname.startsWith(initial_data.baseUrl)) return null;
|
||||
|
||||
const path = url.pathname.slice(initial_data.baseUrl.length);
|
||||
|
||||
// avoid accidental clashes between server routes and pages
|
||||
if (manifest.ignore.some(pattern => pattern.test(path))) return;
|
||||
|
||||
for (let i = 0; i < manifest.pages.length; i += 1) {
|
||||
const page = manifest.pages[i];
|
||||
|
||||
const match = page.pattern.exec(path);
|
||||
if (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] = decodeURIComponent((value || '').replace(/\+/g, ' '));
|
||||
});
|
||||
}
|
||||
return { url, path, page, match, query };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function scroll_state() {
|
||||
return {
|
||||
x: window.scrollX,
|
||||
y: window.scrollY
|
||||
};
|
||||
}
|
||||
|
||||
export async function navigate(target: Target, id: number): Promise<any> {
|
||||
if (id) {
|
||||
// popstate or initial navigation
|
||||
cid = id;
|
||||
} else {
|
||||
// clicked on a link. preserve scroll state
|
||||
scroll_history[cid] = scroll_state();
|
||||
|
||||
id = cid = ++uid;
|
||||
scroll_history[cid] = { x: 0, y: 0 };
|
||||
}
|
||||
|
||||
cid = id;
|
||||
|
||||
if (root_component) {
|
||||
root_component.set({ preloading: true });
|
||||
}
|
||||
const loaded = prefetching && prefetching.href === target.url.href ?
|
||||
prefetching.promise :
|
||||
prepare_page(target);
|
||||
|
||||
prefetching = null;
|
||||
|
||||
const token = current_token = {};
|
||||
const { redirect, data, nullable_depth } = await loaded;
|
||||
|
||||
if (redirect) {
|
||||
await goto(redirect.location, { replaceState: true });
|
||||
} else {
|
||||
render(data, nullable_depth, scroll_history[id], token);
|
||||
if (document.activeElement) document.activeElement.blur();
|
||||
}
|
||||
}
|
||||
|
||||
function render(data: any, nullable_depth: number, scroll: ScrollPosition, token: {}) {
|
||||
if (current_token !== token) return;
|
||||
|
||||
if (root_component) {
|
||||
// first, clear out highest-level root component
|
||||
let level = data.child;
|
||||
for (let i = 0; i < nullable_depth; i += 1) {
|
||||
if (i === nullable_depth) break;
|
||||
level = level.props.child;
|
||||
}
|
||||
|
||||
const { component } = level;
|
||||
level.component = null;
|
||||
root_component.set({ child: data.child });
|
||||
|
||||
// then render new stuff
|
||||
level.component = component;
|
||||
root_component.set(data);
|
||||
} else {
|
||||
// first load — remove SSR'd <head> contents
|
||||
const start = document.querySelector('#sapper-head-start');
|
||||
const end = document.querySelector('#sapper-head-end');
|
||||
|
||||
if (start && end) {
|
||||
while (start.nextSibling !== end) detach(start.nextSibling);
|
||||
detach(start);
|
||||
detach(end);
|
||||
}
|
||||
|
||||
Object.assign(data, root_data);
|
||||
|
||||
root_component = new manifest.root({
|
||||
target,
|
||||
data,
|
||||
store,
|
||||
hydrate: true
|
||||
});
|
||||
}
|
||||
|
||||
if (scroll) {
|
||||
window.scrollTo(scroll.x, scroll.y);
|
||||
}
|
||||
|
||||
Object.assign(root_props, data);
|
||||
ready = true;
|
||||
}
|
||||
|
||||
export function prepare_page(target: Target): Promise<{
|
||||
redirect?: Redirect;
|
||||
data?: any;
|
||||
nullable_depth?: number;
|
||||
}> {
|
||||
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;
|
||||
|
||||
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 };
|
||||
}
|
||||
};
|
||||
|
||||
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;
|
||||
if (!part) return null;
|
||||
|
||||
const Component = await load_component(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 };
|
||||
return [];
|
||||
}).then(async results => {
|
||||
if (!root_data) root_data = await root_preload;
|
||||
|
||||
if (redirect) {
|
||||
return { 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, {
|
||||
segment: 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.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;
|
||||
level.segment = segments[i + 1];
|
||||
}
|
||||
|
||||
return { data, nullable_depth };
|
||||
});
|
||||
}
|
||||
|
||||
function load_css(chunk: string) {
|
||||
const href = `${initial_data.baseUrl}client/${chunk}`;
|
||||
if (document.querySelector(`link[href="${href}"]`)) return;
|
||||
|
||||
return new Promise((fulfil, reject) => {
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = href;
|
||||
|
||||
link.onload = () => fulfil();
|
||||
link.onerror = reject;
|
||||
|
||||
document.head.appendChild(link);
|
||||
});
|
||||
}
|
||||
|
||||
export function load_component(component: ComponentLoader): Promise<ComponentConstructor> {
|
||||
// TODO this is temporary — once placeholders are
|
||||
// always rewritten, scratch the ternary
|
||||
const promises: Array<Promise<any>> = (typeof component.css === 'string' ? [] : component.css.map(load_css));
|
||||
promises.unshift(component.js());
|
||||
return Promise.all(promises).then(values => values[0].default);
|
||||
}
|
||||
|
||||
function detach(node: Node) {
|
||||
node.parentNode.removeChild(node);
|
||||
}
|
||||
|
||||
function changed(a: Record<string, string | true>, b: Record<string, string | true>) {
|
||||
return JSON.stringify(a) !== JSON.stringify(b);
|
||||
}
|
||||
16
templates/src/client/goto/index.ts
Normal file
16
templates/src/client/goto/index.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { select_route, navigate, cid } from '../app';
|
||||
|
||||
export default function goto(href: string, opts = { replaceState: false }) {
|
||||
const target = select_route(new URL(href, document.baseURI));
|
||||
let promise;
|
||||
|
||||
if (target) {
|
||||
promise = navigate(target, null);
|
||||
if (history) history[opts.replaceState ? 'replaceState' : 'pushState']({ id: cid }, '', href);
|
||||
} else {
|
||||
window.location.href = href;
|
||||
promise = new Promise(f => {}); // never resolves
|
||||
}
|
||||
|
||||
return promise;
|
||||
}
|
||||
4
templates/src/client/index.ts
Normal file
4
templates/src/client/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export { default as start } from './start/index';
|
||||
export { default as goto } from './goto/index';
|
||||
export { default as prefetch } from './prefetch/index';
|
||||
export { default as prefetchRoutes } from './prefetchRoutes/index';
|
||||
10
templates/src/client/prefetch/index.ts
Normal file
10
templates/src/client/prefetch/index.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { select_route, prefetching, set_prefetching, prepare_page } from '../app';
|
||||
import { Target } from '../types';
|
||||
|
||||
export default function prefetch(href: string) {
|
||||
const target: Target = select_route(new URL(href, document.baseURI));
|
||||
|
||||
if (target && (!prefetching || href !== prefetching.href)) {
|
||||
set_prefetching(href, prepare_page(target));
|
||||
}
|
||||
}
|
||||
14
templates/src/client/prefetchRoutes/index.ts
Normal file
14
templates/src/client/prefetchRoutes/index.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { manifest, load_component } from "../app";
|
||||
|
||||
export default function prefetchRoutes(pathnames: string[]) {
|
||||
if (!manifest) throw new Error(`You must call init() first`);
|
||||
|
||||
return manifest.pages
|
||||
.filter(route => {
|
||||
if (!pathnames) return true;
|
||||
return pathnames.some(pathname => route.pattern.test(pathname));
|
||||
})
|
||||
.reduce((promise: Promise<any>, route) => promise.then(() => {
|
||||
return Promise.all(route.parts.map(part => part && load_component(part.component)));
|
||||
}), Promise.resolve());
|
||||
}
|
||||
138
templates/src/client/start/index.ts
Normal file
138
templates/src/client/start/index.ts
Normal file
@@ -0,0 +1,138 @@
|
||||
import {
|
||||
cid,
|
||||
history,
|
||||
initial_data,
|
||||
navigate,
|
||||
scroll_history,
|
||||
scroll_state,
|
||||
select_route,
|
||||
set_store,
|
||||
set_target,
|
||||
uid,
|
||||
set_uid,
|
||||
set_cid
|
||||
} from '../app';
|
||||
import prefetch from '../prefetch/index';
|
||||
import { Store } from '../types';
|
||||
|
||||
export default function start(opts: {
|
||||
target: Node,
|
||||
store?: (data: any) => Store
|
||||
}) {
|
||||
if ('scrollRestoration' in history) {
|
||||
history.scrollRestoration = 'manual';
|
||||
}
|
||||
|
||||
set_target(opts.target);
|
||||
if (opts.store) set_store(opts.store);
|
||||
|
||||
window.addEventListener('click', handle_click);
|
||||
window.addEventListener('popstate', handle_popstate);
|
||||
|
||||
// prefetch
|
||||
window.addEventListener('touchstart', trigger_prefetch);
|
||||
window.addEventListener('mousemove', handle_mousemove);
|
||||
|
||||
return Promise.resolve().then(() => {
|
||||
const { hash, href } = window.location;
|
||||
|
||||
const deep_linked = hash && document.getElementById(hash.slice(1));
|
||||
scroll_history[uid] = deep_linked ?
|
||||
{ x: 0, y: deep_linked.getBoundingClientRect().top } :
|
||||
scroll_state();
|
||||
|
||||
history.replaceState({ id: uid }, '', href);
|
||||
|
||||
if (!initial_data.error) {
|
||||
const target = select_route(new URL(window.location.href));
|
||||
if (target) return navigate(target, uid);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let mousemove_timeout: NodeJS.Timer;
|
||||
|
||||
function handle_mousemove(event: MouseEvent) {
|
||||
clearTimeout(mousemove_timeout);
|
||||
mousemove_timeout = setTimeout(() => {
|
||||
trigger_prefetch(event);
|
||||
}, 20);
|
||||
}
|
||||
|
||||
function trigger_prefetch(event: MouseEvent | TouchEvent) {
|
||||
const a: HTMLAnchorElement = <HTMLAnchorElement>find_anchor(<Node>event.target);
|
||||
if (!a || a.rel !== 'prefetch') return;
|
||||
|
||||
prefetch(a.href);
|
||||
}
|
||||
|
||||
function handle_click(event: MouseEvent) {
|
||||
// Adapted from https://github.com/visionmedia/page.js
|
||||
// MIT license https://github.com/visionmedia/page.js#license
|
||||
if (which(event) !== 1) return;
|
||||
if (event.metaKey || event.ctrlKey || event.shiftKey) return;
|
||||
if (event.defaultPrevented) return;
|
||||
|
||||
const a: HTMLAnchorElement | SVGAElement = <HTMLAnchorElement | SVGAElement>find_anchor(<Node>event.target);
|
||||
if (!a) return;
|
||||
|
||||
if (!a.href) return;
|
||||
|
||||
// check if link is inside an svg
|
||||
// in this case, both href and target are always inside an object
|
||||
const svg = typeof a.href === 'object' && a.href.constructor.name === 'SVGAnimatedString';
|
||||
const href = String(svg ? (<SVGAElement>a).href.baseVal : a.href);
|
||||
|
||||
if (href === window.location.href) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
// Ignore if tag has
|
||||
// 1. 'download' attribute
|
||||
// 2. rel='external' attribute
|
||||
if (a.hasAttribute('download') || a.getAttribute('rel') === 'external') return;
|
||||
|
||||
// Ignore if <a> has a target
|
||||
if (svg ? (<SVGAElement>a).target.baseVal : a.target) return;
|
||||
|
||||
const url = new URL(href);
|
||||
|
||||
// Don't handle hash changes
|
||||
if (url.pathname === window.location.pathname && url.search === window.location.search) return;
|
||||
|
||||
const target = select_route(url);
|
||||
if (target) {
|
||||
navigate(target, null);
|
||||
event.preventDefault();
|
||||
history.pushState({ id: cid }, '', url.href);
|
||||
}
|
||||
}
|
||||
|
||||
function which(event: MouseEvent) {
|
||||
return event.which === null ? event.button : event.which;
|
||||
}
|
||||
|
||||
function find_anchor(node: Node) {
|
||||
while (node && node.nodeName.toUpperCase() !== 'A') node = node.parentNode; // SVG <a> elements have a lowercase name
|
||||
return node;
|
||||
}
|
||||
|
||||
function handle_popstate(event: PopStateEvent) {
|
||||
scroll_history[cid] = scroll_state();
|
||||
|
||||
if (event.state) {
|
||||
const url = new URL(window.location.href);
|
||||
const target = select_route(url);
|
||||
if (target) {
|
||||
navigate(target, event.state.id);
|
||||
} else {
|
||||
window.location.href = window.location.href;
|
||||
}
|
||||
} else {
|
||||
// hashchange
|
||||
set_uid(uid + 1);
|
||||
set_cid(uid);
|
||||
history.replaceState({ id: cid }, '', window.location.href);
|
||||
}
|
||||
}
|
||||
68
templates/src/client/types.ts
Normal file
68
templates/src/client/types.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
export type Params = Record<string, string>;
|
||||
export type Query = Record<string, string | true>;
|
||||
export type RouteData = { params: Params, query: Query, path: string };
|
||||
|
||||
type Child = {
|
||||
segment?: string;
|
||||
props?: any;
|
||||
component?: Component;
|
||||
};
|
||||
|
||||
export type RootProps = {
|
||||
path: string;
|
||||
params: Record<string, string>;
|
||||
query: Record<string, string>;
|
||||
child: Child;
|
||||
};
|
||||
|
||||
export interface ComponentConstructor {
|
||||
new (options: { target: Node, data: any, store: Store, hydrate: boolean }): Component;
|
||||
preload: (props: { params: Params, query: Query }) => Promise<any>;
|
||||
};
|
||||
|
||||
export interface Component {
|
||||
set: (data: any) => void;
|
||||
destroy: () => void;
|
||||
}
|
||||
|
||||
export type ComponentLoader = {
|
||||
js: () => Promise<{ default: ComponentConstructor }>,
|
||||
css: string[]
|
||||
};
|
||||
|
||||
export type Page = {
|
||||
pattern: RegExp;
|
||||
parts: Array<{
|
||||
component: ComponentLoader;
|
||||
params?: (match: RegExpExecArray) => Record<string, string>;
|
||||
}>;
|
||||
};
|
||||
|
||||
export type Manifest = {
|
||||
ignore: RegExp[];
|
||||
root: ComponentConstructor;
|
||||
error: () => Promise<{ default: ComponentConstructor }>;
|
||||
pages: Page[]
|
||||
};
|
||||
|
||||
export type ScrollPosition = {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
|
||||
export type Target = {
|
||||
url: URL;
|
||||
path: string;
|
||||
page: Page;
|
||||
match: RegExpExecArray;
|
||||
query: Record<string, string | true>;
|
||||
};
|
||||
|
||||
export type Redirect = {
|
||||
statusCode: number;
|
||||
location: string;
|
||||
};
|
||||
|
||||
export type Store = {
|
||||
get: () => any;
|
||||
}
|
||||
Reference in New Issue
Block a user