Merge pull request #5 from wpdas/feature/complex-objects-props

feature: complex objects props. This will be implemented using a different branch.

.gitignore

@@ -9,4 +9,5 @@ OLD_README.md
 
 # misc
 .DS_Store
-test.js
+test.js
+errors

docs/router/use-location.md → docs/router/get-location.md

@@ -5,18 +5,18 @@
 <!-- ou embrulhe o recurso com a função na qual ele está sendo usado. -->
 <!-- TODO: Pensar numa forma de corrigir isso nas proximas versões -->
 
-## Use Location
+## Get Location
 
 This hook returns the current location object. It can be useful if you'd like to perform some side effect whenever the current location changes.
 
-Use `useLocation().isRoutesReady` to get to know when the routes are ready to be accessed.
+Use `getLocation().isRoutesReady` to get to know when the routes are ready to be accessed.
 
 ```ts
 // http://127.0.0.1:8080/alem-lib.near/widget/Index?path=profile
-import { useLocation } from "alem";
+import { getLocation } from "alem";
 
 export const SomeComponent = () => {
-  const location = useLocation();
+  const location = getLocation();
   console.log(location);
   // { isRoutesReady: true, pathname: "profile", routes: ["home", "profile"] }
 

docs/router/routes.md

@@ -37,7 +37,7 @@ export default AppRoutes;
 
 ## Types of Behavior
 
-`Routes` can handle links in two ways:
+`Router` can handle links in two ways:
 
 - **URLBased:** This is the default behavior. Every link will reload the page by changing the URL structure in the browser;
 - **ContentBased:** This behavior does not change the URL in the browser and does not reload the page. Therefore, it is faster to display content on the screen.
@@ -46,13 +46,13 @@ You can pass the type of behavior using the `type` property of Routes.
 
 ```tsx
 /* URL Based */
-<Routes
+<Router
   routes={[FeatureOverviewRoute, StateManagementRoute]}
   type="URLBased"
 />
 
 /* Content Based */
-<Routes
+<Router
   routes={[FeatureOverviewRoute, StateManagementRoute]}
   type="ContentBased"
 />

index.d.ts

@@ -1 +1,2 @@
 export * from "./lib/alem-vm/alem-vm";
+export * from "./lib/external-declarations/big";

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

@@ -36,11 +36,11 @@ type RouterProps = {
 };
 
 /**
- * Init routes
+ * Init routes usint complex and statefull Router system.
  * @param props
  * @returns
  */
-export declare const Router: (props: RouterProps) => React.JSX.Element;
+export declare const Router: (props: RouterProps) => JSX.Element;
 
 type LinkProps = {
   to: string;
@@ -51,6 +51,16 @@ type LinkProps = {
   children?: JSX.Element | JSX.Element[] | string | number;
 };
 
+type URLRouterProps = {
+  routes: Route[];
+  /**
+   * Parameter name to store current route name. Default is "path".
+   */
+  parameterName?: string;
+};
+
+export declare const SimpleRouter: (props: URLRouterProps) => JSX.Element;
+
 /**
  * Link to access routes.
  */
@@ -140,19 +150,20 @@ export declare const useRoutes: () => {
  * @param defaultStateValue Default values to be inserted to the Component's State
  * @param defaultPropsValue Default values to be inserted to the Component's props
  */
-export declare const createContext: <S extends {}, P extends {}>(
+export declare const createContext: <S extends {}>(
   contextKey: string,
-  defaultStateValue: S,
-  defaultPropsValue: void | P,
-) => void;
+) => {
+  setDefaultData: (defaultStateValue: S) => void;
+  updateData: (updates: Partial<S>) => void;
+};
 
 /**
  * Use context. This is helpful to get a previous created context's props.
  *
  * @param contextKey Context key name
  * @returns
  */
-export declare const useContext: <D>(contextKey: string) => D | undefined;
+export declare const useContext: <D>(contextKey: string) => D;
 
 // ======= APIs =======
 
@@ -204,6 +215,17 @@ export declare const promisify: (
  */
 export declare const isDevelopment: boolean;
 
+/**
+ * Create a debounced method to obtain the data after the desired interval.
+ * @param cb Callback
+ * @param timeout Timeout. Default is 1 sec.
+ * @returns
+ */
+export declare const createDebounce: <D>(
+  cb: (data: D) => void,
+  timeout?: number,
+) => (args: any) => void;
+
 // BOS Below:
 
 // Bos
@@ -217,8 +239,10 @@ export declare var props: any;
 export declare var context: BosContext;
 
 export declare const Widget: (params: {
-  src: string;
-  props: object;
+  loading?: JSX.Element | JSX.Element[] | string | number;
+  code?: string;
+  src?: string;
+  props?: object;
 }) => React.ReactNode;
 
 export declare const Markdown: (params: {
@@ -240,6 +264,8 @@ export declare function useEffect(
   deps?: DependencyList,
 ): void;
 
+export declare function useMemo<T>(factory: () => T, deps: DependencyList): T;
+
 /**
  * `fetch` allows to fetch data from the URL. It acts like a hook. It's a wrapper around the fetch function from the browser behind the caching layer.
  *
@@ -267,7 +293,10 @@ export declare const asyncFetch: (url: string) => Promise<any>;
  *
  * Know more: https://docs.near.org/bos/api/web-methods#cache
  */
-export declare const useCache: (promise: () => Promise<any>) => any;
+export declare const useCache: (
+  promise: () => Promise<any>,
+  key?: string,
+) => any;
 
 /**
  * Storage object to store data for widgets that is persistent across refreshes. Simulates localStorage access.
@@ -318,6 +347,24 @@ export declare const clipboard: {
   writeText: (text: string) => void;
 };
 
+type Call = <R extends {}>(
+  contractName: string,
+  methodName: string,
+  args?: {},
+  gas?: string | number,
+  deposit?: string | number,
+) => void;
+
+type CallList = <R extends {}>(
+  callList: {
+    contractName: string;
+    methodName: string;
+    args?: {};
+    gas?: string | number;
+    deposit?: string | number;
+  }[],
+) => void;
+
 /**
  * Use Near object to interact with smart contracts in the NEAR blockchain.
  */
@@ -340,7 +387,7 @@ export declare const Near: {
     args?: {},
     blockId?: string,
     subscribe?: boolean,
-  ) => Promise<R>;
+  ) => R;
 
   /**
    * Call
@@ -353,13 +400,22 @@ export declare const Near: {
    * @param gas Maximum amount of gas to be used for the transaction (default 300Tg)
    * @param deposit Amount of NEAR tokens to attach to the call as deposit (in yoctoNEAR units)
    */
-  call: <R extends {}>(
-    contractName: string,
-    methodName: string,
-    args?: {},
-    gas?: string | number,
-    deposit?: string | number,
-  ) => Promise<R>;
+  call: Call | CallList | any;
+
+  /**
+   * A list of calls
+   * @param callList
+   * @returns
+   */
+  // call: <R extends {}>(
+  //   callList: {
+  //     contractName: string;
+  //     methodName: string;
+  //     args?: {};
+  //     gas?: string | number;
+  //     deposit?: string | number;
+  //   }[],
+  // ) => R[];
 
   /**
    * Queries a block from the blockchain.
@@ -402,7 +458,7 @@ export declare const Social: {
        */
       return_deleted?: boolean;
     },
-  ) => Promise<R>;
+  ) => R;
 
   /**
    * `Social.getr` is just a wrapper helper for Social.get, it appends ** to each of the path pattern.
@@ -427,7 +483,7 @@ export declare const Social: {
        */
       return_deleted?: boolean;
     },
