Prettier formatted code with line break not recognized by i18n-ally

[jonathanwilke]

When I have a translation key in my t() method that is very long, prettier breaks it into multiple lines and i18n-ally doesn't recognize this. I am using next-intl by @amannn

[amannn]

Must be one of these regexes:

• i18n-ally/src/frameworks/next-intl.ts

  Lines 29 to 38 in d5e0c48

  	usageMatchRegex = [
  	// Basic usage
  	'[^\\w\\d]t\\([\'"`]({key})[\'"`]',
  	// Rich text
  	'[^\\w\\d]t\.rich\\([\'"`]({key})[\'"`]',
  	// Raw text
  	'[^\\w\\d]t\.raw\\([\'"`]({key})[\'"`]',
  	]

• i18n-ally/src/frameworks/next-intl.ts

  Line 85 in d5e0c48

  const regex = /useTranslations\(\s*(['"`](.*?)['"`])?/g

On a related note, I noticed that getTranslator(locale, namespace) should be considered equally to useTranslations when validating namespaces. That should be fixable with a regex adjustment too.

[ZerdoX-x]

Same as #132 but for next-intl. Opened PR for this

[amannn]

Thanks a lot @ZerdoX-x! 🙌

Would you mind addressing the topic with getTranslator mentioned in my comment above too in your PR while you’re at it?

[ZerdoX-x]

I noticed that getTranslator(locale, namespace) should be considered equally to useTranslations when validating namespaces.

Sorry, but I could not understand what exactly do you mean. Maybe due to lack of English language knowledge, maybe because I have never used next-intl.

I can't find getTranslator mention in next-intl.ts. Do you mean that getTranslator is the alias for useTranslations? Anyways looks like I am too unfamiliar with this, so I think it's better to provide another, separate issue and/or PR for this.

[amannn]

next-intl has an API like this:

function Component() {
  const t = useTranslations('Component');
  return <h1>{t('title')}</h1>;
}

useTranslations pre-configures the namespace and t resolves the remaining part. In this example the key Component.title is looked up when resolving the translation.

This scoping is implemented in getScopeRange:

https://github.com/lokalise/i18n-ally/blob/481859c845dd5f31717bc071bf174d6a584562bf/src/frameworks/next-intl.ts#L85C60-L85C60

Similarly, in the Metadata API of Next.js, this API can be used (docs):

import {getTranslator} from 'next-intl/server';
 
export async function generateMetadata({params: {locale}}) {
  const t = await getTranslator(locale, 'Metadata');
 
  return {
    title: t('title')
  };
}

Currently getTranslator isn't considered in getScopeRange though, therefore i18n-ally complains that the title key is missing.

The fix would be to adjust the regex mentioned above that looks for useTranslations. The tricky part might be that useTranslations takes the scope as the first argument, but getTranslator as the second.

But this can of course be handled in a separate issue, I thought I'll bring it up since it seems to be quite related! 🙂

[ZerdoX-x]

@amannn thank you for explanation but I think I am not capable of this, sorry 😅
Let it be separate issue and PR

[amannn]

@ZerdoX-x Sure, I've opened #1017 for this!