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.
Install via NPM:
npm install als-componentconst Component = require('als-component');
class HelloComponent extends Component {
constructor(props) { super(props) }
render({ name }) {
return `<div>Hello, ${name}!</div>`;
}
}
const instance = new HelloComponent({ name: 'World' });
console.log(instance.call()); // Outputs: <div component="HelloComponent">Hello, World!</div><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>als-component Example</title>
<script src="/node_modules/als-component/component.js"></script>
<!-- Or minified version -->
<script src="/node_modules/als-component/component.min.js"></script>
</head>
<body>
<div component="App"></div>
<script>
class App extends Component {
constructor(props) { super(props) }
render({ count = 0 }) {
return `
<div>
<button click="${this.action('click', () => this.update({ count: count - 1 }))}">-</button>
<span>${count}</span>
<button click="${this.action('click', () => this.update({ count: count + 1 }))}">+</button>
</div>
`;
}
}
const app = new App({ count: 0 });
app.update();
</script>
</body>
</html>Initializes a new component.
-
props(Object): The initial properties of the component. -
inner(String): The inner content of the component.
Renders the component and returns the HTML string.
Example:
const html = instance.call();
console.log(html); // <div component="ComponentName">Rendered content</div>Updates the component with new properties and re-renders it.
Example:
instance.update({ count: 5 });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:
const clickId = instance.action('click', () => alert('Button clicked'));Registers a lifecycle hook.
-
event(String): The lifecycle event ('mount' or 'unmount'). -
fn(Function): The callback function.
Example:
instance.on('mount', () => console.log('Component mounted'));
instance.on('unmount', () => console.log('Component unmounted'));Binds all stored actions to the corresponding elements and triggers mount hooks.
The render method can be asynchronous. If it is an async function, the component handles it automatically.
Example:
class AsyncComponent extends Component {
async render() {
const data = await fetchData();
return `<div>${data}</div>`;
}
}
const asyncInstance = new AsyncComponent();
asyncInstance.update();You can call for buildAsync (return promise) or buildSync with updateElement flag to update or not to update the element.
You can manualy set outerHTML for component's element. If element is not exists, it simply will do nothing.
Called when the component is added to the DOM.
Called when the component is removed from the DOM.
Example:
instance.on('mount', () => console.log('Mounted'));
instance.on('unmount', () => console.log('Unmounted'));Use action() to bind events to elements within the component.
Example:
class ClickComponent extends Component {
render() {
return `<button click="${this.action('click', () => alert('Button clicked'))}">Click Me</button>`;
}
}You can nest components within each other. The parent component can include a child component using call().
Example:
class ChildComponent extends Component {
render() {
return `<span>Child Component</span>`;
}
}
class ParentComponent extends Component {
render() {
return `<div>Parent: ${new ChildComponent().call()}</div>`;
}
}
const parentInstance = new ParentComponent();
parentInstance.update();The als-component library uses WeakMap to store component instances, ensuring that they are garbage collected when removed from the DOM.
Example:
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.
- Use
update()sparingly to avoid excessive DOM manipulations. - Prefer using asynchronous
renderfor components that require data fetching. - Use unique keys for components to avoid collisions.
When using asynchronous methods or complex nested components, ensure you handle potential errors gracefully.
Example:
try {
await instance.update();
} catch (error) {
console.error('Error updating component:', error);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/component.js"></script>
<title>Users</title>
</head>
<body>
<div component="Users"></div>
</body>
<script>
class User extends Component {
constructor(props) { super(props) }
remove() {
const {user,usersComponent} = this.props
// const usersComponent = this.Component.components.Users // Another way to get component
usersComponent.update({users:usersComponent.props.users.filter(({id}) => id !== user.id)})
}
render({user}) {
const {id,email,age,gender,username,firstName} = user
return /*html*/`<div>
${firstName}
<button click="${this.action('click',() => this.remove())}">delete</button>
</div>`
}
}
class Users extends Component {
constructor(props={},inner) {
super(props,inner)
}
async render({users}) {
if(users === undefined) {
fetch('https://dummyjson.com/users')
.then(res => res.json())
.then(data => {
this.update({users:data.users})
});
return /*html*/`<div>Fething users</div>`
}
return /*html*/`<div>
${users.map(user => new User({user,key:user.id,usersComponent:this}).call()).join('')}
</div>`
}
}
const usersComponent = new Users()
usersComponent.update()
</script>
</html>