JSZip in Jive theme

Question

Has anyone had any success in implementing JSZip within their Jive theme? I am having trouble instantiating the JSZip object. Here is the setup: I have a Jive theme that has some custom JS files within a script folder. The JS files are included via script tags in the javascript.soy template like this:

/*javascript.soy*/ <script src="{themeUrl('/scripts/carousel.js')}"></script> <script src="{themeUrl('/scripts/jszip.min.js')}"></script> <script src="{themeUrl('/scripts/our-theme.js')}"></script>

our-theme.js attempts to instantiate a new instance of JSZip like this:

var zip = new JSZip();

The browser throws an error (visible in firebug or Chrome Developer Console) of "ReferenceError: JSZip is not defined". This is strange because I can view the script file via Firebug or by clicking "View Page Source" I can verify that the proper script tag for jszip.min.js which has the JSZip definition, has been generated and is accessible.

I am able to call functions in other external JS files so the only thing I can think of is that I am instantiating this object incorrectly. Per the JSZip documentation:

For a browser, there are two interesting files : dist/jszip.js and dist/jszip.min.js (include just one). If you use an AMD loader (RequireJS for example) JSZip will register itself : you just have to put the js file at the right place, or configure the loader (see here for RequireJS). Without any loader, JSZip will declare in the global scope a variable named JSZip.

I am not using RequireJS. So JSZip should be registered as a global variable but I cant access it and down see it in the window collection.

I looked through the community but couldnt see anyone else that used JSZip with Jive but I figure it doesn't hurt to try:)

Answer 1

JSZip uses browserify to generate the dist/ files with an UMD definition. If the UMD code detects an AMD environment (a define function with an amd attribute exists) or a nodejs environment (a module object and an exports object exist) it won't expose the global JSZip variable.

In your browser, you should check if you are in this situation (these checks come from the generated jszip.js file):

console.log("looks like AMD", "function" == typeof define && define.amd);
console.log("looks like nodejs", "object" == typeof exports && "undefined" != typeof module);