StateSurge is a lightweight JavaScript library for managing state and rendering views in web applications.
Imagine you are building a web application that needs to manage a lot of state changes. You have several components that need to interact with each other and share data. Without a solid framework, this can quickly become messy and difficult to maintain.
This is where the StateSurgel library comes in. It is a simple yet powerful library that helps you manage state changes in your web application. You can use it to define your application's state, and update it when necessary. The library also provides an easy way to define and bind actions to your state, making it easy to handle user interactions.
If your web application has several forms that need to be filled out, you can use StateSurgel to manage the data entered by the user. You can define the state for each form, and update it when the user enters new data. You can also bind actions to the form state to handle form submission or validation.
If your web application requires users to log in, you can use StateSurgel to manage the user's authentication status. You can define the state for the user authentication, and update it when the user logs in or out. You can also bind actions to the authentication state to handle user authentication requests.
If your web application has complex data visualization, you can use StateSurgel to manage the data displayed to the user. You can define the state for the data visualization, and update it when the user interacts with the visualization. You can also bind actions to the visualization state to handle user interactions, such as filtering or sorting.
Overall, the StateSurgel library is a powerful tool for managing state changes in your web application. It helps you keep your code organized and maintainable, and makes it easy to handle complex user interactions.
You can install StateSurge via npm:
npm install state-surgeAlternatively, you can include the library in your project via a script tag:
<script src="https://unpkg.com/state-surge"></script><body>
<h1>Count: {{message}}</h1>
<p>Count: {{count}}</p>
<button id="increment-btn">Increment</button>
</body>To create a new instance of StateSurgel, simply pass in a query selector or a DOM element:
const app = new StateSurge("body *");To set the state of the application, call the setState method and pass in an object containing the new state:
app.setState({
count: 1,
message: "Hello, World!",
});To get the current state of the application, call the getState method:
const currentState = app.getState();StateSurgel allows for easy binding of computed properties. To bind a computed property, call the bindComputed method and pass in an object containing the computed properties:
app.bindComputed({
doubleCount: () => app.getState().count * 2,
});Once bound, the computed properties can be accessed like any other property:
console.log(app.doubleCount); // Logs the current value of the computed propertyStateSurgel also allows for easy binding of actions. To bind an action, call the bindActions method and pass in an object containing the actions:
app.bindActions({
incrementCount: (state, amount) => {
state.count += amount;
},
});Once bound, the actions can be called like any other method:
app.incrementCount(1); // Increments the count property by 1
// Increments the count property by 1 On Button Click
document.querySelector("#increment-btn").addEventListener("click", () => {
app.incrementCount(1);
});StateSurgel allows for the use of middleware functions that can modify the state before it is updated. To add a middleware function, call the use method and pass in a function that takes the current state and the new state as arguments and returns the modified state:
app.use((currentState, newState) => {
// Modify the state here
return newState;
});To destroy the state and clean up any references, call the destroy method:
app.destroy();Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.