locizify 10.0.0 → 10.0.2

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+### 10.0.2
+
+- update locize deps
+
+### 10.0.1
+
+- update locize dep
+
 ### 10.0.0
 
 - BREAKING: bumped `i18next-locize-backend` to v10 and `i18nextify` to v5. Both dropped their `cross-fetch` dependency, so locizify no longer ships the `cross-fetch` / `node-fetch` fallback in its bundle. Native `fetch` is now required (Node ≥ 18, modern browsers, Deno, Bun — all of which ship it). For runtimes without native `fetch`, supply a ponyfill yourself before loading this script, or stay on v9.

package/locizify.js

@@ -5929,21 +5929,26 @@ var locizify = (function() {
 		while (stack.length > 1) {
 			if (!object) return {};
 			const key = cleanKey(stack.shift());
+			if (UNSAFE_KEYS.indexOf(key) > -1) return {};
 			if (!object[key] && Empty) object[key] = new Empty();
 			object = object[key];
 		}
 		if (!object) return {};
+		const k = cleanKey(stack.shift());
+		if (UNSAFE_KEYS.indexOf(k) > -1) return {};
 		return {
 			obj: object,
-			k: cleanKey(stack.shift())
+			k
 		};
 	}
 	function setPath(object, path, newValue) {
 		const { obj, k } = getLastOfPath(object, path, Object);
+		if (obj === void 0) return;
 		obj[k] = newValue;
 	}
 	function pushPath(object, path, newValue, concat) {
 		const { obj, k } = getLastOfPath(object, path, Object);
+		if (obj === void 0) return;
 		obj[k] = obj[k] || [];
 		if (concat) obj[k] = obj[k].concat(newValue);
 		if (!concat) obj[k].push(newValue);
@@ -6887,14 +6892,25 @@ var locizify = (function() {
 		warning: "#e67a00",
 		gray: "#ccc"
 	};
-	var getIframeUrl = function getIframeUrl() {
+	var resolveEnv = function resolveEnv() {
 		var _prc$env;
 		var p;
 		if (typeof process !== "undefined") p = process;
 		if (!p && typeof window !== "undefined") p = window.process;
-		var env = ((_prc$env = (p || {}).env) === null || _prc$env === void 0 ? void 0 : _prc$env.locizeIncontext) || "production";
+		return ((_prc$env = (p || {}).env) === null || _prc$env === void 0 ? void 0 : _prc$env.locizeIncontext) || "production";
+	};
+	var getIframeUrl = function getIframeUrl() {
+		var env = resolveEnv();
 		return env === "development" ? "http://localhost:3003/" : env === "staging" ? "https://incontext-dev.locize.app" : "https://incontext.locize.app";
 	};
+	var getEditorOrigins = function getEditorOrigins() {
+		var env = resolveEnv();
+		return env === "development" ? ["http://localhost:3003", "http://localhost:3000"] : env === "staging" ? ["https://incontext-dev.locize.app", "https://dev.locize.app"] : [
+			"https://incontext.locize.app",
+			"https://www.locize.app",
+			"https://locize.app"
+		];
+	};
 	//#endregion
 	//#region node_modules/locize/dist/esm/ui/stylesheet.js
 	var sheet = function() {
@@ -7120,10 +7136,25 @@ var locizify = (function() {
 		if (!results[2]) return "";
 		return decodeURIComponent(results[2].replace(/\+/g, " "));
 	}
-	var _isInIframe = typeof window !== "undefined";
-	try {
+	var isDebug = function() {
+		if (typeof window === "undefined") return false;
+		try {
+			return window.localStorage.getItem("locize-debug") === "true" || getQsParameterByName$1("locizedebug") === "true";
+		} catch (e) {
+			return false;
+		}
+	}();
+	function debugLog() {
+		var _console;
+		for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
+		if (isDebug) (_console = console).warn.apply(_console, ["[locize]"].concat(args));
+	}
+	var _isInIframe = false;
+	if (typeof window !== "undefined") try {
 		_isInIframe = self !== top;
-	} catch (e) {}
+	} catch (e) {
+		_isInIframe = true;
+	}
 	var isInIframe = _isInIframe;
 	//#endregion
 	//#region node_modules/locize/dist/esm/api/postMessage.js
@@ -7159,18 +7190,22 @@ var locizify = (function() {
 	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;
+		var _document$getElementB;
+		var currentSource = (_document$getElementB = document.getElementById("i18next-editor-iframe")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.contentWindow;
+		if (currentSource) {
+			if (api.source && api.source !== currentSource) api.initialized = false;
+			api.source = currentSource;
 		}
 		if (!api.origin) api.origin = getIframeUrl();
 		if (!api.source || !api.source.postMessage || !api.initialized && allowedActionsBeforeInit.indexOf(action) < 0) {
-			pendingMsgs.push({
+			debugLog("queueing (editor not connected yet)", action, payload);
+			if (pendingMsgs.length < 100) pendingMsgs.push({
 				action,
 				payload
 			});
 			return;
 		}
+		debugLog("out", action, payload);
 		if (api.legacy) api.source.postMessage(_objectSpread$5({ message: action }, payload), api.origin);
 		else api.source.postMessage({
 			sender: "i18next-editor",
@@ -7212,12 +7247,14 @@ var locizify = (function() {
 		requestInitialize: function requestInitialize(payload) {
 			sendMessage("requestInitialize", payload);
 			if (api.initInterval) return;
+			repeat = 5;
 			api.initInterval = setInterval(function() {
 				repeat = repeat - 1;
 				api.requestInitialize(payload);
 				if (repeat < 0 && api.initInterval) {
 					clearInterval(api.initInterval);
 					delete api.initInterval;
+					if (!api.initialized) debugLog("handshake gave up: editor never answered requestInitialize");
 				}
 			}, 2e3);
 		},
@@ -7250,17 +7287,24 @@ var locizify = (function() {
 			});
 		}
 	};
-	var getExpectedIframeOrigin = function getExpectedIframeOrigin() {
+	var getExpectedEditorOrigins = function getExpectedEditorOrigins() {
 		try {
-			return new URL(getIframeUrl()).origin;
+			return getEditorOrigins().map(function(url) {
+				return new URL(url).origin;
+			});
 		} catch (err) {
-			return null;
+			return [];
 		}
 	};
 	if (typeof window !== "undefined") window.addEventListener("message", function(e) {
-		var expectedOrigin = getExpectedIframeOrigin();
-		if (!expectedOrigin || e.origin !== expectedOrigin) return;
-		var _e$data = e.data, sender = _e$data.sender, action = _e$data.action, message = _e$data.message, payload = _e$data.payload;
+		var expectedOrigins = getExpectedEditorOrigins();
+		if (!expectedOrigins.length || expectedOrigins.indexOf(e.origin) < 0) {
+			var _e$data;
+			if (((_e$data = e.data) === null || _e$data === void 0 ? void 0 : _e$data.sender) === "i18next-editor-frame") debugLog("dropped editor message from unexpected origin", e.origin, "expected one of", expectedOrigins);
+			return;
+		}
+		var _e$data2 = e.data, sender = _e$data2.sender, action = _e$data2.action, message = _e$data2.message, payload = _e$data2.payload;
+		debugLog("in", action || message, payload);
 		if (message) {
 			var usedEventName = getMappedLegacyEvent(message);
 			if (handlers[usedEventName]) handlers[usedEventName].forEach(function(fc) {
@@ -7424,9 +7468,11 @@ var locizify = (function() {
 	//#endregion
 	//#region node_modules/locize/dist/esm/api/handleConfirmInitialized.js
 	function handler$5(payload) {
+		var _document$querySelect;
 		api.initialized = true;
 		clearInterval(api.initInterval);
 		delete api.initInterval;
+		(_document$querySelect = document.querySelector(".locize-incontext-error")) === null || _document$querySelect === void 0 || _document$querySelect.remove();
 		api.sendCurrentParsedContent();
 		api.sendCurrentTargetLanguage();
 	}
@@ -7537,12 +7583,15 @@ var locizify = (function() {
 		sheet.insertRule(".i18next-editor-popup * { \n      -webkit-touch-callout: none; /* iOS Safari */\n      -webkit-user-select: none; /* Safari */\n      -khtml-user-select: none; /* Konqueror HTML */\n      -moz-user-select: none; /* Firefox */\n      -ms-user-select: none; /* Internet Explorer/Edge */\n      user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */\n    }");
 		sheet.insertRule(".i18next-editor-popup .resizer-right {\n      width: 15px;\n      height: 100%;\n      background: transparent;\n      position: absolute;\n      right: -15px;\n      bottom: 0;\n      cursor: e-resize;\n    }");
 		sheet.insertRule(".i18next-editor-popup .resizer-both {\n      width: 15px;\n      height: 15px;\n      background: transparent;\n      z-index: 10;\n      position: absolute;\n      right: -15px;\n      bottom: -15px;\n      cursor: se-resize;\n    }");
+		sheet.insertRule(".locize-incontext-ribbon {\n      cursor: pointer;\n      position: fixed;\n      bottom: 25px;\n      right: 25px;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 50px;\n      height: 50px;\n      background-color: rgba(249, 249, 249, 0.8);\n      -webkit-backdrop-filter: blur(3px);\n      backdrop-filter: blur(3px);\n      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);\n      border-radius: 50%;\n    }");
+		sheet.insertRule(".locize-incontext-ribbon.locize-incontext-ribbon-left {\n      right: auto;\n      left: 25px;\n    }");
 		sheet.insertRule(".i18next-editor-popup .resizer-bottom {\n      width: 100%;\n      height: 15px;\n      background: transparent;\n      position: absolute;\n      right: 0;\n      bottom: -15px;\n      cursor: s-resize;\n    }");
 	}
-	function Ribbon(popupEle, onMaximize) {
+	function Ribbon(popupEle, onMaximize, ribbonPosition) {
 		var ribbon = document.createElement("div");
 		ribbon.setAttribute("data-i18next-editor-element", "true");
-		ribbon.style = "\n  cursor: pointer;\n  position: fixed;\n  bottom: 25px;\n  right: 25px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 50px;\n  height: 50px;\n  background-color:  rgba(249, 249, 249, 0.2);\n  backdrop-filter: blur(3px);\n  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);\n  border-radius: 50%;\n  ";
+		ribbon.classList.add("locize-incontext-ribbon");
+		if (ribbonPosition === "bottom-left") ribbon.classList.add("locize-incontext-ribbon-left");
 		ribbon.onclick = function() {
 			onMaximize();
 		};
@@ -7567,7 +7616,18 @@ var locizify = (function() {
 		return image;
 	}
 	var popupId = "i18next-editor-popup";
+	function showPopupError(msg) {
+		var popup = document.getElementById(popupId);
+		if (!popup || popup.querySelector(".locize-incontext-error")) return;
+		var err = document.createElement("div");
+		err.className = "locize-incontext-error";
+		err.setAttribute("data-i18next-editor-element", "true");
+		err.textContent = msg;
+		err.style = "\n  position: absolute;\n  top: 32px;\n  left: 0;\n  right: 0;\n  z-index: 102;\n  padding: 8px 10px;\n  background-color: ".concat(colors.warning, ";\n  color: #fff;\n  font: 13px sans-serif;\n  ");
+		popup.appendChild(err);
+	}
 	function Popup(url, cb) {
+		var opt = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
 		var popup = document.createElement("div");
 		popup.setAttribute("id", popupId);
 		popup.classList.add("i18next-editor-popup");
@@ -7584,7 +7644,7 @@ var locizify = (function() {
 				setTimeout(function() {
 					document.body.removeChild(ribbon);
 				}, 1e3);
-			});
+			}, opt.ribbonPosition);
 			document.body.appendChild(ribbon);
 			stopMouseTracking();
 		}));
@@ -9148,6 +9208,10 @@ var locizify = (function() {
 					var meta = unwrap(trimmedTxt);
 					uninstrumentedStore.remove(node.uniqueID, node);
 					store.save(node.uniqueID, meta.invisibleMeta, "text", extractHiddenMeta(node.uniqueID, "text", meta), node);
+				} else if (hasHiddenMeta && !merge.length) {
+					var _meta = unwrap(trimmedTxt);
+					uninstrumentedStore.remove(node.uniqueID, node);
+					store.save(node.uniqueID, _meta.invisibleMeta, "text", extractHiddenMeta(node.uniqueID, "text", _meta), node);
 				} else if (hasHiddenStartMarker) merge.push({
 					childIndex: i,
 					child,
@@ -9164,11 +9228,11 @@ var locizify = (function() {
 						child,
 						text: txt
 					});
-					var _meta = unwrap(merge.reduce(function(mem, item) {
+					var _meta2 = unwrap(merge.reduce(function(mem, item) {
 						return mem + item.text;
 					}, ""));
 					uninstrumentedStore.removeKey(node.uniqueID, "html", node, txt);
-					store.save(node.uniqueID, _meta.invisibleMeta, "html", extractHiddenMeta(node.uniqueID, "html", _meta, merge), node, merge);
+					store.save(node.uniqueID, _meta2.invisibleMeta, "html", extractHiddenMeta(node.uniqueID, "html", _meta2, merge), node, merge);
 					merge = [];
 				}
 			});
@@ -9327,13 +9391,9 @@ var locizify = (function() {
 		var popups = document.getElementsByClassName("i18next-editor-popup");
 		var elmnt = null;
 		var overlay = null;
-		var currentZIndex = 1e5;
 		for (var i = 0; i < popups.length; i++) {
 			var popup = popups[i];
 			var header = getHeader(popup);
-			popup.onmousedown = function() {
-				this.style.zIndex = "" + ++currentZIndex;
-			};
 			if (header) {
 				header.parentPopup = popup;
 				header.onmousedown = dragMouseDown;
@@ -9344,7 +9404,6 @@ var locizify = (function() {
 			if (overlay) overlay.style.display = "block";
 			stopMouseTracking();
 			elmnt = this.parentPopup;
-			elmnt.style.zIndex = "" + ++currentZIndex;
 			e = e || window.event;
 			pos3 = e.clientX;
 			pos4 = e.clientY;
@@ -9485,7 +9544,11 @@ var locizify = (function() {
 		var showInContext = opt.show || getQsParameterByName$1(opt.qsProp || "incontext") === "true";
 		var scriptEle = document.getElementById("locize");
 		var config = {};
-		["projectId", "version"].forEach(function(attr) {
+		[
+			"projectId",
+			"version",
+			"ribbonPosition"
+		].forEach(function(attr) {
 			if (!scriptEle) return;
 			var value = scriptEle.getAttribute(attr.toLowerCase()) || scriptEle.getAttribute("data-" + attr.toLowerCase());
 			if (value === "true") value = true;
@@ -9510,11 +9573,47 @@ var locizify = (function() {
 			observer.start();
 			startMouseTracking(observer);
 			if (!isInIframe && !document.getElementById("i18next-editor-popup")) {
-				document.body.append(Popup(getIframeUrl(), function() {
+				debugLog("starting InContext popup with config", config, "iframe:", getIframeUrl());
+				if (!config.projectId) console.error("[locize] InContext editor: no projectId configured (script tag attribute, i18next editor/backend options or startStandalone options) - the editor will not find your project.");
+				setTimeout(function() {
+					if (api.initialized) return;
+					console.error("[locize] InContext editor did not connect within 15s. Likely causes: you are not logged in at locize (open https://www.locize.app in another tab and log in), the page CSP blocks frame-src " + getIframeUrl() + ", or an adblocker blocked the iframe. Enable diagnostics via localStorage.setItem('locize-debug', 'true').");
+					showPopupError("Could not connect to the locize editor. Are you logged in at locize.app? See the browser console for details.");
+				}, 15e3);
+				var popupEl = Popup(getIframeUrl(), function() {
+					var _document$getElementB;
+					api.source = (_document$getElementB = document.getElementById("i18next-editor-iframe")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.contentWindow;
+					api.initialized = false;
+					if (api.initInterval) {
+						clearInterval(api.initInterval);
+						delete api.initInterval;
+					}
 					api.requestInitialize(config);
-				}));
+				}, config);
+				document.documentElement.append(popupEl);
 				initDragElement();
 				initResizeElement();
+				if (typeof MutationObserver === "function") {
+					var MAX_REATTACHMENTS = 5;
+					var WATCH_DURATION_MS = 1e4;
+					var reattachments = 0;
+					var watcher = new MutationObserver(function() {
+						if (document.getElementById("i18next-editor-popup")) return;
+						if (reattachments >= MAX_REATTACHMENTS) {
+							watcher.disconnect();
+							return;
+						}
+						reattachments++;
+						document.documentElement.append(popupEl);
+					});
+					watcher.observe(document.documentElement, {
+						childList: true,
+						subtree: true
+					});
+					setTimeout(function() {
+						return watcher.disconnect();
+					}, WATCH_DURATION_MS);
+				}
 			}
 			if (typeof window !== "undefined") {
 				var oldHref = window.document.location.href;
@@ -9535,7 +9634,7 @@ var locizify = (function() {
 		}
 		if (document.body) return continueToStart();
 		if (typeof window !== "undefined") window.addEventListener("load", function() {
-			return continueToStart();
+			continueToStart();
 		});
 	}
 	//#endregion
@@ -9597,7 +9696,7 @@ var locizify = (function() {
 			},
 			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";
+				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,