locize 3.0.5 → 3.1.1

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-import { locizePlugin } from './locizePlugin.js';
-export { locizePlugin } from './locizePlugin.js';
+import { locizePlugin, locizeEditorPlugin } from './locizePlugin.js';
+export { locizeEditorPlugin, locizePlugin } from './locizePlugin.js';
 import { startStandalone } from './startStandalone.js';
 export { startStandalone } from './startStandalone.js';
 import './api/handleEditKey.js';
@@ -24,6 +24,7 @@ var index = {
   PostProcessor: PostProcessor,
   addLocizeSavedHandler: addLocizeSavedHandler,
   locizePlugin: locizePlugin,
+  locizeEditorPlugin: locizeEditorPlugin,
   turnOn: turnOn,
   turnOff: turnOff,
   setEditorLng: setEditorLng,

package/dist/esm/locizePlugin.js

@@ -3,6 +3,7 @@ import { PostProcessor } from 'i18next-subliminal';
 export { unwrap } from 'i18next-subliminal';
 import { start } from './process.js';
 import { startLegacy } from './processLegacy.js';
+import { getQsParameterByName } from './utils.js';
 
 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(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; }
@@ -10,89 +11,94 @@ var isInIframe = typeof window !== 'undefined';
 try {
   isInIframe = self !== top;
 } catch (e) {}
+function configurePostProcessor(i18next, options) {
+  i18next.use(PostProcessor);
+  if (typeof options.postProcess === 'string') {
+    options.postProcess = [options.postProcess, 'subliminal'];
+  } else if (Array.isArray(options.postProcess)) {
+    options.postProcess.push('subliminal');
+  } else {
+    options.postProcess = 'subliminal';
+  }
+  options.postProcessPassResolved = true;
+}
+function getImplementation(i18n) {
+  var impl = {
+    getResource: function getResource(lng, ns, key) {
+      return 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));
+      });
+    },
+    getLng: function getLng() {
+      return i18n.languages[0];
+    },
+    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
+      };
+      if (!i18n.options.backend && !i18n.options.editor) return opts;
+      var pickFrom = i18n.options.backend || i18n.options.editor;
+      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;
+}
 var i18next;
 var locizePlugin = {
   type: '3rdParty',
   init: function init(i18n) {
     var options = i18n.options;
     i18next = i18n;
-    if (!isInIframe) {
-      i18next.use(PostProcessor);
-      if (typeof options.postProcess === 'string') {
-        options.postProcess = [options.postProcess, 'subliminal'];
-      } else if (Array.isArray(options.postProcess)) {
-        options.postProcess.push('subliminal');
-      } else {
-        options.postProcess = 'subliminal';
-      }
-      options.postProcessPassResolved = true;
-    }
-    var impl = {
-      getResource: function getResource(lng, ns, key) {
-        return 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));
-        });
-      },
-      getLng: function getLng() {
-        return i18n.languages[0];
-      },
-      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
-        };
-        if (!i18n.options.backend && !i18n.options.editor) return opts;
-        var pickFrom = i18n.options.backend || i18n.options.editor;
-        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');
-      }
-    };
+    if (!isInIframe) configurePostProcessor(i18next, options);
+    var impl = getImplementation(i18n);
     if (!isInIframe) {
       start(impl);
     } else {
@@ -100,5 +106,24 @@ var locizePlugin = {
     }
   }
 };
+var locizeEditorPlugin = function locizeEditorPlugin() {
+  var opt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  opt.qsProp = opt.qsProp || 'incontext';
+  return {
+    type: '3rdParty',
+    init: function init(i18n) {
+      var options = i18n.options;
+      i18next = i18n;
+      var showInContext = getQsParameterByName(opt.qsProp) === 'true';
+      if (!isInIframe && showInContext) configurePostProcessor(i18next, options);
+      var impl = getImplementation(i18n);
+      if (!isInIframe && showInContext) {
+        start(impl);
+      } else {
+        startLegacy(impl);
+      }
+    }
+  };
+};
 
-export { locizePlugin };
+export { locizeEditorPlugin, locizePlugin };

package/dist/esm/observer.js

@@ -1,7 +1,18 @@
 import { debounce } from './utils.js';
 import { validAttributes } from './vars.js';
 
