Autocomplete Hinter support for different p5.js versions

client/modules/IDE/components/Editor/codemirror.js

@@ -4,6 +4,7 @@ import { autocompletion, closeBrackets } from '@codemirror/autocomplete';
 import { debounce } from 'lodash';
 import { openSearchPanel } from '@codemirror/search';
 import { saveLocalBackup } from '../../utils/localBackup';
+import { p5JavaScript } from './utils/p5JavaScript';
 
 import {
   getFileMode,
@@ -37,7 +38,8 @@ export default function useCodeMirror({
   autocompleteHinter,
   fontSize,
   onUpdateLinting,
-  referenceBaseUrl
+  referenceBaseUrl,
+  p5Version
 }) {
   // The codemirror instance.
   const cmView = useRef();
@@ -157,6 +159,19 @@ export default function useCodeMirror({
       reconfigureEffect
     });
   }, [autocompleteHinter, referenceBaseUrl]);
+  useEffect(() => {
+    const reconfigureEffect = (fileState) =>
+      fileState.languageCpt.reconfigure(
+        autocompleteHinter ? p5JavaScript(p5Version) : []
+      );
+
+    updateFileStates({
+      fileStates: fileStates.current,
+      cmView: cmView.current,
+      file,
+      reconfigureEffect
+    });
+  }, [p5Version]);
 
   // Initializes the files as CodeMirror states.
   function initializeDocuments() {
@@ -180,7 +195,8 @@ export default function useCodeMirror({
             onUpdateLinting,
             onViewUpdate,
             referenceBaseUrl,
-            fontSize
+            fontSize,
+            p5Version
           }
         );
       }

client/modules/IDE/components/Editor/index.jsx

@@ -32,6 +32,7 @@ import { FolderIcon } from '../../../../common/icons';
 import { IconButton } from '../../../../common/IconButton';
 
 import useCodeMirror from './codemirror';
