breezejs about registry HOT 17 CLOSED

The original override seemed like it worked initially. When you do something that uses ajax or promises you find out quickly that breeze doesn't have it's Q and jQuery dependencies.

Here's a similar override that uses npm which results in a lighter download than the github endpoint:

jspm install npm:breeze-client -o "{ directories: { lib: 'build' }, main: 'breeze.min.js', format: 'amd', dependencies: { jquery: '^2.1.0', Q: 'npm:q' }, shim: { 'breeze.min': { deps: ['jquery', 'Q'] } } }"

I'm seeing the Q and jQuery scripts download in the network tab. Haven't been able to figure out why breeze isn't able to pick them up.

Thinking it has something to do with the way breeze does this, this and this.

note: I tested the above override with every format option

Breeze is known to work with requirejs- I must be missing something simple here.

current workaround

jspm install npm:q
jspm install jquery
jspm install npm:breeze-client -o "{ directories: { lib: 'build' },  main: 'breeze.min.js' }"

import Q from 'q';
import jQuery from 'jquery';  // jQuery must be imported before breeze.
import breeze from 'breeze-client';

breeze.config.setQ(Q);

// now breeze is ready to go...
export default breeze;

from registry.

It sounds like Q isn't defining into the window global, which is the way breeze expects to find it?

from registry.

To test, I installed the unminified version of breeze:

jspm install npm:breeze-client -o "{ directories: { lib: 'build' }, main: 'breeze.debug.js', format: 'amd', dependencies: { jquery: '^2.1.0', Q: 'npm:q' }, shim: { 'breeze.debug': { deps: ['jquery', 'Q'] } } }"

When the application does import breeze from 'breeze-client';, I hit the breakpoints I had set in both Q and jQuery to confirm they were being loaded. When I arrived at a breakpoint in breeze, neither Q or jQuery are defined:

Later on, some application code uses breeze to make an ajax call. At this point, "Q" is defined, although not on the window object:

from registry.

Yes it should have window.Q and window.jQuery defined - I'm not sure why they're not.

If you look at the top of the source file, can you see the shim? It should look like "deps jquery".

from registry.

yep:

"format global";
"deps jquery";
"deps Q";

(was most recently testing with format: global)

from registry.

That looks right. I'd be suprised if window.jQuery and window.Q are not defined with the above settings. If you add a console.log right after to check if they are what do you get? If you just import jQuery or Q on their own, can you see them defined on Window?

from registry.

I restarted with new package.json, config.js, etc- here's what I'm seeing: 56 second screencast.

window.jQuery IS defined. window.Q is not. When I import Q by itself it's not defined on window either.

I must have screwed something during all the testing I was doing- it's like you've said all along, issue is related to Q.

from registry.

@jdanyow thanks for persevering on this. Right so you need to ensure Q is defining onto the window. And because we're loading it from npm, it's not defining onto the window as this isn't the common practice for CommonJS modules.

That's why I'd suggest checking which version of Q bower uses and look at using that, as that version would be designed for the browser and set to define the global.

from registry.

bower is installing 2.0.2- same as what jspm has been installing:

Took a look at the Q 2.0.2 code, couldn't see any place where it defined a global. The Q readme say v2 is experimental.

Decided to test with Q 1.1.2, used this override:

jspm install npm:breeze-client -o "{ directories: { lib: 'build' }, main: 'breeze.debug.js', format: 'global', dependencies: { jquery: '^2.1.0', Q: 'npm:[email protected]' }, shim: { 'breeze.debug': { deps: ['jquery', 'Q'] } } }"

This seemed like a long shot, the Q 1.1.2 source says it only creates a global when loaded via a script tag:

Ended up here when debugging this:

Previously I had reported the jQuery was defined when stopped at a breakpoint on the "deps.." shims. Lately I've been testing by backing out everything in my config.js and packages.config, deleting my jspm_packages folder, running a fresh install, etc. This probably isn't necessary but it's helpful to assure myself that I'm testing from a "clean" spot.

I'm now seeing both jQuery and Q are not defined.

Here's a quick 1.5 minute screencast of me running through the steps to clean up, install and debug this:
http://screencast.com/t/z37xFrbXK

I'm probably doing something silly- I'm a noob on the git/gulp/jspm/etc scene.

from registry.

@jdanyow try using q from GitHub instead of npm.

from registry.

You want Q to load as a global, so you probably want to override the GitHub version with "format": "global".

from registry.

Before I do that- did you see this: http://screencast.com/t/z37xFrbXK

Am I doing something silly? Why is window.jQuery undefined?

Is it possible that when using format=global, system needs to make sure any shim dependencies are also installed as globals on window?

from registry.

@jdanyow it looks like you're using jQuery from npm, which would cause the same issue as with Q - it won't define the global. I'd suggest doing jspm install jquery -f.

from registry.

ok- that makes sense, given all this is to create a package override for breeze, is it possible to express what you're suggesting in the override syntax?

In other words, people won't explicitly be installing jQuery or Q, they'll be executing jspm install breeze-client which in turn needs to bring in jQuery and Q in a way that will work for breeze.

jspm install npm:breeze-client -o "{ directories: { lib: 'build' }, main: 'breeze.debug.js', format: 'global', dependencies: { jquery: '^2.1.0', Q: 'npm:[email protected]' }, shim: { 'breeze.debug': { deps: ['jquery', 'Q'] } } }"

from registry.

@jdanyow so the point is that you need to first create the override for Q, so that you can create the override for breeze:

jspm install npm:q -o "{ shim: { 'path/to/q': { exports: 'Q' } } }"
jspm install npm:breeze-client -o "{ directories: { lib: 'build' }, main: 'breeze.debug.js', format: 'global', dependencies: { jquery: '^2.1.0', Q: 'npm:[email protected]' }, shim: { 'breeze.debug': { deps: ['jquery', 'Q'] } } }"

Something like that? Sorry I can't be of more help right now.

from registry.

Hey @guybedford, looks like I won't need a complex package override for breeze after all...

@wardbell recommended replacing breeze's standard ajax adapter and promise implementations with implementations that use ES6 promises and aurelia's http-client. This way breeze won't have deps on Q and jQuery.

I appreciate the help troubleshooting this. Apologies for bugging you.

-jd

from registry.

Great to hear that. Just let me know if you need more help.

from registry.