Components and modules

In development, leveraging custom or pre-built components and modules enhances convenience and functionality.
All components should be placed in the "components" folder, and modules should be placed in the "modules" folder.
If a component or module uses events, these events should be enabled in the "config.js" configuration file, e.g., "click: true".

Components

• Components are designed to interact directly with the UI.
  They use attributes like "data-click" to handle events, making them a vital part of application development.
• Components are ideal for applications that involve frequent interactions with the UI through events.
• Components can be triggered automatically via events in the DOM tree or explicitly invoked from anywhere in the code.

Modules

• Modules, on the other hand, are not tied directly to the UI.
  They are better suited for performing functional tasks, processing data, or adding specific logic to DOM elements when needed.
• Events for specific DOM elements can be created within a module using methods like evt.add().
• Modules are used when the code performs functional computations and returns results or processes arguments such as DOM elements, applying additional logic to the interface without relying on direct interaction with the UI.
• Modules are executed only when explicitly called.
  If the module includes events that should be available on page load, or if there is a need to immediately create a global module, it must be initialized in the configuration file "config.js" or called in the main application file "app.js".
  The initialized module will be globally accessible throughout the code by its name, e.g., "myLibrary()".
• Modules allow embedding third-party libraries and interacting with them by calling the module itself, rather than directly using the library.

Choosing between components and modules

• For applications with significant user interaction through events, especially when utilizing attributes, components are generally recommended.
• For tasks that involve functional logic without custom events, or when it is necessary to initially hook up several different custom events, modules are often more suitable, particularly when working with third-party libraries.
• However, the decision depends on the specific requirements of the project and the preferences of the developer.

Shared characteristics

• They can be designed as universal solutions capable of handling a wide range of tasks with multiple parameters.
• Alternatively, they can serve as specialized components within systems of any complexity.
• Both types can be executed from any part of the codebase, including being called by other components or modules.

export default (e) => {
   e.it.attr.toggle('inert');
}

export default (e, isActive = false) => {
   e.it.cls.toggle('active', isActive);
}

export default (e, data) => {
   e.it.cls[data.myType](data.myClass);
}

export default async (e) => {
   (await module.myName()).changeElement(e.it);
}

// "myName" is the name of the component's script in the corresponding folder.
component.myName(arg_1, arg_2);
component['myName'](arg_1, arg_2);

// Waiting for the component to be executed.
await component.myName(arg_1, arg_2);

// If the component returns an object or a function.
(await component.myName(arg_1, arg_2))();
(await component.myName())(arg_1, arg_2);
(await component.myName()).myFunc(arg_1, arg_2);

// Waiting for a function from the component to execute.
await (await component.myName(arg_1, arg_2))();

export default (arg_1, arg_2) => {
   return arg_1 + arg_2;
}

export default () => {
   return (arg_1, arg_2) => arg_1 + arg_2;
}

export default {
   add(arg_1) {
      arg_1.myElem.cls.add(arg_1.myClass);
   },
   remove(arg_1) {
      arg_1.myElem.cls.remove(arg_1.myClass);
   }
}

export default async (arg_1, arg_2) => {
   return (await module.myName()).getSum(arg_1, arg_2);
}

// "myName" is the name of the module's script in the corresponding folder.
module.myName(arg_1, arg_2);
module['myName'](arg_1, arg_2);

// Waiting for the module to be executed.
await module.myName(arg_1, arg_2);

// If the module returns an object or a function.
(await module.myName(arg_1, arg_2))();
(await module.myName())(arg_1, arg_2);
(await module.myName()).myFunc(arg_1, arg_2);

// Waiting for a function from the module to execute.
await (await module.myName(arg_1, arg_2))();

// Using an external library.
const myLibrary = await module.myLibrary();
myLibrary.add(arg_1);
myLibrary.remove(arg_1);