Remove node-canvas from @jbrowse/core dependencies

package.json

@@ -95,6 +95,7 @@
     "@types/unzipper": "^0.10.3",
     "@typescript-eslint/parser": "^5.8.0",
     "babel-loader": "^8.2.5",
+    "canvas": "^2.9.1",
     "chai": "^4.3.4",
     "concurrently": "^6.4.0",
     "core-js": "^3.19.3",

packages/core/package.json

@@ -32,7 +32,6 @@
     "@babel/runtime": "^7.17.9",
     "@material-ui/icons": "^4.0.1",
     "abortable-promise-cache": "^1.5.0",
-    "canvas": "^2.8.0",
     "canvas-sequencer": "^3.1.0",
     "canvas2svg": "^1.0.16",
     "clone": "^2.1.2",

packages/core/util/offscreenCanvasPonyfill.tsx

@@ -25,10 +25,8 @@ export function drawImageOntoCanvasContext(
   if (imageData.serializedCommands) {
     const seq = new CanvasSequence(imageData.serializedCommands)
     seq.execute(context)
-  } else if (imageData instanceof ImageBitmapType) {
+  } else {
     context.drawImage(imageData as CanvasImageSource, 0, 0)
-  } else if (imageData.dataURL) {
-    throw new Error('dataURL deserialization no longer supported')
   }
 }
 
@@ -45,23 +43,27 @@ if (weHave.realOffscreenCanvas) {
   ImageBitmapType = window.ImageBitmap || self.ImageBitmap
 } else if (weHave.node) {
   // use node-canvas if we are running in node (i.e. automated tests)
-  const { createCanvas: nodeCreateCanvas, Image } = require('canvas')
-  createCanvas = nodeCreateCanvas
+  createCanvas = (...args) => {
+    // @ts-ignore
+    // eslint-disable-next-line no-undef
+    return nodeCreateCanvas(...args)
+  }
   createImageBitmap = async (canvas, ...otherargs) => {
     if (otherargs.length) {
       throw new Error(
         'only one-argument uses of createImageBitmap are supported by the node offscreencanvas ponyfill',
       )
     }
     const dataUri = canvas.toDataURL()
-    const img = new Image()
+    // @ts-ignore
+    // eslint-disable-next-line no-undef
+    const img = new nodeImage()
     return new Promise((resolve, reject) => {
       img.onload = () => resolve(img)
       img.onerror = reject
       img.src = dataUri
     })
   }
-  ImageBitmapType = Image
 } else {
   createCanvas = (width: number, height: number) => {
     const context = new CanvasSequence()

plugins/wiggle/src/DensityRenderer/DensityRenderer.test.js

@@ -2,6 +2,11 @@ import SimpleFeature from '@jbrowse/core/util/simpleFeature'
 import { renderToAbstractCanvas } from '@jbrowse/core/util/offscreenCanvasUtils'
 import DensityRenderer, { configSchema, ReactComponent } from '.'
 
+import { Image, createCanvas } from 'canvas'
+
+global.nodeImage = Image
+global.nodeCreateCanvas = createCanvas
+
 const pluginManager = {}
 const renderer = new DensityRenderer({
   name: 'DensityRenderer',

plugins/wiggle/src/XYPlotRenderer/XYPlotRenderer.test.js

@@ -2,6 +2,11 @@ import SimpleFeature from '@jbrowse/core/util/simpleFeature'
 import { renderToAbstractCanvas } from '@jbrowse/core/util/offscreenCanvasUtils'
 import XYPlotRenderer, { configSchema, ReactComponent } from '.'
 
+import { Image, createCanvas } from 'canvas'
+
+global.nodeImage = Image
+global.nodeCreateCanvas = createCanvas
+
 test('several features', async () => {
   const pluginManager = {}
   const renderer = new XYPlotRenderer({

products/jbrowse-img/package.json

@@ -33,6 +33,7 @@
     "@jbrowse/react-linear-genome-view": "^1.7.10",
     "abortcontroller-polyfill": "^1.7.3",
     "jsdom": "^19.0.0",
+    "canvas": "^2.9.1",
     "mobx": "^5.10.1",
     "node-fetch": "^2.6.7",
     "react": "^17.0.1",

products/jbrowse-img/src/index.js

@@ -8,6 +8,10 @@ import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
 import { spawnSync } from 'child_process'
 import fetch, { Headers, Response, Request } from 'node-fetch'
 import { JSDOM } from 'jsdom'
+import { Image, createCanvas } from 'canvas'
+
+global.nodeImage = Image
+global.nodeCreateCanvas = createCanvas
 
 const { document } = new JSDOM(`...`).window
 global.document = document

products/jbrowse-img/src/index.testmod.js

@@ -2,10 +2,14 @@ import { renderRegion } from './renderRegion'
 import fs from 'fs'
 import { JSDOM } from 'jsdom'
 import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
+import { Image, createCanvas } from 'canvas'
 
 const { document } = new JSDOM(`...`).window
 global.document = document
 
+global.nodeImage = Image
+global.nodeCreateCanvas = createCanvas
+
 function hashCode(str) {
   let hash = 0
   let chr

products/jbrowse-web/src/tests/Loader.test.tsx

@@ -5,11 +5,17 @@ import { render, waitFor } from '@testing-library/react'
 import { TextEncoder, TextDecoder } from 'web-encoding'
 import { LocalFile } from 'generic-filehandle'
 import rangeParser from 'range-parser'
+import { Image, createCanvas } from 'canvas'
 
 import { QueryParamProvider } from 'use-query-params'
 
 import { Loader } from '../Loader'
 
+// @ts-ignore
+global.nodeImage = Image
+// @ts-ignore
+global.nodeCreateCanvas = createCanvas
+
 jest.mock('../makeWorkerInstance', () => () => {})
 
 const delay = { timeout: 20000 }

products/jbrowse-web/src/tests/util.js

@@ -1,5 +1,4 @@
 import React from 'react'
-
 import rangeParser from 'range-parser'
 import PluginManager from '@jbrowse/core/PluginManager'
 import { QueryParamProvider } from 'use-query-params'
@@ -8,8 +7,13 @@ import JBrowseWithoutQueryParamProvider from '../JBrowse'
 import JBrowseRootModelFactory from '../rootModel'
 import configSnapshot from '../../test_data/volvox/config.json'
 import corePlugins from '../corePlugins'
+import { Image, createCanvas } from 'canvas'
+
 jest.mock('../makeWorkerInstance', () => () => {})
 
+global.nodeImage = Image
+global.nodeCreateCanvas = createCanvas
+
 configSnapshot.configuration = {
   rpc: {
     defaultDriver: 'MainThreadRpcDriver',

yarn.lock

@@ -6662,7 +6662,7 @@ canvas2svg@^1.0.16:
   resolved "https://registry.yarnpkg.com/canvas2svg/-/canvas2svg-1.0.16.tgz#0814c53bbab7c3406e7387279cdf257fe4f6f2bd"
   integrity sha512-r3ryHprzDOtAsFuczw+/DKkLR3XexwIlJWnJ+71I9QF7V9scYaV5JZgYDoCUlYtT3ARnOpDcm/hDNZYbWMRHqA==
 
-canvas@^2.8.0:
+canvas@^2.9.1:
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/canvas/-/canvas-2.9.1.tgz#58ec841cba36cef0675bc7a74ebd1561f0b476b0"
   integrity sha512-vSQti1uG/2gjv3x6QLOZw7TctfufaerTWbVe+NSduHxxLGB+qf3kFgQ6n66DSnuoINtVUjrLLIK2R+lxrBG07A==