Fix TypeScript typing for filterColor shader hook

Author: Kathrina-dev

utils/patch.mjs

@@ -3,18 +3,18 @@ import fs from 'fs';
 export function applyPatches() {
   const cache   = {};
   const patched = {};
-  
+
   const replace = (path, src, dest) => {
     if (Array.isArray(path)) {
       path.forEach(path => replace(path, src, dest));
       return;
     }
     try {
-      if (!path.startsWith("types/"))
-        path = "types/" + path;
+      if (!path.startsWith('types/'))
+        path = 'types/' + path;
 
       const before = patched[path] ??
-        (cache[path] ??= fs.readFileSync("./" + path, { encoding: 'utf-8' }));
+        (cache[path] ??= fs.readFileSync('./' + path, { encoding: 'utf-8' }));
       const after = before.replaceAll(src, dest);
 
       if (after !== before)
@@ -28,8 +28,8 @@ export function applyPatches() {
 
   // TODO: Handle this better in the docs instead of patching
   replace(
-    "p5.d.ts",
-    "constructor(detailX?: number, detailY?: number, callback?: Function);",
+    'p5.d.ts',
+    'constructor(detailX?: number, detailY?: number, callback?: Function);',
     `constructor(
       detailX?: number,
       detailY?: number,
@@ -39,9 +39,9 @@ export function applyPatches() {
   // https://github.com/p5-types/p5.ts/issues/31
   // #todo: add readonly to appropriate array params, either here or in doc comments
   replace(
-    ["p5.d.ts", "global.d.ts"],
-    "random(choices: any[]): any;",
-    "random<T>(choices: readonly T[]): T;"
+    ['p5.d.ts', 'global.d.ts'],
+    'random(choices: any[]): any;',
+    'random<T>(choices: readonly T[]): T;'
   );
 
   replace(
@@ -53,7 +53,7 @@ export function applyPatches() {
   replace(
     'p5.d.ts',
     'textToContours(str: string, x: number, y: number, options?: { sampleFactor?: number; simplifyThreshold?: number }): object[][];',
-    'textToContours(str: string, x: number, y: number, options?: { sampleFactor?: number; simplifyThreshold?: number }): { x: number; y: number; alpha: number }[][];',
+    'textToContours(str: string, x: number, y: number, options?: { sampleFactor?: number; simplifyThreshold?: number }): { x: number; y: number; alpha: number }[][];'
   );
 
   replace(
@@ -77,7 +77,7 @@ export function applyPatches() {
     'class __Graphics extends p5.Element {',
     `class __Graphics extends p5.Element {
       elt: HTMLCanvasElement;
-    `,
+    `
   );
 
   // Type .elt more specifically for audio and video elements
@@ -86,24 +86,24 @@ export function applyPatches() {
     `class MediaElement extends Element {
       elt: HTMLAudioElement | HTMLVideoElement;`,
     `class MediaElement<T extends HTMLElement = HTMLAudioElement | HTMLVideoElement> extends Element {
-      elt: T;`,
+      elt: T;`
   );
   replace(
     ['p5.d.ts', 'global.d.ts'],
     /createAudio\(src\?: string \| string\[\], callback\?: Function\): ([pP]5)\.MediaElement;/g,
-    'createAudio(src?: string | string[], callback?: (video: $1.MediaElement<HTMLAudioElement>) => any): $1.MediaElement<HTMLAudioElement>;',
+    'createAudio(src?: string | string[], callback?: (video: $1.MediaElement<HTMLAudioElement>) => any): $1.MediaElement<HTMLAudioElement>;'
   );
   replace(
     ['p5.d.ts', 'global.d.ts'],
     /createVideo\(src\?: string \| string\[\], callback\?: Function\): ([pP]5)\.MediaElement;/g,
-    'createVideo(src?: string | string[], callback?: (video: $1.MediaElement<HTMLVideoElement>) => any): $1.MediaElement<HTMLVideoElement>;',
+    'createVideo(src?: string | string[], callback?: (video: $1.MediaElement<HTMLVideoElement>) => any): $1.MediaElement<HTMLVideoElement>;'
   );
 
   // More callback types
   replace(
     ['p5.d.ts', 'global.d.ts'],
     /createFileInput\(callback: Function, multiple\?: boolean\): ([pP]5)\.Element;/g,
-    'createFileInput(callback: (input: $1.File) => any, multiple?: boolean): $1.Element;',
+    'createFileInput(callback: (input: $1.File) => any, multiple?: boolean): $1.Element;'
   );
   replace(
     ['p5.d.ts', 'global.d.ts'],
@@ -120,7 +120,7 @@ export function applyPatches() {
   replace(
     'p5.d.ts',
     'fontBounds(str: string, x: number, y: number, width?: number, height?: number): object;',
-    'fontBounds(str: string, x: number, y: number, width?: number, height?: number): { x: number; y: number; w: number; h: number };',
+    'fontBounds(str: string, x: number, y: number, width?: number, height?: number): { x: number; y: number; w: number; h: number };'
   );
   replace(
     'p5.d.ts',
@@ -130,7 +130,7 @@ export function applyPatches() {
   replace(
     'p5.d.ts',
     'textBounds(str: string, x: number, y: number, width?: number, height?: number): object;',
-    'textBounds(str: string, x: number, y: number, width?: number, height?: number): { x: number; y: number; w: number; h: number };',
+    'textBounds(str: string, x: number, y: number, width?: number, height?: number): { x: number; y: number; w: number; h: number };'
   );
 
   // Document Typr
@@ -166,10 +166,25 @@ export function applyPatches() {
     `
   );
 
+  // Fix filterColor hook typing
+  replace(
+    ['p5.d.ts'],
+    'declare const filterColor: object;',
+    `declare const filterColor: {
+      texCoord: any;
+      canvasSize: any;
+      texelSize: any;
+      canvasContent: any;
+      begin(): void;
+      end(): void;
+      set(color: any): void;
+    };`
+  );
+
   for (const [path, data] of Object.entries(patched)) {
     try {
       console.log(`Patched ${path}`);
-      fs.writeFileSync("./" + path, data);
+      fs.writeFileSync('./' + path, data);
     } catch (err) {
       console.error(err);
     }