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

jFactory

Why? Imagine a feature that uses views, css, event listeners, requests and asynchronous processes with promise chains. jFactory groups all this together into a component object that provides the methods $install(), $enable(), $disable() and $uninstall(). Now, you can safely stop, unload or restart the component, making your asynchronous application easier to control and clean.

• Playground
• Installation / Starter Kit / Overriding
• Documentation / Traits / Classes

Abstract

jFactory components are able to:

• operate like a service (install, enable, disable, uninstall)
• automatically switch off subscribed css, dom, event listeners, observers, timers, requests, promise chains and views.
• automatically prevent expired asynchronous calls (promise subtrees, event handlers...)
• automatically ensure that the promise chains are completed at service state change (awaitable)
• keep track in DevTools of all running subscriptions (listeners, timers, requests, promises, dom, css...)
• log messages in console with controllable loggers
• improve the Promise chains (Awaitable/Expirable promise tree)
• easily create/load CSS & DOM and clone from <template>

Supported APIs

jFactory supports Vue.js, React, and HTML5 WebComponents allowing components to automatically uninstall and reinstall their views. See Playground.

Overview

In a nutshell, jFactory provides methods to register listeners, views, dom, css, requests and asynchronous tasks that will be automatically stopped (including subpromise trees) and removed at opposite service state change (install/uninstall, enable/disable).

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

let component = jFactory("myComponent", {

  onInstall() {
    // create, insert and register a DOM container
    // (jFactory can also use templates, vue and react, load assets...)
    this.$dom("#containerDiv", '<div>', "body")
      .append(
        '<button id="bt-switch">switch</button>' +
        '<button id="bt-close">close</button>');

    // load a CSS asynchronously
    this.$cssFetch("myCss", "asset.css");

    this.$on("click", "#bt-switch", () => this.mySwitchHandler());
    this.$on("click", "#bt-close", () => this.myCloseHandler());
  },

  onEnable() {
    this.$interval("myUpdater", 1000, () =>
      this.$fetchJSON("myRequest", "asset.json")
        .then(data => this.$log("updated", data))
    );
  },

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

  myCloseHandler() {
    // stop and remove:
    // dom container, css, listeners, intervals, requests, promises...
    this.$uninstall();
  }
})

// install and enable the component
await component.$install(true);

Playground / Starter Kit

Learning

jFactory is an easy-to-learn library. Unlike a framework, it does not impose an architecture: you are free to use only what you need.

All the methods are listed here.
See also the Playground and the Starter Kit

Patterns

• Registry: all component subscriptions (listeners, promises, timers, fetch, dom...) are explorable in a registry, allowing quick visual inspections in DevTools.

• Tasks: asynchronous processes can be registered as expirable tasks that block the current Service State Change, guaranteeing that everything is resolved before completing it, including all subpromises.

• Remove Phase: jFactory will automatically stop and remove the subscriptions (listeners, promises, timers, fetch, dom...) registered during an opposite state change (install/uninstall, enable/disable)

• Promise Chains: jFactory uses extended native Promises that makes the whole Chain Awaitable, Completable, Cancelable and Expirable.

• Traits: Components are Objects created from Classes dynamically extended by JFactoryTraits.

• Debug: jFactory is designed for asynchronous component-based application development, using contextual loggers and subloggers, filterable source-mapped stack traces, identifiers, loggable extended errors, explorable promise chains, ...

Library

jFactory is designed with powerful ES6 Classes:

• Extended Promise
  • Expirable, awaitable, explorable Promise Chain
  • Status properties
• Composite Functions
  • Wrappable / Conditional / Expirable Functions
• Awaitable asynchronous observers
• Traits, for dynamic mixins with configurable parser
• Loggers, with identified and formatted console logs and inherited switches
• Errors, with explorable data
• Stack traces, filterable and source mapped

Philosophy

• Does not modify JavaScript prototypes
• Injected methods and properties are prefixed to avoid conflicts
• Most names are prefixed by affiliation for easier code completion
• All registrations must be named, to reinforce debugging
• Most of the library is overridable
• Designed for debugging and inspections

Modular JavaScript

• Written in ES6+ optimized for Tree Shaking
• Highly configurable, overridable and dynamically patchable
• Interoperable. Framework-agnostic. No transpiler.
• Provides a "Developer Build" for additional validations and debugging properties

How to Contribute

jFactory is an Open Source project. Your comments, bug reports and code proposals are always welcome. This project is new and you can help a lot by spreading the word. Also consider adding a github star, as it seems very important for its visibility at this stage. Thank you for your contributions!