added new options: createLoaderWidget, loadingComponentFile, loadingC…

…omponentName. These new options are used to create suspense loading widget to load the main widget

lib/actions/createSuspenseWidget.js

@@ -0,0 +1,63 @@
+const fs = require("fs");
+const path = require("path");
+const { ALEM_VM_FOLDER } = require("../constants");
+const { process_file } = require("../parse");
+const getMainWidgetName = require("./getMainWidgetName");
+const { read_alem_config } = require("../config");
+
+/**
+ * Cria o Widget Suspense para servir como loading para o Widget principal
+ *
+ * @param {*} opts Opcoes da CLI
+ */
+const createSuspenseWidget = (opts) => {
+  const mainWidgetName = getMainWidgetName();
+  const config = read_alem_config();
+  // console.log(config);
+  // console.log(opts);
+
+  // Configurable: Cria somente se "createLoaderWidget" for true
+  if (config.options.createLoaderWidget) {
+    const account =
+      opts.network === "mainnet"
+        ? config.mainnetAccount
+        : config.testnetAccount;
+    const mainWidgetSrc = `${account}/widget/${mainWidgetName}`;
+
+    let loadingComponent = "";
+    let loadingComponentJSX = "<Loading />";
+
+    if (
+      config.options.loadingComponentFile &&
+      config.options.loadingComponentName
+    ) {
+      const loadingComponentFilePath = path.join(
+        ".",
+        config.options.loadingComponentFile,
+      );
+      loadingComponent = process_file(loadingComponentFilePath);
+      loadingComponentJSX = `<${config.options.loadingComponentName} />`;
+    } else {
+      loadingComponent = process_file(
+        path.join(__dirname, "../", ALEM_VM_FOLDER, "components/Loading.jsx"),
+      );
+    }
+
+    let suspenseFile = process_file(
+      path.join(__dirname, "../", ALEM_VM_FOLDER, "components/Suspense.jsx"),
+    );
+
+    // Suspense parts
+    suspenseFile = suspenseFile
+      .replace(":::MAIN_WIDGET_SOURCE:::", mainWidgetSrc)
+      .replace(`":::LOADING_COMPONENT:::";`, loadingComponent)
+      .replace(`":::LOADING_COMPONENT_JSX"`, loadingComponentJSX);
+
+    fs.writeFileSync(
+      path.join(`./build/src/${mainWidgetName}Loader.jsx`),
+      suspenseFile,
+    );
+  }
+};
+
+module.exports = createSuspenseWidget;

lib/actions/getMainWidgetName.js

@@ -0,0 +1,12 @@
+const { read_alem_config } = require("../config");
+
+const getMainWidgetName = () => {
+  const config = read_alem_config();
+  const mainWidgetName = config.isIndex
+    ? "Index"
+    : config.name.replaceAll(" ", "-").toLowerCase();
+
+  return mainWidgetName;
+};
+
+module.exports = getMainWidgetName;

lib/actions/saveFinalBundleFile.js

@@ -1,14 +1,11 @@
 const path = require("path");
 const fs = require("fs");
