Require Node.js or a modern browser

sindresorhus · sindresorhus · commit 2947b1b7e35e · 2019-04-11T14:12:51.000+07:00
diff --git a/index.html b/index.html
@@ -62,7 +62,7 @@
 		</a>
 		<div class="container">
 			<section class="main span12 text-center">
-				<h1>is DevTools open?</h1>
+				<h1>Is DevTools open?</h1>
 				<h2 id="devtools-state"></h2>
 				<h3 id="devtools-orientation"></h3>
 				<div class="instruction">Try it out by opening DevTools</div>
@@ -74,16 +74,16 @@ <h3 id="devtools-orientation"></h3>
 			</footer>
 		</div>
 		<script src="index.js"></script>
-		<script>
-			var stateEl = document.querySelector('#devtools-state');
-			var oriEl = document.querySelector('#devtools-orientation');
+		<script type="module">
+			const stateElement = document.querySelector('#devtools-state');
+			const orientationElement = document.querySelector('#devtools-orientation');
 
-			stateEl.textContent = window.devtools.open ? 'yes' : 'no';
-			oriEl.textContent = window.devtools.orientation ? window.devtools.orientation : '';
+			stateElement.textContent = window.devtools.open ? 'yes' : 'no';
+			orientationElement.textContent = window.devtools.orientation ? window.devtools.orientation : '';
 
-			window.addEventListener('devtoolschange', function (e) {
-				stateEl.textContent = e.detail.open ? 'yes' : 'no';
-				oriEl.textContent = e.detail.orientation ? e.detail.orientation : '';
+			window.addEventListener('devtoolschange', event => {
+				stateElement.textContent = event.detail.open ? 'yes' : 'no';
+				orientationElement.textContent = event.detail.orientation ? event.detail.orientation : '';
 			});
 		</script>
 		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
diff --git a/index.js b/index.js
@@ -1,34 +1,38 @@
-/* eslint-disable spaced-comment */
 /*!
-	devtools-detect
-	Detect if DevTools is open
-	https://github.com/sindresorhus/devtools-detect
-	by Sindre Sorhus
-	MIT License
+devtools-detect
+Detect if DevTools is open
+https://github.com/sindresorhus/devtools-detect
+By Sindre Sorhus
+MIT License
 */
 (function () {
 	'use strict';
-	var devtools = {
+
+	const devtools = {
 		open: false,
 		orientation: null
 	};
-	var threshold = 160;
-	var emitEvent = function (state, orientation) {
+
+	const threshold = 160;
+
+	const emitEvent = (state, orientation) => {
 		window.dispatchEvent(new CustomEvent('devtoolschange', {
 			detail: {
 				open: state,
-				orientation: orientation
+				orientation
 			}
 		}));
 	};
 
-	setInterval(function () {
-		var widthThreshold = window.outerWidth - window.innerWidth > threshold;
-		var heightThreshold = window.outerHeight - window.innerHeight > threshold;
-		var orientation = widthThreshold ? 'vertical' : 'horizontal';
+	setInterval(() => {
+		const widthThreshold = window.outerWidth - window.innerWidth > threshold;
+		const heightThreshold = window.outerHeight - window.innerHeight > threshold;
+		const orientation = widthThreshold ? 'vertical' : 'horizontal';
 
-		if (!(heightThreshold && widthThreshold) &&
-      ((window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized) || widthThreshold || heightThreshold)) {
+		if (
+			!(heightThreshold && widthThreshold) &&
+			((window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized) || widthThreshold || heightThreshold)
+		) {
 			if (!devtools.open || devtools.orientation !== orientation) {
 				emitEvent(true, orientation);
 			}
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
 		"url": "sindresorhus.com"
 	},
 	"engines": {
-		"node": ">=0.10.0"
+		"node": ">=8"
 	},
 	"scripts": {
 		"test": "xo && tsd"
@@ -33,7 +33,7 @@
 	],
 	"devDependencies": {
 		"tsd": "^0.7.2",
-		"xo": "^0.16.0"
+		"xo": "^0.24.0"
 	},
 	"xo": {
 		"envs": [
diff --git a/readme.md b/readme.md
@@ -19,16 +19,17 @@ $ npm install devtools-detect
 
 ```html
 <script src="node_modules/devtools-detect/index.js"></script>
-<script>
-	// check if it's open
-	console.log('is DevTools open?', window.devtools.open);
-	// check it's orientation, null if not open
-	console.log('and DevTools orientation?', window.devtools.orientation);
-
-	// get notified when it's opened/closed or orientation changes
-	window.addEventListener('devtoolschange', function (e) {
-		console.log('is DevTools open?', e.detail.open);
-		console.log('and DevTools orientation?', e.detail.orientation);
+<script type="module">
+	// Check if it's open
+	console.log('Is DevTools open:', window.devtools.open);
+
+	// Check it's orientation, null if not open
+	console.log('DevTools orientation:', window.devtools.orientation);
+
+	// Get notified when it's opened/closed or orientation changes
+	window.addEventListener('devtoolschange', event => {
+		console.log('Is DevTools open:', event.detail.open);
+		console.log('DevTools orientation:', event.detail.orientation);
 	});
 </script>
 ```
