From 7a54cbba69ff015168d92fff21d508e3535af79e Mon Sep 17 00:00:00 2001
From: Tan Li Hau <lhtan93@gmail.com>
Date: Mon, 9 Mar 2020 23:55:45 +0800
Subject: [PATCH] add docs for $$restProps

---
 site/content/docs/02-template-syntax.md                  | 3 +++
 .../tutorial/03-props/04-rest-props/app-a/App.svelte     | 9 +++++++++
 .../tutorial/03-props/04-rest-props/app-a/Input.svelte   | 7 +++++++
 .../tutorial/03-props/04-rest-props/app-b/App.svelte     | 9 +++++++++
 .../tutorial/03-props/04-rest-props/app-b/Input.svelte   | 5 +++++
 site/content/tutorial/03-props/04-rest-props/text.md     | 9 +++++++++
 6 files changed, 42 insertions(+)
 create mode 100644 site/content/tutorial/03-props/04-rest-props/app-a/App.svelte
 create mode 100644 site/content/tutorial/03-props/04-rest-props/app-a/Input.svelte
 create mode 100644 site/content/tutorial/03-props/04-rest-props/app-b/App.svelte
 create mode 100644 site/content/tutorial/03-props/04-rest-props/app-b/Input.svelte
 create mode 100644 site/content/tutorial/03-props/04-rest-props/text.md

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index d25b348254..af00d3da2a 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -113,6 +113,9 @@ An element or component can have multiple spread attributes, interspersed with r
 <Widget {...$$props}/>
 ```
 
+---
+
+*`$$restProps`* references to props that are passed to a component which are not declared with `export`. It is useful for passing down attributes that are not expected as props.
 
 ### Text expressions
 
diff --git a/site/content/tutorial/03-props/04-rest-props/app-a/App.svelte b/site/content/tutorial/03-props/04-rest-props/app-a/App.svelte
new file mode 100644
index 0000000000..f6f2cb9694
--- /dev/null
+++ b/site/content/tutorial/03-props/04-rest-props/app-a/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Input from './Input.svelte';
+
+	export let value = '';
+
+	$: ({ value, ...rest } = $$props);
+</script>
+
+<Input {value} name="email" aria-label="Email" />
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/04-rest-props/app-a/Input.svelte b/site/content/tutorial/03-props/04-rest-props/app-a/Input.svelte
new file mode 100644
index 0000000000..e8c33c3487
--- /dev/null
+++ b/site/content/tutorial/03-props/04-rest-props/app-a/Input.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let value = '';
+
+	$: ({ value, ...rest } = $$props);
+</script>
+
+<input bind:value {...rest} />
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/04-rest-props/app-b/App.svelte b/site/content/tutorial/03-props/04-rest-props/app-b/App.svelte
new file mode 100644
index 0000000000..f6f2cb9694
--- /dev/null
+++ b/site/content/tutorial/03-props/04-rest-props/app-b/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Input from './Input.svelte';
+
+	export let value = '';
+
+	$: ({ value, ...rest } = $$props);
+</script>
+
+<Input {value} name="email" aria-label="Email" />
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/04-rest-props/app-b/Input.svelte b/site/content/tutorial/03-props/04-rest-props/app-b/Input.svelte
new file mode 100644
index 0000000000..295ed6e3e0
--- /dev/null
+++ b/site/content/tutorial/03-props/04-rest-props/app-b/Input.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let value = '';
+</script>
+
+<input bind:value {...$$restProps} />
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/04-rest-props/text.md b/site/content/tutorial/03-props/04-rest-props/text.md
new file mode 100644
index 0000000000..d454742693
--- /dev/null
+++ b/site/content/tutorial/03-props/04-rest-props/text.md
@@ -0,0 +1,9 @@
+---
+title: $$restProps
+---
+
+If you want to pass down props that are not defined with `export`, you can use `$$restProps`:
+
+```html
+<input {...$$restProps}/>
+```
\ No newline at end of file