This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

Rehacked

Rehacked lets you mess with React's virtual dom. Rehacked is evil*.

Rehacked let's you modify of react.js rendered interfaces on the fly. Although initially designed to enable A/B testing for HipChat’s web client through services like Optimizely, rehacked can be used to allow any external library to modify React rendered components without causing invariants.

*As always, prefer adding your own API for extending your apps where it makes sense. At Atlassian we use Rehacked when a library need full control of our UI, like for experimenting on (allthethings).

How it works

When you call before, after, or on, rehacked will modify the output of your component's render method. We let your old render method create it's virtual dom representation, but instead of passing control back to react we inspect it.

The CSS selector passed to rehacked is parsed into a series of javascript objects, and they're used to search the virtual DOM. A lightweight CSS3 selector engine for the virtual DOM (included in rehacked) searches for virtual elements before they're rendered to the real DOM. When matches are found, rehacked modifies the virtual DOM to add new components before/after the old ones, or it can replace elements altogether. Since react.js is aware of these new elements (and as far as it can tell it completely manages them) reconciliation occurs as normal, and React is free to remove any of these elements in the future, or can update anything around them without anything breaking.

API

Determine if anything is being hacked

Rehacked.isAnythingBeingHacked ();

Returns: boolean, if any hacks are registered with Rehacked

Determine if a specific component is being hacked

Rehacked.isBeingHacked (componentName);

Parameters

• componentName string the display name of the component

Returns: boolean if a specific component is being hacked with Rehacked

Render an element before a selector in a component’s DOM tree.

Rehacked.before (componentName, selector, reactClass, [opts]);

Parameters

• componentName string the display name of the component
• selector string a CSS3 selector specifying which elements to hack
• reactClass Object a React.js element to render before the found elements
• opts Object an optional options hash

Render an element after a selector in a component’s DOM tree.

Rehacked.after (componentName, selector, reactClass, [opts]);

Parameters

• componentName string the display name of the component
• selector string a CSS3 selector specifying which elements to hack
• reactClass Object a React.js element to render after the found elements
• opts Object an optional options hash

Render an element in place of a selector in a component’s DOM tree. experimental

Rehacked.on (componentName, selector, reactClass, [opts]);

Parameters

• componentName string the display name of the component
• selector string a CSS3 selector specifying which elements to hack
• reactClass Object a React.js element to render in place of the found elements
• opts Object an optional options hash

Notes

Getting a reference to the original element

When using on, before, or after React will create an element from the class you provide passing a property called reference which points to the associated hacked element. From this reference, you can access the state or props of the element you're hacking.

How do I integrate this with my A/B testing framework

First, we'll add an API method that allows external (non-react aware) APIs to create templated React classes. For the sake of this demo, our class will allow for extending all the things, but it's best to create one that best suits your needs. We'll add in API for being made aware of the components lifecycle and props, and specifying a node name.

var createPlaceholderClass = function (node, props, lifecycle) {
  var lifecycleAwareMethods = [
    'componentWillMount',
    'componentDidMount',
    'componentWillReceiveProps',
    'componentWillUpdate',
    'componentDidUpdate',
    'componentWillUnmount'
  ];
 
  var base = {
    displayName: "RehackedPlaceholder",
 
    render: function () {
      return React.createElement(node, props);
    }
  };
 
  var proxyLifecycleMethods = function (base) {
    var lifecycleMethods = lifecycleAwareMethods.map((method) => {
      return function (/* arguments */) {
        var requested = lifecycle[method];
        requested && requested.apply(this, arguments);
      };
    });
    return _.extend(_.object(lifecycleAwareMethods, lifecycleMethods), base);
  };
 
  return React.createClass(proxyLifecycleMethods(base));
};

Now we just need to call Rehacked with our new class using non-react APIs.

Rehacked.before('MyAppRoot', '.page ul li', createPlaceholderClass('li', {className: 'bar'}, {componentWillMount: function() { console.log("this component is about to mount"); })