p5-tern.md

Generating a Tern.js defs file for p5.js

Goal

p5 source code --> YUIDoc JSON --> Tern defs JSON

Process

Because p5.js uses YUIDoc to generate documentation, I'm using @angelozerr's tern.yuidoc plugin to generate a Tern.js defs file for p5.js. Ultimately, this will be used to implement code hints and autocomplete in the p5.js web editor.

1. Get the p5.js API JSON file from the p5 website, here. Learn more about the p5.js API JSON file here.
2. Then, get the Tern defs generator. Clone @angelozerr's repo with $ git clone https://github.com/angelozerr/tern.yuidoc
3. Skip to the second set of instructions, here.
4. The output is a Tern defs file from YUIDoc's data.json file.

Errors in p5.js source that break the tern.yuidoc generator

• processing/p5.js#2016

This error required working with the p5 source code directly. If you end up here, you can make the needed changes to the source code and output the API JSON file yourself like this:

1. Follow the steps for getting set up with p5 development here
2. When you run grunt, the API JSON file will be one of the outputs. You can find it in p5.js/docs/reference; it's called data.json.

Errors with the generated defs file

• parentheses inside param description: https://github.com/processing/p5.js/blob/004ba93e2ecfe4f7c5c7323eac6c07b8a801cef1/lib/addons/p5.sound.js#L8432
• Function(p5.Image) https://github.com/processing/p5.js/blob/6ff044d351d662c90a103da9c93d7b5e4037917e/src/image/loading_displaying.js#L32-L35
• Function(p5.Geometry3D) and Function(Event) https://github.com/processing/p5.js/blob/4dd42f2136400d33b4eca521b218b07636e16011/src/webgl/loading.js#L28-L31

The last two on this list were upstream problems with YUIDoc type definitions in the p5 source. If the p5 web editor loads but you get Tern defs-related errors in the console, YUIDoc type definitions seem to be the best place to start looking.