This is based on our Twitter discussion.

The problematical code:

nodeList = NodeList.__proto__ || NodeList.prototype

and then

nodeList[forEach] = each;

NodeList.__proto__ shouldn't be used. In Chrome, it refers to Object.prototype (!!) and in Firefox it refers to some "magical" host object. So, in Chrome you're adding a forEach property to Object.prototype, i.e. you're extending Object.prototype. You're doing this unintentionally, but even if you were doing this on purpose, it would be an awful approach.

From what I see, your intent is to be able to iterate over NodeList instances. The standard approach would be to extend NodeList prototype:

NodeList.prototype.forEach = Array.prototype.forEach;

But you're already doing the iteration differently by invoking Array.prototype.forEach via call() like so:

each.call(this, function (el) {
  el.on(event, fn);
});

This is a good approach. It gets the job done just fine. Therefore, you don't need to add a forEach method to NodeList.prototype and the two lines of code (from the beginning of my message) should be removed. (Edit: Only the second line should be removed. The first line is need to add stuff to Node.prototype. See my pull request.)

Hey,

I saw those "Gotchas" you listed, which motivated me to see if I could fix them. I also thought it'd be nice to add in Grunt to manage the build process. So, long story short:

• npm install -> fetches grunt, grunt-contrib-concat, and grunt-contrib-uglify
• created /dist and /src folders and moved the script to /src/$.js
• grunt build -> uglifies src/$.js to dist/$.js, dist/$.min.js, and $.js.map for source mapping
• created a component.json if you want to bower register min.js git://github.com/remy/min.js.git
• added chaining to triggers

I also added an internal empty element (not inserted on the document). When no results are returned from $('a query'), this empty div is returned, which will allow .on and .trigger to be used, as any other element. Also, this fake element is used if a user wants to say, simply $.trigger and $.on, without using $ as a function.

I think that's about it, lemme know what you think.

• Refactored element.trigger() into a strategy which uses CustomEvent if available
• Normalized the Event shape between CustomEvent & document.createEvent("HTMLEvents");
• Fixing a reference error of forEach()
• Aligned variables because ... I do that

I was having trouble getting this module to work with component and making these changes to component.json seems to alleviate the issue.

Specifically, it seems to have confused component to be missing the 'scripts' element and to use './' in the file paths.

I've also made a stylistic change that I'd be happy to discuss: changing the component name to 'min' (as opposed to 'min.js'). That results in code that looks like this:

require( 'min' );

vs.

require( 'min.js' );

The former feels more like normal node.js require syntax.

Thoughts?

Not really an issue, but wasn't sure where I could pass this along? If you are only var'ing the "each" to use within the NodeList protototype addons, why not just declare it, and then actually use it?

var list = NodeList.prototype

list.forEach = Array.prototype.forEach

list.on = function(e, fn) {
  this.forEach(function(el) { el.on(e, fn) })
  return this
}

list.trigger = function(e) {
  this.forEach(function(el) { el.trigger(e) })
  return this
}

Hey, I'm new to using Bower, but thought I'd share what I learned about how the versions work. The version you state in component.json will refer back to a tag from the git repository. With each tag, you effectively freeze the code where it is at that point, which then enables Bower users to ask for specific version, ex: bower install min.js#0.0.2

When you've made a change big enough for a tag, run: git tag -a 0.0.3 -m 'v0.0.3' then push the branch with the --tags flag: git push origin master --tags

Woo!

I'm back!

Mostly, I thought it'd be cool to expand on the tests, and steer towards headless testing. grunt watch will watch for changes to /src and /test files, re-build the code, and re-run the tests. I wrote a few more tests, and split them out into a few different files as well.

And, I added that internal element back in, but to be used in a slightly different way. I think having that hidden element is handy, for when you want to trigger and listen for an app-wide event. It could be something like "photoAdded" or "todoRemoved", allowing any part of your code who's interested to listen for that event, and execute whatever code is necessary as a result.

To use it, it's $.on and $.trigger.

So, let me know how you feel about that. I'm happy to yank it back out if that's not the direction you wanted to go with this.

nodeList should refer to NodeList.prototype instead of its .__proto__.

The line nodeList[forEach] = each; is not needed as you're iterating NodeList instances by invoking Array.prototype.each directly and passing the NodeList instance via .call().

Getting the following on Chrome 41 (and FF)

Uncaught TypeError: Failed to execute 'createElement' on 'Document': 1 argument required, but only 0 present.

I'm probably doing something wrong, the script is loaded like:

<script src="/static/bower_components/min.js/dist/$.js"></script>

Hi Remy, just a suggestion: Allowing .forEach() on a node makes it easier to manipulate the result, regardless of whether one or many elements are returned. Thoughts?

Hi,

Since June 24 2013 there are no new tags on GitHub (the latest is version 0.1.0), your component.json is stuck at version 0.1.0, but package.json is on version 0.2.3. Can you update all files what contains a version number? I recommend https://github.com/mikaelbr/mversion to keep it up to date. Maybe you can create an 1.0 version, because it's stable since your last commit on July 22, 2013. Thank you in advance.

Looking at your source it doesn't seem like delegation is done correctly: you can't just compare the event.target, you have to find the closest ancestor matching the selector.

This is how jQuery & Zepto do it, and that's the correct behaviour. Example:

$('body').delegate('li > a', 'click', fn);

If you've clicked a span within the a element then it won't match even though a child of the a element was indeed clicked.

Because of this requirement, firing delegated events is actually quite a bit slower, and is rarely a necessity. I've opted against them in espresso.js and have not had any issues at all.

Renamed the $ variable to minjs to remove conflicts with potential libraries. Using the module pattern you can still refer to minjs with a dollar.

(function ($) { ... })(minjs);