Quantcast
Channel: JavaScriptMVC Forum
Viewing all articles
Browse latest Browse all 3491

List of StealJS issues & workarounds, from migrating a legacy project

$
0
0
I've recently tried to migrate to the latest StealJS for a project that used "legacy StealJS" from JavascriptMVC 3.3. Here I'd like to list all the issues I came across, in the hope of helping others who plan to start using the new StealJS, and also to draw attention to the unsolved issues so that the community can go about solving them.

Please bear with me, it's taken a lot of time to report these issues, and I'm not yet done, especially with the more mysterious ones. I figured this list is more valuable earlier, even if a bit vague on some points. 

The issues that I needed to work-around manually:

1. There's no official version of CanJS that works with it (that includes working template loaders). I've been told the `minor` branch now works.
2. Modules get loaded with eval(...), instead of <script src="..."> which creates a few problems. (I'd really be happy for any way to load modules with script tags again.)
      a) Browsers other than Chrome don't give usable error stacktraces/debug them nicely. This makes it *really hard* to debug issues. ( Github #243 )
      b) If you serve your JS from a different domain (e.g. with a CDN) you must ensure each file has the CORS Access-Control-Allow-Origin header correctly.  (Github #251)
      c) The meaning of document.write() changes. If a library makes use of it, it will overwrite the whole document, instead of inserting into it.
3. Errors during module evaluation are caught, instead of being left uncaught.
      a) These errors won't trigger the JS debugger. This makes issues during module evaluation much harder to debug. ( Github #243 )
      b) For sites that use RavenJS or similar for JS error logging, these errors won't hit `window.onerror` and won't get logged. ( Github #243 )
      c) In production mode, these errors are suppressed and there's no indication an error has occurred. ( Github #243 )
      d) I have to hack out 3 try/catch blocks to get error feedback again. (These hacks are in Github #245)
4. Some modules or libraries have compatibility issues:
      a) Modules that use the string "exports" may break on load. (I added a PR with a test case, but I can't find it, closest thing is this comment)
      b) Modules that write to the global namespace break, if they rely on `this` === `window` IIRC. (TODO)
      c) Some modules trigger a "Multiple defines for anonymous module" error. I think this happens if they hook into `define()` or provide their own internal `define()`. (TODO)
5. Multi-build issues:
      a) Multi-build has issues with uniqueness of generated bundles, when main modules share the same filename. (Github #52 and PR #54 and PR #222)
      b) Multi-build has issues where it can generate long enough filenames that the filesystem breaks. (Github #47 and PR #50)
      c) Multi-build can't handle a module that behaves as both a main-module and non-main module. It throws an unfriendly error. (TODO)
      d) When loading a multi-build bundle in production mode, a "load is not in module table" error occurs.  (TODO)
6. Progressive loading: does a weird thing for me where it loads all bundles, after I progressively-load just a few. (TODO)
7. Some pages no longer finish loading under IE9 (and possibly IE8) when loaded from CDN. (PR #252)
8. can-event attributes in templates don't work in production build. (Github #59)
9. can.view('template.mustache') can't find a template preloaded with steal('template.mustache!') (PR #1206)
10. CSS build: CSS compression is unsafe by default.  (Github #60 and PR #86)
11. Tests don't work anymore:
      a) FuncUnit doesn't work with the new StealJS. (Github #83)
      b) can.util.fixture doesn't work with the new StealJS (PR #1239)

These issues are fixed on master, but not available in an official version yet:

12. steal-tools: `grunt build` says "Build successful" even if it failed.
13. steal-tools: errors during build (PR #49)

My notes for migrating a legacy StealJS project (in addition to Migration guide)

* steal('//path/module') isn't supported anymore, it must be steal('path/module')
* steal() now requires "!" suffix on non-JS dependencies, e.g. steal('path/style.css!') 
* stealconfig.js changes: (Most of this is in the steal-can-example repo)
      * System.config({...}) instead of steal.config({...})
      * map: keys and values should no longer have ".js" suffix.
      * shim: is now meta:
      * ext: 'css': "css" is now 'css: "$css"
      * ext: must be updated for templates, e.g. "mustache": "can/view/mustache/system"
      * Also for builds to work, needs a new line: System.buildConfig = {map: {"can/util/util" : "can/util/domless/domless"}};
* Main modules are loaded with slightly different syntax. (steal-can-example repo)
* `grunt build` to trigger the build process.
* Multi-build needs main modules defined in Gruntfile.js, instead of provided as command line arguments.



Viewing all articles
Browse latest Browse all 3491

Trending Articles