📄️ Component
Components are the most basic building block of an application. They are composed of templates, logic, and styles, and are used to split the UI into small, reusable pieces of code.
📄️ Component States
A state is data that describes the current state of a component. Updating a state will trigger the change detection of the component and update the bindings. In MonsterJS, there are two types of state: component state (managed using the useState hook), and shared state (created by createSharedState function).
📄️ Event Emitter
MonsterJS provides an event emitter that can be shared among different components. This emitter is used to notify other components when a specific event is triggered.
📄️ Change Detection
Change detection is the process of synchronizing the data between a component's logic and view. It is triggered when a value of a state is updated or the detectChanges function is manually called.
📄️ Data Binding
Data binding is a technique that synchronizes the data between a component's logic and its view. This means that when data changes in the logic, the view is updated, and when the user changes some values in the view, the data in the logic is updated accordingly.
📄️ Event Handling
Event handling is a directive that allows a component to respond to user actions on the UI, such as button clicks, text inputs, dragging elements, and other actions. It uses a directive with the namespace of on or on-prevent to bind a function to an element as an event listener.
📄️ Observed Attributes
Observed attributes are values passed down from a parent component to a child component as an element attribute, and their changes are observed by the child component. This feature uses the observed attributes implementation of web components. Similar to web components, it does not accept objects and arrays, and only accepts string values. However, the MonsterJS implementation is more advanced, as it can convert the value into a number or boolean.
📄️ Props
Component props enables developers to pass any type of data from a parent component to child components. It is more advanced than observed attributes, since observed attributes can only accept string, number, or boolean values.
📄️ Output Function
The output function allows us to expose a function from the component, which can then be triggered from the parent component using callOutputFn.
📄️ List Rendering
The list rendering directive allows developers to render a list of elements based on a given array of data.
📄️ Conditional Rendering
Conditional rendering is used to conditionally render an element in the DOM. It uses the v:if directive to remove an element from the DOM if the value is falsy, and append the element if the value is truthy.
📄️ Lifecycle Hooks
Lifecycle hooks are functions that let you run a block of code when your component or directive triggers a lifecycle event.
📄️ Directives
In MonsterJS, directives allow you to modify the appearance or add additional behavior to an element. Directives are used to attach special behavior to elements in the DOM, such as manipulating their attributes or registering event listeners. They can be used to make elements dynamic, reactive, or conditional based on certain conditions or state changes.
📄️ Custom Directives
Custom directives are functions that manipulate elements in a MonsterJS application. They can be used to add behavior or modify the appearance of an element.
📄️ Services
Services are injectable classes that allow us to perform reusable logic. This approach can help keep our components clean and easy to maintain. It is recommended that all HTTP requests and business logic be performed inside a service.
📄️ Dependency Injection
Dependency Injection is a design pattern that enables a class to be injected with its dependencies instead of creating them inside the class. This pattern is used to promote loose coupling between classes, which can lead to more maintainable and testable code.