Skip to content

Commit 6898da2

Browse files
authored
Merge branch 'dev-2.0' into fix/noise-vector-input
2 parents 6b50a2e + e131ff4 commit 6898da2

File tree

3 files changed

+29
-133
lines changed

3 files changed

+29
-133
lines changed

contributor_docs/archive/custom_p5_build.md

Lines changed: 0 additions & 46 deletions
This file was deleted.

contributor_docs/es/steward_guidelines.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -382,4 +382,3 @@ Al observar un repositorio, eventos como nuevos <em>issues</em>, nuevos <em>pull
382382
En algunos casos, también puedes recibir correos electrónicos de GitHub sobre eventos en el repositorio que estás observando, y puedes personalizarlos (incluida la desuscripción completa de ellos) desde tu [página de configuración de notificaciones](https://github.com/settings/notifications).
383383

384384
Configurar estas opciones para que se adapten a la forma en que trabajas puede ser la diferencia entre tener que buscar <em>issues</em>/PRs relevantes para revisar manualmente y sentirse abrumado por notificaciones interminables de GitHub. Se requiere un buen equilibrio aquí. Como sugerencia inicial, los supervisores deberían observar este repositorio para <em>Issues</em> y <em>Pull Requests</em> y configurarlo para recibir correos electrónicos solo sobre "Participando, @menciones y personalizadas".
385-

contributor_docs/steward_guidelines.md

Lines changed: 29 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,10 @@ Whether you are new to p5.js contribution, are already active on the p5.js GitHu
2020
- [Pull Requests](#pull-requests)
2121
- [Simple fix](#simple-fix)
2222
- [Bug fix](#bug-fix)
23-
- [New feature/feature enhancement](#new-feature-feature-enhancement)
23+
- [New feature/feature enhancement](#new-featurefeature-enhancement)
2424
- [Dependabot](#dependabot)
2525
- [Build Process](#build-process)
2626
- [Main build task](#main-build-task)
27-
- [Miscellaneous tasks](#miscellaneous-tasks)
2827
- [Release Process](#release-process)
2928
- [Tips & Tricks](#tips--tricks)
3029
- [Reply templates](#reply-templates)
@@ -87,7 +86,7 @@ To remain a steward, you must contribute as a steward to at least 1 of the 2 mos
8786

8887
### Getting Started with Stewardship
8988

90-
1. Keep this guideline handy as a reference - how to help with new issues, bugs, and features. For example, the "Feature request" section includes tips on how to use the the p5.js [access statement](access.md) as a steward.
89+
1. Keep this guideline handy as a reference - how to help with new issues, bugs, and features. For example, the "Feature request" section includes tips on how to use the p5.js [access statement](access.md) as a steward.
9190
2. When helping to answer technical questions or review, try to apply the Processing Foundation [guideline on answering questions](https://discourse.processing.org/t/guidelines-answering-questions/2145) - these can be especially helpful for giving constructive technical feedback.
9291
3. Join the [p5.js Discord](https://discord.com/invite/SHQ8dH25r9) - in the `#contribute-to-p5` you're welcome to ask any questions you have about this process - or suggest how it can be improved!
9392

@@ -237,125 +236,70 @@ Dependabot PRs are usually only visible to repo admins so if this does not apply
237236

238237
This section will not cover the general build setup nor commands but rather details about what's happening behind the scenes. Please see the [contributor’s guidelines](contributor_guidelines.md#working-on-p5js-codebase) for more detailed build info.
239238

240-
The Gruntfile.js file contains the main build definitions for p5.js. Among the different tools used to build the library and documentation includes but not limited to Grunt, Browserify, YUIDoc, ESLint, Babel, Uglify, and Mocha. It may be helpful for us to start with the `default` task and work backward from there. It may be helpful at this point to open up the Gruntfile.js document while going through the explainer below.
239+
Starting with p5.js version 2.0, the project no longer uses Grunt for task automation. Instead, the build and test processes are handled using modern tools like npm scripts, ESLint, and [Vitest](https://vitest.dev/).
241240

242241

243242
### Main build task
244243

245-
```
246-
grunt.registerTask('default', ['lint', 'test']);
247-
```
248-
249-
When we run `grunt` or the npm script `npm test`, we run the default task consisting of `lint` then `test`.
250-
251-
252-
#### `lint` Task
244+
To run lint checks and unit tests, simply run:
253245

254246
```
255-
grunt.registerTask('lint', ['lint:source', 'lint:samples']);
247+
npm test
256248
```
257249

258-
The `lint` task consists of two sub tasks: `lint:source` and `lint:samples`. `lint:source` is further subdivided into three more sub tasks `eslint:build`, `eslint:source`, and `eslint:test`, which uses ESLint to check the build scripts, the source code, and the test scripts.
250+
This command runs ESLint to check code style and then execute unit and visual tests using Vitest.
259251

260-
The `lint:samples` task will first run the `yui` task which itself consists of `yuidoc:prod`, `clean:reference`, and `minjson`, which extract the documentation from the source code into a JSON document, remove unused files from the previous step, and minify the generated JSON file into `data.min.json` respectively.
261-
262-
Next in `lint:samples` is `eslint-samples:source`, which is a custom written task whose definition is in [../tasks/build/eslint-samples.js](../tasks/build/eslint-samples.js); it will run ESLint to check the documentation example code to make sure they follow the same coding convention as the rest of p5.js (`yui` is run first here because we need the JSON file to be built first before we can lint the examples).
252+
#### `lint` Task
263253

254+
In p5.js 2.0, ESLint is used directly via npm scripts for all linting tasks.
264255

265-
#### `test` Task
256+
To run lint checks on the codebase:
266257

267-
```js
268-
grunt.registerTask('test', [
269-
'build',
270-
'connect:server',
271-
'mochaChrome',
272-
'mochaTest',
273-
'nyc:report'
274-
]);
275258
```
276-
277-
First let's look at the `build` task under `test`.
278-
279-
```js
280-
grunt.registerTask('build', [
281-
'browserify',
282-
'browserify:min',
283-
'uglify',
284-
'browserify:test'
285-
]);
259+
npm run lint
286260
```
287261

288-
Tasks that start with `browserify` are defined in [../tasks/build/browserify.js](../tasks/build/browserify.js). They all have similar steps with minor differences. These are the main steps to build the full p5.js library from its many source code files into one:
289-
290-
- `browserify` builds p5.js while `browserify:min` builds an intermediate file to be minified in the next step. The difference between `browserify` and `browserify:min` is that `browserify:min` does not contain data needed for FES to function.
291-
- `uglify` takes the output file of `browserify:min` and minify it into the final p5.min.js (configuration of this step is in the main Gruntfile.js).
292-
- `browserify:test` is building a version identical to the full p5.js except for added code that is used for test code coverage reporting (using [Istanbul](https://istanbul.js.org/)).
262+
This checks the source files, build scripts, test files, and documentation examples using ESLint.
293263

294-
First, use of the `fs.readFileSync()` node.js specific code is replaced with the file's actual content using `brfs-babel`. This is used mainly by WebGL code to inline shader code from source code written as separate files.
295-
296-
Next, the source code, including all dependencies from node\_modules, is transpiled using Babel to match the [Browserslist](https://browsersl.ist/) requirement defined in package.json as well as to make the ES6 import statements into CommonJS `require()` that browserify understands. This also enables us to use newer syntax available in ES6 and beyond without worrying about browser compatibility.
297-
298-
After bundling but before the bundled code is written to file, the code is passed through `pretty-fast`, if it is not meant to be minified, it should be cleaned up so the final formatting is a bit more consistent (we anticipate the p5.js source code can be read and inspected if desired).
299-
300-
A few small detailed steps are left out here; you can check out the browserify build definition file linked above to have a closer look at everything.
264+
If you only want to run linting for specific files or directories, you can use ESLint directly:
301265

302266
```
303-
connect:server
267+
npx eslint src/
268+
npx eslint test/
304269
```
305270

306-
This step spins up a local server hosting the test files and built source code files so that automated tests can be run in Chrome.
307-
308-
```
309-
mochaChrome
310-
```
271+
There is no separate sample linter or YUIDoc-based pipeline anymore.
311272

312-
This step is defined in [../tasks/test/mocha-chrome.js](../tasks/test/mocha-chrome.js). It uses Puppeteer to spin up a headless version of Chrome that can be remote controlled and runs the tests associated with the HTML files in the `./test` folder, which includes testing the unminified and minified version of the library against the unit test suites as well as testing all reference examples.
273+
#### `test` Task
313274

314-
```
315-
mochaTest
316-
```
275+
In p5.js 2.0, the testing system no longer uses Mocha via Grunt. Instead, tests are run using [Vitest](https://vitest.dev/) through npm scripts.
317276

318-
This step differs from `mochaChrome` in that it is run in node.js instead of in Chrome and only tests a small subset of features in the library. Most features in p5.js will require a browser environment, so this set of tests should only be expanded if the new tests really don't need a browser environment.
277+
To run the full test suite (unit and visual tests), use:
319278

320279
```
321-
nyc:report
280+
npm test
322281
```
323282

324-
Finally, after all builds and tests are complete, this step will gather the test coverage report while `mochaChrome` was testing the full version of the library and print the test coverage data to the console. Test coverage for p5.js is mainly for monitoring and having some additional data points; having 100% test coverage is not a goal.
325-
326-
And that covers the default task in the Gruntfile.js configuration!
283+
This command performs:
284+
- Linting via ESLint
285+
- Unit tests using Vitest
286+
- Visual tests (render-based snapshots)
327287

288+
Tests are located in the `test/unit` folder, organized to mirror the `src` directory structure. For example, tests for `src/color/p5.Color.js` live in `test/unit/color/p5.Color.js`.
328289

329-
### Miscellaneous tasks
330-
331-
All of the steps can be run directly with `npx grunt [step]`. There are also a few tasks that are not covered above but could be useful in certain cases.
290+
To run tests interactively in a browser-like environment (useful for debugging), run:
332291

333292
```
334-
grunt yui:dev
293+
npx vitest --ui
335294
```
336295

337-
This task will run the documentation and library builds described above, followed by spinning up a web server that serves a functionally similar version of the reference page you will find on the website on [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/). It will then monitor the source code for changes and rebuild the documentation and library.
338-
339-
`grunt` `yui:dev` is useful when you are working on the reference in the inline documentation because you don't have to move built files from the p5.js repository to a local p5.js-website repository and rebuild the website each time you make a change, and you can just preview your changes with this slightly simplified version of the reference in your browser. This way, you can also be more confident that the changes you made are likely to show up correctly on the website. Note that this is only meant for modifications to the inline documentation; changes to the reference page itself, including styling and layout, should be made and tested on the website repository.
296+
Code coverage is also supported using Vitest's built-in tools. Run:
340297

341298
```
342-
grunt watch
343-
grunt watch:main
344-
grunt watch:quick
299+
npx vitest run --coverage
345300
```
346301

347-
The watch tasks will watch a series of files for changes and run associated tasks to build the reference or the library according to what files have changed. These tasks all do the same thing, with the only difference being the scope.
348-
349-
The `watch` task will run all builds and tests similar to running the full default task on detecting changes in the source code.
350-
351-
The `watch:main` task will run the library build and tests but not rebuild the reference on detecting changes in the source code.
352-
353-
The `watch:quick` task will run the library build only on detecting changes in the source code.
354-
355-
Depending on what you are working on, choosing the most minimal watch task here can save you from having to manually run a rebuild whenever you want to make some changes.
356-
357-
---
358-
302+
**Note:** The Browserify/Grunt build pipeline (e.g., `browserify`, `uglify`, `brfs-babel`) was removed in v2.
359303

360304
## Release process
361305

@@ -443,4 +387,3 @@ By watching a repo, events such as new issues, new pull requests, mentions of yo
443387
In some cases, you may receive emails from GitHub about events in the repo you are watching as well, and you can customize these (including unsubscribing from them completely) from your [notifications settings page](https://github.com/settings/notifications).
444388

445389
Setting these up to fit the way you work can be the difference between having to find relevant issues/PRs to review manually and being overwhelmed by endless notifications from GitHub. A good balance is required here. As a starting suggestion, stewards should watch this repo for "Issues" and "Pull Requests" and set it to only receive emails on "Participating, @mentions and custom."
446-

0 commit comments

Comments
 (0)