From 7d3a85c6ae232a3cba20daa975ac997b3f35b186 Mon Sep 17 00:00:00 2001
From: sanconley <52422885+sanconley@users.noreply.github.com>
Date: Tue, 25 Feb 2020 18:20:26 -0800
Subject: [PATCH] site: example of how to use data from preload (#971)

---
 site/content/docs/04-preloading.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/site/content/docs/04-preloading.md b/site/content/docs/04-preloading.md
index bdbd70a6f..6a98c0306 100644
--- a/site/content/docs/04-preloading.md
+++ b/site/content/docs/04-preloading.md
@@ -15,6 +15,13 @@ As seen in the [routing](docs#Routing) section, page components can have an opti
 		return { article };
 	}
 </script>
+
+<script>
+	export let article;
+</script>
+
+<h1>{article.title}</h1>
+
 ```
 
 It lives in a `context="module"` script — see the [tutorial](https://svelte.dev/tutorial/module-exports) — because it's not part of the component instance itself; instead, it runs *before* the component is created, allowing you to avoid flashes while data is fetched.
@@ -37,7 +44,7 @@ So if the example above was `src/routes/blog/[slug].svelte` and the URL was `/bl
 
 ### Return value
 
-If you return a Promise from `preload`, the page will delay rendering until the promise resolves. You can also return a plain object.
+If you return a Promise from `preload`, the page will delay rendering until the promise resolves. You can also return a plain object. In both cases, the values in the object will be passed into the components as props.
 
 When Sapper renders a page on the server, it will attempt to serialize the resolved value (using [devalue](https://github.com/Rich-Harris/devalue)) and include it on the page, so that the client doesn't also need to call `preload` upon initialization. Serialization will fail if the value includes functions or custom classes (cyclical and repeated references are fine, as are built-ins like `Date`, `Map`, `Set` and `RegExp`).