Merge pull request #87 from phrase/new-ice-support

feat(TSE-832): Use new ICE by default

README.md

@@ -2,28 +2,30 @@
 
 ![Build status](https://github.com/phrase/react-intl-phraseapp/workflows/Test/badge.svg)
 
-react-intl-phraseapp is an addon for [react-intl](https://github.com/yahoo/react-intl) that lets you connect localized react applications to the Phrase In-Context Editor.
+**react-intl-phraseapp** is the official library for integrating [Phrase Strings In-Context Editor](https://support.phrase.com/hc/en-us/articles/5784095916188-In-Context-Editor-Strings) with [react-intl](https://github.com/yahoo/react-intl) in your React application.
 
-## Prerequisites
+## :scroll: Documentation
+
+### Prerequisites
 
 To use react-intl-phraseapp with your application you have to:
 
 * Sign up for a Phrase account: [https://app.phrase.com/signup](https://app.phrase.com/signup)
 * Use the excellent [react-intl](https://github.com/yahoo/react-intl) module by yahoo for localization in your react app
 
-## Demo
+### Demo
 
 You can find a demo project on [GitHub](https://github.com/phrase/react-intl-phraseapp-demo).
 
-## Installation
+### Installation
 
-### via NPM
+#### via NPM
 
 ```bash
 npm install react-intl-phraseapp
 ```
 
-### Build from source
+#### Build from source
 
 You can also build it directly from source to get the latest and greatest:
 
@@ -34,75 +36,79 @@ npm run dist
 ### Development
 
 ```bash
+# install deps
 npm install
 ```
 
-### Configure
+#### Configure
+
+Add the following JavaScript snippet to your react app.
 
 ```js
+import {initializePhraseAppEditor} from 'react-intl-phraseapp'
+
 let config = {
   projectId: '<YOUR_PROJECT_ID>',
   phraseEnabled: true,
   prefix: "[[__",
   suffix: "__]]",
   fullReparse: true
 };
-```
 
-You can find the Project-ID in the Project overview in the PhraseApp Translation Center
+initializePhraseAppEditor(config);
+```
 
-### JavaScript snippet
+You can find the Project-ID in the Project overview in the PhraseApp Translation Center.
 
-Add the following snippet to your react app.
+If this does not work for you, you can also integrate the [JavaScript snippet manually](https://help.phrase.com/help/integrate-in-context-editor-into-any-web-framework).
 
+To use the old version of ICE, use option `useOldICE: true` in your PHRASEAPP_CONFIG or integration options
 ```js
-import {initializePhraseAppEditor} from 'react-intl-phraseapp'
-
 let config = {
   projectId: '<YOUR_PROJECT_ID>',
   phraseEnabled: true,
-  prefix: "[[__",
-  suffix: "__]]",
-  fullReparse: true
+  useOldICE: true,
 };
 
 initializePhraseAppEditor(config);
 ```
 
-If this does not work for you, you can also integrate the [JavaScript snippet manually](https://help.phrase.com/help/integrate-in-context-editor-into-any-web-framework).
-
-### Using the US Datacenter with ICE
+#### Using the US Datacenter with ICE
 
 In addition to `phraseEnabled` and `projectId` in the config, also add the US specific URLs to enable working through the US endpoint.
-```
+```js
   baseUrl: "https://us.app.phrase.com",
   apiBaseUrl: 'https://api.us.app.phrase.com/api/v2',
   oauthEndpointUrl: "https://api.us.app.phrase.com/api/v2/authorizations",
   profileUrl: "https://us.app.phrase.com/settings/profile",
 ```
 
-### Import from react-intl-phraseapp rather than from react-intl
+#### Import from react-intl-phraseapp rather than from react-intl
 
 Find all imports of `FormattedMessage`, and change the source from `react-intl` to `react-intl-phraseapp`.
 
 `import {FormattedMessage} from 'react-intl-phraseapp'`
 
-## Browser support
+### Browser support
 
 This library might not work out of the box for some older browser or IE11. We recommend to add [Babel](https://github.com/babel/babel) to the build pipeline if those browser need to be supported.
 
-## How does it work
+### How does it work
 
 The library inherits common components of the react-intl packages. In case you enabled Phrase by calling `initializePhraseAppEditor` the behaviour of the components will be changed.
 
-## Test
+### Test
 
 Run unit tests using jest:
 
 ```bash
 npm test
 ```
 
-## Get help / support
+## :exclamation: Issues, Questions, Support
+
+Please use [GitHub issues](https://github.com/phrase/react-intl-phraseapp/issues) to share the problem, and we will do our best to answer any questions or to support you in finding a solution.
+
+## :memo: Changelog
 
-Please contact [[email protected]](mailto:[email protected]?subject=[GitHub]%20) and we can take more direct action toward finding a solution.
+Detailed changes for each release are documented in the [changelog](https://github.com/phrase/react-intl-phraseapp/releases).

__tests__/functions.ts

@@ -1,13 +1,24 @@
-import * as functions from '../src/functions'
+import {initializePhraseAppEditor}  from '../src/functions'
 
-const documentHTML = '<!doctype html><html><body><div id="root"></div></body></html>';
-let config = {phraseEnabled: true}
-let phraseEnabled = true
+beforeEach(() => {
+    const scripts =document.getElementsByTagName('script')
+    for(let i =0; i< scripts.length; i++) {
+        scripts[i].remove()
+    }
+})
 
-test('translation should be rendered by default', () => {
-
-    functions.initializePhraseAppEditor(config)
+test('with old ICE: translation should be rendered by default', () => {
+    let config = {phraseEnabled: true, useOldICE: true, forceInitialize: true}
+    initializePhraseAppEditor(config)
 
     expect(document.getElementsByTagName('script')[0].src)
         .toMatch(/https:\/\/app.phrase.com\/assets\/in-context-editor\/2.0\/app.js\?[\d]/);
 });
+
+test('translation should be rendered by default', () => {
+    let config = {phraseEnabled: true, useOldICE: false, forceInitialize: true}
+    initializePhraseAppEditor(config)
+
+    expect(document.getElementsByTagName('script')[0].src)
+        .toMatch('https://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js');
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-intl-phraseapp",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "The In-Context-Editor for react using react-intl",
   "main": "dist/react-intl-phraseapp.js",
   "typings": "./dist/index.d.ts",

src/functions.ts

@@ -8,17 +8,23 @@ function sanitizeConfig(config: any) : any {
 }
 
 export function initializePhraseAppEditor (config: any) {
-  if (phraseAppEditor) return;
+  if (phraseAppEditor && !config.forceInitialize) return;
 
   phraseAppEditor = true;
   (<any>window).PHRASEAPP_ENABLED = config.phraseEnabled;  
   (<any>window).PHRASEAPP_CONFIG = sanitizeConfig(config);
 
   if (config.phraseEnabled) {
       const phraseapp = document.createElement('script');
-      phraseapp.type = 'text/javascript';
+      if (config.useOldICE) {
+        phraseapp.type = 'text/javascript';
+        phraseapp.src = ['https://', 'app.phrase.com/assets/in-context-editor/2.0/app.js?', new Date().getTime()].join('');
+      } else {
+        phraseapp.type = 'module';
+        phraseapp.src = 'https://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js'
+      }
+
       phraseapp.async = true;
-      phraseapp.src = ['https://', 'app.phrase.com/assets/in-context-editor/2.0/app.js?', new Date().getTime()].join('');
       var s = document.getElementsByTagName('script')[0];
       if (s !== undefined) {
         s.parentNode.insertBefore(phraseapp, s);