Experimenting with FuseBox

Author: code-asher

.gitignore

@@ -1,3 +1,4 @@
+.fusebox
 lib/vscode
 node_modules
 dist

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();

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": {

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>

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)`;
+	});
+}