enable-browser-mode
Advanced tools
Simulate the browser with ease by setting the global object to a JSDOM window and painlessly run browser JS without errors.
The goal of this package is to work as a quick-and-dirty one-liner that will allow Node to require and otherwise execute traditional browser code without throwing errors. It also sets the global object to window, and aims to simulate the browser as realistically as possible.
/* [CommonJS] */
require('enable-browser-mode');
- or -
/* [ES6] */
import 'enable-browser-mode'
No variable assignment required, just call it! The variables are stored on the global object so you can refer to them as you normally would in browser JS.
Won't work:
console.log(document.createElement('a'));
> ReferenceError: document is not defined
Works like a charm:
require('enable-browser-mode');
console.log(document.createElement('a'));
> HTMLAnchorElement {Symbol(impl): HTMLAnchorElementImpl}
The specific need for this functionality came from the web-widgets package, which generates widget trees using DOM operations like document.createElement(). The Node runtime cannot build out this widget tree by default, as it does not have access to the window and document variables, so it throws a ReferenceError.
By importing this package (which depends on JSDOM), we can expose the window and document globals to the whole project, meaning we can write all of our browser-optimized (and DOM-heavy) code in a file like browser.js, but still use that same code for server-side rendering in Node with require('browser.js').
In Node, web-widgets builds out the widget tree on the virtual DOM and then exports it as flat HTML using the Node.outerHTML property, and in the browser, the DOM is manipulated directly on-the-fly (i.e. with Node.appendChild). With enable-browser-window, all that is needed to reuse the original browser library is creating an separate JS file for Node, importing this package, and then importing your browser code:
require('enable-browser-mode');
require('browser.js');
myBrowserObject.doBrowserStuff();
// code like you're in the browser =)
This package simply creates a blank JSDOM with four lines of code, and stores the global window and document variables, which point to the empty DOM:
let JSDOM = require('jsdom'),
DOM = new JSDOM.JSDOM(`<html><body></body></html>`);
global.window = DOM.window,
global.document = window.document;
It should really take zero extra lines to run browser-compatible JS in Node, but one line will do for now. The important part is that instead of writing everything for Node and then using browserify and other tools to polyfill it for the browser, we can write strict code for the browser and force Node to interpret Javascript in the same way the browser does.
Why the Node runtime does not expose window and document OOTB is a valid question, as whatever rationale exists behind that decision cannot be more concrete than the principle that code which can execute in a browser should be able to execute in the Node runtime. Javascript output from one environment should === the same Javascript run in another. It's supposed to be a lingua franca!
FAQs
Simulate the browser with ease by setting the global object to a JSDOM window and painlessly run browser JS without errors.
The npm package enable-browser-mode receives a total of 2 weekly downloads. As such, enable-browser-mode popularity was classified as not popular.
We found that enable-browser-mode demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.