added debounce to change file detector

lib/alem-vm/importable/modules/readme.md

@@ -1,6 +1,71 @@
 ## Modules
 
-Thes files inside this folder are going to be injected to the global state and components using them will get only their references, so, saving
-size for the final bundle file.
+The files inside this folder are going to be injected only once and their references will be used throughout the app, thus reducing the final size of the final file. To add a file to be compiled as module, just add it to the `src/modules` folder.
 
 WARNING: If you want to use `props` inside the modules, you must pass it as a parameter. Modules live at the very top layer of Além and can't automatically access the props where it's being used.
+
+## When should I put files here?
+
+You should place files here when they are repeatedly imported into the project. Remembering again that they will not have access to the properties where they are being used automatically. Therefore, you must pass the necessary properties per parameter.
+
+Example:
+
+**Module files**
+
+```ts
+// src/modules/routesProps.ts Module
+export const routes = {
+  HOME: "home";
+  PROFILE: "profile";
+  EDIT_PROFILE: "profile/edit"
+}
+
+// "parentProps" - props passed by the caller
+export const logParams = (parentProps: any) => {
+  console.log(parentProps);
+}
+```
+
+```ts
+// src/modules/Banner.tsx Module
+import { routes } from "./modules/parentProps";
+
+const bannerText = "This is my banner!";
+
+type BannerProps = { label: string };
+
+const Banner = ({ label }: BannerProps) => {
+  const availableRoutes = Object.keys(routes).join(", ");
+
+  return (
+    <>
+      <h3>{bannerText}</h3>
+      <p>{label}</p>
+      <p>Available routes: {availableRoutes}</p>
+    </>
+  );
+};
+export default Banner;
+```
+
+**Using module**
+
+```tsx
+// src/MyStatefulComponent.tsx
+import { useEffect, props } from "alem";
+import { logParams } from "./modules/parentProps";
+import Banner from "./modules/Banner";
+
+const MyStatefulComponent = () => {
+  //...
+  useEffect(() => {
+    logParams(props);
+  }, []);
+
+  return (
+    <>
+      <Banner label="just a simple banner" />
+    </>
+  );
+};
+```

lib/dev.js

@@ -47,12 +47,7 @@ async function dev(opts) {
     process.exit(1);
   });
 
-  watchFolders(["./src"], async (path) => {
-    loading = log.loading(`Change detected in ${path}, rebuilding...`);
-
-    // Atualiza o arquivo no cache para ser acessado posteriormente no re-build()
-    filesContentCache.updateFileContent(path);
-
+  const onChangeDetectHandler = async () => {
     await build(opts).catch((err) => {
       loading.error();
       log.error(err);
@@ -64,6 +59,22 @@ async function dev(opts) {
       io.emit("fileChange", devJson);
     }
     // loading.finish();
+  };
+
+  let debounceInterval = null;
+  watchFolders(["./src"], async (path) => {
+    log.info(`Change detected in ${path}, rebuilding...`);
+
+    // Atualiza o arquivo no cache para ser acessado posteriormente no re-build()
+    filesContentCache.updateFileContent(path);
+
+    if (debounceInterval) {
+      clearInterval(debounceInterval);
+    }
+    debounceInterval = setInterval(() => {
+      clearInterval(debounceInterval);
+      onChangeDetectHandler();
+    }, 200);
   });
 
   setTimeout(() => {

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