Merge pull request #642 from sveltejs/context-stores

give each app its own page, preloading and session stores, using context

runtime/internal/Sapper.svelte

@@ -1,12 +0,0 @@
-<script>
-	import { setContext } from 'svelte';
-	import { CONTEXT_KEY } from './shared';
-
-	export let Root;
-	export let props;
-	export let session;
-
-	setContext(CONTEXT_KEY, session);
-</script>
-
-<Root {...props}/>

runtime/internal/shared.mjs

@@ -1,10 +1,5 @@
 import { writable } from 'svelte/store';
 
-export const stores = {
-	preloading: writable(false),
-	page: writable(null)
-};
-
 export const CONTEXT_KEY = {};
 
 export const preload = () => ({});

runtime/src/app/app.ts

@@ -1,7 +1,6 @@
 import { writable } from 'svelte/store.mjs';
 import App from '@sapper/internal/App.svelte';
-import { stores } from '@sapper/internal/shared';
-import { Root, root_preload, ErrorComponent, ignore, components, routes } from '@sapper/internal/manifest-client';
+import { root_preload, ErrorComponent, ignore, components, routes } from '@sapper/internal/manifest-client';
 import {
 	Target,
 	ScrollPosition,
@@ -24,12 +23,16 @@ let current_token: {};
 let root_preloaded: Promise<any>;
 let current_branch = [];
 
-const session = writable(initial_data && initial_data.session);
+const stores = {
+	page: writable({}),
+	preloading: writable(null),
+	session: writable(initial_data && initial_data.session)
+};
 
 let $session;
 let session_dirty: boolean;
 
-session.subscribe(async value => {
+stores.session.subscribe(async value => {
 	$session = value;
 
 	if (!ready) return;
@@ -216,7 +219,11 @@ async function render(redirect: Redirect, branch: any[], props: any, page: Page)
 	if (root_component) {
 		root_component.$set(props);
 	} else {
-		props.session = session;
+		props.stores = {
+			page: { subscribe: stores.page.subscribe },
+			preloading: { subscribe: stores.preloading.subscribe },
+			session: stores.session
+		};
 		props.level0 = {
 			props: await root_preloaded
 		};

runtime/src/app/index.ts

@@ -1,10 +1,7 @@
 import { getContext } from 'svelte';
-import { CONTEXT_KEY, stores } from '@sapper/internal/shared';
+import { CONTEXT_KEY } from '@sapper/internal/shared';
 
-export const preloading = { subscribe: stores.preloading.subscribe };
-export const page = { subscribe: stores.page.subscribe };
-
-export const getSession = () => getContext(CONTEXT_KEY);
+export const stores = () => getContext(CONTEXT_KEY);
 
 export { default as start } from './start/index';
 export { default as goto } from './goto/index';

runtime/src/server/middleware/get_page_handler.ts

@@ -204,10 +204,22 @@ export function get_page_handler(
 			});
 
 			const props = {
+				stores: {
+					page: {
+						subscribe: writable({
+							path: req.path,
+							query: req.query,
+							params
+						}).subscribe
+					},
+					preloading: {
+						subscribe: writable(null).subscribe
+					},
+					session: writable(session)
+				},
 				segments: layout_segments,
 				status: error ? status : 200,
 				error: error ? error instanceof Error ? error : { message: error } : null,
-				session: writable(session),
 				level0: {
 					props: preloaded[0]
 				},
@@ -231,12 +243,6 @@ export function get_page_handler(
 				}
 			}
 
-			stores.page.set({
-				path: req.path,
-				query: req.query,
-				params: params
-			});
-
 			const { html, head, css } = App.render(props);
 
 			const serialized = {

src/core/create_app.ts

@@ -271,14 +271,14 @@ function generate_app(manifest_data: ManifestData, path_to_routes: string) {
 			import Layout from '${get_file(path_to_routes, manifest_data.root)}';
 			import Error from '${get_file(path_to_routes, manifest_data.error)}';
 
-			export let session;
+			export let stores;
 			export let error;
 			export let status;
 			export let segments;
 			export let level0;
 			${levels.map(l => `export let level${l} = null;`).join('\n\t\t\t')}
 
-			setContext(CONTEXT_KEY, session);
+			setContext(CONTEXT_KEY, stores);
 		</script>
 
 		<Layout segment={segments[0]} {...level0.props}>

test/apps/basics/src/routes/[...rest]/deep.svelte

@@ -1,5 +1,6 @@
 <script>
-	import { page } from '@sapper/app';
+	import { stores } from '@sapper/app';
+	const { page } = stores();
 </script>
 
 <h1>{$page.params.rest.join(',')}</h1>

test/apps/basics/src/routes/[...rest]/index.svelte

@@ -1,5 +1,6 @@
 <script>
-	import { page } from '@sapper/app';
+	import { stores } from '@sapper/app';
+	const { page } = stores();
 </script>
 
 <h1>{$page.params.rest.join(',')}</h1>

test/apps/basics/src/routes/[slug].svelte

@@ -1,5 +1,6 @@
 <script>
-	import { page } from '@sapper/app';
+	import { stores } from '@sapper/app';
+	const { page } = stores();
 </script>
 
 <h1>{$page.params.slug.toUpperCase()}</h1>

test/apps/basics/src/routes/echo-query/index.svelte

@@ -1,5 +1,6 @@
 <script>
-	import { page } from '@sapper/app';
+	import { stores } from '@sapper/app';
+	const { page } = stores();
 </script>
 
 <h1>{JSON.stringify($page.query)}</h1>

test/apps/encoding/src/routes/echo/page/[slug].html

@@ -7,7 +7,10 @@
 </script>
 
 <script>
-	import { page } from '@sapper/app';
+	import { stores } from '@sapper/app';
+
+	const { page } = stores();
+
 	export let slug;
 </script>
 

test/apps/layout/src/routes/[x]/[y]/[z].svelte

@@ -9,7 +9,8 @@
 </script>
 
 <script>
-	import { page } from '@sapper/app';
+	import { stores } from '@sapper/app';
+	const { page } = stores();
 
 	export let count;
 </script>

test/apps/layout/src/routes/[x]/[y]/_layout.svelte

@@ -9,7 +9,8 @@
 </script>
 
 <script>
-	import { page } from '@sapper/app';
+	import { stores } from '@sapper/app';
+	const { page } = stores();
 
 	export let count;
 	export let segment;

test/apps/preloading/src/routes/_layout.svelte

@@ -7,12 +7,14 @@
 </script>
 
 <script>
-	import { preloading } from '@sapper/app';
+	import { stores } from '@sapper/app';
 	import { setContext } from 'svelte';
 
 	export let child;
 	export let rootPreloadFunctionRan;
 
+	const { preloading } = stores();
+
 	setContext('x', { rootPreloadFunctionRan });
 </script>
 

test/apps/preloading/src/routes/prefetch/[slug]/index.svelte

@@ -1,5 +1,6 @@
 <script>
-	import { page } from '@sapper/app';
+	import { stores } from '@sapper/app';
+	const { page } = stores();
 </script>
 
 <h1>{$page.params.slug}</h1>

test/apps/session/src/routes/preloaded.svelte

@@ -5,8 +5,8 @@
 </script>
 
 <script>
-	import { getSession } from '@sapper/app';
-	const session = getSession();
+	import { stores } from '@sapper/app';
+	const { session } = stores();
 
 	export let title;
 </script>

test/apps/session/src/routes/session.svelte

@@ -1,6 +1,6 @@
 <script>
-	import { getSession } from '@sapper/app';
-	const session = getSession();
+	import { stores } from '@sapper/app';
+	const { session } = stores();
 </script>
 
 <h1>{$session.title}</h1>