Merge branch 'develop' into pr05_finals_clientModuleAbout

Author: raclim

README.md

@@ -10,45 +10,36 @@ We are a community of, and in solidarity with, people from every gender identity
 
 Learn more about [our community](https://p5js.org/community/) and read our [Community Statement and Code of Conduct](./.github/CODE_OF_CONDUCT.md). You can directly support our work with p5.js by [donating to the Processing Foundation](https://processingfoundation.org/support).
 
-Stay in touch with Processing Foundation across other platforms: 
+Stay in touch with Processing Foundation across other platforms:
+
 - [Instagram](https://www.instagram.com/p5xjs)
 - [Youtube](https://www.youtube.com/@ProcessingFoundation)
 - [X](https://x.com/p5xjs)
 - [Discord](https://discord.com/invite/esmGA6H6wm)
 - [Forum](https://discourse.processing.org)
 
-
 ## Using the p5.js Editor 🤔
 
-Make your first sketch in the [p5.js Editor](https://editor.p5js.org/)! Learn more about sketching with p5.js on the [Get Started](https://p5js.org/tutorials/get-started/) and find everything you can do in the [Reference](https://p5js.org/reference/). You can also look at [examples](https://editor.p5js.org/p5/sketches) and remix them in the p5.js Editor. 
+Make your first sketch in the [p5.js Editor](https://editor.p5js.org/)! Learn more about sketching with p5.js on the [Get Started](https://p5js.org/tutorials/get-started/) and find everything you can do in the [Reference](https://p5js.org/reference/). You can also look at [examples](https://editor.p5js.org/p5/sketches) and remix them in the p5.js Editor.
 
-For more information on usage guidelines for the p5.js Editor, check out the [p5.js Editor Terms of Use](https://editor.p5js.org/terms-of-use). To gain better insight into how we handle user data and data privacy, refer to the [p5.js Editor Privacy Policy](https://editor.p5js.org/privacy-policy). 
+For more information on usage guidelines for the p5.js Editor, check out the [p5.js Editor Terms of Use](https://editor.p5js.org/terms-of-use). To gain better insight into how we handle user data and data privacy, refer to the [p5.js Editor Privacy Policy](https://editor.p5js.org/privacy-policy).
 
 ## Contributing 📖 🐛 🎨
 
-The p5.js Editor is a collaborative project created by many individuals, mostly volunteers, and you are invited to help. All types of involvement are welcome. To get started with contributing to the p5.js Editor, we recommend exploring the following resources in order: 
+The p5.js Editor is a collaborative project created by many individuals, mostly volunteers, and you are invited to help. All types of involvement are welcome. To get started with contributing to the p5.js Editor, we recommend exploring the following resources in order:
 
 1. [p5.js Community Statement and Code of Conduct](https://editor.p5js.org/code-of-conduct) - Read our Community Statement and Code of Conduct to understand the values that guide our community and how to participate respectfully and constructively.
 
 2. [Contributor Docs](https://github.com/processing/p5.js-web-editor/blob/develop/contributor_docs/README.md) - For a deeper look at how to get involved with the p5.js Editor, check out our Contributor Docs for more in-depth details about contributing to different areas of the project, including code, bug fixes, documentation, discussion, and more.
 
 3. [All Contributors list on the p5.js repository](https://github.com/processing/p5.js?tab=readme-ov-file#contributors) - Explore the All Contributors list to see the wide range of contributions by our amazing community!
 
-> **TypeScript Migration:** 
-> As of July 2025, we are working on migrating the repo to TypeScript as part of the **[p5.js Web Editor pr05 Grant](https://github.com/processing/pr05-grant/wiki/2025-pr05-Program-Page)**.  
-> This migration will occur in two phases:
-> 1. **Grant Work (July – October 31, 2025)** – Setting up TypeScript configuration, tooling, and starting partial migration. Contributions will be **closed** during this period.
-> 2. **Open Contribution (After October 31, 2025)** – TypeScript migration tasks will **open** to all contributors, with guidelines and tutorials available.  
+> **TypeScript Migration:** We have initiated migrating the repo to Typescript as part of the **[p5.js Web Editor pr05 Grant](https://github.com/processing/pr05-grant/wiki/2025-pr05-Program-Page)**, and the repo is now open to migration contributions.
 >
-> For full details, see [TypeScript Migration Plan](./contributor_docs/typescript-migration.md).
+> Please see [Typescript Migration](contributor_docs/typescript_migration.md) for migration guidelines. Please see [2025 pr05 Typescript Migration Project](contributor_docs/pr05_2025_typescript_migration/index.md) for details and technical decisions for the migration project.
 
 ## Acknowledgements 🙏
 
-Support for this project has come from [Processing Foundation](https://processingfoundation.org/), [NYU ITP](https://tisch.nyu.edu/itp), [CS4All, NYC DOE](http://cs4all.nyc/), [COSA at DU](https://liberalarts.du.edu/emergent-digital-practices/open-source-arts), [STUDIO for Creative Inquiry](https://studioforcreativeinquiry.org/), [Grant for the Web](https://www.grantfortheweb.org/), [New Media Rights](https://www.newmediarights.org/), and many others. 
+Support for this project has come from [Processing Foundation](https://processingfoundation.org/), [NYU ITP](https://tisch.nyu.edu/itp), [CS4All, NYC DOE](http://cs4all.nyc/), [COSA at DU](https://liberalarts.du.edu/emergent-digital-practices/open-source-arts), [STUDIO for Creative Inquiry](https://studioforcreativeinquiry.org/), [Grant for the Web](https://www.grantfortheweb.org/), [New Media Rights](https://www.newmediarights.org/), and many others.
 
-Hosting and technical support has come from: 
-<br />
-<br />
-<a href="https://releasehub.com/" target="_blank"><img width="100" src="https://assets.website-files.com/603dd147c5b0a480611bd348/603dd147c5b0a469bc1bd451_logo--dark.svg" /></a>
-<br />
-<a href="https://www.browserstack.com/" target="_blank"><img width="100" src="https://user-images.githubusercontent.com/6063380/46976166-ab280a80-d096-11e8-983b-18dd38c8cc9b.png" /></a>
+Hosting and technical support has come from: <br /> <br /> <a href="https://releasehub.com/" target="_blank"><img width="100" src="https://assets.website-files.com/603dd147c5b0a480611bd348/603dd147c5b0a469bc1bd451_logo--dark.svg" /></a> <br /> <a href="https://www.browserstack.com/" target="_blank"><img width="100" src="https://user-images.githubusercontent.com/6063380/46976166-ab280a80-d096-11e8-983b-18dd38c8cc9b.png" /></a>

client/index.jsx

@@ -23,7 +23,10 @@ const store = setupStore(initialState);
 
 const DONATE_LOGO_IMAGE_URL = 'https://donorbox.org/images/white_logo.svg';
 
+const showDonateCampaign = false;
+
 if (
+  showDonateCampaign &&
   window.location.href.indexOf('full') === -1 &&
   window.location.href.indexOf('embed') === -1
 ) {

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

@@ -21,12 +21,8 @@ import {
   setLinewrap,
   setPreferencesTab
 } from '../../actions/preferences';
-import {
-  majorVersion,
-  p5SoundURL,
-  p5URL,
-  useP5Version
-} from '../../hooks/useP5Version';
+import { majorVersion, p5URL, useP5Version } from '../../hooks/useP5Version';
+import p5SoundURL from '../../../../../common/p5URLs';
 import VersionPicker from '../VersionPicker';
 import { updateFileContent } from '../../actions/files';
 import { CmControllerContext } from '../../pages/IDEView';

client/modules/IDE/hooks/useP5Version.jsx

@@ -3,24 +3,22 @@ import React, { useContext, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { currentP5Version, p5Versions } from '../../../../common/p5Versions';
+import {
+  p5SoundURLOldTemplate,
+  p5SoundURL,
+  p5PreloadAddonURL,
+  p5ShapesAddonURL,
+  p5DataAddonURL,
+  p5URLTemplate
+} from '../../../../common/p5URLs';
 
 export const majorVersion = (version) => version.split('.')[0];
 
-export const p5SoundURLOldTemplate =
-  'https://cdnjs.cloudflare.com/ajax/libs/p5.js/$VERSION/addons/p5.sound.min.js';
 export const p5SoundURLOld = p5SoundURLOldTemplate.replace(
   '$VERSION',
   currentP5Version
 );
-export const p5SoundURL =
-  'https://cdn.jsdelivr.net/npm/[email protected]/dist/p5.sound.min.js';
-export const p5PreloadAddonURL =
-  'https://cdn.jsdelivr.net/npm/[email protected]/src/preload.js';
-export const p5ShapesAddonURL =
-  'https://cdn.jsdelivr.net/npm/[email protected]/src/shapes.js';
-export const p5DataAddonURL =
-  'https://cdn.jsdelivr.net/npm/[email protected]/src/data.js';
-export const p5URL = `https://cdn.jsdelivr.net/npm/p5@${currentP5Version}/lib/p5.js`;
+export const p5URL = p5URLTemplate.replace('$VERSION', currentP5Version);
 
 const P5VersionContext = React.createContext({});
 

client/modules/IDE/reducers/files.js

@@ -5,12 +5,14 @@ import {
   defaultCSS,
   defaultHTML
 } from '../../../../server/domain-objects/createDefaultFiles';
+import { parseUrlParams } from '../../../utils/parseURLParams';
 
 export const initialState = () => {
   const a = objectID().toHexString();
   const b = objectID().toHexString();
   const c = objectID().toHexString();
   const r = objectID().toHexString();
+  const params = parseUrlParams(window.location.href);
   return [
     {
       name: 'root',
@@ -32,7 +34,7 @@ export const initialState = () => {
     },
     {
       name: 'index.html',
-      content: defaultHTML,
+      content: defaultHTML(params),
       id: b,
       _id: b,
       fileType: 'file',

client/utils/parseURLParams.js

@@ -0,0 +1,87 @@
+import { p5Versions, currentP5Version } from '../../common/p5Versions';
+
+const DEFAULTS = {
+  sound: true,
+  preload: false,
+  shapes: false,
+  data: false
+};
+
+/**
+ * Sorts version strings in descending order and returns the highest version
+ * @param {string[]} versions - Array of version strings (e.g., ['1.11.2', '1.11.1'])
+ * @returns {string} The highest version from the array
+ */
+function getNewestVersion(versions) {
+  return versions.sort((a, b) => {
+    const pa = a.split('.').map((n) => parseInt(n, 10));
+    const pb = b.split('.').map((n) => parseInt(n, 10));
+    for (let i = 0; i < 3; i++) {
+      const na = pa[i] || 0;
+      const nb = pb[i] || 0;
+      if (na !== nb) return nb - na;
+    }
+    return 0;
+  })[0];
+}
+
+function validateVersion(version) {
+  if (!version) return currentP5Version;
+
+  const ver = String(version).trim();
+
+  if (p5Versions.includes(ver)) return ver;
+
+  // if only major.minor provided like "1.11"
+  const majorMinorMatch = /^(\d+)\.(\d+)$/.exec(ver);
+  if (majorMinorMatch) {
+    const [, major, minor] = majorMinorMatch;
+    const matches = p5Versions.filter((v) => {
+      const parts = v.split('.');
+      return parts[0] === major && parts[1] === minor;
+    });
+    if (matches.length) {
+      return getNewestVersion(matches);
+    }
+  }
+
+  // if only major provided like "1"
+  const majorOnlyMatch = /^(\d+)$/.exec(ver);
+  if (majorOnlyMatch) {
+    const [, major] = majorOnlyMatch;
+    const matches = p5Versions.filter((v) => v.split('.')[0] === major);
+    if (matches.length) {
+      return getNewestVersion(matches);
+    }
+  }
+
+  return currentP5Version;
+}
+
+function validateBool(value, defaultValue) {
+  if (!value) return defaultValue;
+
+  const v = String(value).trim().toLowerCase();
+
+  const TRUTHY = new Set(['on', 'true', '1']);
+  const FALSY = new Set(['off', 'false', '0']);
+
+  if (TRUTHY.has(v)) return true;
+  if (FALSY.has(v)) return false;
+
+  return defaultValue;
+}
+
+export function parseUrlParams(url) {
+  const params = new URLSearchParams(
+    new URL(url, 'https://dummy.origin').search
+  );
+
+  return {
+    version: validateVersion(params.get('version')),
+    sound: validateBool(params.get('sound'), DEFAULTS.sound),
+    preload: validateBool(params.get('preload'), DEFAULTS.preload),
+    shapes: validateBool(params.get('shapes'), DEFAULTS.shapes),
+    data: validateBool(params.get('data'), DEFAULTS.data)
+  };
+}

client/utils/parseURLParams.test.js

@@ -0,0 +1,51 @@
+import { parseUrlParams } from './parseURLParams';
+import { currentP5Version } from '../../common/p5Versions';
+
+describe('parseUrlParams', () => {
+  test('returns defaults when no params are provided', () => {
+    const url = 'https://example.com';
+    const result = parseUrlParams(url);
+
+    expect(result).toEqual({
+      version: currentP5Version,
+      sound: true,
+      preload: false,
+      shapes: false,
+      data: false
+    });
+  });
+
+  test('parses a valid p5 version and falls back for invalid versions', () => {
+    const good = parseUrlParams('https://example.com?version=1.4.0');
+    expect(good.version).toBe('1.4.0');
+
+    const bad = parseUrlParams('https://example.com?version=9.9.9');
+    expect(bad.version).toBe(currentP5Version);
+  });
+
+  test('parses boolean-like params for sound/preload/shapes/data (true variants)', () => {
+    const trueVariants = ['on', 'true', '1', 'ON', 'True'];
+
+    trueVariants.forEach((v) => {
+      const url = `https://example.com?sound=${v}&preload=${v}&shapes=${v}&data=${v}`;
+      const result = parseUrlParams(url);
+      expect(result.sound).toBe(true);
+      expect(result.preload).toBe(true);
+      expect(result.shapes).toBe(true);
+      expect(result.data).toBe(true);
+    });
+  });
+
+  test('parses boolean-like params for sound/preload/shapes/data (false variants)', () => {
+    const falseVariants = ['off', 'false', '0', 'OFF', 'False'];
+
+    falseVariants.forEach((v) => {
+      const url = `https://example.com?sound=${v}&preload=${v}&shapes=${v}&data=${v}`;
+      const result = parseUrlParams(url);
+      expect(result.sound).toBe(false);
+      expect(result.preload).toBe(false);
+      expect(result.shapes).toBe(false);
+      expect(result.data).toBe(false);
+    });
+  });
+});

client/utils/rename-variable.js

@@ -46,9 +46,6 @@ function startRenaming(cm, ast, fromPos, newName, oldName) {
 
       const startIndex = node.start;
       const endIndex = node.end;
-
-      if (node.name !== oldName) return;
-
       const pos = cm.posFromIndex(startIndex);
 
       if (
@@ -57,19 +54,15 @@ function startRenaming(cm, ast, fromPos, newName, oldName) {
           parent.type === 'ArrowFunctionExpression') &&
         parent.params.some((p) => p.type === 'Identifier' && p.name === oldName)
       ) {
-        if (!parent.params.includes(node)) {
-          return;
-        }
+        if (!parent.params.includes(node)) return;
       }
 
       if (
         parent.type === 'MemberExpression' &&
         parent.property === node &&
         !parent.computed
       ) {
-        if (parent.object.type === 'ThisExpression' && !isBaseThis) {
-          return;
-        }
+        if (parent.object.type === 'ThisExpression' && !isBaseThis) return;
       }
 
       const thisContext = getContext(
@@ -84,6 +77,8 @@ function startRenaming(cm, ast, fromPos, newName, oldName) {
       let shouldRenameGlobalVar = false;
       const isThis = isThisReference(cm, ast, pos, oldName);
 
+      shouldRenameGlobalVar = isGlobal && thisContext === 'global';
+
       // Handle renaming inside classes
       if (isInsideClassContext) {
         const tempPos = {
@@ -121,14 +116,6 @@ function startRenaming(cm, ast, fromPos, newName, oldName) {
           isThis === isBaseThis &&
           baseContext === thisContext
         ) {
-          Object.entries(classMeta.methodVars || {}).forEach(
-            ([methodName, vars]) => {
-              if (!vars.includes(oldName) && thisContext === methodName) {
-                const shouldRenameMethodVar = true;
-              }
-            }
-          );
-
           shouldRename =
             thisContext === baseContext &&
             (currentMethodName === 'constructor' || shouldRenameGlobalVar);
@@ -162,7 +149,6 @@ function startRenaming(cm, ast, fromPos, newName, oldName) {
             isGlobal &&
             !Object.prototype.hasOwnProperty.call(thisScopeVars, oldName);
         }
-        shouldRenameGlobalVar = isGlobal && thisContext === 'global';
       }
       // Handle renaming outside classes
       else {
@@ -201,15 +187,13 @@ function startRenaming(cm, ast, fromPos, newName, oldName) {
           isBaseThis
         );
 
-        if (
-          isThisGlobal &&
-          thisContext in userDefinedFunctionMetadata &&
-          userDefinedFunctionMetadata[thisContext].params.some(
-            (param) => param.p === oldName
-          )
-        ) {
-          return;
-        }
+        const params = userDefinedFunctionMetadata[thisContext]?.params || [];
+        const hasParamNamedOldName = params.some((param) =>
+          typeof param === 'string'
+            ? param === oldName
+            : param?.name === oldName || param?.p === oldName
+        );
+        if (isThisGlobal && hasParamNamedOldName) return;
 
         const methodPath = path.findParent((p) => p.isClassMethod());
         let currentMethodName = null;

client/utils/showRenameDialog.jsx

@@ -1,6 +1,6 @@
 import announceToScreenReader from './ScreenReaderHelper';
 import p5CodeAstAnalyzer from './p5CodeAstAnalyzer';
-import { getClassContext, getContext, getAST } from './renameVariableHelper';
+import { getContext, getAST } from './renameVariableHelper';
 
 const allFuncs = require('./p5-reference-functions.json');
 

common/p5URLs.js

@@ -0,0 +1,12 @@
+export const p5SoundURLOldTemplate =
+  'https://cdnjs.cloudflare.com/ajax/libs/p5.js/$VERSION/addons/p5.sound.min.js';
+export const p5SoundURL =
+  'https://cdn.jsdelivr.net/npm/[email protected]/dist/p5.sound.min.js';
+export const p5PreloadAddonURL =
+  'https://cdn.jsdelivr.net/npm/[email protected]/src/preload.js';
+export const p5ShapesAddonURL =
+  'https://cdn.jsdelivr.net/npm/[email protected]/src/shapes.js';
+export const p5DataAddonURL =
+  'https://cdn.jsdelivr.net/npm/[email protected]/src/data.js';
+export const p5URLTemplate =
+  'https://cdn.jsdelivr.net/npm/p5@$VERSION/lib/p5.js';