Using Trans inside a Plural macro unexpectedly replaces "#" found in variables about js-lingui HOT 5 CLOSED

will be fixed by #1850

from js-lingui.

Hi, I investigated this issue and I believe the core of the issue is that the interpolation here runs before the replaceOctothorpe function that uses the String#replace method. By interpolating first, there is no easy way of knowing where the # originated from in the component hierarchy. Furthermore, by using the String#replace method, only the first occurence is replaced as the provided # pattern here is a string. Currently, there is no escape hatch for the replacement of the # symbol that I know of.

To solve this issue I propose the following: Remove the # related behavior entirely

I believe that a better and simpler solution to include the actual number in a plural sentence is to use the well-established templating approach of Lingui (e.g.: There are ${count} apples). replaceOctothorpe additionally formats the number for you (number style by default), but you may do that as you would anywhere else: There are ${i18n.number(count, ...)} apples. This approach covers more (albeit edge-case) use-case as it allows you to include the number any times, and eliminates the issues related to a bespoke templating systems that sort of goes against the philosophy of the library.

I would love to hear your feedback and please let me know if I missed anything.

from js-lingui.

Thanks for digging into the issue, the "octothorpe" symbol is part of ICU messages spec, so that's why there are here.

from js-lingui.

Thank you for the rapid response. You are correct I did not consider that, so the replacing of the # is correct, except I believe every instance should be replaced. Furthmore, literal # and any other special symbols are supported by enclosing them in single quotes '#' and a single quote is represented by two consecutive ones ''. It is described here. You can check out this online editor.

from js-lingui.

Thanks for fixing this! I'm looking forward to the release which will include the fix :)

from js-lingui.