usePlural extract issue

[tzdesign]

Hi everyone,

thank you so much for this awesome package.

if you have an optional value like this:

const number = useSignal<number>()
const p = usePlural()

return <div>{p(number.value ?? 0,'app.someKey')}</div>

It seems to me, you extract 0 as key here, which is wrong. This way extract is creating 0.json file for each language containing:

{
  "0": {
    "one": "",
    "other": ""
  }
}

I hope in the future I find some time to help you guys out, I really like the approach and except this small issue it works already quite fine.

[robisim74]

Extract & Inline tools use a parser built specifically for this library. Should we extend it into a compiler to cover cases such as null coalescing?

Rather, I think it's simpler and more correct to initialize the signal, instead of adding null coalescing wherever it's used:

const number = useSignal<number>(0)
const p = usePlural()

return <div>{p(number.value, 'app.someKey')}</div>

[tzdesign]

@robisim74 If your backend delivers something which can be null, you have to add a useComputed only for duplicating the same value. If it's to complex, we can work with it, but I was very confused seeing this files.

[robisim74]

t & p closure functions are only placeholders that will be replaced with simple texts in production. They expect as first param a value or an identifier for now.

You can manage null values also in jsx (in my opinion more appropriate):

{number.value && <div>{p(number.value, 'app.someKey')}</div>}

Note. You can't extend a library to cover every single case that occurs (because otherwise it would grow indefinitely). To implement a request you need to:

• that the case is probable to occur
• that there are no simple alternative solutions
• that the implementation covers all analogous cases, in our example null coalescing, logical or, ternary operator and so on

[tzdesign]

Maybe I still not understand how the whole workflow is and I have to read it first.

[robisim74]

Null coalescing inside usePlural is an edge case and as explained in the docs:

The return functions of useTranslate, inlineTranslate and usePlural are parsed and replaced with translated texts at compile time. For this reason, they expect values or identifiers as parameters, and no JavaScript operators

The solution to handle it in jsx has been provided, and therefore this discussion is closed.