lwc
lwc copied to clipboard
feat(template-compiler): add codegen portion for else-if directives
Details
This PR updates the codegen
portion of the template compiler to handle the new IfBlock
, ElseIfBlock
, and ElseBlock
interfaces.
All if-elseif-else
conditions are converted to ternary operators where the value returned will either be an array, api_iterator
, or api_flatten
.
This means that elements that have more than one child and an IfBlock
as a child must call api_flatten
because the child elements could contain a nested array of vnodes.
ex:
<template>
<template lwc:if={visible}>
Conditional Text
<h1>Happy days!</h1>
</template>
<template lwc:else>
<h1>stranger</h1>
<h1>things</h1>
</template>
<h1>hello</h1>
<h1>world!</h1>
</template>
results in:
function tmpl($api, $cmp, $slotset, $ctx) {
const {
t: api_text,
st: api_static_fragment,
h: api_element,
f: api_flatten,
} = $api;
return api_flatten([
$cmp.visible
? [api_text("Conditional Text"), api_static_fragment($fragment1(), 1)]
: [
api_element("h1", stc0, [api_text("stranger")]),
api_element("h1", stc1, [api_text("things")]),
],
api_static_fragment($fragment2(), 5),
api_static_fragment($fragment3(), 7),
]);
/*LWC compiler vX.X.X*/
}
Does this pull request introduce a breaking change?
- ✅ No, it does not introduce a breaking change.
Does this pull request introduce an observable change?
- ⚠️ Yes, it does include an observable change.
GUS work item
W-11298045