feat: disallow fallback values with bindings in runes mode (#9784)

Rich-Harris · web-flow · commit 24777c335a85 · 2023-12-05T14:51:11.000-05:00
* disallow fallback values with bindings in runes mode

* on second thoughts

---------

Co-authored-by: Rich Harris &lt;rich.harris@vercel.com&gt;
diff --git a/.changeset/polite-ravens-study.md b/.changeset/polite-ravens-study.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: disallow fallback values with bindings in runes mode
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -1,7 +1,11 @@
 import * as b from '../../../utils/builders.js';
 import { extract_paths, is_simple_expression } from '../../../utils/ast.js';
 import { error } from '../../../errors.js';
-import { PROPS_CALL_DEFAULT_VALUE, PROPS_IS_IMMUTABLE } from '../../../../constants.js';
+import {
+	PROPS_CALL_DEFAULT_VALUE,
+	PROPS_IS_IMMUTABLE,
+	PROPS_IS_RUNES
+} from '../../../../constants.js';
 
 /**
  * @template {import('./types').ClientTransformState} State
@@ -369,6 +373,10 @@ export function get_props_method(binding, state, name, default_value) {
 			flags |= PROPS_IS_IMMUTABLE;
 		}
 
+		if (state.analysis.runes) {
+			flags |= PROPS_IS_RUNES;
+		}
+
 		if (default_value) {
 			// To avoid eagerly evaluating the right-hand-side, we wrap it in a thunk if necessary
 			if (is_simple_expression(default_value)) {
diff --git a/packages/svelte/src/constants.js b/packages/svelte/src/constants.js
@@ -6,7 +6,8 @@ export const EACH_IS_ANIMATED = 1 << 4;
 export const EACH_IS_IMMUTABLE = 1 << 6;
 
 export const PROPS_IS_IMMUTABLE = 1;
-export const PROPS_CALL_DEFAULT_VALUE = 1 << 1;
+export const PROPS_IS_RUNES = 1 << 1;
+export const PROPS_CALL_DEFAULT_VALUE = 1 << 2;
 
 /** List of Element events that will be delegated */
 export const DelegatedEvents = [
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
@@ -2,7 +2,7 @@ import { DEV } from 'esm-env';
 import { subscribe_to_store } from '../../store/utils.js';
 import { EMPTY_FUNC, run_all } from '../common.js';
 import { get_descriptor, get_descriptors, is_array } from './utils.js';
-import { PROPS_CALL_DEFAULT_VALUE, PROPS_IS_IMMUTABLE } from '../../constants.js';
+import { PROPS_CALL_DEFAULT_VALUE, PROPS_IS_IMMUTABLE, PROPS_IS_RUNES } from '../../constants.js';
 
 export const SOURCE = 1;
 export const DERIVED = 1 << 1;
@@ -1428,6 +1428,11 @@ export function prop_source(props_obj, key, flags, default_value) {
 	let value = props[key];
 	const should_set_default_value = value === undefined && default_value !== undefined;
 
+	if (update_bound_prop && default_value !== undefined && (flags & PROPS_IS_RUNES) !== 0) {
+		// TODO consolidate all these random runtime errors
+		throw new Error('Cannot use fallback values with bind:');
+	}
+
 	if (should_set_default_value) {
 		value =
 			// @ts-expect-error would need a cumbersome method overload to type this
diff --git a/packages/svelte/tests/runtime-runes/samples/props-bound-fallback/_config.js b/packages/svelte/tests/runtime-runes/samples/props-bound-fallback/_config.js
@@ -12,5 +12,7 @@ export default test({
 		await btn?.click();
 
 		assert.htmlEqual(target.innerHTML, `<button>1</button><span>1</span>`);
-	}
+	},
+
+	error: `Cannot use fallback values with bind:`
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-behavior/_config.js b/packages/svelte/tests/runtime-runes/samples/props-default-value-behavior/_config.js
@@ -10,7 +10,6 @@ export default test({
 		readonly:
 		readonlyWithDefault: 1
 		binding:
-		bindingWithDefault: 1
 	</p>
 	<button>set bindings to 5</button>
 	<button>set bindings to undefined</button>
@@ -20,27 +19,24 @@ export default test({
 		readonly: 0
 		readonlyWithDefault: 0
 		binding: 0
-		bindingWithDefault: 0
 	</p>
 	<button>set bindings to 5</button>
 	<button>set bindings to undefined</button>
-	
+
 	<p>bindings undefined:</p>
 	<p>
 		readonly:
 		readonlyWithDefault: 1
 		binding:
-		bindingWithDefault: 1
 	</p>
 	<button>set bindings to 5</button>
 	<button>set bindings to undefined</button>
-	
+
 	<p>bindings defined:</p>
 	<p>
 		readonly: 0
 		readonlyWithDefault: 0
 		binding: 0
-		bindingWithDefault: 0
 	</p>
 	<button>set bindings to 5</button>
 	<button>set bindings to undefined</button>
@@ -50,19 +46,13 @@ export default test({
 		readonly_undefined:
 		readonlyWithDefault_undefined:
 		binding_undefined:
-		bindingWithDefault_undefined:
 		readonly_defined: 0
 		readonlyWithDefault_defined: 0
 		binding_defined: 0
-		bindingWithDefault_defined: 0
 		bind_readonly_undefined:
-		bind_readonlyWithDefault_undefined: 1
 		bind_binding_undefined:
-		bind_bindingWithDefault_undefined: 1
 		bind_readonly_defined: 0
-		bind_readonlyWithDefault_defined: 0
 		bind_binding_defined: 0
-		bind_bindingWithDefault_defined: 0
 	</p>
 
 	<button>set everything to 10</button>
@@ -93,64 +83,54 @@ export default test({
 			`
 			<p>props undefined:</p>
 			<p>
-				readonly: 
+				readonly:
 				readonlyWithDefault: 1
 				binding:
-				bindingWithDefault:
 			</p>
 			<button>set bindings to 5</button>
 			<button>set bindings to undefined</button>
-		
+
 			<p>props defined:</p>
 			<p>
 				readonly: 0
 				readonlyWithDefault: 0
 				binding:
-				bindingWithDefault:
 			</p>
 			<button>set bindings to 5</button>
 			<button>set bindings to undefined</button>
-			
+
 			<p>bindings undefined:</p>
 			<p>
 				readonly:
 				readonlyWithDefault: 1
 				binding:
-				bindingWithDefault:
 			</p>
 			<button>set bindings to 5</button>
 			<button>set bindings to undefined</button>
-			
+
 			<p>bindings defined:</p>
 			<p>
 				readonly: 0
 				readonlyWithDefault: 0
 				binding:
-				bindingWithDefault:
 			</p>
 			<button>set bindings to 5</button>
 			<button>set bindings to undefined</button>
-		
+
 			<p>
 				Main:
 				readonly_undefined:
 				readonlyWithDefault_undefined:
 				binding_undefined:
-				bindingWithDefault_undefined:
 				readonly_defined: 0
 				readonlyWithDefault_defined: 0
 				binding_defined: 0
-				bindingWithDefault_defined: 0
 				bind_readonly_undefined:
-				bind_readonlyWithDefault_undefined: 1
 				bind_binding_undefined:
-				bind_bindingWithDefault_undefined:
 				bind_readonly_defined: 0
-				bind_readonlyWithDefault_defined: 0
 				bind_binding_defined:
-				bind_bindingWithDefault_defined:
 			</p>
-		
+
 			<button>set everything to 10</button>
 			<button>set everything to undefined</button>
 		`
@@ -169,61 +149,51 @@ export default test({
 				readonly:
 				readonlyWithDefault: 1
 				binding: 5
-				bindingWithDefault: 5
 			</p>
 			<button>set bindings to 5</button>
 			<button>set bindings to undefined</button>
-		
+
 			<p>props defined:</p>
 			<p>
 				readonly: 0
 				readonlyWithDefault: 0
 				binding: 5
-				bindingWithDefault: 5
 			</p>
 			<button>set bindings to 5</button>
 			<button>set bindings to undefined</button>
-			
+
 			<p>bindings undefined:</p>
 			<p>
 				readonly:
 				readonlyWithDefault: 1
 				binding: 5
-				bindingWithDefault: 5
 			</p>
 			<button>set bindings to 5</button>
 			<button>set bindings to undefined</button>
-			
+
 			<p>bindings defined:</p>
 			<p>
 				readonly: 0
 				readonlyWithDefault: 0
 				binding: 5
-				bindingWithDefault: 5
 			</p>
 			<button>set bindings to 5</button>
 			<button>set bindings to undefined</button>
-		
+
 			<p>
 				Main:
 				readonly_undefined:
 				readonlyWithDefault_undefined:
 				binding_undefined:
-				bindingWithDefault_undefined:
 				readonly_defined: 0
 				readonlyWithDefault_defined: 0
 				binding_defined: 0
-				bindingWithDefault_defined: 0
 				bind_readonly_undefined:
-				bind_readonlyWithDefault_undefined: 1
 				bind_binding_undefined: 5
-				bind_bindingWithDefault_undefined: 5
 				bind_readonly_defined: 0
-				bind_readonlyWithDefault_defined: 0
 				bind_binding_defined: 5
-				bind_bindingWithDefault_defined: 5
 			</p>
-		
+
 			<button>set everything to 10</button>
 			<button>set everything to undefined</button>
 		`
@@ -239,61 +209,51 @@ export default test({
 				readonly: 10
 				readonlyWithDefault: 10
 				binding: 10
-				bindingWithDefault: 10
 			</p>
 			<button>set bindings to 5</button>
 			<button>set bindings to undefined</button>
-		
+
 			<p>props defined:</p>
 			<p>
 				readonly: 10
 				readonlyWithDefault: 10
 				binding: 10
-				bindingWithDefault: 10
 			</p>
 			<button>set bindings to 5</button>
 			<button>set bindings to undefined</button>
-			
+
 			<p>bindings undefined:</p>
 			<p>
 				readonly: 10
 				readonlyWithDefault: 10
 				binding: 10
-				bindingWithDefault: 10
 			</p>
 			<button>set bindings to 5</button>
 			<button>set bindings to undefined</button>
-			
+
 			<p>bindings defined:</p>
 			<p>
 				readonly: 10
 				readonlyWithDefault: 10
 				binding: 10
-				bindingWithDefault: 10
 			</p>
 			<button>set bindings to 5</button>
 			<button>set bindings to undefined</button>
-		
+
 			<p>
 				Main:
 				readonly_undefined: 10
 				readonlyWithDefault_undefined: 10
 				binding_undefined: 10
-				bindingWithDefault_undefined: 10
 				readonly_defined: 10
 				readonlyWithDefault_defined: 10
 				binding_defined: 10
-				bindingWithDefault_defined: 10
 				bind_readonly_undefined: 10
-				bind_readonlyWithDefault_undefined: 10
 				bind_binding_undefined: 10
-				bind_bindingWithDefault_undefined: 10
 				bind_readonly_defined: 10
-				bind_readonlyWithDefault_defined: 10
 				bind_binding_defined: 10
-				bind_bindingWithDefault_defined: 10
 			</p>
-		
+
 			<button>set everything to 10</button>
 			<button>set everything to undefined</button>
 		`
@@ -309,61 +269,51 @@ export default test({
 				readonly:
 				readonlyWithDefault:
 				binding:
-				bindingWithDefault:
 			</p>
 			<button>set bindings to 5</button>
 			<button>set bindings to undefined</button>
-		
+
 			<p>props defined:</p>
 			<p>
 				readonly:
 				readonlyWithDefault:
 				binding:
-				bindingWithDefault:
 			</p>
 			<button>set bindings to 5</button>
 			<button>set bindings to undefined</button>
-			
+
 			<p>bindings undefined:</p>
 			<p>
 				readonly:
 				readonlyWithDefault:
 				binding:
-				bindingWithDefault:
 			</p>
 			<button>set bindings to 5</button>
 			<button>set bindings to undefined</button>
-			
+
 			<p>bindings defined:</p>
 			<p>
 				readonly:
 				readonlyWithDefault:
 				binding:
-				bindingWithDefault:
 			</p>
 			<button>set bindings to 5</button>
 			<button>set bindings to undefined</button>
-		
+
 			<p>
 				Main:
 				readonly_undefined:
 				readonlyWithDefault_undefined:
 				binding_undefined:
-				bindingWithDefault_undefined:
 				readonly_defined:
 				readonlyWithDefault_defined:
 				binding_defined:
-				bindingWithDefault_defined:
 				bind_readonly_undefined:
-				bind_readonlyWithDefault_undefined:
 				bind_binding_undefined:
-				bind_bindingWithDefault_undefined:
 				bind_readonly_defined:
-				bind_readonlyWithDefault_defined:
 				bind_binding_defined:
-				bind_bindingWithDefault_defined:
 			</p>
-		
+
 			<button>set everything to 10</button>
 			<button>set everything to undefined</button>
 		`
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-behavior/inner.svelte b/packages/svelte/tests/runtime-runes/samples/props-default-value-behavior/inner.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/props-default-value-behavior/main.svelte b/packages/svelte/tests/runtime-runes/samples/props-default-value-behavior/main.svelte
diff --git a/packages/svelte/tests/snapshot/samples/svelte-element/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/svelte-element/_expected/client/index.svelte.js

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'svelte': patch
 +---
++
 +feat: disallow fallback values with bindings in runes mode