+import { useP5Version } from '../../hooks/useP5Version';
 
 import {
   addErrorDecoration,
@@ -78,6 +79,7 @@ function Editor({
   collapseSidebar,
   expandSidebar
 }) {
+  const { versionInfo } = useP5Version();
   const [currentLine, setCurrentLine] = useState(1);
   const beep = useRef();
 
@@ -118,7 +120,8 @@ function Editor({
     fontSize,
     updateLintingMessageAccessibility,
     setCurrentLine,
-    referenceBaseUrl: getReferenceBaseUrl(htmlFile)
+    referenceBaseUrl: getReferenceBaseUrl(htmlFile),
+    p5Version: versionInfo?.version
   });
 
   // Lets the parent component access file content-specific functionality...

client/modules/IDE/components/Editor/utils/fileState.js

@@ -139,13 +139,15 @@ export function createNewFileState(filename, document, settings) {
     onUpdateLinting,
     onViewUpdate,
     referenceBaseUrl,
-    fontSize
+    fontSize,
+    p5Version
   } = settings;
   const lineNumbersCpt = new Compartment();
   const lineWrappingCpt = new Compartment();
   const closeBracketsCpt = new Compartment();
   const autocompleteCpt = new Compartment();
   const fontSizeCpt = new Compartment();
+  const languageCpt = new Compartment();
 
   // Depending on the file mode, we have a different tidier function.
   // Keep this binding local to each file state so modes don't accumulate
@@ -205,7 +207,11 @@ export function createNewFileState(filename, document, settings) {
   const fileEmmetConfig = getFileEmmetConfig(filename);
 
   if (fileLanguage) {
-    extensions.push(fileLanguage());
+    extensions.push(
+      languageCpt.of(
+        mode === 'javascript' ? fileLanguage(p5Version) : fileLanguage()
+      )
+    );
   }
   if (fileLinter) {
     extensions.push(fileLinter);
@@ -246,7 +252,8 @@ export function createNewFileState(filename, document, settings) {
     lineWrappingCpt,
     closeBracketsCpt,
     autocompleteCpt,
-    fontSizeCpt
+    fontSizeCpt,
+    languageCpt
   };
 }
 

client/modules/IDE/components/Editor/utils/fileState.test.js

@@ -11,7 +11,8 @@ const defaultSettings = {
   autocloseBracketsQuotes: false,
   onUpdateLinting: () => {},
   onViewUpdate: () => {},
-  referenceBaseUrl: 'https://p5js.org'
+  referenceBaseUrl: 'https://p5js.org',
+  p5Version: '1.11.13'
 };
 
 function mountFile(filename, doc) {

client/modules/IDE/components/Editor/utils/p5JavaScript.js

@@ -2,7 +2,8 @@ import { LanguageSupport, syntaxTree } from '@codemirror/language';
 import { javascript } from '@codemirror/lang-javascript';
 import { ViewPlugin, Decoration } from '@codemirror/view';
 import { RangeSetBuilder } from '@codemirror/state';
-import { p5Hinter } from '../../../../../utils/p5-hinter';
+import { p5HinterV1 } from '../../../../../utils/p5-hinter-v1';
+import { p5HinterV2 } from '../../../../../utils/p5-hinter-v2';
 import { completionPreview } from './completionPreview';
 import contextAwareHinter from '../../../../../utils/contextAwareHinter';
 import {
@@ -54,20 +55,24 @@ const p5Highlight = ViewPlugin.fromClass(
   { decorations: (v) => v.decorations }
 );
 
-function addCompletions(context) {
-  const word = context.matchBefore(/\w*/);
-  const isValidWord = word?.text && word.text.trim().length >= 2;
-  if (!isValidWord && !context.explicit) {
-    return null;
-  }
+export function p5JavaScript(p5Version) {
+  const jsLang = javascript();
 
-  return contextAwareHinter(context, {
-    hints: p5Hinter
-  });
-}
+  const hints = p5Version?.startsWith('2.') ? p5HinterV2 : p5HinterV1;
+
+  function addCompletions(context) {
+    const word = context.matchBefore(/\w*/);
+    const isValidWord = word?.text && word.text.trim().length >= 2;
+
+    if (!isValidWord && !context.explicit) {
+      return null;
+    }
+
+    return contextAwareHinter(context, {
+      hints
+    });
+  }
 
-export function p5JavaScript() {
-  const jsLang = javascript();
   return new LanguageSupport(jsLang.language, [
     jsLang.extension,
     jsLang.language.data.of({

server/scripts/update-p5-hinter.js

@@ -2,6 +2,17 @@ const fs = require('fs');
 const process = require('process');
 const axios = require('axios');
 
+const VERSIONS = [
+  {
+    version: 'v1',
+    url: 'https://p5js.org/reference/data.json'
+  },
+  {
+    version: 'v2',
+    url: 'https://beta.p5js.org/reference/data.json'
+  }
+];
+
 // TODO: Currently this makes duplicate entries because
 // the default Javascript hinter also has these,
 // but should we keep them around for the p5 reference links?
@@ -85,10 +96,8 @@ function makePreview(label, type, params = []) {
   return label;
 }
 
-// TODO: add back in reference version switching depending user's p5.js version
-axios
-  .get('https://p5js.org/reference/data.json')
-  .then((response) => {
+function generateHinter({ version, url }) {
+  return axios.get(url).then((response) => {
     const { data } = response;
 
     const arr = data.classitems;
@@ -164,19 +173,28 @@ axios
     generatedCode +=
       '/* generated: do not edit! helper file for hinter.' +
       ' generated by update-p5-hinter script */\n';
-    generatedCode += `exports.p5Hinter = ${keywords};\n`;
-
-    fs.writeFile(
-      `${process.cwd()}/client/utils/p5-hinter.js`,
-      generatedCode,
-      (error) => {
-        if (error) {
-          console.log("Error!! Couldn't write to the file", error);
-        } else {
-          console.log('Hinter files updated successfully');
+    generatedCode += `exports.p5Hinter${version.toUpperCase()} = ${keywords};\n`;
+
+    return new Promise((resolve, reject) => {
+      fs.writeFile(
+        `${process.cwd()}/client/utils/p5-hinter-${version}.js`,
+        generatedCode,
+        (error) => {
+          if (error) {
+            console.log("Error!! Couldn't write to the file", error);
+            reject(error);
+          } else {
+            resolve();
+          }
         }
-      }
-    );
+      );
+    });
+  });
+}
+
+Promise.all(VERSIONS.map(generateHinter))
+  .then(() => {
+    console.log('Hinter files updated successfully');
   })
   .catch((err) => {
     throw err;