-  ) => Promise<R>;
+  ) => R;
 
   /**
    * It calls the SocialDB's `keys` API and returns the data. While the data is fetching the returned value equals to `null`.
@@ -463,7 +519,7 @@ export declare const Social: {
     cacheOptions?: {
       ignoreCache: boolean;
     },
-  ) => Promise<R>;
+  ) => R;
 
   /**
    * Takes a `data` object and commits it to SocialDB. It works similarly to the `CommitButton` by spawning the modal window prompt
@@ -493,7 +549,7 @@ export declare const Social: {
        */
       onCancel?: () => void;
     },
-  ) => Promise<R>;
+  ) => R;
 
   /**
    * Returns the array of matched indexed values. Ordered by `blockHeight`.
@@ -530,7 +586,8 @@ export declare const Social: {
        */
       from?: 0 | "Max";
     },
-  ) => Promise<R>;
+    cacheOptions?: {},
+  ) => R;
 };
 
 /**
@@ -542,17 +599,31 @@ export declare const IpfsImageUpload: (params: {
   image: string;
 }) => React.ReactNode;
 
+/**
+ * CommitButton
+ */
+export declare const CommitButton: (params: {
+  disabled?: boolean;
+  force?: boolean;
+  className?: string;
+  data?: {};
+  onCommit?: () => void;
+  children?: JSX.Element | JSX.Element[] | string | number;
+}) => React.ReactNode;
+
 /**
  * A built-in component that enables to input files with drag and drop support. Read more about the `Files` component [here](https://www.npmjs.com/package/react-files).
  *
  * Know more: https://docs.near.org/bos/api/builtin-components#files
  */
 export declare const Files: (params: {
-  children: JSX.Element;
+  children?: JSX.Element;
   multiple?: boolean;
   accepts: string[];
   clickable?: boolean;
   className?: string;
+  minFileSize?: number;
+  style?: React.CSSProperties;
   onChange: (files: File[]) => void;
 }) => React.ReactNode;
 
@@ -595,6 +666,10 @@ export declare const InfiniteScroll: (params: {
   loadMore: (page: number) => void;
   hasMore: boolean;
   useWindow?: boolean;
+  pageStart?: number;
+  threshold?: number;
+  loader?: JSX.Element | JSX.Element[] | string | number;
+  children?: JSX.Element | JSX.Element[] | string | number;
 }) => React.ReactNode;
 
 /**

lib/alem-vm/importable/Router.tsx

@@ -37,6 +37,10 @@ const Router = (props: RouterProps) => {
       if (!route.component) {
         console.error(`Routes: Invalid component for route "${route.path}"`);
       }
+
+      if (!route.path) {
+        console.error("Routes: Invalid path:", route.path);
+      }
     });
   }, [routes]);
 
@@ -111,22 +115,12 @@ const Router = (props: RouterProps) => {
     }
   }, [routeType]);
 
-  // Default route
-  if (activeRoute === "") {
-    const Component = routes[0].component;
-    return <Component />;
-  }
-
   // Route by route path
-  const Component = routes.find(
-    (route: Route) => route.path === activeRoute,
-  )?.component;
-  if (Component) {
-    return <Component />;
-  }
-
-  // Empty
-  return <></>;
+  const Component = routes.find((route: Route) => route.path === activeRoute)
+    ?.component ||
+    routes[0].component || <></>;
+
+  return <Component />;
 };
 
 export default Router;