+var mutationTriggeringElements = {};
 function ignoreMutation(ele) {
+  if (ele.uniqueID) {
+    var info = mutationTriggeringElements[ele.uniqueID];
+    if (info && info.triggered > 10 && info.lastTriggerDate + 500 < Date.now()) {
+      if (!info.warned && console) {
+        console.warn('locize ::: ignoring element change - an element is rerendering too often in short interval', '\n', 'consider adding the "data-locize-editor-ignore:" attribute to the element:', ele);
+        info.warned = true;
+      }
+      return true;
+    }
+  }
   var ret = ele.dataset && (ele.dataset.i18nextEditorElement === 'true' || ele.dataset.locizeEditorIgnore === 'true');
   if (!ret && ele.parentElement) return ignoreMutation(ele.parentElement);
   return ret;
@@ -30,6 +41,12 @@ function createObserver(ele, handle) {
       if (mutation.type === 'attributes' && !validAttributes.includes(mutation.attributeName)) {
         return;
       }
+      Object.keys(mutationTriggeringElements).forEach(function (k) {
+        var info = mutationTriggeringElements[k];
+        if (info.lastTriggerDate + 60000 < Date.now()) {
+          delete mutationTriggeringElements[k];
+        }
+      });
       if (mutation.type === 'childList') {
         var notOurs = 0;
         if (!ignoreMutation(mutation.target)) {
@@ -45,8 +62,18 @@ function createObserver(ele, handle) {
         if (notOurs === 0) return;
       }
       triggerMutation = true;
+      if (mutation.target && mutation.target.uniqueID) {
+        var info = mutationTriggeringElements[mutation.target.uniqueID] || {
+          triggered: 0
+        };
+        info.triggered = info.triggered + 1;
+        info.lastTriggerDate = Date.now();
+        mutationTriggeringElements[mutation.target.uniqueID] = info;
+      }
       var includedAlready = targetEles.reduce(function (mem, element) {
-        if (mem || element.contains(mutation.target) || !mutation.target.parentElement) return true;
+        if (mem || element.contains(mutation.target) || !mutation.target.parentElement) {
+          return true;
+        }
         return false;
       }, false);
       if (!includedAlready) {

package/dist/esm/process.js

@@ -3,7 +3,7 @@ import { parseTree, setImplementation } from './parser.js';
 import { createObserver } from './observer.js';
 import { startMouseTracking } from './ui/mouseDistance.js';
 import { initDragElement, initResizeElement } from './ui/popup.js';
-import { Popup } from './ui/elements/popup.js';
+import { popupId, Popup } from './ui/elements/popup.js';
 import { getIframeUrl } from './vars.js';
 import './api/handleEditKey.js';
 import './api/handleCommitKey.js';
@@ -46,11 +46,13 @@ function start() {
     });
     observer.start();
     startMouseTracking(observer);
-    document.body.append(Popup(getIframeUrl(), function () {
-      api.requestInitialize(config);
-    }));
-    initDragElement();
-    initResizeElement();
+    if (!document.getElementById(popupId)) {
+      document.body.append(Popup(getIframeUrl(), function () {
+        api.requestInitialize(config);
+      }));
+      initDragElement();
+      initResizeElement();
+    }
   }
   if (document.body) return continueToStart();
   window.addEventListener('load', function () {

package/dist/esm/ui/elements/popup.js

@@ -37,9 +37,10 @@ function Minimize(popupEle, onMinimize) {
   };
   return image;
 }
+var popupId = 'i18next-editor-popup';
 function Popup(url, cb) {
   var popup = document.createElement('div');
-  popup.setAttribute('id', 'i18next-editor-popup');
+  popup.setAttribute('id', popupId);
   popup.classList.add('i18next-editor-popup');
   popup.style = "\n  z-index: 9;\n  background-color: transparent;\n  border: 1px solid rgba(200, 200, 200, 0.9);\n  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n  border-radius: 3px;\n  --i18next-editor-popup-height: 200px;\n  height: var(--i18next-editor-popup-height);\n  min-height: 150px;\n  min-width: 300px;\n  --i18next-editor-popup-width: 400px;\n  width: var(--i18next-editor-popup-width);\n  max-height: 600px;\n  max-width: 800px;\n\n  position: fixed;\n  --i18next-editor-popup-position-top: calc(100vh - var(--i18next-editor-popup-height) - 10px);\n  top: calc(100vh - var(--i18next-editor-popup-height) - 10px);\n  --i18next-editor-popup-position-left: calc(100vw - var(--i18next-editor-popup-width) - 10px);\n  left: calc(100vw - var(--i18next-editor-popup-width) - 10px);\n\n  overflow: visible;\n  ";
   popup.setAttribute('data-i18next-editor-element', 'true');
@@ -73,4 +74,4 @@ function Popup(url, cb) {
   return popup;
 }
 
-export { Popup };
+export { Popup, popupId };

package/dist/esm/utils.js

@@ -119,5 +119,15 @@ function getElementNamespace(el) {
   find(el);
   return found;
 }
+function getQsParameterByName(name, url) {
+  if (typeof window === 'undefined') return null;
+  if (!url) url = window.location.href.toLowerCase();
+  name = name.replace(/[\[\]]/g, '\\$&');
+  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
+  var results = regex.exec(url);
+  if (!results) return null;
+  if (!results[2]) return '';
+  return decodeURIComponent(results[2].replace(/\+/g, ' '));
+}
 
-export { debounce, getClickedElement, getElementI18nKey, getElementNamespace, getElementText, getWindow, isWindow, offset };
+export { debounce, getClickedElement, getElementI18nKey, getElementNamespace, getElementText, getQsParameterByName, getWindow, isWindow, offset };