diff --git a/README.md b/README.md index 46db6b0..d377783 100644 --- a/README.md +++ b/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,12 +36,17 @@ 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: '', phraseEnabled: true, @@ -47,55 +54,50 @@ let config = { 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: '', 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: @@ -103,6 +105,10 @@ Run unit tests using jest: 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 [support@phrase.com](mailto:support@phrase.com?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). \ No newline at end of file diff --git a/__tests__/functions.ts b/__tests__/functions.ts index 42fbdd6..71783f8 100644 --- a/__tests__/functions.ts +++ b/__tests__/functions.ts @@ -1,13 +1,24 @@ -import * as functions from '../src/functions' +import {initializePhraseAppEditor} from '../src/functions' -const documentHTML = '
'; -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'); +}); diff --git a/package.json b/package.json index edf3030..f90d06b 100644 --- a/package.json +++ b/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", diff --git a/src/functions.ts b/src/functions.ts index 0bfdb12..f2c3fb9 100644 --- a/src/functions.ts +++ b/src/functions.ts @@ -8,7 +8,7 @@ function sanitizeConfig(config: any) : any { } export function initializePhraseAppEditor (config: any) { - if (phraseAppEditor) return; + if (phraseAppEditor && !config.forceInitialize) return; phraseAppEditor = true; (window).PHRASEAPP_ENABLED = config.phraseEnabled; @@ -16,9 +16,15 @@ export function initializePhraseAppEditor (config: any) { 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);