Using Client Side Library with Require

[jtenner]

Libraries that contain references to document fail when using require('ClientSideDOMLibraryHere')

The workaround is easy, because the library can be included as a script tag inside the document, but I was curious if this could be changed so that require has access to the document/window object of the calling window?

I'm willing to admit that I may be barking up the wrong tree here. It would be "nice" to have this feature.

[pluma]

This is also true for alert and other properties of the window object. The reason this fails is explained in the wiki:

When a file is loaded via require in front-end code it is executed in a node frame, which has a different context than a browser frame. There is a window object in that context, but the global object is different (in the browser, the window object is the global object; in the node frame, window is just a property of the global object).

I don't think this is easily solvable inside node-webkit itself.

If you have access to the source code of the client side library, you should qualify all references (i.e. window.document rather than document) if you want to require them. The alternative would be only using require in your back-end code (i.e. the node script than can be launched in the background -- check the manifest documentation for the specifics).

If you want to write your front-end code "the node way" (i.e. using require, module and exports a la CommonJS), you could also simply use browserify instead, which bundles all your front-end code into a single file you can include with a script tag. The bundle contains a require shim, which should override node-webkit's require (so you can't do crazy things like access the file system in front-end code using fs or launch an http server inside your front-end code anymore), but because it effectively loads all your front-end code from a script tag, you can use libraries that assume the global context to be the window object without problems.

The obvious benefit of using browserify is that your could is easier to port to a traditional web app (i.e. node server with front-end code run in a regular browser). The obvious drawback is that the "crazy things" direct access to node's core libraries in your front-end code enables you to do are part of what makes node-webkit so uniquely interesting (making it easier to write desktop apps).

[katanacrimson]

You'd have to global it in or pass the window parameter programatically.

[jtenner]

@damianb
How would I pass the window parameter programmatically?

Do you have a code snippet or a reference?

@pluma
Do I have access to that global object within the client side library when calling require?

[katanacrimson]

@jtenner You could wrap said code in a function...e.g.:

module.exports = function(window) {
    // library here...
}

requiring like so:

library = require('library')(window)

[jtenner]

Thank you very much! This help was greatly appreciated.

[reinpk]

btw, it seems like another fix is to expose document as a global first thing:

/**
 * A fix for client-side components to work via require.
 */
global.document = window.document;

This is working for me so far :)