Proposing expanded use of Modifier

[seo-rii]

Describe the problem

Currently, the modifier is limited in event handling. Although the Modifier is a very good way to convey attributes of different personalities, it has yet to be applied elsewhere in the opinion that this could lead to fragmentation of coding conventions. I did a little research on this, and there was a place before that asked me to introduce the modifier elsewhere.

Request to introduce action modifier:
#5759

Request to introduce class modifier (slightly different purpose):
#6046

However, these issues are all in stale due to the above mentioned problem of fragmentation of conventions. I suggest actively introducing modifiers to many places and making them a new "convention."

Describe the proposed solution

The proposed conventions below are just examples. I just think it's better to extend the concept of modifier to other places than events, and if you think of better examples or new types of modifier than these examples, please let me know in the comments.

1. action modifier

<script lang="ts">
    function action(node: HTMLElement, params: any, modifiers: { [key: string]: boolean }){
        if (modifiers.foo) {
            // // do something special
        }
    }
</script>

<div use:action|foo|bar />
<div use:action|leet />

It was taken from #5759.

Passing factors separated by "|" is passed to the third factor of the action.

This example makes it easy to solve the following issues: #7332

Of course, you just need to modify your own code on that issue, but the problem occurs when you use an external library (for example, an "enhance" from the svelteKit). In the case of an action that receives a function as a prop, such as Enhance, the code will become very dirty to pass on other options. However, if we introduce action modifier, we can solve it very neatly.

2. class modifier

<div class='whatever-other-classes' class:on|off={isOn} />
<div class:bg-gray-400|bg-red-400={active}>...</div>

It was taken from #6046.

If you add an "|" after the class and create another class, the class is toggled according to the value of the equation being passed.

3. style modifier

<div style:content|before="*" style:color|important="red">...</div>
<div style:background|hover="red">...</div>

You can modify the properties of other selectors inline by attaching selectors such as before and hover after a style, and you can use important to express !important a little more neatly. (It will be more useful when values are passed to variables.)

In addition, it will be possible to shorten it more neatly by using the modifier in many places like "catch" proposed in #3733. (Introducing modifier to catch specific error)

Alternatives considered

Even if the modifier is not introduced, we will be able to turn over the option in a different way. However, if you introduce a modifier, you will be able to write code in a cleaner way.

Importance

would make my life easier

[adiguba]

Hello,

Indeed, action and class modifier can be very convenient.

On the other hand for style, I am more skeptical for :before and :hover.
There are not concrete elements, and therefore their styles cannot be modified by JavaScript like normal éléments.
It can be possible in an 'hacky' way by creating a stylesheets, but this can have edge effets...

=> In this case I think it's preferable to use a class or CSS variable.

The style|important modifiers is more useful, and precisely it has just been implemented : #7489

[seo-rii]

@adiguba Oh, I missed #7489. Thank you for letting me know!