Modernizr: rewrite in es6 modules

Created on 6 May 2014 · 16Comments · Source: Modernizr/Modernizr

i'm currently working on https://github.com/normalize/package-management. the idea is that i should be able to just create a custom modernizr file like so from my app:

import 'https://github.com/modernizr/modernizr/3.0.0/feature-detects/css/boxshadow.js'
import 'https://github.com/modernizr/modernizr/3.0.0/feature-detects/css/boxsizing.js'

and simply do <script src="modernizr-custom.js"> in my <head>. all the modernizr parts will eventaully be spdy pushed in development, and there will be an optional compile step to concat/minify.

currently, everything is written AMD, which would require a lot of detangling to work with ES6 modules (i mean i could, but i'm lazy). would be nice if modernizr were rewritten using ES6 modules (and of course compile down to ES4 when creating builds). it would also make all the source code easier to read as well as make modernizr future-proof.

Source

jonathanong

Most helpful comment

Having Modernizr as ES6 modules would be really nice feature to have

ogonkov on 3 May 2018

👍5

All 16 comments

Hey @jonathanong

Thanks for the suggestion! Your repo sounds really interesting.

PRs are always welcome, if you want to reorchestrate the repo

patrickkettner on 6 May 2014

the problem for me is that you guys have a really complicated build system going on. i have no idea what's going on since i don't use any of these grunt/gulp stuff

jonathanong on 6 May 2014

@jonathanong - #1184 has been working on updating the build system, perhaps that could shed some light for you

patrickkettner on 6 May 2014

btw i'm working on https://github.com/detects. going to just create the detects i use as es6 modules. don't personally see a point in a giant Modernizr global, and how the tests work is more straight forward.

jonathanong on 11 May 2014

The point of the build system is performance. You don't have to use the
build system to use modernizr. You can just make Modernizr an es6 module.
But naturally, you'll still need a build system to compile it into
something browsers can run.

SlexAxton on 11 May 2014

yeah totally. my only issue with modernizr is that it uses its own complicated build system. would be nice if it used browserify or something, even if the output was a little larger, as then people could more easily create custom bundles vs. this crazy build process.

jonathanong on 11 May 2014

With the modernizr build process, you give it an array of tests as a json
file and the built file comes out of stdout. Internally it uses AMD which
is specified by CommonJS and is just as "official" as browserify (maybe
more?). It does use the 'onBuildWrite' feature to get rid of AMD wrappers
to make sure it doesn't clash with people's module systems.

Alternatively you can just go to http://v3.modernizr.com/download/ - and
then click the check boxes next to the tests you want.
On May 10, 2014 9:05 PM, "Jonathan Ong" [email protected] wrote:

yeah totally. my only issue with modernizr is that it uses its own
complicated build system. would be nice if it used browserify or something,
even if the output was a little larger, as then people could more easily
create custom bundles vs. this crazy build process.

—
Reply to this email directly or view it on GitHubhttps://github.com/Modernizr/Modernizr/issues/1333#issuecomment-42760139
.

SlexAxton on 11 May 2014

I am more than happy to discuss an actual PR, but in the mean time, this isn't really an "issue" with modernizr, nor a feature that any of the team plans on working on, so I am closing it out for now.

looking forward to watching normalize/package-management, though!

patrickkettner on 14 Jun 2014

If you use System.js, then you can mix and match ES6 and AMD modules with ease.

jokeyrhyme on 12 Jul 2014

Having Modernizr as ES6 modules would be really nice feature to have

ogonkov on 3 May 2018

👍5

@ogonkov @alexturpin @adekbadek I’m maintaining ESM build of Modernizr if you’re still interested!

niksy on 12 Feb 2019

👍3

It's time to revisit this. In 2014 this was a cool experiment but now that browsers, node and deno have es modules, we really should embrace esm.

mreinstein on 17 Mar 2020

I am very inclined to re-open this issue BUT there are caveats:
1) I dont have time to work in this myself since it would imply not only reowkring the code but also a lot of the documentation and the website has to be updated too. Thats more than I alone can do...
2) There was already some work started but I am not sure if they followed it throiugh so one can base his/her work on that:

@patrickkettner started a PR here: https://github.com/Modernizr/Modernizr/pull/2108 which wasnt touched for a while and therefor is stale...
@niksy started a modernizr version as esm module. this is based on v3.7.1 and therefor a little fresher but I am not sure if it can be converted into a PR.
3) A transition strategy is needed. Not sure what can go wrong but I am always counting on murphys law for such things...

is anyone here still interested AND has time / motivation to do something for modernizr even if its only feedback?