Prepack: Math Operation Optimization?

[jtenner]

I was working with babel, and my plugin generates unoptimal functions that I would LOVE to optimize with prepack. This tool is genius. However, it doesn't optimize something I think might actually be really simple to do.

  let index = 6, nextIndex = 0;
  //translate operation
  nextIndex = index + 6;
  stack[nextIndex - 6] = stack[index - 6];
  stack[nextIndex - 5] = stack[index - 5];
  stack[nextIndex - 4] = stack[index - 4];
  stack[nextIndex - 3] = stack[index - 3];
  stack[nextIndex - 2] = stack[index - 2] + stack[index - 6] * x + stack[index - 4] * y; //e
  stack[nextIndex - 1] = stack[index - 1] + stack[index - 5] * x + stack[index - 3] * y; //f

Could very easily become...

  //translate operation
  stack[6] = stack[0];
  stack[7] = stack[1];
  stack[8] = stack[2];
  stack[9] = stack[3];
  stack[10] = stack[4] + stack[0] * x + stack[2] * y; //e
  stack[11] = stack[5] + stack[1] * x + stack[3] * y; //f

Notice how index and nextIndex are deterministic and completely unnecessary with simple math, AND the binary math operations become simple numbers! The latter is certainly faster.

Hope this is doable! Thanks!

[NTillmann]

Try to Prepack this, where I threw in some environment modelling so that Prepack knows about x, y, stack.

(function() {
  let stack = __abstract({}, "stack");
  __makeSimple(stack);
  let x = __abstract("number", "x");
  let y = __abstract("number", "y");

  let index = 6, nextIndex = 0;
  //translate operation
  nextIndex = index + 6;
  stack[nextIndex - 6] = stack[index - 6];
  stack[nextIndex - 5] = stack[index - 5];
  stack[nextIndex - 4] = stack[index - 4];
  stack[nextIndex - 3] = stack[index - 3];
  stack[nextIndex - 2] = stack[index - 2] + stack[index - 6] * x + stack[index - 4] * y; //e
  stack[nextIndex - 1] = stack[index - 1] + stack[index - 5] * x + stack[index - 3] * y;
})()

If you try this today, you might notice that Prepack generates illegal property accessors, e.g. stack.0 instead of stack[0]. I'll file a bug for that.

[NTillmann]

We'll track the remaining bug in #581.

[jtenner]

Sorry to be selfish and ask, but I would love to start testing out this software with my babel plugin. Is there any way to test out these changes?

[deltaidea]

@jtenner Sure! See Getting Started page.

[jtenner]

Just wanted to clarify if the changes were already made or if I needed to install a specific branch to try them out. Turns out they are already working! Thank you!

It's taking my input:

let x = <inline>
    <translate x={100} y={100}>
      <fillText text="Hello World!"/>
    </translate>
</inline>;

x({ x: 100, y: 101 });

Turning it into...

//the following code helps prepack determine what gets output
 let log = function(type, args) {
    console.log(type, args);
  };
  let ctx = __abstract({ 
    save: function() { log("save", [].slice.call(arguments)) },
    canvas:{},
    setTransform: function() { log("setTransform", [].slice.call(arguments)) },
    fillText: function() { log("fillText", [].slice.call(arguments)) },
    restore: function() { log("restore", [].slice.call(arguments)) }
  }, "_ctx");

  //start what was output by the babel plugin
  let x = function _inline(props, _ctx, _state) {
  _ctx.save();
  _state = _state || {};
  _state.initiailTransform = _state.initiailTransform || [1, 0, 0, 1, 0, 0];
  let _stack = new Float64Array(6000);
  _stack.set(_state.initiailTransform || [1, 0, 0, 1, 0, 0]);

  let _cache;

  let _index = 6;
  let _nextIndex = 6;
  _nextIndex = _index + 6;
  _cache = [props.x, props.y];
  _stack[_nextIndex - 6] = _stack[_index - 6];
  _stack[_nextIndex - 5] = _stack[_index - 5];
  _stack[_nextIndex - 4] = _stack[_index - 4];
  _stack[_nextIndex - 3] = _stack[_index - 3];
  _stack[_nextIndex - 2] = _stack[_index - 2] + _stack[_index - 6] * _cache[0] + _stack[_index - 4] * _cache[1];
  _stack[_nextIndex - 1] = _stack[_index - 1] + _stack[_index - 5] * _cache[0] + _stack[_index - 3] * _cache[1];
  _index = _nextIndex;

  _ctx.setTransform(_stack[_index - 6], _stack[_index - 5], _stack[_index - 4], _stack[_index - 3], _stack[_index - 2], _stack[_index - 1]);

  _ctx.fillText("Hello World!", 0, 0);

  _index -= 6;

  _ctx.restore();
};

x({ x: 100, y: 100 }, ctx);

...and turning into something incredible.

console.log("save", []);
console.log("setTransform", [1, 0, 0, 1, 100, 100]);
console.log("fillText", ["Hello World!", 0, 0]);
console.log("restore", []);

I can't believe what I am seeing.