Typescript cannot find changed() and input() methods on p5.Element from p5.dom

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.7.0

Web browser and version

Edge 115.0.1901.203

Operating System

MacOS 13.4.1

Steps to reproduce this

I'm working a node js project with p5 and typescript. In my sketch.ts, I'm trying to create an onChanged listener for a slider. FYI: I'm using p5 in instance mode.

sketch.ts

import * as p5 from "p5";

let world: World;

const maxSpeedSliderOnChanged = () => {
  alert("maxSpeedSlider changed");
};

const sketch = (p: p5) => {
  p.setup = () => {
    p.createCanvas(p.windowWidth, p.windowHeight);

    world = new World();

    const maxSpeedSlider = p.select("#maxSpeed");
    maxSpeedSlider.changed(maxSpeedSliderOnChanged); // Property 'changed' does not exist on type 'Element'.
  };

  p.draw = () => {
    world.render();
  };
};

export const p5i = new p5(sketch, document.body);

Functionally, this works as expected, however, typescript complains Property 'changed' does not exist on type 'Element'.

package.json

{
  "name": "test-project",
  "version": "0.0.4",
  "private": true,
  "scripts": {
    "start": "webpack serve --open",
    "build": "webpack",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "test": "jest",
    "test:watch": "jest --watch"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "@types/jest": "^29.5.3",
    "@types/p5": "^1.6.2",
    "css-loader": "^6.8.1",
    "gh-pages": "^5.0.0",
    "html-webpack-plugin": "^5.5.3",
    "jest": "^29.6.2",
    "jest-environment-jsdom": "^29.6.2",
    "p5": "^1.7.0",
    "style-loader": "^3.3.3",
    "ts-jest": "^29.1.1",
    "ts-loader": "^9.4.4",
    "typescript": "^5.1.6",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

global.d.ts

import module = require("p5");
export = module;
export as namespace p5;

From dom.d.ts it is visible that changed() and input() etc. are all part of p5InstanceExtensions instead of Element.

Is this incorrectly configured or am I missing a shim for p5.dom?

Thanks!

Start by inspecting dom.d.ts, especially p5InstanceExtensions and the Element declaration, and reproduce the type error from the sketch.ts example. Run the package's TypeScript build through npm run build. Done means the documented changed() and input() calls on the selected Element type-check correctly without changing their runtime behavior.