Merge pull request #7542 from aferriss/adam/preload-fes

Add warning when using preload function

Author: davepagurek

src/core/friendly_errors/fes_core.js

@@ -82,7 +82,6 @@ function fesCore(p5, fn){
     const entryPoints = [
       'setup',
       'draw',
-      'preload',
       'deviceMoved',
       'deviceTurned',
       'deviceShaken',
@@ -295,6 +294,10 @@ function fesCore(p5, fn){
       context = instanceMode ? context : window;
       const fnNames = entryPoints;
 
+      if (context.preload) {
+        p5._friendlyError(translator('fes.preloadDisabled'), 'preload');
+      }
+
       const fxns = {};
       // lowercasename -> actualName mapping
       fnNames.forEach(symbol => {

src/core/friendly_errors/param_validator.js

@@ -352,7 +352,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) {
+  fn.friendlyParamError = function (zodErrorObj, func, args) {
     let message = '🌸 p5.js says: ';
     // The `zodErrorObj` might contain multiple errors of equal importance
     // (after scoring the schema closeness in `findClosestSchema`). Here, we
@@ -398,6 +398,11 @@ function validateParams(p5, fn, lifecycles) {
       });
 
       if (expectedTypes.size > 0) {
+        if (error.path?.length > 0 && args[error.path[0]] instanceof Promise)  {
+          message += 'Did you mean to put `await` before a loading function? ' +
+            'An unexpected Promise was found. ';
+        }
+
         const expectedTypesStr = Array.from(expectedTypes).join(' or ');
         const position = error.path.join('.');
 
@@ -502,7 +507,7 @@ function validateParams(p5, fn, lifecycles) {
     } catch (error) {
       const closestSchema = fn.findClosestSchema(funcSchemas, args);
       const zodError = closestSchema.safeParse(args).error;
-      const errorMessage = fn.friendlyParamError(zodError, func);
+      const errorMessage = fn.friendlyParamError(zodError, func, args);
 
       return {
         success: false,

test/unit/core/param_errors.js

@@ -7,6 +7,21 @@ suite('Validate Params', function () {
     Color: function () {
       return 'mock p5.Color';
     },
+    Image: function() {
+      return 'mock p5.Image';
+    },
+    Element: function() {
+      return 'mock p5.Element';
+    },
+    Texture: function() {
+      return 'mock p5.Texture';
+    },
+    Framebuffer: function() {
+      return 'mock p5.Framebuffer';
+    },
+    FramebufferTexture: function() {
+      return 'mock p5.FramebufferTexture';
+    },
   };
   const mockP5Prototype = {};
 
@@ -102,6 +117,17 @@ suite('Validate Params', function () {
     });
   });
 
+  suite('validateParams: promise where no promise is expected', function () {
+    test('image(): promise for first argument', function () {
+      const result = mockP5Prototype.validate('p5.image', [Promise.resolve(), 0, 0]);
+      console.log(result);
+      assert.equal(
+        result.error,
+        '🌸 p5.js says: Did you mean to put `await` before a loading function? An unexpected Promise was found. Expected Image or Element or Texture or Framebuffer or FramebufferTexture at the first parameter in p5.image().'
+      );
+    });
+  });
+
   suite('validateParams: class, multi-types + optional numbers', function () {
     test('ambientLight(): no firendly-err-msg', function () {
       const result = mockP5Prototype.validate('p5.ambientLight', [new mockP5.Color()]);

translations/en/translation.json

@@ -47,6 +47,7 @@
     "misspelling": "{{location}} It seems that you may have accidentally written \"{{name}}\" instead of \"{{actualName}}\". Please correct it to {{actualName}} if you wish to use the {{type}} from p5.js.",
     "misspelling_plural": "{{location}} It seems that you may have accidentally written \"{{name}}\".\nYou may have meant one of the following: \n{{suggestions}}",
     "misusedTopLevel": "Did you just try to use p5.js's {{symbolName}} {{symbolType}}? If so, you may want to move it into your sketch's setup() function.\n\n+ More info: {{url}}",
+    "preloadDisabled": "The preload() function has been removed in p5.js 2.0. Please load assets in setup() using async / await keywords or callbacks instead. See https://dev.to/limzykenneth/asynchronous-p5js-20-458f for more information.",
     "positions": {
       "p_1": "first",
       "p_10": "tenth",