From 06753b797f4eda4ce38722a8f33069677973d3eb Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Tue, 16 Jul 2019 20:48:08 +0530
Subject: [PATCH] index.html: prettier fix

---
 src/components/Modal.jsx  |   8 +-
 src/components/Portal.jsx |  71 ++++++++++++++++++
 src/components/app.jsx    |   4 +-
 src/index.html            | 152 +++++++++++++++++++++-----------------
 4 files changed, 165 insertions(+), 70 deletions(-)
 create mode 100644 src/components/Portal.jsx

diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index 0610b51..6e1bf35 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -1,11 +1,15 @@
 import { h, Component } from 'preact';
-import Portal from 'preact-portal';
+import Portal from './Portal';
 
 export default class Modal extends Component {
 	componentDidMount() {
+		this.container = document.createElement('div');
+		this.container.id = `container-${~~(Math.random() * 1000)}`;
+		document.body.append(this.container);
 		window.addEventListener('keydown', this.onKeyDownHandler.bind(this));
 	}
 	componentWillUnmount() {
+		this.container.remove();
 		window.removeEventListener('keydown', this.onKeyDownHandler.bind(this));
 		if (this.focusGrabber) {
 			this.focusGrabber.remove();
@@ -61,7 +65,7 @@ export default class Modal extends Component {
 		if (!this.props.show) return null;
 
 		return (
-			<Portal into="body">
+			<Portal into={`#${this.container.id}`}>
 				<div
 					role="dialog"
 					class={`${this.props.extraClasses || ''} modal is-modal-visible ${
diff --git a/src/components/Portal.jsx b/src/components/Portal.jsx
new file mode 100644
index 0000000..29a268f
--- /dev/null
+++ b/src/components/Portal.jsx
@@ -0,0 +1,71 @@
+import { h, Component, render, toChildArray } from 'preact';
+
+/** Redirect rendering of descendants into the given CSS selector.
+ *  @example
+ *    <Portal into="body">
+ *      <div>I am rendered into document.body</div>
+ *    </Portal>
+ */
+export default class Portal extends Component {
+	componentDidUpdate(props) {
+		for (let i in props) {
+			if (props[i] !== this.props[i]) {
+				return setTimeout(this.renderLayer);
+			}
+		}
+	}
+
+	componentDidMount() {
+		this.isMounted = true;
+		this.renderLayer = this.renderLayer.bind(this);
+		this.renderLayer();
+	}
+
+	componentWillUnmount() {
+		this.renderLayer(false);
+		this.isMounted = false;
+		if (this.remote && this.remote.parentNode)
+			this.remote.parentNode.removeChild(this.remote);
+	}
+
+	findNode(node) {
+		return typeof node === 'string' ? document.querySelector(node) : node;
+	}
+
+	renderLayer(show = true) {
+		if (!this.isMounted) return;
+
+		// clean up old node if moving bases:
+		if (this.props.into !== this.intoPointer) {
+			this.intoPointer = this.props.into;
+			if (this.into && this.remote) {
+				this.remote = render(<PortalProxy />, this.into, this.remote);
+			}
+			this.into = this.findNode(this.props.into);
+		}
+
+		this.remote = render(
+			<PortalProxy context={this.context}>
+				{(show && this.props.children) || null}
+			</PortalProxy>,
+			this.into,
+			this.remote
+		);
+	}
+
+	render() {
+		return null;
+	}
+}
+
+// high-order component that renders its first child if it exists.
+// used as a conditional rendering proxy.
+class PortalProxy extends Component {
+	getChildContext() {
+		return this.props.context;
+	}
+	render({ children }) {
+		const arr = toChildArray(children);
+		return (arr && arr[0]) || null;
+	}
+}
diff --git a/src/components/app.jsx b/src/components/app.jsx
index 5a4835a..94d779f 100644
--- a/src/components/app.jsx
+++ b/src/components/app.jsx
@@ -49,7 +49,7 @@ import { KeyboardShortcutsModal } from './KeyboardShortcutsModal';
 import { takeScreenshot } from '../takeScreenshot';
 import { AskToImportModal } from './AskToImportModal';
 import { Alerts } from './Alerts';
-import Portal from 'preact-portal';
+import Portal from './Portal';
 import { HelpModal } from './HelpModal';
 import { OnboardingModal } from './OnboardingModal';
 import { Js13KModal } from './Js13KModal';
@@ -1791,7 +1791,7 @@ export default class App extends Component {
 						closeHandler={() => this.setState({ isCommandPaletteOpen: false })}
 					/>
 
-					<Portal into="body">
+					<Portal into="#portal">
 						<div
 							class="modal-overlay"
 							onClick={this.modalOverlayClickHandler.bind(this)}
diff --git a/src/index.html b/src/index.html
index a65ecaf..e39d1f3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,83 +1,103 @@
 <!DOCTYPE html>
 <html lang="en">
-
 	<head>
-		<meta charset="utf-8">
+		<meta charset="utf-8" />
 		<title>Web Maker</title>
-		<link rel="shortcut icon" href="icon-128.png">
-		<meta name=viewport content="width=device-width, initial-scale=1">
-		<meta name="mobile-web-app-capable" content="yes">
-		<meta name="apple-mobile-web-app-capable" content="yes">
-		<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json">
+		<link rel="shortcut icon" href="icon-128.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="mobile-web-app-capable" content="yes" />
+		<meta name="apple-mobile-web-app-capable" content="yes" />
+		<link
+			rel="manifest"
+			href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json"
+		/>
 		<% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
-			<meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
-			<% } %>
+		<meta
+			name="theme-color"
+			content="<%= htmlWebpackPlugin.options.manifest.theme_color %>"
+		/>
+		<% } %>
 
-				<style>
-					/* Critically acclaimed CSS */
+		<style>
+			/* Critically acclaimed CSS */
 
-					.saved-items-pane {
-						position: fixed;
-						right: 0;
-						top: 0;
-						bottom: 0;
-						width: 450px;
-						transform: translateX(100%);
-					}
+			.saved-items-pane {
+				position: fixed;
+				right: 0;
+				top: 0;
+				bottom: 0;
+				width: 450px;
+				transform: translateX(100%);
+			}
 
-					.modal {
-						visibility: hidden;
-					}
+			.modal {
+				visibility: hidden;
+			}
+		</style>
 
-				</style>
+		<!-- build:css vendor.css -->
+		<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css" />
+		<link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css" />
+		<link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css" />
+		<link rel="stylesheet" href="lib/codemirror/addon/dialog/dialog.css" />
+		<link rel="stylesheet" href="lib/hint.min.css" />
+		<link rel="stylesheet" href="lib/inlet.css" />
+		<!-- endbuild -->
 
-				<!-- build:css vendor.css -->
-				<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
-				<link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css">
-				<link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css">
-				<link rel="stylesheet" href="lib/codemirror/addon/dialog/dialog.css">
-				<link rel="stylesheet" href="lib/hint.min.css">
-				<link rel="stylesheet" href="lib/inlet.css">
-				<!-- endbuild -->
+		<link
+			rel="stylesheet"
+			id="editorThemeLinkTag"
+			href="lib/codemirror/theme/monokai.css"
+		/>
 
-				<link rel="stylesheet" id="editorThemeLinkTag" href="lib/codemirror/theme/monokai.css"></link>
+		<!-- build:css style.css -->
+		<link rel="stylesheet" href="style.css" />
+		<!-- endbuild -->
 
-				<!-- build:css style.css -->
-				<link rel="stylesheet" href="style.css">
-				<!-- endbuild -->
+		<style id="fontStyleTemplate" type="template">
+			@font-face {
+				font-family: 'fontname';
+				font-style: normal;
+				font-weight: 400;
+				src: url(fontname.ttf) format('truetype');
+				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
+					U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+			}
+			.CodeMirror pre {
+				font-family: 'fontname', monospace;
+			}
+		</style>
+		<style type="text/css" id="fontStyleTag">
+			@font-face {
+				font-family: 'FiraCode';
+				font-style: normal;
+				font-weight: 400;
+				src: url(FiraCode.ttf) format('truetype');
+				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
+					U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+			}
 
-				<style id="fontStyleTemplate" type="template">
-					@font-face { font-family: 'fontname'; font-style: normal; font-weight: 400; src: url(fontname.ttf) format('truetype'); unicode-range:
-					U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD,
-					U+F000; } .CodeMirror pre { font-family: 'fontname', monospace; }
-				</style>
-				<style type="text/css" id="fontStyleTag">
-					@font-face {
-						font-family: 'FiraCode';
-						font-style: normal;
-						font-weight: 400;
-						src: url(FiraCode.ttf) format('truetype');
-						unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-					}
-
-					.CodeMirror pre {
-						font-family: 'FiraCode', monospace;
-					}
-
-				</style>
+			.CodeMirror pre {
+				font-family: 'FiraCode', monospace;
+			}
+		</style>
 	</head>
 
-<body>
-	<!-- SCRIPT-TAGS -->
-	<%= htmlWebpackPlugin.options.ssr({
-			url: '/'
-		}) %>
-			<script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
-			<script>
-				window.fetch || document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>')
-
-			</script>
-			<!-- END-SCRIPT-TAGS -->
+	<body>
+		<div id="root"></div>
+		<div id="portal"></div>
+		<!-- SCRIPT-TAGS -->
+		<%= htmlWebpackPlugin.options.ssr({ url: '/' }) %>
+		<script
+			defer
+			src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"
+		></script>
+		<script>
+			window.fetch ||
+				document.write(
+					'<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>'
+				);
+		</script>
+		<!-- END-SCRIPT-TAGS -->
 	</body>
-
 </html>