@preply/react-intl-copycat v2.1.2

1st iteration of Copycat project

See docs for Copycat project (what's Copycat) (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

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