fix extractJSX and extractJSXElements to handle useEffect clean up fu…

…nction
wpdas · Apr 11, 2024 · 34f3de3 · 34f3de3
1 parent 2de6c81
commit 34f3de3
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 42 deletions.
diff --git a/lib/actions/transformSchemaToWidget.js b/lib/actions/transformSchemaToWidget.js
@@ -360,6 +360,13 @@ const swapComponentsForStatelessFiles = (fileSchemas, fileSchema) => {
 
             const jsxOnly = extractJSX(fileSchema.content);
 
+            if (fileSchema.filePath.includes("Chat/index.tsx")) {
+              console.log("KAKAROOOTOOOOOOOOOOOOOOOOOO");
+              console.log(jsxOnly);
+              console.log("\n");
+              console.log("CONTENT ORIGINAL:", fileSchema.content);
+            }
+
             const fixedJsxOnly =
               jsxOnly.length > 1
                 ? `<>${jsxOnly.join("\n")}</>`

diff --git a/lib/build.js b/lib/build.js
@@ -12,12 +12,14 @@ async function build() {
 }
 
 async function build_with_log() {
+  await build();
   let loading = log.loading("Building the project");
-  await build().catch((err) => {
-    loading.error();
-    log.error(err);
-    process.exit(1);
-  });
+  // INFO: isso abaixo estava inibindo a mensagem de erro completa
+  // await build().catch((err) => {
+  //   loading.error();
+  //   log.error(err);
+  //   process.exit(1);
+  // });
   loading.finish();
   log.sucess("Build complete");
 }

diff --git a/lib/dev.js b/lib/dev.js
@@ -23,11 +23,13 @@ async function dev(opts) {
   let loading = log.loading(`Building the project for the first time`);
   let NETWORK = opts.network || "mainnet";
 
-  await build().catch((err) => {
-    loading.error();
-    log.error(err);
-    process.exit(1);
-  });
+  await build();
+  // INFO: isso abaixo estava inibindo a mensagem de erro completa
+  // await build().catch((err) => {
+  //   loading.error();
+  //   log.error(err);
+  //   process.exit(1);
+  // });
   loading.finish();
 
   // Start serving the development JSON

diff --git a/lib/helpers.js b/lib/helpers.js
@@ -156,13 +156,15 @@ const getFileComponents = (fileContent) => {
 
   // Pega o nome de todos os componentes
   foundItems = foundItems
-    .map(
-      (item) =>
-        // expressa: pega todos as palavras após o <
-        item.match(regexp.FIRST_WORD_IN_THE_HTML_ELEMENT) &&
-        item.match(regexp.FIRST_WORD_IN_THE_HTML_ELEMENT)[0],
-    )
-    .filter((item) => !!item);
+    ? foundItems
+        .map(
+          (item) =>
+            // expressa: pega todos as palavras após o <
+            item.match(regexp.FIRST_WORD_IN_THE_HTML_ELEMENT) &&
+            item.match(regexp.FIRST_WORD_IN_THE_HTML_ELEMENT)[0],
+        )
+        .filter((item) => !!item)
+    : [];
 
   // Remove duplicados
   function removeDuplicates(array) {

diff --git a/lib/parsers/extractJSX.js b/lib/parsers/extractJSX.js
@@ -1,5 +1,6 @@
 const babel = require("@babel/core");
 const presetReactPath = require("./presetReactPath");
+const pluginSyntaxJsx = require("./pluginSyntaxJsx");
 const traverse = require("@babel/traverse").default;
 const generate = require("@babel/generator").default;
 
@@ -12,37 +13,38 @@ const generate = require("@babel/generator").default;
  * @returns
  */
 function extractJSX(code) {
-  // V3
-  // Retorna uma lista de elementos JSX. Entao se caso dentro da funçao for
-  // encontrado mais de uma ocorrencia, retorna ambos.
-  // Isso acontece em casos como do arquivo RouteLink que dependendo de uma comparação
-  // retorna um grupo de jsx ou outro grupo de jsx.
-  // Nessa versao 3, também retorna JSX que estão envoltos em arrow functions sem {};
-
+  // V4 - Corrige erro onde verificacao de arrow functions para retorno de JSX estava sendo feito
+  // dentro do useEffect em sua funcao de limpeza.
   let jsxList = [];
 
-  // Analisa o código para AST
   const ast = babel.parseSync(code, {
     presets: [presetReactPath],
+    plugins: [pluginSyntaxJsx], // Assegura o suporte adequado para JSX
   });
 
-  // Percorre a AST para encontrar JSX
   traverse(ast, {
     ReturnStatement(path) {
+      // Esta verificação garante que estamos capturando retornos de componentes ou funções
+      // e não de hooks como useEffect
       if (
-        path.getFunctionParent().isArrowFunctionExpression() ||
+        (path.getFunctionParent().isArrowFunctionExpression() &&
+          path.getFunctionParent().parentPath.isVariableDeclarator()) ||
         path.getFunctionParent().isFunctionExpression() ||
         path.getFunctionParent().isFunctionDeclaration()
       ) {
         const jsxAST = path.node.argument;
-        if (jsxAST) {
+
+        // Verifica se o retorno é um elemento JSX
+        if (
+          jsxAST &&
+          (jsxAST.type === "JSXElement" || jsxAST.type === "JSXFragment")
+        ) {
           const jsxCode = generate(jsxAST, { concise: true }).code;
           jsxList.push(jsxCode);
         }
       }
     },
     ArrowFunctionExpression(path) {
-      // Verifica se o corpo é um JSXElement ou JSXFragment
       if (
         path.node.body.type === "JSXElement" ||
         path.node.body.type === "JSXFragment"
@@ -56,6 +58,51 @@ function extractJSX(code) {
   return jsxList;
 }
 
+// function extractJSX(code) {
+//   // V3
+//   // Retorna uma lista de elementos JSX. Entao se caso dentro da funçao for
+//   // encontrado mais de uma ocorrencia, retorna ambos.
+//   // Isso acontece em casos como do arquivo RouteLink que dependendo de uma comparação
+//   // retorna um grupo de jsx ou outro grupo de jsx.
+//   // Nessa versao 3, também retorna JSX que estão envoltos em arrow functions sem {};
+
+//   let jsxList = [];
+
+//   // Analisa o código para AST
+//   const ast = babel.parseSync(code, {
+//     presets: [presetReactPath],
+//   });
+
+//   // Percorre a AST para encontrar JSX
+//   traverse(ast, {
+//     ReturnStatement(path) {
+//       if (
+//         path.getFunctionParent().isArrowFunctionExpression() ||
+//         path.getFunctionParent().isFunctionExpression() ||
+//         path.getFunctionParent().isFunctionDeclaration()
+//       ) {
+//         const jsxAST = path.node.argument;
+//         if (jsxAST) {
+//           const jsxCode = generate(jsxAST, { concise: true }).code;
+//           jsxList.push(jsxCode);
+//         }
+//       }
+//     },
+//     ArrowFunctionExpression(path) {
+//       // Verifica se o corpo é um JSXElement ou JSXFragment
+//       if (
+//         path.node.body.type === "JSXElement" ||
+//         path.node.body.type === "JSXFragment"
+//       ) {
+//         const jsxCode = generate(path.node.body, { concise: true }).code;
+//         jsxList.push(jsxCode);
+//       }
+//     },
+//   });
+
+//   return jsxList;
+// }
+
 // function extractJSX(code) {
 //   // V2 = Retorna uma lista de elementos JSX. Entao se caso dentro da funçao for
 //   // encontrado mais de uma ocorrencia, retorna ambos.

diff --git a/lib/parsers/extractJSXElements.js b/lib/parsers/extractJSXElements.js
@@ -2,6 +2,7 @@ const babel = require("@babel/core");
 const traverse = require("@babel/traverse").default;
 const generate = require("@babel/generator").default;
 const presetReactPath = require("./presetReactPath");
+const pluginSyntaxJsx = require("./pluginSyntaxJsx");
 const { log } = require("../utils");
 
 /**
@@ -19,41 +20,85 @@ const { log } = require("../utils");
  * @returns
  */
 function extractJSXElements(code, filterByElementType) {
-  // V2
+  // V3
   const elements = [];
   let error = null;
 
   try {
-    // Parse the code to AST
+    // Parse the code to AST using @babel/parser with React preset
     const ast = babel.parse(code, {
       presets: [presetReactPath],
+      plugins: [pluginSyntaxJsx], // Ensure JSX syntax is properly handled
     });
 
-    // Traverse the AST to find elements of the specified type
+    // Traverse the AST to find JSX elements
     traverse(ast, {
       JSXElement(path) {
-        // Caso tenha filtro, retorna somente os elementos que sao do nome especificado
         if (filterByElementType) {
-          // Verifica se o nome do elemento corresponde ao filterByElementType
           if (path.node.openingElement.name.name === filterByElementType) {
-            // Utiliza generate para extrair o código completo do elemento JSX
-            const { code: elementCode } = generate(path.node);
+            const { code: elementCode } = generate(path.node, {
+              retainLines: true, // Option to retain lines to prevent misinterpretation of code structure
+              compact: "auto", // Automatically manage whitespace and formatting
+              concise: false, // Prevent overly concise code that might break structure
+              plugins: ["@babel/plugin-transform-react-jsx"], // Ensure JSX is transformed properly
+            });
             elements.push(elementCode);
           }
         } else {
-          // Se não tiver filtro, retorna todos os elementos
-          const { code: elementCode } = generate(path.node);
+          const { code: elementCode } = generate(path.node, {
+            retainLines: true,
+            compact: "auto",
+            concise: false,
+            plugins: ["@babel/plugin-transform-react-jsx"],
+          });
           elements.push(elementCode);
         }
       },
     });
   } catch (error_) {
-    error = `The compiler was unable to process this line. Try another way. \n ${error_}`;
+    console.log("CODE:", code);
+    error = `The compiler was unable to process this line. Try another way. \n${error_}`;
   }
 
   return { elements, error };
 }
 
+// function extractJSXElements(code, filterByElementType) {
+//   // V2
+//   const elements = [];
+//   let error = null;
+
+//   try {
+//     // Parse the code to AST
+//     const ast = babel.parse(code, {
+//       presets: [presetReactPath],
+//     });
+
+//     // Traverse the AST to find elements of the specified type
+//     traverse(ast, {
+//       JSXElement(path) {
+//         // Caso tenha filtro, retorna somente os elementos que sao do nome especificado
+//         if (filterByElementType) {
+//           // Verifica se o nome do elemento corresponde ao filterByElementType
+//           if (path.node.openingElement.name.name === filterByElementType) {
+//             // Utiliza generate para extrair o código completo do elemento JSX
+//             const { code: elementCode } = generate(path.node);
+//             elements.push(elementCode);
+//           }
+//         } else {
+//           // Se não tiver filtro, retorna todos os elementos
+//           const { code: elementCode } = generate(path.node);
+//           elements.push(elementCode);
+//         }
+//       },
+//     });
+//   } catch (error_) {
+//     error = `The compiler was unable to process this line. Try another way. \n ${error_}`;
+//   }
+
+//   return { elements, error };
+// }
+
 // function extractJSXElements(code, elementType) {
 //   const elements = [];
 

diff --git a/package-lock.json b/package-lock.json
diff --git 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.15",
+  "version": "1.0.0-beta.16",
   "main": "main.js",
   "types": "index.d.ts",
   "author": "Wenderson Pires - wendersonpires.near",