window object definition

[cannoneyed]

In devtool, window is defined as the normal window object as in a browser. This isn't really an issue, per se, but it is something that needs to be addressed before using the tool with certain isomorphic modules that are intended to run on either the client or server.

It's not surprising behavior given that the node app is being loaded into an electron-wrapped web page, but it does cause a lot of issues when using code that decides how to run based on the presence of a window object. I've gotten around the issue as follows:

// Change this...
if (typeof window === 'undefined') {
    // Do server-type stuff
} else if (typeof window === 'object') {
    // Do client-type stuff
}

// To this...
if (typeof window === 'undefined' || typeof process === 'object') {
    // Do server-type stuff, since process is a node-specific variable
} else if (typeof window === 'object' && typeof process === 'undefined') {
    // Do client-type stuff
}

One can also check typeof require === 'function' to make sure the code is running "in node" vs. "in the browser". Once these types of issues are resolved, even complex web apps can be run and debugged!

Fantastic work.

[mattdesl]

Yeah, it's a bit tricky. That sort of existence check is very fragile, as there are lots of solutions nowadays that blend browser/Node features like process and require.

Do you have any modules in particular that are breaking or acting strangely? It would be good to test against real-world use cases rather than hypotheticals.

[cannoneyed]

The module that borked things up for me was https://github.com/mio/mio.

Perhaps https://github.com/facebook/react might be useful to check out?

[cannoneyed]

Here's a bit of a wacky idea... could you wrap all of the app's code in an IIFE to override the window variable like so?

(function (window) {
  // app code goes here...
  console.log(window) // undefined!
})()

[mattdesl]

Yes I was thinking the same. We are already wrapping the code in closures anyways for Node requires. It will break the odd app that does something like this, but it's fairly non standard:

// module A
global.window = 'foo';

// module B
console.log(window);

It would probably come in through a flag like --no-browser-globals (or maybe something more concise than that!) which also removes document and other things.

[mattdesl]

Also it will mean window.close() is not possible.

[mattdesl]

Pushed no-browser-globals branch.

You can try it like so:

npm i Jam3/devtool#no-browser-globals -g
devtool my-file.js --no-bg

This doesn't work in the REPL/Console, though. Going to sit on it for a while and think if there is any other way to fix this.

[mattdesl]

Pushed to 1.6.0