Remove redundant jimp fetches (#6333)

packages/web/craco.config.ts

@@ -70,6 +70,11 @@ export default {
               test: /\.wasm$/,
               type: 'webassembly/async'
             },
+            {
+              test: /\.workerscript$/,
+              use: ['raw-loader'],
+              type: 'javascript/auto'
+            },
             {
               test: /\.(glsl|vs|fs|vert|frag)$/,
               exclude: /node_modules/,

packages/web/public/index.html

@@ -34,10 +34,6 @@
       onLoad="window.web3Loaded = true; window.dispatchEvent(new CustomEvent('WEB3_LOADED'))"
       src="%PUBLIC_URL%/scripts/web3.min.js"
     ></script>
-    <script
-      defer
-      src="%PUBLIC_URL%/scripts/jimp.min.js"
-    ></script>
 
     <script async type="text/javascript">
       // Account recovery

packages/web/src/services/WebWorker.js

@@ -7,20 +7,21 @@ export default class WebWorker {
    * Initializes a web worker for performing async tasks.
    * @param {file} workerFile The web worker code, which is turned into a string an exec'd.
    * @param {?boolean} terminateOnResult Whether or not to terminate the worker on gathering the result.
+   * @param {?Array<file>} dependencies Optional array of file dependencies they worker needs
    * Note: Workers are non-trivial to spin up, so leaving commonly used workers running can be useful.
    */
-  constructor(workerFile, terminateOnResult = true) {
+  constructor(workerFile, terminateOnResult = true, dependencies = []) {
     const code = workerFile.toString()
+    const dependencyCode = dependencies.map((d) => `${d.toString()};`).join()
     const blob = new Blob([
       `
+      ${dependencyCode};
       const importWorkerScript = ${importWorkScriptCode}
       const code = ${code}
       code()
     `
     ])
-    if (typeof Worker !== 'undefined') {
-      this.worker = new Worker(URL.createObjectURL(blob))
-    }
+    this.worker = new Worker(URL.createObjectURL(blob))
     this.terminateOnResult = terminateOnResult
   }
 

packages/web/src/utils/imageProcessingUtil.ts

@@ -4,13 +4,18 @@ import dominantColorWorkerFile from 'workers/dominantColor.worker.js'
 import generatePlaylistArtworkWorkerFile from 'workers/generatePlaylistArtwork.worker.js'
 import gifPreviewWorkerFile from 'workers/gifPreview.worker.js'
 import resizeImageWorkerFile from 'workers/resizeImage.worker.js'
+// @ts-ignore - jimp is a raw-loaded to have workers called directly with it.
+import jimp from 'workers/utils/jimp.min.workerscript'
 
-const averageRgbWorker = new WebWorker(averageRgbWorkerFile, false)
-const dominantColorWorker = new WebWorker(dominantColorWorkerFile, false)
-const gifPreviewWorker = new WebWorker(gifPreviewWorkerFile, false)
+const averageRgbWorker = new WebWorker(averageRgbWorkerFile, false, [jimp])
+const dominantColorWorker = new WebWorker(dominantColorWorkerFile, false, [
+  jimp
+])
+const gifPreviewWorker = new WebWorker(gifPreviewWorkerFile, false, [jimp])
 const generatePlaylistArtworkWorker = new WebWorker(
   generatePlaylistArtworkWorkerFile,
-  false
+  false,
+  [jimp]
 )
 
 export const ALLOWED_IMAGE_FILE_TYPES = [
@@ -32,7 +37,7 @@ export const resizeImage = async (
     throw new Error('invalid file type')
   }
   const imageUrlBlob = URL.createObjectURL(imageFile)
-  const worker = new WebWorker(resizeImageWorkerFile)
+  const worker = new WebWorker(resizeImageWorkerFile, true, [jimp])
   worker.call({ imageUrl: imageUrlBlob, maxWidth, square }, key)
   return worker.getResult()
 }

packages/web/src/workers/averageRgb.worker.js

@@ -2,10 +2,6 @@
 const DEFAULT_RGB = { r: 13, g: 16, b: 18 }
 
 export default () => {
-  const script = '/scripts/jimp.min.js'
-  // eslint-disable-next-line
-  importWorkerScript(script)
-
   /**
    * Returns the average RGB of an image to be used for backgrounds/shading, etc.
    * @param {string} key identifies this computation
@@ -29,12 +25,12 @@ export default () => {
         rgb.g = Math.floor(rgb.g / count)
         rgb.b = Math.floor(rgb.b / count)
         // eslint-disable-next-line
-        postMessage({key, result: rgb})
+        postMessage({ key, result: rgb })
       })
       .catch((err) => {
         console.error(imageUrl, err)
         // eslint-disable-next-line
-        postMessage({key, result: DEFAULT_RGB})
+        postMessage({ key, result: DEFAULT_RGB })
       })
   }
 

packages/web/src/workers/dominantColor.worker.js

@@ -9,10 +9,6 @@ export default () => {
   // #CDC8C8, which works out to a luminance of 201.
   const LUMINANCE_THRESHOLD = 201
 
-  const script = `/scripts/jimp.min.js`
-  // eslint-disable-next-line
-  importWorkerScript(script)
-
   const clampedRGBColor = (rgbString /* string of 'r,g,b' */) => {
     const rgb = rgbString.split(',').map((x) => parseInt(x, 10))
     const r = rgb[0]

packages/web/src/workers/generatePlaylistArtwork.worker.js

@@ -1,10 +1,6 @@
 /* globals Jimp */
 
 export default () => {
-  const script = `/scripts/jimp.min.js`
-  // eslint-disable-next-line
-  importWorkerScript(script)
-
   /**
    * Given 4 images, return a new image with each image taking up the four corners
    */

packages/web/src/workers/gifPreview.worker.js

@@ -1,10 +1,6 @@
 /* globals Jimp */
 
 export default () => {
-  const script = '/scripts/jimp.min.js'
-  // eslint-disable-next-line
-  importWorkerScript(script)
-
   /**
    * Returns a jpeg of a gif
    * @param {string} key identifies this computation

packages/web/src/workers/resizeImage.worker.js

@@ -11,11 +11,8 @@
 
 export default () => {
   // eslint-disable-next-line
-  const jimp = '/scripts/jimp.min.js'
   const exifParser = '/scripts/exif-parser-0.1.12-min.js'
   // eslint-disable-next-line
-  importWorkerScript(jimp)
-  // eslint-disable-next-line
   importWorkerScript(exifParser)
 
   // Copied directly from Jimp.