feat: allow link options to be set to true and false (#10039)

* feat: allow link options to be set to true and false

* update docs

* Update .changeset/tricky-laws-camp.md

---------

Co-authored-by: Rich Harris <git@rich-harris.dev>
Co-authored-by: Rich Harris <hello@rich-harris.dev>

Author: 3 people

.changeset/tricky-laws-camp.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': minor
+---
+
+feat: allow link options to be set to `"true"` and `"false"`

documentation/docs/30-advanced/30-link-options.md

@@ -104,7 +104,7 @@ In certain cases, you may wish to disable this behaviour. Adding a `data-sveltek
 
 ## Disabling options
 
-To disable any of these options inside an element where they have been enabled, use the `"off"` value:
+To disable any of these options inside an element where they have been enabled, use the `"false"` value:
 
 ```html
 <div data-sveltekit-preload-data>
@@ -113,7 +113,7 @@ To disable any of these options inside an element where they have been enabled,
 	<a href="/b">b</a>
 	<a href="/c">c</a>
 
-	<div data-sveltekit-preload-data="off">
+	<div data-sveltekit-preload-data="false">
 		<!-- these links will NOT be preloaded -->
 		<a href="/d">d</a>
 		<a href="/e">e</a>
@@ -122,10 +122,8 @@ To disable any of these options inside an element where they have been enabled,
 </div>
 ```
 
-To apply an attribute to an element conditionally, do this:
+To apply an attribute to an element conditionally, do this (`"true"` and `"false"` are both accepted values):
 
 ```html
-<div data-sveltekit-reload={shouldReload ? '' : 'off'}>
-```
-
-> This works because in HTML, `<element attribute>` is equivalent to `<element attribute="">`
+<div data-sveltekit-reload={shouldReload}>
+```

packages/kit/src/runtime/client/utils.js

@@ -32,10 +32,10 @@ const warned = new WeakSet();
 const valid_link_options = /** @type {const} */ ({
 	'preload-code': ['', 'off', 'tap', 'hover', 'viewport', 'eager'],
 	'preload-data': ['', 'off', 'tap', 'hover'],
-	keepfocus: ['', 'off'],
-	noscroll: ['', 'off'],
-	reload: ['', 'off'],
-	replacestate: ['', 'off']
+	keepfocus: ['', 'true', 'off', 'false'],
+	noscroll: ['', 'true', 'off', 'false'],
+	reload: ['', 'true', 'off', 'false'],
+	replacestate: ['', 'true', 'off', 'false']
 });
 
 /**
@@ -176,13 +176,27 @@ export function get_router_options(element) {
 		el = /** @type {Element} */ (parent_element(el));
 	}
 
+	/** @param {string | null} value */
+	function get_option_state(value) {
+		switch (value) {
+			case '':
+			case 'true':
+				return true;
+			case 'off':
+			case 'false':
+				return false;
+			default:
+				return null;
+		}
+	}
+
 	return {
 		preload_code: levels[preload_code ?? 'off'],
 		preload_data: levels[preload_data ?? 'off'],
-		keep_focus: keep_focus === 'off' ? false : keep_focus === '' ? true : null,
-		noscroll: noscroll === 'off' ? false : noscroll === '' ? true : null,
-		reload: reload === 'off' ? false : reload === '' ? true : null,
-		replace_state: replace_state === 'off' ? false : replace_state === '' ? true : null
+		keep_focus: get_option_state(keep_focus),
+		noscroll: get_option_state(noscroll),
+		reload: get_option_state(reload),
+		replace_state: get_option_state(replace_state)
 	};
 }