gtx-cli 2.5.0-alpha.0 → 2.5.0-alpha.2

package/dist/react/jsx/evaluateJsx.js

@@ -33,10 +33,9 @@ export function isMeaningful(node) {
 /**
  * Checks if an expression is static (does not contain any variables which could change at runtime).
  * @param expr - The expression to check
- * @param ignoreStaticFunction - Whether to ignore static functions
  * @returns An object containing the result of the static check
  */
-export function isStaticExpression(expr, jsxStatic = false) {
+export function isStaticExpression(expr) {
     // Handle empty expressions
     if (t.isJSXEmptyExpression(expr)) {
         return { isStatic: true, value: '' };
@@ -47,10 +46,7 @@ export function isStaticExpression(expr, jsxStatic = false) {
     }
     // Handle template literals without expressions
     if (t.isTemplateLiteral(expr) && expr.expressions.length === 0) {
-        return {
-            isStatic: true,
-            value: jsxStatic ? expr.quasis[0].value.cooked : expr.quasis[0].value.raw,
-        };
+        return { isStatic: true, value: expr.quasis[0].value.raw };
     }
     // Binary expressions are not static
     if (t.isBinaryExpression(expr)) {
@@ -65,37 +61,13 @@ export function isStaticExpression(expr, jsxStatic = false) {
     if (t.isNumericLiteral(expr)) {
         return { isStatic: true, value: String(expr.value) };
     }
-    // Handle unary expressions by converting them to strings
-    if (t.isUnaryExpression(expr)) {
-        let value;
-        let operator = '';
-        if (expr.operator === '-') {
-            operator = expr.operator;
-        }
-        if (t.isNumericLiteral(expr.argument)) {
-            if (expr.argument.value === 0) {
-                value = '0';
-            }
-            else {
-                value = operator + expr.argument.value.toString();
-            }
-        }
-        else {
-            // invalid
-            return { isStatic: false };
-        }
-        return { isStatic: true, value };
-    }
     // Handle boolean literals by converting them to strings
     if (t.isBooleanLiteral(expr)) {
-        return {
-            isStatic: true,
-            value: jsxStatic ? expr.value : String(expr.value),
-        };
+        return { isStatic: true, value: String(expr.value) };
     }
     // Handle null literal
     if (t.isNullLiteral(expr)) {
-        return { isStatic: true, value: jsxStatic ? null : 'null' };
+        return { isStatic: true, value: 'null' };
     }
     // Not a static expression
     return { isStatic: false };

package/dist/react/jsx/trimJsxStringChildren.d.ts

@@ -0,0 +1,7 @@
+export declare function trimJsxStringChild(child: string, index: number, childrenTypes: ('expression' | 'text' | 'element')[]): string;
+/**
+ * Handles whitespace in children of a JSX element.
+ * @param currentTree - The current tree to handle
+ * @returns The processed tree with whitespace handled
+ */
+export declare const handleChildrenWhitespace: (currentTree: any) => any;

package/dist/react/jsx/trimJsxStringChildren.js

@@ -0,0 +1,122 @@
+import { isAcceptedPluralForm } from 'generaltranslation/internal';
+// JSX whitespace characters (space, tab, newline, carriage return)
+// Does NOT include non-breaking space (U+00A0) which should be preserved
+const isJsxWhitespace = (char) => {
+    return char === ' ' || char === '\t' || char === '\n' || char === '\r';
+};
+const trimJsxWhitespace = (str, side = 'both') => {
+    let start = 0;
+    let end = str.length;
+    if (side === 'start' || side === 'both') {
+        while (start < end && isJsxWhitespace(str[start])) {
+            start++;
+        }
+    }
+    if (side === 'end' || side === 'both') {
+        while (end > start && isJsxWhitespace(str[end - 1])) {
+            end--;
+        }
+    }
+    return str.slice(start, end);
+};
+const hasNonJsxWhitespace = (str) => {
+    for (const char of str) {
+        if (!isJsxWhitespace(char))
+            return true;
+    }
+    return false;
+};
+export function trimJsxStringChild(child, index, childrenTypes) {
+    // Normalize line endings to \n for consistency across platforms
+    let result = child.replace(/\r\n|\r/g, '\n');
+    // Collapse multiple spaces/tabs into a single space (but not nbsp)
+    result = result.replace(/[\t ]+/g, ' ');
+    let newResult = '';
+    let newline = false;
+    for (const char of result) {
+        if (char === '\n') {
+            if (hasNonJsxWhitespace(newResult))
+                newResult += ' ';
+            else
+                newResult = '';
+            newline = true;
+            continue;
+        }
+        if (!newline) {
+            newResult += char;
+            continue;
+        }
+        if (isJsxWhitespace(char))
+            continue;
+        newResult += char;
+        newline = false;
+    }
+    if (newline)
+        newResult = trimJsxWhitespace(newResult, 'end');
+    result = newResult;
+    // Collapse multiple spaces/tabs into a single space (but not nbsp)
+    result = result.replace(/[\t ]+/g, ' ');
+    return result;
+}
+/**
+ * Handles whitespace in children of a JSX element.
+ * @param currentTree - The current tree to handle
+ * @returns The processed tree with whitespace handled
+ */
+export const handleChildrenWhitespace = (currentTree) => {
+    if (Array.isArray(currentTree)) {
+        const childrenTypes = currentTree.map((child) => {
+            if (typeof child === 'string')
+                return 'text';
+            if (typeof child === 'object' && 'expression' in child)
+                return 'expression';
+            return 'element';
+        });
+        const newChildren = [];
+        currentTree.forEach((child, index) => {
+            if (childrenTypes[index] === 'text') {
+                const string = trimJsxStringChild(child, index, childrenTypes);
+                if (string)
+                    newChildren.push(string);
+            }
+            else if (childrenTypes[index] === 'expression') {
+                newChildren.push(child.result);
+            }
+            else {
+                newChildren.push(handleChildrenWhitespace(child));
+            }
+        });
+        return newChildren.length === 1 ? newChildren[0] : newChildren;
+    }
+    else if (currentTree?.props) {
+        // Process all props recursively
+        const elementIsPlural = currentTree.type === 'Plural';
+        const elementIsBranch = currentTree.type === 'Branch';
+        const processedProps = Object.fromEntries(Object.entries(currentTree.props).map(([key, value]) => {
+            let shouldProcess = false;
+            if (key === 'children')
+                shouldProcess = true;
+            if (elementIsPlural && isAcceptedPluralForm(key))
+                shouldProcess = true;
+            if (elementIsBranch && key !== 'branch')
+                shouldProcess = true;
+            // Add your validation logic here
+            if (shouldProcess) {
+                return [key, handleChildrenWhitespace(value)];
+            }
+            return [key, value];
+        }));
+        return {
+            ...currentTree,
+            props: processedProps,
+        };
+    }
+    else if (typeof currentTree === 'object' &&
+        'expression' in currentTree === true) {
+        return currentTree.result;
+    }
+    else if (typeof currentTree === 'string') {
+        return trimJsxStringChild(currentTree, 0, ['text']);
+    }
+    return currentTree;
+};

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

@@ -3,8 +3,6 @@ export declare const INLINE_TRANSLATION_HOOK = "useGT";
 export declare const INLINE_TRANSLATION_HOOK_ASYNC = "getGT";
 export declare const INLINE_MESSAGE_HOOK = "useMessages";
 export declare const INLINE_MESSAGE_HOOK_ASYNC = "getMessages";
-export declare const TRANSLATION_COMPONENT = "T";
-export declare const STATIC_COMPONENT = "Static";
 export declare const GT_TRANSLATION_FUNCS: string[];
 export declare const VARIABLE_COMPONENTS: string[];
 export declare const GT_ATTRIBUTES_WITH_SUGAR: string[];

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

@@ -3,8 +3,6 @@ export const INLINE_TRANSLATION_HOOK = 'useGT';
 export const INLINE_TRANSLATION_HOOK_ASYNC = 'getGT';
 export const INLINE_MESSAGE_HOOK = 'useMessages';
 export const INLINE_MESSAGE_HOOK_ASYNC = 'getMessages';
-export const TRANSLATION_COMPONENT = 'T';
-export const STATIC_COMPONENT = 'Static';
 // GT translation functions
 export const GT_TRANSLATION_FUNCS = [
     INLINE_TRANSLATION_HOOK,
@@ -12,8 +10,7 @@ export const GT_TRANSLATION_FUNCS = [
     INLINE_MESSAGE_HOOK,
     INLINE_MESSAGE_HOOK_ASYNC,
     MSG_TRANSLATION_HOOK,
-    TRANSLATION_COMPONENT,
-    STATIC_COMPONENT,
+    'T',
     'Var',
     'DateTime',
     'Currency',
@@ -22,13 +19,7 @@ export const GT_TRANSLATION_FUNCS = [
     'Plural',
 ];
 // Valid variable components
-export const VARIABLE_COMPONENTS = [
-    'Var',
-    'DateTime',
-    'Currency',
-    'Num',
-    STATIC_COMPONENT,
-];
+export const VARIABLE_COMPONENTS = ['Var', 'DateTime', 'Currency', 'Num'];
 export const GT_ATTRIBUTES_WITH_SUGAR = ['$id', '$context'];
 export const GT_ATTRIBUTES = ['id', 'context', ...GT_ATTRIBUTES_WITH_SUGAR];
 export function mapAttributeName(attrName) {

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

@@ -0,0 +1,21 @@
+import { Updates } from '../../../types/index.js';
+import * as t from '@babel/types';
+/**
+ * Builds a JSX tree from a given node, recursively handling children.
+ * @param node - The node to build the tree from
+ * @param unwrappedExpressions - An array to store unwrapped expressions
+ * @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[], warnings: Set<string>, file: string, insideT: boolean): {
+    expression?: boolean;
+    result?: string;
+    type?: string;
+    props?: {
+        children?: any;
+    };
+} | string | null;
+export declare function parseJSXElement(importAliases: Record<string, string>, node: t.JSXElement, updates: Updates, errors: string[], warnings: Set<string>, file: string): void;

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

@@ -0,0 +1,259 @@
+import generateModule from '@babel/generator';
+// Handle CommonJS/ESM interop
+const generate = generateModule.default || generateModule;
+import * as t from '@babel/types';
+import addGTIdentifierToSyntaxTree from '../../data-_gt/addGTIdentifierToSyntaxTree.js';
+import { warnHasUnwrappedExpressionSync, warnVariablePropSync, warnNestedTComponent, } from '../../../console/index.js';
+import { isAcceptedPluralForm } from 'generaltranslation/internal';
+import { handleChildrenWhitespace } from '../trimJsxStringChildren.js';
+import { isStaticExpression } from '../evaluateJsx.js';
+import { GT_ATTRIBUTES, mapAttributeName, VARIABLE_COMPONENTS, } from './constants.js';
+import { HTML_CONTENT_PROPS } from 'generaltranslation/types';
+/**
+ * Builds a JSX tree from a given node, recursively handling children.
+ * @param node - The node to build the tree from
+ * @param unwrappedExpressions - An array to store unwrapped expressions
+ * @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, warnings, file, insideT) {
+    if (t.isJSXExpressionContainer(node)) {
+        // Skip JSX comments
+        if (t.isJSXEmptyExpression(node.expression)) {
+            return null;
+        }
+        const expr = node.expression;
+        if (t.isJSXElement(expr)) {
+            return buildJSXTree(importAliases, expr, unwrappedExpressions, updates, errors, warnings, file, insideT);
+        }
+        const staticAnalysis = isStaticExpression(expr);
+        if (staticAnalysis.isStatic && staticAnalysis.value !== undefined) {
+            // Preserve the exact whitespace for static string expressions
+            return {
+                expression: true,
+                result: staticAnalysis.value,
+            };
+        }
+        // Keep existing behavior for non-static expressions
+        const code = generate(node).code;
+        unwrappedExpressions.push(code); // Keep track of unwrapped expressions for error reporting
+        return code;
+    }
+    else if (t.isJSXText(node)) {
+        // Updated JSX Text handling
+        // JSX Text handling following React's rules
+        const text = node.value;
+        return text;
+    }
+    else if (t.isJSXElement(node)) {
+        const element = node;
+        const elementName = element.openingElement.name;
+        let typeName;
+        if (t.isJSXIdentifier(elementName)) {
+            typeName = elementName.name;
+        }
+        else if (t.isJSXMemberExpression(elementName)) {
+            typeName = generate(elementName).code;
+        }
+        else {
+            typeName = null;
+        }
+        // Convert from alias to original name
+        const componentType = importAliases[typeName ?? ''];
+        if (componentType === 'T' && insideT) {
+            // Add warning: Nested <T> components are allowed, but they are advised against
+            warnings.add(warnNestedTComponent(file, `${element.loc?.start?.line}:${element.loc?.start?.column}`));
+        }
+        // If this JSXElement is one of the recognized variable components,
+        const elementIsVariable = VARIABLE_COMPONENTS.includes(componentType);
+        const props = {};
+        const elementIsPlural = componentType === 'Plural';
+        const elementIsBranch = componentType === 'Branch';
+        element.openingElement.attributes.forEach((attr) => {
+            if (t.isJSXAttribute(attr)) {
+                const attrName = attr.name.name;
+                let attrValue = null;
+                if (attr.value) {
+                    if (t.isStringLiteral(attr.value)) {
+                        attrValue = attr.value.value;
+                    }
+                    else if (t.isJSXExpressionContainer(attr.value)) {
+                        // Check if this is an HTML content prop (title, placeholder, alt, etc.)
+                        const isHtmlContentProp = Object.values(HTML_CONTENT_PROPS).includes(attrName);
+                        if (isHtmlContentProp) {
+                            // For HTML content props, only accept static string expressions
+                            const staticAnalysis = isStaticExpression(attr.value.expression);
+                            if (staticAnalysis.isStatic &&
+                                staticAnalysis.value !== undefined) {
+                                attrValue = staticAnalysis.value;
+                            }
+                            // Otherwise attrValue stays null and won't be included
+                        }
+                        else {
+                            // For non-HTML-content props, validate plural/branch then build tree
+                            if ((elementIsPlural && isAcceptedPluralForm(attrName)) ||
+                                (elementIsBranch && attrName !== 'branch')) {
+                                // Make sure that variable strings like {`I have ${count} book`} are invalid!
+                                if (t.isTemplateLiteral(attr.value.expression) &&
+                                    !isStaticExpression(attr.value.expression).isStatic) {
+                                    unwrappedExpressions.push(generate(attr.value).code);
+                                }
+                            }
+                            attrValue = buildJSXTree(importAliases, attr.value.expression, unwrappedExpressions, updates, errors, warnings, file, true);
+                        }
+                    }
+                }
+                props[attrName] = attrValue;
+            }
+        });
+        if (elementIsVariable) {
+            parseJSXElement(importAliases, element, updates, errors, warnings, file);
+            return {
+                // if componentType is undefined, use typeName
+                // Basically, if componentType is not a GT component, use typeName such as <div>
+                type: componentType ?? typeName,
+                props,
+            };
+        }
+        const children = element.children
+            .map((child) => buildJSXTree(importAliases, child, unwrappedExpressions, updates, errors, warnings, file, true))
+            .filter((child) => child !== null && child !== '');
+        if (children.length === 1) {
+            props.children = children[0];
+        }
+        else if (children.length > 1) {
+            props.children = children;
+        }
+        return {
+            // if componentType is undefined, use typeName
+            // Basically, if componentType is not a GT component, use typeName such as <div>
+            type: componentType ?? typeName,
+            props,
+        };
+    }
+    // If it's a JSX fragment
+    else if (t.isJSXFragment(node)) {
+        const children = node.children
+            .map((child) => buildJSXTree(importAliases, child, unwrappedExpressions, updates, errors, warnings, file, true))
+            .filter((child) => child !== null && child !== '');
+        const props = {};
+        if (children.length === 1) {
+            props.children = children[0];
+        }
+        else if (children.length > 1) {
+            props.children = children;
+        }
+        return {
+            type: '',
+            props,
+        };
+    }
+    // If it's a string literal (standalone)
+    else if (t.isStringLiteral(node)) {
+        return node.value;
+    }
+    // If it's some other JS expression
+    else if (t.isIdentifier(node) ||
+        t.isMemberExpression(node) ||
+        t.isCallExpression(node) ||
+        t.isBinaryExpression(node) ||
+        t.isLogicalExpression(node) ||
+        t.isConditionalExpression(node)) {
+        return generate(node).code;
+    }
+    else {
+        return generate(node).code;
+    }
+}
+// end buildJSXTree
+// Parses a JSX element and adds it to the updates array
+export function parseJSXElement(importAliases, node, updates, errors, warnings, file) {
+    const openingElement = node.openingElement;
+    const name = openingElement.name;
+    // Only proceed if it's <T> ...
+    if (!(name.type === 'JSXIdentifier' && importAliases[name.name] === 'T')) {
+        return;
+    }
+    const componentErrors = [];
+    const componentWarnings = new Set();
+    const metadata = {};
+    // 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)) {
+                metadata[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 (GT_ATTRIBUTES.includes(attrName)) {
+                    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) {
+                        metadata[mapAttributeName(attrName)] = staticAnalysis.value;
+                    }
+                    else {
+                        // Only store the code if we couldn't extract a static value
+                        metadata[attrName] = code;
+                    }
+                }
+                else {
+                    // For other attributes that aren't id or context
+                    metadata[attrName] = code;
+                }
+            }
+        }
+    });
+    // Build the JSX tree for this component
+    const treeResult = buildJSXTree(importAliases, node, unwrappedExpressions, updates, componentErrors, componentWarnings, file, false);
+    let jsxTree = undefined;
+    if (treeResult && typeof treeResult === 'object') {
+        jsxTree = treeResult.props?.children;
+    }
+    else {
+        jsxTree = treeResult;
+    }
+    if (componentWarnings.size > 0) {
+        componentWarnings.forEach((warning) => warnings.add(warning));
+    }
+    if (componentErrors.length > 0) {
+        errors.push(...componentErrors);
+        return;
+    }
+    // Handle whitespace in children
+    const whitespaceHandledTree = handleChildrenWhitespace(jsxTree);
+    // Add GT identifiers to the tree
+    let minifiedTree = addGTIdentifierToSyntaxTree(whitespaceHandledTree);
+    minifiedTree =
+        Array.isArray(minifiedTree) && minifiedTree.length === 1
+            ? minifiedTree[0]
+            : minifiedTree;
+    const id = metadata.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: minifiedTree,
+        metadata,
+    });
+}