P5.js: "eslint-samples:source" issue with "p5.Shader.js"

[hsab]

Needs to be resolved to merge #3724

I'm trying to add an example to the setUniform function of p5.Shader.js. There seems to be some unpredictable behavior with eslint-samples:source and the example code. I received the following which prevents me from running the grunt task or to safely commit.

Running "eslint-samples:source" (eslint-samples) task
/mnt/E/p5.js/src/webgl/p5.Shader.js:310:8: Delete `·` [Error/prettier/prettier]
/mnt/E/p5.js/src/webgl/p5.Shader.js:311:4: Delete `·` [Error/prettier/prettier]
/mnt/E/p5.js/src/webgl/p5.Shader.js:312:4: Delete `·` [Error/prettier/prettier]
/mnt/E/p5.js/src/webgl/p5.Shader.js:314:8: Delete `·` [Error/prettier/prettier]
/mnt/E/p5.js/src/webgl/p5.Shader.js:315:4: Delete `·` [Error/prettier/prettier]
/mnt/E/p5.js/src/webgl/p5.Shader.js:316:4: Delete `·` [Error/prettier/prettier]

This seems to relate to the following lines of the example code:

 *   if (showRedGreen === true) {
 *      grad.setUniform('colorCenter', [1, 0, 0]);
 *      grad.setUniform('colorBackground', [0, 1, 0]);
 *      grad.setUniform('offset', [sin(millis() / 2000), 1]);
 *   } else {
 *      grad.setUniform('colorCenter', [1, 0.5, 0]);
 *      grad.setUniform('colorBackground', [0.226, 0, 0.615]);
 *      grad.setUniform('offset', [0, sin(millis() / 2000) + 1]);
 *   }

The only periods in the following lines (with the exception of the numbers) relate to grad.setUniform. However, I'm using an almost identical example code for the shader() function in material.js and no warnings are raised.

I tried to dive in ./utils/sample-linter.js and .tasks/build/eslint-samples.js but the Grunt and ESLint ecosystem is quite foreign to me.

Nature of issue?

• [x] Found a bug

Most appropriate sub-area of p5.js?

• [x] "eslint-samples:source": ./utils/sample-linter.js & .tasks/build/eslint-samples.js

Details about the bug:

• npm version: 6.9.0
• node.js version: 11.14.0
• pacakge-lock.json file: package-lock.zip
• p5.js version: 0.8.0
• Operating System: Manjaro Linux x86_64 [4.14.113-1-MANJARO]
• Steps to reproduce this:
  Replace the following inline doc for setUniform() in src/webgl/p5.Shader.js with the following:

/**
 * Wrapper around gl.uniform functions.
 * As we store uniform info in the shader we can use that
 * to do type checking on the supplied data and call
 * the appropriate function.
 * @method setUniform
 * @chainable
 * @param {String} uniformName the name of the uniform in the
 * shader program
 * @param {Object|Number|Boolean|Number[]} data the data to be associated
 * with that uniform; type varies (could be a single numerical value, array,
 * matrix, or texture / sampler reference)
 *
 * @example
 * <div modernizr='webgl'>
 * <code>
 * // Click within the image to toggle the value of uniforms
 * // Note: for an alternative approach to the same example,
 * // involving toggling between shaders please refer to:
 * // https://p5js.org/reference/#/p5/shader
 *
 * let grad;
 * let showRedGreen = false;
 *
 * function preload() {
 *   // note that we are using two instances
 *   // of the same vertex and fragment shaders
 *   grad = loadShader('assets/shader.vert', 'assets/shader-gradient.frag');
 * }
 *
 * function setup() {
 *   createCanvas(100, 100, WEBGL);
 *   shader(grad);
 *   noStroke();
 * }
 *
 * function draw() {
 *   // update the offset values for each scenario,
 *   // moving the "grad" shader in either vertical or
 *   // horizontal direction each with differing colors
 *
 *   if (showRedGreen === true) {
 *      grad.setUniform('colorCenter', [1, 0, 0]);
 *      grad.setUniform('colorBackground', [0, 1, 0]);
 *      grad.setUniform('offset', [sin(millis() / 2000), 1]);
 *   } else {
 *      grad.setUniform('colorCenter', [1, 0.5, 0]);
 *      grad.setUniform('colorBackground', [0.226, 0, 0.615]);
 *      grad.setUniform('offset', [0, sin(millis() / 2000) + 1]);
 *   }
 *   quad(-1, -1, 1, -1, 1, 1, -1, 1);
 * }
 *
 * function mouseClicked() {
 *   showRedGreen = !showRedGreen;
 * }
 * </code>
 * </div>
 *
 * @alt
 * canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.
 */

Run npm run lint:fix
Run npm run grunt
Receive error:

...
Running "eslint-samples:source" (eslint-samples) task
/mnt/E/p5.js/src/webgl/p5.Shader.js:310:8: Delete `·` [Error/prettier/prettier]
/mnt/E/p5.js/src/webgl/p5.Shader.js:311:4: Delete `·` [Error/prettier/prettier]
/mnt/E/p5.js/src/webgl/p5.Shader.js:312:4: Delete `·` [Error/prettier/prettier]
/mnt/E/p5.js/src/webgl/p5.Shader.js:314:8: Delete `·` [Error/prettier/prettier]
/mnt/E/p5.js/src/webgl/p5.Shader.js:315:4: Delete `·` [Error/prettier/prettier]
/mnt/E/p5.js/src/webgl/p5.Shader.js:316:4: Delete `·` [Error/prettier/prettier]

6 problems
Warning: Task "eslint-samples:source" failed. Use --force to continue.

Aborted due to warnings.
npm ERR! code ELIFECYCLE
npm ERR! errno 3
npm ERR! [email protected] grunt: `grunt`
npm ERR! Exit status 3
npm ERR! 
npm ERR! Failed at the [email protected] grunt script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/hirad/.npm/_logs/2019-05-04T00_10_49_103Z-debug.log

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[Spongman]

/mnt/E

CRLF issues maybe?

[hsab]

If you refer to my commit , I'm also modifying /mnt/E/src/webgl/material.js. Shouldn't CRLF issue cause the other file to throw warnings as well?
Both files are located in the same dir

[Spongman]

i think it just bails on the first file with errors.

[Spongman]

ah! the indent is supposed to be 2 spaces, you have three spaces indent in your if/else block there.

[stalgiag]

There is an indentation issue there. There is one extra space in all of those lines. The auto fix npm run lint:fix doesn't work for whatever reason in this case but you just have an extra indentation space. The '.' period in the linter means a space usually

[hsab]

Will fix and close this appropriately.

[Spongman]

the 'fix' doesn't work for the example sources due to the fact that there's a whole bunch of crazy nonsense that happens to extract the example's source from the doc comment, run the linter on it and re-map the errors back to the original source line/cols. in theory it would be possible to run the fixer on the extracted sample and splice the fixes back into the original source, but just the linting itself is fiddly enough, i fear this would be doubly-so.

[hsab]

I think deleting the extra spaces proved to be a simpler solution :smile: