Compiler fails when using WhileFalse, Match and Change

This:

<StackPanel>
  <Match Value="{activeView}">
      <Case String="error">
          <Change Target="emphasize.Value" Value="true"/>
      </Case>
  </Match>
  <WhileFalse ux:Name="visible" Value="false"/>
  <WhileTrue ux:Name="emphasize" Value="false"/>
</StackPanel>

Produces this error:

# Parsing source code
C:\Users\eivind\Documents\Fuse\Trio5.cache\GeneratedCode\TrioMessage.g.uno(30,59): E1016: Expected ')'
C:\Users\eivind\Documents\Fuse\Trio5.cache\GeneratedCode\TrioMessage.g.uno(30,57): E1039: Expected expression following '>'

Line 30 is this one in the generated uno code:

            var self = new Fuse.Animations.Change<><bool>();

In context:

  public partial class Factory: Uno.UX.IFactory
  {
      internal readonly TrioMessage parent;
      public Factory(TrioMessage parent)
      {
          parent = parent;
      }
      TrioMessage.Fuse_Triggers_WhileBool_bool_Value_Property emphasize_Value_inst;
      static Factory()
      {
      }
      public object New()
      {
          var self = new Fuse.Animations.Change<><bool>();
          self.Value = true;
          return self;
      }
  }

Appreciate the report! I’ll have some time to take a look at this later this evening. I’ll let you know what I find!

I made a sandbox project to play with the code a bit, but then I noticed the original code is a bit odd actually: the Change class is an Animator, which means it’s meant to be used from inside a Trigger. If we ignore the Match and Case classes in the code, the most direct parent for the Change instance ends up being the StackPanel, which won’t work because it’s not a Trigger. This code wouldn’t work as you expect if it had compiled correctly (though I admit the error was certainly not particularly helpful either, hehe).

Match and Case are meant to be used in the same way as Each; they add/remove elements to their parent elements based on conditionals or data. They’re supposed to change the visual tree, not properties on parts of the visual tree, like Triggers and Animators are.

In this case, I’d suggest making a second Observable in your JS code like this:

var activeViewIsError = activeView.map(function(x) {
    return x === "error";
});

Then, you can use WhileTrue with Change, so your original code would be like this instead:

<StackPanel>
  <WhileTrue Value="{activeViewIsError}">
      <Change Target="emphasize.Value" Value="true"/>
  </WhileTrue>
  <WhileFalse ux:Name="visible" Value="false"/>
  <WhileTrue ux:Name="emphasize" Value="false"/>
</StackPanel>

Oh! okay.

I assumed Match/Case would work the same way as WhileTrue. What you suggest is what I had before I tried to use Match/Case, but it’s fine that way too!

Yeah, I admit it’s a bit confusing at first - glad you’re able to get it working tho :slight_smile: