add AppSrcIndexer to be used when ejectStatefulComponents is true

.nvmrc

@@ -1 +1 @@
-18.0.0
+18.17.0

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),

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 "";

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;

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);

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);
 };