New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modernizr v3 and Prototype.js #1709

Closed
svossen opened this Issue Oct 14, 2015 · 10 comments

Comments

Projects
None yet
3 participants
@svossen

svossen commented Oct 14, 2015

I'm using Modernizr in Magento projects so I have to load Prototype.js on my pages. This results in a lot of no-* classes added to the HTML element. I'm using a custom build of Modernizr 3.1.0 and Prototype 1.7.

When I include Prototype.js the HTML element has the following classes: js cssanimations flexbox csstransforms supports csstransforms3d csstransitions no-each no-eachslice no-all no-any no-collect no-detect no-findall no-findall no-grep no-include no-include no-ingroupsof no-inject no-invoke no-max no-min no-partition no-pluck no-reject no-sortby no-clone no-zip no-size no-inspect no-reverse no-foreach no-clear no-first no-last no-compact no-flatten no-without no-uniq no-intersect no-clone.

When I remove Prototype.js, only the following classes remain: js cssanimations flexbox csstransforms supports csstransforms3d csstransitions.

@SlexAxton

This comment has been minimized.

Show comment
Hide comment
@SlexAxton

SlexAxton Oct 14, 2015

Member

I'm on my phone, sorry to be brief, but those classes look like they're from somewhere else. We replace 'no-js' but many of those appear to be tests for es5/6 features that Modernizr doesn't have detects for, especially at that granularity. Is there a missing second library?

Member

SlexAxton commented Oct 14, 2015

I'm on my phone, sorry to be brief, but those classes look like they're from somewhere else. We replace 'no-js' but many of those appear to be tests for es5/6 features that Modernizr doesn't have detects for, especially at that granularity. Is there a missing second library?

@svossen

This comment has been minimized.

Show comment
Hide comment
@svossen

svossen Oct 14, 2015

I don't think it has something to do with another library. When I just include prototype.js and modernizr in an almost empty HTML file, the classes are also added to the HTML element.

I took a look at the prototype.js file and I see a lot of the added classes return in the code. For example, see the code snippet below.

Object.extend(arrayProto, {
    _each:     _each,

    map:       map,
    collect:   map,
    select:    filter,
    filter:    filter,
    findAll:   filter,
    some:      some,
    any:       some,
    every:     every,
    all:       every,

    clear:     clear,
    first:     first,
    last:      last,
    compact:   compact,
    flatten:   flatten,
    without:   without,
    reverse:   reverse,
    uniq:      uniq,
    intersect: intersect,
    clone:     clone,
    toArray:   clone,
    size:      size,
    inspect:   inspect
});

When I remove a line, for example intersect: intersect,, this specific class is removed from the HTML element as well.

svossen commented Oct 14, 2015

I don't think it has something to do with another library. When I just include prototype.js and modernizr in an almost empty HTML file, the classes are also added to the HTML element.

I took a look at the prototype.js file and I see a lot of the added classes return in the code. For example, see the code snippet below.

Object.extend(arrayProto, {
    _each:     _each,

    map:       map,
    collect:   map,
    select:    filter,
    filter:    filter,
    findAll:   filter,
    some:      some,
    any:       some,
    every:     every,
    all:       every,

    clear:     clear,
    first:     first,
    last:      last,
    compact:   compact,
    flatten:   flatten,
    without:   without,
    reverse:   reverse,
    uniq:      uniq,
    intersect: intersect,
    clone:     clone,
    toArray:   clone,
    size:      size,
    inspect:   inspect
});

When I remove a line, for example intersect: intersect,, this specific class is removed from the HTML element as well.

@SlexAxton

This comment has been minimized.

Show comment
Hide comment
@SlexAxton

SlexAxton Oct 14, 2015

Member

But isn't this in prototype, not Modernizr?
On Wed, Oct 14, 2015 at 5:23 AM Stef Vossen notifications@github.com
wrote:

I don't think another library is missing. When I just include prototype.js
and modernizr in an almost empty HTML file, the classes are also added to
HTML element.

I took a look at the prototype.js file and I see a lot of the added
classes return in the code. For example, see the code snippet below.

Object.extend(arrayProto, {
_each: _each,

map:       map,
collect:   map,
select:    filter,
filter:    filter,
findAll:   filter,
some:      some,
any:       some,
every:     every,
all:       every,

clear:     clear,
first:     first,
last:      last,
compact:   compact,
flatten:   flatten,
without:   without,
reverse:   reverse,
uniq:      uniq,
intersect: intersect,
clone:     clone,
toArray:   clone,
size:      size,
inspect:   inspect

});

When I remove a line, for example intersect: intersect,, this specific
class is removed from the HTML element as well.


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

Member

SlexAxton commented Oct 14, 2015

But isn't this in prototype, not Modernizr?
On Wed, Oct 14, 2015 at 5:23 AM Stef Vossen notifications@github.com
wrote:

