sveltejs / svelte

Cybernetically enhanced web apps
https://svelte.dev
MIT License
78.18k stars 4.09k forks source link

`$props` aliasing allows invalid names #12626

Open ottomated opened 1 month ago

ottomated commented 1 month ago

Describe the bug

This is syntactically valid:

const { '=;123': alias } = $props();

but obviously, this is not:

<Component =;123="foo" />

Svelte should throw an error on invalid prop names here.

Reproduction

REPL

Logs

No response

System Info

n/a

Severity

annoyance

dummdidumm commented 1 month ago

Related #5903

FoHoOV commented 1 month ago

It allows something like this. Maybe a naming convention which makes sense (not this obviously) is using this "feature" somewhere. I think

<Component "=;123"={"foo"} />

should work though if this is going to be allowed.

7nik commented 1 month ago

But you can easily pass a prop with any name using spreading:

let props = { "=;123": 42 };

<Component {...props} />
7nik commented 1 month ago

I think

<Component "=;123"={"foo"} />

should work though if this is going to be allowed.

It will break the "compatibility" with HTML, and no one uses such names because they only cause headaches in other places. Those who do need it can still use prop spreading, prop aliasing, rest props, etc.

ottomated commented 1 month ago

I think it's fine to allow some special characters here, but definitely not =. <Component ;123="foo" /> surprisingly does compile.

7nik commented 1 month ago

The HTML standard disallows space, ", ', >, /, =, and obviously noncharacters. Anything other can be used in the attribute name.

brunnerh commented 1 month ago

In addition, given that spreading works with anything, I don't think anything should be done here.