-const { read_alem_config } = require("../config");
+const getMainWidgetName = require("./getMainWidgetName");
 
 // Save final bundle file
 // Note: must save inside a ./src folder. This is the only folder bos-clir-rs recognizes
 const saveFinalBundleFile = (bundleContent) => {
-  const config = read_alem_config();
-  const finalFileName = config.isIndex
-    ? "Index"
-    : config.name.replaceAll(" ", "-").toLowerCase();
+  const finalFileName = getMainWidgetName();
 
   fs.writeFileSync(
     path.join(`./build/src/${finalFileName}.jsx`),

lib/alem-vm/components/AppIndexer.jsx

@@ -3,10 +3,23 @@ const AlemApp = useMemo(() => {
     return "";
   }
 
+  const Container = styled.div`
+    display: flex;
+    margin-top: 48%;
+    justify-content: center;
+    width: 100%;
+  `;
+
+  const Loading = () => (
+    <Container>
+      <div className="spinner-border text-secondary" role="status" />
+    </Container>
+  );
+
   return (
     <AlemTheme>
       <Widget
-        loading=" "
+        loading={<Loading />}
         code={props.alem.componentsCode.App}
         props={{ alem: props.alem }}
       />

lib/alem-vm/components/Loading.jsx

@@ -0,0 +1,12 @@
+const Container = styled.div`
+  display: flex;
+  margin-top: 40%;
+  justify-content: center;
+  width: 100%;
+`;
+
+const Loading = () => (
+  <Container>
+    <div className="spinner-border text-secondary" role="status" />
+  </Container>
+);

lib/alem-vm/components/Suspense.jsx

@@ -0,0 +1,9 @@
+":::LOADING_COMPONENT:::";
+
+return (
+  <Widget
+    loading={":::LOADING_COMPONENT_JSX"}
+    src=":::MAIN_WIDGET_SOURCE:::"
+    props={props}
+  />
+);

lib/build.js

@@ -5,14 +5,14 @@ const { compile_files } = require("./compiler.js");
 const distFolder = process.env.DIST_FOLDER || "build";
 
 // Main function to orchestrate the build script
-async function build() {
+async function build(opts) {
   create_dist(distFolder);
-  compile_files();
+  compile_files(opts);
   generate_data_json();
 }
 
-async function build_with_log() {
-  await build();
+async function build_with_log(opts) {
+  await build(opts);
   let loading = log.loading("Building the project");
   // INFO: isso abaixo estava inibindo a mensagem de erro completa
   // await build().catch((err) => {

lib/cli.js

@@ -31,8 +31,8 @@ async function run() {
   program
     .command("build")
     .description("Build the project")
-    .action(() => {
-      build_with_log().catch(console.error);
+    .action((opts) => {
+      build_with_log(opts).catch(console.error);
     });
   program
     .command("deploy")

lib/compiler.js

@@ -13,15 +13,17 @@ const renderErrorDisplay = require("./actions/renderErrorDisplay");
 const injectModules = require("./actions/injectModules");
 const applyOptions = require("./actions/applyOptions");
 const injectFoundRegExps = require("./actions/injectFoundRegExps");
+const createSuspenseWidget = require("./actions/createSuspenseWidget");
 
 const distFolder = process.env.DIST_FOLDER || "build";
 
 /**
  * Executa os comandos finais antes de gerar o bundle e arquivos/estrutura de esquemas finais
  * @param {{hasError: null;initialFileSchemas: {filePath: any;toImport: any;content: any;}[];fileSchemas: {filePath: string;toImport: string[];content: string;}[];orderedFilesToImport: string[];}} filesInfo
+ * @param {*} opts Opcoes da CLI
  * @returns
  */
-function run_final_process(filesInfo) {
+function run_final_process(filesInfo, opts) {
   // Se não tiver erro
   if (filesInfo.hasError) {
     // Save bundle file with error info
@@ -109,6 +111,9 @@ function run_final_process(filesInfo) {
   // Save final bundle file
   saveFinalBundleFile(bundleContent);
 
+  // Create Suspense Widget to load the main Widget (configurable)
+  createSuspenseWidget(opts);
+
   // Save final file schemas
   if (process.env.SAVE_SCHEMAS === "true") {
     saveFileSchemas(finishedSchemaProcessForWidgets.completeFileSchemas);
@@ -117,8 +122,10 @@ function run_final_process(filesInfo) {
 
 /**
  * Le todos os arquivos independentes e compila pela primeira vez
+ *
+ * @param {*} opts Opcoes da CLI
  */
-function compile_files() {
+function compile_files(opts) {
   create_dist(distFolder);
 
   let entryFile = path.join(".", "src", "index.tsx");
@@ -134,7 +141,7 @@ function compile_files() {
   const filesInfo = loadFilesInfo(entryFile);
 
   // Executa processo final para gerar bundle e esquemas de arquivos
-  run_final_process(filesInfo);
+  run_final_process(filesInfo, opts);
 }
 
 module.exports = {

lib/dev.js

@@ -24,7 +24,7 @@ async function dev(opts) {
   let loading = log.loading(`Building the project for the first time`);
   let NETWORK = opts.network || "mainnet";
 
-  await build();
+  await build(opts);
   // INFO: isso abaixo estava inibindo a mensagem de erro completa
   // await build().catch((err) => {
   //   loading.error();
@@ -53,7 +53,7 @@ async function dev(opts) {
     // Atualiza o arquivo no cache para ser acessado posteriormente no re-build()
     filesContentCache.updateFileContent(path);
 
-    await build().catch((err) => {
+    await build(opts).catch((err) => {
       loading.error();
       log.error(err);
       process.exit(1);

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.27",
+  "version": "1.0.0-beta.28",
   "main": "main.js",
   "types": "index.d.ts",
   "author": "Wenderson Pires - wendersonpires.near",