locizify 9.0.11 → 10.0.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+### 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.
+- BREAKING: minimum Node version is now 18 (`engines.node = ">=18"`), inherited from the upstream bumps.
+- BREAKING: dropped the AMD output format. The `build:amd` script had been silently emitting UMD anyway (typo: `--format umd --uglify` instead of `--format amd --uglify`), so no real consumers existed. Major bump covers the formal removal.
+- build: replaced babel + rollup 1 + terser with [`tsdown`](https://tsdown.dev) (rolldown + oxc). One config produces ESM, CJS, and IIFE bundles. Output layout collapsed from `dist/{commonjs,es,umd,amd}/` to `dist/{cjs,esm}/`. The root `locizify.js` / `locizify.min.js` are emitted directly by tsdown, no `cp` step needed. `package.json#exports` map added.
+- build: minified browser bundle: 245 KB → 219 KB (−11%); unminified 495 KB → 402 KB (−19%).
+- chore: declared `"type": "module"` and `"sideEffects": false`.
+- chore: dropped 13 dev dependencies (`@babel/*` × 10 including the deprecated `@babel/polyfill`, `rollup-plugin-*` × 5, `mkdirp`, `rimraf`, `yargs`). Net devDeps: 17 → 4. Vulnerabilities: down to 0.
+- chore: ESLint config converted from CommonJS (`eslint.config.js` with `require`) to ESM (`eslint.config.mjs` with `import`) since the package is now `"type": "module"`. neostandard rules unchanged.
+- chore: tightened `.npmignore` — `example/` (with all its built assets / fonts / images) was leaking into the published tarball; added `example`, `.vscode`, plus the new `tsdown.config.ts`. Tarball: 4.7 MB → 175 KB (−96%); files: 567 → 8.
+- chore: added `.github/workflows/node.yml` — first CI workflow for this repo. Runs lint + build on Node 20 / 22 / 24.
+- docs: bumped CDN script-tag pins in README from `@^9.0.3` to `@^10`. Added v10 migration callout.
+
 ### 9.0.11
 
 - update locize dep

package/README.md

@@ -12,7 +12,7 @@ Just drop the following line to your header to deliver your content in any langu
   id="locizify"
   projectid="[PROJECT_ID]"
   apikey="[API_KEY]"
-  src="https://unpkg.com/locizify@^9.0.3"
+  src="https://unpkg.com/locizify@^10"
   autopilot="true"
   cdnType="standard"
 ></script>
@@ -22,13 +22,15 @@ Just drop the following line to your header to deliver your content in any langu
   id="locizify"
   projectid="[PROJECT_ID]"
   apikey="[API_KEY]"
-  src="https://cdn.jsdelivr.net/npm/locizify@^9.0.3"
+  src="https://cdn.jsdelivr.net/npm/locizify@^10"
   autopilot="true"
   cdnType="standard"
 ></script>
 
 ```
 
+> **v10 requires native `fetch`.** Node ≥ 18, all modern browsers, Deno, and Bun ship `fetch` by default — no extra setup needed for the script-tag use case above. v10 dropped the bundled `cross-fetch` fallback that v9 carried via `i18next-locize-backend@9` and `i18nextify@4`. For runtimes without native `fetch`, install a ponyfill yourself before loading this script, or stay on v9.
+
 Checkout this [video](https://youtu.be/f0ukRI0LMfo?t=180) to see locizify in action.
 
 locizify uses virtual-dom to update your page with translations based on the current content. MutationObserver is used to trigger translations on dynamically added content. So it should play well with any static or dynamic page not using a own virtual-dom implementation.
@@ -71,7 +73,7 @@ Add the script to your page:
       id="locizify"
       projectid="[PROJECT_ID]"
       apikey="[API_KEY]"
-      src="https://unpkg.com/locizify@^9.0.3"
+      src="https://unpkg.com/locizify@^10"
       autopilot
       cdnType="standard"
     ></script>
@@ -105,7 +107,7 @@ Add the script to your page:
       apikey="[API_KEY]"
       referencelng="[LNG]"
       fallbacklng="[LNG]"
-      src="https://unpkg.com/locizify@^9.0.3"
+      src="https://unpkg.com/locizify@^10"
 
       // all custom attributes can also be prefixed with data-
       // data-projectid="[PROJECT_ID]"
@@ -136,7 +138,7 @@ Add the script to your page:
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="https://unpkg.com/locizify@^9.0.3"></script>
+    <script src="https://unpkg.com/locizify@^10"></script>
     <script>
       locizify.init({
         // required

package/dist/cjs/index.js

@@ -0,0 +1,190 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+let i18nextify = require("i18nextify");
+i18nextify = __toESM(i18nextify, 1);
+let i18next_locize_backend = require("i18next-locize-backend");
+i18next_locize_backend = __toESM(i18next_locize_backend, 1);
+let locize = require("locize");
+//#region src/index.js
+const { i18next } = i18nextify.default;
+const enforce = { saveMissingTo: "all" };
+const defaults = {
+	reloadOnSave: true,
+	bindSavedMissing: true
+};
+i18next.use(i18next_locize_backend.default).use(locize.locizePlugin);
+i18next.on("editorSaved", () => {
+	i18nextify.default.forceRerender();
+});
+function getQsParameterByName(name, url) {
+	if (typeof window === "undefined") return null;
+	if (!url) url = window.location.href.toLowerCase();
+	name = name.replace(/[\[\]]/g, "\\$&");
+	const results = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)").exec(url);
+	if (!results) return null;
+	if (!results[2]) return "";
+	return decodeURIComponent(results[2].replace(/\+/g, " "));
+}
+function isLocalDevHost() {
+	if (typeof window === "undefined" || !window.location) return false;
+	const h = window.location.hostname;
+	if (!h) return false;
+	return h === "localhost" || h === "127.0.0.1" || h === "::1" || h === "0.0.0.0" || h.endsWith(".localhost") || h.endsWith(".local");
+}
+let credentialWarningShown = false;
+function warnIfCredentialFromUrlOnProdHost(attr) {
+	if (isLocalDevHost()) return;
+	if (credentialWarningShown) return;
+	credentialWarningShown = true;
+	if (typeof console !== "undefined" && typeof console.warn === "function") console.warn("locizify: reading credential \"" + attr + "\" from URL query string on a non-local host. An attacker-crafted link can replace your locize credentials, redirecting saveMissing writes to an attacker-chosen project. Prefer configuring credentials via the <script id=\"locizify\" apikey=\"...\" projectid=\"...\"> attributes instead.");
+}
+const originalInit = i18next.init;
+i18next.init = (options = {}, callback) => {
+	options = {
+		...defaults,
+		...options,
+		isLocizify: true
+	};
+	const scriptEle = document.getElementById("locizify");
+	if (scriptEle) {
+		const config = {};
+		const backend = {};
+		const toRead = [
+			"fallbackLng",
+			"saveMissing",
+			"debug",
+			"autorun",
+			"ele",
+			"cleanIndent",
+			"cleanWhitespace",
+			"namespace",
+			"namespaceFromPath",
+			"load"
+		];
+		const toReadAsArray = [
+			"ignoreTags",
+			"ignoreIds",
+			"ignoreClasses",
+			"translateAttributes",
+			"mergeTags",
+			"inlineTags",
+			"ignoreInlineOn",
+			"ignoreCleanIndentFor",
+			"ns"
+		];
+		const toReadBackend = [
+			"projectId",
+			"apiKey",
+			"referenceLng",
+			"version",
+			"allowedAddOrUpdateHost",
+			"autoPilot",
+			"cdnType",
+			"noCache"
+		];
+		toRead.forEach((attr) => {
+			let value = scriptEle.getAttribute(attr.toLowerCase()) || scriptEle.getAttribute("data-" + attr.toLowerCase());
+			if (value === "true") value = true;
+			if (value === "false") value = false;
+			if (value !== void 0 && value !== null) config[attr] = value;
+		});
+		toReadAsArray.forEach((attr) => {
+			const value = scriptEle.getAttribute(attr.toLowerCase()) || scriptEle.getAttribute("data-" + attr.toLowerCase());
+			if (value !== void 0 && value !== null) config[attr] = value.split(",").map((item) => item.trim());
+		});
+		toReadBackend.forEach((attr) => {
+			let value = scriptEle.getAttribute(attr.toLowerCase()) || scriptEle.getAttribute("data-" + attr.toLowerCase());
+			if (value === "true") value = true;
+			if (value === "false") value = false;
+			if (attr.toLowerCase() === "autopilot" && value === "") value = true;
+			if (value !== void 0 && value !== null) backend[attr] = value;
+			if (!value) {
+				const lc = attr.toLowerCase();
+				value = getQsParameterByName(lc);
+				if (value === "true") value = true;
+				if (value === "false") value = false;
+				if (lc === "autopilot" && value === "") value = true;
+				if (value !== void 0 && value !== null) {
+					backend[attr] = value;
+					if (lc === "apikey" || lc === "projectid") warnIfCredentialFromUrlOnProdHost(lc);
+				}
+			}
+		});
+		if (backend.allowedAddOrUpdateHost) {
+			backend.allowedAddOrUpdateHosts = [backend.allowedAddOrUpdateHost];
+			delete backend.allowedAddOrUpdateHost;
+		}
+		options = {
+			...defaults,
+			...options,
+			...config
+		};
+		options.backend = {
+			...options.backend,
+			...backend
+		};
+	}
+	function handleI18nextInitialized(err, t) {
+		callback(err, t);
+	}
+	if (!options.backend.apiKey && getQsParameterByName("apikey")) {
+		options.backend.apiKey = getQsParameterByName("apikey");
+		warnIfCredentialFromUrlOnProdHost("apikey");
+	}
+	if (!options.backend.autoPilot || options.backend.autoPilot === "false") return originalInit.call(i18next, {
+		...options,
+		...enforce
+	}, handleI18nextInitialized);
+	new i18next_locize_backend.default(options.backend).getOptions((err, opts) => {
+		if (err && typeof console === "object" && typeof console.error === "function") console.error(err);
+		originalInit.call(i18next, {
+			...opts,
+			...options,
+			...enforce
+		}, handleI18nextInitialized);
+	});
+};
+i18nextify.default.getLanguages = function(callback) {
+	if (i18next.services.backendConnector) i18next.services.backendConnector.backend.getLanguages(callback);
+	else {
+		function ready() {
+			i18next.off("initialized", ready);
+			i18next.services.backendConnector.backend.getLanguages(callback);
+		}
+		i18next.on("initialized", ready);
+	}
+};
+i18nextify.default.getOptions = function(callback) {
+	if (i18next.services.backendConnector) i18next.services.backendConnector.backend.getOptions(callback);
+	else {
+		function ready() {
+			i18next.off("initialized", ready);
+			i18next.services.backendConnector.backend.getOptions(callback);
+		}
+		i18next.on("initialized", ready);
+	}
+};
+i18nextify.default.editor = { setEditorLng: locize.setEditorLng };
+var src_default = i18nextify.default;
+//#endregion
+module.exports = src_default;

package/dist/esm/index.js

@@ -0,0 +1,166 @@
+import i18nextify from "i18nextify";
+import LocizeBackend from "i18next-locize-backend";
+import { locizePlugin, setEditorLng } from "locize";
+//#region src/index.js
+const { i18next } = i18nextify;
+const enforce = { saveMissingTo: "all" };
+const defaults = {
+	reloadOnSave: true,
+	bindSavedMissing: true
+};
+i18next.use(LocizeBackend).use(locizePlugin);
+i18next.on("editorSaved", () => {
+	i18nextify.forceRerender();
+});
+function getQsParameterByName(name, url) {
+	if (typeof window === "undefined") return null;
+	if (!url) url = window.location.href.toLowerCase();
+	name = name.replace(/[\[\]]/g, "\\$&");
+	const results = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)").exec(url);
+	if (!results) return null;
+	if (!results[2]) return "";
+	return decodeURIComponent(results[2].replace(/\+/g, " "));
+}
+function isLocalDevHost() {
+	if (typeof window === "undefined" || !window.location) return false;
+	const h = window.location.hostname;
+	if (!h) return false;
+	return h === "localhost" || h === "127.0.0.1" || h === "::1" || h === "0.0.0.0" || h.endsWith(".localhost") || h.endsWith(".local");
+}
+let credentialWarningShown = false;
+function warnIfCredentialFromUrlOnProdHost(attr) {
+	if (isLocalDevHost()) return;
+	if (credentialWarningShown) return;
+	credentialWarningShown = true;
+	if (typeof console !== "undefined" && typeof console.warn === "function") console.warn("locizify: reading credential \"" + attr + "\" from URL query string on a non-local host. An attacker-crafted link can replace your locize credentials, redirecting saveMissing writes to an attacker-chosen project. Prefer configuring credentials via the <script id=\"locizify\" apikey=\"...\" projectid=\"...\"> attributes instead.");
+}
+const originalInit = i18next.init;
+i18next.init = (options = {}, callback) => {
+	options = {
+		...defaults,
+		...options,
+		isLocizify: true
+	};
+	const scriptEle = document.getElementById("locizify");
+	if (scriptEle) {
+		const config = {};
+		const backend = {};
+		const toRead = [
+			"fallbackLng",
+			"saveMissing",
+			"debug",
+			"autorun",
+			"ele",
+			"cleanIndent",
+			"cleanWhitespace",
+			"namespace",
+			"namespaceFromPath",
+			"load"
+		];
+		const toReadAsArray = [
+			"ignoreTags",
+			"ignoreIds",
+			"ignoreClasses",
+			"translateAttributes",
+			"mergeTags",
+			"inlineTags",
+			"ignoreInlineOn",
+			"ignoreCleanIndentFor",
+			"ns"
+		];
+		const toReadBackend = [
+			"projectId",
+			"apiKey",
+			"referenceLng",
+			"version",
+			"allowedAddOrUpdateHost",
+			"autoPilot",
+			"cdnType",
+			"noCache"
+		];
+		toRead.forEach((attr) => {
+			let value = scriptEle.getAttribute(attr.toLowerCase()) || scriptEle.getAttribute("data-" + attr.toLowerCase());
+			if (value === "true") value = true;
+			if (value === "false") value = false;
+			if (value !== void 0 && value !== null) config[attr] = value;
+		});
+		toReadAsArray.forEach((attr) => {
+			const value = scriptEle.getAttribute(attr.toLowerCase()) || scriptEle.getAttribute("data-" + attr.toLowerCase());
+			if (value !== void 0 && value !== null) config[attr] = value.split(",").map((item) => item.trim());
+		});
+		toReadBackend.forEach((attr) => {
+			let value = scriptEle.getAttribute(attr.toLowerCase()) || scriptEle.getAttribute("data-" + attr.toLowerCase());
+			if (value === "true") value = true;
+			if (value === "false") value = false;
+			if (attr.toLowerCase() === "autopilot" && value === "") value = true;
+			if (value !== void 0 && value !== null) backend[attr] = value;
+			if (!value) {
+				const lc = attr.toLowerCase();
+				value = getQsParameterByName(lc);
+				if (value === "true") value = true;
+				if (value === "false") value = false;
+				if (lc === "autopilot" && value === "") value = true;
+				if (value !== void 0 && value !== null) {
+					backend[attr] = value;
+					if (lc === "apikey" || lc === "projectid") warnIfCredentialFromUrlOnProdHost(lc);
+				}
+			}
+		});
+		if (backend.allowedAddOrUpdateHost) {
+			backend.allowedAddOrUpdateHosts = [backend.allowedAddOrUpdateHost];
+			delete backend.allowedAddOrUpdateHost;
+		}
+		options = {
+			...defaults,
+			...options,
+			...config
+		};
+		options.backend = {
+			...options.backend,
+			...backend
+		};
+	}
+	function handleI18nextInitialized(err, t) {
+		callback(err, t);
+	}
+	if (!options.backend.apiKey && getQsParameterByName("apikey")) {
+		options.backend.apiKey = getQsParameterByName("apikey");
+		warnIfCredentialFromUrlOnProdHost("apikey");
+	}
+	if (!options.backend.autoPilot || options.backend.autoPilot === "false") return originalInit.call(i18next, {
+		...options,
+		...enforce
+	}, handleI18nextInitialized);
+	new LocizeBackend(options.backend).getOptions((err, opts) => {
+		if (err && typeof console === "object" && typeof console.error === "function") console.error(err);
+		originalInit.call(i18next, {
+			...opts,
+			...options,
+			...enforce
+		}, handleI18nextInitialized);
+	});
+};
+i18nextify.getLanguages = function(callback) {
+	if (i18next.services.backendConnector) i18next.services.backendConnector.backend.getLanguages(callback);
+	else {
+		function ready() {
+			i18next.off("initialized", ready);
+			i18next.services.backendConnector.backend.getLanguages(callback);
+		}
+		i18next.on("initialized", ready);
+	}
+};
+i18nextify.getOptions = function(callback) {
+	if (i18next.services.backendConnector) i18next.services.backendConnector.backend.getOptions(callback);
+	else {
+		function ready() {
+			i18next.off("initialized", ready);
+			i18next.services.backendConnector.backend.getOptions(callback);
+		}
+		i18next.on("initialized", ready);
+	}
+};
+i18nextify.editor = { setEditorLng };
+var src_default = i18nextify;
+//#endregion
+export { src_default as default };