fix(cli): jsonc hints arrays (#1710)

* chore: fix pnpm i

* fix: support hints in arrays

* chore: add changeset

Author: vrcprl

.changeset/little-deserts-lay.md

@@ -0,0 +1,6 @@
+---
+"@compiler/demo-next": patch
+"lingo.dev": patch
+---
+
+Add support for JSONC comments in arrays

demo/new-compiler-next16/package.json

@@ -9,7 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
-    "@lingo.dev/compiler": "workspace:^1.0.0-beta",
+    "@lingo.dev/compiler": "workspace:*",
     "next": "^16.0.4",
     "react": "19.2.0",
     "react-dom": "19.2.0"

demo/new-compiler-vite-react-spa/public/translations/de.json

@@ -2,6 +2,15 @@
   "version": 0.1,
   "locale": "de",
   "entries": {
+    "daa4d8839395": "{counter} mal geklickt",
+    "52ed9ee761d8": "Hallo Welt",
+    "f11fc78c3ac0": "<b0>Gemischter</b0> Inhalt <i0>Fragment</i0>",
+    "556f5956dca7": "Willkommen zur Lingo.dev Compiler Demo",
+    "02704ec4e52a": "Es extrahiert automatisch Text aus Ihrem JSX und übersetzt ihn in andere Sprachen.",
+    "de6bfb30be49": "Text, der als <code0></code0> eingefügt wird, wird nicht übersetzt: {text}",
+    "5c15bd35e916": "Um es zu übersetzen, müssen Sie es in '<'>{translatableText} '<'/> einschließen",
+    "93b50fe805b7": "Text außerhalb der Komponente wird nicht übersetzt: {externalText}",
+    "d756b03ffbf5": "Inhalte, die Text und andere Tags enthalten, werden als eine Einheit übersetzt: {translatableMixedContextFragment}",
     "8492c53cfbaf": "Über Lingo.dev",
     "8aa4fe3f0590": "Dies ist eine Demo-Anwendung, die den Lingo.dev-Compiler für automatische Übersetzungen in React-Anwendungen präsentiert.",
     "af76f667703b": "Hauptfunktionen",
@@ -12,15 +21,6 @@
     "aca12d550fe2": "Unterstützung für Server- und Client-Komponenten",
     "44a3311c3a4a": "Wie es funktioniert",
     "0add30e37450": "Der Compiler analysiert Ihre React-Komponenten zur Build-Zeit und extrahiert automatisch alle übersetzbaren Strings. Anschließend generiert er Übersetzungen mit Ihrem konfigurierten Übersetzungsanbieter.",
-    "07d84d34dd3a": "Fügen Sie einfach die Direktive \"use i18n\" am Anfang Ihrer Komponentendateien hinzu, und der Compiler erledigt den Rest!",
-    "daa4d8839395": "{counter} mal geklickt",
-    "52ed9ee761d8": "Hallo Welt",
-    "f11fc78c3ac0": "<b0>Gemischter</b0> Inhalt <i0>Fragment</i0>",
-    "556f5956dca7": "Willkommen zur Lingo.dev Compiler Demo",
-    "02704ec4e52a": "Es extrahiert automatisch Text aus Ihrem JSX und übersetzt ihn in andere Sprachen.",
-    "de6bfb30be49": "Text, der als <code0></code0> eingefügt wird, wird nicht übersetzt: {text}",
-    "5c15bd35e916": "Um es zu übersetzen, müssen Sie es in '<'>{translatableText} '<'/> einschließen",
-    "93b50fe805b7": "Text außerhalb der Komponente wird nicht übersetzt: {externalText}",
-    "d756b03ffbf5": "Inhalte, die Text und andere Tags enthalten, werden als eine Einheit übersetzt: {translatableMixedContextFragment}"
+    "07d84d34dd3a": "Fügen Sie einfach die Direktive \"use i18n\" am Anfang Ihrer Komponentendateien hinzu, und der Compiler erledigt den Rest!"
   }
-}
+}

demo/new-compiler-vite-react-spa/public/translations/en.json

