Support for UMD #33

Closed
jzaefferer opened this Issue Sep 24, 2015 · 8 comments

Comments

Projects
None yet
6 participants
@jzaefferer

I tried building jQuery UI, which uses UMD without CJS, with browserify and this module. While its likely that I've missed something, it doesn't seem to work, and the "// TODO: Implement support for amdWeb UMD modules." comment implies that it can't work.

My test is here: https://github.com/jzaefferer/browserify-jquery-ui

Running npm run build will build a bundle, but it doesn't make a difference if deamdify is used or not, it won't do anything.

What it should be doing is to find the if ( typeof define === "function" && define.amd ) { check and resolve the define call inside of that.

@tbranyen

This comment has been minimized.

Show comment
Hide comment
@tbranyen

tbranyen Sep 24, 2015

Collaborator

We merged 283a160 which claims to add it

Collaborator

tbranyen commented Sep 24, 2015

We merged 283a160 which claims to add it

@jzaefferer

This comment has been minimized.

Show comment
Hide comment
@jzaefferer

jzaefferer Sep 24, 2015

No release since April? Okay.

I installed via npm install jaredhanson/deamdify#master and ran my build script again, nothing changed. Eventually I found that there are two ways to apply transforms, -t only applies to "local" modules, -g applies to everything. With that, the autocomplete.js dependency is actually modified, which looks alright. Unfortunately it fails to include the jQuery dependency, instead it replaces it with this:

},{}],3:[function(require,module,exports){
module.exports = function () {
    return jQuery;
}();
},{}]},{},[1]);

Any ideas?

No release since April? Okay.

I installed via npm install jaredhanson/deamdify#master and ran my build script again, nothing changed. Eventually I found that there are two ways to apply transforms, -t only applies to "local" modules, -g applies to everything. With that, the autocomplete.js dependency is actually modified, which looks alright. Unfortunately it fails to include the jQuery dependency, instead it replaces it with this:

},{}],3:[function(require,module,exports){
module.exports = function () {
    return jQuery;
}();
},{}]},{},[1]);

Any ideas?

@StreetStrider

This comment has been minimized.

Show comment
Hide comment
@StreetStrider

StreetStrider Jan 21, 2016

I have the very same issue.
jQuery UI for some reason dropped support for CJS in 1.11. So I've recalled deamdify.
jQ UI module has the following structure:

(function( factory ) {
        if ( typeof define === "function" && define.amd ) {

                // AMD. Register as an anonymous module.
                define([
                        "jquery",
                        "./core",
                        "./widget"
                ], factory );
        } else {

                // Browser globals
                factory( jQuery );
        }
}(function( $ ) {

return $.widget( "ui.tabs", {
        version: "1.11.4",
//

So it is an AMD module with fallback to global (factory(jQuery)) with NO CJS (so it is not actually an full-UMD). It also has internal deps ('./widget') and external ('jquery').
deamdify transformation does not really do anything special with it, so this module works as «global-module».
I expect deamdify to pass define into such module and both internal and external deps work ok. Not happening. For now I'm using browserify-shim which treat jQ UI as global-ish and force me to manually resolve jQ UI dependencies, which is makin me sad.

I have the very same issue.
jQuery UI for some reason dropped support for CJS in 1.11. So I've recalled deamdify.
jQ UI module has the following structure:

(function( factory ) {
        if ( typeof define === "function" && define.amd ) {

                // AMD. Register as an anonymous module.
                define([
                        "jquery",
                        "./core",
                        "./widget"
                ], factory );
        } else {

                // Browser globals
                factory( jQuery );
        }
}(function( $ ) {

return $.widget( "ui.tabs", {
        version: "1.11.4",
//

So it is an AMD module with fallback to global (factory(jQuery)) with NO CJS (so it is not actually an full-UMD). It also has internal deps ('./widget') and external ('jquery').
deamdify transformation does not really do anything special with it, so this module works as «global-module».
I expect deamdify to pass define into such module and both internal and external deps work ok. Not happening. For now I'm using browserify-shim which treat jQ UI as global-ish and force me to manually resolve jQ UI dependencies, which is makin me sad.

@au-phiware

This comment has been minimized.

Show comment
Hide comment
@au-phiware

au-phiware Jul 21, 2016

Contributor

jquery/sizzle has the same problem. I.e. (1) the call to define is guarded by the existence of define (that 283a160 does appear to overcome); and (2) the function passed to define relies on a variable from its enclosing closure, this means that deamdify only output line 2233 of sizzle.js. This seems like a major flaw.

Contributor

au-phiware commented Jul 21, 2016

jquery/sizzle has the same problem. I.e. (1) the call to define is guarded by the existence of define (that 283a160 does appear to overcome); and (2) the function passed to define relies on a variable from its enclosing closure, this means that deamdify only output line 2233 of sizzle.js. This seems like a major flaw.

au-phiware pushed a commit to au-phiware/deamdify that referenced this issue Jul 21, 2016

Corin Lawson
add tests for UMD modules that reference closure variables
As mentioned in #33, popular libs often do their main work outside of
the factory. Thus the factory is reduced to return a variable that is
declared and defined in the enclosing closure. UMD boilerplate is
usually an afterthought so to preserve the code outside of the factory
is very important!

au-phiware pushed a commit to au-phiware/deamdify that referenced this issue Jul 21, 2016

@au-phiware

This comment has been minimized.

Show comment
Hide comment
@au-phiware

au-phiware Jul 21, 2016

Contributor

I have created a sample project that uses my changes: https://github.com/au-phiware/deamdify-sample/

Contributor

au-phiware commented Jul 21, 2016

I have created a sample project that uses my changes: https://github.com/au-phiware/deamdify-sample/

@tbrandvik

This comment has been minimized.

Show comment
Hide comment
@tbrandvik

tbrandvik Jul 30, 2016

Just a quick user note in case somebody finds it useful: I have found that if I use the au-phiware deamdify module and add

"browserify": {
"transform": "deamdify"
},

to jquery-ui/package.json

then all the jquery-ui files are transformed correctly. Using "browserify -g deamdify ..." from the command-line didn't work for me as some of the third-party modules I use don't work with deamdify.

Thanks for fixing the deamdify bug and putting it up!

Just a quick user note in case somebody finds it useful: I have found that if I use the au-phiware deamdify module and add

"browserify": {
"transform": "deamdify"
},

to jquery-ui/package.json

then all the jquery-ui files are transformed correctly. Using "browserify -g deamdify ..." from the command-line didn't work for me as some of the third-party modules I use don't work with deamdify.

Thanks for fixing the deamdify bug and putting it up!

@au-phiware

This comment has been minimized.

Show comment
Hide comment
@au-phiware

au-phiware Jul 30, 2016

Contributor

@tbrandvik, which third-party modules that you use don't work with deamdify?

Contributor

au-phiware commented Jul 30, 2016

@tbrandvik, which third-party modules that you use don't work with deamdify?

@ishaikovsky

This comment has been minimized.

Show comment
Hide comment
@ishaikovsky

ishaikovsky Aug 17, 2016

Last released version of underscore - is not getting correctly transformed for me as well using current deamdify code.

Last released version of underscore - is not getting correctly transformed for me as well using current deamdify code.

@tbranyen tbranyen closed this in 49e2508 Feb 10, 2017

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