lwc icon indicating copy to clipboard operation
lwc copied to clipboard

feat(template-compiler): add codegen portion for else-if directives

Open jmsjtu opened this issue 1 year ago • 0 comments

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

jmsjtu avatar Aug 09 '22 23:08 jmsjtu