@preply/react-intl-copycat

Gogol project

(renamed from copycat)

See docs for Gogol project (what's gogol) (from business perspective)

What it does under the hood:

1. In Crowdin copywriters replace regular translation with the one with the needed format (see docs above), that is made of tags from rich text formatting

2. When PR with translations is opened - we run test, that verifies the correct format of translations with experiments (/src/translations/trans-with-experiment.test.ts)

3. In build time, babel-plugin-react-intl-auto-values-for-copy-with-exp adds values for values prop to FormattedMessage React component (defineMessages way is not supported - it will just use A version), that should handle tags in defined format in runtime. It does it by

   • adding import statement to the file (where FormattedMessage is used) from file, where those values are defined, what is specific to each project (at least in 1st iteration of Copycat). For node-ssr it's src/utils/formattedMessageAbTestValues.tsx.
   • passing named import to values prop (see unit tests for more details)

   That ☝️allows us to customize per project basis, how

   • flags are fetched, tracked and passed to needed component
   • translation visibility is defined (polyfill is loaded)
   • error are logged to Sentry

   and don't blow up bundles size (since webpack reuses same source code)

Runtime requirements

1. Have IntersectionObserver - natively supported or polyfilled. When polyfilling, it's not mandatory to wait for downloading polyfill to render FormattedMessages in your app - Copycat will wait until 'IntersectionObserver' in window and just then will observe elements and log DWH events.

• polyfilling can be done with intersection-observer pkg

Further improvements

0. Enhance FormattedMessage with values from babel plugin for values prop only for cases where specific translation have experiment.
1. create flags from prod on stages as well FE-73

Scale Copycat to project todo list

1. Install package
2. Extract flag names from messages
3. Fetch all flags for Copycat
4. Wrap app with Copycat context (with flag values)
5. Polyfill

• IntersectionObserver
• if it's SSR - also DOMParser

6. Add babel plugin to build system
7. Add tests for translations

What to do if needed string is used in a few places and you need to test it only in a single place?

• current workflow is not tested precisely (since it's a rare case) so be careful 😉

0. Better to prevent possibility of this kind of situations in order to avoid the need of performing all the next steps. How to prevent - always add unique "description" to the source strings, unless you are 100% sure the context of the string will always remain the same (very rare exception).
1. Find in Crowdin the string and remove Copycat's syntax from translations (for all langs - usually only EN & RU) - leave only A version.
2. Add unique "description" prop to <FormattedMessage /> for both usages. Use "dot-case" style for identifiers like that, like search.sendMessageFlow.sendMessageButton. Commit, push & create PR.
3. Run TransPR job for your PR to upload updated source string to Crowdin. Make sure your new strings are translated.
   1. Use regular /dynamic for edu-frontend.
4. Merge PR
5. Upload strings in master to Crowdin (by running Trans job).
6. Remove the branch in Crowdin that was created from your PR (we did that to avoid the case when your changes are deployed to prod w/o translations). So the strings in master become visible ("primary" in Crowdin terminology).
7. Find newly pushed strings in Crowdin and add Copycat's syntax to the needed ones.
8. Run trans job again to get your translations in PR and verify they are there.
9. Update this list if needed (maybe you can skip some step)