refactor: Remaking most things into TypeScript and ReactJS. Because w…

…hy not?

.editorconfig

@@ -1,5 +1,8 @@
 root = true
 
+[*]
+max_line_length = 120
+
 [*.js]
 indent_size = 2
 indent_style = space

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 *.opk
 .vscode
-resources/compiled
+resources/compiled
+public/

gulpfile.js

@@ -4,114 +4,175 @@ const sass = require("gulp-sass")(require("sass"));
 const cleancss = require("gulp-clean-css");
 const purgecss = require("gulp-purgecss");
 
+const esbuild = require("gulp-esbuild");
+const rimraf = require("rimraf");
+
 const exec = require("child_process").exec;
 var uglify = require("gulp-uglify");
 const fs = require("fs");
 
 const md = require("markdown-it")();
 
+gulp.task("clean", (cb) => {
+  rimraf("resources/compiled", cb);
+  rimraf("public/", cb);
+});
+
 gulp.task("fix-version", function () {
   const pinfo = require("./package.json");
 
-  return gulp
-    .src("src/manifest.json")
-    .pipe(replace("$VERSION$", pinfo.version))
-    .pipe(gulp.dest("./"));
+  return gulp.src("src/manifest.json").pipe(replace("$VERSION$", pinfo.version)).pipe(gulp.dest("./"));
 });
 
-gulp.task("fix-windows", function () {
+gulp.task("fix-windows", function (callback) {
   var changeLog = fs.readFileSync("CHANGELOG.md", "utf8");
-  return gulp
-    .src("src/windows/**/*.html")
-    .pipe(replace("$CHANGELOG$", md.render(changeLog)))
-    .pipe(gulp.dest("resources/compiled/windows/"));
+  require("fs").writeFileSync("public/changelog.html", md.render(changeLog), {
+    encoding: "utf8",
+    flag: "w",
+  });
+
+  callback();
 });
 
 gulp.task("styles-nano", function () {
   return gulp
     .src("src/scss/*.scss")
     .pipe(sass().on("error", sass.logError))
     .pipe(cleancss())
-    .pipe(gulp.dest("resources/compiled/css/"));
+    .pipe(gulp.dest("public/css/"));
 });
 
 gulp.task("purge-unused-css", function () {
   return gulp
     .src("src/scss/*.css")
     .pipe(
       purgecss({
-        content: ["src/windows/**/*.html", "src/scripts/**/*.js"],
+        content: ["src/windows/**/*.html", "src/scripts/**/*.js", "src/scripts/**/*.ts", "src/scripts/**/*.tsx"],
       })
     )
-    .pipe(gulp.dest("resources/compiled/css/"));
+    .pipe(gulp.dest("public/css/"));
 });
 
 gulp.task("minify-scripts", function () {
-  return gulp
-    .src("src/scripts/**/*.js")
-    .pipe(uglify())
-    .pipe(gulp.dest("resources/compiled/scripts/"));
+  return gulp.src("src/scripts/**/*.js").pipe(uglify()).pipe(gulp.dest("resources/compiled/scripts/"));
 });
 
 gulp.task("build-archive", function (callback) {
-  exec(
-    "PowerShell.exe -File .\\CreateNewPackage.ps1",
-    function (err, stdout, stderr) {
-      console.log(stdout);
-      callback(err);
-    }
-  );
+  exec("PowerShell.exe -File .\\CreateNewPackage.ps1", function (err, stdout, stderr) {
+    console.log(stdout);
+    callback(err);
+  });
+});
+
+gulp.task("build-ts", (callback) => {
+  exec("yarn snowpack build", function (err, stdout, stderr) {
+    console.log(stdout);
+    console.error(stderr);
+    callback(err);
+
+    rimraf("resources/compiled/manifest.json", callback);
+    rimraf("resources/compiled/scss", callback);
+  });
 });
 
 gulp.task("default", function () {
   gulp.watch(
     "src/scss/**/*.scss",
     gulp.series(
+      "clean",
       "styles-nano",
-      "fix-windows",
       "purge-unused-css",
+      "fix-windows",
+      "build-ts",
+      "minify-scripts",
       "fix-version",
       "build-archive"
     )
   );
 
   gulp.watch(
     "src/manifest.json",
-    gulp.series("fix-version", "fix-windows", "build-archive")
+    gulp.series(
+      "clean",
+      "styles-nano",
+      "purge-unused-css",
+      "fix-windows",
+      "build-ts",
+      "minify-scripts",
+      "fix-version",
+      "build-archive"
+    )
   );
 
   gulp.watch(
     "src/windows/*.*",
     gulp.series(
+      "clean",
       "styles-nano",
-      "fix-windows",
       "purge-unused-css",
+      "fix-windows",
+      "build-ts",
+      "minify-scripts",
       "fix-version",
       "build-archive"
     )
   );
 
   gulp.watch(
     "package.json",
-    gulp.series("fix-version", "fix-windows", "build-archive")
+    gulp.series(
+      "clean",
+      "styles-nano",
+      "purge-unused-css",
+      "fix-windows",
+      "build-ts",
+      "minify-scripts",
+      "fix-version",
+      "build-archive"
+    )
   );
 
   gulp.watch("CHANGELOG.md", gulp.series("fix-windows"));
 
+  gulp.watch(
+    ["src/scripts/**/*.tsx", "src/scripts/**/*.ts"],
+    gulp.series(
+      "clean",
+      "styles-nano",
+      "purge-unused-css",
+      "fix-windows",
+      "build-ts",
+      "minify-scripts",
+      "fix-version",
+      "build-archive"
+    )
+  );
+
   gulp.watch(
     "src/scripts/**/*.js",
-    gulp.series("minify-scripts", "fix-windows", "build-archive")
+    gulp.series(
+      "clean",
+      "styles-nano",
+      "purge-unused-css",
+      "fix-windows",
+      "build-ts",
+      "minify-scripts",
+      "fix-version",
+      "build-archive"
+    )
   );
 });
 
 gulp.task(
   "deploy",
   gulp.series(
-    "minify-scripts",
+    "clean",
     "styles-nano",
     "purge-unused-css",
-    "fix-version",
     "fix-windows",
+    "build-ts",
+    "minify-scripts",
+    "fix-version",
     "build-archive"
   )
 );

package.json

@@ -8,14 +8,29 @@
     "release": "yarn standard-version && yarn gulp deploy && git commit -am \"chore: version bump\" && git push --follow-tags origin master"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@overwolf/types": "^3.17.0",
+    "@types/react": "^17.0.41",
+    "@types/react-dom": "^17.0.14",
     "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
     "gulp-clean-css": "^4.3.0",
+    "gulp-esbuild": "^0.10.2",
     "gulp-purgecss": "^4.0.3",
     "gulp-replace": "^1.1.2",
     "gulp-sass": "^5.1.0",
+    "gulp-typescript-babel": "^1.0.0",
     "gulp-uglify": "^3.0.2",
     "markdown-it": "^12.0.6",
+    "rimraf": "^3.0.2",
     "sass": "^1.49.9",
-    "standard-version": "^9.3.0"
+    "snowpack": "^3.8.8",
+    "standard-version": "^9.3.0",
+    "typescript": "^4.6.2"
+  },
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   }
 }

snowpack.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  mount: {
+    src: "/",
+    public: "/public/",
+  },
+  exclude: ["src/manifest.json"],
+  buildOptions: {
+    out: "./resources/compiled/",
+  },
+};