surya spent several hours with me helping me strategize about next steps for autocomplete. i’m quickly putting some notes here so i remember:
- write the tern definition file for *one* piece of the p5 source code *by hand*. this will give me the ability to see how autocomplete works when it does what i want to. he suggested p5.image because it has the most logical schema, i.e. a prototype with private methods. much of the rest of p5 is add-ons to one global p5 object.
- specifically, parse every line that starts
p5.image.prototype as well as the
@method for that object
- once that’s done, test the def file in the tern.js demo. like the one here but forked and cloned with the new p5 def file added.
- once that’s working, create a python script to read into every p5 source file and repeat the process i went through with p5.image.
My original proposal was to implement autocomplete in the p5.js web editor. Here’s an excerpt:
The p5.js web editor uses React for the front-end and is built on top of CodeMirror, a code editor for the browser.
Tern relies on a JSON file called a Tern definition file in order to “specify the types of things” you code and trigger different autocomplete functions accordingly. You can read more about that file here
Part of getting Tern working with p5.js is creating a Tern definition file for the p5.js library so that, when you’re writing in the editor, Tern can analyze what you’re writing. Tern has a utility to do this
, but it didn’t work with the p5.js library.
As a hacky workaround, I adapted some scripts that convert YUIDoc documentation into Tern definition files. Repos are linked below. Because p5.js documentation is generated with YUI/YUIDoc, this sort of worked: you can trigger docs on p5 functions and autocomplete p5 function names.
But there’s a scoping problem where methods and variables that should not be available to certain functions still appear as autocomplete options.
As of August 2017, I’m trying a new approach
to generating the Tern definition file.
- My branch of the p5 web editor connected to Tern: https://github.com/kaganjd/p5.js-web-editor/tree/autocomplete. To get it up and running, you’d follow steps in the README.
- Code to generate the Tern definition file for the p5.js library: https://github.com/processing/p5-tern.yuidoc. This is set up to be a module dependency of the main p5.js repository and executed with a Grunt task from there.
- Documentation re: errors when running the Tern definition generator code: https://gist.github.com/kaganjd/32c87c49fda5f61b78aa2b88993daca4
- Next steps: https://gist.github.com/kaganjd/1e033541fa00af3e760c0acddf6fc197
The workflow for this whole thing in the wild will be:
- Generate Tern definition file from the main p5.js project by running
- Put the file output of that process, which should be a JSON file and must be named ‘p5.json’, into the p5.js web editor project—specifically,
- Use autocomplete with the web editor!