Final GSoC Work: Context-Aware Autocomplete, Renaming, and Refactoring Enhancements

[kammeows]

This PR completes the GSoC project by introducing context-awareness to the p5.js web editor's autocomplete and refactoring features. It includes:

• Context-Aware Autocomplete
  The autocomplete hinter now filters suggestions based on the current code context. It uses a JSON of blacklisted functions and parses the code’s AST to show only relevant suggestions:

• User-Defined Code Suggestions
  Autocomplete now suggests user-defined variables, functions, and classes, as well as methods for both user-defined and p5 classes.

• Context-Aware Renaming
  Select a word, press F2, and enter the new name in the dialog. All occurrences are renamed correctly according to the context.

• Jump to Definition
  Hold Ctrl and click a word to jump to where the variable or function is defined.

• Accessibility
  All new features are fully accessible to users relying on digital accessibility tools.

[diyaayay]

I suppose this was committed by mistake.

[diyaayay]

Let's keep the README as a separate GitHub Gist, and not include it in the final PR to be merged.

[raclim]

Agree with @diyaayay here!

It'd be great if you could move this into the contributor_docs folder, and I can update how it's organized and referenced afterwards!

[diyaayay]

I tested a few things, such as the autocomplete for p5-specific functions and the warnings triggered when functions like setup or draw are used in undesired places. They work well.
The Jump to Definition feature also works fine. I tested it across multiple files, and it correctly jumps to the function declaration in another file when the function is called from there. When multiple functions with the same name exist in different files, it follows the runtime behavior. However, instead of just moving the cursor to the function declaration, it would look visually better if the function name were briefly highlighted, for example:

But the functionality works well.

[diyaayay]

The context-aware renaming feature works with Fn + F2 on some systems. I tested it with variable scopes:

function setup() {
  createCanvas(400, 400);
}

var x = 10; 

function draw() {
  var x = 10; // local variable (shadows global x)
  background(220);
  x = 20;     // modifies only the local x
}

I tested context-aware renaming and it works for functions within the same file.
However, when I rename a function in sketch.js that is defined in another file, the function definition in that other file is not renamed.
Example:
sketch.js

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  hello(); // call
}

hi.js

function hello() { // definition
  console.log("Hello");
}

Renaming hello() in sketch.js does not update the function definition in hello.js.
Is this the intended behavior?

[kammeows]

Regarding context-aware renaming, yes, that’s the expected behavior. From what I’ve seen in most code editors, the renaming only works within a single file. It won’t rename the same function or variable if it’s defined in another file. It would also make the browser editor's functionality more complicated so I thought it would be best to not include such a feature.

[kammeows]

Thank you for your feedback and all your suggestions! I'll also try to add the jump to definition highlight feature.

[raclim]

Thanks so much for your work on this @kammeows!

I think this looks really great so far, and I really love how much smoother this overall looks! I don't think I have too much to add on to @diyaayay's comments, and I feel that they covered most of my initial thoughts while testing out the feature!

I do have a quick question—while loading this branch, I ran into a small version mismatch issue between eslint and eslint-plugin-storybook, which I resolved by changing these versions. I was wondering, was this something that you faced as well?

[kammeows]

Hey @raclim! Thank you for taking a look on this. No I did not encounter any such issue. If it comes up again, we can look into whether we need to adjust the package versions in the repo to prevent others from hitting the same issue.

[raclim]

Thanks so much again for your work on this, this looks really awesome! 🙌

I was able to give it a closer review and added in a few more comments. I think on top of them, it'd be great if you could organize some of the files within client/modules/IDE!

Some ways you could approach organizing them are grouping them into subfolders within client/modules/IDE, storing in other client folders (like client/utils), or creating new folders (like client/helpers). Feel free to go with what you feel might be best, or let me know if you have any questions about it!

[raclim]

Since it seems like client/storeInstance.js is exporting the Redux store, can we remove this line here? I don't think I see any other references to here, but we may also want to update any other references to store to point to storeInstance instead!

[raclim]

Agree with @diyaayay here!

It'd be great if you could move this into the contributor_docs folder, and I can update how it's organized and referenced afterwards!

[raclim]

It'd be best to remove any extraneous comments, or note why it should be kept commented out!

[raclim]

This is a great add and will be so helpful in other parts of the app as well!

[raclim]

Is it possible to use this pre-existing device util here?

[kammeows]

Is it alright if I changed the function in device util from export function isMac() to export default function isMac() or if you want named export, then should I disable the eslint rule for this file instead?