@@ -2,6 +2,15 @@
   "version": 0.1,
   "locale": "en",
   "entries": {
+    "daa4d8839395": "Clicked {counter} times",
+    "52ed9ee761d8": "Hello World",
+    "f11fc78c3ac0": "<b0>Mixed</b0> content <i0>fragment</i0>",
+    "556f5956dca7": "Welcome to Lingo.dev compiler demo",
+    "02704ec4e52a": "It automatically extract text from your JSX and translate it to other languages.",
+    "de6bfb30be49": "Text inserted as an <code0></code0> is not translated: {text}",
+    "5c15bd35e916": "To translate it you have to wrap it into the '<'>{translatableText} '<'/>",
+    "93b50fe805b7": "Text external to the component is not translated: {externalText}",
+    "d756b03ffbf5": "Content that has text and other tags inside will br translated as a single entity: {translatableMixedContextFragment}",
     "8492c53cfbaf": "About Lingo.dev",
     "8aa4fe3f0590": "This is a demo application showcasing the Lingo.dev compiler for automatic translations in React applications.",
     "af76f667703b": "Key Features",
@@ -12,15 +21,6 @@
     "aca12d550fe2": "Server and client component support",
     "44a3311c3a4a": "How It Works",
     "0add30e37450": "The compiler analyzes your React components at build time and automatically extracts all translatable strings. It then generates translations using your configured translation provider.",
-    "07d84d34dd3a": "Simply add the \"use i18n\" directive at the top of your component files, and the compiler handles the rest!",
-    "daa4d8839395": "Clicked {counter} times",
-    "52ed9ee761d8": "Hello World",
-    "f11fc78c3ac0": "<b0>Mixed</b0> content <i0>fragment</i0>",
-    "556f5956dca7": "Welcome to Lingo.dev compiler demo",
-    "02704ec4e52a": "It automatically extract text from your JSX and translate it to other languages.",
-    "de6bfb30be49": "Text inserted as an <code0></code0> is not translated: {text}",
-    "5c15bd35e916": "To translate it you have to wrap it into the '<'>{translatableText} '<'/>",
-    "93b50fe805b7": "Text external to the component is not translated: {externalText}",
-    "d756b03ffbf5": "Content that has text and other tags inside will br translated as a single entity: {translatableMixedContextFragment}"
+    "07d84d34dd3a": "Simply add the \"use i18n\" directive at the top of your component files, and the compiler handles the rest!"
   }
-}
+}

demo/new-compiler-vite-react-spa/public/translations/es.json

@@ -2,6 +2,15 @@
   "version": 0.1,
   "locale": "es",
   "entries": {
+    "daa4d8839395": "Clicado {counter} veces",
+    "52ed9ee761d8": "Hola Mundo",
+    "f11fc78c3ac0": "Contenido <b0>mixto</b0> <i0>fragmento</i0>",
+    "556f5956dca7": "Bienvenido a la demo de Lingo.dev compiler",
+    "02704ec4e52a": "Extrae automáticamente texto de tu JSX y lo traduce a otros idiomas.",
+    "de6bfb30be49": "El texto insertado como <code0></code0> no se traduce: {text}",
+    "5c15bd35e916": "Para traducirlo tienes que envolverlo en el '<'>{translatableText} '<'/>",
+    "93b50fe805b7": "El texto externo al componente no se traduce: {externalText}",
+    "d756b03ffbf5": "El contenido que tiene texto y otras etiquetas dentro se traducirá como una sola entidad: {translatableMixedContextFragment}",
     "8492c53cfbaf": "Acerca de Lingo.dev",
     "8aa4fe3f0590": "Esta es una aplicación de demostración que muestra el compilador Lingo.dev para traducciones automáticas en aplicaciones React.",
     "af76f667703b": "Características principales",
@@ -12,15 +21,6 @@
     "aca12d550fe2": "Soporte para componentes de servidor y cliente",
     "44a3311c3a4a": "Cómo funciona",
     "0add30e37450": "El compilador analiza tus componentes de React en tiempo de compilación y extrae automáticamente todas las cadenas traducibles. Luego genera traducciones utilizando tu proveedor de traducción configurado.",
-    "07d84d34dd3a": "¡Simplemente agrega la directiva \"use i18n\" en la parte superior de tus archivos de componentes, y el compilador se encarga del resto!",
-    "daa4d8839395": "Clicado {counter} veces",
-    "52ed9ee761d8": "Hola Mundo",
-    "f11fc78c3ac0": "Contenido <b0>mixto</b0> <i0>fragmento</i0>",
-    "556f5956dca7": "Bienvenido a la demo de Lingo.dev compiler",
-    "02704ec4e52a": "Extrae automáticamente texto de tu JSX y lo traduce a otros idiomas.",
-    "de6bfb30be49": "El texto insertado como <code0></code0> no se traduce: {text}",
-    "5c15bd35e916": "Para traducirlo tienes que envolverlo en el '<'>{translatableText} '<'/>",
-    "93b50fe805b7": "El texto externo al componente no se traduce: {externalText}",
-    "d756b03ffbf5": "El contenido que tiene texto y otras etiquetas dentro se traducirá como una sola entidad: {translatableMixedContextFragment}"
+    "07d84d34dd3a": "¡Simplemente agrega la directiva \"use i18n\" en la parte superior de tus archivos de componentes, y el compilador se encarga del resto!"
   }
