fixed extractJSXChildren and extractTopLevelJSXElements to support ch…

…ildren values inside JSX elements

lib/actions/processChildrenWidget.js

@@ -55,7 +55,6 @@ const processChildrenWidget = (htmlContent, fileSchemas) => {
       let childChildren = extractJSXChildren(htmlElement);
       // INFO: Se tiver child dentro deste child (childChildren), chama essa mesma função recursivamente?
       // ja esta sendo feito pelo "transformSchemaToWidgets"
-      // TODO:
       if (childChildren) {
         // childChildren = processChildrenWidget(childChildren, fileSchemas);
         childProps = { ...childProps, children: childChildren };

lib/parsers/extractJSXChildren.js

@@ -37,6 +37,10 @@ function extractJSXChildren(code) {
   });
 
   if (childrenAsString) {
+    if (childrenAsString.startsWith("<>")) {
+      return childrenAsString;
+    }
+
     return `<>${childrenAsString}</>`;
   }
 

lib/parsers/extractTopLevelJSXElements.js

@@ -20,32 +20,61 @@ const generate = require("@babel/generator").default;
  * @returns {string[]} - Lista de strings representando cada elemento JSX de nível superior.
  */
 function extractTopLevelJSXElements(code) {
+  // V2: trata childrens que usam valores dinamicos dentro do JSX. Isso estava falhando antes
+  // por não ter essa tratativa.
   const topLevelElements = [];
 
   // Configuração do Babel para analisar JSX
   const ast = babel.parse(code, {
     plugins: [pluginSyntaxJsx],
   });
 
-  // Percorre a AST para encontrar elementos JSX de nível superior
   traverse(ast, {
     JSXFragment(path) {
-      // Processa cada filho direto do fragmento JSX
       path.node.children.forEach((child) => {
-        // Ignora espaços em branco e outros nós que não são JSXElement ou JSXText
         if (babel.types.isJSXElement(child) || babel.types.isJSXText(child)) {
-          // Gera código a partir do nó AST do elemento JSX
           const { code } = generate(child, { concise: true });
           topLevelElements.push(code);
+        } else if (babel.types.isJSXExpressionContainer(child)) {
+          // Trata expressões dentro de containers, ex: {variable}
+          const { code } = generate(child.expression, { concise: true });
+          topLevelElements.push(`{${code}}`); // Adiciona chaves para simular a expressão embutida
         }
       });
-
-      // Interrompe a travessia após processar os filhos do fragmento JSX
-      path.stop();
+      path.stop(); // Interrompe após processar os filhos do fragmento
     },
   });
 
   return topLevelElements;
 }
 
+// function extractTopLevelJSXElements(code) {
+//   const topLevelElements = [];
+
+//   // Configuração do Babel para analisar JSX
+//   const ast = babel.parse(code, {
+//     plugins: [pluginSyntaxJsx],
+//   });
+
+//   // Percorre a AST para encontrar elementos JSX de nível superior
+//   traverse(ast, {
+//     JSXFragment(path) {
+//       // Processa cada filho direto do fragmento JSX
+//       path.node.children.forEach((child) => {
+//         // Ignora espaços em branco e outros nós que não são JSXElement ou JSXText
+//         if (babel.types.isJSXElement(child) || babel.types.isJSXText(child)) {
+//           // Gera código a partir do nó AST do elemento JSX
+//           const { code } = generate(child, { concise: true });
+//           topLevelElements.push(code);
+//         }
+//       });
+
+//       // Interrompe a travessia após processar os filhos do fragmento JSX
+//       path.stop();
+//     },
+//   });
+
+//   return topLevelElements;
+// }
+
 module.exports = extractTopLevelJSXElements;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "alem",
   "description": "Create web3 applications for NEAR BOS with a focus on performance and friendly development.",
-  "version": "1.0.0-beta.25",
+  "version": "1.0.0-beta.26",
   "main": "main.js",
   "types": "index.d.ts",
   "author": "Wenderson Pires - wendersonpires.near",