Sync command fails to detect keys from standalone functions

[baptisteArno]

The sync command fails to detect the usage of some keys in functions like this one:

export const convertCollaborationTypeEnumToReadable = (
  t: TFnType,
  type: CollaborationType
) => {
  switch (type) {
    case CollaborationType.READ:
      return t('collaboration.roles.view.label')
    case CollaborationType.WRITE:
      return t('collaboration.roles.edit.label')
    case CollaborationType.FULL_ACCESS:
      return t('collaboration.roles.full.label')
  }
}

Is this intended?

I'm in a React project.

[cyyynthia]

If the file does not import the Tolgee SDK, and does not have a @tolgee- comment, it is skipped to save on processing time, based on the assumption if the SDK is not imported, it most likely is not used. You can "trick" the CLI in processing this file by adding a comment at the top of the file with @tolgee/react (or whatever relevant SDK package name you're using); this should make the CLI not ignore this file.

[JanCizmar]

You can "trick" the CLI in processing this file by adding a comment at the top of the file with @tolgee/react (or whatever relevant SDK package name you're using); this should make the CLI not ignore this file.

That would be a hack. I'd recommend using the magic comment instead. But TFnType is imported from @tolgee/react, isn't it?

[baptisteArno]

Yes, I have this import on the file:

import { TFnType, useTranslate } from '@tolgee/react'

Here is the file: https://github.com/gabrielgpavao/typebot.io/blob/014e44830b64f5b05abe0f67bf0f88f3f4105999/apps/builder/src/features/collaboration/components/CollaborationList.tsx

[cyyynthia]

Oh right, for React the CLI has a rather conservative approach and looks for t only if there was a call to useTranslate in the current scope (so it can properly extract the namespace, or know there is no namespace associated with this t).

Within Tolgee's source code this kind of pattern is moved into a standalone hook which uses its own useTranslate (https://github.com/tolgee/tolgee-platform/blob/main/webapp/src/translationTools/useBatchOperationStatusTranslate.ts)

[baptisteArno]

Hmmm ok got it! Thanks for the clarification :)

[baptisteArno]

In some cases, I definitely prefer using the T element:

import { T } from '@tolgee/react'
import { CollaborationType } from '@typebot.io/prisma'

type Props = { type: CollaborationType }
export const ReadableCollaborationType = ({ type }: Props) => {
  switch (type) {
    case CollaborationType.READ:
      return <T keyName="collaboration.roles.view.label" />
    case CollaborationType.WRITE:
      return <T keyName="collaboration.roles.edit.label" />
    case CollaborationType.FULL_ACCESS:
      return <T keyName="collaboration.roles.full.label" />
  }
}