From 06f4c0329150f73556e624d44972e1414423d198 Mon Sep 17 00:00:00 2001
From: Wenderson Pires <wendersonpdas@gmail.com>
Date: Mon, 3 Jun 2024 17:41:07 -0300
Subject: [PATCH] add AppSrcIndexer to be used when ejectStatefulComponents is
 true

---
 .nvmrc                                   |  2 +-
 lib/actions/asStatefulCheck.js           |  5 ++-
 lib/alem-vm/components/AppIndexer.jsx    |  3 ++
 lib/alem-vm/components/AppSrcIndexer.jsx | 42 ++++++++++++++++++++++++
 lib/compiler.js                          |  2 +-
 lib/config/alemFiles.js                  | 28 ++++++++++++++--
 6 files changed, 76 insertions(+), 6 deletions(-)
 create mode 100644 lib/alem-vm/components/AppSrcIndexer.jsx

diff --git a/.nvmrc b/.nvmrc
index 03191c9..39d00c0 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-18.0.0
\ No newline at end of file
+18.17.0
\ No newline at end of file
diff --git a/lib/actions/asStatefulCheck.js b/lib/actions/asStatefulCheck.js
index 551163d..b678f8a 100644
--- a/lib/actions/asStatefulCheck.js
+++ b/lib/actions/asStatefulCheck.js
@@ -7,11 +7,14 @@ const { removeBlankLines } = require("../parse");
  */
 const asStatefulCheck = (content) => {
   // NOTE: Checa se tem "as stateful", se tiver, deve ser tratado como um Widget/Stateful
-  const hasAsStatefulType = content.includes('"as stateful"');
+  const hasAsStatefulType =
+    content.includes('"as stateful"') || content.includes("'as stateful'");
 
   if (hasAsStatefulType) {
     content = content.replace('"as stateful";', "");
+    content = content.replace("'as stateful';", "");
     content = content.replace('"as stateful"', "");
+    content = content.replace("'as stateful'", "");
 
     return {
       updatedContent: removeBlankLines(content),
diff --git a/lib/alem-vm/components/AppIndexer.jsx b/lib/alem-vm/components/AppIndexer.jsx
index 4e19db8..3faa42c 100644
--- a/lib/alem-vm/components/AppIndexer.jsx
+++ b/lib/alem-vm/components/AppIndexer.jsx
@@ -1,3 +1,6 @@
+/**
+ * This file uses the App's code to render the App widget
+ */
 const AlemApp = useMemo(() => {
   if (!props.alem.ready) {
     return "";
diff --git a/lib/alem-vm/components/AppSrcIndexer.jsx b/lib/alem-vm/components/AppSrcIndexer.jsx
new file mode 100644
index 0000000..1c5987f
--- /dev/null
+++ b/lib/alem-vm/components/AppSrcIndexer.jsx
@@ -0,0 +1,42 @@
+/**
+ * This file uses Widget's src to get the App Widget.
+ *
+ * It's used when the alem config "ejectStatefulComponents" is true
+ */
+const AlemApp = useMemo(() => {
+  if (!props.alem.ready) {
+    return "";
+  }
+
+  const widgetLayer2code = `
+  const props = {
+    ...props,
+    // ==================================== Modules Code ====================================
+    alem: {
+      ...props.alem,
+      // m = modulesCode, está sendo usado "m" para reduzir o bundle final
+      m: {
+        MODULES_CODE: {},
+      },
+    }
+  };
+
+  return (
+    <Widget loading=" " src={"APP_INDEXER_WIDGET_SRC"} props={props} />
+  )
+  `;
+
+  // staging.potlock.near/widget/potlock.ConfigForm
+
+  return (
+    <AlemTheme>
+      <Widget
+        loading=" "
+        code={widgetLayer2code}
+        props={{ alem: props.alem }}
+      />
+    </AlemTheme>
+  );
+}, [props.alem.ready, props.alem.alemExternalStylesBody, props.alem.rootProps]);
+
+return AlemApp;
diff --git a/lib/compiler.js b/lib/compiler.js
index cb28787..c4d980c 100644
--- a/lib/compiler.js
+++ b/lib/compiler.js
@@ -90,7 +90,7 @@ async function run_final_process(filesInfo, opts) {
 
   // Tools -> Indexer
   // Adiciona o bundle do componente App dentro do Indexador: <AlemTheme> <App /> </AlemTheme>
-  bundleContent += alemFiles.loadIndexerContent();
+  bundleContent += alemFiles.loadIndexerContent(NETWORK);
 
   // Insere os códigos dos Módulos nas props globais
   bundleContent = bundleContent.replace("MODULES_CODE: {},", modulesCodes);
diff --git a/lib/config/alemFiles.js b/lib/config/alemFiles.js
index 1dc464b..1877820 100644
--- a/lib/config/alemFiles.js
+++ b/lib/config/alemFiles.js
@@ -4,6 +4,8 @@ const { for_rfile } = require("../utils");
 const { ALEM_VM_FOLDER } = require("../constants");
 const importableAlemFileSchemas = require("./importableAlemFileSchemas");
 const plugins = require("../../plugins");
+const { read_alem_config } = require("../config");
+const getProjectName = require("../actions/getProjectName");
 
 const loadHeaderFilesContent = async () => {
   // State
@@ -45,11 +47,31 @@ const loadHeaderFilesContent = async () => {
  * Criar o indexador do projeto
  * @returns
  */
-const loadIndexerContent = () => {
-  const appIndexer = process_file(
-    path.join(__dirname, "../", ALEM_VM_FOLDER, "components", "AppIndexer.jsx"),
+const loadIndexerContent = (network) => {
+  const config = read_alem_config();
+  const account =
+    network === "mainnet" ? config.mainnetAccount : config.testnetAccount;
+  const ejectStatefulComponents = config.options?.ejectStatefulComponents;
+
+  let appIndexer = process_file(
+    path.join(
+      __dirname,
+      "../",
+      ALEM_VM_FOLDER,
+      "components",
+      ejectStatefulComponents ? "AppSrcIndexer.jsx" : "AppIndexer.jsx",
+    ),
   );
 
+  // Insere o src do App
+  if (ejectStatefulComponents) {
+    const widgetName = `${getProjectName(true)}.App`;
+    appIndexer = appIndexer.replace(
+      "APP_INDEXER_WIDGET_SRC",
+      `${account}/widget/${widgetName}`,
+    );
+  }
+
   return removeComments(appIndexer);
 };