enable-browser-mode - npm Package Compare versions

Comparing version 1.24.0 to 1.26.0

package.json

		{
		"name": "enable-browser-mode",
		"version": "1.24.0",
		"version": "1.26.0",
		"description": "Simulate the browser with ease by setting the global object to a JSDOM window and painlessly run browser JS without errors.",
		@@ -5,0 +5,0 @@ "main": "index.js",

README.md

		# Enable browser mode
		The goal of this package is to work as a quick-and-dirty one-liner that will allow a Node process to imitate a browser, letting you import traditional browser JS by setting the global object to `window` and binding relevant native prototype methods like `window.Event`.

		The goal of this package is to work as a quick-and-dirty one-liner that will allow Node to import 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.

		```
		@@ -9,3 +8,5 @@ /* [CommonJS] */
		```

		- or -

		```
		@@ -17,7 +18,10 @@ /* [ES6] */
		No variable assignment required, just call it! You can then require browser JS with:

		```
		include('./jquery.min.js');

		// also available at window.include()
		```

		Which will evaluate that script in the global context. (Make sure the scripts supplied to `window.include()` are trusted.)
		Which will evaluate that script in the global context. Make sure the scripts supplied to `window.include()` are trusted.

		@@ -30,6 +34,7 @@ ## Example

		> ReferenceError: document is not defined
		// ReferenceError: document is not defined
		```

		Works like a charm:

		```
		@@ -39,20 +44,24 @@ require('enable-browser-mode');

		> HTMLAnchorElement {Symbol(impl): HTMLAnchorElementImpl}
		// HTMLAnchorElement {Symbol(impl): HTMLAnchorElementImpl}
		```

		## Use cases
		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 necessary globals and bind `window` as the global object, meaning we can write all of our browser-optimized (and DOM-dependent) code in a file like `browser.js` and reuse that same code in Node with `include('browser.js')` or `window.include('browser.js')`.

		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')`.
		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, resulting in a `ReferenceError`.

		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-mode`, 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();
		For server-side rendering in Node, `web-widgets` builds out the widget tree on the virtual DOM and then exports it as flat HTML using the `HTMLElement.outerHTML` property; in the browser, the DOM is manipulated directly on-the-fly (i.e. with `Node.appendChild`). By simulating the browser global, we can use the exact same core library for both cases, the difference being just `Widget.render(HTMLElement)` to render into a DOM element and `Widget.export()` to dump the outerHTML.

		// code like you're in the browser =)
		```
		Using `enable-browser-mode`, all that is needed to reuse original browser libraries (including jQuery, HammerJS, etc.) is creating an separate JS file for your Node logic, importing this package, and then importing your browser code:

		```
		require('enable-browser-mode');

		window.include('browser.js');
		myBrowserObject.doBrowserStuff();

		// code like you're in the browser =)
		```

		## Unsafe Mode
		By default, JSDOM is called with `runScripts: 'outside-only'`. Set `global.UNSAFE_MODE` before your `require('enable-browser-mode')` call to enable dangerous mode and execute external scripts when added to DOM.
		By default, JSDOM is called with `runScripts: 'outside-only'`. If you need to execute external JS (and not just add a `<script>` element to the DOM), set `global.UNSAFE_MODE` before your `require('enable-browser-mode')` call.

test/widgets.cc.js

enable-browser-mode - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics