Easily modularize your application into cancelable components.
Everything they initialize can be monitored, stopped and removed automatically,
including views, nested promises, requests, listeners, DOM and CSS.

jFactory

• Component lifecycles: Provides asynchronous install, enable, disable, and uninstall functionality.
• Automatically subscribes in a registry when adding CSS, DOM, event listeners, observers, timers, requests, nested promise trees...
• Automatically await pending subscriptions when calling await install and await enable, everything is parallelized into tasks.
• Automatically switch off subscriptions at the opposite phase of the component lifecycle : uninstall reverts install, disable reverts enable.
• Lifecycles events: Listen to phase changes. Prepare or clean up asynchronously what you need before automation.
• Abortable and Expirable: Tasks, nested promise trees and requests can be canceled.
• Easy to learn and use: Not a framework, ES6 highly modular, use what you need. Create your own plugins to automatically register and clean up other side effects.
• DevTools: Component-level logging, name-prefixed logs, filters, sub loggers with inheritance.
• Debugging: Everything is named. Keep track of the subscriptions (listeners, timers, requests, promises, dom, css...).
• ...and much more, take a closer look.

Installation	Documentation
npm add jfactory	Traits / Classes

Overview

Components can be extended from any Class, or more simply by using an Object literal through the shortcut jFactory():

let component = jFactory("myComponent", {

  async onInstall() {
    this.$domFetch("myDom", "asset.html", "body");
    this.$cssFetch("myCss", "asset.css");
  },

 async onEnable() {
    this.$interval("myUpdater", 1000, () =>
      this.$fetchJSON("myRequest", "asset.json")
        .then(data => this.$log("updated", data))
    );
    this.$on("click", "#bt-switch", () => this.mySwitchHandler());
    this.$on("click", "#bt-close", () => this.myCloseHandler());
  },

  async mySwitchHandler() {
    await (this.$.states.enabled ? this.$disable() : this.$enable());
    this.$log(this.$.states.enabled);
  },

  async myCloseHandler() {
   // Called by the click event on #bt-close
   // Everything in the component registery is automatically stoped and removed:
   // (myDom, myCss, myUpdater, myRequest, DOM events)
   // Residual callbacks not manually stopped from 
   // the onDisable() and onUninstall() handlers will be ignored.    
   await this.$uninstall();
  }

})

await component.$install();
await component.$enable();