I'm beginning to modularize a non-steal/non-amd app, and I think I've found an issue where already-loaded files are not properly exporting values from their shim config. I'm not certain that I'm doing everything properly, though -- can someone confirm whether or not this is an error on my side?
In the markup, we're already loading jQuery and a bunch of 3rd party plugins -- I don't want to modify any of that code yet, since several other files/pages depend on it. So, I mark those libraries as "executed" before steal starts up.
And then stealconfig.js sets up shims for those libraries. I'm intentionally not "ignore"-ing those libraries, because they'll (hopefully) be loaded dynamically soon.
Then we define new modules using the normal syntax:
Here's the problem: With the above, the steal callback for my module is being called with (undefined, can), instead of (jQuery, can).
Tracing through steal/steal.js, here's what's going on:
Here's a solution:
I was able to get an exported value from an already-executed script by adding a manual check when "exports" are detected for an already-executed module, after line 2827
Again, I'm not certain whether my steal setup for this is correct. If this is indeed an issue with steal itself, I can create an issue and/or pull request if desired. If not, could somebody put me back on the right path?
Thanks,
Steven
In the markup, we're already loading jQuery and a bunch of 3rd party plugins -- I don't want to modify any of that code yet, since several other files/pages depend on it. So, I mark those libraries as "executed" before steal starts up.
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
- <!-- many more files which we aren't quite ready to migrate to steal yet -->
- <script type="text/javascript>
- window.steal = {
- executed: [
- 'jquery',
- // etc
- ]
- };
- </script>
- <script type="text/javascript" src="/js/steal/steal.js?pages/account/detail.js"></script>
And then stealconfig.js sets up shims for those libraries. I'm intentionally not "ignore"-ing those libraries, because they'll (hopefully) be loaded dynamically soon.
- steal.config({
- map: {
- "*": {
- "jquery/jquery.js": "jquery",
- // etc
- }
- },
- paths: {
- "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js",
- "can/": "lib/canjs/",
- // etc
- },
- shim: {
- "jquery": {
- exports: "jQuery"
- },
- // etc
- },
- ext: { /* ...*/ }
});
Then we define new modules using the normal syntax:
- steal('jquery', 'can', /* etc */, function($, can) {
- // implementation of pages/account/detail.js, the module specified when loading steal.js
- // ...
- });
Here's the problem: With the above, the steal callback for my module is being called with (undefined, can), instead of (jQuery, can).
Tracing through steal/steal.js, here's what's going on:
- jquery.js loads
- steal.js loads
- Steal recognizes that jquery has already executed, and looks for exports (line 1503). There aren't any, because the config which declares jquery's export hasn't loaded yet.
- stealconfig.js loads
- When the config updates from stealconfig.js, it hands the shim config to setupShims()
- setupShims() adds an "exports" function (line 2811) which would normally be run when the script is executed, but since jquery.js has already been executed it never gets run.
- When my module loads, then, there's no .value available for jquery (line 1438), so the callback just receives undefined.
Here's a solution:
I was able to get an exported value from an already-executed script by adding a manual check when "exports" are detected for an already-executed module, after line 2827
- if (module.completed) {
- module.exports();
- }
Again, I'm not certain whether my steal setup for this is correct. If this is indeed an issue with steal itself, I can create an issue and/or pull request if desired. If not, could somebody put me back on the right path?
Thanks,
Steven