[p5.js 2.0 Bug Report]: Internal calls to p5 functions are checked by FES

[davepagurek]

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
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.0.2

Web browser and version

Firefox

Operating system

MacOS

Steps to reproduce this

In this sketch https://editor.p5js.org/davepagurek/sketches/Ty-01oHgN, in the console, you'll see the FES message: "p5.js says: Expected at most 1 argument, but received more in createVector()."

This specific error is due to #7741 and has since been fixed in 2.0.2, but you'll notice the error is about createVector, but the sketch's code does not actually directly call createVector. It is coming from inside of worldToScreen here:

p5.js/src/core/environment.js

Line 1388 in 2a86107

worldPosition = this.createVector(...arguments);

This scenario could be improved for two reasons:

• If we internally use a non-documented parameter pattern, users will be seeing a warning for code they didn't write and can't change. This seems pretty confusing for them.
• If we internally use a valid parameter pattern, we are spending extra time checking parameters that should already be correct since it's an internal usage. (If it's incorrect, FES is probably not the right spot to surface the issue anyway.)

My recommendation here is to not run FES parameter checking on internal function calls.

Implementation notes

For synchronous function calls, we can keep track of how deeply nested a function call is by modifying the FES wrapper here:

p5.js/src/core/friendly_errors/param_validator.js

Lines 561 to 564 in 2a86107

	this[f] = function(...args) {
	this.validate(f, args);
	return copy.call(this, ...args);
	};

...to be something more like this, which keeps track of a nesting level, and only checks params at the first level:

this[f] = function(...args) {
  this.level = (this.level || 0) + 1;
  if (this.level === 1) {
    this.validate(f, args);
  }
  const result = copy.call(this, ...args);
  this.level--;
  return result;
};

This doesn't quite solve the issue for asynchronous functions, since multiple can be running at once, with the runtime jumping back and forth between their execution contexts. Maybe only doing this for synchronous contexts is good enough for now? I'm open to ideas for other implementations that also handle the async case!