Implement decorator helper function and have FES use it

Author: limzykenneth

src/core/friendly_errors/param_validator.js

@@ -140,7 +140,7 @@ function validateParams(p5, fn, lifecycles) {
    * @param {String} func - Name of the function. Expect global functions like `sin` and class methods like `p5.Vector.add`
    * @returns {z.ZodSchema} Zod schema
    */
-  fn.generateZodSchemasForFunc = function (func) {
+  const generateZodSchemasForFunc = function (func) {
     const { funcName, funcClass } = extractFuncNameAndClass(func);
     let funcInfo = dataDoc[funcClass][funcName];
 
@@ -308,7 +308,7 @@ function validateParams(p5, fn, lifecycles) {
    * @param {Array} args - User input arguments.
    * @returns {z.ZodSchema} Closest schema matching the input arguments.
    */
-  fn.findClosestSchema = function (schema, args) {
+  const findClosestSchema = function (schema, args) {
     if (!(schema instanceof z.ZodUnion)) {
       return schema;
     }
@@ -389,7 +389,7 @@ function validateParams(p5, fn, lifecycles) {
    * @param {String} func - Name of the function. Expect global functions like `sin` and class methods like `p5.Vector.add`
    * @returns {String} The friendly error message.
    */
-  fn.friendlyParamError = function (zodErrorObj, func, args) {
+  const friendlyParamError = function (zodErrorObj, func, args) {
     let message = '🌸 p5.js says: ';
     let isVersionError = false;
     // The `zodErrorObj` might contain multiple errors of equal importance
@@ -520,7 +520,7 @@ function validateParams(p5, fn, lifecycles) {
    * @returns {any} [result.data] - The parsed data if validation was successful.
    * @returns {String} [result.error] - The validation error message if validation has failed.
    */
-  fn.validate = function (func, args) {
+  const validate = function (func, args) {
     if (p5.disableFriendlyErrors) {
       return; // skip FES
     }
@@ -548,7 +548,7 @@ function validateParams(p5, fn, lifecycles) {
 
     let funcSchemas = schemaRegistry.get(func);
     if (!funcSchemas) {
-      funcSchemas = fn.generateZodSchemasForFunc(func);
+      funcSchemas = generateZodSchemasForFunc(func);
       if (!funcSchemas) return;
       schemaRegistry.set(func, funcSchemas);
     }
@@ -559,9 +559,9 @@ function validateParams(p5, fn, lifecycles) {
         data: funcSchemas.parse(args)
       };
     } catch (error) {
-      const closestSchema = fn.findClosestSchema(funcSchemas, args);
+      const closestSchema = findClosestSchema(funcSchemas, args);
       const zodError = closestSchema.safeParse(args).error;
-      const errorMessage = fn.friendlyParamError(zodError, func, args);
+      const errorMessage = friendlyParamError(zodError, func, args);
 
       return {
         success: false,
@@ -570,25 +570,20 @@ function validateParams(p5, fn, lifecycles) {
     }
   };
 
-  lifecycles.presetup = function(){
-    loadP5Constructors();
-
-    if(
-      p5.disableParameterValidator !== true &&
-      p5.disableFriendlyErrors !== true
-    ){
-      const excludes = ['validate'];
-      for(const f in this){
-        if(!excludes.includes(f) && !f.startsWith('_') && typeof this[f] === 'function'){
-          const copy = this[f];
-
-          this[f] = function(...args) {
-            this.validate(f, args);
-            return copy.call(this, ...args);
-          };
+  p5.decorateHelper(
+    /^(?!_).+$/,
+    function(target, name){
+      return function(...args){
+        if(!p5.disableFriendlyErrors && !p5.disableParameterValidator) {
+          validate(name, args);
         }
-      }
+        return target(...args);
+      };
     }
+  );
+
+  lifecycles.presetup = function(){
+    loadP5Constructors();
   };
 }
 

src/core/main.js

@@ -77,6 +77,25 @@ class p5 {
     // ensure correct reporting of window dimensions
     this._updateWindowSize();
 
+    // Apply addon defined decorations
+    for(const [patternArray, decoration] of p5.decorations){
+      for(const member in p5.prototype){
+        // Member must be a function
+        if(typeof p5.prototype[member] !== 'function') continue;
+
+        if(!patternArray.some(pattern => {
+          if(typeof pattern === 'string'){
+            return pattern === member;
+          }else if(pattern instanceof RegExp){
+            return pattern.test(member);
+          }
+        })) continue;
+
+        const copy = p5.prototype[member].bind(this);
+        p5.prototype[member] = decoration.call(this, copy, member);
+      }
+    }
+
     const bindGlobal = createBindGlobal(this);
     // If the user has created a global setup or draw function,
     // assume "global" mode and make everything global (i.e. on the window)
@@ -145,22 +164,7 @@ class p5 {
   static registerAddon(addon) {
     const lifecycles = {};
 
-    // Create a proxy for p5.prototype that automatically re-binds globals when properties are added
-    const prototypeProxy = new Proxy(p5.prototype, {
-      set(target, property, value) {
-        const result = Reflect.set(target, property, value);
-
-        // If we have a global instance and this is a new property, bind it globally
-        if (p5.instance && p5.instance._isGlobal && property[0] !== '_') {
-          const bindGlobal = createBindGlobal(p5.instance);
-          bindGlobal(property);
-        }
-
-        return result;
-      }
-    });
-
-    addon(p5, prototypeProxy, lifecycles);
+    addon(p5, p5.prototype, lifecycles);
 
     const validLifecycles = Object.keys(p5.lifecycleHooks);
     for(const name of validLifecycles){
@@ -170,6 +174,13 @@ class p5 {
     }
   }
 
+  static decorations = new Map();
+  static decorateHelper(pattern, decoration){
+    let patternArray = pattern;
+    if(!Array.isArray(pattern)) patternArray = [pattern];
+    p5.decorations.set(patternArray, decoration);
+  }
+
   #customActions = {};
   _customActions = new Proxy({}, {
     get: (target, prop) => {
@@ -393,28 +404,9 @@ class p5 {
   }
 
   async _runLifecycleHook(hookName) {
-    // Create a proxy for the instance that automatically re-binds globals when
-    // properties are added over the course of the lifecycle.
-    // Afterward, we skip global binding for efficiency.
-    let inLifecycle = true;
-    const instanceProxy = new Proxy(this, {
-      set(target, property, value) {
-        const result = Reflect.set(target, property, value);
-
-        // If this is a global instance and this is a new property, bind it globally
-        if (inLifecycle && target._isGlobal && property[0] !== '_') {
-          const bindGlobal = createBindGlobal(target);
-          bindGlobal(property);
-        }
-
-        return result;
-      }
-    });
-
     await Promise.all(p5.lifecycleHooks[hookName].map(hook => {
-      return hook.call(instanceProxy);
+      return hook.call(this);
     }));
-    inLifecycle = false;
   }
 
   _initializeInstanceVariables() {
@@ -480,7 +472,7 @@ function createBindGlobal(instance) {
         Object.defineProperty(window, property, {
           configurable: true,
           enumerable: true,
-          value: boundFunction,
+          value: boundFunction
         });
       } else {
         Object.defineProperty(window, property, {
@@ -498,7 +490,7 @@ function createBindGlobal(instance) {
         Object.defineProperty(window, property, {
           configurable: true,
           enumerable: true,
-          value: constantValue,
+          value: constantValue
         });
       } else {
         Object.defineProperty(window, property, {
@@ -785,8 +777,6 @@ for (const k in constants) {
  * </code>
  * </div>
  */
-p5.disableFriendlyErrors = false;
-
 import transform from './transform';
 import structure from './structure';
 import environment from './environment';