@djangocfg/i18n 2.1.541 → 2.1.543

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/i18n",
-  "version": "2.1.541",
+  "version": "2.1.543",
   "description": "Lightweight i18n library for @djangocfg packages with built-in translations for English, Russian, and Korean",
   "keywords": [
     "i18n",
@@ -67,7 +67,7 @@
     "i18n:add": "tsx src/cli/index.ts add"
   },
   "peerDependencies": {
-    "react": "^19.2.4"
+    "react": "^19.0.0"
   },
   "dependencies": {
     "citty": "^0.1.6",
@@ -75,7 +75,7 @@
     "jiti": "^2.7.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.541",
+    "@djangocfg/typescript-config": "^2.1.543",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",
     "eslint": "^9.39.5",

package/src/cli/commands/add.ts

@@ -11,6 +11,8 @@ import {
   readLocaleFile,
   writeLocaleFile,
   getValueAtPath,
+  setValueAtPath,
+  renderTsLocale,
   loadLocale,
 } from '../utils';
 
@@ -65,7 +67,6 @@ export const addCommand = defineCommand({
       consola.info(`Directory: ${localesDir}`);
       consola.log('');
 
-      const keyParts = keyPath.split('.');
       let updated = 0;
       let skipped = 0;
 
@@ -92,14 +93,16 @@ export const addCommand = defineCommand({
         const { content, exportName } = readLocaleFile(config, locale);
 
         if (config.fileExtension === '.json') {
-          // JSON file
           const json = JSON.parse(content);
-          setNestedValue(json, keyParts, translation);
+          setValueAtPath(json, keyPath, translation);
           writeLocaleFile(config, locale, JSON.stringify(json, null, 2));
         } else {
-          // TypeScript file - use regex to insert
-          const newContent = insertKeyIntoTS(content, exportName, keyParts, translation);
-          writeLocaleFile(config, locale, newContent);
+          // `existing` is the same file, already parsed by `loadLocale` above
+          // for the key-exists check. Editing that object and re-serialising is
+          // what makes nested keys work: the old text-splicing path inserted a
+          // duplicate parent block and lost its siblings.
+          setValueAtPath(existing, keyPath, translation);
+          writeLocaleFile(config, locale, renderTsLocale(content, exportName, existing));
         }
 
         consola.success(`  ${locale}: Added "${translation}"`);
@@ -116,98 +119,3 @@ export const addCommand = defineCommand({
     }
   },
 });
-
-/**
- * Set nested value in object
- */
-function setNestedValue(obj: Record<string, unknown>, keys: string[], value: string): void {
-  let current = obj;
-  for (let i = 0; i < keys.length - 1; i++) {
-    const key = keys[i];
-    if (!(key in current) || typeof current[key] !== 'object') {
-      current[key] = {};
-    }
-    current = current[key] as Record<string, unknown>;
-  }
-  current[keys[keys.length - 1]] = value;
-}
-
-/**
- * Insert key into TypeScript locale file
- */
-function insertKeyIntoTS(
-  content: string,
-  exportName: string,
-  keyParts: string[],
-  value: string
-): string {
-  // Find the object for the first key part
-  const firstKey = keyParts[0];
-  const restKeys = keyParts.slice(1);
-
-  // Check if top-level key exists
-  const topLevelRegex = new RegExp(`(${firstKey}:\\s*\\{)`, 'g');
-  const hasTopLevel = topLevelRegex.test(content);
-
-  if (!hasTopLevel) {
-    // Add new top-level key before closing brace
-    const closingBrace = content.lastIndexOf('}');
-    const indent = '  ';
-    const newEntry = buildNestedEntry(keyParts, value, indent);
-    return (
-      content.slice(0, closingBrace) + '\n' + newEntry + '\n' + content.slice(closingBrace)
-    );
-  }
-
-  // Navigate to the right nesting level and insert
-  // This is a simplified approach - for complex cases, consider AST parsing
-  let insertPoint = content.indexOf(`${firstKey}:`);
-  if (insertPoint === -1) return content;
-
-  // Find the opening brace for this section
-  let braceCount = 0;
-  let foundStart = false;
-  let insertIndex = insertPoint;
-
-  for (let i = insertPoint; i < content.length; i++) {
-    if (content[i] === '{') {
-      braceCount++;
-      foundStart = true;
-    } else if (content[i] === '}') {
-      braceCount--;
-      if (foundStart && braceCount === 0) {
-        // Insert before this closing brace
-        insertIndex = i;
-        break;
-      }
-    }
-  }
-
-  // Build the entry
-  const indent = '    '; // 4 spaces for nested
-  const entry = restKeys.length === 0
-    ? `${indent}${keyParts[keyParts.length - 1]}: '${escapeQuotes(value)}',`
-    : buildNestedEntry(restKeys, value, indent);
-
-  return content.slice(0, insertIndex) + '\n' + entry + '\n  ' + content.slice(insertIndex);
-}
-
-/**
- * Build nested entry string
- */
-function buildNestedEntry(keys: string[], value: string, baseIndent: string): string {
-  if (keys.length === 1) {
-    return `${baseIndent}${keys[0]}: '${escapeQuotes(value)}',`;
-  }
-
-  const [first, ...rest] = keys;
-  const nestedContent = buildNestedEntry(rest, value, baseIndent + '  ');
-  return `${baseIndent}${first}: {\n${nestedContent}\n${baseIndent}},`;
-}
-
-/**
- * Escape single quotes in value
- */
-function escapeQuotes(value: string): string {
-  return value.replace(/'/g, "\\'");
-}

package/src/cli/utils/locales.ts

@@ -123,12 +123,15 @@ export function readLocaleFile(
     return { content, exportName: '' };
   }
 
-  const exportMatch = content.match(/export const (\w+)/);
-  if (!exportMatch) {
+  // Destructured rather than indexed: `\w+` cannot match empty, so a match
+  // always carries group 1 — but only the binding proves that to the compiler,
+  // and the same `throw` covers both halves instead of asserting one of them.
+  const [, exportName] = content.match(/export const (\w+)/) ?? [];
+  if (!exportName) {
     throw new Error(`Could not find export in ${locale}${config.fileExtension}`);
   }
 
-  return { content, exportName: exportMatch[1] };
+  return { content, exportName };
 }
 
 /**
@@ -183,23 +186,124 @@ export function getValueAtPath(obj: Record<string, unknown>, keyPath: string): u
 }
 
 /**
- * Set value at nested path
+ * Set value at nested path.
+ *
+ * `isPlainRecord` rather than `typeof x === 'object'`: that test is true for
+ * `null` and for arrays. A `null` on the path crashed with "Cannot set
+ * properties of null", and an array swallowed the write silently — the value
+ * went nowhere and the CLI reported success.
+ *
+ * An empty `keyPath` writes nothing. `''.split('.')` yields `['']`, and the
+ * previous code indexed `keys[-1]`, producing a literal `"undefined"` key in
+ * the locale file.
  */
 export function setValueAtPath(
   obj: Record<string, unknown>,
   keyPath: string,
   value: unknown
 ): void {
-  const keys = keyPath.split('.');
+  const keys = keyPath.split('.').filter(Boolean);
+  const leaf = keys.pop();
+  if (leaf === undefined) return;
+
   let current = obj;
+  for (const key of keys) {
+    const next = current[key];
+    current = isPlainRecord(next) ? next : (current[key] = {});
+  }
+
+  current[leaf] = value;
+}
+
+/** A value that can carry nested keys: an object, but not `null` and not an array. */
+function isPlainRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+/** Object keys that need no quoting in a TS/JS object literal. */
+const BARE_KEY = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+
+/**
+ * Serialise a translations object back to a TypeScript object literal.
+ *
+ * Locale leaves are always strings and branches always plain objects, so this
+ * needs no general-purpose value support — anything else is a bug upstream and
+ * `JSON.stringify` is the honest fallback rather than a silent `[object]`.
+ */
+function toObjectLiteral(value: unknown, indent: string): string {
+  if (!isPlainRecord(value)) return JSON.stringify(value ?? null);
+
+  const inner = indent + '  ';
+  const body = Object.entries(value)
+    .map(([key, child]) => {
+      const name = BARE_KEY.test(key) ? key : JSON.stringify(key);
+      return `${inner}${name}: ${toObjectLiteral(child, inner)},`;
+    })
+    .join('\n');
+
+  return body ? `{\n${body}\n${indent}}` : '{}';
+}
 
-  for (let i = 0; i < keys.length - 1; i++) {
-    const key = keys[i];
-    if (!(key in current) || typeof current[key] !== 'object') {
-      current[key] = {};
+/**
+ * Replace the exported object literal in a TS locale file, keeping everything
+ * around it — the type import, the doc comment, and the `: I18nTranslations`
+ * annotation — untouched.
+ *
+ * The previous approach edited the text with `indexOf` and brace counting, and
+ * inserted a whole nested chain at the outermost level: adding `ui.form.cancel`
+ * to a file that already had `ui.form.save` produced a SECOND `form:` block
+ * inside `ui`. In a TS object literal the later key wins, so the existing
+ * translation was silently dropped — a data-loss bug, not a formatting one.
+ * The file's own comment said "for complex cases, consider AST parsing".
+ * Serialising the object `loadLocale` already parsed removes the need for both.
+ */
+export function renderTsLocale(
+  originalContent: string,
+  exportName: string,
+  translations: Record<string, unknown>
+): string {
+  const declaration = new RegExp(`(export\\s+const\\s+${exportName}\\b[^=]*=\\s*)`);
+  const match = originalContent.match(declaration);
+  if (!match || match.index === undefined) {
+    throw new Error(`Could not find "export const ${exportName}" to update`);
+  }
+
+  const bodyStart = match.index + match[0].length;
+  if (originalContent[bodyStart] !== '{') {
+    throw new Error(`Expected an object literal after "export const ${exportName}"`);
+  }
+
+  const bodyEnd = matchBrace(originalContent, bodyStart);
+  return (
+    originalContent.slice(0, bodyStart) +
+    toObjectLiteral(translations, '') +
+    originalContent.slice(bodyEnd + 1)
+  );
+}
+
+/**
+ * Index of the `}` closing the `{` at `start`.
+ *
+ * String-aware: a brace inside a translation (`"{count} items"`) would
+ * otherwise unbalance the count and truncate the file.
+ */
+function matchBrace(source: string, start: number): number {
+  let depth = 0;
+  let quote: string | null = null;
+
+  for (let i = start; i < source.length; i++) {
+    const char = source[i];
+
+    if (quote) {
+      if (char === '\\') i++;
+      else if (char === quote) quote = null;
+      continue;
     }
-    current = current[key] as Record<string, unknown>;
+
+    if (char === '"' || char === "'" || char === '`') quote = char;
+    else if (char === '{') depth++;
+    else if (char === '}' && --depth === 0) return i;
   }
 
-  current[keys[keys.length - 1]] = value;
+  throw new Error('Unbalanced braces in locale file');
 }

package/src/context.tsx

@@ -117,11 +117,14 @@ export function I18nProvider({
     [onLocaleChange]
   )
 
-  // Sync with external locale changes
+  // Sync with external locale changes.
+  //
+  // The comparison moved inside the updater rather than `locale` joining the
+  // deps: this effect must run when the PROP changes, not when local state
+  // does. Depending on `locale` would re-run it after every `setLocale` call
+  // and reset the user's choice back to `initialLocale`.
   React.useEffect(() => {
-    if (initialLocale !== locale) {
-      setLocaleState(initialLocale)
-    }
+    setLocaleState((current) => (current === initialLocale ? current : initialLocale))
   }, [initialLocale])
 
   const value = React.useMemo<I18nContextValue>(

package/src/locales/ar.ts

@@ -470,61 +470,6 @@ export const ar: I18nTranslations = {
     },
   },
 
-  centrifugo: {
-    monitor: {
-      title: 'مراقب Centrifugo',
-      description: 'مراقبة وتصحيح WebSocket في الوقت الفعلي',
-      openMonitor: 'فتح مراقب Centrifugo',
-      openDebugPanel: 'فتح لوحة تصحيح Centrifugo',
-      widgetTitle: 'مراقب WebSocket',
-    },
-    tabs: {
-      connection: 'الاتصال',
-      messages: 'الرسائل',
-      subscriptions: 'الاشتراكات',
-    },
-    subscriptionsList: {
-      title: 'الاشتراكات النشطة',
-      notConnected: 'غير متصل بـ Centrifugo',
-      noActiveSubscriptions: 'لا توجد اشتراكات نشطة',
-    },
-    status: {
-      connected: 'متصل',
-      disconnected: 'غير متصل',
-      connecting: 'جارٍ الاتصال...',
-      connect: 'اتصال',
-      uptime: 'وقت التشغيل:',
-      subscriptions: 'الاشتراكات:',
-      realtimeUnavailable: 'ميزات الوقت الفعلي غير متاحة',
-    },
-    feed: {
-      title: 'تغذية الرسائل',
-      noMessages: 'لا توجد رسائل بعد',
-      pausedClickToResume: 'متوقف - انقر على تشغيل للاستئناف',
-      autoScrollOn: 'التمرير التلقائي: مفعّل',
-      autoScrollOff: 'التمرير التلقائي: معطّل',
-      viewData: 'عرض البيانات',
-    },
-    filters: {
-      title: 'الفلاتر',
-      active: 'نشط',
-      clear: 'مسح',
-      searchMessages: 'البحث في الرسائل...',
-      level: 'المستوى:',
-      type: 'النوع:',
-      source: 'المصدر',
-      autoScrollToLatest: 'التمرير التلقائي للأحدث',
-    },
-    debug: {
-      title: 'تصحيح Centrifugo',
-      description: 'حالة اتصال WebSocket والسجلات والاشتراكات',
-      openDebugPanel: 'فتح لوحة تصحيح Centrifugo',
-      tabConnection: 'الاتصال',
-      tabLogs: 'السجلات',
-      tabSubscriptions: 'الاشتراكات',
-    },
-  },
-
   tools: {
     code: {
       copyCode: 'نسخ الكود',

package/src/locales/da.ts

@@ -470,61 +470,6 @@ export const da: I18nTranslations = {
     },
   },
 
-  centrifugo: {
-    monitor: {
-      title: 'Centrifugo-monitor',
-      description: 'Realtids WebSocket-overvågning og fejlfinding',
-      openMonitor: 'Åbn Centrifugo-monitor',
-      openDebugPanel: 'Åbn Centrifugo-fejlfindingspanel',
-      widgetTitle: 'WebSocket-monitor',
-    },
-    tabs: {
-      connection: 'Forbindelse',
-      messages: 'Beskeder',
-      subscriptions: 'Abonnementer',
-    },
-    subscriptionsList: {
-      title: 'Aktive abonnementer',
-      notConnected: 'Ikke forbundet til Centrifugo',
-      noActiveSubscriptions: 'Ingen aktive abonnementer',
-    },
-    status: {
-      connected: 'Forbundet',
-      disconnected: 'Afbrudt',
-      connecting: 'Forbinder...',
-      connect: 'Forbind',
-      uptime: 'Oppetid:',
-      subscriptions: 'Abonnementer:',
-      realtimeUnavailable: 'Realtidsfunktioner utilgængelige',
-    },
-    feed: {
-      title: 'Beskedstrøm',
-      noMessages: 'Ingen beskeder endnu',
-      pausedClickToResume: 'Sat på pause - Klik på afspil for at fortsætte',
-      autoScrollOn: 'Automatisk scroll: TIL',
-      autoScrollOff: 'Automatisk scroll: FRA',
-      viewData: 'Vis data',
-    },
-    filters: {
-      title: 'Filtre',
-      active: 'Aktiv',
-      clear: 'Ryd',
-      searchMessages: 'Søg i beskeder...',
-      level: 'Niveau:',
-      type: 'Type:',
-      source: 'Kilde',
-      autoScrollToLatest: 'Automatisk scroll til nyeste',
-    },
-    debug: {
-      title: 'Centrifugo-fejlfinding',
-      description: 'WebSocket-forbindelsesstatus, logs og abonnementer',
-      openDebugPanel: 'Åbn Centrifugo-fejlfindingspanel',
-      tabConnection: 'Forbindelse',
-      tabLogs: 'Logs',
-      tabSubscriptions: 'Abonnementer',
-    },
-  },
-
   tools: {
     code: {
       copyCode: 'Kopier kode',

package/src/locales/de.ts

@@ -470,61 +470,6 @@ export const de: I18nTranslations = {
     },
   },
 
-  centrifugo: {
-    monitor: {
-      title: 'Centrifugo Monitor',
-      description: 'Echtzeit-WebSocket-Überwachung und Debugging',
-      openMonitor: 'Centrifugo Monitor öffnen',
-      openDebugPanel: 'Centrifugo Debug-Panel öffnen',
-      widgetTitle: 'WebSocket Monitor',
-    },
-    tabs: {
-      connection: 'Verbindung',
-      messages: 'Nachrichten',
-      subscriptions: 'Abonnements',
-    },
-    subscriptionsList: {
-      title: 'Aktive Abonnements',
-      notConnected: 'Nicht mit Centrifugo verbunden',
-      noActiveSubscriptions: 'Keine aktiven Abonnements',
-    },
-    status: {
-      connected: 'Verbunden',
-      disconnected: 'Getrennt',
-      connecting: 'Verbinden...',
-      connect: 'Verbinden',
-      uptime: 'Betriebszeit:',
-      subscriptions: 'Abonnements:',
-      realtimeUnavailable: 'Echtzeit-Funktionen nicht verfügbar',
-    },
-    feed: {
-      title: 'Nachrichten-Feed',
-      noMessages: 'Noch keine Nachrichten',
-      pausedClickToResume: 'Pausiert - Klicken Sie auf Wiedergabe zum Fortsetzen',
-      autoScrollOn: 'Auto-Scroll: AN',
-      autoScrollOff: 'Auto-Scroll: AUS',
-      viewData: 'Daten anzeigen',
-    },
-    filters: {
-      title: 'Filter',
-      active: 'Aktiv',
-      clear: 'Löschen',
-      searchMessages: 'Nachrichten suchen...',
-      level: 'Stufe:',
-      type: 'Typ:',
-      source: 'Quelle',
-      autoScrollToLatest: 'Auto-Scroll zum Neuesten',
-    },
-    debug: {
-      title: 'Centrifugo Debug',
-      description: 'WebSocket-Verbindungsstatus, Protokolle und Abonnements',
-      openDebugPanel: 'Centrifugo Debug-Panel öffnen',
-      tabConnection: 'Verbindung',
-      tabLogs: 'Protokolle',
-      tabSubscriptions: 'Abonnements',
-    },
-  },
-
   tools: {
     code: {
       copyCode: 'Code kopieren',

package/src/locales/en.ts

@@ -479,61 +479,6 @@ export const en: I18nTranslations = {
     },
   },
 
-  centrifugo: {
-    monitor: {
-      title: 'Centrifugo Monitor',
-      description: 'Real-time WebSocket monitoring and debugging',
-      openMonitor: 'Open Centrifugo Monitor',
-      openDebugPanel: 'Open Centrifugo Debug Panel',
-      widgetTitle: 'WebSocket Monitor',
-    },
-    tabs: {
-      connection: 'Connection',
-      messages: 'Messages',
-      subscriptions: 'Subscriptions',
-    },
-    subscriptionsList: {
-      title: 'Active Subscriptions',
-      notConnected: 'Not connected to Centrifugo',
-      noActiveSubscriptions: 'No active subscriptions',
-    },
-    status: {
-      connected: 'Connected',
-      disconnected: 'Disconnected',
-      connecting: 'Connecting...',
-      connect: 'Connect',
-      uptime: 'Uptime:',
-      subscriptions: 'Subscriptions:',
-      realtimeUnavailable: 'Real-time features unavailable',
-    },
-    feed: {
-      title: 'Messages Feed',
-      noMessages: 'No messages yet',
-      pausedClickToResume: 'Paused - Click play to resume',
-      autoScrollOn: 'Auto-scroll: ON',
-      autoScrollOff: 'Auto-scroll: OFF',
-      viewData: 'View data',
-    },
-    filters: {
-      title: 'Filters',
-      active: 'Active',
-      clear: 'Clear',
-      searchMessages: 'Search messages...',
-      level: 'Level:',
-      type: 'Type:',
-      source: 'Source',
-      autoScrollToLatest: 'Auto-scroll to latest',
-    },
-    debug: {
-      title: 'Centrifugo Debug',
-      description: 'WebSocket connection status, logs, and subscriptions',
-      openDebugPanel: 'Open Centrifugo Debug Panel',
-      tabConnection: 'Connection',
-      tabLogs: 'Logs',
-      tabSubscriptions: 'Subscriptions',
-    },
-  },
-
   tools: {
     code: {
       copyCode: 'Copy code',

package/src/locales/es.ts

@@ -470,61 +470,6 @@ export const es: I18nTranslations = {
     },
   },
 
-  centrifugo: {
-    monitor: {
-      title: 'Monitor Centrifugo',
-      description: 'Monitoreo y depuración de WebSocket en tiempo real',
-      openMonitor: 'Abrir Monitor Centrifugo',
-      openDebugPanel: 'Abrir Panel de Depuración Centrifugo',
-      widgetTitle: 'Monitor WebSocket',
-    },
-    tabs: {
-      connection: 'Conexión',
-      messages: 'Mensajes',
-      subscriptions: 'Suscripciones',
-    },
-    subscriptionsList: {
-      title: 'Suscripciones activas',
-      notConnected: 'No conectado a Centrifugo',
-      noActiveSubscriptions: 'No hay suscripciones activas',
-    },
-    status: {
-      connected: 'Conectado',
-      disconnected: 'Desconectado',
-      connecting: 'Conectando...',
-      connect: 'Conectar',
-      uptime: 'Tiempo activo:',
-      subscriptions: 'Suscripciones:',
-      realtimeUnavailable: 'Funciones en tiempo real no disponibles',
-    },
-    feed: {
-      title: 'Feed de mensajes',
-      noMessages: 'No hay mensajes aún',
-      pausedClickToResume: 'Pausado - Haz clic en reproducir para continuar',
-      autoScrollOn: 'Auto-scroll: ACTIVADO',
-      autoScrollOff: 'Auto-scroll: DESACTIVADO',
-      viewData: 'Ver datos',
-    },
-    filters: {
-      title: 'Filtros',
-      active: 'Activo',
-      clear: 'Limpiar',
-      searchMessages: 'Buscar mensajes...',
-      level: 'Nivel:',
-      type: 'Tipo:',
-      source: 'Fuente',
-      autoScrollToLatest: 'Auto-scroll a lo más reciente',
-    },
-    debug: {
-      title: 'Depuración Centrifugo',
-      description: 'Estado de conexión WebSocket, logs y suscripciones',
-      openDebugPanel: 'Abrir Panel de Depuración Centrifugo',
-      tabConnection: 'Conexión',
-      tabLogs: 'Logs',
-      tabSubscriptions: 'Suscripciones',
-    },
-  },
-
   tools: {
     code: {
       copyCode: 'Copiar código',