-}
+}

demo/new-compiler-vite-react-spa/public/translations/fr.json

@@ -2,6 +2,15 @@
   "version": 0.1,
   "locale": "fr",
   "entries": {
+    "daa4d8839395": "Cliqué {counter} fois",
+    "52ed9ee761d8": "Bonjour le monde",
+    "f11fc78c3ac0": "<b0>Contenu</b0> mixte <i0>fragment</i0>",
+    "556f5956dca7": "Bienvenue dans la démo du compilateur Lingo.dev",
+    "02704ec4e52a": "Il extrait automatiquement le texte de votre JSX et le traduit dans d'autres langues.",
+    "de6bfb30be49": "Le texte inséré comme un <code0></code0> n'est pas traduit : {text}",
+    "5c15bd35e916": "Pour le traduire, vous devez l'envelopper dans le '<'>{translatableText} '<'/>",
+    "93b50fe805b7": "Le texte externe au composant n'est pas traduit : {externalText}",
+    "d756b03ffbf5": "Le contenu qui contient du texte et d'autres balises sera traduit comme une seule entité : {translatableMixedContextFragment}",
     "8492c53cfbaf": "À propos de Lingo.dev",
     "8aa4fe3f0590": "Ceci est une application de démonstration présentant le compilateur Lingo.dev pour les traductions automatiques dans les applications React.",
     "af76f667703b": "Fonctionnalités clés",
@@ -12,15 +21,6 @@
     "aca12d550fe2": "Prise en charge des composants serveur et client",
     "44a3311c3a4a": "Comment ça fonctionne",
     "0add30e37450": "Le compilateur analyse vos composants React au moment de la compilation et extrait automatiquement toutes les chaînes traduisibles. Il génère ensuite des traductions en utilisant votre fournisseur de traduction configuré.",
-    "07d84d34dd3a": "Ajoutez simplement la directive \"use i18n\" en haut de vos fichiers de composants, et le compilateur s'occupe du reste !",
-    "daa4d8839395": "Cliqué {counter} fois",
-    "52ed9ee761d8": "Bonjour le monde",
-    "f11fc78c3ac0": "<b0>Contenu</b0> mixte <i0>fragment</i0>",
-    "556f5956dca7": "Bienvenue dans la démo du compilateur Lingo.dev",
-    "02704ec4e52a": "Il extrait automatiquement le texte de votre JSX et le traduit dans d'autres langues.",
-    "de6bfb30be49": "Le texte inséré comme un <code0></code0> n'est pas traduit : {text}",
-    "5c15bd35e916": "Pour le traduire, vous devez l'envelopper dans le '<'>{translatableText} '<'/>",
-    "93b50fe805b7": "Le texte externe au composant n'est pas traduit : {externalText}",
-    "d756b03ffbf5": "Le contenu qui contient du texte et d'autres balises sera traduit comme une seule entité : {translatableMixedContextFragment}"
+    "07d84d34dd3a": "Ajoutez simplement la directive \"use i18n\" en haut de vos fichiers de composants, et le compilateur s'occupe du reste !"
   }
