msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* disallow fallback values with bindings in runes mode

* on second thoughts

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
pull/9791/head
Rich Harris 1 year ago committed by GitHub
parent c7e626ebbb
commit 24777c335a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 52 additions and 112 deletions
Show Stats Download Patch File Download Diff File

5
.changeset/polite-ravens-study.md
Unescape View File

@ -0,0 +1,5 @@
---
'svelte': patch
---
feat: disallow fallback values with bindings in runes mode

10
packages/svelte/src/compiler/phases/3-transform/client/utils.js
Unescape View File

@ -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)) {

3
packages/svelte/src/constants.js
Unescape View File

@ -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 = [

7
packages/svelte/src/internal/client/runtime.js
Unescape View File

@ -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

4
packages/svelte/tests/runtime-runes/samples/props-bound-fallback/_config.js
Unescape View File

@ -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:`
});

50
packages/svelte/tests/runtime-runes/samples/props-default-value-behavior/_config.js
Unescape View File

@ -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,7 +19,6 @@ export default test({
readonly: 0
readonlyWithDefault: 0
binding: 0
bindingWithDefault: 0
</p>
<button>set bindings to 5</button>
<button>set bindings to undefined</button>
@ -30,7 +28,6 @@ export default test({
readonly:
readonlyWithDefault: 1
binding:
bindingWithDefault: 1
</p>
<button>set bindings to 5</button>
<button>set bindings to undefined</button>
@ -40,7 +37,6 @@ export default test({
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>
@ -96,7 +86,6 @@ export default test({
readonly:
readonlyWithDefault: 1
binding:
bindingWithDefault:
</p>
<button>set bindings to 5</button>
<button>set bindings to undefined</button>
@ -106,7 +95,6 @@ export default test({
readonly: 0
readonlyWithDefault: 0
binding:
bindingWithDefault:
</p>
<button>set bindings to 5</button>
<button>set bindings to undefined</button>
@ -116,7 +104,6 @@ export default test({
readonly:
readonlyWithDefault: 1
binding:
bindingWithDefault:
</p>
<button>set bindings to 5</button>
<button>set bindings to undefined</button>
@ -126,7 +113,6 @@ export default test({
readonly: 0
readonlyWithDefault: 0
binding:
bindingWithDefault:
</p>
<button>set bindings to 5</button>
<button>set bindings to undefined</button>
@ -136,19 +122,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:
bind_readonly_defined: 0
bind_readonlyWithDefault_defined: 0
bind_binding_defined:
bind_bindingWithDefault_defined:
</p>
<button>set everything to 10</button>
@ -169,7 +149,6 @@ export default test({
readonly:
readonlyWithDefault: 1
binding: 5
bindingWithDefault: 5
</p>
<button>set bindings to 5</button>
<button>set bindings to undefined</button>
@ -179,7 +158,6 @@ export default test({
readonly: 0
readonlyWithDefault: 0
binding: 5
bindingWithDefault: 5
</p>
<button>set bindings to 5</button>
<button>set bindings to undefined</button>
@ -189,7 +167,6 @@ export default test({
readonly:
readonlyWithDefault: 1
binding: 5
bindingWithDefault: 5
</p>
<button>set bindings to 5</button>
<button>set bindings to undefined</button>
@ -199,7 +176,6 @@ export default test({
readonly: 0
readonlyWithDefault: 0
binding: 5
bindingWithDefault: 5
</p>
<button>set bindings to 5</button>
<button>set bindings to undefined</button>
@ -209,19 +185,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: 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>
@ -239,7 +209,6 @@ export default test({
readonly: 10
readonlyWithDefault: 10
binding: 10
bindingWithDefault: 10
</p>
<button>set bindings to 5</button>
<button>set bindings to undefined</button>
@ -249,7 +218,6 @@ export default test({
readonly: 10
readonlyWithDefault: 10
binding: 10
bindingWithDefault: 10
</p>
<button>set bindings to 5</button>
<button>set bindings to undefined</button>
@ -259,7 +227,6 @@ export default test({
readonly: 10
readonlyWithDefault: 10
binding: 10
bindingWithDefault: 10
</p>
<button>set bindings to 5</button>
<button>set bindings to undefined</button>
@ -269,7 +236,6 @@ export default test({
readonly: 10
readonlyWithDefault: 10
binding: 10
bindingWithDefault: 10
</p>
<button>set bindings to 5</button>
<button>set bindings to undefined</button>
@ -279,19 +245,13 @@ export default test({
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>
@ -309,7 +269,6 @@ export default test({
readonly:
readonlyWithDefault:
binding:
bindingWithDefault:
</p>
<button>set bindings to 5</button>
<button>set bindings to undefined</button>
@ -319,7 +278,6 @@ export default test({
readonly:
readonlyWithDefault:
binding:
bindingWithDefault:
</p>
<button>set bindings to 5</button>
<button>set bindings to undefined</button>
@ -329,7 +287,6 @@ export default test({
readonly:
readonlyWithDefault:
binding:
bindingWithDefault:
</p>
<button>set bindings to 5</button>
<button>set bindings to undefined</button>
@ -339,7 +296,6 @@ export default test({
readonly:
readonlyWithDefault:
binding:
bindingWithDefault:
</p>
<button>set bindings to 5</button>
<button>set bindings to undefined</button>
@ -349,19 +305,13 @@ export default test({
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>

5
packages/svelte/tests/runtime-runes/samples/props-default-value-behavior/inner.svelte
Unescape View File

@ -1,20 +1,17 @@
<script>
let { readonly, readonlyWithDefault = 1, binding, bindingWithDefault = 1 } = $props();
let { readonly, readonlyWithDefault = 1, binding } = $props();
</script>
<p>
readonly: {readonly}
readonlyWithDefault: {readonlyWithDefault}
binding: {binding}
bindingWithDefault: {bindingWithDefault}
</p>
<button on:click={() => {
binding = 5;
bindingWithDefault = 5;
}}>set bindings to 5</button>
<button on:click={() => {
binding = undefined;
bindingWithDefault = undefined;
}}>set bindings to undefined</button>

32
packages/svelte/tests/runtime-runes/samples/props-default-value-behavior/main.svelte
Unescape View File

@ -4,19 +4,13 @@
let readonly_undefined = $state();
let readonlyWithDefault_undefined = $state();
let binding_undefined = $state();
let bindingWithDefault_undefined = $state();
let readonly_defined = $state(0);
let readonlyWithDefault_defined = $state(0);
let binding_defined = $state(0);
let bindingWithDefault_defined = $state(0);
let bind_readonly_undefined = $state();
let bind_readonlyWithDefault_undefined = $state();
let bind_binding_undefined = $state();
let bind_bindingWithDefault_undefined = $state();
let bind_readonly_defined = $state(0);
let bind_readonlyWithDefault_defined = $state(0);
let bind_binding_defined = $state(0);
let bind_bindingWithDefault_defined = $state(0);
</script>
<p>props undefined:</p>
@ -24,7 +18,6 @@
readonly={readonly_undefined}
readonlyWithDefault={readonlyWithDefault_undefined}
binding={binding_undefined}
bindingWithDefault={bindingWithDefault_undefined}
/>
<p>props defined:</p>
@ -32,23 +25,20 @@
readonly={readonly_defined}
readonlyWithDefault={readonlyWithDefault_defined}
binding={binding_defined}
bindingWithDefault={bindingWithDefault_defined}
/>
<p>bindings undefined:</p>
<Inner
bind:readonly={bind_readonly_undefined}
bind:readonlyWithDefault={bind_readonlyWithDefault_undefined}
readonlyWithDefault={readonlyWithDefault_undefined}
bind:binding={bind_binding_undefined}
bind:bindingWithDefault={bind_bindingWithDefault_undefined}
/>
<p>bindings defined:</p>
<Inner
bind:readonly={bind_readonly_defined}
bind:readonlyWithDefault={bind_readonlyWithDefault_defined}
readonlyWithDefault={readonlyWithDefault_defined}
bind:binding={bind_binding_defined}
bind:bindingWithDefault={bind_bindingWithDefault_defined}
/>
<p>
@ -56,55 +46,37 @@
readonly_undefined: {readonly_undefined}
readonlyWithDefault_undefined: {readonlyWithDefault_undefined}
binding_undefined: {binding_undefined}
bindingWithDefault_undefined: {bindingWithDefault_undefined}
readonly_defined: {readonly_defined}
readonlyWithDefault_defined: {readonlyWithDefault_defined}
binding_defined: {binding_defined}
bindingWithDefault_defined: {bindingWithDefault_defined}
bind_readonly_undefined: {bind_readonly_undefined}
bind_readonlyWithDefault_undefined: {bind_readonlyWithDefault_undefined}
bind_binding_undefined: {bind_binding_undefined}
bind_bindingWithDefault_undefined: {bind_bindingWithDefault_undefined}
bind_readonly_defined: {bind_readonly_defined}
bind_readonlyWithDefault_defined: {bind_readonlyWithDefault_defined}
bind_binding_defined: {bind_binding_defined}
bind_bindingWithDefault_defined: {bind_bindingWithDefault_defined}
</p>
<button on:click={() => {
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;
}}>set everything to 10</button>
<button on:click={() => {
readonly_undefined = undefined;
readonlyWithDefault_undefined = undefined;
binding_undefined = undefined;
bindingWithDefault_undefined = undefined;
readonly_defined = undefined;
readonlyWithDefault_defined = undefined;
binding_defined = undefined;
bindingWithDefault_defined = undefined;
bind_readonly_undefined = undefined;
bind_readonlyWithDefault_undefined = undefined;
bind_binding_undefined = undefined;
bind_bindingWithDefault_undefined = undefined;
bind_readonly_defined = undefined;
bind_readonlyWithDefault_defined = undefined;
bind_binding_defined = undefined;
bind_bindingWithDefault_defined = undefined;
}}>set everything to undefined</button>

2
packages/svelte/tests/snapshot/samples/svelte-element/_expected/client/index.svelte.js
Unescape View File

@ -6,7 +6,7 @@ import * as $ from "svelte/internal";
export default function Svelte_element($$anchor, $$props) {
$.push($$props, true);
let tag = $.prop_source($$props, "tag", 1, 'hr');
let tag = $.prop_source($$props, "tag", 3, 'hr');
/* Init */
var fragment = $.comment($$anchor);
var node = $.child_frag(fragment);

Write Preview
Loading…
Cancel
Save