Merge pull request #10 from wpdas/feature/new-features

feature: new features

gateway/config/flags.js

@@ -11,4 +11,5 @@ export const flags = {
     process.env.BOS_LOADER_WS || config.bosLoaderWs || "ws://127.0.0.1:4040",
   enableHotReload:
     process.env.ENABLE_HOT_RELOAD ?? config.enableHotReload ?? true,
+  hideAlemBar: config.hideAlemBar || false,
 };

gateway/src/index.js

@@ -18,6 +18,7 @@ import {
 import { useHashRouterLegacy } from "./useHashRouterLegacy";
 import { useAuth } from "./useAuth";
 import { NavigationWrapper } from "./navigation/NavigationWrapper";
+import { flags } from "../config/flags";
 
 function Viewer({ widgetSrc, code }) {
   const [widgetProps, setWidgetProps] = useState({});
@@ -123,7 +124,7 @@ function App() {
           path="*"
           element={
             <>
-              <NavigationWrapper {...passProps} />
+              {!flags.hideAlemBar && <NavigationWrapper {...passProps} />}
               <Viewer {...passProps} />
             </>
           }

lib/actions/applyOptions.js

@@ -0,0 +1,14 @@
+const { read_alem_config } = require("../config");
+
+// Apply options provided by alem.config.json
+const applyOptions = (bundle) => {
+  const config = read_alem_config();
+  bundle = bundle.replace(
+    '":::KEEP_ROUTE:::"',
+    config.options?.keepRoute || false,
+  );
+
+  return bundle;
+};
+
+module.exports = applyOptions;

lib/actions/compilerOptions.js

@@ -1,9 +1,9 @@
 const path = require("path");
-const { read_bos_config } = require("../config");
+const { read_alem_config } = require("../config");
 
 /**
  * Trata as configurações do compilador na qual o usuário pode definir os valores.
- * Ver arquivo bos.config.json -> compilerOptions
+ * Ver arquivo alem.config.json -> compilerOptions
  * @param {*} config
  * @returns
  */
@@ -34,7 +34,7 @@ function getConfiguredPaths(config) {
 }
 
 const compilerOptions = () => {
-  const config = read_bos_config();
+  const config = read_alem_config();
   const paths = getConfiguredPaths(config);
 
   return {
@@ -58,7 +58,7 @@ const replacePathAlias = (path) => {
 /**
  * Check if path is using path alias
  *
- * ex: @app/foo/bar => return true because of "@app" (if available inside bos.config.json -> compilerOptions)
+ * ex: @app/foo/bar => return true because of "@app" (if available inside alem.config.json -> compilerOptions)
  * @param {string} path
  * @returns
  */

lib/actions/saveFinalBundleFile.js

@@ -1,11 +1,11 @@
 const path = require("path");
 const fs = require("fs");
-const { read_bos_config } = require("../config");
+const { read_alem_config } = require("../config");
 
 // 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_bos_config();
+  const config = read_alem_config();
   const finalFileName = config.isIndex
     ? "Index"
     : config.name.replaceAll(" ", "-").toLowerCase();

lib/alem-vm/alem-vm.d.ts

@@ -49,6 +49,7 @@ type LinkProps = {
   style?: React.CSSProperties;
   onClick?: () => void;
   children?: JSX.Element | JSX.Element[] | string | number;
+  params?: Record<string, any>;
 };
 
 type URLRouterProps = {
@@ -92,7 +93,10 @@ export type RouteType = "URLBased" | "ContentBased";
  *
  * This is NOT going to update the URL path.
  */
-export declare const navigate: (routePath: string) => void;
+export declare const navigate: (
+  routePath: string,
+  params?: Record<string, string>,
+) => void;
 
 /**
  * Create Route child
@@ -127,19 +131,22 @@ export declare const getLocation: () => {
   isRoutesReady: boolean;
 };
 
-/**
- * Use Routes Context props. This can be useful if you'd like to perform some side effect whenever some context data changes.
- * @returns
- */
-export declare const useRoutes: () => {
+export type UseRoutesProps = {
   routesInitialized: boolean;
   activeRoute: string;
   routeParameterName: string;
   routes: string[];
   routeType: string;
   routeBlocked: boolean;
+  routeParams: Record<string, any>;
 };
 
+/**
+ * Use Routes Context props. This can be useful if you'd like to perform some side effect whenever some context data changes.
+ * @returns
+ */
+export declare const useRoutes: () => UseRoutesProps;
+
 // ======= Context =======
 
 /**

lib/alem-vm/components/AppIndexer.jsx

@@ -1,19 +1,27 @@
-return (
-  <AlemTheme>
-    {iframeModulesCode && (
-      <iframe
-        style={{ height: 0, width: 0 }}
-        srcDoc={iframeModulesCode}
-        message={"init modules"}
-        onMessage={(message) => {
-          console.log("Message:", message);
-        }}
+const AlemApp = useMemo(() => {
+  if (!props.alem.ready) {
+    return "";
+  }
+
+  return (
+    <AlemTheme>
+      {iframeModulesCode && (
+        <iframe
+          style={{ height: 0, width: 0 }}
+          srcDoc={iframeModulesCode}
+          message={"init modules"}
+          onMessage={(message) => {
+            console.log("Message:", message);
+          }}
+        />
+      )}
+      <Widget
+        loading=" "
+        code={props.alem.componentsCode.App}
+        props={{ alem: props.alem }}
       />
-    )}
-    <Widget
-      loading=" "
-      code={props.alem.componentsCode.App}
-      props={{ alem: props.alem }}
-    />
-  </AlemTheme>
-);
+    </AlemTheme>
+  );
+}, [props.alem.ready, props.alem.alemExternalStylesBody]);
+
+return AlemApp;

lib/alem-vm/importable/RouteLink.tsx

@@ -5,6 +5,7 @@ import { LinkProps, navigate, useContext } from "../alem-vm";
  */
 export const RouteLink = ({
   to,
+  params,
   label,
   className,
   style,
@@ -24,17 +25,26 @@ export const RouteLink = ({
     }
 
     if (routeContext.routeType === "ContentBased") {
-      navigate(to);
+      navigate(to, params);
     }
   };
 
   if (routeContext.routeType === "URLBased") {
+    let strParams = "";
+
+    // Process params
+    if (params) {
+      Object.keys(params).forEach((paramKey) => {
+        strParams += `&${paramKey}=${params[paramKey]}`;
+      });
+    }
+
     return (
       <a
         onClick={onClickHandler}
         className={className}
         style={{ cursor: "pointer", textDecoration: "none", ...style }}
-        href={`?${routeContext.routeParameterName || "path"}=${to}`}
+        href={`?${routeContext.routeParameterName || "path"}=${to}${strParams}`}
       >
         {label || children}
       </a>

lib/alem-vm/importable/Router.tsx

@@ -1,4 +1,4 @@
-import { Route, RouteType, useEffect } from "../alem-vm";
+import { Route, RouteType, Storage, useEffect } from "../alem-vm";
 
 type RouterProps = {
   routes: Route[];
@@ -101,6 +101,11 @@ const Router = (props: RouterProps) => {
           : routes[0].path;
       }
 
+      // Checa se o config.keepRoute esta ativado e se tiver, se tem uma rota salva
+      if (alem.keepRoute && type === "ContentBased") {
+        _activeRoute = Storage.privateGet("alem::keep-route");
+      }
+
       // Se nenhuma rota está ativa, define o primeiro item das rotas como o ativo
       if (!_activeRoute) {
         _activeRoute = routes[0].path;

lib/alem-vm/importable/RouterProvider.ts

@@ -1,4 +1,10 @@
-import { RouteType, createContext, useContext } from "../alem-vm";
+import {
+  RouteType,
+  Storage,
+  createContext,
+  props,
+  useContext,
+} from "../alem-vm";
 
 const ALEM_ROUTES_CONTEXT_KEY = "alemRoutes";
 
@@ -25,6 +31,7 @@ const RouterProvider = () => {
     // ==================================== Routes ====================================
     routesInitialized: false,
     activeRoute: "",
+    routeParams: {},
     routeParameterName: "path",
     routes: [] as string[],
     routeType: "URLBased", // URLBased | ContentBased
@@ -50,14 +57,21 @@ const RouterProvider = () => {
       routeType?: RouteType;
       activeRoute?: string;
       routeBlocked?: boolean;
+      routeParams?: Record<string, any>;
     }) => {
       updateAlemRoutesState({
         routes: routeProps.routes || alemRoutesState().routes,
         routeType: routeProps.routeType || alemRoutesState().routeType,
         activeRoute: routeProps.activeRoute || alemRoutesState().activeRoute,
         routeBlocked: routeProps.routeBlocked || alemRoutesState().routeBlocked,
+        routeParams: routeProps.routeParams || alemRoutesState().routeParams,
         routesInitialized: true,
       });
+
+      // If config.keepRoute is activated, store the current route to be used later
+      if (props.alem.keepRoute && routeProps.activeRoute) {
+        Storage.privateSet("alem::keep-route", routeProps.activeRoute);
+      }
     },
   });
 };

lib/alem-vm/importable/navigate.ts

@@ -1,6 +1,6 @@
 import { useContext } from "../alem-vm";
 
-const navigate = (route: string) => {
+const navigate = (route: string, params: Record<string, any>) => {
   const routeContext = useContext<any>("alemRoutes");
   if (!routeContext) {
     console.error("navigate is being used without Router on top of it.");
@@ -11,7 +11,11 @@ const navigate = (route: string) => {
     // Isso se deve devido a quando se altera um state, o componente onde ele está é
     // renderizado novamente. Ou seja, o Router também vai ser renderizado novamente
     // e as propriedades precisam se manter, caso contrário, voltam para o estado inicial.
-    routeContext.updateRouteParameters({ ...routeContext, activeRoute: route });
+    routeContext.updateRouteParameters({
+      ...routeContext,
+      activeRoute: route,
+      routeParams: params || {},
+    });
   }
 };
 

lib/alem-vm/importable/useContext.ts

@@ -15,7 +15,9 @@ const useContext = <D>(contextKey: string) => {
 
   const wasContextInitialized = props[contextKey].initialized;
   if (!wasContextInitialized) {
-    console.error(`Context "${contextKey}" not found.`);
+    // if (props.alem.isDevelopment) {
+    //   console.warn(`Context "${contextKey}" not ready or not found.`);
+    // }
     return {};
   }
   const contextKeys: string[] = props[contextKey].keys;

lib/alem-vm/importable/useRoutes.ts

@@ -1,13 +1,4 @@
-import { useContext } from "../alem-vm";
-
-type UseRoutesProps = {
-  routesInitialized: boolean;
-  activeRoute: string;
-  routeParameterName: string;
-  routes: string[];
-  routeType: string;
-  routeBlocked: boolean;
-};
+import { UseRoutesProps, useContext } from "../alem-vm";
 
 /**
  * Use Routes Context props. This can be useful if you'd like to perform some side effect whenever some context data changes.
@@ -21,7 +12,17 @@ const useRoutes = () => {
   if (!contextData) {
     console.error("useRoutes: You need to call `RouterProvider()` first.");
   }
-  return contextData!;
+
+  const data = {
+    routesInitialized: contextData.routesInitialized,
+    activeRoute: contextData.activeRoute,
+    routeParameterName: contextData.routeParameterName,
+    routes: contextData.routes,
+    routeType: contextData.routeType,
+    routeParams: contextData.routeParams,
+  };
+
+  return data!;
 };
 
 export default useRoutes;