-}
+}

packages/cli/src/cli/loaders/jsonc.spec.ts

@@ -219,4 +219,41 @@ describe("jsonc loader", () => {
       },
     });
   });
+
+  it("pullHints should extract comments from arrays", async () => {
+    const loader = createJsoncLoader();
+    loader.setDefaultLocale("en");
+    const jsoncInput = `{
+      "items": [
+        {
+          "value": "First item",
+          "type": "heading"
+        },
+        {
+          // This is a hint for the second item
+          "value": "Second item",
+          "type": "text"
+        },
+        {
+          // This is a hint for the third item
+          "value": "Third item",
+          "type": "text"
+        }
+      ]
+    }`;
+
+    await loader.pull("en", jsoncInput);
+    const comments = await loader.pullHints(jsoncInput);
+
+    expect(comments).toEqual({
+      items: {
+        "1": {
+          value: { hint: "This is a hint for the second item" },
+        },
+        "2": {
+          value: { hint: "This is a hint for the third item" },
+        },
+      },
+    });
+  });
 });

packages/cli/src/cli/loaders/jsonc.ts

@@ -23,8 +23,9 @@ function extractCommentsFromJsonc(jsoncString: string): Record<string, any> {
     return {};
   }
 
-  // Track nesting context
-  const contextStack: Array<{ key: string; isArray: boolean }> = [];
+  // Track nesting context with array indices
+  const contextStack: Array<{ key: string; isArray: boolean; arrayIndex?: number }> = [];
+  let arrayObjectCount: Record<number, number> = {}; // Track object count per array depth
 
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i];
@@ -42,12 +43,12 @@ function extractCommentsFromJsonc(jsoncString: string): Record<string, any> {
         const keyMatch = line.match(/^\s*["']?([^"':,\s]+)["']?\s*:/);
         if (keyMatch) {
           const key = keyMatch[1];
-          const path = contextStack.map((ctx) => ctx.key).filter(Boolean);
+          const path = contextStack.map((ctx) => ctx.arrayIndex !== undefined ? String(ctx.arrayIndex) : ctx.key).filter(Boolean);
           keyInfo = { key, path };
         }
       } else {
         // For standalone comments, find the next key
-        keyInfo = findAssociatedKey(lines, commentData.lineIndex, contextStack);
+        keyInfo = findAssociatedKey(lines, commentData.lineIndex, contextStack, arrayObjectCount);
       }
 
       if (keyInfo && keyInfo.key) {
@@ -60,7 +61,7 @@ function extractCommentsFromJsonc(jsoncString: string): Record<string, any> {
     }
 
     // Update context for object/array nesting
-    updateContext(contextStack, line, result);
+    updateContext(contextStack, line, result, arrayObjectCount);
   }
 
   return comments;
