# als-component
`als-component` is a lightweight JavaScript library for creating reactive, server-rendered, and browser-based components. It allows you to build dynamic components that work both on the server (Node.js) and in the browser, providing seamless reactivity, lifecycle hooks, and event handling.
## Installation
Install via NPM:
```bash
npm install als-component
```
## Quick Start
### Example for Node.js (Server)
```js
const Component = require('als-component');
class HelloComponent extends Component {
constructor(props) { super(props) }
render({ name }) {
return `
```
### Example for Browser
```html
als-component Example
```
## API Reference
### `constructor(props = {}, inner)`
Initializes a new component.
- `props` *(Object)*: The initial properties of the component.
- `inner` *(String)*: The inner content of the component.
### `call()`
Renders the component and returns the HTML string.
**Example:**
```js
const html = instance.call();
console.log(html); //
Rendered content
```
### `update(props, inner)`
Updates the component with new properties and re-renders it.
**Example:**
```js
instance.update({ count: 5 });
```
### `action(event, fn)`
Creates an event action and binds it to the element.
- `event` *(String)*: The event type (e.g., 'click').
- `fn` *(Function)*: The event handler function.
- **Returns**: *(String)*: A unique action identifier.
**Example:**
```js
const clickId = instance.action('click', () => alert('Button clicked'));
```
### `on(event, fn)`
Registers a lifecycle hook.
- `event` *(String)*: The lifecycle event ('mount' or 'unmount').
- `fn` *(Function)*: The callback function.
**Example:**
```js
instance.on('mount', () => console.log('Component mounted'));
instance.on('unmount', () => console.log('Component unmounted'));
```
### `runActions()`
Binds all stored actions to the corresponding elements and triggers `mount` hooks.
## Asynchronous Rendering
The `render` method can be asynchronous. If it is an `async` function, the component handles it automatically.
**Example:**
```js
class AsyncComponent extends Component {
async render() {
const data = await fetchData();
return `
${data}
`;
}
}
const asyncInstance = new AsyncComponent();
asyncInstance.update();
```
### `async buildAsync(updateElement = true)` and `buildSync(updateElement = true)`
You can call for `buildAsync` (return promise) or `buildSync` with `updateElement` flag to update or not to update the element.
### `set elementOuter`
You can manualy set outerHTML for component's element. If element is not exists, it simply will do nothing.
## Lifecycle Hooks
### `mount`
Called when the component is added to the DOM.
### `unmount`
Called when the component is removed from the DOM.
**Example:**
```js
instance.on('mount', () => console.log('Mounted'));
instance.on('unmount', () => console.log('Unmounted'));
```
## Event Handling
Use `action()` to bind events to elements within the component.
**Example:**
```js
class ClickComponent extends Component {
render() {
return ``;
}
}
```
## Nested Components
You can nest components within each other. The parent component can include a child component using `call()`.
**Example:**
```js
class ChildComponent extends Component {
render() {
return `Child Component`;
}
}
class ParentComponent extends Component {
render() {
return `
Parent: ${new ChildComponent().call()}
`;
}
}
const parentInstance = new ParentComponent();
parentInstance.update();
```
## Memory Management
The `als-component` library uses `WeakMap` to store component instances, ensuring that they are garbage collected when removed from the DOM.
**Example:**
```js
const instance = new Component();
document.body.appendChild(instance.element);
instance.update();
instance.element.remove();
instance.runActions();
```
The component is removed from `WeakMap` automatically when it is no longer referenced.
## Optimization Tips
- Use `update()` sparingly to avoid excessive DOM manipulations.
- Prefer using asynchronous `render` for components that require data fetching.
- Use unique keys for components to avoid collisions.
## Error Handling
When using asynchronous methods or complex nested components, ensure you handle potential errors gracefully.
**Example:**
```js
try {
await instance.update();
} catch (error) {
console.error('Error updating component:', error);
}
```
## Example
```html
Users
```