Add support for accessing host in preload and in page store (#741)

* expose `host` in preload and page store

* add tests

* add --host option to sapper export

* site: mention host in preload and in page store

runtime/src/app/app.ts

@@ -116,15 +116,15 @@ export function select_target(url: URL): Target {
 			const part = route.parts[route.parts.length - 1];
 			const params = part.params ? part.params(match) : {};
 
-			const page = { path, query, params };
+			const page = { host: location.host, path, query, params };
 
 			return { href: url.href, route, match, page };
 		}
 	}
 }
 
 export function handle_error(url: URL) {
-	const { pathname, search } = location;
+	const { host, pathname, search } = location;
 	const { session, preloaded, status, error } = initial_data;
 
 	if (!root_preloaded) {
@@ -149,7 +149,7 @@ export function handle_error(url: URL) {
 
 	}
 	const query = extract_query(search);
-	render(null, [], props, { path: pathname, query, params: {} });
+	render(null, [], props, { host, path: pathname, query, params: {} });
 }
 
 export function scroll_state() {
@@ -296,6 +296,7 @@ export async function hydrate_target(target: Target): Promise<{
 
 	if (!root_preloaded) {
 		root_preloaded = initial_data.preloaded[0] || root_preload.call(preload_context, {
+			host: page.host,
 			path: page.path,
 			query: page.query,
 			params: {}
@@ -333,6 +334,7 @@ export async function hydrate_target(target: Target): Promise<{
 			if (ready || !initial_data.preloaded[i + 1]) {
 				preloaded = preload
 					? await preload.call(preload_context, {
+						host: page.host,
 						path: page.path,
 						query: page.query,
 						params: part.params ? part.params(target.match) : {}

runtime/src/app/types.ts

@@ -56,6 +56,7 @@ export type Redirect = {
 };
 
 export type Page = {
+	host: string;
 	path: string;
 	params: Record<string, string>;
 	query: Record<string, string | string[]>;

runtime/src/server/middleware/get_page_handler.ts

@@ -149,6 +149,7 @@ export function get_page_handler(
 		try {
 			const root_preloaded = manifest.root_preload
 				? manifest.root_preload.call(preload_context, {
+					host: req.headers.host,
 					path: req.path,
 					query: req.query,
 					params: {}
@@ -168,6 +169,7 @@ export function get_page_handler(
 
 					return part.preload
 						? part.preload.call(preload_context, {
+							host: req.headers.host,
 							path: req.path,
 							query: req.query,
 							params
@@ -218,6 +220,7 @@ export function get_page_handler(
 				stores: {
 					page: {
 						subscribe: writable({
+							host: req.headers.host,
 							path: req.path,
 							query: req.query,
 							params

site/content/docs/04-preloading.md

@@ -23,7 +23,7 @@ It lives in a `context="module"` script — see the [tutorial](https://svelte.de
 
 The `preload` function receives two arguments — `page` and `session`.
 
-`page` is a `{ path, params, query }` object where `path` is the URL's pathname, `params` is derived from `path` and the route filename, and `query` is an object of values in the query string.
+`page` is a `{ host, path, params, query }` object where `host` is the URL's host, `path` is its pathname, `params` is derived from `path` and the route filename, and `query` is an object of values in the query string.
 
 So if the example above was `src/routes/blog/[slug].svelte` and the URL was `/blog/some-post?foo=bar&baz`, the following would be true:
 

site/content/docs/07-state-management.md

@@ -14,7 +14,7 @@ Inside a component, get references to the stores like so:
 ```
 
 * `preloading` contains a readonly boolean value, indicating whether or not a navigation is pending
-* `page` contains a readonly `{ path, params, query }` object, identical to that passed to `preload` functions
+* `page` contains a readonly `{ host, path, params, query }` object, identical to that passed to `preload` functions
 * `session` contains whatever data was seeded on the server. It is a [writable store](https://svelte.dev/tutorial/writable-stores), meaning you can update it with new data (for example, after the user logs in) and your app will be refreshed
 
 

src/api/export.ts

@@ -18,6 +18,7 @@ type Opts = {
 	cwd?: string,
 	static?: string,
 	basepath?: string,
+	host_header?: string,
 	timeout?: number | false,
 	concurrent?: number,
 	oninfo?: ({ message }: { message: string }) => void;
@@ -44,6 +45,7 @@ async function _export({
 	build_dir = '__sapper__/build',
 	export_dir = '__sapper__/export',
 	basepath = '',
+	host_header,
 	timeout = 5000,
 	concurrent = 8,
 	oninfo = noop,
@@ -141,6 +143,7 @@ async function _export({
 
 			const r = await Promise.race([
 				fetch(url.href, {
+					headers: { host: host_header || host },
 					redirect: 'manual'
 				}),
 				timeout_deferred.promise

src/cli.ts

@@ -194,6 +194,7 @@ prog.command('export [dest]')
 	.describe('Export your app as static files (if possible)')
 	.option('--build', '(Re)build app before exporting', true)
 	.option('--basepath', 'Specify a base path')
+	.option('--host', 'Host header to use when crawling site')
 	.option('--concurrent', 'Concurrent requests', 8)
 	.option('--timeout', 'Milliseconds to wait for a page (--no-timeout to disable)', 5000)
 	.option('--legacy', 'Create separate legacy build')
@@ -210,6 +211,7 @@ prog.command('export [dest]')
 		legacy: boolean,
 		bundler?: 'rollup' | 'webpack',
 		basepath?: string,
+		host?: string,
 		concurrent: number,
 		timeout: number | false,
 		cwd: string,
@@ -236,6 +238,7 @@ prog.command('export [dest]')
 				build_dir: opts['build-dir'],
 				export_dir: dest,
 				basepath: opts.basepath,
+				host_header: opts.host,
 				timeout: opts.timeout,
 				concurrent: opts.concurrent,
 

test/apps/basics/src/routes/host.svelte

@@ -0,0 +1,6 @@
+<script>
+	import { stores } from '@sapper/app';
+	const { page } = stores();
+</script>
+
+<h1>{$page.host.replace(/:\d+$/, '')}</h1>

test/apps/basics/test.ts

@@ -239,6 +239,15 @@ describe('basics', function() {
 		);
 	});
 
+	it('can access host through page store', async () => {
+		await r.load('/host');
+
+		assert.equal(await r.text('h1'), 'localhost');
+
+		await r.sapper.start();
+		assert.equal(await r.text('h1'), 'localhost');
+	});
+
 	// skipped because Nightmare doesn't seem to focus the <a> correctly
 	it('resets the active element after navigation', async () => {
 		await r.load('/');

test/apps/preloading/src/routes/preload-values/host.svelte

@@ -0,0 +1,13 @@
+<script context="module">
+	export function preload(page) {
+		return {
+			host: page.host
+		};
+	}
+</script>
+
+<script>
+	export let host;
+</script>
+
+<h1>{host.replace(/:\d+$/, '')}</h1>

test/apps/preloading/test.ts

@@ -27,6 +27,15 @@ describe('preloading', function() {
 		assert.equal(await r.text('h1'), 'true');
 	});
 
+	it('retrieves host from preload', async () => {
+		await r.load('/preload-values/host');
+
+		assert.equal(await r.text('h1'), 'localhost');
+
+		await r.sapper.start();
+		assert.equal(await r.text('h1'), 'localhost');
+	});
+
 	it('prevent crash if preload return nothing', async () => {
 		await r.load('/preload-nothing');