Plural inline translate?

[ahnpnl]

I see that we have 2 APIs for translate is: useTranslate and inlineTranslate. However, pluralization only has usePlural.

Shouldn't we have inlinePlural as well?

[robisim74]

To prevent the library from growing and growing, becoming unmaintainable, I base the need for the APIs on statistics:

• translate: hundreds, thousands of keys in each app, so the probability that you need to translate outside component$ is very high
• plural: generally few keys (or none): the few keys maybe can be handled differently (by translating them before passing them out of component$)

[ahnpnl]

can I build inlinePlural myself using api that the lib exposes? For example, I see getValue is used in inlineTranslate but it isn't exposed as public API.

[robisim74]

It's not a problem to create an inlinePlural, or make the getValue public so that you could build it: the problem is the Inline plugin.

[ahnpnl]

ahhh I see, I got it now

[ahnpnl]

Btw, the reason why I asked this is because I have this code

export const useTranslateQRL = (): QRL<TranslateFnType> => {
    const context = useSpeakContext();

    return $((translationInput) => {
        if (typeof translationInput === 'string') {
            return qwikInlineTranslate(translationInput, context);
        }

        const { namedValue } = translationInput;
        if (typeof translationInput.count !== 'undefined') {
            // return plural(translationInput.count, translationInput.key, namedValue);
            return '';
        }

        return qwikInlineTranslate(translationInput.key, context, namedValue);
    });
};

export type TranslationDataProviderPropsType<TInputType extends TranslationDataProviderKeyInputsType> = {
    keyInputs: TInputType;
    onResolved$: QRL<(data: TranslationDataType<TInputType>) => JSXNode>;
};

export const TranslationDataProvider = component$(
    <TInputType extends TranslationDataProviderKeyInputsType>({
        keyInputs,
        onResolved$,
    }: TranslationDataProviderPropsType<TInputType>) => {
        const translate = useTranslateQRL();
        const translationData = useComputed$(() => {
            return Object.entries(keyInputs).reduce((acc, [keyProperty, translationInput]) => {
                return {
                    ...acc,
                    [keyProperty]: Array.isArray(translationInput)
                        ? translationInput.map((key) => translate(key))
                        : translate(translationInput),
                };
            }, {}) as TranslationDataType<TInputType>;
        });

        return <>{onResolved$(translationData.value)}</>;
    },
);

The problem is that useTranslate and usePlural cannot be used in useComputed$, with inlineTranslate I can use inside useComputed$ but I miss the pluralization.

Do you have a way to make useTranslate and usePlural to be able to use inside useComputed$?

[robisim74]

No it's not possible, at least in the implementation you provided (inside a QRL, which returns a QRL, used inside useComputed$): in my opinion, you could avoid useComputed$ and useTranslateQrl, and make a simple function.

But you are using the library in an unconventional way: what do you need this library for, if you use it in this way? always in my opinion, you'd be better off loading the data, and accessing it directly through a hashmap model without much complication.

[ahnpnl]

ah this is because I ran into this

export default component$(() => {
       const translate = useTranslate();
 
       return (
             <h1>{ translate('foo')</h1>
             <h1>{ translate('bar')</h1>
             ...so on
       )
})

It's kind of repeating the translate function everywhere so I tried to make something like Resource component to resolve all translations and then just use them as data in render function 😃

[ahnpnl]

oh yeeeee I found a way to workaround the limitation

export const TranslationDataProvider = component$(
    <TInputType extends TranslationDataProviderKeyInputsType>({
        keyInputs,
        onResolved$,
    }: TranslationDataProviderPropsType<TInputType>) => {
        const translate = useTranslate();

        return (
            <>
                {onResolved$(
                    // instead of using `useComputed$`, I put inline directly the resolved translated texts data
                    Object.entries(keyInputs).reduce((acc, [keyProperty, translationInput]) => {
                        return {
                            ...acc,
                            [keyProperty]: Array.isArray(translationInput)
                                ? translationInput.map((key) => translate(key))
                                : translate(translationInput),
                        };
                    }, {}),
                )}
            </>
        );
    },
);

[robisim74]

Yes making a simple function to pass to onResolved$ is what I meant: you can put usePlural in it too. Also translate accepts arrays of keys (and you could avoid to check Array.isArray(translationInput)

[robisim74]

inlinePlural is available from v0.17.0