eslint fixes

.eslintrc.json

@@ -77,7 +77,7 @@
 		"no-implied-eval": "error",
 		"no-inline-comments": "off",
 		"no-inner-declarations": ["error", "functions"],
-		"no-invalid-this": "error",
+		"no-invalid-this": "off",
 		"no-iterator": "error",
 		"no-label-var": "error",
 		"no-labels": "error",
@@ -186,7 +186,9 @@
 		"arrow-body-style": "off",
 		"indent": "off",
 		"react/sort-comp": "off",
-		"react/jsx-no-bind": "off"
+		"react/jsx-no-bind": "off",
+		"no-extra-semi": "off",
+		"compat/compat": "off"
 	},
 	"globals": {
 		"ArrayBuffer": true,

package.json

@@ -7,7 +7,7 @@
 		"build": "preact build --template src/index.html --no-prerender",
 		"serve": "preact build && preact serve",
 		"dev": "preact watch --template src/index.html --https --no-prerender",
-		"lint": "eslint src/*.js src/components/*.jsx",
+		"lint": "eslint src",
 		"test": "jest ./tests",
 		"precommit": "lint-staged"
 	},
@@ -15,7 +15,10 @@
 		"extends": "eslint-config-synacor"
 	},
 	"eslintIgnore": [
-		"build/*"
+		"build/*",
+		"src/lib/",
+		"src/tests/",
+		"src/CodeMirror.js"
 	],
 	"lint-staged": {
 		"*.{js,jsx,json,css,md}": [

src/analytics.js

@@ -1,6 +1,4 @@
-import {
+import { log } from './utils';
-	log
-} from "./utils";
 
 /* global ga */
 
@@ -13,10 +11,10 @@ export function trackEvent(category, action, label, value) {
 	if (window.ga) {
 		ga('send', 'event', category, action, label, value);
 	}
-};
+}
 
 // if online, load after sometime
-if (false && navigator.onLine && !window.DEBUG) {
+if (navigator.onLine && !window.DEBUG) {
 	/* eslint-disable */
 
 	// prettier-ignore

src/components/ContentWrap.jsx

@@ -559,7 +559,8 @@ export default class ContentWrap extends Component {
 		setTimeout(() => {
 			this.setPreviewContent(true);
 		}, 1500);
-		function checkWindow() {
+
+		var intervalID = window.setInterval(checkWindow => {
 			if (this.detachedWindow && this.detachedWindow.closed) {
 				clearInterval(intervalID);
 				document.body.classList.remove('is-detached-mode');
@@ -569,8 +570,7 @@ export default class ContentWrap extends Component {
 				// getting reflected while detached window was open)
 				this.setPreviewContent(true);
 			}
-		}
+		}, 500);
-		var intervalID = window.setInterval(checkWindow.bind(this), 500);
 	}
 
 	onMessageFromConsole() {

src/components/Modals.js

@@ -1,7 +0,0 @@
-import { h, Component } from 'preact';
-
-export default class Header extends Component {
-	render() {
-		return <header class={style.header} />;
-	}
-}

src/components/Notifications.jsx

@@ -23,11 +23,19 @@ export function Notifications(props) {
 					</li>
 					<li>
 						🚀 Popular libraries list updated. Thanks
-						<a href="https://github.com/diomed" target="_blank">
+						<a
+							href="https://github.com/diomed"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							@diomed
 						</a>{' '}
 						&{' '}
-						<a href="https://github.com/leninalbertolp" target="_blank">
+						<a
+							href="https://github.com/leninalbertolp"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							@leninalbertolp
 						</a>
 					</li>
@@ -40,10 +48,18 @@ export function Notifications(props) {
 					<li>
 						<strong>🚀 Announcement</strong>: Hi! I am Kushagra Gour (creator of
 						Web Maker) and I have launched a
-						<a href="https://patreon.com/kushagra" target="_blank">
+						<a
+							href="https://patreon.com/kushagra"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							Patreon campaign
 						</a>. If you love Web Maker, consider pledging to
-						<a href="https://patreon.com/kushagra" target="_blank">
+						<a
+							href="https://patreon.com/kushagra"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
 							support me
 						</a>{' '}
 						:)
@@ -52,6 +68,7 @@ export function Notifications(props) {
 						<a
 							href="https://github.com/chinchang/web-maker/issues"
 							target="_blank"
+							rel="noopener noreferrer"
 						>
 							Suggest features or report bugs.
 						</a>
@@ -63,6 +80,7 @@ export function Notifications(props) {
 						<a
 							href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
 							target="_blank"
+							rel="noopener noreferrer"
 							class="btn"
 						>
 							Please rate Web Maker <span class="star" />
@@ -70,7 +88,7 @@ export function Notifications(props) {
 						<a
 							href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor,chrome,extension"
 							target="_blank"
-							target="_blank"
+							rel="noopener noreferrer"
 							class="btn"
 						>
 							Share it

src/components/SplitPane.jsx

@@ -33,16 +33,22 @@ export class SplitPane extends Component {
 			options.onDragStart = this.props.onDragStart;
 		}
 
+		/* eslint-disable new-cap */
 		this.splitInstance = Split(
 			this.props.children.map(node => '#' + node.attributes.id),
 			options
 		);
+		/* eslint-enable new-cap */
+
 		if (this.props.onSplit) {
 			this.props.onSplit(this.splitInstance);
 		}
 	}
 	render() {
+		/* eslint-disable no-unused-vars */
 		const { children, ...props } = this.props;
+		/* eslint-enable no-unused-vars */
+
 		return <div {...props}>{this.props.children}</div>;
 	}
 }

src/components/common.jsx

@@ -11,7 +11,10 @@ class Clickable extends Component {
 		this.props.onClick(e);
 	}
 	render() {
+		/* eslint-disable no-unused-vars */
 		const { onClick, Tag, ...props } = this.props;
+		/* eslint-enable no-unused-vars */
+
 		return <Tag onClick={this.handleClick.bind(this)} {...props} />;
 	}
 }

src/computes.js

@@ -1,42 +1,45 @@
-import {
+import { deferred } from './deferred';
-	deferred
+import { addInfiniteLoopProtection } from './utils';
-} from './deferred';
+import { HtmlModes, CssModes, JsModes } from './codeModes';
-import {
-	addInfiniteLoopProtection
-} from './utils';
-import {
-	HtmlModes,
-	CssModes,
-	JsModes
-} from './codeModes';
 
 const esprima = require('esprima');
 
 // computeHtml, computeCss & computeJs evaluate the final code according
 // to whatever mode is selected and resolve the returned promise with the code.
-export function computeHtml(code, mode) {
+export function computeHtml(userCode, mode) {
+	var code = userCode;
 	var d = deferred();
 	if (mode === HtmlModes.HTML) {
 		d.resolve({
 			code
 		});
 	} else if (mode === HtmlModes.MARKDOWN) {
-		d.resolve(window.marked ? {
+		d.resolve(
+			window.marked
+				? {
 						code: marked(code)
-		} : {
+				  }
+				: {
 						code
-		});
+				  }
+		);
 	} else if (mode === HtmlModes.JADE) {
-		d.resolve(window.jade ? {
+		d.resolve(
+			window.jade
+				? {
 						code: jade.render(code)
-		} : {
+				  }
+				: {
 						code
-		});
+				  }
+		);
 	}
 
 	return d.promise;
 }
-export function computeCss(code, mode, settings) {
+export function computeCss(userCode, mode, settings) {
+	var code = userCode;
+
 	var d = deferred();
 	var errors;
 
@@ -47,7 +50,8 @@ export function computeCss(code, mode, settings) {
 	} else if (mode === CssModes.SCSS || mode === CssModes.SASS) {
 		if (window.sass && code) {
 			window.sass.compile(
-				code, {
+				code,
+				{
 					indentedSyntax: mode === CssModes.SASS
 				},
 				function(result) {
@@ -55,10 +59,12 @@ export function computeCss(code, mode, settings) {
 					if (result.line && result.message) {
 						errors = {
 							lang: 'css',
-							data: [{
+							data: [
+								{
 									lineNumber: result.line - 1,
 									message: result.message
-							}]
+								}
+							]
 						};
 					}
 					d.resolve({
@@ -82,15 +88,17 @@ export function computeCss(code, mode, settings) {
 			function(error) {
 				errors = {
 					lang: 'css',
-					data: [{
+					data: [
+						{
 							lineNumber: error.line,
 							message: error.message
-					}]
+						}
+					]
 				};
 				d.resolve({
 					code: '',
 					errors
-				})
+				});
 			}
 		);
 	} else if (mode === CssModes.STYLUS) {
@@ -102,10 +110,12 @@ export function computeCss(code, mode, settings) {
 				tempArr.pop(); // This is empty string in the end
 				errors = {
 					lang: 'css',
-					data: [{
+					data: [
+						{
 							lineNumber: +error.message.match(/stylus:(\d+):/)[1] - 298,
 							message: tempArr.pop()
-					}]
+						}
+					]
 				};
 			}
 			d.resolve({
@@ -140,7 +150,15 @@ export function computeCss(code, mode, settings) {
 	return d.promise;
 }
 
-export function computeJs(code, mode, shouldPreventInfiniteLoops, infiniteLoopTimeout) {
+/* eslint-disable max-params */
+/* eslint-disable complexity */
+export function computeJs(
+	userCode,
+	mode,
+	shouldPreventInfiniteLoops,
+	infiniteLoopTimeout
+) {
+	var code = userCode;
 	var d = deferred();
 	var errors;
 
@@ -157,16 +175,20 @@ export function computeJs(code, mode, shouldPreventInfiniteLoops, infiniteLoopTi
 		} catch (e) {
 			errors = {
 				lang: 'js',
-				data: [{
+				data: [
+					{
 						lineNumber: e.lineNumber - 1,
 						message: e.description
-				}]
+					}
+				]
 			};
 		} finally {
 			if (shouldPreventInfiniteLoops !== false) {
 				// If errors are found in last parse, we don't run infinite loop
 				// protection otherwise it will again throw error.
-				code = errors ? code : addInfiniteLoopProtection(code, {
+				code = errors
+					? code
+					: addInfiniteLoopProtection(code, {
 							timeout: infiniteLoopTimeout
 					  });
 			}
@@ -188,14 +210,18 @@ export function computeJs(code, mode, shouldPreventInfiniteLoops, infiniteLoopTi
 		} catch (e) {
 			errors = {
 				lang: 'js',
-				data: [{
+				data: [
+					{
 						lineNumber: e.location.first_line,
 						message: e.message
-				}]
+					}
+				]
 			};
 		} finally {
 			if (shouldPreventInfiniteLoops !== false) {
-				code = errors ? code : addInfiniteLoopProtection(code, {
+				code = errors
+					? code
+					: addInfiniteLoopProtection(code, {
 							timeout: infiniteLoopTimeout
 					  });
 			}
@@ -217,17 +243,21 @@ export function computeJs(code, mode, shouldPreventInfiniteLoops, infiniteLoopTi
 		} catch (e) {
 			errors = {
 				lang: 'js',
-				data: [{
+				data: [
+					{
 						lineNumber: e.lineNumber - 1,
 						message: e.description
-				}]
+					}
+				]
 			};
 		} finally {
 			code = Babel.transform(code, {
 				presets: ['latest', 'stage-2', 'react']
 			}).code;
 			if (shouldPreventInfiniteLoops !== false) {
-				code = errors ? code : addInfiniteLoopProtection(code, {
+				code = errors
+					? code
+					: addInfiniteLoopProtection(code, {
 							timeout: infiniteLoopTimeout
 					  });
 			}
@@ -256,13 +286,16 @@ export function computeJs(code, mode, shouldPreventInfiniteLoops, infiniteLoopTi
 				/* eslint-disable no-throw-literal */
 				errors = {
 					lang: 'js',
-					data: [{
+					data: [
+						{
 							message: code.diagnostics[0].messageText,
-						lineNumber: ts.getLineOfLocalPosition(
+							lineNumber:
+								ts.getLineOfLocalPosition(
 									code.diagnostics[0].file,
 									code.diagnostics[0].start
 								) - 1
-					}]
+						}
+					]
 				};
 			}
 			code = code.outputText;
@@ -275,10 +308,10 @@ export function computeJs(code, mode, shouldPreventInfiniteLoops, infiniteLoopTi
 				code,
 				errors
 			});
-		} catch (e) {
+		} catch (e) {}
-
-		}
 	}
 
 	return d.promise;
 }
+/* eslint-enable max-params */
+/* eslint-enable complexity */

src/utils.js

@@ -300,7 +300,10 @@ export function loadJS(src) {
 	return d.promise;
 }
 
+/* eslint-disable max-params */
 export function getCompleteHtml(html, css, js, item, isForExport) {
+	/* eslint-enable max-params */
+
 	if (!item) {
 		return '';
 	}