I don't think another library is missing. When I just include prototype.js
and modernizr in an almost empty HTML file, the classes are also added to
HTML element.

I took a look at the prototype.js file and I see a lot of the added
classes return in the code. For example, see the code snippet below.

Object.extend(arrayProto, {
_each: _each,

map:       map,
collect:   map,
select:    filter,
filter:    filter,
findAll:   filter,
some:      some,
any:       some,
every:     every,
all:       every,

clear:     clear,
first:     first,
last:      last,
compact:   compact,
flatten:   flatten,
without:   without,
reverse:   reverse,
uniq:      uniq,
intersect: intersect,
clone:     clone,
toArray:   clone,
size:      size,
inspect:   inspect

});

When I remove a line, for example intersect: intersect,, this specific
class is removed from the HTML element as well.


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

@svossen

This comment has been minimized.

Show comment
Hide comment
@svossen

svossen Oct 14, 2015

Yes this code is from the prototype.js file. Since there is a conflict when using both scripts, one of the two should be edited to resolve this conflict. Although I'm not sure if this should be Prototype or Modernizr. My best guest was Modernizr because there is no conflict between Prototype and Modernizr v2.

svossen commented Oct 14, 2015

Yes this code is from the prototype.js file. Since there is a conflict when using both scripts, one of the two should be edited to resolve this conflict. Although I'm not sure if this should be Prototype or Modernizr. My best guest was Modernizr because there is no conflict between Prototype and Modernizr v2.

@roblarsen

This comment has been minimized.

Show comment
Hide comment
@roblarsen

roblarsen Oct 14, 2015

Contributor

What is the conflict?

Contributor

roblarsen commented Oct 14, 2015

What is the conflict?

@svossen

This comment has been minimized.

Show comment
Hide comment
@svossen

svossen Oct 14, 2015

With conflict I mean the no-* classes which are added. It's not really a conflict because all other functionality seems to be working just fine. The HTML-tag just looks a little messy with all these classes.

svossen commented Oct 14, 2015

With conflict I mean the no-* classes which are added. It's not really a conflict because all other functionality seems to be working just fine. The HTML-tag just looks a little messy with all these classes.

@roblarsen

This comment has been minimized.

Show comment
Hide comment
@roblarsen

roblarsen Oct 14, 2015

Contributor

Stop using prototype? This isn't a bug and if it was it doesn't have anything to do with Modernizr.

Contributor

roblarsen commented Oct 14, 2015

Stop using prototype? This isn't a bug and if it was it doesn't have anything to do with Modernizr.

@svossen

This comment has been minimized.

Show comment
Hide comment
@svossen

svossen Oct 14, 2015

I wish I could stop using Prototype but I can't since a lot of Magento's functionality depends on it.

I don't have enough JavaScript knowledge to see what's really going on. But I can see that when I console.log an empty array (Modernizr's tests array at line 26), it looks a lot more different with Prototype included than without it.

with_prototype
With Prototype included

without_prototype
Without Prototype included

I guess I better accept the extra classes or move back to Modernizr v2 for now.

svossen commented Oct 14, 2015

I wish I could stop using Prototype but I can't since a lot of Magento's functionality depends on it.

I don't have enough JavaScript knowledge to see what's really going on. But I can see that when I console.log an empty array (Modernizr's tests array at line 26), it looks a lot more different with Prototype included than without it.

with_prototype
With Prototype included

without_prototype
Without Prototype included

I guess I better accept the extra classes or move back to Modernizr v2 for now.

@roblarsen

This comment has been minimized.

Show comment
Hide comment
@roblarsen

roblarsen Oct 14, 2015

Contributor

Ah, that is a bug. Prototype enhances Array.prototype and the testRunner doesn't do a hasOwnProperty test so it iterates through the Prototype enhancements in addition to the actual tests.

with the check (as expected)
http://plnkr.co/edit/8TnbG8p4T7Cg4P2NeEBR?p=preview

without the check (failing "tests" for Prototypes enhancements on the HTML element)
http://plnkr.co/edit/TDgXxP1Glnz2sgd2yOqr?p=preview

Contributor

roblarsen commented Oct 14, 2015

Ah, that is a bug. Prototype enhances Array.prototype and the testRunner doesn't do a hasOwnProperty test so it iterates through the Prototype enhancements in addition to the actual tests.

with the check (as expected)
http://plnkr.co/edit/8TnbG8p4T7Cg4P2NeEBR?p=preview

without the check (failing "tests" for Prototypes enhancements on the HTML element)
http://plnkr.co/edit/TDgXxP1Glnz2sgd2yOqr?p=preview

roblarsen added a commit to roblarsen/Modernizr that referenced this issue Oct 14, 2015

@svossen

This comment has been minimized.

Show comment
Hide comment
@svossen

svossen Oct 14, 2015

Thanks for pointing that out and resolving the issue!

svossen commented Oct 14, 2015

Thanks for pointing that out and resolving the issue!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment