Package Exports

augmentor

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (augmentor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

augmentor

WebReflection status

^{Social Media Photo by Lucrezia Carnelos on Unsplash}

React like hooks for the masses.

Available Hooks

Basic Hooks
- useState
- useEffect
- useContext, which can be defined via createContext(value)
Additional Hooks
Third parts exported utilities
- dropEffect(augmentedCallback) executes any cleanup left from last useEffect(...) invocation

example

You can test this example directly on Code Pen.

import {augmentor, useState} from 'augmentor';

// augment any function once
const a = augmentor(test);
a();

// ... or many times ...
const [b, c] = [test, test].map(augmentor);
b();
c();

function test() {

  const [count, setCount] = useState(0);

  // log current count value
  console.log(count);

  // will invoke this augmented function each second
  setTimeout(() => setCount(count + 1), 1000);
}

F.A.Q.

Can I pass a context to an augmented function?

While this library provides a way to use a context, it's somehow a footgun to enable multiple contexts for a single augmented stack, so by default you cannot use augmented.call(ctx) or augmented.apply(ctx, []), 'cause no context whatsoever is passed along.

If by any chance you've read, and understood, the related blog post, you'd realize a single augmented function is indeed not good for prototypes or shared methods, as one context could interfere with any other previous context that used that method before.

// WRONG: this is a very bad idea, as any MyComp instance
//        could potentially interfere with other instances
MyComp.prototype.doThings = augmentor(doThings);

// GOOD: this is how you'd do it 👍
class MyComp {
  constructor() {
    const {doThings} = this;
    // augment a bound method/function per each instance
    this.doThings = augmentor(doThings.bind(this));
  }
  doThings() {
    // where actually you do hooky-things
  }
}

That being said, if you really want to share a context within a single augmented function, meaning that you understand, and know, what you are doing, you can use the contextual utility provided by this library.

import {contextual} from 'augmentor';

const textInjector = contextual(function (text) {
  this.textContent = text;
});

textInjector.call(div, 'hello');
textInjector.call(p, 'there!');

Please bear in mind that contextualized functions effects will also refer to the previous context, not necessarily the current one, so that you see it's very easy to create troubles sharing, accepting, or passing, multiple contexts to the same augmented stack.

As summary, augmentor(method.bind(context)) is the best way to use a context within an augmented function, but contextual can cover other weird edge cases.