Gogol project
(renamed from copycat)
See docs for Gogol project (what's gogol) (from business perspective)
What it does under the hood:
-
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
-
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
) -
In build time,
babel-plugin-react-intl-auto-values-for-copy-with-exp
adds values forvalues
prop toFormattedMessage
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 (whereFormattedMessage
is used) from file, where those values are defined, what is specific to each project (at least in 1st iteration of Copycat). Fornode-ssr
it'ssrc/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)
- adding
Runtime requirements
- Have
IntersectionObserver
- natively supported or polyfilled. When polyfilling, it's not mandatory to wait for downloading polyfill to renderFormattedMessage
s 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
- Enhance
FormattedMessage
with values from babel plugin forvalues
prop only for cases where specific translation have experiment. - create flags from prod on stages as well FE-73
Scale Copycat to project todo list
- Install package
- Extract flag names from messages
- Fetch all flags for Copycat
- Wrap app with Copycat context (with flag values)
- Polyfill
- IntersectionObserver
- if it's SSR - also DOMParser
- Add babel plugin to build system
- 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
😉
- 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).
- Find in Crowdin the string and remove Copycat's syntax from translations (for all langs - usually only EN & RU) - leave only A version.
- Add unique "description" prop to
<FormattedMessage />
for both usages. Use "dot-case" style for identifiers like that, likesearch.sendMessageFlow.sendMessageButton
. Commit, push & create PR. - Run
TransPR
job for your PR to upload updated source string to Crowdin. Make sure your new strings are translated.- Use regular
/dynamic
foredu-frontend
.
- Use regular
- Merge PR
- Upload strings in master to Crowdin (by running Trans job).
- 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).
- Find newly pushed strings in Crowdin and add Copycat's syntax to the needed ones.
- Run trans job again to get your translations in PR and verify they are there.
- Update this list if needed (maybe you can skip some step)