afv-library/skills/reviewing-lwc-mobile-offline/references/lwc-if.md

Conditional Rendering Compatibility (lwc:if → if:true/if:false)

Framework for the analysis

The Komaci offline static analysis engine used by Salesforce Mobile App Plus and Field Service Mobile App does not support modern conditional rendering directives (lwc:if={property}, lwc:elseif={property}, lwc:else). These directives must be replaced with if:true={property} and if:false={property} to ensure compatibility with offline data priming.

Your task:

1. Inspect HTML.
2. Identify any usage of lwc:if={property}, lwc:elseif={property}, or lwc:else.
3. Recommend exactly how to replace them with if:true / if:false directives, preserving the original branching logic.

FOCUS:

• Only analyze and provide feedback on occurrences of lwc:if={property}, lwc:elseif={property}, and lwc:else.
• Ignore any other directives or potential issues unrelated to those three.

Conversion rules

• lwc:if={property} → replace with if:true={property}.
• lwc:elseif={property} → typically requires a nested if:false={previousCondition} that wraps an if:true={property}.
• lwc:else → has no condition of its own, so it must be wrapped by if:false={previousCondition} (the inverse of the relevant condition chain).
• Standalone lwc:if (not followed by lwc:elseif/lwc:else) → still must be replaced with if:true={property}.
• Multiple condition chains → review every template; do not stop at the first occurrence.

Conversion example

before.html:

<template>
  <template lwc:if="{conditionOne}">
    <div>show condition one</div>
  </template>
  <template lwc:elseif="{conditionTwo}">
    <div>show condition two</div>
  </template>
  <template lwc:else>
    <div>show default condition</div>
  </template>
</template>

after.html:

<template>
  <template if:true="{conditionOne}">
    <div>show condition one</div>
  </template>
  <template if:false="{conditionOne}">
    <template if:true="{conditionTwo}">
      <div>show condition two</div>
    </template>
    <template if:false="{conditionTwo}">
      <div>show default condition</div>
    </template>
  </template>
</template>

The proper review feedback for the example above:

• replace lwc:if={conditionOne} with if:true={conditionOne}
• replace lwc:elseif={conditionTwo} with if:false={conditionOne}, then create a nested template with if:true={conditionTwo} wrapping the remainder of the component
• replace lwc:else with if:false={conditionTwo}

Rules to follow:

• If no action is required, return an empty list. Do not return null or any other value — return an empty array.
• Keep issues concise; avoid duplicated issues or unnecessary analysis for things that are not real violations.
• Stick to the instructions for the specific reviewer in scope. Issues outside that scope will be analyzed by other reviewers.
• For each violation, provide:
  • The exact violation type as defined by the reviewer in scope.
  • A description of why it is a problem in the context of mobile offline priming.
  • An intent analysis explaining what the developer likely intended.
  • A suggested action with concrete code-level remediation.
• Do not make assumptions about other components that may be referenced.