gtx-cli 1.2.30-alpha.22 → 1.2.30-alpha.24

package/dist/react/data-_gt/addGTIdentifierToSyntaxTree.d.ts

@@ -1 +1,8 @@
-export default function addGTIdentifierToSyntaxTree(tree: any, startingIndex?: number): any;
+import { JsxChildren } from 'generaltranslation/types';
+/**
+ * Add GT Identifier and minify the tree (recreates addGTIdentifier and writeChildrenAsObjects)
+ * @param tree - The tree to add GT identifiers to
+ * @param startingIndex - The starting index for GT IDs
+ * @returns The tree with GT identifiers added
+ */
+export default function addGTIdentifierToSyntaxTree(tree: any, startingIndex?: number): JsxChildren;

package/dist/react/data-_gt/addGTIdentifierToSyntaxTree.js

@@ -1,80 +1,107 @@
-import { getVariableName } from '../utils/getVariableName.js';
+import { HTML_CONTENT_PROPS, } from 'generaltranslation/types';
+import { defaultVariableNames, getVariableName, minifyVariableType, } from '../utils/getVariableName.js';
 import { isAcceptedPluralForm } from 'generaltranslation/internal';
-// recreates addGTIdentifier and writeChildrenAsObjects
+/**
+ * Construct the data-_gt prop
+ * @param type - The type of the element
+ * @param props - The props of the element
+ * @param id - The id of the element
+ * @returns The data-_gt prop
+ */
+function constructGTProp(type, props, id) {
+    // Add translatable HTML content props
+    const generaltranslation = Object.entries(HTML_CONTENT_PROPS).reduce((acc, [minifiedName, fullName]) => {
+        if (props[fullName]) {
+            acc[minifiedName] = props[fullName];
+        }
+        return acc;
+    }, {});
+    // Plural
+    if (type === 'Plural') {
+        const pluralBranches = Object.entries(props).reduce((acc, [branchName, branch]) => {
+            if (isAcceptedPluralForm(branchName)) {
+                acc[branchName] = addGTIdentifierToSyntaxTree(branch, id);
+            }
+            return acc;
+        }, {});
+        // Add plural branches to the generaltranslation
+        if (Object.keys(pluralBranches).length) {
+            generaltranslation.t = 'p';
+            generaltranslation.b = pluralBranches;
+        }
+        // Branch
+    }
+    else if (type === 'Branch') {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+        const { children, branch, ...branches } = props;
+        const resultBranches = Object.entries(branches).reduce((acc, [branchName, branch]) => {
+            acc[branchName] = addGTIdentifierToSyntaxTree(branch, id);
+            return acc;
+        }, {});
+        // Add branches to the generaltranslation
+        if (Object.keys(resultBranches).length) {
+            generaltranslation.t = 'b';
+            generaltranslation.b = resultBranches;
+        }
+    }
+    return Object.keys(generaltranslation).length
+        ? generaltranslation
+        : undefined;
+}
+/**
+ * Add GT Identifier and minify the tree (recreates addGTIdentifier and writeChildrenAsObjects)
+ * @param tree - The tree to add GT identifiers to
+ * @param startingIndex - The starting index for GT IDs
+ * @returns The tree with GT identifiers added
+ */
 export default function addGTIdentifierToSyntaxTree(tree, startingIndex = 0) {
     // Object to keep track of the current index for GT IDs
-    let indexObject = { index: startingIndex };
+    const indexObject = { index: startingIndex };
+    /**
+     * Handle a single child
+     * @param child - The child to handle
+     * @returns The handled child
+     */
     const handleSingleChild = (child) => {
+        // Handle JSX elements
         if (child && typeof child === 'object') {
-            const { type, props } = child;
+            let { type } = child;
+            const { props } = child;
             indexObject.index += 1;
-            let generaltranslation = { id: indexObject.index };
-            if (type === 'Var') {
-                return {
-                    variable: 'variable',
-                    id: indexObject.index,
-                    key: getVariableName(props, 'variable', indexObject.index),
-                };
+            // Handle fragments
+            if (type === 'React.Fragment') {
+                type = '';
             }
-            else if (type === 'Num') {
+            // Variables
+            if (Object.keys(defaultVariableNames).includes(type)) {
+                const variableType = minifyVariableType(type);
+                const variableName = getVariableName(props, type, indexObject.index);
                 return {
-                    variable: 'number',
-                    id: indexObject.index,
-                    key: getVariableName(props, 'number', indexObject.index),
+                    i: indexObject.index,
+                    k: variableName,
+                    v: variableType,
                 };
             }
-            else if (type === 'Currency') {
-                return {
-                    variable: 'currency',
-                    id: indexObject.index,
-                    key: getVariableName(props, 'currency', indexObject.index),
-                };
-            }
-            else if (type === 'DateTime') {
-                return {
-                    variable: 'datetime',
-                    id: indexObject.index,
-                    key: getVariableName(props, 'datetime', indexObject.index),
-                };
-            }
-            else if (type === '' || type === 'React.Fragment') {
-                generaltranslation.transformation = 'fragment';
-            }
-            if (type === 'Plural') {
-                generaltranslation.transformation = 'plural';
-                const pluralBranches = Object.entries(props).reduce((acc, [branchName, branch]) => {
-                    if (isAcceptedPluralForm(branchName)) {
-                        acc[branchName] =
-                            addGTIdentifierToSyntaxTree(branch, indexObject.index);
-                    }
-                    return acc;
-                }, {});
-                if (Object.keys(pluralBranches).length)
-                    generaltranslation.branches = pluralBranches;
-            }
-            else if (type === 'Branch') {
-                generaltranslation.transformation = 'branch';
-                const { children, branch, ...branches } = props;
-                const resultBranches = Object.entries(branches).reduce((acc, [branchName, branch]) => {
-                    acc[branchName] =
-                        addGTIdentifierToSyntaxTree(branch, indexObject.index);
-                    return acc;
-                }, {});
-                if (Object.keys(resultBranches).length)
-                    generaltranslation.branches = resultBranches;
-            }
+            // Construct the data-_gt prop
+            const generaltranslation = constructGTProp(type, props, indexObject.index);
+            // Return the result
             return {
-                type: type || `C${generaltranslation.id}`,
-                props: {
-                    'data-_gt': generaltranslation,
-                    ...(typeof props.children !== 'undefined' && {
-                        children: handleChildren(props.children),
-                    }),
-                },
+                t: type || `C${indexObject.index}`,
+                i: indexObject.index,
+                c: handleChildren(props.children),
+                ...(generaltranslation && { d: generaltranslation }),
             };
         }
-        return child.toString();
+        if (typeof child === 'number') {
+            return child.toString();
+        }
+        return child;
     };
+    /**
+     * Handle children
+     * @param children - The children to handle
+     * @returns The handled children
+     */
     const handleChildren = (children) => {
         return Array.isArray(children)
             ? children.map(handleSingleChild)

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

@@ -10,5 +10,12 @@ import * as t from '@babel/types';
  * @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, insideT: boolean): any;
+export declare function buildJSXTree(importAliases: Record<string, string>, node: any, unwrappedExpressions: string[], updates: Updates, errors: 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[], file: string): void;

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

@@ -161,7 +161,7 @@ export function parseJSXElement(importAliases, node, updates, errors, file) {
         return;
     }
     const componentErrors = [];
-    const componentObj = { props: {} };
+    const metadata = {};
     // We'll track this flag to know if any unwrapped {variable} is found in children
     const unwrappedExpressions = [];
     // Gather <T>'s props
@@ -174,7 +174,7 @@ export function parseJSXElement(importAliases, node, updates, errors, file) {
         if (attr.value) {
             // If it's a plain string literal like id="hello"
             if (t.isStringLiteral(attr.value)) {
-                componentObj.props[attrName] = attr.value.value;
+                metadata[attrName] = attr.value.value;
             }
             // If it's an expression container like id={"hello"}, id={someVar}, etc.
             else if (t.isJSXExpressionContainer(attr.value)) {
@@ -188,30 +188,43 @@ export function parseJSXElement(importAliases, node, updates, errors, file) {
                     }
                     // Use the static value if available
                     if (staticAnalysis.isStatic && staticAnalysis.value !== undefined) {
-                        componentObj.props[attrName] = staticAnalysis.value;
+                        metadata[attrName] = staticAnalysis.value;
                     }
                     else {
                         // Only store the code if we couldn't extract a static value
-                        componentObj.props[attrName] = code;
+                        metadata[attrName] = code;
                     }
                 }
                 else {
                     // For other attributes that aren't id or context
-                    componentObj.props[attrName] = code;
+                    metadata[attrName] = code;
                 }
             }
         }
     });
     // Build the JSX tree for this component
-    const initialTree = buildJSXTree(importAliases, node, unwrappedExpressions, updates, componentErrors, file, false)?.props?.children;
+    const treeResult = buildJSXTree(importAliases, node, unwrappedExpressions, updates, componentErrors, file, false);
+    let jsxTree = undefined;
+    if (treeResult && typeof treeResult === 'object') {
+        jsxTree = treeResult.props?.children;
+    }
+    else {
+        jsxTree = treeResult;
+    }
     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;
+    // Handle whitespace in children
+    const whitespaceHandledTree = handleChildrenWhitespace(jsxTree);
+    // Add GT identifiers to the tree
+    let minifiedTree = addGTIdentifierToSyntaxTree(whitespaceHandledTree);
+    console.log('minifiedTree', JSON.stringify(minifiedTree, null, 2));
+    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}`));
@@ -220,7 +233,7 @@ export function parseJSXElement(importAliases, node, updates, errors, file) {
     // <T> is valid here
     updates.push({
         dataFormat: 'JSX',
-        source: componentObj.tree,
-        metadata: componentObj.props,
+        source: minifiedTree,
+        metadata,
     });
 }

package/dist/react/utils/getVariableName.d.ts

@@ -1,2 +1,25 @@
+import { VariableType } from 'generaltranslation/types';
+/**
+ * These are the names of the variable components as they appear in gt-next and gt-react
+ */
+export declare const defaultVariableNames: {
+    readonly Var: "value";
+    readonly Num: "n";
+    readonly DateTime: "date";
+    readonly Currency: "cost";
+};
+/**
+ * Minify the variable type from the name of the variable component (from gt-next and gt-react)
+ * @param variableType - The type of the variable (Var, Num, DateTime, Currency)
+ * @returns The minified variable type
+ */
+export declare const minifyVariableType: (variableType: keyof typeof defaultVariableNames) => VariableType;
 export declare const baseVariablePrefix = "_gt_";
-export declare function getVariableName(props: Record<string, any> | undefined, variableType: 'variable' | 'number' | 'datetime' | 'currency', id: number): string;
+/**
+ * Get the name of a variable
+ * @param props - The props of the variable
+ * @param variableType - The type of the variable (Var, Num, DateTime, Currency)
+ * @param id - The id of the variable
+ * @returns The name of the variable
+ */
+export declare function getVariableName(props: Record<string, any> | undefined, variableType: keyof typeof defaultVariableNames, id: number): string;

package/dist/react/utils/getVariableName.js

@@ -1,10 +1,34 @@
-const defaultVariableNames = {
-    variable: 'value',
-    number: 'n',
-    datetime: 'date',
-    currency: 'cost',
+/**
+ * These are the names of the variable components as they appear in gt-next and gt-react
+ */
+export const defaultVariableNames = {
+    Var: 'value',
+    Num: 'n',
+    DateTime: 'date',
+    Currency: 'cost',
+};
+const minifyVariableTypeMap = {
+    Var: 'v',
+    Num: 'n',
+    DateTime: 'd',
+    Currency: 'c',
+};
+/**
+ * Minify the variable type from the name of the variable component (from gt-next and gt-react)
+ * @param variableType - The type of the variable (Var, Num, DateTime, Currency)
+ * @returns The minified variable type
+ */
+export const minifyVariableType = (variableType) => {
+    return minifyVariableTypeMap[variableType];
 };
 export const baseVariablePrefix = '_gt_';
+/**
+ * Get the name of a variable
+ * @param props - The props of the variable
+ * @param variableType - The type of the variable (Var, Num, DateTime, Currency)
+ * @param id - The id of the variable
+ * @returns The name of the variable
+ */
 export function getVariableName(props = {}, variableType, id) {
     if (props.name)
         return props.name;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gtx-cli",
-  "version": "1.2.30-alpha.22",
+  "version": "1.2.30-alpha.24",
   "main": "dist/index.js",
   "bin": "dist/main.js",
   "files": [
@@ -11,6 +11,7 @@
   "scripts": {
     "build": "tsc",
     "build:clean": "rm -rf dist; npm run build",
+    "build:release": "npm run build:clean",
     "lint": "eslint \"src/**/*.{js,ts}\" \"__tests__/**/*.{js,ts}\"",
     "lint:fix": "eslint \"src/**/*.{js,ts}\" \"__tests__/**/*.{js,ts}\" --fix",
     "test": "vitest run",
@@ -86,7 +87,7 @@
     "esbuild": "^0.25.4",
     "fast-glob": "^3.3.3",
     "form-data": "^4.0.2",
-    "generaltranslation": "^7.0.0-alpha.22",
+    "generaltranslation": "^7.0.0-alpha.24",
     "open": "^10.1.1",
     "ora": "^8.2.0",
     "resolve": "^1.22.10",