Improve types for web workers (#502)

* Improve types for web workers

* Move worker-loader config inline

* Remove trailing spaces in translations

gulp/webpack.config.js

@@ -94,16 +94,6 @@ module.exports = ({ watch = false, standalone = false }) => {
                         },
                     ],
                 },
-                {
-                    test: /\.worker\.js$/,
-                    use: {
-                        loader: "worker-loader",
-                        options: {
-                            fallback: false,
-                            inline: true,
-                        },
-                    },
-                },
                 {
                     test: /\.ya?ml$/,
                     type: "json", // Required by Webpack v4

src/js/core/animation_frame.js

@@ -1,7 +1,6 @@
 import { Signal } from "./signal";
 
-// @ts-ignore
-import BackgroundAnimationFrameEmitterWorker from "../webworkers/background_animation_frame_emittter.worker";
+import BackgroundAnimationFrameEmitterWorker from "worker-loader?inline=true&fallback=false!../webworkers/background_animation_frame_emittter.worker";
 
 import { createLogger } from "./logging";
 const logger = createLogger("animation_frame");
@@ -14,12 +13,11 @@ export class AnimationFrame {
         this.frameEmitted = new Signal();
         this.bgFrameEmitted = new Signal();
 
-        this.lastTime = null;
-        this.bgLastTime = null;
+        this.lastTime = performance.now();
+        this.bgLastTime = performance.now();
 
         this.boundMethod = this.handleAnimationFrame.bind(this);
 
-        /** @type {Worker} */
         this.backgroundWorker = new BackgroundAnimationFrameEmitterWorker();
         this.backgroundWorker.addEventListener("error", err => {
             logger.error("Error in background fps worker:", err);
@@ -27,22 +25,16 @@ export class AnimationFrame {
         this.backgroundWorker.addEventListener("message", this.handleBackgroundTick.bind(this));
     }
 
-    /**
-     *
-     * @param {MessageEvent} event
-     */
-    handleBackgroundTick(event) {
+    handleBackgroundTick() {
         const time = performance.now();
-        if (!this.bgLastTime) {
-            // First update, first delta is always 16ms
-            this.bgFrameEmitted.dispatch(1000 / 60);
-        } else {
-            let dt = time - this.bgLastTime;
-            if (dt > maxDtMs) {
-                dt = resetDtMs;
-            }
-            this.bgFrameEmitted.dispatch(dt);
+
+        let dt = time - this.bgLastTime;
+
+        if (dt > maxDtMs) {
+            dt = resetDtMs;
         }
+
+        this.bgFrameEmitted.dispatch(dt);
         this.bgLastTime = time;
     }
 
@@ -52,18 +44,15 @@ export class AnimationFrame {
     }
 
     handleAnimationFrame(time) {
-        if (!this.lastTime) {
-            // First update, first delta is always 16ms
-            this.frameEmitted.dispatch(1000 / 60);
-        } else {
-            let dt = time - this.lastTime;
-            if (dt > maxDtMs) {
-                // warn(this, "Clamping", dt, "to", resetDtMs);
-                dt = resetDtMs;
-            }
-            this.frameEmitted.dispatch(dt);
+        let dt = time - this.lastTime;
+
+        if (dt > maxDtMs) {
+            dt = resetDtMs;
         }
+
+        this.frameEmitted.dispatch(dt);
         this.lastTime = time;
+
         window.requestAnimationFrame(this.boundMethod);
     }
 }

src/js/core/async_compression.js

@@ -1,7 +1,6 @@
-// @ts-ignore
-import CompressionWorker from "../webworkers/compression.worker";
+import CompressionWorker from "worker-loader?inline=true&fallback=false!../webworkers/compression.worker";
 import { createLogger } from "./logging";
-import { compressX64 } from "./lzstring";
+
 const logger = createLogger("async_compression");
 
 export let compressionPrefix = String.fromCodePoint(1);
@@ -35,7 +34,6 @@ if (!checkCryptPrefix(compressionPrefix)) {
 
 class AsynCompression {
     constructor() {
-        /** @type {Worker} */
         this.worker = new CompressionWorker();
 
         this.currentJobId = 1000;

src/js/core/read_write_proxy.js

@@ -8,7 +8,7 @@ import { FILE_NOT_FOUND } from "../platform/storage";
 import { accessNestedPropertyReverse } from "./utils";
 import { IS_DEBUG, globalConfig } from "./config";
 import { ExplainedResult } from "./explained_result";
-import { decompressX64, compressX64 } from ".//lzstring";
+import { decompressX64, compressX64 } from "./lzstring";
 import { asyncCompressor, compressionPrefix } from "./async_compression";
 import { compressObject, decompressObject } from "../savegame/savegame_compressor";
 

src/js/core/sensitive_utils.encrypt.js

@@ -1,19 +1,12 @@
-import { globalConfig } from "./config";
-import { decompressX64, compressX64 } from "./lzstring";
+import { createHash } from "rusha";
 
-const Rusha = require("rusha");
-
-const encryptKey = globalConfig.info.sgSalt;
-
-export function decodeHashedString(s) {
-    return decompressX64(s);
-}
+import { decompressX64 } from "./lzstring";
 
 export function sha1(str) {
-    return Rusha.createHash().update(str).digest("hex");
+    return createHash().update(str).digest("hex");
 }
 
 // Window.location.host
 export function getNameOfProvider() {
-    return window[decodeHashedString("DYewxghgLgliB2Q")][decodeHashedString("BYewzgLgdghgtgUyA")];
+    return window[decompressX64("DYewxghgLgliB2Q")][decompressX64("BYewzgLgdghgtgUyA")];
 }

src/js/globals.d.ts

@@ -190,3 +190,11 @@ declare interface TypedSignal<T extends Array<any>> {
 
     removeAll();
 }
+
+declare module "worker-loader?inline=true&fallback=false!*" {
+    class WebpackWorker extends Worker {
+        constructor();
+    }
+
+    export default WebpackWorker;
+}

src/js/tsconfig.json

@@ -54,5 +54,6 @@
         // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
         // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
         "resolveJsonModule": true
-    }
+    },
+    "exclude": ["webworkers"]
 }

src/js/webworkers/background_animation_frame_emittter.worker.js

@@ -1,15 +1,14 @@
 // We clamp high deltas so 30 fps is fairly ok
-var bgFps = 30;
-var desiredMsDelay = 1000 / bgFps;
+const bgFps = 30;
+const desiredMsDelay = 1000 / bgFps;
 
-let lastTick = 0;
+let lastTick = performance.now();
 
 function tick() {
-    var now = performance.now();
-    var delta = now - lastTick;
+    const now = performance.now();
+    const delta = now - lastTick;
     lastTick = now;
 
-    // @ts-ignore
     postMessage({ delta });
 }
 

src/js/webworkers/compression.worker.js

@@ -12,15 +12,9 @@ function accessNestedPropertyReverse(obj, keys) {
 
 const salt = accessNestedPropertyReverse(globalConfig, ["file", "info"]);
 
-onmessage = function (event) {
-    const { jobId, job, data } = event.data;
+onmessage = function ({ data: { jobId, job, data } }) {
     const result = performJob(job, data);
-
-    // @ts-ignore
-    postMessage({
-        jobId,
-        result,
-    });
+    postMessage({ jobId, result });
 };
 
 function performJob(job, data) {

src/js/webworkers/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "lib": ["ES2018","WebWorker"]
+    },
+    "exclude": [],
+    "extends": "../tsconfig",
+    "include": ["*.worker.js"]
+}