Mock canvas element when prerendering [getContext is not a function]

[renrizzolo]

Stencil version:

@stencil/core@1.1.2

I'm submitting a:
[ ] bug report
[X] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
When using the --prerender flag, the prerender will fail when using getContext() on a canvas element. canvas is not mocked in hydrate/prerender/mock-doc.

prerendering failed in 1.03 s
[ ERROR ]  Hydrate Error
           [...]/dist/hydrate/app.js:6409 var ctx =
           canvas.getContext('2d'); ^ TypeError: canvas.getContext is not a function 

Expected behavior:
Prerender doesn't fail when calling getContext() on a canvas element.

Steps to reproduce:

import { Component, h } from '@stencil/core';

@Component({
  tag: 'my-first-component',
})
export class MyComponent {
  componentDidLoad() {
    const canvas = document.createElement('canvas');
    canvas.width = 1;
    canvas.height = 1;
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'rgba(0,0,0,0)';
    ctx.fillRect(0, 0, 1, 1);
  }
  render() {
    return (
      <p>
        My name is {this.name}
      </p>
    );
  }
}

Related code:

Other information:
I'm not actually trying to use canvas - I would wrap the above example with Build.isBrowser if that were the case.
I'm importing the library lottie-web, which has some functions that use getContext().

One solution would be to add this simple mock to the switch in the createElement function in dist/hydrate/index.js (not sure what the true source of that function is).

class MockCanvasElement extends MockHTMLElement {
    constructor(ownerDocument) {
        super(ownerDocument, 'canvas');
    }
    getContext() {
        return {
            fillRect: function () { },
            clearRect: function () { },
            getImageData: function (x, y, w, h) {
                return {
                    data: new Array(w * h * 4)
                };
            },
            putImageData: function () { },
            createImageData: function () { return [] },
            setTransform: function () { },
            drawImage: function () { },
            save: function () { },
            fillText: function () { },
            restore: function () { },
            beginPath: function () { },
            moveTo: function () { },
            lineTo: function () { },
            closePath: function () { },
            stroke: function () { },
            translate: function () { },
            scale: function () { },
            rotate: function () { },
            arc: function () { },
            fill: function () { },
            measureText: function () {
                return { width: 0 };
            },
            transform: function () { },
            rect: function () { },
            clip: function () { },
        }
    }
}

Although I'm wondering if there's a simple way to avoid this issue when prerendering, e.g through rollup or some other config?

[manucorporat]

Hi @renrizzolo

Would you be up to submit a PR?
Take a look at the mock-doc folder inside src, https://github.com/ionic-team/stencil/blob/master/src/mock-doc/element.ts

It's probably the file where MockCanvasElement should be, and where createElement() switch is

[appsou]

Stencil version:

@stencil/core@1.1.2

I'm submitting a:
[ ] bug report
[X] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
When using the --prerender flag, the prerender will fail when using getContext() on a canvas element. canvas is not mocked in hydrate/prerender/mock-doc.

prerendering failed in 1.03 s
[ ERROR ]  Hydrate Error
           [...]/dist/hydrate/app.js:6409 var ctx =
           canvas.getContext('2d'); ^ TypeError: canvas.getContext is not a function 

Expected behavior:
Prerender doesn't fail when calling getContext() on a canvas element.

Steps to reproduce:

import { Component, h } from '@stencil/core';

@Component({
  tag: 'my-first-component',
})
export class MyComponent {
  componentDidLoad() {
    const canvas = document.createElement('canvas');
    canvas.width = 1;
    canvas.height = 1;
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'rgba(0,0,0,0)';
    ctx.fillRect(0, 0, 1, 1);
  }
  render() {
    return (
      <p>
        My name is {this.name}
      </p>
    );
  }
}

Related code:

Other information:
I'm not actually trying to use canvas - I would wrap the above example with Build.isBrowser if that were the case.
I'm importing the library lottie-web, which has some functions that use getContext().

One solution would be to add this simple mock to the switch in the createElement function in dist/hydrate/index.js (not sure what the true source of that function is).

class MockCanvasElement extends MockHTMLElement {
    constructor(ownerDocument) {
        super(ownerDocument, 'canvas');
    }
    getContext() {
        return {
            fillRect: function () { },
            clearRect: function () { },
            getImageData: function (x, y, w, h) {
                return {
                    data: new Array(w * h * 4)
                };
            },
            putImageData: function () { },
            createImageData: function () { return [] },
            setTransform: function () { },
            drawImage: function () { },
            save: function () { },
            fillText: function () { },
            restore: function () { },
            beginPath: function () { },
            moveTo: function () { },
            lineTo: function () { },
            closePath: function () { },
            stroke: function () { },
            translate: function () { },
            scale: function () { },
            rotate: function () { },
            arc: function () { },
            fill: function () { },
            measureText: function () {
                return { width: 0 };
            },
            transform: function () { },
            rect: function () { },
            clip: function () { },
        }
    }
}

Although I'm wondering if there's a simple way to avoid this issue when prerendering, e.g through rollup or some other config?

你可以声明变量的类型，示例：
const canvas: HTMLCanvasElement = this.el.shadowRoot.querySelector('.canvas');