Bind

Bind is a minimalistic, state-driven UI framework designed for developers who need a reactive web component model without the overhead of larger frameworks. With features such as efficient event delegation, and a centralized state store, Bind bridges the gap between simplicity and functionality, making it ideal for single-page applications and complex web components alike.

Features

• Centralized State Management: Maintain a single source of truth with a well-structured centralized state store.
• Reactive Components: Components react automatically to state changes without manual intervention.
• Efficient Event Delegation: Utilize event delegation techniques to manage events efficiently without attaching individual event listeners to every element.
• Declarative UI: Easily create web components with the html utility function, ensuring a clean and descriptive UI design.
• Easy State Binding: Use the bind function to connect components to specific parts of your state, allowing them to automatically react to changes in that state.
• Batched State Updates: Process multiple state updates in batches, optimizing rendering and reducing unnecessary component re-renders.
• DOM Rendering & Update: The render method allows seamless DOM rendering, and components auto-update in response to state changes.
• Minimalistic & Lightweight: Built with performance and simplicity in mind, Bind adds minimal overhead to projects.
• Mutation Observers: Keep track of DOM changes efficiently and clean up resources when elements are removed.
• Event Handlers Cleanup: Automatically manage and clean up event handlers, preventing memory leaks and ensuring optimal performance.

Installation

Using npm:

1npm install @sswahn/bind  

Documentation

Importing Bind

To get started, first import the necessary functions from bind.

1import {createStore, render, bind, html} from '@sswahn/bind'

Initializing State

Set up your application's centralized state store using the createStore function.

1createStore({
2  count: 0
3})

Accessing State

In any bound component, you can access the state through the context parameter. For instance, to get the value of count:

1const currentCount = context.count

Modifying State

To introduce changes to your state, make use of the dispatch function available in bound components. This function expects an action object with a type and payload.

1dispatch({ type: 'count', payload: 1 })

Binding Components To State

Use the bind function to create a relationship between your component and a specific state property. When the specified state property changes, your component will automatically update.

1const BoundComponent = bind('count', MyComponent)

Render Components

To attach your application (or component) to the DOM, use the render function. This function expects the component and a DOM root element as its arguments.

1render(component(), document.getElementBy('root'))

Building HTML Elements

Use the html utility function to create and return DOM elements. It supports event delegation and can be nested to create complex structures.

· type: The type of DOM element to create (e.g., "div", "span").
· attributes: An object of attributes to apply to the DOM element.
· children: An array of child nodes or text to append to the created element.

1const myDiv = html('div', { class: 'my-class', textContent: 'Hello!' }, [
2  html('span', {}, ['Child span'])
3])

Example

This example demonstrates how to build a simple counter application using bind. We'll create a centralized state for our counter, bind various components to this state, and show how state changes can lead to UI updates.

Setting Up the Main App (index.js)

Here, we initialize the store and render our main Counter component to the DOM.

1import { createStore, render } from '@sswahn/bind'
2import Counter from './Counter'
3
4createStore({ counter: 0 })
5render(Counter(), document.getElementById('root'))

Building the Counter Component (Counter.js)

The main component, Counter, composes a Button and a Display to provide a user interface for our counter.

1import { html } from '@sswahn/bind'
2import Button from './Button'
3import Display from './Display'
4
5const Counter = () => {
6  const attributes = {
7    id: 'counter',
8    class: 'section'
9  }
10  const children = [
11    Button()
12    Display()
13  ]
14  return html('div', attributes, children)
15}
16
17export default Counter

Creating the Button Component (Button.js)

The Button component is responsible for incrementing the counter when clicked.

1import { html, bind } from '@sswahn/bind'
2
3const Button = ({ context, dispatch }) => {
4  const increment = event => {
5    dispatch({
6      type: 'counter',
7      payload: context.counter + 1
8    })
9  }
10  return html('button', {
11    onClick: increment,
12    textContent: '+'
13  })
14}
15
16export default bind('counter', Button)

Creating the Display Component (Display.js)

The Display component simply shows the current value of our counter.

1import { html, bind } from '@sswahn/bind'
2
3const Display = ({ context }) => {
4  return html('span', {
5    textContent: context.counter
6  })
7}
8
9export default bind('counter', Display)

License

Bind is MIT Licensed