add before/after preload and setup

src/core/main.js

@@ -231,6 +231,20 @@ class p5 {
       this._events.devicemotion = null;
     }
 
+    // Function to invoke registered hooks before or after events such as preload, setup, and pre/post draw.
+    p5.prototype.callRegisteredHooksFor = function (hookName) {
+      const target = this || p5.prototype;
+      const context = this._isGlobal ? window : this;
+      if (target._registeredMethods.hasOwnProperty(hookName)) {
+        const methods = target._registeredMethods[hookName];
+        for (const method of methods) {
+          if (typeof method === 'function') {
+            method.call(context);
+          }
+        }
+      }
+    };
+
     this._start = () => {
       // Find node if id given
       if (this._userNode) {
@@ -241,6 +255,7 @@ class p5 {
 
       const context = this._isGlobal ? window : this;
       if (context.preload) {
+        this.callRegisteredHooksFor('beforePreload');
         // Setup loading screen
         // Set loading screen into dom if not present
         // Otherwise displays and removes user provided loading screen
@@ -286,6 +301,7 @@ class p5 {
         if (loadingScreen) {
           loadingScreen.parentNode.removeChild(loadingScreen);
         }
+        this.callRegisteredHooksFor('afterPreload');
         if (!this._setupDone) {
           this._lastTargetFrameTime = window.performance.now();
           this._lastRealFrameTime = window.performance.now();
@@ -322,6 +338,7 @@ class p5 {
     };
 
     this._setup = () => {
+      this.callRegisteredHooksFor('beforeSetup');
       // Always create a default canvas.
       // Later on if the user calls createCanvas, this default one
       // will be replaced
@@ -369,6 +386,7 @@ class p5 {
       if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
         this._updateAccsOutput();
       }
+      this.callRegisteredHooksFor('afterSetup');
     };
 
     this._draw = () => {

src/core/structure.js

@@ -6,7 +6,6 @@
  */
 
 import p5 from './main';
-
 /**
  * Stops p5.js from continuously executing the code within <a href="#/p5/draw">draw()</a>.
  * If <a href="#/p5/loop">loop()</a> is called, the code in <a href="#/p5/draw">draw()</a>
@@ -471,9 +470,6 @@ p5.prototype.redraw = function(n) {
     if (typeof context.setup === 'undefined') {
       context.scale(context._pixelDensity, context._pixelDensity);
     }
-    const callMethod = f => {
-      f.call(context);
-    };
     for (let idxRedraw = 0; idxRedraw < numberOfRedraws; idxRedraw++) {
       context.resetMatrix();
       if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
@@ -483,14 +479,14 @@ p5.prototype.redraw = function(n) {
         context._renderer._update();
       }
       context._setProperty('frameCount', context.frameCount + 1);
-      context._registeredMethods.pre.forEach(callMethod);
+      this.callRegisteredHooksFor('pre');
       this._inUserDraw = true;
       try {
         context.draw();
       } finally {
         this._inUserDraw = false;
       }
-      context._registeredMethods.post.forEach(callMethod);
+      this.callRegisteredHooksFor('post');
     }
   }
 };

test/unit/core/main.js

@@ -1,4 +1,4 @@
-const { expect } = require('chai');
+const { expect, assert } = require('chai');
 
 suite('Core', function() {
   suite('p5.prototype.registerMethod', function() {
@@ -31,6 +31,91 @@ suite('Core', function() {
         p5.prototype._registeredMethods.init = originalInit;
       }
     });
+    test('should register and call before and after "preload" hooks', function() {
+      return new Promise(resolve => {
+        let beforePreloadCalled = false;
+        let preloadCalled = false;
+        let afterPreloadCalled = false;
+
+        p5.prototype.registerMethod('beforePreload', () => {
+          beforePreloadCalled = true;
+        });
+
+        p5.prototype.registerMethod('preload', () => {
+          assert.equal(beforePreloadCalled, true);
+          preloadCalled = true;
+        });
+
+        p5.prototype.registerMethod('afterPreload', () => {
+          if(beforePreloadCalled && preloadCalled)
+            afterPreloadCalled = true;
+        });
+
+        myp5 = new p5(function(sketch) {
+          sketch.preload = () => {};
+          sketch.setup = () => {
+            assert.equal(afterPreloadCalled, true);
+          };
+          resolve();
+        });
+      });
+    });
+    test('should register and call before and after "setup" hooks', function() {
+      return new Promise(resolve => {
+        let beforeSetupCalled = false;
+        let setupCalled = false;
+        let afterSetupCalled = false;
+
+        p5.prototype.registerMethod('beforeSetup', () => {
+          beforeSetupCalled = true;
+        });
+
+        p5.prototype.registerMethod('setup', () => {
+          assert.equal(beforeSetupCalled, true);
+          setupCalled = true;
+        });
+
+        p5.prototype.registerMethod('afterSetup', () => {
+          if(beforeSetupCalled && setupCalled)
+            afterSetupCalled = true;
+        });
+
+        myp5 = new p5(function(sketch) {
+          sketch.setup = () => {};
+          sketch.draw = () => {
+            assert.equal(afterSetupCalled, true);
+            resolve();
+          };
+        });
+      });
+    });
+    test('should register and call pre and post "draw" hooks', function() {
+      return new Promise(resolve => {
+        let preDrawCalled = false;
+        let drawCalled = false;
+        let postDrawCalled = false;
+
+        p5.prototype.registerMethod('pre', () => {
+          preDrawCalled = true;
+        });
+
+        p5.prototype.registerMethod('draw', () => {
+          assert.equal(preDrawCalled, true);
+          drawCalled = true;
+        });
+
+        p5.prototype.registerMethod('post', () => {
+          if(preDrawCalled && drawCalled)
+            postDrawCalled = true;
+        });
+
+        myp5 = new p5(function(sketch) {
+          sketch.draw = () => {};
+        });
+        assert.equal(postDrawCalled, true);
+        resolve();
+      });
+    });
   });
 
   suite('new p5() / global mode', function() {