A lean, minimal React-like framework for client-side applications.
npm install @monygroupcorp/microactA lean, minimal React-like framework for building fast and efficient client-side web applications. microact focuses on providing core component functionality, state management, and a flexible rendering system without the heavy overhead of larger frameworks.
* Component-Based: Build UIs using familiar class-based components with lifecycle methods.
* Reactive State: Simple this.state and this.setState for managing component-local state.
* Granular DOM Updates: Efficient DOM manipulation to minimize re-renders and optimize performance.
* Event Handling: Declarative event binding for clean and maintainable UI logic.
* Context API: Built-in context system for prop drilling avoidance and global state propagation.
* Pluggable Stores: Designed to integrate seamlessly with external state management solutions.
* Small Footprint: Optimized for client-side execution in statically hosted environments.
Install microact using npm:
``bash`
npm install microact
Create a class that extends Component and implements a render() method:
`javascript
// myComponent.js
import { Component } from 'microact';
class MyComponent extends Component {
constructor(element) {
super(element);
this.state = {
count: 0,
message: 'Hello, microact!'
};
}
// Lifecycle method: Called after component is mounted to the DOM
onMount() {
console.log('MyComponent mounted!');
}
// Define DOM events
events() {
return {
'click button': 'incrementCount',
};
}
incrementCount() {
this.setState({ count: this.state.count + 1 });
}
// Render method returns an HTML string
render() {
return
Count: ${this.state.count}
;
}
}export default MyComponent;
`$3
In your main application file, import and mount your component to a DOM element:
`javascript
// index.js
import MyComponent from './myComponent.js';const appRoot = document.getElementById('app-root');
const myComponent = new MyComponent(appRoot);
myComponent.mount(appRoot);
`$3
Your HTML file should have a root element for your application:
`html
Microact App
`API Reference
$3
*
constructor(rootElement): Initializes the component.
* setState(newState): Updates component state and triggers a re-render if shouldUpdate returns true.
* mount(element): Mounts the component to the given DOM element.
* unmount(): Removes the component from the DOM and cleans up resources.
* render(): (Must be implemented by subclasses) Returns the HTML string representation of the component.
* template(): Optional. If render() is not overridden, it defaults to calling this.template().
* onMount(): Lifecycle hook called after mounting.
* onUnmount(): Lifecycle hook called before unmounting.
* onStateUpdate(oldState, newState): Lifecycle hook called after state update and before rendering.
* events(): Returns an object mapping event selectors to handler methods (e.g., { 'click button': 'handleClick' }).
* registerCleanup(cleanupFn): Registers a function to be called on unmount.
* setTimeout(callback, delay): Wrapper for setTimeout with automatic cleanup.
* setInterval(callback, delay): Wrapper for setInterval with automatic cleanup.
* subscribe(eventName, callback): Subscribes to an EventBus event with automatic cleanup.
* subscribeOnce(eventName, callback): Subscribes to an EventBus event once with automatic cleanup.
* useStore(store, selector, onUpdate): Hook to subscribe to external store state changes.
* provideContext(key, value): Provides a context value to child components.
* getContext(key): Retrieves a context value from the component tree.$3
A simple global event bus for inter-component communication. Access via
import { eventBus } from 'microact';*
eventBus.on(eventName, callback): Subscribe to an event.
* eventBus.off(eventName, callback): Unsubscribe from an event.
* eventBus.emit(eventName, data): Emit an event.
* eventBus.once(eventName, callback): Subscribe to an event once.Development
To build the project:
`bash
npm install
npm run build
`The build output will be in the
dist/` directory.Contributions are welcome! Please open an issue or submit a pull request.
This project is licensed under the MIT License.