fluent.js icon indicating copy to clipboard operation
fluent.js copied to clipboard

Accept boolean variables in `Localized` component

Open canova opened this issue 4 years ago • 0 comments

I came across this while working on the i18n of Firefox Profiler. I tried to pass a boolean variable in the Localized's vars attribute like this:

<Localized
  id="CallNodeContextMenu--transform-focus-function"
  attrs={{ title : true }}
  vars={{ isInverted : true }}
>
  <AReactComponent title="...">
    ... 
  </AReactComponent>
</Localized>

And this is the ftl string I'm using:

CallNodeContextMenu--transform-focus-function =
    { $isInverted ->
        [true] Focus on function (inverted)
       *[other] Focus on function
    }
    .title =
        Focusing on a function will remove any sample that does not include that
        function. In addition, it re-roots the call tree so that the function
        is the only root of the tree. This can combine multiple function call sites
        across a profile into one call node.

But this didn't work and I got this warning on my console:

TypeError: Variable type not supported: $isInverted, boolean

I can possibly split them into two different strings and pass these Ids depending on this boolean value, but then, this will mean that I need to duplicate the very long title attribute string. This doesn't seem ideal to me.

I walked around this issue by converting the boolean to number and passing that instead :)

When I checked the code, it looks like there are only 3 types allowed currently. Strings, numbers, and Date objects: https://github.com/projectfluent/fluent.js/blob/a1ac29df2eba6b2e2652fddad96bc454c612acdf/fluent-bundle/src/resolver.ts#L181-L197 I'm not sure if this can be solved with only fluent.js changes, but it would be great to also have the boolean value supported here.

I also wanted to check if this is supported inside Firefox. It's not very common but I can see some occurrences at least.

canova avatar Apr 08 '21 12:04 canova