🐛 fix: Preserve numeric string keys as objects instead of arrays (#164)

snomiao · claude · web-flow · commit 9645ed833d0b · 2026-02-15T08:30:05.000+08:00
Fixed issue where objects with numeric string keys (e.g., {"0": {...}, "1": {...}}) were being converted to arrays during i18n translation processing. The root cause was lodash set() treating numeric string keys as array indices. Implemented custom setByPath() function that always treats keys as object properties. Related: Comfy-Org/ComfyUI_frontend#8718 Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
diff --git a/packages/lobe-i18n/src/utils/diffJson.ts b/packages/lobe-i18n/src/utils/diffJson.ts
@@ -1,9 +1,11 @@
 import { diff as justDiff } from 'just-diff';
-import { cloneDeep, set, unset } from 'lodash-es';
+import { cloneDeep, unset } from 'lodash-es';
 
 import { LocaleObj } from '@/types';
 import { I18nConfig, KeyStyle } from '@/types/config';
 
+import { setByPath } from './setByPath';
+
 type DiffPath = string | Array<number | string>;
 
 const hasOwnKey = (obj: LocaleObj, key: string) => Object.prototype.hasOwnProperty.call(obj, key);
@@ -45,7 +47,9 @@ export const diff = (
 
   for (const item of add) {
     const path = resolveDiffPath(entry, item.path as DiffPath, keyStyle);
-    set(extra, path, item.value);
+    // Use custom setByPath to preserve numeric string keys as object keys
+    const pathArray = Array.isArray(path) ? path : [path];
+    setByPath(extra, pathArray, item.value);
   }
 
   return {
diff --git a/packages/lobe-i18n/src/utils/setByPath.test.ts b/packages/lobe-i18n/src/utils/setByPath.test.ts
@@ -0,0 +1,146 @@
+import { describe, expect, it } from 'vitest';
+
+import { setByPath } from './setByPath';
+
+describe('setByPath', () => {
+  it('should set a simple nested value', () => {
+    const obj = {};
+    setByPath(obj, ['a', 'b', 'c'], 'value');
+    expect(obj).toEqual({ a: { b: { c: 'value' } } });
+  });
+
+  it('should preserve numeric string keys as object keys, not array indices', () => {
+    const obj = {};
+    setByPath(obj, ['nodeDefs', '0', 'name'], 'First Node');
+    setByPath(obj, ['nodeDefs', '1', 'name'], 'Second Node');
+    setByPath(obj, ['nodeDefs', '2', 'name'], 'Third Node');
+
+    expect(obj).toEqual({
+      nodeDefs: {
+        '0': { name: 'First Node' },
+        '1': { name: 'Second Node' },
+        '2': { name: 'Third Node' },
+      },
+    });
+
+    // Verify it's an object, not an array
+    expect(Array.isArray((obj as any).nodeDefs)).toBe(false);
+  });
+
+  it('should handle numeric keys at the root level', () => {
+    const obj = {};
+    setByPath(obj, ['0'], 'value0');
+    setByPath(obj, ['1'], 'value1');
+
+    expect(obj).toEqual({
+      '0': 'value0',
+      '1': 'value1',
+    });
+
+    expect(Array.isArray(obj)).toBe(false);
+  });
+
+  it('should handle mixed numeric and string keys', () => {
+    const obj = {};
+    setByPath(obj, ['items', '0', 'id'], 'first');
+    setByPath(obj, ['items', 'abc', 'id'], 'second');
+    setByPath(obj, ['items', '1', 'id'], 'third');
+
+    expect(obj).toEqual({
+      items: {
+        '0': { id: 'first' },
+        '1': { id: 'third' },
+        'abc': { id: 'second' },
+      },
+    });
+
+    expect(Array.isArray((obj as any).items)).toBe(false);
+  });
+
+  it('should overwrite existing values', () => {
+    const obj = { a: { b: 'old' } };
+    setByPath(obj, ['a', 'b'], 'new');
+    expect(obj).toEqual({ a: { b: 'new' } });
+  });
+
+  it('should handle single-key paths', () => {
+    const obj = {};
+    setByPath(obj, ['key'], 'value');
+    expect(obj).toEqual({ key: 'value' });
+  });
+
+  it('should handle empty path gracefully', () => {
+    const obj = { existing: 'data' };
+    setByPath(obj, [], 'value');
+    // Should not modify the object
+    expect(obj).toEqual({ existing: 'data' });
+  });
+
+  it('should create intermediate objects when path does not exist', () => {
+    const obj = {};
+    setByPath(obj, ['a', 'b', 'c', 'd'], 'value');
+    expect(obj).toEqual({
+      a: {
+        b: {
+          c: {
+            d: 'value',
+          },
+        },
+      },
+    });
+  });
+
+  it('should replace non-object intermediate values with objects', () => {
+    const obj: any = { a: 'string' };
+    setByPath(obj, ['a', 'b'], 'value');
+    expect(obj).toEqual({
+      a: {
+        b: 'value',
+      },
+    });
+  });
+
+  it('should handle complex nested structures with numeric keys', () => {
+    const obj = {};
+    setByPath(obj, ['nodeDefs', '0', 'inputs', '0', 'name'], 'input1');
+    setByPath(obj, ['nodeDefs', '0', 'inputs', '1', 'name'], 'input2');
+    setByPath(obj, ['nodeDefs', '1', 'outputs', '0', 'name'], 'output1');
+
+    expect(obj).toEqual({
+      nodeDefs: {
+        '0': {
+          inputs: {
+            '0': { name: 'input1' },
+            '1': { name: 'input2' },
+          },
+        },
+        '1': {
+          outputs: {
+            '0': { name: 'output1' },
+          },
+        },
+      },
+    });
+
+    // Verify all levels are objects, not arrays
+    const typed = obj as any;
+    expect(Array.isArray(typed.nodeDefs)).toBe(false);
+    expect(Array.isArray(typed.nodeDefs['0'].inputs)).toBe(false);
+    expect(Array.isArray(typed.nodeDefs['1'].outputs)).toBe(false);
+  });
+
+  it('should handle number type in path (not just numeric strings)', () => {
+    const obj = {};
+    setByPath(obj, ['items', 0, 'name'], 'First');
+    setByPath(obj, ['items', 1, 'name'], 'Second');
+
+    expect(obj).toEqual({
+      items: {
+        '0': { name: 'First' },
+        '1': { name: 'Second' },
+      },
+    });
+
+    expect(Array.isArray((obj as any).items)).toBe(false);
+  });
+});
diff --git a/packages/lobe-i18n/src/utils/setByPath.ts b/packages/lobe-i18n/src/utils/setByPath.ts
@@ -0,0 +1,32 @@
+/**
+ * Custom implementation of lodash set() that preserves numeric string keys as object keys
+ * instead of converting them to array indices.
+ *
+ * This fixes the issue where objects like {"0": {...}, "1": {...}} were being converted
+ * to arrays during the i18n translation process.
+ *
+ * @param obj - The object to set the value in
+ * @param path - Array of keys representing the path
+ * @param value - The value to set
+ */
+export function setByPath(obj: any, path: Array<string | number>, value: any): void {
+  if (path.length === 0) return;
+
+  let current = obj;
+
+  // Navigate to the parent of the target key
+  for (let i = 0; i < path.length - 1; i++) {
+    const key = String(path[i]); // Always treat keys as strings
+
+    // Create intermediate object if it doesn't exist or is not an object
+    if (!current[key] || typeof current[key] !== 'object') {
+      current[key] = {};
+    }
+
+    current = current[key];
+  }
+
+  // Set the final value
+  const finalKey = String(path.at(-1));
+  current[finalKey] = value;
+}
