Svelte: Shorter syntax idea : send a false property by prefixing property name by '!'

Created on 19 Apr 2020  路  2Comments  路  Source: sveltejs/svelte

Describe the solution you'd like

The purpose of this issue is to suggest a shortcut to send a falsy property to a child component.

Currently, the only way to do so it's to use <Foo x={false} />.

As a property with no value (<Foo myTrueValue />) is consider as truthy, my idea is to create a shorter syntax : a property will be falsy if its name starts with an exclamation mark.
So <Foo !x /> will be equivalent to <Foo x={false} />

#
Describe alternatives you've considered

The only alternative is too using the existing way <Foo x={false} />.

Some people will say that you can set false as default value for your property (which will be shorter in add). But sometimes, you could want true to be the default and using a property to negate the value.

#
How important is this feature to you?

This feature is not related to a personal problem but only an idea to improve Svelte by adding a new syntax shortcut.

_If this new syntax will be confusing for developers ?_
Javascript developers are already familiar with the fact that an exclamation mark inverts a value. So, if a property with no value is consider as true, I don't think they could misunderstood that a property starting by '!' is false...

#
Additional context

_Is it a breaking change ?_ It's a very particular case !

By now, you can already send a property starting by an exclamation but can't get the value in the child component. In fact, in JavaScript, variables started with '!' are not allowed :

<script>
    export let !x = "whatever"; // Unexpected token (2:8)
</script>

So, the only way to retrieve this property is to using $$props :

<script>
    let x = $$props['!x']
</script>

So, it is a breaking change ? It is in this really particular : start a property name with an exclamation mark (which I consider as is a really _really_ bad practice...) and use $$props as backup solution to get property value...

#
What is your opinion ?
(Thanks for you time anyway 馃槂)

Most helpful comment

I admit to not being a fan of this change. I think we should opt for keeping our (HTMLx) surface API to a minimum; the ones we've already employed are pretty much necessary, and this particular suggestion is just syntactic sugar for something that's already pretty easy to do.

All 2 comments

I admit to not being a fan of this change. I think we should opt for keeping our (HTMLx) surface API to a minimum; the ones we've already employed are pretty much necessary, and this particular suggestion is just syntactic sugar for something that's already pretty easy to do.

I agree with @arxpoetica - it's "nice" in that I like the syntactic sugar, but it would break linters, existing tooling, and a Svelte template would no longer be valid HTML, so going to close this.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

angelozehr picture angelozehr  路  3Comments

Rich-Harris picture Rich-Harris  路  3Comments

ricardobeat picture ricardobeat  路  3Comments

davidcallanan picture davidcallanan  路  3Comments

bestguy picture bestguy  路  3Comments