CommonJS compatibility

[MoOx]

It's currently a pain in the ass to use masonry (so outlayer & friends) in a commonsjs environnement (in my case browserify).
You should take a look to UMD (eventually this part) to handle the 3 styles CommonJS, AMD & oldschool way.

[desandro]

Yes, this is difficult. Masonry primarily uses Bower for package management. I'm trying to work on back-filling the other package managers (see component issue #426 )

[MoOx]

browserify can use bower without issue, using debowerify so the main issue is the declaration of the component & it's dependencies a la CommonJS is missing :)

[simon-dt]

SO is there a quick fix for this issue? I'm kind of done with AMD and i love the Brosweify workflow but it's a pain to work with indeed. debowerify and deamdify come a long way but not far enough ...

[MoOx]

try degloballify maybe ?

[simon-dt]

I tried but i'm just progressing from error to error. I can't get it to work.

[MoOx]

Sorry but I can't help you more, I switch to something simpler that is enough for my need (all block are same width) https://github.com/rnmp/salvattore/

[zsitro]

+1

[Fauntleroy]

I gave it a valiant effort, but I couldn't manage to get Masonry working with browserify either. So far, this is the only library I've come across that I couldn't get working one way or another.

[zsitro]

@MoOx you may find the same problem in this thread which may help you desandro/imagesloaded#119 (comment)

[liperuf]

+1

[nickbuddendotcom]

+1

[desandro]

I'm slowly working on getting Masonry all ready for CommonJS, so you can use it with Browserify or Component. This is coming! but in due time.

[AlexRiedler]

I am not sure if this works perfectly yet, but it might help someone in the mean time:

    "masonry": {
      "exports": "window.Masonry",
      "depends": [
        "jquery",
        "outlayer"
      ]
    },
    "outlayer": {
      "exports": "Outlayer",
      "depends": [
        "eventie",
        "doc-ready",
        "eventEmitter",
        "get-style-property",
        "get-size",
        "matches-selector",
        "outlayerItem"
      ]
    },
    "outlayerItem": {
      "exports": "Outlayer.Item",
      "depends": [
        "eventie",
        "doc-ready",
        "eventEmitter",
        "get-style-property",
        "get-size",
        "matches-selector"
      ]
    },
    "eventEmitter": {
        "exports": "window"
    },
    "eventie": {
        "exports": "window"
    },
    "get-style-property": {
        "exports": "getStyleProperty"
    },
    "get-size": {
        "exports": "getSize",
        "depends": ["eventie"]
    },
    "doc-ready": {
        "exports": "window",
        "depends": ["eventie"]
    },
    "matches-selector": {
        "exports": "matchesSelector"
    }

and

    "masonry": "./src/bower_components/masonry/masonry.js",
    "outlayer": "./src/bower_components/outlayer/outlayer.js",
    "outlayerItem": "./src/bower_components/outlayer/item.js",
    "eventie": "./src/bower_components/eventie/eventie.js",
    "doc-ready": "./src/bower_components/doc-ready/doc-ready.js",
    "eventEmitter": "./src/bower_components/eventEmitter/eventEmitter.js",
    "get-style-property": "./src/bower_components/get-style-property/get-style-property.js",
    "get-size": "./src/bower_components/get-size/get-size.js",
    "matches-selector": "./src/bower_components/matches-selector/matches-selector.js"

I will repost if I find any problems while I debug.
(Tested using browserify)

[joshhornby]

Is there any examples of this working with CommonJS modules?

I am trying to use with browserify and seems I need quite a few other dependencies.

[AlexRiedler]

@joshhornby ^ the stuff I posted just above (package.json) is actually how I got masonry to work with commonjs using browserify... so it should work for yourself as well (might have to fix links obviously though).

[joshhornby]

Ah right brilliant, so was just a case off adding these to your package.json and then running a bower install to pull in the packages etc? (Sorry I am knew to this CommonJS way of working)

[AlexRiedler]

@joshhornby yup; It also uses browserify-shim; the 1st part is "browserify-shim" in package.json; the 2nd is "browser".

[radiodario]

@AlexRiedler Could you provide more detailed instructions or a PR on where those fields go? I haven't been able to get masonry into browserify from an NPM package.

thanks!

[tramck]

This morning I forked and added CommonJS support to Masonry as well as the dependencies that were missing it. I have this working with browserify in my project now. The result can be found here: https://github.com/braznaavtrav/masonry

