Skip to content

Accept boolean variables in Localized component #543

@canova

Description

@canova

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:

// Convert the argument to a Fluent type.
switch (typeof arg) {
case "string":
return arg;
case "number":
return new FluentNumber(arg);
case "object":
if (arg instanceof Date) {
return new FluentDateTime(arg.getTime());
}
// eslint-disable-next-line no-fallthrough
default:
scope.reportError(
new TypeError(`Variable type not supported: $${name}, ${typeof arg}`)
);
return new FluentNone(`$${name}`);
}

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions