Google Summer of Code Final Submission

My original proposal was to implement autocomplete in the p5.js web editor. Here’s an excerpt:

 

The p5 web editor is currently in development, with plans to launch in time for fall semester classes. Currently, there’s no autocomplete code functionality and it’s not possible to access documentation from within the editor. We could use tern.js to solve both of these problems. Tern.js is a code-analysis engine for Javascript that works with CodeMirror, the code editor behind the p5 web editor. In addition to autocomplete, tern.js supports shortcuts to documentation and the ability to easily rename all occurrences of a variable. 

 

The p5.js web editor uses React for the front-end and is built on top of CodeMirror, a code editor for the browser.

I’ve been trying to hook up Tern.js—”a standalone Javascript analysis engine”—to implement autocomplete.

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.

Repositories

  1. 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.
  2. 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.
  3. Documentation re: errors when running the Tern definition generator code: https://gist.github.com/kaganjd/32c87c49fda5f61b78aa2b88993daca4
  4. Next steps: https://gist.github.com/kaganjd/1e033541fa00af3e760c0acddf6fc197

The workflow for this whole thing in the wild will be:

  1. Generate Tern definition file from the main p5.js project by running grunt tern
  2. 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, p5.js-web-editor/node_modules/tern/defs
  3. Use autocomplete with the web editor!

Other docs

External docs

Leave a Reply