Home

Welcome to the comfey wiki!

Comfey is a tiny data-binding library inspired by React hook useState. Comfey helps you manage states in your vanilla JavaScript project. States helps you keep your JavaScript code uncluttered and manageable.

Traditionally or even today, if we are developing features using vanilla Javascript, we follow an event-based, imperative approach. Typical flow follows following pattern:

1. Listen to an event
2. Do action (May have some calculation/variable changes etc)
3. Update DOM

OnDocReady: hideMenu();
OnBurgerClick: showMenu();
OnMenuItemClick:
  hideRootMenu();
  showSubMenu();
  hideLanguageSwitcher();
  appendMenuTitle(current);
  hideFooterMenu();
OnBackClick:
  hideMenuTitle();
  showLanguageSwitcher();
  showRootMenu();
  showFooterMenu();
OnCloseClick: hideMenu();

The advantage of the above code is, it is simple to follow along. But as the complexity increase, it becomes more and more cluttered.

The same application can be much more intuitive and clean with states. In a Comfey application, a typical flow will look like this:

1. Initialize states
2. Define actions (Click handlers etc) that will be responsible for state changes.
3. DOM updates itself for every state change.

Example

// Initialize state
const [, setCurrentNavPage] = comfey.useState('currentNavPage', '');

for (const link of linkWithSubMenu) {
    link.addEventListener('click', function menuItemClick() {
      setCurrentNavPage(link.textContent);
    });
}
backLink.addEventListener('click', function backLinkClick(e) {
    setCurrentNavPage('');
  });

That is all the javaScript needed, DOM manipulation is abstracted in Comfey. All you have to do is add some HTML data attributes as required.

<div data-bind="currentNavPage"></div>
<div class="language-switcher" data-bind-hidden="currentNavPage">

Read more about Templating

Table of Content

• Features
• Installation
• Initialize component
• Initialize state
• Watch a state
• Handling multiple apps
• Templating
  • Bind state value to an element
  • Visibility
  • Class
  • Bind attributes
• Examples
  • Counter Example
  • Counter - CodeSandbox
  • Comfey - Pokemon buddy game
  • Multi level navigation