eslint fixes

.eslintrc.json

@@ -183,6 +183,8 @@
 		"yoda": ["error", "never"],
 		"brace-style": "off",
 		"lines-around-comment": "off",
+		"arrow-body-style": "off",
+		"indent": "off",
 		"react/sort-comp": "off",
 		"react/jsx-no-bind": "off"
 	},

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/components/*.jsx",
+		"lint": "eslint src/*.js src/components/*.jsx",
 		"test": "jest ./tests",
 		"precommit": "lint-staged"
 	},

src/components/AskToImportModal.jsx

@@ -1,34 +1,36 @@
-import { h, Component } from 'preact';
+import { h } from 'preact';
 import Modal from './Modal';
 
-export default class AskToImportModal extends Component {
+export function AskToImportModal({
-	render() {
+	show,
+	closeHandler,
+	oldSavedCreationsCount,
+	dontAskBtnClickHandler,
+	importBtnClickHandler
+}) {
 	return (
 		<Modal
 			extraClasses="ask-to-import-modal"
-				show={this.props.show}
+			show={show}
-				closeHandler={this.props.closeHandler}
+			closeHandler={closeHandler}
 		>
 			<h2>Import your creations in your account</h2>
 
 			<div>
 				<p>
-						You have <span>{this.props.oldSavedCreationsCount}</span> creations
+					You have <span>{oldSavedCreationsCount}</span> creations saved in your
-						saved in your local machine. Do you want to import those creations
+					local machine. Do you want to import those creations in your account
-						in your account so they are more secure and accessible anywhere?
+					so they are more secure and accessible anywhere?
 				</p>
 				<p>
-						It's okay if you don't want to. You can simply logout and access
+					It's okay if you don't want to. You can simply logout and access them
-						them anytime on this browser.
+					anytime on this browser.
 				</p>
 				<div class="flex flex-h-end">
-						<button onClick={this.props.dontAskBtnClickHandler} class="btn">
+					<button onClick={dontAskBtnClickHandler} class="btn">
 						Don't ask me again
 					</button>
-						<button
+					<button onClick={importBtnClickHandler} class="btn btn--primary ml-1">
-							onClick={this.props.importBtnClickHandler}
-							class="btn btn--primary ml-1"
-						>
 						Yes, please import
 					</button>
 				</div>
@@ -36,4 +38,3 @@ export default class AskToImportModal extends Component {
 		</Modal>
 	);
 }
-}

src/components/CodeMirrorBox.jsx

@@ -12,7 +12,6 @@ export default class CodeMirrorBox extends Component {
 	}
 
 	initEditor() {
-		const options = this.props.options;
 		this.cm = CodeMirror.fromTextArea(this.textarea, this.props.options);
 		if (this.props.onChange) {
 			this.cm.on('change', this.props.onChange);

src/components/ContentWrap.jsx

@@ -11,6 +11,9 @@ import { deferred } from '../deferred';
 import CssSettingsModal from './CssSettingsModal';
 const minCodeWrapSize = 33;
 
+/* global htmlCodeEl, jsCodeEl, cssCodeEl, logCountEl
+*/
+
 export default class ContentWrap extends Component {
 	constructor(props) {
 		super(props);
@@ -141,8 +144,8 @@ export default class ContentWrap extends Component {
 		} else {
 			// we need to store user script in external JS file to prevent inline-script
 			// CSP from affecting it.
-			writeFile('script.js', blobjs, function() {
+			writeFile('script.js', blobjs, () => {
-				writeFile('preview.html', blob, function() {
+				writeFile('preview.html', blob, () => {
 					var origin = chrome.i18n.getMessage()
 						? `chrome-extension://${chrome.i18n.getMessage('@@extension_id')}`
 						: `${location.origin}`;
@@ -150,7 +153,7 @@ export default class ContentWrap extends Component {
 					if (this.detachedWindow) {
 						this.detachedWindow.postMessage(src, '*');
 					} else {
-						frame.src = src;
+						this.frame.src = src;
 					}
 				});
 			});
@@ -248,9 +251,9 @@ export default class ContentWrap extends Component {
 					result[1].code || '',
 					result[2].code || ''
 				);
-				result.forEach(result => {
+				result.forEach(resultItem => {
-					if (result.errors) {
+					if (resultItem.errors) {
-						this.showErrors(result.errors.lang, result.errors.data);
+						this.showErrors(resultItem.errors.lang, resultItem.errors.data);
 					}
 				});
 			});

src/components/LibraryAutoSuggest.jsx

@@ -90,7 +90,7 @@ export class LibraryAutoSuggest extends Component {
 	onKeyDown(event) {
 		var selectedItemElement;
 		if (!this.isShowingSuggestions) {
-			return false;
+			return;
 		}
 
 		if (event.keyCode === 27) {

src/components/Login.jsx

@@ -1,5 +1,4 @@
 import { h, Component } from 'preact';
-import { jsLibs, cssLibs } from '../libraryList';
 import { trackEvent } from '../analytics';
 import { auth } from '../auth';
 

src/components/MainHeader.jsx

@@ -1,11 +1,10 @@
-import { h, Component } from 'preact';
+import { h } from 'preact';
 import { A } from './common';
 
 const DEFAULT_PROFILE_IMG =
 	"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z' /%3E%3C/svg%3E";
 
-export default class Header extends Component {
+export function MainHeader(props) {
-	render() {
 	return (
 		<div class="main-header">
 			<input
@@ -13,15 +12,15 @@ export default class Header extends Component {
 				id="titleInput"
 				title="Click to edit"
 				class="item-title-input"
-					value={this.props.title}
+				value={props.title}
-					onBlur={this.props.titleInputBlurHandler}
+				onBlur={props.titleInputBlurHandler}
 			/>
 			<div class="main-header__btn-wrap  flex  flex-v-center">
 				<a
 					id="runBtn"
 					class="hide flex flex-v-center hint--rounded hint--bottom-left"
 					aria-label="Run preview (Ctrl/⌘ + Shift + 5)"
-						onClick={this.props.runBtnClickHandler}
+					onClick={props.runBtnClickHandler}
 				>
 					<svg style="width: 14px; height: 14px;">
 						<use xlinkHref="#play-icon" />
@@ -29,7 +28,7 @@ export default class Header extends Component {
 				</a>
 
 				<A
-						onClick={this.props.addLibraryBtnHandler}
+					onClick={props.addLibraryBtnHandler}
 					data-event-category="ui"
 					data-event-action="addLibraryButtonClick"
 					class="flex-v-center hint--rounded hint--bottom-left"
@@ -38,19 +37,17 @@ export default class Header extends Component {
 					Add library
 					<span
 						id="js-external-lib-count"
-							style={`display:${
+						style={`display:${props.externalLibCount ? 'inline' : 'none'}`}
-								this.props.externalLibCount ? 'inline' : 'none'
-							}`}
 						class="count-label"
 					>
-							{this.props.externalLibCount}
+						{props.externalLibCount}
 					</span>
 				</A>
 
 				<a
 					class="flex  flex-v-center hint--rounded hint--bottom-left"
 					aria-label="Start a new creation"
-						onClick={this.props.newBtnHandler}
+					onClick={props.newBtnHandler}
 				>
 					<svg
 						style="vertical-align:middle;width:14px;height:14px"
@@ -62,10 +59,10 @@ export default class Header extends Component {
 				<a
 					id="saveBtn"
 					class={`flex  flex-v-center hint--rounded hint--bottom-left ${
-							this.props.isSaving ? 'is-loading' : ''
+						props.isSaving ? 'is-loading' : ''
-						} ${this.props.unsavedEditCount ? 'is-marked' : 0}`}
+					} ${props.unsavedEditCount ? 'is-marked' : 0}`}
 					aria-label="Save current creation (Ctrl/⌘ + S)"
-						onClick={this.props.saveBtnHandler}
+					onClick={props.saveBtnHandler}
 				>
 					<svg
 						style="vertical-align:middle;width:14px;height:14px"
@@ -81,10 +78,10 @@ export default class Header extends Component {
 				<a
 					id="openItemsBtn"
 					class={`flex  flex-v-center hint--rounded hint--bottom-left ${
-							this.props.isFetchingItems ? 'is-loading' : ''
+						props.isFetchingItems ? 'is-loading' : ''
 					}`}
 					aria-label="Open a saved creation (Ctrl/⌘ + O)"
-						onClick={this.props.openBtnHandler}
+					onClick={props.openBtnHandler}
 				>
 					<svg
 						style="width:14px;height:14px;vertical-align:middle;"
@@ -98,7 +95,7 @@ export default class Header extends Component {
 					Open
 				</a>
 				<A
-						onClick={this.props.loginBtnHandler}
+					onClick={props.loginBtnHandler}
 					data-event-category="ui"
 					data-event-action="loginButtonClick"
 					class="hide-on-login flex  flex-v-center  hint--rounded  hint--bottom-left"
@@ -107,7 +104,7 @@ export default class Header extends Component {
 					Login/Signup
 				</A>
 				<A
-						onClick={this.props.profileBtnHandler}
+					onClick={props.profileBtnHandler}
 					data-event-category="ui"
 					data-event-action="headerAvatarClick"
 					aria-label="See profile or Logout"
@@ -116,11 +113,7 @@ export default class Header extends Component {
 					<img
 						id="headerAvatarImg"
 						width="20"
-							src={
+						src={props.user ? props.user.photoURL || DEFAULT_PROFILE_IMG : ''}
-								this.props.user
-									? this.props.user.photoURL || DEFAULT_PROFILE_IMG
-									: ''
-							}
 						class="main-header__avatar-img"
 					/>
 				</A>
@@ -128,4 +121,3 @@ export default class Header extends Component {
 		</div>
 	);
 }
-}

src/components/Modal.jsx

@@ -19,7 +19,7 @@ export default class Modal extends Component {
 		}
 	}
 	componentDidUpdate(prevProps) {
-		if (this.props.show != prevProps.show) {
+		if (this.props.show !== prevProps.show) {
 			document.body.classList[this.props.show ? 'add' : 'remove'](
 				'overlay-visible'
 			);

src/components/SavedItemPane.jsx

@@ -165,7 +165,6 @@ export default class SavedItemPane extends Component {
 
 	searchInputHandler(e) {
 		const text = e.target.value;
-		let el;
 		if (!text) {
 			this.setState({
 				filteredItems: this.items

src/components/SplitPane.jsx

@@ -1,6 +1,5 @@
 import { h, Component } from 'preact';
 import Split from 'split.js';
-import { log } from '../utils';
 
 export class SplitPane extends Component {
 	// shouldComponentUpdate(nextProps, nextState) {
@@ -34,7 +33,6 @@ export class SplitPane extends Component {
 			options.onDragStart = this.props.onDragStart;
 		}
 
-		// log('SIZE UPDATTED', ...options);
 		this.splitInstance = Split(
 			this.props.children.map(node => '#' + node.attributes.id),
 			options

src/components/SupportDeveloperModal.jsx

@@ -1,14 +1,9 @@
-import { h, Component } from 'preact';
+import { h } from 'preact';
 import Modal from './Modal';
 
-export default class SupportDeveloperModal extends Component {
+export function SupportDeveloperModal({ show, closeHandler }) {
-	render() {
 	return (
-			<Modal
+		<Modal extraClasses="pledge-modal" show={show} closeHandler={closeHandler}>
-				extraClasses="pledge-modal"
-				show={this.props.show}
-				closeHandler={this.props.closeHandler}
-			>
 			<div class="tac">
 				<h1>Support the Developer</h1>
 				<p>
@@ -28,10 +23,10 @@ export default class SupportDeveloperModal extends Component {
 						rel="noopener noreferrer"
 					>
 						side projects
-						</a>, I am accepting donations. Your pledge, no matter how small,
+					</a>, I am accepting donations. Your pledge, no matter how small, will
-						will act as an appreciation towards my work and keep me going
+					act as an appreciation towards my work and keep me going forward
-						forward making Web Maker more awesome🔥. So please consider
+					making Web Maker more awesome🔥. So please consider donating. 🙏🏼
-						donating. 🙏🏼 (could be as small as $1/month).
+					(could be as small as $1/month).
 				</p>
 
 				<div
@@ -65,4 +60,3 @@ export default class SupportDeveloperModal extends Component {
 		</Modal>
 	);
 }
-}

src/components/app.jsx

@@ -1,6 +1,9 @@
+/* global htmlCodeEl, cssCodeEl, jsCodeEl, runBtn
+*/
+
 import { h, Component } from 'preact';
 
-import MainHeader from './MainHeader.jsx';
+import { MainHeader } from './MainHeader.jsx';
 import ContentWrap from './ContentWrap.jsx';
 import Footer from './Footer.jsx';
 import SavedItemPane from './SavedItemPane.jsx';
@@ -27,10 +30,10 @@ import firebase from 'firebase/app';
 import 'firebase/auth';
 import { Profile } from './Profile';
 import { auth } from '../auth';
-import SupportDeveloperModal from './SupportDeveloperModal';
+import { SupportDeveloperModal } from './SupportDeveloperModal';
 import { KeyboardShortcutsModal } from './KeyboardShortcutsModal';
 import { takeScreenshot } from '../takeScreenshot';
-import AskToImportModal from './AskToImportModal';
+import { AskToImportModal } from './AskToImportModal';
 import { Alerts } from './Alerts';
 import Portal from 'preact-portal';
 import { HelpModal } from './HelpModal';
@@ -329,7 +332,6 @@ export default class App extends Component {
 		this.setState({
 			savedItems: { ...this.state.savedItems }
 		});
-		var a = 343478798793397;
 
 		this.toggleSavedItemsPane();
 		// HACK: Set overflow after sometime so that the items can animate without getting cropped.
@@ -409,12 +411,11 @@ export default class App extends Component {
 		this.setState({ isAddLibraryModalOpen: true });
 	}
 	closeSavedItemsPane() {
-		document.body.classList[this.state.isSavedItemPaneOpen ? 'add' : 'remove'](
-			'overlay-visible'
-		);
 		this.setState({
 			isSavedItemPaneOpen: false
 		});
+		document.body.classList.remove('overlay-visible');
+
 		if (this.editorWithFocus) {
 			this.editorWithFocus.focus();
 		}
@@ -611,8 +612,8 @@ export default class App extends Component {
 			window.localStorage[LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN] = true;
 			if (!answer) {
 				trackEvent('ui', LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN, 'login');
-				closeAllOverlays();
+				this.closeAllOverlays();
-				loginModal.classList.add('is-modal-visible');
+				this.setState({ isLoginModalOpen: true });
 				return;
 			}
 			trackEvent('ui', LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN, 'local');
@@ -817,7 +818,6 @@ export default class App extends Component {
 		return false;
 	}
 	codepenBtnClickHandler(e) {
-		debugger;
 		if (this.state.currentItem.cssMode === CssModes.ACSS) {
 			alert("Oops! CodePen doesn't supports Atomic CSS currently.");
 			e.preventDefault();
@@ -888,7 +888,7 @@ export default class App extends Component {
 		e.preventDefault();
 		trackEvent('ui', 'exportBtnClicked');
 	}
-	screenshotBtnClickHandler() {
+	screenshotBtnClickHandler(e) {
 		this.contentWrap.getDemoFrame(frame => {
 			takeScreenshot(frame.getBoundingClientRect());
 		});
@@ -1203,8 +1203,7 @@ export default class App extends Component {
 							<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
 						</symbol>
 						<symbol id="loader-icon" viewBox="0 0 44 44">
-							{'{'}/* By Sam Herbert (@sherb), for everyone. More @
+							{/* By Sam Herbert (@sherb), for everyone. More http://goo.gl/7AJzbL */}
-							http://goo.gl/7AJzbL */{'}'}
 							<g fill="none" fillRule="evenodd" strokeWidth={10}>
 								<circle cx={22} cy={22} r={1}>
 									<animate

src/components/common.jsx

@@ -1,5 +1,4 @@
 import { h, Component } from 'preact';
-import { log } from '../utils';
 import { trackEvent } from '../analytics';
 
 class Clickable extends Component {

src/takeScreenshot.js

@@ -1,4 +1,5 @@
 import { handleDownloadsPermission } from './utils';
+import { trackEvent } from './analytics';
 
 function saveScreenshot(dataURI) {
 	// convert base64 to raw binary data held in a string
@@ -91,6 +92,7 @@ export function takeScreenshot(boundRect) {
 		s.textContent =
 			'[class*="hint"]:after, [class*="hint"]:before { display: none!important; }';
 		document.body.appendChild(s);
+		import { trackEvent } from './analytics';
 
 		function onImgLoad(image) {
 			var c = document.createElement('canvas');