From 7cfeef36a8fe1a972e08455fc1ab542dc6c1b334 Mon Sep 17 00:00:00 2001
From: Asher <ash@coder.com>
Date: Fri, 11 Jan 2019 11:50:54 -0600
Subject: [PATCH] Experimenting with FuseBox

---
 .gitignore                  |  1 +
 fuse.js                     | 23 +++++++++++++++++++++++
 package.json                |  2 +-
 packages/app/src/index.html | 10 ----------
 packages/app/src/index.ts   | 10 ++++++++++
 5 files changed, 35 insertions(+), 11 deletions(-)
 create mode 100644 fuse.js
 create mode 100644 packages/app/src/index.ts

diff --git a/.gitignore b/.gitignore
index 3fc94bec..65b66914 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+.fusebox
 lib/vscode
 node_modules
 dist
diff --git a/fuse.js b/fuse.js
new file mode 100644
index 00000000..11af2484
--- /dev/null
+++ b/fuse.js
@@ -0,0 +1,23 @@
+const { FuseBox, SassPlugin, CSSPlugin, CSSResourcePlugin } = require("fuse-box");
+
+const fuse = FuseBox.init({
+	homeDir: ".",
+	output: "dist/$name.js",
+	plugins: [
+		[
+			SassPlugin(),
+			CSSResourcePlugin({ dist: "dist/css-resources" }),
+			CSSPlugin(),
+		],
+	],
+});
+
+fuse.dev();
+
+fuse
+	.bundle("app")
+	.instructions("> packages/app/src/index.ts")
+	.hmr()
+	.watch();
+
+fuse.run();
diff --git a/package.json b/package.json
index 2bc755f8..038c7287 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "vscode": "npm-run-all vscode:*",
     "packages:install": "cd ./packages && yarn",
     "postinstall": "npm-run-all --parallel vscode packages:install",
-    "start": "webpack-dev-server --config ./webpack.config.app.js",
+    "start": "node fuse.js",
     "test": "cd ./packages && yarn test"
   },
   "devDependencies": {
diff --git a/packages/app/src/index.html b/packages/app/src/index.html
index b9ab7b46..dbd3d06a 100644
--- a/packages/app/src/index.html
+++ b/packages/app/src/index.html
@@ -71,16 +71,6 @@
 			<div class="message">
 			</div>
 		</div>
-		<script>
-			const overlay = document.getElementById("overlay");
-			const logo = document.getElementById("logo");
-			overlay.addEventListener("mousemove", (event) => {
-				const xPos = ((event.clientX - logo.offsetLeft) / 24).toFixed(2);
-				const yPos = ((logo.offsetTop - event.clientY) / 24).toFixed(2);
-
-				logo.style.transform = `perspective(200px) rotateX(${yPos}deg) rotateY(${xPos}deg)`;
-			});
-		</script>
 	</body>
 
 </html>
diff --git a/packages/app/src/index.ts b/packages/app/src/index.ts
new file mode 100644
index 00000000..04cc7bed
--- /dev/null
+++ b/packages/app/src/index.ts
@@ -0,0 +1,10 @@
+const overlay = document.getElementById("overlay");
+const logo = document.getElementById("logo");
+if (overlay && logo) {
+	overlay.addEventListener("mousemove", (event) => {
+		const xPos = ((event.clientX - logo.offsetLeft) / 24).toFixed(2);
+		const yPos = ((logo.offsetTop - event.clientY) / 24).toFixed(2);
+
+		logo.style.transform = `perspective(200px) rotateX(${yPos}deg) rotateY(${xPos}deg)`;
+	});
+}