compiler updates; added maintainRoutesWhenDeveloping config; tools up…

…dated; index.d.ts created and now being used by package.json

README.md

@@ -1,7 +1,7 @@
 <!-- https://cdn.jsdelivr.net/gh/wpdas/alem/docs/assets/near-script-logo.png -->
 <div align="center"><img src='https://cdn.jsdelivr.net/gh/wpdas/alem/docs/assets/near-script-logo.png' height='57' alt='Alem logo' /></div>
 
-# <div align="center">Alem</div>
+# <div align="center">Além</div>
 
 Alem is a web3 JavaScript / TypeScript library for building user interfaces for NEAR Bos dApps.
 

bos.d.ts

@@ -417,3 +417,18 @@ export declare const Tooltip: (params: {
 export declare const VM: {
   require: (source: string) => any;
 };
+
+/**
+ * BOS State - handle the global component's state
+ *
+ * Know more: https://docs.near.org/bos/api/state
+ */
+export declare const State: {
+  init: (defaultValue: {}) => void;
+  update: (updatedValues: {}) => void;
+};
+
+/**
+ * BOS State - access all state items
+ */
+export declare const state: Record<string, any>;

docs/config.file.md

@@ -25,7 +25,9 @@ Create an `bos.config.json` file at the root of the project with the following c
   // Alem options
   "options": {
     // The storage need to be loaded before rendering any content. If this is "true", a Spinner is going to be shown till the storage is ready
-    "showFallbackSpinner": false
+    "showFallbackSpinner": false,
+    // During development, if the route is of type ContentBased, it will return to the first registered route every time a file is changed. This property enables or disables this behavior.
+    "maintainRouteWhenDeveloping": true
   }
 }
 ```

gateway/src/useRedirectMap.js

@@ -33,7 +33,8 @@ function useRedirectMap() {
       fetch(flags.bosLoaderUrl)
         .then((r) => r.json())
         .then((d) => {
-          console.log("File change detected via HTTP", d);
+          // console.log("File change detected via HTTP", d);
+          console.log("File change detected via HTTP");
           setDevJson(d);
         })
         .catch((error) => {

index.d.ts

@@ -0,0 +1,5 @@
+export * from "./bos";
+export * from "./router";
+export * from "./store";
+export * from "./theme";
+export * from "./utils";

lib/build.js

@@ -5,6 +5,8 @@ const {
   removeComments,
   removeBlankLines,
   mimify,
+  applyEnvironment,
+  parseOptions,
 } = require("./parse.js");
 const { read_bos_config } = require("./config");
 const pkg = require("../package.json");
@@ -117,6 +119,14 @@ function process_dist() {
   // Remove blank lines
   fileBundleBody = removeBlankLines(fileBundleBody);
 
+  // Apply ports - works for development only
+  // this won't affect production because the state of enviroment is going to be
+  // production
+  fileBundleBody = applyEnvironment(fileBundleBody);
+
+  // Apply changes depending of the config.options
+  fileBundleBody = parseOptions(fileBundleBody);
+
   // Mimify
   fileBundleBody = mimify(fileBundleBody);
 

lib/organize.js

@@ -44,6 +44,7 @@ function checkImportFeatures(file, fileBundleBody) {
   if (foundItems) {
     foundItems.forEach((item) => {
       // remove spaces and braces
+      // TODO: refactor using regexp
       const filteredItem = item
         .replaceAll(" ", "")
         .replaceAll("{", "")

lib/parse.js

@@ -1,6 +1,7 @@
 const fs = require("fs");
 // const path = require("path");
 const sucrase = require("sucrase");
+const { read_bos_config } = require("./config");
 
 const sucraseOptions = {
   transforms: ["typescript", "jsx"],
@@ -92,6 +93,28 @@ const removeComments = (c) =>
 
 const removeBlankLines = (c) => c.replace(/^\s*\n/gm, "");
 
+const ENVIRONMENT_MARKER = ":::ENV:::";
+const applyEnvironment = (c) =>
+  c.replaceAll(ENVIRONMENT_MARKER, process.env.NODE_ENV || "production");
+
+const MAINTAIN_ROUTE_MARKER = '":::MAINTAIN_ROUTE:::"';
+const parseOptions = (c) => {
+  const config = read_bos_config();
+
+  // Maintain Route When Developing
+  if (config?.options?.maintainRouteWhenDeveloping) {
+    c = c.replace(
+      MAINTAIN_ROUTE_MARKER,
+      config.options.maintainRouteWhenDeveloping,
+    );
+  }
+
+  // Default values if config is not found
+  c = c.replace(MAINTAIN_ROUTE_MARKER, "false");
+
+  return c;
+};
+
 const mimify = (c) =>
   c
     .replace(/\r?\n|\r/gm, "")
@@ -131,4 +154,6 @@ module.exports = {
   removeImports,
   removeBlankLines,
   mimify,
+  applyEnvironment,
+  parseOptions,
 };

lib/tools/routes.jsx

@@ -14,6 +14,10 @@ const Routes = ({ routes, type }) => {
     // BOS.props
     const bosProps = props;
 
+    // ContentBased config only: should maintain the current route over refreshes?
+    const maintainRoutesWhenDeveloping =
+      isDevelopment && state.alemConfig_maintainRouteWhenDeveloping;
+
     if (routes) {
       update({
         // list routes
@@ -23,9 +27,12 @@ const Routes = ({ routes, type }) => {
         ...(bosProps.path && routeType === "URLBased" && state.alemRouteBlocked
           ? { activeRoute: bosProps.path }
           : {
-              activeRoute: state.alemRouteSystemInitialized
-                ? activeRoute
-                : routes[0].path,
+              activeRoute:
+                // maintainRoutesWhenDeveloping: If in development and ContentBased type,
+                // maintain the route even when alemRouteSystemInitialized is not initialized?
+                state.alemRouteSystemInitialized || maintainRoutesWhenDeveloping
+                  ? activeRoute
+                  : routes[0].path,
             }),
       });
 
@@ -35,7 +42,7 @@ const Routes = ({ routes, type }) => {
         alemRouteBlocked: true,
       });
     }
-  }, []);
+  }, [props.path, activeRoute]);
 
   // Default route
   if (activeRoute === "") {
@@ -68,12 +75,13 @@ export const navigate = (routePath) => {
   }
 };
 
-export const RouteLink = ({ to, children }) => {
+export const RouteLink = ({ to, children, className }) => {
   const { type } = useAlemLibRoutesStore();
 
   if (type === "URLBased") {
     return (
       <a
+        className={className}
         style={{ cursor: "pointer", textDecoration: "none" }}
         href={`?path=${to}`}
       >

lib/tools/stateManager.jsx

@@ -8,6 +8,15 @@ State.init({
   alemStoreReady: false,
   alemRouteSystemInitialized: false,
   alemRouteBlocked: true,
+  // Some resources can change its behaviour depending of the environment
+  // This is just to help out during the development process. Final result
+  // is going to be the same.
+  // #PORT# is a marker that is going to be changed during the build process
+  alemEnvironment: ":::ENV:::", // production | development
+  // During development, if the route is of type ContentBased, it will return to the
+  // first registered route every time a file is changed. This property enables or
+  // disables this behavior.
+  alemConfig_maintainRouteWhenDeveloping: ":::MAINTAIN_ROUTE:::", // boolean
   // Fonts
   alemFontsLoaded: false,
   alemFontsBody: "", // store fonts in css format
@@ -50,6 +59,9 @@ const removeAlemPropsFromState = (stateObj) => {
   delete stateObj.alemRouteSystemInitialized;
   delete stateObj.alemFontsLoaded;
   delete stateObj.alemFontsBody;
+  delete stateObj.alemRouteBlocked;
+  delete stateObj.alemEnvironment;
+  delete stateObj.alemConfig_maintainRouteWhenDeveloping;
   return stateObj;
 };
 

lib/tools/utils.js

@@ -1,3 +1,9 @@
+/**
+ * Internal usage only
+ * is Development?
+ */
+const isDevelopment = state.alemEnvironment === "development";
+
 /**
  * Call resolve or reject for a given caller
  * E.g:

package.json

@@ -1,8 +1,9 @@
 {
   "name": "alem",
   "description": "Create web3 applications for NEAR BOS with a focus on performance while using concepts that are based on ReactJS.",
-  "version": "0.0.1-alpha.8",
+  "version": "0.0.1-alpha.9",
   "main": "main.js",
+  "types": "index.d.ts",
   "author": "Wenderson Pires - wendersonpires.near",
   "license": "MIT",
   "repository": {

router.d.ts

@@ -45,15 +45,13 @@ export declare const Routes: ({
 type RouteLinkProps = {
   to: string;
   children: JSX.Element;
+  className?: string;
 };
 
 /**
  * Route Link to access routes.
  */
-export declare const RouteLink: ({
-  to,
-  children,
-}: RouteLinkProps) => JSX.Element;
+export declare const RouteLink: (props: RouteLinkProps) => JSX.Element;
 
 /**
  * Go programmatically to the route ("route Path").