diff --git a/lib/alem-vm/importable/modules/readme.md b/lib/alem-vm/importable/modules/readme.md index f8cb50c..c574518 100644 --- a/lib/alem-vm/importable/modules/readme.md +++ b/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 ( + <> +

{bannerText}

+

{label}

+

Available routes: {availableRoutes}

+ + ); +}; +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 ( + <> + + + ); +}; +``` diff --git a/lib/dev.js b/lib/dev.js index f359a70..5f5b9a2 100644 --- a/lib/dev.js +++ b/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(() => { diff --git a/package-lock.json b/package-lock.json index 649acf9..0e9c4fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "alem", - "version": "1.0.0-beta.23", + "version": "1.0.0-beta.32", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "alem", - "version": "1.0.0-beta.23", + "version": "1.0.0-beta.32", "license": "MIT", "dependencies": { "@babel/core": "^7.24.3", diff --git a/package.json b/package.json index a12e64b..e8e216f 100644 --- a/package.json +++ b/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",