There are a bunch of translation keys e.g. in the messages.json file in the fundraising-frontend-content repository that are not used (anymore) in our code. To help us manually cleaning up the messages.json file, we need a list of unused translation keys.

Acceptance criteria:

• We have a script that creates a list of used translation keys from the Vue components (templates and script section)

Implementation hints:
Iterate over the files and look for a call to the functions $t() (inside templates) and translate() (inside script sections that contain, const translate = useI18N({})).
The function call can be multiline (e.g. AddressKnown component, so it's probably best to look for occurrences of $t( and translate( (prepended by a space) and parse from there. The second parameter to the translation function can be ignored, only the first one is relevant for the key

• the translation keys have different sources in the code:
  • standalone strings, e.g. ($t("donation_form_input_name") or $t('membership_success_message', {name: fullName})).
  • dynamically generated keys with prefixes, e.g. ($t("donation_form_amount_" + amount)).
  • variables and function calls, e.g. $t( someLabel )
  • unknown sources - might pop up during the investigation

For ease of implementation, the script should only store standalone strings for comparison with keys in messages.json. The recommendation for the other key types is as follows:

• dynamically generated keys: A quick look at the calls to the translation function shows that most dynamically generated keys (e.g. payment types, intervals, countries) come from files outside of messages.json and can be just ignored by the script. If you encounter dynamic keys for things in messages.json consider
  • moving the keys out of messages into their own files (like we do for payment types etc)
  • using a case statement in the code, with each branch calling translate
• For keys in variables, you have the following options:
  • For computed properties or data, move the translation from the template to the script section. In components with composition API you can use const translate = useI18N({}) to get the translation function, for the option API you can use this.$i18n (but might need to add the $i18n property to the type shim for TypesScript, because that property is not part of the usual Vue properties). See https://stackoverflow.com/a/69103578/130121
  • for properties, try to do the translation in the component that passes the property instead of translating inside the component
  • manually include a fixed list of possible translation keys that the variable can assume and add those values to the list of found keys when the script encounters the variable name
• Unknown sources: We'll figure something out

When you have the list of found translation keys, compare them to the list of keys in messages.json. Ideally, you have two lists:

• Found translation keys from code that are *not* in messages.json - these might be missing and should be added to messages.json
• Keys in messages.json that are not present in the code - these are candidates for deletion from messages.json

In case you write the script in JavaScript/Typescript, this is a StackOverflow answer that explains how to get the difference between two arrays: https://stackoverflow.com/a/33034768/130121