Run heavy generator inside web worker

Author: dirkluijk

angular.json

@@ -30,7 +30,9 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+              { "input": "dist/generator.worker.js", "lazy": true }
+            ]
           },
           "configurations": {
             "production": {
@@ -130,7 +132,19 @@
           }
         }
       }
+    },
+    "sudoku-generator": {
+      "root": "",
+      "projectType": "library",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-webpack:webpack",
+          "options": {
+            "webpackConfig": "webpack.config.js"
+          }
+        }
+      }
     }
   },
   "defaultProject": "ng-sudoku"
-}
+}

package.json

@@ -3,14 +3,15 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
+    "start": "ng run sudoku-generator:build && ng serve",
+    "build": "ng run sudoku-generator:build && ng build",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
+    "@angular-devkit/build-webpack": "^0.7.3",
     "@angular/animations": "^6.1.2",
     "@angular/cdk": "^6.4.3",
     "@angular/common": "^6.1.0",

src/app/app.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { SudokuSolver } from '@jlguenego/sudoku-generator';
 import { Subscription, timer } from 'rxjs';
 
 import { Sudoku } from './sudoku/sudoku';
@@ -27,19 +26,26 @@ export class AppComponent implements OnInit {
   }
 
   generate(): void {
-    const solution = SudokuSolver.generate();
-    const masked = SudokuSolver.carve(solution, this.numberOfEmptyFields);
+    const worker = new Worker('generator.worker.js');
 
-    this.sudoku = solution.map(row => row.map(number => ({answer: number})));
+    worker.postMessage(this.numberOfEmptyFields);
 
-    masked.forEach((row, rowIndex) => {
-      row.forEach((value, colIndex) => {
-        this.sudoku[rowIndex][colIndex].value = value === 0 ? undefined : value;
-        this.sudoku[rowIndex][colIndex].readonly = value !== 0;
+    worker.onmessage = (event) => {
+      const { solution, masked } = event.data;
+
+      this.sudoku = solution.map(row => row.map(number => ({answer: number})));
+
+      masked.forEach((row, rowIndex) => {
+        row.forEach((value, colIndex) => {
+          this.sudoku[rowIndex][colIndex].value = value === 0 ? undefined : value;
+          this.sudoku[rowIndex][colIndex].readonly = value !== 0;
+        });
       });
-    });
 
-    this.startTimer();
+      this.startTimer();
+
+      worker.terminate();
+    };
   }
 
   onGameFinished() {

src/app/generator.worker.js

@@ -0,0 +1,11 @@
+import { SudokuSolver } from '@jlguenego/sudoku-generator';
+
+onmessage = function(e) {
+  const solution = SudokuSolver.generate();
+  const masked = SudokuSolver.carve(solution, e.data);
+
+  postMessage({
+    solution: solution,
+    masked: masked
+  });
+};

src/app/sudoku/sudoku.component.ts

@@ -86,7 +86,7 @@ export class SudokuComponent implements OnChanges {
   hint() {
     if (this.activeField && !this.activeField.readonly) {
       this.activeField.value = this.activeField.answer;
-      this.checkFinished();
+      this.insertNumber(this.activeField.answer);
     }
   }
 

webpack.config.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+const config = {
+  entry: './src/app/generator.worker.js',
+  mode: 'production',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'generator.worker.js'
+  }
+};
+
+module.exports = config;

yarn.lock

@@ -71,7 +71,7 @@
     typescript "~2.9.1"
     webpack-sources "^1.1.0"
 
-"@angular-devkit/[email protected]":
+"@angular-devkit/[email protected]", "@angular-devkit/build-webpack@^0.7.3":
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/@angular-devkit/build-webpack/-/build-webpack-0.7.3.tgz#2810675dd776f70605166ab3d577cfad3262d755"
   dependencies: