Fix TypeScript typing for filterColor shader hook

src/strands/p5.strands.js

@@ -612,7 +612,18 @@ if (typeof p5 !== "undefined") {
  */
 
 /**
- * @property {Object} filterColor
+ * @typedef {Object} FilterColorHook
+ * @property {any} texCoord
+ * @property {any} canvasSize
+ * @property {any} texelSize
+ * @property {any} canvasContent
+ * @property {function(): undefined} begin
+ * @property {function(): undefined} end
+ * @property {function(color: any): void} set
+ */
+
+/**
+ * @property {FilterColorHook} filterColor
  * @description
  * A shader hook block that sets the color for each pixel in a filter shader. This hook can be used inside <a href="#/p5/buildFilterShader">`buildFilterShader()`</a> to control the output color for each pixel.
  *

utils/patch.mjs

@@ -175,4 +175,3 @@ export function applyPatches() {
     }
   }
 }
-

utils/typescript.mjs

@@ -26,10 +26,18 @@ const constantsLookup = new Set();
 const typedefs = {};
 const mutableProperties = new Set(['disableFriendlyErrors']); // Properties that should be mutable, not constants
 allRawData.forEach(entry => {
-  if (entry.kind === 'constant' || entry.kind === 'typedef') {
+  if (entry.kind === 'constant') {
     constantsLookup.add(entry.name);
-    if (entry.kind === 'typedef') {
-      typedefs[entry.name] = entry.type;
+  }
+
+  // Collect object typedefs so constants referencing them can resolve to proper types
+  if (entry.kind === 'typedef') {
+    if (
+      entry.properties &&
+      entry.properties.length > 0 &&
+      !entry.properties.every(p => p.name === entry.name)
+    ) {
+      typedefs[entry.name] = entry;
     }
   }
 });
@@ -201,6 +209,16 @@ function convertTypeToTypeScript(typeNode, options = {}) {
     throw new Error(`convertTypeToTypeScript expects an object, got: ${typeof typeNode} - ${JSON.stringify(typeNode)}`);
   }
 
+  if (typeNode.properties && typeNode.properties.length > 0) {
+    const props = typeNode.properties.map(prop => {
+      const propType = convertTypeToTypeScript(prop.type, options);
+      const optional = prop.optional ? '?' : '';
+      return `${prop.name}${optional}: ${propType}`;
+    });
+
+    return `{ ${props.join('; ')} }`;
+  }
+
   const { currentClass = null, isInsideNamespace = false, inGlobalMode = false, isConstantDef = false } = options;
 
   switch (typeNode.type) {
@@ -242,19 +260,18 @@ function convertTypeToTypeScript(typeNode, options = {}) {
         }
       }
 
-      // Check if this is a p5 constant - use typeof since they're defined as values
+      // If p5 constant: use its typedef when defining it, else reference it as a value via `typeof`
       if (constantsLookup.has(typeName)) {
-        if (inGlobalMode) {
-          return `typeof P5.${typeName}`;
-        } else if (typedefs[typeName]) {
-          if (isConstantDef) {
-            return convertTypeToTypeScript(typedefs[typeName], options);
-          } else {
-            return `typeof p5.${typeName}`
-          }
-        } else {
-          return `Symbol`;
+        if (isConstantDef && typedefs[typeName]) {
+          return convertTypeToTypeScript(typedefs[typeName], options);
         }
+        return inGlobalMode
+          ? `typeof P5.${typeName}`
+          : `typeof ${typeName}`;
+      }
+
+      if (typedefs[typeName]) {
+        return typeName;
       }
 
       return typeName;
@@ -368,6 +385,11 @@ const typescriptStrategy = {
 
 const processed = processData(rawData, typescriptStrategy);
 
+// Augment constantsLookup with processed constants
+Object.keys(processed.consts).forEach(name => {
+  constantsLookup.add(name);
+});
+
 function normalizeIdentifier(name) {
   return (
     '0123456789'.includes(name[0]) ||
@@ -595,6 +617,22 @@ function generateClassDeclaration(classData) {
 function generateTypeDefinitions() {
   let output = '// This file is auto-generated from JSDoc documentation\n\n';
 
+  const strandsMethods = processStrandsFunctions();
+
+  Object.entries(typedefs).forEach(([name, entry]) => {
+    if (entry.properties && entry.properties.length > 0) {
+      const props = entry.properties.map(prop => {
+        const propType = prop.type ? convertTypeToTypeScript(prop.type) : 'any';
+        const optional = prop.optional ? '?' : '';
+        return `  ${prop.name}${optional}: ${propType}`;
+      });
+      output += `type ${name} = {\n${props.join(';\n')};\n};\n\n`;
+    } else {
+      const tsType = convertTypeToTypeScript(entry.type || entry);
+      output += `type ${name} = ${tsType};\n\n`;
+    }
+  });
+
   // First, define all constants at the top level with their actual values
   const seenConstants = new Set();
   const p5Constants = processed.classitems.filter(item => {
@@ -606,6 +644,9 @@ function generateTypeDefinitions() {
       if (seenConstants.has(item.name)) {
         return false;
       }
+      if (item.name in typedefs) {
+        return false;
+      } 
       seenConstants.add(item.name);
       return true;
     }
@@ -618,12 +659,26 @@ function generateTypeDefinitions() {
       output += formatJSDocComment(constant.description, 0) + '\n';
       output += ' */\n';
     }
-    const type = convertTypeToTypeScript(constant.type, { isInsideNamespace: false, isConstantDef: true });
+    let type;
+    // Avoid invalid self-referential types like `typeof FOO`
+    if (
+      constant.type?.type === 'NameExpression' &&
+      constant.type.name === constant.name
+    ) {
+      // Self-referential constant → fallback
+      type = 'number';
+    } else {
+      type = convertTypeToTypeScript(constant.type, {
+        isInsideNamespace: false,
+        isConstantDef: true
+      });
+    }
     const isMutable = mutableProperties.has(constant.name);
     const declaration = isMutable ? 'declare let' : 'declare const';
     output += `${declaration} ${constant.name}: ${type};\n\n`;
     // Duplicate with a private identifier so we can re-export in the namespace later
     output += `${declaration} __${constant.name}: typeof ${constant.name};\n\n`;
+
   });
 
   // Generate main p5 class
@@ -645,7 +700,6 @@ function generateTypeDefinitions() {
   });
 
   // Add strands functions to p5 instance
-  const strandsMethods = processStrandsFunctions();
   strandsMethods.forEach(method => {
     output += generateMethodDeclaration(method, p5Options);
   });
@@ -667,9 +721,16 @@ function generateTypeDefinitions() {
 
   output += '\n';
 
-
   p5Constants.forEach(constant => {
-    output += `${mutableProperties.has(constant.name) ? 'let' : 'const'} ${constant.name}: typeof __${constant.name};\n`;
+    const isTypedefTyped =
+      constant.type?.type === 'NameExpression' &&
+      constant.type?.name in typedefs;
+
+    if (isTypedefTyped) {
+      output += `${mutableProperties.has(constant.name) ? 'let' : 'const'} ${constant.name}: ${constant.type.name};\n`;
+    } else {
+      output += `${mutableProperties.has(constant.name) ? 'let' : 'const'} ${constant.name}: typeof __${constant.name};\n`;
+    }
   });
 
   output += '\n';
@@ -820,4 +881,4 @@ console.log('TypeScript definitions generated successfully!');
 
 // Apply patches
 console.log('Applying TypeScript patches...');
-applyPatches();
+applyPatches();