I will be making pull requests some time soon. In the meantime, you can add "masonry": "braznaavtrav/masonry" to your dependencies list of your package.json, run npm install and use require('masonry')

[radiodario]

thanks @braznaavtrav will give it a shot.

[toksea]

Hi @braznaavtrav !

I've tried your fork, but it cannot pass browerify:

Error: Cannot find module 'eventEmitter' from 'app/node_modules/masonry/node_modules/outlayer'

Is it work for you and did I miss anything?

Thank you!

[tramck]

@toksea Yes, it is currently working for me, but I did run into a similar issue with that 2 days ago, while I was making these changes, this is the commit where I cleared up the issue you are having: tramck/outlayer@06bdc27 . Are you sure that braznaavtrav/outlayer is getting pulled in and you are using the latest versions of all of braznaavtrav/masonry?

Just to make sure, I just ran rm -rf node_modules && npm install on my project and it is still building with browserify and running fine, so I'm not sure what could be causing your issue other than maybe you installed it 2 days ago before I cleared up that error?

[toksea]

Hi @braznaavtrav, I checked again and change require('eventEmitter') to require('eventemitter') in item.jsthen it works! I created this PR tramck/outlayer#1, maybe you can merge.

Thanks!

[tramck]

@toksea good catch!! I don't know why that wasn't throwing an error for me.

[ericnjanga]

Great work @braznaavtrav and @toksea, Masonry now officially supports CommonJS!

[simon-dt]

That is great news! Thanks!

On 13 Nov 2014, at 11:47, Eric Njanga notifications@github.com wrote:

Great work @braznaavtrav and @toksea, Masonry now officially supports CommonJS!

—
Reply to this email directly or view it on GitHub.

[ericnjanga]

I should not have said "officially supports" because there is no official
announcement yet. But @*braznaavtrav https://github.com/braznaavtrav *has
created a hack that allows the masonry library to support commojs
frameworks like Browserify. I've downloaded and tested its code. It works!

Please check: #480

Sorry for any misinterpretation.

On Mon, Nov 17, 2014 at 10:53 AM, Travis McKinney notifications@github.com
wrote:

@ericnjanga https://github.com/ericnjanga huh? where do you see that?

—
Reply to this email directly or view it on GitHub
#480 (comment).

[desandro]

Masonry v3.2.0 supports CommonJS and Browserify 🎈 🎉 💝

npm install masonry-layout

var Masonry = require('masonry-layout');
var msnry = new Masonry( '#container', {
  columnWidth: 220
});

See docs at http://masonry.desandro.com/appendix.html#browserify

My thanks to @braznaavtrav for getting the ball rolling 😁

[ericnjanga]

There you go! Fantastic.

[desandro]

Closing as fixed. If you run into another problem with CommonJS or Browserify, please open a new issue.

[kopax]

From changelog.md : + imagesLoaded no longer included

Why ?
It does not longer work with gamma, which I made compatible browserify too

[desandro]

@kopax imagesLoaded is a separate project that solves a separate problem, for this reason, it should be kept separate. imagesLoaded has not been included with Masonry as of v3, which has been out now for 1.5 years.

[bonfish]

Hi!

There is still one build method that's not working for Masonry: using browserify with standalone scripts (not installed via npm and thus with no node-modules dependencies, but just stored in folders). E.g. the structure like this:

app.js                                  // this file has require's in it and is browserified
|--- libs/                              // scripts from this folder are being required
|------ masonry.pkgd.js
|------ someOtherLib.js
...

Now browserify (node-version) throws Cannot find module './item' from <path/to/libs/>. If I change ./item to item, than the error claims jQuery is not found.

All other libraries/plugins I've met so far, both designed with module.exports ans without it, could be made working this way.

I understand, this might not be of any priority; just thought it would be fair noticing.

[desandro]

@bonfish Thanks for reporting this issue. As you have guessed, I don't feel this is a common use case. If you're using browserify, then you should be installing Masonry with npm. masonry.pkgd.js is designed for users who do not use package management, and just want the plop the file in <script />.

[achord]

Trying to figure this out. I'm using masonry 4.0 running gulp with browserify. I keep running into the same error:

[Error running Gulp] Error: module "./item" not found

[desandro]

@achord Please open a new issue, thanks!