From edfff768a1755aea44bf50b51fbc18da9123df10 Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Sat, 9 Mar 2019 09:22:15 -0500
Subject: [PATCH] spread props tutorial chapter

---
 .../03-props/03-spread-props/app-a/App.svelte        | 12 ++++++++++++
 .../03-props/03-spread-props/app-a/Info.svelte       | 12 ++++++++++++
 .../03-props/03-spread-props/app-b/App.svelte        | 12 ++++++++++++
 .../03-props/03-spread-props/app-b/Info.svelte       | 12 ++++++++++++
 .../tutorial/03-props/03-spread-props/text.md        |  9 +++++++++
 site/static/repl-viewer.css                          |  6 ++++++
 6 files changed, 63 insertions(+)
 create mode 100644 site/content/tutorial/03-props/03-spread-props/app-a/App.svelte
 create mode 100644 site/content/tutorial/03-props/03-spread-props/app-a/Info.svelte
 create mode 100644 site/content/tutorial/03-props/03-spread-props/app-b/App.svelte
 create mode 100644 site/content/tutorial/03-props/03-spread-props/app-b/Info.svelte
 create mode 100644 site/content/tutorial/03-props/03-spread-props/text.md

diff --git a/site/content/tutorial/03-props/03-spread-props/app-a/App.svelte b/site/content/tutorial/03-props/03-spread-props/app-a/App.svelte
new file mode 100644
index 0000000000..640e853c57
--- /dev/null
+++ b/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}/>
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/03-spread-props/app-a/Info.svelte b/site/content/tutorial/03-props/03-spread-props/app-a/Info.svelte
new file mode 100644
index 0000000000..7412398244
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/03-spread-props/app-b/App.svelte b/site/content/tutorial/03-props/03-spread-props/app-b/App.svelte
new file mode 100644
index 0000000000..f40d3b89c8
--- /dev/null
+++ b/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}/>
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/03-spread-props/app-b/Info.svelte b/site/content/tutorial/03-props/03-spread-props/app-b/Info.svelte
new file mode 100644
index 0000000000..7412398244
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/03-spread-props/text.md b/site/content/tutorial/03-props/03-spread-props/text.md
new file mode 100644
index 0000000000..800fdd3144
--- /dev/null
+++ b/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}/>
+```
\ No newline at end of file
diff --git a/site/static/repl-viewer.css b/site/static/repl-viewer.css
index 9d682a3961..4c185d5034 100644
--- a/site/static/repl-viewer.css
+++ b/site/static/repl-viewer.css
@@ -58,4 +58,10 @@ button:active {
 
 button:focus {
 	border-color: #666;
+}
+
+code {
+	background-color: #eee;
+	padding: 0.2em 0.4em;
+	border-radius: 2px;
 }
\ No newline at end of file