@djangocfg/i18n 2.1.542 → 2.1.543

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/i18n",
-  "version": "2.1.542",
+  "version": "2.1.543",
   "description": "Lightweight i18n library for @djangocfg packages with built-in translations for English, Russian, and Korean",
   "keywords": [
     "i18n",
@@ -75,7 +75,7 @@
     "jiti": "^2.7.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.542",
+    "@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>(