@@ -166,7 +167,8 @@ function extractBlockComment(
 function findAssociatedKey(
   lines: string[],
   commentLineIndex: number,
-  contextStack: Array<{ key: string; isArray: boolean }>,
+  contextStack: Array<{ key: string; isArray: boolean; arrayIndex?: number }>,
+  arrayObjectCount: Record<number, number>,
 ): { key: string | null; path: string[] } {
   // Look for the next key after the comment
   for (let i = commentLineIndex + 1; i < lines.length; i++) {
@@ -175,18 +177,50 @@ function findAssociatedKey(
     if (
       !line ||
       line.startsWith("//") ||
-      line.startsWith("/*") ||
-      line === "{" ||
-      line === "}"
+      line.startsWith("/*")
     ) {
       continue;
     }
 
+    // Check if we're about to enter an array object
+    if (line === "{" && contextStack.length > 0) {
+      const parent = contextStack[contextStack.length - 1];
+      if (parent.isArray) {
+        // Get the current array index from arrayObjectCount
+        const depth = contextStack.length - 1;
+        const arrayIndex = arrayObjectCount[depth] || 0;
+
+        // Continue looking for the key inside this object
+        for (let j = i + 1; j < lines.length; j++) {
+          const innerLine = lines[j].trim();
+          if (!innerLine || innerLine.startsWith("//") || innerLine.startsWith("/*")) continue;
+
+          const keyMatch = innerLine.match(/^\s*["']?([^"':,\s]+)["']?\s*:/);
+          if (keyMatch) {
+            const key = keyMatch[1];
+            const path = contextStack
+              .map((ctx) => ctx.arrayIndex !== undefined ? String(ctx.arrayIndex) : ctx.key)
+              .filter(Boolean);
+            path.push(String(arrayIndex));
+            return { key, path };
+          }
+
+          if (innerLine === "}") break;
+        }
+      }
+    }
+
+    if (line === "{" || line === "}") {
+      continue;
+    }
+
     // Extract key from line
     const keyMatch = line.match(/^\s*["']?([^"':,\s]+)["']?\s*:/);
     if (keyMatch) {
       const key = keyMatch[1];
-      const path = contextStack.map((ctx) => ctx.key).filter(Boolean);
+      const path = contextStack
+        .map((ctx) => ctx.arrayIndex !== undefined ? String(ctx.arrayIndex) : ctx.key)
+        .filter(Boolean);
       return { key, path };
     }
   }
@@ -195,12 +229,23 @@ function findAssociatedKey(
 }
 
 function updateContext(
-  contextStack: Array<{ key: string; isArray: boolean }>,
+  contextStack: Array<{ key: string; isArray: boolean; arrayIndex?: number }>,
   line: string,
   parsedJson: any,
+  arrayObjectCount: Record<number, number>,
 ): void {
-  // This is a simplified context tracking - in a full implementation,
-  // you'd want more sophisticated AST-based tracking
+  const trimmed = line.trim();
+
+  // Track opening of arrays
+  const arrayMatch = line.match(/^\s*["']?([^"':,\s]+)["']?\s*:\s*\[/);
+  if (arrayMatch) {
+    const depth = contextStack.length;
+    arrayObjectCount[depth] = 0; // Initialize counter for this array
+    contextStack.push({ key: arrayMatch[1], isArray: true });
+    return;
+  }
+
+  // Track opening of objects
   const openBraces = (line.match(/\{/g) || []).length;
   const closeBraces = (line.match(/\}/g) || []).length;
 
@@ -209,13 +254,37 @@ function updateContext(
     const keyMatch = line.match(/^\s*["']?([^"':,\s]+)["']?\s*:\s*\{/);
     if (keyMatch) {
       contextStack.push({ key: keyMatch[1], isArray: false });
+    } else if (trimmed === '{' && contextStack.length > 0) {
+      // This is an object within an array
+      const parent = contextStack[contextStack.length - 1];
+      if (parent.isArray) {
+        const depth = contextStack.length - 1;
+        const arrayIndex = arrayObjectCount[depth] || 0;
+        contextStack.push({ key: '', isArray: false, arrayIndex });
+        arrayObjectCount[depth]++;
+      }
     }
-  } else if (closeBraces > openBraces) {
-    // Pop context when closing braces
+  }
+
+  // Track closing of objects and arrays
+  const openBrackets = (line.match(/\[/g) || []).length;
+  const closeBrackets = (line.match(/\]/g) || []).length;
+
+  if (closeBraces > openBraces) {
     for (let i = 0; i < closeBraces - openBraces; i++) {
       contextStack.pop();
     }
   }
+
+  if (closeBrackets > openBrackets) {
+    for (let i = 0; i < closeBrackets - openBrackets; i++) {
+      const popped = contextStack.pop();
+      if (popped?.isArray) {
+        const depth = contextStack.length;
+        delete arrayObjectCount[depth]; // Clean up counter
+      }
+    }
+  }
 }
 
 function setCommentAtPath(