Fix TypeScript typing for filterColor shader hook

[Kathrina-dev]

Resolves #8574

Changes

Fixes incorrect TypeScript typing for the filterColor shader hook.

Previously, the generated TypeScript definitions declared:

declare const filterColor: object;

Because of this, accessing documented properties such as:

• filterColor.texCoord
• filterColor.canvasSize
• filterColor.begin()
• filterColor.set(...)

resulted in TypeScript errors like:

Property 'texCoord' does not exist on type 'object'.

Other Methods attempted at resolving the error

Initially I attempted to resolve this through JSDoc annotations in the source by using:

• @property
• @typedef

to explicitly define the structure of filterColor.

However, the documentation generator used in the build pipeline still produced the type as object in the generated TypeScript definitions. Because of this limitation in the JSDoc → TypeScript generation step, the correct structure was not preserved.

Solution

To ensure the generated typings match the documented API, I added a patch in:

utils/patch.mjs

This patch updates the generated declaration to:

declare const filterColor: {
texCoord: any;
canvasSize: any;
texelSize: any;
canvasContent: any;
begin(): void;
end(): void;
set(color: any): void;
};

This aligns the TypeScript definitions with the documented properties of the filterColor shader hook and prevents TypeScript errors when accessing them.

Screenshots of the change

N/A (TypeScript typing fix)

Suggested Reviewers

• @christophseibel
• @davepagurek

PR Checklist

• npm run lint passes
• Inline reference is included / updated
• Unit tests are included / updated

[davepagurek]

Thanks for taking this on @Kathrina-dev! While the original issue was for filterColor, I think this actually applies to all the hook objects documented around filterColor in the code. While we could add a patch method for each one, this seems likely to drift from the documented properties, especially as we add new hooks. It might be worth instead taking the approach of updating the typescript generation script to work with JSDoc typedefs (or something else, like documenting a pretend class for each hook object or something?) so that we can have the jsdoc be the sole source of truth for both documentation and types.

[davepagurek]

heads up, looks like you have an autoformatter running on the file. You'll want to turn that off when working on the p5 codebase because it makes diffs in PRs harder to read since a nunch of unrelated changes get bundled in with your change.

[Kathrina-dev]

Thanks for the suggestion, I've already removed the formatted part of the code to make it easier to identify the diff.

My initial approach was to use Typescript generation script (@Property, @typedef) but it kept collapsing the JSDoc typedef into an object. I agree that adding a patch would cause a drift from the documented properties, so I'll try the alternative way you've suggested and let you know the results.