Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accept boolean variables in Localized component #543

Open
canova opened this issue Apr 8, 2021 · 0 comments
Open

Accept boolean variables in Localized component #543

canova opened this issue Apr 8, 2021 · 0 comments

Comments

@canova
Copy link
Contributor

canova commented Apr 8, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants