cubetiq/code-server
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Experimenting with FuseBox

Browse Source
This commit is contained in:
Asher 2019-01-11 11:50:54 -06:00 committed by Kyle Carberry
parent 3ec40f49bf
commit 7cfeef36a8
No known key found for this signature in database
GPG Key ID: A0409BDB6B0B3EDB
5 changed files with 35 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

23
fuse.js Normal file
View File

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

2
package.json
View File

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

10
packages/app/src/index.html
View File

@ -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>

10
packages/app/src/index.ts Normal file
View File

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