/jfactory

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

Primary LanguageJavaScriptOtherNOASSERTION

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.

npm version GitHub version Tests

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();