spread props tutorial chapter

site/content/tutorial/03-props/03-spread-props/app-a/App.svelte

@@ -0,0 +1,12 @@
+<script>
+	import Info from './Info.svelte';
+
+	const pkg = {
+		name: 'svelte',
+		version: 3,
+		speed: 'blazing',
+		website: 'https://svelte.technology'
+	};
+</script>
+
+<Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website}/>

site/content/tutorial/03-props/03-spread-props/app-a/Info.svelte

@@ -0,0 +1,12 @@
+<script>
+	export let name;
+	export let version;
+	export let speed;
+	export let website;
+</script>
+
+<p>
+	The <code>{name}</code> package is {speed} fast.
+	Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
+	and <a href={website}>learn more here</a>
+</p>

site/content/tutorial/03-props/03-spread-props/app-b/App.svelte

@@ -0,0 +1,12 @@
+<script>
+	import Info from './Info.svelte';
+
+	const pkg = {
+		name: 'svelte',
+		version: 3,
+		speed: 'blazing',
+		website: 'https://svelte.technology'
+	};
+</script>
+
+<Info {...pkg}/>

site/content/tutorial/03-props/03-spread-props/app-b/Info.svelte

@@ -0,0 +1,12 @@
+<script>
+	export let name;
+	export let version;
+	export let speed;
+	export let website;
+</script>
+
+<p>
+	The <code>{name}</code> package is {speed} fast.
+	Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
+	and <a href={website}>learn more here</a>
+</p>

site/content/tutorial/03-props/03-spread-props/text.md

@@ -0,0 +1,9 @@
+---
+title: Spread props
+---
+
+If you have an object of properties, you can 'spread' them on to a component instead of specifying each one:
+
+```html
+<Info {...pkg}/>
+```

site/static/repl-viewer.css

@@ -59,3 +59,9 @@ button:active {
 button:focus {
 	border-color: #666;
 }
+
+code {
+	background-color: #eee;
+	padding: 0.2em 0.4em;
+	border-radius: 2px;
+}