locize 3.2.5 → 4.0.0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 3.3.0
+
+- support i18next-subliminal in clickHandler used in locize iframe
+
 ### 3.2.5
 
 - fix startStandalone: added handler for committed message

package/README.md

@@ -2,68 +2,93 @@
 
 # locize
 
-The locize script enables you to directly connect content from your website / application with your content on your localization project on locize.
+The locize script enables the [incontext editing](https://www.locize.com/docs/context#incontext) feature provided by [locize](https://locize.com).
 
 ## Getting started
 
 Source can be loaded via [npm](https://www.npmjs.com/package/locize), [downloaded](https://github.com/locize/locize/blob/master/locize.min.js) from this repo or loaded from the npm CDN [unpkg.com/locize](https://unpkg.com/locize/locize.min.js).
 
-Adding the script or importing it is enough.
+```html
+<script src="https://unpkg.com/locize/locize.min.js"></script>
+```
+
+Using a module  bundler simplest will be adding the script using npm (or yarn).
 
 ```bash
 npm i locize
 ```
 
-**Hint:** This module runs only in browser.
+**Hint:** This module works only in the browser environment.
 
-### InContext variants
 
-For i18next based solutions (i18next, react-i18next, locizify, ...) there are two options to work with locize incontext:
+# How it works
 
-#### a) Iframe on your page
+The script will parse the page content and pass found segments to locize using the browsers postMessage API. To work a text on your page has to be exactly matched to a segment in the editor by determing the matching namespace and key.
 
-The solution is best in class and uses [i18next-subliminal](https://github.com/i18next/i18next-subliminal) to add information about key and namespace as hidden text to the output of the `i18next.t` calls. Beside that it scans your website based on mutation observer to look out for those texts.
+There are three ways to get the namespace and key:
 
-You can both click text elements on your website or keys in the locize iframe to edit content. Results will always be exact matches based on the namespace and key.
+## 1) Using subliminal
 
-**Hint:** You can bind the ifame to a specific project by setting `ì18next.options.editor = { projectId, version }` or `ì18next.options.backend = { projectId, verstion }` (backend info might already exist when using i18next-locize-backend)
+By default using [locizify](https://github.com/locize/locizify) or the `locizePlugin` the translations on your page will contain hidden text containing that information by using [subliminal](https://github.com/i18next/i18next-subliminal)
 
-**Caveats:** You might have elements that rerender too often in short time. This might will give you a warning output in console that that element change was ignored for passing to the iframe. Consider adding the `data-locize-editor-ignore: true` attribute to the element to ignore it completely.
+## 2) Using data-attributes
 
-#### b) Opening it on https://locize.app
+Extend your html to contain that information 
+
+`data-i18n` -> will pass exact key
 
-Details for setting this up can be found [here](https://docs.locize.com/different-views/incontext)
+`data-i18n-ns` -> will pass namespace name
 
-The solution extracts the text on the clicked element and passes it for a fuzzy search to the parent frame. As the search is fuzzy there is no guarantee for exact results.
+eg.:
 
-**hint** To get exact matches you can add following attributes to the element or it's parent:
+```html
+<div data-i18n-ns="usedNamespace">
+  <p data-i18n="usedKey">
+    Some translated text
+  </p>
+</div>
+
+// or using ns:key
+  <p data-i18n="ns:key">
+    Some translated text
+  </p>
+```
 
-`data-i18n` -> will pass exact key
-`data-i18n-ns` -> will pass namespace name
+Specifing content as [html](https://github.com/i18next/jquery-i18next?tab=readme-ov-file#set-innerhtml-attributes) or [title/placeholder attribute](https://github.com/i18next/jquery-i18next?tab=readme-ov-file#set-different-attribute) is also supported like used in `jquery-i18next`
 
-# Using
+## 3) Lookup in locize
+
+If not using recommended 1) or 2) the script will send the raw texts to the editor which will try an exact search for that text and send the found exact match back (only one result with 100% exact match).
+
+# Setup
 
 ## with locizify
 
 This plugin is already included in [locizify](https://github.com/locize/locizify) >= v4.1.0
 
+** Hint: ** show the incontext editor popup by adding incontext=true query paramenter, i.e. http://localhost:8080?incontext=true
+
 ## with i18next
 
-### this will show the locize incontext editor as a popup in your website only if the url contains the incontext=true query paramenter, i.e. http://localhost:8080?incontext=true
+For i18next we provide a plugin to be used.
+
 ```js
 import { locizePlugin } from 'locize'
 
 i18next.use(locizePlugin)
 ```
 
-### this will show the locize incontext editor as a popup in your website
+** Hint: **  this will show the locize incontext editor as a popup in your website only if the url contains the incontext=true query paramenter, i.e. http://localhost:8080?incontext=true
+
+Open as default:
+
 ```js
 import { locizeEditorPlugin } from 'locize'
 
 i18next.use(locizeEditorPlugin({ show: true }))
 ```
 
-Using react-i18next you might want to bind the editorSaved event to trigger a rerender:
+Using `react-i18next` you might want to bind the editorSaved event to trigger a rerender each time you save changes in the editor:
 
 ```js
 i18next.init({
@@ -74,15 +99,30 @@ i18next.init({
 })
 ```
 
-## without i18next
+**Hint** you can match the integration to a locize project by:
+
+Having [i18next-locize-backend[(https://github.com/locize/i18next-locize-backend) configured or adding
+
+```js
+i18next.init({
+  // ...
+  editor: {
+    projectId="5e9ed7da-51ab-4b15-888b-27903f06be09"
+    version="latest"
+  }
+})
+```
+
+## not using i18next (messageformat, fluent, ...)
 
 Not using i18next currently only the option to show your website inside the locize incontext solution (https://locize.app) is available.
 
-### with other as module
+### using import
 
 ```js
 import { addLocizeSavedHandler, startStandalone, setEditorLng } from 'locize'
 
+// optional
 addLocizeSavedHandler(res => {
   res.updated.forEach(item => {
     const { lng, ns, key, data } = item
@@ -98,7 +138,17 @@ startStandalone()
 setEditorLng(lng)
 ```
 
-### with other in vanilla javascript
+
+**Hint** you can match the integration to a locize project by adding:
+
+```js
+startStandalone({
+  projectId="5e9ed7da-51ab-4b15-888b-27903f06be09"
+  version="latest"
+})
+```
+
+### vanilla javascript
 
 Only relevant when your website is shown inside the locize incontext solution on https://locize.app.
 
@@ -118,7 +168,7 @@ window.locizeSavedHandler = res => {
 window.locizeStartStandalone()
 ```
 
-**Hint** you can fix the integration to a locize project by adding:
+**Hint** you can match the integration to a locize project by adding:
 
 ```js
 <script
@@ -128,15 +178,3 @@ window.locizeStartStandalone()
   src="https://unpkg.com/locize/locize.min.js"
 >
 ```
-
-### turn on/off click interception programmatically
-
-```js
-import { turnOn, turnOff } from 'locize'
-
-let isOff
-
-// or use window.locize.turnOn
-isOff = turnOff() // -> true
-isOff = turnOn() // -> false
-```

package/dist/cjs/{processLegacy.js → _processLegacy.js}

@@ -11,8 +11,7 @@ require('./api/handleRequestPopupChanges.js');
 require('./api/handleRequestResourceBundle.js');
 require('./api/handleSelectedKeys.js');
 require('./api/handleIsLocizeEnabled.js');
-require('./api/handleTurnOn.js');
-require('./api/handleTurnOff.js');
+require('./api/handleSendMatchedUninstrumented.js');
 var postMessage = require('./api/postMessage.js');
 var clickHandler = require('./clickHandler.js');
 

package/dist/cjs/{startStandalone.js → _startStandalone.js}

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var processLegacy = require('./processLegacy.js');
+var _processLegacy = require('./_processLegacy.js');
 
 function startStandalone() {
-  processLegacy.startLegacy({
+  _processLegacy.startLegacy({
     getLocizeDetails: function getLocizeDetails() {
       return {};
     },

package/dist/cjs/api/handleCommitKeys.js

@@ -4,6 +4,7 @@ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var postMessage = require('./postMessage.js');
 var store = require('../store.js');
 var handleEditKey = require('./handleEditKey.js');
+var highlightNode = require('../ui/highlightNode.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,6 +26,12 @@ function handler(payload) {
       });
     }
     postMessage.api.i18n.setResource(lng, ns, key, data.value);
+    if (metas) {
+      Object.values(metas).forEach(function (m) {
+        var sItem = store.store.get(m.eleUniqueID);
+        highlightNode.recalcSelectedHighlight(sItem, sItem.node, sItem.keys);
+      });
+    }
   });
   Object.values(store.store.data).forEach(function (item) {
     if (item.originalChildNodes) {

package/dist/cjs/api/handleEditKey.js

@@ -9,7 +9,7 @@ var store = require('../store.js');
 function setValueOnNode(meta, value) {
   var item = store.store.get(meta.eleUniqueID);
   if (!item || !item.keys[meta.textType]) return;
-  var txtWithHiddenMeta = i18nextSubliminal.wrap(value, item.subliminal);
+  var txtWithHiddenMeta = item.subliminal ? i18nextSubliminal.wrap(value, item.subliminal) : value;
   if (meta.textType === 'text') {
     item.node.textContent = txtWithHiddenMeta;
   } else if (meta.textType.indexOf('attr:') === 0) {

package/dist/cjs/api/handleIsLocizeEnabled.js

@@ -5,7 +5,7 @@ var postMessage = require('./postMessage.js');
 function handler(payload, e) {
   postMessage.api.source = e.source;
   postMessage.api.origin = e.origin;
-  postMessage.api.legacy = true;
-  postMessage.api.sendLocizeIsEnabled();
+  postMessage.api.sendLocizeIsEnabled(payload);
+  postMessage.api.requestInitialize(postMessage.api.config);
 }
 postMessage.api.addHandler('isLocizeEnabled', handler);

package/dist/cjs/api/handleRequestPopupChanges.js

@@ -7,6 +7,15 @@ function handler(payload) {
   var containerStyle = payload.containerStyle;
   if (containerStyle) {
     var popup$1 = document.getElementById(popup.popupId);
+    if (!popup$1) return;
+    var storedPos = localStorage.getItem('locize_popup_pos');
+    if (storedPos) storedPos = JSON.parse(storedPos);
+    var storedSize = localStorage.getItem('locize_popup_size');
+    if (storedSize) storedSize = JSON.parse(storedSize);
+    if (storedSize && storedSize.height && storedSize.width) {
+      containerStyle.height = storedSize.height + 'px';
+      containerStyle.width = storedSize.width + 'px';
+    }
     if (containerStyle.height) {
       var diff = "calc(".concat(containerStyle.height, " - ").concat(popup$1.style.height, ")");
       popup$1.style.setProperty('top', "calc(".concat(popup$1.style.top, " - ").concat(diff, ")"));
@@ -17,6 +26,8 @@ function handler(payload) {
       popup$1.style.setProperty('left', "calc(".concat(popup$1.style.left, " - ").concat(_diff, ")"));
       popup$1.style.setProperty('width', containerStyle.width);
     }
+    if (storedPos && storedPos.top && storedPos.top < window.innerHeight - containerStyle.height.replace('px', '')) popup$1.style.setProperty('top', storedPos.top + 'px');
+    if (storedPos && storedPos.left && storedPos.left < window.innerWidth - containerStyle.width.replace('px', '')) popup$1.style.setProperty('left', storedPos.left + 'px');
   }
 }
 postMessage.api.addHandler('requestPopupChanges', handler);

package/dist/cjs/api/handleSendMatchedUninstrumented.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var postMessage = require('./postMessage.js');
+var store = require('../store.js');
+var uninstrumentedStore = require('../uninstrumentedStore.js');
+var parser = require('../parser.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+function handler(payload) {
+  if (!payload.length) return;
+  payload.forEach(function (item) {
+    var uni = uninstrumentedStore.uninstrumentedStore.get(item.eleUniqueID);
+    store.store.save(item.eleUniqueID, undefined, item.textType, parser.extractNodeMeta(item.eleUniqueID, item.textType, _defineProperty__default["default"]({}, "".concat(item.textType), {
+      ns: item.ns,
+      key: item.key
+    }), item.value), uni === null || uni === void 0 ? void 0 : uni.node);
+    delete uni.keys["".concat(item.textType)];
+    if (!Object.keys(uni.keys).length) uninstrumentedStore.uninstrumentedStore.remove(item.eleUniqueID, uni.node);
+  });
+  postMessage.api.sendCurrentParsedContent();
+}
+postMessage.api.addHandler('sendMatchedUninstrumented', handler);

package/dist/cjs/api/postMessage.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var vars = require('../vars.js');
 var store = require('../store.js');
+var uninstrumentedStore = require('../uninstrumentedStore.js');
+var utils = require('../utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -22,27 +24,18 @@ function getMappedLegacyEvent(msg) {
 function addLocizeSavedHandler(handler) {
   api.locizeSavedHandler = handler;
 }
-function turnOn() {
-  api.scriptTurnedOff = false;
-  api.turnOn();
-  return api.scriptTurnedOff;
-}
-function turnOff() {
-  api.turnOff();
-  api.scriptTurnedOff = true;
-  return api.scriptTurnedOff;
-}
 function setEditorLng(lng) {
   api.sendCurrentTargetLanguage(lng);
 }
 var pendingMsgs = [];
+var allowedActionsBeforeInit = ['locizeIsEnabled', 'requestInitialize'];
 function sendMessage(action, payload) {
   if (!api.source) {
     var _document$getElementB;
     api.source = (_document$getElementB = document.getElementById('i18next-editor-iframe')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.contentWindow;
   }
   if (!api.origin) api.origin = vars.getIframeUrl();
-  if (!api.source || !api.source.postMessage) {
+  if (!api.source || !api.source.postMessage || !api.initialized && allowedActionsBeforeInit.indexOf(action) < 0) {
     pendingMsgs.push({
       action: action,
       payload: payload
@@ -56,7 +49,7 @@ function sendMessage(action, payload) {
   } else {
     api.source.postMessage({
       sender: 'i18next-editor',
-      senderAPIVersion: 'v1',
+      senderAPIVersion: 'v2',
       action: action,
       message: action,
       payload: payload
@@ -70,6 +63,22 @@ function sendMessage(action, payload) {
     sendMessage(action, payload);
   });
 }
+var sendCurrentParsedContentDebounced = function sendCurrentParsedContentDebounced() {
+  sendMessage('sendCurrentParsedContent', {
+    content: Object.values(store.store.data).map(function (item) {
+      return {
+        id: item.id,
+        keys: item.keys
+      };
+    }),
+    uninstrumented: Object.values(uninstrumentedStore.uninstrumentedStore.data).map(function (item) {
+      return {
+        id: item.id,
+        keys: item.keys
+      };
+    })
+  });
+};
 var handlers = {};
 var repeat = 5;
 var api = {
@@ -87,7 +96,7 @@ var api = {
         clearInterval(api.initInterval);
         delete api.initInterval;
       }
-    }, 1000);
+    }, 2000);
   },
   selectKey: function selectKey(meta) {
     sendMessage('selectKey', meta);
@@ -95,45 +104,25 @@ var api = {
   confirmResourceBundle: function confirmResourceBundle(payload) {
     sendMessage('confirmResourceBundle', payload);
   },
-  sendCurrentParsedContent: function sendCurrentParsedContent() {
-    sendMessage('sendCurrentParsedContent', {
-      content: Object.values(store.store.data).map(function (item) {
-        return {
-          id: item.id,
-          keys: item.keys
-        };
-      })
-    });
-  },
+  sendCurrentParsedContent: utils.debounce(sendCurrentParsedContentDebounced, 500),
   sendCurrentTargetLanguage: function sendCurrentTargetLanguage(lng) {
     sendMessage('sendCurrentTargetLanguage', {
       targetLng: lng || api.i18n.getLng()
     });
   },
+  sendHrefchanged: function sendHrefchanged(href) {
+    sendMessage('hrefChanged', {
+      href: href
+    });
+  },
   addHandler: function addHandler(action, fc) {
     if (!handlers[action]) handlers[action] = [];
     handlers[action].push(fc);
   },
-  sendLocizeIsEnabled: function sendLocizeIsEnabled() {
-    sendMessage('locizeIsEnabled', {
+  sendLocizeIsEnabled: function sendLocizeIsEnabled(payload) {
+    sendMessage('locizeIsEnabled', _objectSpread(_objectSpread({}, payload), {}, {
       enabled: true
-    });
-  },
-  turnOn: function turnOn() {
-    if (api.scriptTurnedOff) return sendMessage('forcedOff');
-    if (!api.clickInterceptionEnabled) {
-      window.document.body.addEventListener('click', api.clickHandler, true);
-    }
-    api.clickInterceptionEnabled = true;
-    sendMessage('turnedOn');
-  },
-  turnOff: function turnOff() {
-    if (api.scriptTurnedOff) return sendMessage('forcedOff');
-    if (api.clickInterceptionEnabled) {
-      window.document.body.removeEventListener('click', api.clickHandler, true);
-    }
-    api.clickInterceptionEnabled = false;
-    sendMessage('turnedOff');
+    }));
   },
   onAddedKey: function onAddedKey(lng, ns, key, value) {
     var msg = {
@@ -161,7 +150,7 @@ if (typeof window !== 'undefined') {
       }
     } else if (sender === 'i18next-editor-frame' && handlers[action]) {
       handlers[action].forEach(function (fc) {
-        fc(payload);
+        fc(payload, e);
       });
     }
   });
@@ -171,5 +160,3 @@ exports.addLocizeSavedHandler = addLocizeSavedHandler;
 exports.api = api;
 exports.sendMessage = sendMessage;
 exports.setEditorLng = setEditorLng;
-exports.turnOff = turnOff;
-exports.turnOn = turnOn;

package/dist/cjs/clickHandler.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var i18nextSubliminal = require('i18next-subliminal');
 var utils = require('./utils.js');
 
 function createClickHandler(cb) {
@@ -11,8 +12,17 @@ function createClickHandler(cb) {
     if (!el) return {};
     e.preventDefault();
     e.stopPropagation();
+    function getFallbackNS() {
+      if (options.isLocizify) return options.defaultNS;
+    }
     var text = utils.getElementText(el);
     var key = utils.getElementI18nKey(el);
+    var ns = utils.getElementNamespace(el) || getFallbackNS();
+    if (i18nextSubliminal.containsHiddenMeta(text)) {
+      var meta = i18nextSubliminal.unwrap(text);
+      if (meta && meta.invisibleMeta && meta.invisibleMeta.key) key = meta.invisibleMeta.key;
+      if (meta && meta.invisibleMeta && meta.invisibleMeta.ns) ns = meta.invisibleMeta.ns;
+    }
     var rectEl = el.getBoundingClientRect ? el : el.parentElement;
     var _rectEl$getBoundingCl = rectEl.getBoundingClientRect(),
       top = _rectEl$getBoundingCl.top,
@@ -25,14 +35,11 @@ function createClickHandler(cb) {
     var pR = parseFloat(style.getPropertyValue('padding-right'));
     var pL = parseFloat(style.getPropertyValue('padding-left'));
     var sizing = style.getPropertyValue('box-sizing');
-    function getFallbackNS() {
-      if (options.isLocizify) return options.defaultNS;
-    }
     cb({
       tagName: rectEl.tagName,
       text: text,
       key: key,
-      ns: utils.getElementNamespace(el) || getFallbackNS(),
+      ns: ns,
       box: {
         top: top,
         left: left,

package/dist/cjs/implementations/dummyImplementation.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function getImplementation() {
+  var impl = {
+    getResource: function getResource(lng, ns, key) {
+      return {};
+    },
+    setResource: function setResource(lng, ns, key, value) {
+      return;
+    },
+    getResourceBundle: function getResourceBundle(lng, ns, cb) {
+      cb({});
+    },
+    getDefaultNS: function getDefaultNS() {
+      return;
+    },
+    getLng: function getLng() {
+      return;
+    },
+    getSourceLng: function getSourceLng() {
+      return;
+    },
+    getLocizeDetails: function getLocizeDetails() {
+      return {};
+    },
+    bindLanguageChange: function bindLanguageChange(cb) {},
+    bindMissingKeyHandler: function bindMissingKeyHandler(cb) {},
+    triggerRerender: function triggerRerender() {}
+  };
+  return impl;
+}
+
+exports.getImplementation = getImplementation;

package/dist/cjs/implementations/i18nextImplementation.js

@@ -0,0 +1,94 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function getImplementation(i18n) {
+  var impl = {
+    getResource: function getResource(lng, ns, key) {
+      return i18n.getResource && i18n.getResource(lng, ns, key);
+    },
+    setResource: function setResource(lng, ns, key, value) {
+      return i18n.addResource(lng, ns, key, value, {
+        silent: true
+      });
+    },
+    getResourceBundle: function getResourceBundle(lng, ns, cb) {
+      i18n.loadNamespaces(ns, function () {
+        cb(i18n.getResourceBundle(lng, ns));
+      });
+    },
+    getDefaultNS: function getDefaultNS() {
+      return i18n.options.defaultNS;
+    },
+    getLng: function getLng() {
+      return i18n.resolvedLanguage || i18n.languages && i18n.languages[0] || i18n.options.lng;
+    },
+    getSourceLng: function getSourceLng() {
+      var fallback = i18n.options.fallbackLng;
+      if (typeof fallback === 'string') return fallback;
+      if (Array.isArray(fallback)) return fallback[fallback.length - 1];
+      if (fallback && fallback["default"]) {
+        if (typeof fallback["default"] === 'string') return fallback;
+        if (Array.isArray(fallback["default"])) return fallback["default"][fallback["default"].length - 1];
+      }
+      if (typeof fallback === 'function') {
+        var res = fallback(i18n.resolvedLanguage);
+        if (typeof res === 'string') return res;
+        if (Array.isArray(res)) return res[res.length - 1];
+      }
+      return 'dev';
+    },
+    getLocizeDetails: function getLocizeDetails() {
+      var backendName;
+      if (i18n.services.backendConnector.backend && i18n.services.backendConnector.backend.options && i18n.services.backendConnector.backend.options.loadPath && i18n.services.backendConnector.backend.options.loadPath.indexOf('.locize.') > 0) {
+        backendName = 'I18nextLocizeBackend';
+      } else {
+        backendName = i18n.services.backendConnector.backend ? i18n.services.backendConnector.backend.constructor.name : 'options.resources';
+      }
+      var opts = {
+        backendName: backendName,
+        sourceLng: impl.getSourceLng(),
+        i18nFormat: i18n.options.compatibilityJSON === 'v3' ? 'i18next_v3' : 'i18next_v4',
+        i18nFramework: 'i18next',
+        isLocizify: i18n.options.isLocizify,
+        defaultNS: i18n.options.defaultNS,
+        targetLngs: _toConsumableArray__default["default"](new Set([].concat(i18n.options.preload, i18n.options.supportedLngs, [impl.getLng()]))).filter(function (l) {
+          return l !== 'cimode' && l !== false && l !== 'false' && l !== undefined && l !== impl.getSourceLng();
+        }),
+        ns: _toConsumableArray__default["default"](new Set([].concat(i18n.options.ns, i18n.options.fallbackNS, i18n.options.defaultNS))).filter(function (n) {
+          return n !== false && n !== 'false';
+        })
+      };
+      if (!i18n.options.backend && !i18n.options.editor) return opts;
+      var pickFrom = i18n.options.editor || i18n.options.backend;
+      return _objectSpread(_objectSpread({}, opts), {}, {
+        projectId: pickFrom.projectId,
+        version: pickFrom.version
+      });
+    },
+    bindLanguageChange: function bindLanguageChange(cb) {
+      i18n.on('languageChanged', cb);
+    },
+    bindMissingKeyHandler: function bindMissingKeyHandler(cb) {
+      i18n.options.missingKeyHandler = function (lng, ns, k, val, isUpdate, opts) {
+        if (!isUpdate) cb(lng, ns, k, val);
+      };
+    },
+    triggerRerender: function triggerRerender() {
+      i18n.emit('editorSaved');
+    }
+  };
+  return impl;
+}
+
+exports.getImplementation = getImplementation;