DOM types in pyodide lead to build issues with Angular and typescript.

[Hephaistos7]

🐛 Bug

When using Angular and building an application including Pyodide with ng serve, the following Error occurs:

Error: node_modules/pyodide/pyodide.d.ts:13:22 - error TS2304: Cannot find name 'HTMLCanvasElement'.
13  setCanvas2D(canvas: HTMLCanvasElement): void;
                        ~~~~~~~~~~~~~~~~~

Error: node_modules/pyodide/pyodide.d.ts:14:17 - error TS2304: Cannot find name 'HTMLCanvasElement'.
14  getCanvas2D(): HTMLCanvasElement | undefined;
                   ~~~~~~~~~~~~~~~~~

Error: node_modules/pyodide/pyodide.d.ts:15:22 - error TS2304: Cannot find name 'HTMLCanvasElement'.
15  setCanvas3D(canvas: HTMLCanvasElement): void;
                        ~~~~~~~~~~~~~~~~~

Error: node_modules/pyodide/pyodide.d.ts:16:17 - error TS2304: Cannot find name 'HTMLCanvasElement'.
16  getCanvas3D(): HTMLCanvasElement | undefined;
                   ~~~~~~~~~~~~~~~~~
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
× Failed to compile.

The problem seems to be the non-compatibility of the types "webworker" and "dom". This issue is being discussed in microsoft/TypeScript#20595.

It is suggested that Pyodide should run in a web worker. Web workers use the "webworker" types, therefore cannot relate to the type "HTMLCanvasElement".
And the types "webworker" and "dom" are mutually exclusive, as they contain overlapping code.

To Reproduce

Install pyodide in Angular project using 'npm install pyodide'.

pyodide.worker.ts File:

import { loadPyodide} from 'pyodide';
const pyodide = await loadPyodide();

main.ts File:

let pyodideWorker = new Worker(new URL('./pyodide.worker.ts', import.meta.url), { type: 'module' });

tsconfig.json File;

{
  "compilerOptions": {
    "lib": [
      "es2015",
      "dom"
    ],
    ...
  }
}

tsconfig.worker.json File:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "lib": [
      "es2018",
      "webworker"
    ],
    "types": [
      "node",
    ],
  },
  "include": [
    "src/**/*.worker.ts"
  ],
  ...
}

Expected behavior

This error should not be a thing.

Environment

• Pyodide Version:

Additional context

Four solutions are proposed through the discussion of the issues (link provided above):
A) using skipLibCheck: true in the tsconfig.json
B) as module owners, provide two different modules, one compiled for dom, one compiled for webworker
C) a new type from typescript, combining both dom and webworker as best as possible
D) users somehow writing new d.ts files to account for missing types (like HTMLCanvasElement)

A is not really a solution though because you usually do want your libraries to me checked.

B is something that you guys could consider doing.

C would be a solution that typescript maintainers could envision.

D is very unclear, at least to me because I'm not sure how to write types for incompatible code in npm packages. Somehow, when checking code, the installed packages in node_modules would have to consider those types.

Another proposed solution by me is to remove the HTMLCanvasElement from the pyodide.d.ts file, as it seems to be the only type that is in the "dom", but not in the "webworker" typings of typescript.

[hoodmane]

Thanks for the report @Hephaistos7. I think you can work around it on your side by adding something like this:

declare global {
  export interface HTMLCanvasElement {}
}

[Hephaistos7]

Yeah, that does it. Thank you.

I'll let you close the issue. You might want to do something else from your side.

[hoodmane]

Let's keep it open.