From 0cf10a361e2a22a4564696c56056f9881d1c4bdf Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 29 Apr 2024 22:46:37 +0200
Subject: [PATCH] docs: note jsdoc syntax for declaring props (#11370)

* docs: note jsdoc syntax for declaring props

closes #10541

* oops
---
 .../src/routes/docs/content/01-api/02-runes.md  | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
index e129662060..ae2ccd510c 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
@@ -490,6 +490,23 @@ let { a, b, c, ...everythingElse }: MyProps = $props();
 >
 > ...TypeScript [widens the type](https://www.typescriptlang.org/play?#code/CYUwxgNghgTiAEAzArgOzAFwJYHtXwBIAHGHIgZwB4AVeAXnilQE8A+ACgEoAueagbgBQgiCAzwA3vAAe9eABYATPAC+c4qQqUp03uQwwsqAOaqOnIfCsB6a-AB6AfiA) of `x` to be `string | number`, instead of erroring.
 
+If you're using JavaScript, you can declare the prop types using JSDoc:
+
+```js
+/** @type {{ x: string }} */
+let { x } = $props();
+
+// or use @typedef if you want to document the properties:
+
+/**
+ * @typedef {Object} MyProps
+ * @property {string} y Some documentation
+ */
+
+/** @type {MyProps} */
+let { y } = $props();
+```
+
 By default props are treated as readonly, meaning reassignments will not propagate upwards and mutations will result in a warning at runtime in development mode. You will also get a runtime error when trying to `bind:` to a readonly prop in a parent component. To declare props as bindable, use [`$bindable()`](#$bindable).
 
 ### What this replaces