metafizzy / outlayer

:construction_worker: the brains & guts of a layout library
163 stars 63 forks source link

Add commonjs dependencies and a package json. Include examples using browserify. #19

Closed wbinnssmith closed 10 years ago

wbinnssmith commented 10 years ago

This lets outlayer be packaged with commonjs bundlers like browserify and webpack. PR includes examples using browserify and restructures examples dir. Just follow the directions in the readme!

This allows outlayer to be published to npm. I can move all of the dependencies from my forks to their respective upstreams if their package json PRs get merged.

Thanks for a great library :D

desandro commented 10 years ago

Thanks so much for these many contributions. I realize this was a lot of work. I'm evaluating merging each one by one, so this might take a while.

One concern I have is being able to support both Component(1) and Browserify. There's a conflict with requiring wolfy87-eventemitter, as this wouldn't be available with Component. I'll likely adjust the package.json so that package names for Component and Browserify match.

wbinnssmith commented 10 years ago

Of course! Let me see what I can do about the require conflict with the eventemitter module. FWIW, we're using packery at Bonobos for our women's brand AYR and love it. I've been integrating it with our browserify builds.

wbinnssmith commented 10 years ago

So it looks like the component build process actually rewrites the require calls that other loaders use and replaces them with its own component references. I just added a commit that adds a component.json to outlayer, and when I run component build, which reads in outlayer's require calls of:

} else if ( typeof exports === 'object' ) {
  module.exports = outlayerDefinition(
    require('eventie'),
    require('doc-ready'),
    require('wolfy87-eventemitter'),
    require('get-size'),
    require('matches-selector'),
    require('./item.js')
  );

} else {

then the generated build.js actually looks like this:

} else if ( typeof exports === 'object' ) {
  module.exports = outlayerDefinition(
    require("desandro~eventie@v1.0.5"),
    require("wbinnssmith~doc-ready@commonjs"),
    require("wolfy87~eventemitter@v4.2.7"),
    require("desandro~get-size@v1.1.7"),
    require("desandro~matches-selector@b1f5aa2c6878f4f0657219964891ae0ae1ed95a6"),
    require("outlayer/item.js")
  );

} else {

Nifty! Also I had to again use my fork of doc-ready in this case since upstream doesn't have the export.

Let me know what you think.

desandro commented 10 years ago

With v1.3.0, Outlayer is now CommonJS compatible and ready for Browserify. :pineapple: Took me a while, but it's finally done. Thank you for kicking off this effort months ago :bow: