gtx-cli 1.2.28 → 1.2.30-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # gtx-cli
 
+## 1.2.29
+
+### Patch Changes
+
+- [#400](https://github.com/generaltranslation/gt/pull/400) [`cf9c724`](https://github.com/generaltranslation/gt/commit/cf9c72488f74db5ccd7c4dca2650d75e3484d1f2) Thanks [@brian-lou](https://github.com/brian-lou)! - Reorder linter detection preference
+
 ## 1.2.28
 
 ### Patch Changes

package/dist/cli/react.js

@@ -144,7 +144,7 @@ export class ReactCLI extends BaseCLI {
         }
         // User has to provide a dictionary file
         // will not read from settings.files.resolvedPaths.json
-        const { updates, errors } = await createUpdates(options, options.dictionary, this.library === 'gt-next' ? 'gt-next' : 'gt-react');
+        const { updates, errors } = await createUpdates(options, options.dictionary, this.library === 'gt-next' ? 'gt-next' : 'gt-react', false);
         if (errors.length > 0) {
             if (options.ignoreErrors) {
                 logWarning(chalk.yellow(`CLI tool encountered errors while scanning for translatable content. These components will not be translated.\n` +

package/dist/console/index.d.ts

@@ -1,9 +1,12 @@
 export declare const warnApiKeyInConfigSync: (optionsFilepath: string) => string;
 export declare const warnVariablePropSync: (file: string, attrName: string, value: string, location?: string) => string;
 export declare const warnHasUnwrappedExpressionSync: (file: string, unwrappedExpressions: string[], id?: string, location?: string) => string;
+export declare const warnNestedTComponent: (file: string, location?: string) => string;
 export declare const warnNonStaticExpressionSync: (file: string, attrName: string, value: string, location?: string) => string;
 export declare const warnTemplateLiteralSync: (file: string, value: string, location?: string) => string;
 export declare const warnNonStringSync: (file: string, value: string, location?: string) => string;
+export declare const warnAsyncUseGT: (file: string, location?: string) => string;
+export declare const warnSyncGetGT: (file: string, location?: string) => string;
 export declare const warnTernarySync: (file: string, location?: string) => string;
 export declare const withLocation: (file: string, message: string, location?: string) => string;
 export declare const noLocalesError = "No locales found! Please provide a list of locales to translate to, or specify them in your gt.config.json file.";

package/dist/console/index.js

@@ -3,9 +3,12 @@ import { colorizeFilepath, colorizeComponent, colorizeIdString, colorizeContent,
 export const warnApiKeyInConfigSync = (optionsFilepath) => `${colorizeFilepath(optionsFilepath)}: Your API key is exposed! Please remove it from the file and include it as an environment variable.`;
 export const warnVariablePropSync = (file, attrName, value, location) => withLocation(file, `${colorizeComponent('<T>')} component has dynamic attribute ${colorizeIdString(attrName)} with value: ${colorizeContent(value)}. Change ${colorizeIdString(attrName)} to ensure this content is translated.`, location);
 export const warnHasUnwrappedExpressionSync = (file, unwrappedExpressions, id, location) => withLocation(file, `${colorizeComponent('<T>')} component${id ? ` with id ${colorizeIdString(id)}` : ''} has children that could change at runtime. Use a variable component like ${colorizeComponent('<Var>')} to ensure this content is translated.\n${colorizeContent(unwrappedExpressions.join('\n'))}`, location);
+export const warnNestedTComponent = (file, location) => withLocation(file, `Found nested <T> component. <T> components cannot be directly nested.`, location);
 export const warnNonStaticExpressionSync = (file, attrName, value, location) => withLocation(file, `Found non-static expression for attribute ${colorizeIdString(attrName)}: ${colorizeContent(value)}. Change "${colorizeIdString(attrName)}" to ensure this content is translated.`, location);
 export const warnTemplateLiteralSync = (file, value, location) => withLocation(file, `Found template literal with quasis (${colorizeContent(value)}). Change the template literal to a string to ensure this content is translated.`, location);
 export const warnNonStringSync = (file, value, location) => withLocation(file, `Found non-string literal (${colorizeContent(value)}). Change the value to a string literal to ensure this content is translated.`, location);
+export const warnAsyncUseGT = (file, location) => withLocation(file, `Found useGT() in an async function. Use getGT() instead, or make the function synchronous.`, location);
+export const warnSyncGetGT = (file, location) => withLocation(file, `Found getGT() in a synchronous function. Use useGT() instead, or make the function async.`, location);
 export const warnTernarySync = (file, location) => withLocation(file, 'Found ternary expression. A Branch component may be more appropriate here.', location);
 export const withLocation = (file, message, location) => `${colorizeFilepath(file)}${location ? ` (${colorizeLine(location)})` : ''}: ${message}`;
 // Re-export error messages

package/dist/hooks/postProcess.js

@@ -9,6 +9,12 @@ export async function detectFormatter() {
         return 'prettier';
     }
     catch { }
+    // Try ESLint
+    try {
+        await import('eslint');
+        return 'eslint';
+    }
+    catch { }
     // Try Biome
     try {
         return await new Promise((resolve, reject) => {
@@ -29,12 +35,6 @@ export async function detectFormatter() {
         });
     }
     catch { }
-    // Try ESLint
-    try {
-        await import('eslint');
-        return 'eslint';
-    }
-    catch { }
     return null;
 }
 export async function formatFiles(filesUpdated, formatter) {

package/dist/react/jsx/utils/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const GT_TRANSLATION_FUNCS: string[];
+export declare const VARIABLE_COMPONENTS: string[];

package/dist/react/jsx/utils/constants.js

@@ -0,0 +1,14 @@
+// GT translation functions
+export const GT_TRANSLATION_FUNCS = [
+    'useGT',
+    'getGT',
+    'T',
+    'Var',
+    'DateTime',
+    'Currency',
+    'Num',
+    'Branch',
+    'Plural',
+];
+// Valid variable components
+export const VARIABLE_COMPONENTS = ['Var', 'DateTime', 'Currency', 'Num'];

package/dist/react/jsx/utils/parseJsx.d.ts

@@ -7,7 +7,8 @@ import * as t from '@babel/types';
  * @param updates - The updates array
  * @param errors - The errors array
  * @param file - The file name
+ * @param insideT - Whether the current node is inside a <T> component
  * @returns The built JSX tree
  */
-export declare function buildJSXTree(importAliases: Record<string, string>, node: any, unwrappedExpressions: string[], updates: Updates, errors: string[], file: string): any;
+export declare function buildJSXTree(importAliases: Record<string, string>, node: any, unwrappedExpressions: string[], updates: Updates, errors: string[], file: string, insideT: boolean): any;
 export declare function parseJSXElement(importAliases: Record<string, string>, node: t.JSXElement, updates: Updates, errors: string[], file: string): void;

package/dist/react/jsx/utils/parseJsx.js

@@ -3,12 +3,11 @@ import generateModule from '@babel/generator';
 const generate = generateModule.default || generateModule;
 import * as t from '@babel/types';
 import addGTIdentifierToSyntaxTree from '../../data-_gt/addGTIdentifierToSyntaxTree.js';
-import { warnHasUnwrappedExpressionSync, warnVariablePropSync, } from '../../../console/index.js';
+import { warnHasUnwrappedExpressionSync, warnVariablePropSync, warnNestedTComponent, } from '../../../console/index.js';
 import { isAcceptedPluralForm } from 'generaltranslation/internal';
 import { handleChildrenWhitespace } from '../trimJsxStringChildren.js';
 import { isStaticExpression } from '../evaluateJsx.js';
-// Valid variable components
-const VARIABLE_COMPONENTS = ['Var', 'DateTime', 'Currency', 'Num'];
+import { VARIABLE_COMPONENTS } from './constants.js';
 /**
  * Builds a JSX tree from a given node, recursively handling children.
  * @param node - The node to build the tree from
@@ -16,9 +15,10 @@ const VARIABLE_COMPONENTS = ['Var', 'DateTime', 'Currency', 'Num'];
  * @param updates - The updates array
  * @param errors - The errors array
  * @param file - The file name
+ * @param insideT - Whether the current node is inside a <T> component
  * @returns The built JSX tree
  */
-export function buildJSXTree(importAliases, node, unwrappedExpressions, updates, errors, file) {
+export function buildJSXTree(importAliases, node, unwrappedExpressions, updates, errors, file, insideT) {
     if (t.isJSXExpressionContainer(node)) {
         // Skip JSX comments
         if (t.isJSXEmptyExpression(node.expression)) {
@@ -59,6 +59,11 @@ export function buildJSXTree(importAliases, node, unwrappedExpressions, updates,
         }
         // Convert from alias to original name
         const componentType = importAliases[typeName ?? ''];
+        if (componentType === 'T' && insideT) {
+            // Add error: No nested <T> components are allowed
+            errors.push(warnNestedTComponent(file, `${element.loc?.start?.line}:${element.loc?.start?.column}`));
+            return null;
+        }
         // If this JSXElement is one of the recognized variable components,
         const elementIsVariable = VARIABLE_COMPONENTS.includes(componentType);
         const props = {};
@@ -81,7 +86,7 @@ export function buildJSXTree(importAliases, node, unwrappedExpressions, updates,
                                 unwrappedExpressions.push(generate(attr.value).code);
                             }
                         }
-                        attrValue = buildJSXTree(importAliases, attr.value.expression, unwrappedExpressions, updates, errors, file);
+                        attrValue = buildJSXTree(importAliases, attr.value.expression, unwrappedExpressions, updates, errors, file, true);
                     }
                 }
                 props[attrName] = attrValue;
@@ -97,7 +102,7 @@ export function buildJSXTree(importAliases, node, unwrappedExpressions, updates,
             };
         }
         const children = element.children
-            .map((child) => buildJSXTree(importAliases, child, unwrappedExpressions, updates, errors, file))
+            .map((child) => buildJSXTree(importAliases, child, unwrappedExpressions, updates, errors, file, true))
             .filter((child) => child !== null && child !== '');
         if (children.length === 1) {
             props.children = children[0];
@@ -115,7 +120,7 @@ export function buildJSXTree(importAliases, node, unwrappedExpressions, updates,
     // If it's a JSX fragment
     else if (t.isJSXFragment(node)) {
         const children = node.children
-            .map((child) => buildJSXTree(importAliases, child, unwrappedExpressions, updates, errors, file))
+            .map((child) => buildJSXTree(importAliases, child, unwrappedExpressions, updates, errors, file, true))
             .filter((child) => child !== null && child !== '');
         const props = {};
         if (children.length === 1) {
@@ -152,65 +157,70 @@ export function parseJSXElement(importAliases, node, updates, errors, file) {
     const openingElement = node.openingElement;
     const name = openingElement.name;
     // Only proceed if it's <T> ...
-    if (name.type === 'JSXIdentifier' && importAliases[name.name] === 'T') {
-        const componentObj = { props: {} };
-        // We'll track this flag to know if any unwrapped {variable} is found in children
-        const unwrappedExpressions = [];
-        // Gather <T>'s props
-        openingElement.attributes.forEach((attr) => {
-            if (!t.isJSXAttribute(attr))
-                return;
-            const attrName = attr.name.name;
-            if (typeof attrName !== 'string')
-                return;
-            if (attr.value) {
-                // If it's a plain string literal like id="hello"
-                if (t.isStringLiteral(attr.value)) {
-                    componentObj.props[attrName] = attr.value.value;
-                }
-                // If it's an expression container like id={"hello"}, id={someVar}, etc.
-                else if (t.isJSXExpressionContainer(attr.value)) {
-                    const expr = attr.value.expression;
-                    const code = generate(expr).code;
-                    // Only check for static expressions on id and context props
-                    if (attrName === 'id' || attrName === 'context') {
-                        const staticAnalysis = isStaticExpression(expr);
-                        if (!staticAnalysis.isStatic) {
-                            errors.push(warnVariablePropSync(file, attrName, code, `${expr.loc?.start?.line}:${expr.loc?.start?.column}`));
-                        }
-                        // Use the static value if available
-                        if (staticAnalysis.isStatic && staticAnalysis.value !== undefined) {
-                            componentObj.props[attrName] = staticAnalysis.value;
-                        }
-                        else {
-                            // Only store the code if we couldn't extract a static value
-                            componentObj.props[attrName] = code;
-                        }
+    if (!(name.type === 'JSXIdentifier' && importAliases[name.name] === 'T')) {
+        return;
+    }
+    const componentErrors = [];
+    const componentObj = { props: {} };
+    // We'll track this flag to know if any unwrapped {variable} is found in children
+    const unwrappedExpressions = [];
+    // Gather <T>'s props
+    openingElement.attributes.forEach((attr) => {
+        if (!t.isJSXAttribute(attr))
+            return;
+        const attrName = attr.name.name;
+        if (typeof attrName !== 'string')
+            return;
+        if (attr.value) {
+            // If it's a plain string literal like id="hello"
+            if (t.isStringLiteral(attr.value)) {
+                componentObj.props[attrName] = attr.value.value;
+            }
+            // If it's an expression container like id={"hello"}, id={someVar}, etc.
+            else if (t.isJSXExpressionContainer(attr.value)) {
+                const expr = attr.value.expression;
+                const code = generate(expr).code;
+                // Only check for static expressions on id and context props
+                if (attrName === 'id' || attrName === 'context') {
+                    const staticAnalysis = isStaticExpression(expr);
+                    if (!staticAnalysis.isStatic) {
+                        componentErrors.push(warnVariablePropSync(file, attrName, code, `${expr.loc?.start?.line}:${expr.loc?.start?.column}`));
+                    }
+                    // Use the static value if available
+                    if (staticAnalysis.isStatic && staticAnalysis.value !== undefined) {
+                        componentObj.props[attrName] = staticAnalysis.value;
                     }
                     else {
-                        // For other attributes that aren't id or context
+                        // Only store the code if we couldn't extract a static value
                         componentObj.props[attrName] = code;
                     }
                 }
+                else {
+                    // For other attributes that aren't id or context
+                    componentObj.props[attrName] = code;
+                }
             }
-        });
-        // Build the JSX tree for this component
-        const initialTree = buildJSXTree(importAliases, node, unwrappedExpressions, updates, errors, file).props.children;
-        const whitespaceHandledTree = handleChildrenWhitespace(initialTree);
-        const tree = addGTIdentifierToSyntaxTree(whitespaceHandledTree);
-        componentObj.tree = tree.length === 1 ? tree[0] : tree;
-        const id = componentObj.props.id;
-        // If we found an unwrapped expression, skip
-        if (unwrappedExpressions.length > 0) {
-            errors.push(warnHasUnwrappedExpressionSync(file, unwrappedExpressions, id, `${node.loc?.start?.line}:${node.loc?.start?.column}`));
         }
-        if (errors.length > 0)
-            return;
-        // <T> is valid here
-        updates.push({
-            dataFormat: 'JSX',
-            source: componentObj.tree,
-            metadata: componentObj.props,
-        });
+    });
+    // Build the JSX tree for this component
+    const initialTree = buildJSXTree(importAliases, node, unwrappedExpressions, updates, componentErrors, file, false)?.props?.children;
+    if (componentErrors.length > 0) {
+        errors.push(...componentErrors);
+        return;
+    }
+    const whitespaceHandledTree = handleChildrenWhitespace(initialTree);
+    const tree = addGTIdentifierToSyntaxTree(whitespaceHandledTree);
+    componentObj.tree = tree.length === 1 ? tree[0] : tree;
+    const id = componentObj.props.id;
+    // If we found an unwrapped expression, skip
+    if (unwrappedExpressions.length > 0) {
+        errors.push(warnHasUnwrappedExpressionSync(file, unwrappedExpressions, id, `${node.loc?.start?.line}:${node.loc?.start?.column}`));
+        return;
     }
+    // <T> is valid here
+    updates.push({
+        dataFormat: 'JSX',
+        source: componentObj.tree,
+        metadata: componentObj.props,
+    });
 }

package/dist/react/jsx/utils/validateStringFunction.d.ts

@@ -0,0 +1,7 @@
+import { NodePath } from '@babel/traverse';
+import { Updates } from '../../../types/index.js';
+/**
+ * Validate useGT() / await getGT() calls
+ * 1. Validates that the call does not violate the rules of React (no hooks in async functions)
+ */
+export declare function validateStringFunction(localImportName: string, path: NodePath, updates: Updates, errors: string[], file: string, originalImportName: string): void;

package/dist/react/jsx/utils/validateStringFunction.js

@@ -0,0 +1,30 @@
+import { warnAsyncUseGT, warnSyncGetGT } from '../../../console/index.js';
+/**
+ * Validate useGT() / await getGT() calls
+ * 1. Validates that the call does not violate the rules of React (no hooks in async functions)
+ */
+export function validateStringFunction(localImportName, path, updates, errors, file, originalImportName) {
+    // Get the root program node to traverse the entire file
+    const program = path.scope.getProgramParent().path;
+    program.traverse({
+        CallExpression(callPath) {
+            if (callPath.node.callee.type === 'Identifier' &&
+                callPath.node.callee.name === localImportName) {
+                // Check the function scope
+                const functionScope = callPath.getFunctionParent();
+                if (originalImportName === 'useGT') {
+                    // useGT should NOT be in an async function
+                    if (functionScope && functionScope.node.async) {
+                        errors.push(warnAsyncUseGT(file, `${callPath.node.loc?.start?.line}:${callPath.node.loc?.start?.column}`));
+                    }
+                }
+                else if (originalImportName === 'getGT') {
+                    // getGT should be in an async function
+                    if (!functionScope || !functionScope.node.async) {
+                        errors.push(warnSyncGetGT(file, `${callPath.node.loc?.start?.line}:${callPath.node.loc?.start?.column}`));
+                    }
+                }
+            }
+        },
+    });
+}

package/dist/react/parse/createInlineUpdates.d.ts

@@ -1,5 +1,5 @@
 import { Options, Updates } from '../../types/index.js';
-export default function createInlineUpdates(options: Options, pkg: 'gt-react' | 'gt-next'): Promise<{
+export default function createInlineUpdates(options: Options, pkg: 'gt-react' | 'gt-next', validate: boolean): Promise<{
     updates: Updates;
     errors: string[];
 }>;

package/dist/react/parse/createInlineUpdates.js

@@ -9,7 +9,9 @@ import { parseJSXElement } from '../jsx/utils/parseJsx.js';
 import { parseStrings } from '../jsx/utils/parseStringFunction.js';
 import { extractImportName } from '../jsx/utils/parseAst.js';
 import { logError } from '../../console/logging.js';
-export default async function createInlineUpdates(options, pkg) {
+import { validateStringFunction } from '../jsx/utils/validateStringFunction.js';
+import { GT_TRANSLATION_FUNCS } from '../jsx/utils/constants.js';
+export default async function createInlineUpdates(options, pkg, validate) {
     const updates = [];
     const errors = [];
     // Use the provided app directory or default to the current directory
@@ -56,27 +58,20 @@ export default async function createInlineUpdates(options, pkg) {
             logError(`Error parsing file ${file}: ${error}`);
             continue;
         }
-        const translationFuncs = [
-            'useGT',
-            'getGT',
-            'T',
-            'Var',
-            'DateTime',
-            'Currency',
-            'Num',
-            'Branch',
-            'Plural',
-        ];
         const importAliases = {};
         // First pass: collect imports and process translation functions
         const translationPaths = [];
         traverse(ast, {
             ImportDeclaration(path) {
                 if (path.node.source.value.startsWith(pkg)) {
-                    const importName = extractImportName(path.node, pkg, translationFuncs);
+                    const importName = extractImportName(path.node, pkg, GT_TRANSLATION_FUNCS);
                     for (const name of importName) {
                         if (name.original === 'useGT' || name.original === 'getGT') {
-                            translationPaths.push({ name: name.local, path });
+                            translationPaths.push({
+                                localName: name.local,
+                                path,
+                                originalName: name.original,
+                            });
                         }
                         else {
                             importAliases[name.local] = name.original;
@@ -96,10 +91,14 @@ export default async function createInlineUpdates(options, pkg) {
                         args[0].value.startsWith(pkg)) {
                         const parentPath = path.parentPath;
                         if (parentPath.isVariableDeclaration()) {
-                            const importName = extractImportName(parentPath.node, pkg, translationFuncs);
+                            const importName = extractImportName(parentPath.node, pkg, GT_TRANSLATION_FUNCS);
                             for (const name of importName) {
                                 if (name.original === 'useGT' || name.original === 'getGT') {
-                                    translationPaths.push({ name: name.local, path: parentPath });
+                                    translationPaths.push({
+                                        localName: name.local,
+                                        path: parentPath,
+                                        originalName: name.original,
+                                    });
                                 }
                                 else {
                                     importAliases[name.local] = name.original;
@@ -111,7 +110,7 @@ export default async function createInlineUpdates(options, pkg) {
             },
         });
         // Process translation functions asynchronously
-        for (const { name, path } of translationPaths) {
+        for (const { localName: name, path } of translationPaths) {
             parseStrings(name, path, updates, errors, file);
         }
         // Parse <T> components
@@ -120,6 +119,12 @@ export default async function createInlineUpdates(options, pkg) {
                 parseJSXElement(importAliases, path.node, updates, errors, file);
             },
         });
+        // Extra validation (for Locadex)
+        if (validate) {
+            for (const { localName: name, path, originalName } of translationPaths) {
+                validateStringFunction(name, path, updates, errors, file, originalName);
+            }
+        }
     }
     // Post-process to add a hash to each update
     await Promise.all(updates.map(async (update) => {

package/dist/translation/parse.d.ts

@@ -8,7 +8,7 @@ import { Options, GenerateSourceOptions, Updates } from '../types/index.js';
  * @param pkg - The package name
  * @returns An object containing the updates and errors
  */
-export declare function createUpdates(options: Options | GenerateSourceOptions, sourceDictionary: string | undefined, pkg: 'gt-react' | 'gt-next'): Promise<{
+export declare function createUpdates(options: Options | GenerateSourceOptions, sourceDictionary: string | undefined, pkg: 'gt-react' | 'gt-next', validate: boolean): Promise<{
     updates: Updates;
     errors: string[];
 }>;

package/dist/translation/parse.js

@@ -14,7 +14,7 @@ import chalk from 'chalk';
  * @param pkg - The package name
  * @returns An object containing the updates and errors
  */
-export async function createUpdates(options, sourceDictionary, pkg) {
+export async function createUpdates(options, sourceDictionary, pkg, validate) {
     let updates = [];
     let errors = [];
     // Parse dictionary with esbuildConfig
@@ -48,7 +48,7 @@ export async function createUpdates(options, sourceDictionary, pkg) {
     }
     // Scan through project for <T> tags
     if (options.inline) {
-        const { updates: newUpdates, errors: newErrors } = await createInlineUpdates(options, pkg);
+        const { updates: newUpdates, errors: newErrors } = await createInlineUpdates(options, pkg, validate);
         errors = [...errors, ...newErrors];
         updates = [...updates, ...newUpdates];
     }

package/dist/translation/stage.js

@@ -26,7 +26,7 @@ export async function stageProject(settings, pkg) {
     }
     settings.timeout = timeout.toString();
     // ---- CREATING UPDATES ---- //
-    const { updates, errors } = await createUpdates(settings, settings.dictionary, pkg);
+    const { updates, errors } = await createUpdates(settings, settings.dictionary, pkg, false);
     if (errors.length > 0) {
         if (settings.ignoreErrors) {
             logWarning(chalk.yellow(`Warning: CLI tool encountered ${errors.length} syntax errors while scanning for translatable content. These components will not be translated.\n` +

package/dist/translation/validate.js

@@ -14,7 +14,7 @@ export async function validateProject(settings, pkg) {
             './src/dictionary.ts',
         ]);
     }
-    const { updates, errors } = await createUpdates(settings, settings.dictionary, pkg);
+    const { updates, errors } = await createUpdates(settings, settings.dictionary, pkg, true);
     if (errors.length > 0) {
         logErrorAndExit(chalk.red(`Error: CLI tool encountered ${errors.length} syntax errors while scanning for translatable content.\n` +
             errors

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gtx-cli",
-  "version": "1.2.28",
+  "version": "1.2.30-alpha.1",
   "main": "dist/index.js",
   "bin": "dist/main.js",
   "files": [
@@ -93,7 +93,7 @@
     "tsconfig-paths": "^4.2.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "^1.9.4",
     "@types/babel__generator": "^7.27.0",
     "@types/babel__traverse": "^7.20.6",
     "@types/figlet": "^1.7.0",