From 475d3f862117c2d9deea5016a9bd8ff5e1e34ea6 Mon Sep 17 00:00:00 2001
From: Wenderson Pires <wendersonpdas@gmail.com>
Date: Tue, 23 Apr 2024 02:58:06 -0300
Subject: [PATCH] fixed extractJSXChildren and extractTopLevelJSXElements to
 support children values inside JSX elements

---
 lib/actions/processChildrenWidget.js      |  1 -
 lib/parsers/extractJSXChildren.js         |  4 +++
 lib/parsers/extractTopLevelJSXElements.js | 43 +++++++++++++++++++----
 package.json                              |  2 +-
 4 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/lib/actions/processChildrenWidget.js b/lib/actions/processChildrenWidget.js
index 60cb332..c2f122e 100644
--- a/lib/actions/processChildrenWidget.js
+++ b/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 };
diff --git a/lib/parsers/extractJSXChildren.js b/lib/parsers/extractJSXChildren.js
index f125566..2e6e144 100644
--- a/lib/parsers/extractJSXChildren.js
+++ b/lib/parsers/extractJSXChildren.js
@@ -37,6 +37,10 @@ function extractJSXChildren(code) {
   });
 
   if (childrenAsString) {
+    if (childrenAsString.startsWith("<>")) {
+      return childrenAsString;
+    }
+
     return `<>${childrenAsString}</>`;
   }
 
diff --git a/lib/parsers/extractTopLevelJSXElements.js b/lib/parsers/extractTopLevelJSXElements.js
index 00903ac..e76281c 100644
--- a/lib/parsers/extractTopLevelJSXElements.js
+++ b/lib/parsers/extractTopLevelJSXElements.js
@@ -20,6 +20,8 @@ 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
@@ -27,25 +29,52 @@ function extractTopLevelJSXElements(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;
diff --git a/package.json b/package.json
index 0c53ab6..bd71891 100644
--- a/package.json
+++ b/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",