Add Browserify support about snabbt.js

[daniel-lundin]

I just added added some UMD boilerplate to add support for requirejs and browserify. I tested with require.js but I haven't used browserify before. Do you have the time to verify that it works with browserify as well?
Grab the latest snabbt.js or snabbt.min.js from master..

[daniel-lundin]

Latest release has require.js and browserify support. published to bower and npm

npm install snabbt.js

Unfortunately some trash files was included in the publish, will fix for next release.

[sebastiandeutsch]

Requiring it with browserify is quite quirky. You have to write:

var snabbt = require('snabbt.js').snabbt;

I would expect

var snabbt = require('snabbt.js')

Is that by design?

[daniel-lundin]

Yes, it's quirky.
Well, sort of by design. The whole library is in "snabbtjs" namespace. When using without a module loader the snabbt-function is exposed as a global variable.
There is more than the snabbt-function that needs to be accessible, for example the matrix operations. That is why the require call cannot return the snabbt-function directly.

If you want it to work exactly like without the module loader you have to do this:

var snabbt = require('snabbt.js').snabbt;
var snabbtjs = require('snabbt.js');

Do you have any suggestions how it could be improved?

[sebastiandeutsch]

Could you give me an example which externals you need to expose to the user?

[daniel-lundin]

To use value feeding for example the Matrix API needs to be accessible.
I've thought about sending them as parameters in the value feed call instead. E.g.

snabbt(element, {
  value_feeder: function(i, ident, mult, trans, rotX, rotY, rotZ, scale, skew) {
    return mult(trans(100*i, 0, 0), rotX(2*Math.PI));
  }
}

I don't know how I feel about this, but at least it would allow for export of only the snabbt function..

[sebastiandeutsch]

I understand. That many parameters are tricky and very verbose for the developer when he just needs scale. Another option would be to pass a $scope object that exposes the MatrixAPI as an object where mult, trans, ... are attributes.

Since value_feeder is a function another option would be to call it via call (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call) instead of calling value_feeder(tween_value) and provide a context with the scope variables. The user could use it like this:

snabbt(element, {
  value_feeder: function(i) {
    return this.mult(this.trans(100*i, 0, 0), this.rotX(2*Math.PI));
  }
}

But it might feel like to much magic.

[daniel-lundin]

Great input.
I think I prefer the first approach, it's more explicit.
Even better would be to redesign the Matrix API so that the operations are instance methods returning this. Then the second parameter could be an identity matrix and all the operations could be chained on that:

snabbt(element, {
  value_feeder: function(i, matrix) {
    return matrix.trans(100*i, 0, 0).rotX(2*Math.PI);
  }
}

And while I'm at it I think I will get rid of the silly abbreviations. trans -> translate, rotX -> rotateX etc..
I'll sleep on it but I think this is the way to go.
Thoughts?

[sebastiandeutsch]

Great idea. Go for it.

[daniel-lundin]

Fixed in the latest release

[wolfgangschoeffel]

👍 Thanks!