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

Merge pull request #453 from sveltejs/gh-444

Browse Source 
move app logic into templates (#444)
This commit is contained in:
Rich Harris
2018-09-30 21:03:10 -04:00
committed by GitHub
parent ff24877d8f 2e2b8dcd83
commit 4d7d448597
34 changed files with 1617 additions and 1322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -5,6 +5,7 @@ node_modules
cypress/screenshots
test/app/.sapper
test/app/src/manifest
__sapper__
test/app/export
test/app/build
sapper

1
index.js Normal file
View File

@@ -0,0 +1 @@
throw new Error(`As of Sapper 0.22, you should not import 'sapper' directly. See https://sapper.svelte.technology/guide#0-21-to-0-22 for more information`);

1009
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -2,7 +2,6 @@
"name": "sapper",
"version": "0.21.1",
"description": "Military-grade apps, engineered by Svelte",
"main": "dist/middleware.js",
"bin": {
"sapper": "./sapper"
},
@@ -32,6 +31,7 @@
"@types/mocha": "^5.2.5",
"@types/node": "^10.7.1",
"@types/rimraf": "^2.0.2",
"agadoo": "^1.0.1",
"cheap-watch": "^0.3.0",
"compression": "^1.7.1",
"cookie": "^0.3.1",

26
rollup.config.js
View File

@@ -4,6 +4,7 @@ import json from 'rollup-plugin-json';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import pkg from './package.json';
import { builtinModules } from 'module';
const external = [].concat(
Object.keys(pkg.dependencies),
@@ -11,27 +12,37 @@ const external = [].concat(
'sapper/core.js'
);
export default [
{
input: `src/runtime/index.ts`,
function template(kind, external) {
return {
input: `templates/src/${kind}/index.ts`,
output: {
file: `runtime.js`,
file: `templates/dist/${kind}.js`,
format: 'es'
},
external,
plugins: [
resolve(),
commonjs(),
string({
include: '**/*.md'
}),
typescript({
typescript: require('typescript'),
target: "ES2017"
})
]
},
};
}
export default [
template('client', ['__ROOT__', '__ERROR__']),
template('server', builtinModules),
{
input: [
`src/api.ts`,
`src/cli.ts`,
`src/core.ts`,
`src/middleware.ts`,
`src/rollup.ts`,
`src/webpack.ts`
],
@@ -42,9 +53,6 @@ export default [
},
external,
plugins: [
string({
include: '**/*.md'
}),
json(),
resolve(),
commonjs(),

1
runtime/README.md
View File

@@ -1 +0,0 @@
This directory exists for legacy reasons and should be deleted before releasing version 1.

2
runtime/app.js
View File

@@ -1,2 +0,0 @@
console.error('sapper/runtime/app.js has been deprecated in favour of sapper/runtime.js');
export * from '../runtime.js';

11
src/api/build.ts
View File

@@ -3,19 +3,16 @@ import * as path from 'path';
import mkdirp from 'mkdirp';
import rimraf from 'rimraf';
import { EventEmitter } from 'events';
import * as codec from 'sourcemap-codec';
import hash from 'string-hash';
import minify_html from './utils/minify_html';
import { create_compilers, create_main_manifests, create_manifest_data, create_serviceworker_manifest } from '../core';
import * as events from './interfaces';
import { copy_shimport } from './utils/copy_shimport';
import { Dirs, PageComponent } from '../interfaces';
import { CompileResult } from '../core/create_compilers/interfaces';
import { Dirs } from '../interfaces';
import read_template from '../core/read_template';
type Opts = {
legacy: boolean;
bundler: string;
bundler: 'rollup' | 'webpack';
};
export function build(opts: Opts, dirs: Dirs) {
@@ -58,7 +55,7 @@ async function execute(emitter: EventEmitter, opts: Opts, dirs: Dirs) {
// create src/manifest/client.js and src/manifest/server.js
create_main_manifests({ bundler: opts.bundler, manifest_data });
const { client, server, serviceworker } = await create_compilers(opts.bundler, dirs);
const { client, server, serviceworker } = await create_compilers(opts.bundler);
const client_result = await client.compile();
emitter.emit('build', <events.BuildEvent>{
@@ -71,7 +68,7 @@ async function execute(emitter: EventEmitter, opts: Opts, dirs: Dirs) {
if (opts.legacy) {
process.env.SAPPER_LEGACY_BUILD = 'true';
const { client } = await create_compilers(opts.bundler, dirs);
const { client } = await create_compilers(opts.bundler);
const client_result = await client.compile();

6
src/cli.ts
View File

@@ -33,7 +33,7 @@ prog.command('build [dest]')
.option('--bundler', 'Specify a bundler (rollup or webpack, blank for auto)')
.option('--legacy', 'Create separate legacy build')
.example(`build custom-dir -p 4567`)
.action(async (dest = 'build', opts: {
.action(async (dest = '__sapper__/build', opts: {
port: string,
legacy: boolean,
bundler?: string
@@ -80,12 +80,12 @@ prog.command('start [dir]')
prog.command('export [dest]')
.describe('Export your app as static files (if possible)')
.option('--build', '(Re)build app before exporting', true)
.option('--build-dir', 'Specify a custom temporary build directory', '.sapper/prod')
.option('--build-dir', 'Specify a custom temporary build directory', '__sapper__/build')
.option('--basepath', 'Specify a base path')
.option('--timeout', 'Milliseconds to wait for a page (--no-timeout to disable)', 5000)
.option('--legacy', 'Create separate legacy build')
.option('--bundler', 'Specify a bundler (rollup or webpack, blank for auto)')
.action(async (dest = 'export', opts: {
.action(async (dest = '__sapper__/export', opts: {
build: boolean,
legacy: boolean,
bundler?: string,

2
src/config.ts
View File

@@ -7,5 +7,5 @@ export const locations = {
src: () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_SRC || 'src'),
static: () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_STATIC || 'static'),
routes: () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_ROUTES || 'src/routes'),
dest: () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_DEST || `.sapper/${dev() ? 'dev' : 'prod'}`)
dest: () => path.resolve(process.env.SAPPER_BASE || '', process.env.SAPPER_DEST || `__sapper__/${dev() ? 'dev' : 'build'}`)
};

105
src/core/create_manifests.ts
View File

@@ -10,7 +10,7 @@ export function create_main_manifests({ bundler, manifest_data, dev_port }: {
manifest_data: ManifestData;
dev_port?: number;
}) {
const manifest_dir = path.join(locations.src(), 'manifest');
const manifest_dir = '__sapper__';
if (!fs.existsSync(manifest_dir)) fs.mkdirSync(manifest_dir);
const path_to_routes = path.relative(manifest_dir, locations.routes());
@@ -55,7 +55,7 @@ export function create_serviceworker_manifest({ manifest_data, client_files }: {
export const routes = [\n\t${manifest_data.pages.map((r: Page) => `{ pattern: ${r.pattern} }`).join(',\n\t')}\n];
`.replace(/^\t\t/gm, '').trim();
write_if_changed(`${locations.src()}/manifest/service-worker.js`, code);
write_if_changed(`__sapper__/service-worker.js`, code);
}
function generate_client(
@@ -64,92 +64,100 @@ function generate_client(
bundler: string,
dev_port?: number
) {
const template_file = path.resolve(__dirname, '../templates/dist/client.js');
const template = fs.readFileSync(template_file, 'utf-8');
const page_ids = new Set(manifest_data.pages.map(page =>
page.pattern.toString()));
const server_routes_to_ignore = manifest_data.server_routes.filter(route =>
!page_ids.has(route.pattern.toString()));
let code = `
// This file is generated by Sapper — do not edit it!
import root from ${stringify(get_file(path_to_routes, manifest_data.root))};
import error from ${stringify(posixify(`${path_to_routes}/_error.html`))};
const component_indexes: Record<string, number> = {};
const d = decodeURIComponent;
${manifest_data.components.map(component => {
const components = `[
${manifest_data.components.map((component, i) => {
const annotation = bundler === 'webpack'
? `/* webpackChunkName: "${component.name}" */ `
: '';
const source = get_file(path_to_routes, component);
return `const ${component.name} = {
component_indexes[component.name] = i;
return `{
js: () => import(${annotation}${stringify(source)}),
css: "__SAPPER_CSS_PLACEHOLDER:${stringify(component.file, false)}__"
};`;
}).join('\n')}
}`;
}).join(',\n\t\t')}
]`.replace(/^\t/gm, '').trim();
export const manifest = {
ignore: [${server_routes_to_ignore.map(route => route.pattern).join(', ')}],
let needs_decode = false;
pages: [
${manifest_data.pages.map(page => `{
// ${page.parts[page.parts.length - 1].component.file}
pattern: ${page.pattern},
parts: [
${page.parts.map(part => {
if (part === null) return 'null';
let pages = `[
${manifest_data.pages.map(page => `{
// ${page.parts[page.parts.length - 1].component.file}
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}: d(match[${i + 1}])`);
return `{ component: ${part.component.name}, params: match => ({ ${props.join(', ')} }) }`;
}
if (part.params.length > 0) {
needs_decode = true;
const props = part.params.map((param, i) => `${param}: d(match[${i + 1}])`);
return `{ i: ${component_indexes[part.component.name]}, params: match => ({ ${props.join(', ')} }) }`;
}
return `{ component: ${part.component.name} }`;
}).join(',\n\t\t\t\t\t\t')}
]
}`).join(',\n\n\t\t\t\t')}
],
return `{ i: ${component_indexes[part.component.name]} }`;
}).join(',\n\t\t\t\t')}
]
}`).join(',\n\n\t\t')}
]`.replace(/^\t/gm, '').trim();
root,
if (needs_decode) {
pages = `(d => ${pages})(decodeURIComponent)`
}
error
};
// this is included for legacy reasons
export const routes = {};`.replace(/^\t\t/gm, '').trim();
let footer = '';
if (dev()) {
const sapper_dev_client = posixify(
path.resolve(__dirname, '../sapper-dev-client.js')
);
code += `
footer = `
import(${stringify(sapper_dev_client)}).then(client => {
client.connect(${dev_port});
});`.replace(/^\t{3}/gm, '');
}
return code;
return `// This file is generated by Sapper — do not edit it!\n` + template
.replace('__ROOT__', stringify(get_file(path_to_routes, manifest_data.root), false))
.replace('__ERROR__', stringify(posixify(`${path_to_routes}/_error.html`), false))
.replace('__IGNORE__', `[${server_routes_to_ignore.map(route => route.pattern).join(', ')}]`)
.replace('__COMPONENTS__', components)
.replace('__PAGES__', pages) +
footer;
}
function generate_server(
manifest_data: ManifestData,
path_to_routes: string
) {
const template_file = path.resolve(__dirname, '../templates/dist/server.js');
const template = fs.readFileSync(template_file, 'utf-8');
const imports = [].concat(
manifest_data.server_routes.map(route =>
`import * as ${route.name} from ${stringify(posixify(`${path_to_routes}/${route.file}`))};`),
`import * as __${route.name} from ${stringify(posixify(`${path_to_routes}/${route.file}`))};`),
manifest_data.components.map(component =>
`import ${component.name} from ${stringify(get_file(path_to_routes, component))};`),
`import __${component.name} from ${stringify(get_file(path_to_routes, component))};`),
`import root from ${stringify(get_file(path_to_routes, manifest_data.root))};`,
`import error from ${stringify(posixify(`${path_to_routes}/_error.html`))};`
);
let code = `
// This file is generated by Sapper — do not edit it!
${imports.join('\n')}
const d = decodeURIComponent;
@@ -159,7 +167,7 @@ function generate_server(
${manifest_data.server_routes.map(route => `{
// ${route.file}
pattern: ${route.pattern},
handlers: ${route.name},
handlers: __${route.name},
params: ${route.params.length > 0
? `match => ({ ${route.params.map((param, i) => `${param}: d(match[${i + 1}])`).join(', ')} })`
: `() => ({})`}
@@ -177,7 +185,7 @@ function generate_server(
const props = [
`name: "${part.component.name}"`,
`file: ${stringify(part.component.file)}`,
`component: ${part.component.name}`
`component: __${part.component.name}`
];
if (part.params.length > 0) {
@@ -194,12 +202,13 @@ function generate_server(
root,
error
};
};`.replace(/^\t\t/gm, '').trim();
// this is included for legacy reasons
export const routes = {};`.replace(/^\t\t/gm, '').trim();
return code;
return `// This file is generated by Sapper — do not edit it!\n` + template
.replace('__BUILD__DIR__', JSON.stringify(locations.dest()))
.replace('__SRC__DIR__', JSON.stringify(locations.src()))
.replace('__DEV__', dev() ? 'true' : 'false')
.replace(/const manifest = __MANIFEST__;/, code);
}
function get_file(path_to_routes: string, component: PageComponent) {

504
src/runtime/index.ts
View File

@@ -1,504 +0,0 @@
import { detach, findAnchor, scroll_state, which } from './utils';
import { Component, ComponentConstructor, Params, Query, Redirect, Manifest, RouteData, ScrollPosition, Store, Target, ComponentLoader } from './interfaces';
const initial_data = typeof window !== 'undefined' && window.__SAPPER__;
export let root: Component;
let target: Node;
let store: Store;
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) => {},
replaceState: (state: any, title: string, href: string) => {},
scrollRestoration: ''
};
const scroll_history: Record<string, ScrollPosition> = {};
let uid = 1;
let cid: number;
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
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 };
}
}
}
let current_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 < nullable_depth; i += 1) {
if (i === nullable_depth) break;
level = level.props.child;
}
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');
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 = new manifest.root({
target,
data,
store,
hydrate: true
});
}
if (scroll) {
window.scrollTo(scroll.x, scroll.y);
}
Object.assign(root_props, data);
ready = true;
}
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 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);
});
}
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 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 };
});
}
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) {
root.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 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>findAnchor(<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 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
cid = ++uid;
history.replaceState({ id: cid }, '', window.location.href);
}
}
let prefetching: {
href: string;
promise: Promise<{ redirect?: Redirect, data?: any, nullable_depth?: number }>;
} = null;
export function prefetch(href: string) {
const target: Target = select_route(new URL(href, document.baseURI));
if (target && (!prefetching || href !== prefetching.href)) {
prefetching = {
href,
promise: prepare_page(target)
};
}
}
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>findAnchor(<Node>event.target);
if (!a || a.rel !== 'prefetch') return;
prefetch(a.href);
}
let inited: boolean;
let ready = false;
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`);
}
if (opts.routes) {
throw new Error(`As of Sapper 0.15, opts.routes should be opts.manifest`);
}
target = opts.target;
manifest = opts.manifest;
if (opts && opts.store) {
store = opts.store(initial_data.store);
}
if (!inited) { // this check makes HMR possible
window.addEventListener('click', handle_click);
window.addEventListener('popstate', handle_popstate);
// prefetch
window.addEventListener('touchstart', trigger_prefetch);
window.addEventListener('mousemove', handle_mousemove);
inited = true;
}
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);
}
});
}
export 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;
}
export 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());
}
// remove this in 0.9
export { prefetchRoutes as preloadRoutes };

19
src/runtime/utils.ts
View File

@@ -1,19 +0,0 @@
export function detach(node: Node) {
node.parentNode.removeChild(node);
}
export function findAnchor(node: Node) {
while (node && node.nodeName.toUpperCase() !== 'A') node = node.parentNode; // SVG <a> elements have a lowercase name
return node;
}
export function which(event: MouseEvent) {
return event.which === null ? event.button : event.which;
}
export function scroll_state() {
return {
x: window.scrollX,
y: window.scrollY
};
}

372
templates/src/client/app.ts Normal file
View File

@@ -0,0 +1,372 @@
import RootComponent from '__ROOT__';
import ErrorComponent from '__ERROR__';
import {
Target,
ScrollPosition,
Component,
Redirect,
ComponentLoader,
ComponentConstructor,
RootProps,
Page
} from './types';
import goto from './goto';
const ignore = __IGNORE__;
export const components: ComponentLoader[] = __COMPONENTS__;
export const pages: Page[] = __PAGES__;
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 __SAPPER__ !== 'undefined' && __SAPPER__;
const _history = typeof history !== 'undefined' ? history : {
pushState: (state: any, title: string, href: string) => {},
replaceState: (state: any, title: string, href: string) => {},
scrollRestoration: ''
};
export { _history as history };
export const scroll_history: Record<string, ScrollPosition> = {};
export function select_route(url: URL): Target {
if (url.origin !== 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 (ignore.some(pattern => pattern.test(path))) return;
for (let i = 0; i < pages.length; i += 1) {
const page = 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: scrollX,
y: scrollY
};
}
export 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 = {};
return loaded.then(({ redirect, data, nullable_depth }) => {
if (redirect) {
return goto(redirect.location, { replaceState: true });
}
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 RootComponent({
target,
data,
store,
hydrate: true
});
}
if (scroll) {
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) => 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 = RootComponent.preload
? initial_data.preloaded[0] || RootComponent.preload.call(preload_context, {
path,
query,
params: {}
})
: {};
}
return Promise.all(page.parts.map((part, i) => {
if (i < changed_from) return null;
if (!part) return null;
return load_component(components[part.i]).then(Component => {
const req = {
path,
query,
params: part.params ? part.params(target.match) : {}
};
let preloaded;
if (ready || !initial_data.preloaded[i + 1]) {
preloaded = Component.preload
? Component.preload.call(preload_context, req)
: {};
} else {
preloaded = initial_data.preloaded[i + 1];
}
return Promise.resolve(preloaded).then(preloaded => {
return { Component, preloaded };
});
});
})).catch(err => {
error = { statusCode: 500, message: err };
return [];
}).then(results => {
if (root_data) {
return results;
} else {
return Promise.resolve(root_preload).then(value => {
root_data = value;
return results;
});
}
}).then(results => {
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: ErrorComponent,
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);
}

13
templates/src/client/goto/index.ts Normal file
View File

@@ -0,0 +1,13 @@
import { history, select_route, navigate, cid } from '../app';
export default function goto(href: string, opts = { replaceState: false }) {
const target = select_route(new URL(href, document.baseURI));
if (target) {
history[opts.replaceState ? 'replaceState' : 'pushState']({ id: cid }, '', href);
return navigate(target, null).then(() => {});
}
location.href = href;
return new Promise(f => {}); // never resolves
}

4
templates/src/client/index.ts Normal file
View 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
View 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));
}
}

12
templates/src/client/prefetchRoutes/index.ts Normal file
View File

@@ -0,0 +1,12 @@
import { components, pages, load_component } from "../app";
export default function prefetchRoutes(pathnames: string[]) {
return 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(components[part.i])));
}), Promise.resolve());
}

138
templates/src/client/start/index.ts Normal file
View 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);
addEventListener('click', handle_click);
addEventListener('popstate', handle_popstate);
// prefetch
addEventListener('touchstart', trigger_prefetch);
addEventListener('mousemove', handle_mousemove);
return Promise.resolve().then(() => {
const { hash, href } = 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(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 === 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 === location.pathname && url.search === 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(location.href);
const target = select_route(url);
if (target) {
navigate(target, event.state.id);
} else {
location.href = location.href;
}
} else {
// hashchange
set_uid(uid + 1);
set_cid(uid);
history.replaceState({ id: cid }, '', location.href);
}
}

24
src/runtime/interfaces.ts → templates/src/client/types.ts
View File

@@ -1,10 +1,20 @@
import { Store } from '../interfaces';
export { Store };
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>;
@@ -23,7 +33,7 @@ export type ComponentLoader = {
export type Page = {
pattern: RegExp;
parts: Array<{
component: ComponentLoader;
i: number;
params?: (match: RegExpExecArray) => Record<string, string>;
}>;
};
@@ -51,4 +61,8 @@ export type Target = {
export type Redirect = {
statusCode: number;
location: string;
};
};
export type Store = {
get: () => any;
}

1
templates/src/server/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as middleware } from './middleware/index';

327
src/middleware.ts → templates/src/server/middleware/get_page_handler.ts
View File

@@ -1,301 +1,30 @@
import * as fs from 'fs';
import * as path from 'path';
import { URL } from 'url';
import { ClientRequest, ServerResponse } from 'http';
import cookie from 'cookie';
import devalue from 'devalue';
import fetch from 'node-fetch';
import { lookup } from './middleware/mime';
import { locations, dev } from './config';
import sourceMapSupport from 'source-map-support';
import read_template from './core/read_template';
import { URL } from 'url';
import { build_dir, dev, src_dir, IGNORE } from '../placeholders';
import { Manifest, Page, Props, Req, Res, Store } from './types';
sourceMapSupport.install();
type ServerRoute = {
pattern: RegExp;
handlers: Record<string, Handler>;
params: (match: RegExpMatchArray) => Record<string, string>;
};
type Page = {
pattern: RegExp;
parts: Array<{
name: string;
component: Component;
params?: (match: RegExpMatchArray) => Record<string, string>;
}>
};
type Manifest = {
server_routes: ServerRoute[];
pages: Page[];
root: Component;
error: Component;
}
type Handler = (req: Req, res: ServerResponse, next: () => void) => void;
type Store = {
get: () => any
};
type Props = {
path: string;
query: Record<string, string>;
params: Record<string, string>;
error?: { message: string };
status?: number;
child: {
segment: string;
component: Component;
props: Props;
};
[key: string]: any;
};
interface Req extends ClientRequest {
url: string;
baseUrl: string;
originalUrl: string;
method: string;
path: string;
params: Record<string, string>;
query: Record<string, string>;
headers: Record<string, string>;
}
interface Component {
render: (data: any, opts: { store: Store }) => {
head: string;
css: { code: string, map: any };
html: string
},
preload: (data: any) => any | Promise<any>
}
const IGNORE = '__SAPPER__IGNORE__';
function toIgnore(uri: string, val: any) {
if (Array.isArray(val)) return val.some(x => toIgnore(uri, x));
if (val instanceof RegExp) return val.test(uri);
if (typeof val === 'function') return val(uri);
return uri.startsWith(val.charCodeAt(0) === 47 ? val : `/${val}`);
}
export default function middleware(opts: {
export function get_page_handler(
manifest: Manifest,
store: (req: Req, res: ServerResponse) => Store,
ignore?: any,
routes?: any // legacy
}) {
if (opts.routes) {
throw new Error(`As of Sapper 0.15, opts.routes should be opts.manifest`);
}
const output = locations.dest();
const { manifest, store, ignore } = opts;
let emitted_basepath = false;
const middleware = compose_handlers([
ignore && ((req: Req, res: ServerResponse, next: () => void) => {
req[IGNORE] = toIgnore(req.path, ignore);
next();
}),
(req: Req, res: ServerResponse, next: () => void) => {
if (req[IGNORE]) return next();
if (req.baseUrl === undefined) {
let { originalUrl } = req;
if (req.url === '/' && originalUrl[originalUrl.length - 1] !== '/') {
originalUrl += '/';
}
req.baseUrl = originalUrl
? originalUrl.slice(0, -req.url.length)
: '';
}
if (!emitted_basepath && process.send) {
process.send({
__sapper__: true,
event: 'basepath',
basepath: req.baseUrl
});
emitted_basepath = true;
}
if (req.path === undefined) {
req.path = req.url.replace(/\?.*/, '');
}
next();
},
fs.existsSync(path.join(output, 'index.html')) && serve({
pathname: '/index.html',
cache_control: dev() ? 'no-cache' : 'max-age=600'
}),
fs.existsSync(path.join(output, 'service-worker.js')) && serve({
pathname: '/service-worker.js',
cache_control: 'no-cache, no-store, must-revalidate'
}),
fs.existsSync(path.join(output, 'service-worker.js.map')) && serve({
pathname: '/service-worker.js.map',
cache_control: 'no-cache, no-store, must-revalidate'
}),
serve({
prefix: '/client/',
cache_control: dev() ? 'no-cache' : 'max-age=31536000, immutable'
}),
get_server_route_handler(manifest.server_routes),
get_page_handler(manifest, store)
].filter(Boolean));
return middleware;
}
function serve({ prefix, pathname, cache_control }: {
prefix?: string,
pathname?: string,
cache_control: string
}) {
const filter = pathname
? (req: Req) => req.path === pathname
: (req: Req) => req.path.startsWith(prefix);
const output = locations.dest();
const cache: Map<string, Buffer> = new Map();
const read = dev()
? (file: string) => fs.readFileSync(path.resolve(output, file))
: (file: string) => (cache.has(file) ? cache : cache.set(file, fs.readFileSync(path.resolve(output, file)))).get(file)
return (req: Req, res: ServerResponse, next: () => void) => {
if (req[IGNORE]) return next();
if (filter(req)) {
const type = lookup(req.path);
try {
const file = decodeURIComponent(req.path.slice(1));
const data = read(file);
res.setHeader('Content-Type', type);
res.setHeader('Cache-Control', cache_control);
res.end(data);
} catch (err) {
res.statusCode = 404;
res.end('not found');
}
} else {
next();
}
};
}
function get_server_route_handler(routes: ServerRoute[]) {
function handle_route(route: ServerRoute, req: Req, res: ServerResponse, next: () => void) {
req.params = route.params(route.pattern.exec(req.path));
const method = req.method.toLowerCase();
// 'delete' cannot be exported from a module because it is a keyword,
// so check for 'del' instead
const method_export = method === 'delete' ? 'del' : method;
const handle_method = route.handlers[method_export];
if (handle_method) {
if (process.env.SAPPER_EXPORT) {
const { write, end, setHeader } = res;
const chunks: any[] = [];
const headers: Record<string, string> = {};
// intercept data so that it can be exported
res.write = function(chunk: any) {
chunks.push(Buffer.from(chunk));
write.apply(res, arguments);
};
res.setHeader = function(name: string, value: string) {
headers[name.toLowerCase()] = value;
setHeader.apply(res, arguments);
};
res.end = function(chunk?: any) {
if (chunk) chunks.push(Buffer.from(chunk));
end.apply(res, arguments);
process.send({
__sapper__: true,
event: 'file',
url: req.url,
method: req.method,
status: res.statusCode,
type: headers['content-type'],
body: Buffer.concat(chunks).toString()
});
};
}
const handle_next = (err?: Error) => {
if (err) {
res.statusCode = 500;
res.end(err.message);
} else {
process.nextTick(next);
}
};
try {
handle_method(req, res, handle_next);
} catch (err) {
handle_next(err);
}
} else {
// no matching handler for method
process.nextTick(next);
}
}
return function find_route(req: Req, res: ServerResponse, next: () => void) {
if (req[IGNORE]) return next();
for (const route of routes) {
if (route.pattern.test(req.path)) {
handle_route(route, req, res, next);
return;
}
}
next();
};
}
function get_page_handler(
manifest: Manifest,
store_getter: (req: Req, res: ServerResponse) => Store
store_getter: (req: Req, res: Res) => Store
) {
const output = locations.dest();
const get_build_info = dev
? () => JSON.parse(fs.readFileSync(path.join(build_dir, 'build.json'), 'utf-8'))
: (assets => () => assets)(JSON.parse(fs.readFileSync(path.join(build_dir, 'build.json'), 'utf-8')));
const get_build_info = dev()
? () => JSON.parse(fs.readFileSync(path.join(output, 'build.json'), 'utf-8'))
: (assets => () => assets)(JSON.parse(fs.readFileSync(path.join(output, 'build.json'), 'utf-8')));
const template = dev
? () => read_template(src_dir)
: (str => () => str)(read_template(build_dir));
const template = dev()
? () => read_template()
: (str => () => str)(read_template(output));
const has_service_worker = fs.existsSync(path.join(build_dir, 'service-worker.js'));
const { server_routes, pages } = manifest;
const error_route = manifest.error;
function handle_error(req: Req, res: ServerResponse, statusCode: number, error: Error | string) {
function handle_error(req: Req, res: Res, statusCode: number, error: Error | string) {
handle_page({
pattern: null,
parts: [
@@ -304,7 +33,7 @@ function get_page_handler(
}, req, res, statusCode, error || new Error('Unknown error in preload function'));
}
function handle_page(page: Page, req: Req, res: ServerResponse, status = 200, error: Error | string = null) {
function handle_page(page: Page, req: Req, res: Res, status = 200, error: Error | string = null) {
const build_info: {
bundler: 'rollup' | 'webpack',
shimport: string | null,
@@ -313,7 +42,7 @@ function get_page_handler(
} = get_build_info();
res.setHeader('Content-Type', 'text/html');
res.setHeader('Cache-Control', dev() ? 'no-cache' : 'max-age=600');
res.setHeader('Cache-Control', dev ? 'no-cache' : 'max-age=600');
// preload main.js and current route
// TODO detect other stuff we can preload? images, CSS, fonts?
@@ -483,7 +212,6 @@ function get_page_handler(
serialized.store && `store:${serialized.store}`
].filter(Boolean).join(',')}};`;
const has_service_worker = fs.existsSync(path.join(locations.dest(), 'service-worker.js'));
if (has_service_worker) {
script += `if('serviceWorker' in navigator)navigator.serviceWorker.register('${req.baseUrl}/service-worker.js');`;
}
@@ -505,6 +233,7 @@ function get_page_handler(
let styles: string;
// TODO make this consistent across apps
// TODO embed build_info in placeholder.ts
if (build_info.css && build_info.css.main) {
const css_chunks = new Set();
if (build_info.css.main) css_chunks.add(build_info.css.main);
@@ -549,7 +278,7 @@ function get_page_handler(
});
}
return function find_route(req: Req, res: ServerResponse, next: () => void) {
return function find_route(req: Req, res: Res, next: () => void) {
if (req[IGNORE]) return next();
if (!server_routes.some(route => route.pattern.test(req.path))) {
@@ -565,24 +294,8 @@ function get_page_handler(
};
}
function compose_handlers(handlers: Handler[]) {
return (req: Req, res: ServerResponse, next: () => void) => {
let i = 0;
function go() {
const handler = handlers[i];
if (handler) {
handler(req, res, () => {
i += 1;
go();
});
} else {
next();
}
}
go();
};
function read_template(dir = build_dir) {
return fs.readFileSync(`${dir}/template.html`, 'utf-8');
}
function try_serialize(data: any) {
@@ -603,4 +316,4 @@ function escape_html(html: string) {
};
return html.replace(/["'&<>]/g, c => `&${chars[c]};`);
}
}

78
templates/src/server/middleware/get_server_route_handler.ts Normal file
View File

@@ -0,0 +1,78 @@
import { IGNORE } from '../placeholders';
import { Req, Res, ServerRoute } from './types';
export function get_server_route_handler(routes: ServerRoute[]) {
function handle_route(route: ServerRoute, req: Req, res: Res, next: () => void) {
req.params = route.params(route.pattern.exec(req.path));
const method = req.method.toLowerCase();
// 'delete' cannot be exported from a module because it is a keyword,
// so check for 'del' instead
const method_export = method === 'delete' ? 'del' : method;
const handle_method = route.handlers[method_export];
if (handle_method) {
if (process.env.SAPPER_EXPORT) {
const { write, end, setHeader } = res;
const chunks: any[] = [];
const headers: Record<string, string> = {};
// intercept data so that it can be exported
res.write = function(chunk: any) {
chunks.push(Buffer.from(chunk));
write.apply(res, arguments);
};
res.setHeader = function(name: string, value: string) {
headers[name.toLowerCase()] = value;
setHeader.apply(res, arguments);
};
res.end = function(chunk?: any) {
if (chunk) chunks.push(Buffer.from(chunk));
end.apply(res, arguments);
process.send({
__sapper__: true,
event: 'file',
url: req.url,
method: req.method,
status: res.statusCode,
type: headers['content-type'],
body: Buffer.concat(chunks).toString()
});
};
}
const handle_next = (err?: Error) => {
if (err) {
res.statusCode = 500;
res.end(err.message);
} else {
process.nextTick(next);
}
};
try {
handle_method(req, res, handle_next);
} catch (err) {
handle_next(err);
}
} else {
// no matching handler for method
process.nextTick(next);
}
}
return function find_route(req: Req, res: Res, next: () => void) {
if (req[IGNORE]) return next();
for (const route of routes) {
if (route.pattern.test(req.path)) {
handle_route(route, req, res, next);
return;
}
}
next();
};
}

143
templates/src/server/middleware/index.ts Normal file
View File

@@ -0,0 +1,143 @@
import * as fs from 'fs';
import * as path from 'path';
import { build_dir, dev, manifest, IGNORE } from '../placeholders';
import { Handler, Req, Res, Store } from './types';
import { get_server_route_handler } from './get_server_route_handler';
import { get_page_handler } from './get_page_handler';
import { lookup } from './mime';
export default function middleware(opts: {
store?: (req: Req, res: Res) => Store,
ignore?: any
} = {}) {
const { store, ignore } = opts;
let emitted_basepath = false;
return compose_handlers([
ignore && ((req: Req, res: Res, next: () => void) => {
req[IGNORE] = should_ignore(req.path, ignore);
next();
}),
(req: Req, res: Res, next: () => void) => {
if (req[IGNORE]) return next();
if (req.baseUrl === undefined) {
let { originalUrl } = req;
if (req.url === '/' && originalUrl[originalUrl.length - 1] !== '/') {
originalUrl += '/';
}
req.baseUrl = originalUrl
? originalUrl.slice(0, -req.url.length)
: '';
}
if (!emitted_basepath && process.send) {
process.send({
__sapper__: true,
event: 'basepath',
basepath: req.baseUrl
});
emitted_basepath = true;
}
if (req.path === undefined) {
req.path = req.url.replace(/\?.*/, '');
}
next();
},
fs.existsSync(path.join(build_dir, 'index.html')) && serve({
pathname: '/index.html',
cache_control: dev ? 'no-cache' : 'max-age=600'
}),
fs.existsSync(path.join(build_dir, 'service-worker.js')) && serve({
pathname: '/service-worker.js',
cache_control: 'no-cache, no-store, must-revalidate'
}),
fs.existsSync(path.join(build_dir, 'service-worker.js.map')) && serve({
pathname: '/service-worker.js.map',
cache_control: 'no-cache, no-store, must-revalidate'
}),
serve({
prefix: '/client/',
cache_control: dev ? 'no-cache' : 'max-age=31536000, immutable'
}),
get_server_route_handler(manifest.server_routes),
get_page_handler(manifest, store)
].filter(Boolean));
}
export function compose_handlers(handlers: Handler[]) {
return (req: Req, res: Res, next: () => void) => {
let i = 0;
function go() {
const handler = handlers[i];
if (handler) {
handler(req, res, () => {
i += 1;
go();
});
} else {
next();
}
}
go();
};
}
export function should_ignore(uri: string, val: any) {
if (Array.isArray(val)) return val.some(x => should_ignore(uri, x));
if (val instanceof RegExp) return val.test(uri);
if (typeof val === 'function') return val(uri);
return uri.startsWith(val.charCodeAt(0) === 47 ? val : `/${val}`);
}
export function serve({ prefix, pathname, cache_control }: {
prefix?: string,
pathname?: string,
cache_control: string
}) {
const filter = pathname
? (req: Req) => req.path === pathname
: (req: Req) => req.path.startsWith(prefix);
const cache: Map<string, Buffer> = new Map();
const read = dev
? (file: string) => fs.readFileSync(path.resolve(build_dir, file))
: (file: string) => (cache.has(file) ? cache : cache.set(file, fs.readFileSync(path.resolve(build_dir, file)))).get(file)
return (req: Req, res: Res, next: () => void) => {
if (req[IGNORE]) return next();
if (filter(req)) {
const type = lookup(req.path);
try {
const file = decodeURIComponent(req.path.slice(1));
const data = read(file);
res.setHeader('Content-Type', type);
res.setHeader('Cache-Control', cache_control);
res.end(data);
} catch (err) {
res.statusCode = 404;
res.end('not found');
}
} else {
next();
}
};
}

0
src/middleware/mime-types.md → templates/src/server/middleware/mime-types.md
View File

0
src/middleware/mime.ts → templates/src/server/middleware/mime.ts
View File

69
templates/src/server/middleware/types.ts Normal file
View File

@@ -0,0 +1,69 @@
import { ClientRequest, ServerResponse } from 'http';
export type ServerRoute = {
pattern: RegExp;
handlers: Record<string, Handler>;
params: (match: RegExpMatchArray) => Record<string, string>;
};
export type Page = {
pattern: RegExp;
parts: Array<{
name: string;
component: Component;
params?: (match: RegExpMatchArray) => Record<string, string>;
}>
};
export type Manifest = {
server_routes: ServerRoute[];
pages: Page[];
root: Component;
error: Component;
}
export type Handler = (req: Req, res: Res, next: () => void) => void;
export type Store = {
get: () => any
};
export type Props = {
path: string;
query: Record<string, string>;
params: Record<string, string>;
error?: { message: string };
status?: number;
child: {
segment: string;
component: Component;
props: Props;
};
[key: string]: any;
};
export interface Req extends ClientRequest {
url: string;
baseUrl: string;
originalUrl: string;
method: string;
path: string;
params: Record<string, string>;
query: Record<string, string>;
headers: Record<string, string>;
}
export interface Res extends ServerResponse {
write: (data: any) => void;
}
export { ServerResponse };
interface Component {
render: (data: any, opts: { store: Store }) => {
head: string;
css: { code: string, map: any };
html: string
},
preload: (data: any) => any | Promise<any>
}

11
templates/src/server/placeholders.ts Normal file
View File

@@ -0,0 +1,11 @@
import { Manifest } from './types';
export const manifest: Manifest = __MANIFEST__;
export const build_dir = __BUILD__DIR__;
export const src_dir = __SRC__DIR__;
export const dev = __DEV__;
export const IGNORE = '__SAPPER__IGNORE__';

10
test/app/src/client.js
View File

@@ -1,14 +1,12 @@
import { init, goto, prefetchRoutes } from '../../../runtime.js';
import { Store } from 'svelte/store.js';
import { manifest } from './manifest/client.js';
import * as sapper from '../__sapper__/client.js';
window.init = () => {
return init({
return sapper.start({
target: document.querySelector('#sapper'),
manifest,
store: data => new Store(data)
});
};
window.prefetchRoutes = prefetchRoutes;
window.goto = goto;
window.prefetchRoutes = sapper.prefetchRoutes;
window.goto = sapper.goto;

10
test/app/src/routes/about.html
View File

@@ -9,17 +9,9 @@
<button class='prefetch' on:click='prefetch("blog/why-the-name")'>Why the name?</button>
<script>
import { goto, prefetch } from '../../../../runtime.js';
import { prefetch } from '../../__sapper__/client.js';
export default {
oncreate() {
window.goto = goto;
},
ondestroy() {
window.goto = null;
},
methods: {
prefetch
}

6
test/app/src/server.js
View File

@@ -2,9 +2,8 @@ import fs from 'fs';
import { resolve } from 'url';
import express from 'express';
import serve from 'serve-static';
import sapper from '../../../dist/middleware.js';
import { Store } from 'svelte/store.js';
import { manifest } from './manifest/server.js';
import * as sapper from '../__sapper__/server.js';
let pending;
let ended;
@@ -92,8 +91,7 @@ const middlewares = [
next();
},
sapper({
manifest,
sapper.middleware({
store: (req, res) => {
return new Store({
title: `${req.hello} ${res.locals.name}`

4
test/app/src/service-worker.js
View File

@@ -1,10 +1,10 @@
import { assets, shell, timestamp, routes } from './manifest/service-worker.js';
import { files, shell, timestamp, routes } from '../__sapper__/service-worker.js';
const ASSETS = `cachetimestamp`;
// `shell` is an array of all the files generated by webpack,
// `assets` is an array of everything in the `assets` directory
const to_cache = shell.concat(assets);
const to_cache = shell.concat(files);
const cached = new Set(to_cache);
self.addEventListener('install', event => {

7
test/app/webpack.config.js
View File

@@ -1,3 +1,4 @@
const path = require('path');
const webpack = require('webpack');
const config = require('../../config/webpack.js');
const sapper_pkg = require('../../package.json');
@@ -29,6 +30,9 @@ module.exports = {
]
},
mode,
optimization: {
minimize: false
},
plugins: [
isDev && new webpack.HotModuleReplacementPlugin()
].filter(Boolean),
@@ -64,6 +68,9 @@ module.exports = {
]
},
mode,
optimization: {
minimize: false
},
performance: {
hints: false // it doesn't matter if server.js is large
}

11
test/common/test.js
View File

@@ -37,10 +37,7 @@ describe('sapper', function() {
process.chdir(path.resolve(__dirname, '../app'));
// clean up after previous test runs
rimraf.sync('export');
rimraf.sync('build');
rimraf.sync('.sapper');
rimraf.sync('start.js');
rimraf.sync('__sapper__');
this.timeout(process.env.CI ? 30000 : 15000);
@@ -74,7 +71,7 @@ function testExport({ basepath = '' }) {
});
it('export all pages', () => {
const dest = path.resolve(__dirname, '../app/export');
const dest = path.resolve(__dirname, '../app/__sapper__/export');
// Pages that should show up in the extraction directory.
const expectedPages = [
@@ -181,10 +178,10 @@ function run({ mode, basepath = '' }) {
base = `http://localhost:${port}`;
if (basepath) base += basepath;
const dir = mode === 'production' ? 'build' : '.sapper';
const dir = mode === 'production' ? '__sapper__/build' : '__sapper__/dev';
if (mode === 'production') {
assert.ok(fs.existsSync('build/index.js'));
assert.ok(fs.existsSync('__sapper__/build/index.js'));
}
proc = require('child_process').fork(`${dir}/server.js`, {