lwc icon indicating copy to clipboard operation
lwc copied to clipboard

Ability to use '!' in simple expressions on templates

Open jmsjtu opened this issue 1 year ago • 0 comments

Is your feature request related to a problem? Please describe.

In addition to warning on usages of if:true and if:false as part of issue #3342 we can take a step further and provide a codemod that transforms the usage of if:true and if:false to their equivalent using the new lwc:if, lwc:elseif, and lwc:else directives.

With the currently supported expressions in the template, this transformation is limited as there is no direct equivalent for if:false.

For example,

<template>
    <template if:false={isTrue}>
        <p>1</p>
    </template>
</template>

There is no direct equivalent transformation of lwc:if for this usage of if:false.

Describe the solution you'd like

The proposed solution is to allow the ! negation operator for simple expressions in the template, which would unlock the ability of the codemod to transform if:false to lwc:if.

<template>
    <template if:false={isTrue}>
        <p>1</p>
    </template>
</template>

could now become

<template>
    <template lwc:if={!isTrue}>
        <p>1</p>
    </template>
</template>

Since we are already planning to move towards allowing template expressions in the future, allowing the usage of ! ahead of time should not cause any issues.

Describe alternatives you've considered The alternative is to only transform if:true when possible and ignore transformations of if:false as described in the above scenarios.

Additional context Link to the codemod

jmsjtu avatar Apr 14 '23 17:04 jmsjtu