Pr05/migrate client utils folder -- opening to keep track of diff

.eslintrc

@@ -29,6 +29,7 @@
         "tsx": "never"
       }
     ],
+    "import/prefer-default-export": "off",
     "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }],
     "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
     "default-param-last": 0,
@@ -41,6 +42,7 @@
     "no-restricted-exports": 1,
     "no-underscore-dangle": 0,
     "no-useless-catch": 2,
+    "no-plusplus": "off",
     "prefer-object-spread": 0,
     "max-len": [1, 120, 2, {"ignoreComments": true, "ignoreTemplateLiterals": true}],
     "max-classes-per-file": 0,
@@ -131,7 +133,9 @@
       "rules": {
         "no-use-before-define": "off",
         "import/no-extraneous-dependencies": "off",
-        "no-unused-vars": "off"
+        "no-unused-vars": "off",
+        "import/no-default-export": "warn",
+        "no-underscore-dangle": "warn",
       }
     },
     {

.prettierrc

@@ -5,7 +5,6 @@
   "insertPragma": false,
   "jsxBracketSameLine": false,
   "jsxSingleQuote": false,
-  "parser": "babel",
   "printWidth": 80,
   "proseWrap": "never",
   "requirePragma": false,

README.md

@@ -26,6 +26,13 @@ The p5.js Editor is a collaborative project created by many individuals, mostly
 
 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.  
+>
+> For full details, see [TypeScript Migration Plan](./contributor_docs/typescript-migration.md).
 
 ## Acknowledgements 🙏
 

client/common/useKeyDownHandlers.js

@@ -1,6 +1,7 @@
 import { mapKeys } from 'lodash';
 import PropTypes from 'prop-types';
 import { useCallback, useEffect, useRef } from 'react';
+import { isMac } from '../utils/device';
 
 /**
  * Attaches keydown handlers to the global document.
@@ -30,8 +31,7 @@ export default function useKeyDownHandlers(keyHandlers) {
    */
   const handleEvent = useCallback((e) => {
     if (!e.key) return;
-    const isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
-    const isCtrl = isMac ? e.metaKey : e.ctrlKey;
+    const isCtrl = isMac() ? e.metaKey : e.ctrlKey;
     if (e.shiftKey && isCtrl) {
       handlers.current[
         `ctrl-shift-${

client/components/SkipLink.tsx

@@ -3,8 +3,8 @@
 import { useTranslation } from 'react-i18next';
 
 type SkipLinkProps = {
-  targetId: string,
-  text: string
+  targetId: string;
+  text: string;
 };
 
 const SkipLink = ({ targetId, text }: SkipLinkProps) => {
@@ -31,4 +31,4 @@
   );
 };
 
 export default SkipLink;

client/i18n.js

@@ -21,7 +21,7 @@ import {
   enIN
 } from 'date-fns/locale';
 
-import getPreferredLanguage from './utils/language-utils';
+import { getPreferredLanguage } from './utils/language-utils';
 
 const fallbackLng = ['en-US'];
 

client/modules/IDE/actions/assets.js

@@ -1,4 +1,4 @@
-import apiClient from '../../../utils/apiClient';
+import { apiClient } from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from '../reducers/loading';
 import { assetsActions } from '../reducers/assets';

client/modules/IDE/actions/collections.js

@@ -1,5 +1,5 @@
 import browserHistory from '../../../browserHistory';
-import apiClient from '../../../utils/apiClient';
+import { apiClient } from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from '../reducers/loading';
 import { setToastText, showToast } from './toast';

client/modules/IDE/actions/files.js

@@ -1,6 +1,6 @@
 import objectID from 'bson-objectid';
 import blobUtil from 'blob-util';
-import apiClient from '../../../utils/apiClient';
+import { apiClient } from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import {
   setUnsavedChanges,

client/modules/IDE/actions/preferences.js

@@ -1,5 +1,5 @@
 import i18next from 'i18next';
-import apiClient from '../../../utils/apiClient';
+import { apiClient } from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 
 function updatePreferences(formParams, dispatch) {

client/modules/IDE/actions/project.js

@@ -2,8 +2,8 @@ import objectID from 'bson-objectid';
 import each from 'async/each';
 import { isEqual } from 'lodash';
 import browserHistory from '../../../browserHistory';
-import apiClient from '../../../utils/apiClient';
-import getConfig from '../../../utils/getConfig';
+import { apiClient } from '../../../utils/apiClient';
+import { getConfig } from '../../../utils/getConfig';
 import * as ActionTypes from '../../../constants';
 import { showToast, setToastText } from './toast';
 import {
@@ -15,9 +15,11 @@ import {
 } from './ide';
 import { clearState, saveState } from '../../../persistState';
 
-const ROOT_URL = getConfig('API_URL');
-const S3_BUCKET_URL_BASE = getConfig('S3_BUCKET_URL_BASE');
-const S3_BUCKET = getConfig('S3_BUCKET');
+const ROOT_URL = getConfig('API_URL', { throwErrorIfNotFound: true });
+const S3_BUCKET_URL_BASE = getConfig('S3_BUCKET_URL_BASE', {
+  throwErrorIfNotFound: true
+});
+const S3_BUCKET = getConfig('S3_BUCKET', { throwErrorIfNotFound: true });
 
 export function setProject(project) {
   return {
@@ -307,6 +309,8 @@ export function cloneProject(project) {
       (file, callback) => {
         if (
           file.url &&
+          S3_BUCKET &&
+          S3_BUCKET_URL_BASE &&
           (file.url.includes(S3_BUCKET_URL_BASE) ||
             file.url.includes(S3_BUCKET))
         ) {

client/modules/IDE/actions/projects.js

@@ -1,4 +1,4 @@
-import apiClient from '../../../utils/apiClient';
+import { apiClient } from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from '../reducers/loading';
 

client/modules/IDE/actions/uploader.js

@@ -1,13 +1,21 @@
 import { TEXT_FILE_REGEX } from '../../../../server/utils/fileUtils';
-import apiClient from '../../../utils/apiClient';
-import getConfig from '../../../utils/getConfig';
+import { apiClient } from '../../../utils/apiClient';
+import { getConfig } from '../../../utils/getConfig';
+import { isTestEnvironment } from '../../../utils/checkTestEnv';
 import { handleCreateFile } from './files';
 
+const s3BucketUrlBase = getConfig('S3_BUCKET_URL_BASE');
+const awsRegion = getConfig('AWS_REGION');
+const s3Bucket = getConfig('S3_BUCKET');
+
+if (!isTestEnvironment && !s3BucketUrlBase && !(awsRegion && s3Bucket)) {
+  throw new Error(`S3 bucket address not configured. 
+    Configure either S3_BUCKET_URL_BASE or both AWS_REGION & S3_BUCKET in env vars`);
+}
+
 export const s3BucketHttps =
-  getConfig('S3_BUCKET_URL_BASE') ||
-  `https://s3-${getConfig('AWS_REGION')}.amazonaws.com/${getConfig(
-    'S3_BUCKET'
-  )}/`;
+  s3BucketUrlBase || `https://s3-${awsRegion}.amazonaws.com/${s3Bucket}/`;
+
 const MAX_LOCAL_FILE_SIZE = 80000; // bytes, aka 80 KB
 
 function isS3Upload(file) {

client/modules/IDE/components/AssetSize.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import prettyBytes from 'pretty-bytes';
+import { getConfig } from '../../../utils/getConfig';
+import { parseNumber } from '../../../utils/parseStringToType';
 
-import getConfig from '../../../utils/getConfig';
-
-const limit = getConfig('UPLOAD_LIMIT') || 250000000;
+const limit = parseNumber(getConfig('UPLOAD_LIMIT')) || 250000000;
 const MAX_SIZE_B = limit;
 
 const formatPercent = (percent) => {

client/modules/IDE/components/CollectionList/CollectionListRow.jsx

@@ -11,7 +11,7 @@ import * as ProjectActions from '../../actions/project';
 import * as CollectionsActions from '../../actions/collections';
 import * as IdeActions from '../../actions/ide';
 import * as ToastActions from '../../actions/toast';
-import dates from '../../../../utils/formatDate';
+import { formatDateToString } from '../../../../utils/formatDate';
 import { remSize, prop } from '../../../../theme';
 
 const SketchsTableRow = styled.tr`
@@ -93,7 +93,7 @@ const SketchlistDropdownColumn = styled.td`
   }
 `;
 const formatDateCell = (date, mobile = false) =>
-  dates.format(date, { showTime: !mobile });
+  formatDateToString(date, { showTime: !mobile });
 
 const CollectionListRowBase = (props) => {
   const [renameOpen, setRenameOpen] = useState(false);

client/modules/IDE/components/Header/Nav.jsx

@@ -7,7 +7,8 @@ import { useTranslation } from 'react-i18next';
 import MenubarSubmenu from '../../../../components/Menubar/MenubarSubmenu';
 import MenubarItem from '../../../../components/Menubar/MenubarItem';
 import { availableLanguages, languageKeyToLabel } from '../../../../i18n';
-import getConfig from '../../../../utils/getConfig';
+import { getConfig } from '../../../../utils/getConfig';
+import { parseBoolean } from '../../../../utils/parseStringToType';
 import { showToast } from '../../actions/toast';
 import { setLanguage } from '../../actions/preferences';
 import Menubar from '../../../../components/Menubar/Menubar';
@@ -80,8 +81,14 @@ LeftLayout.defaultProps = {
   layout: 'project'
 };
 
+const isLoginEnabled = parseBoolean(getConfig('LOGIN_ENABLED'), true);
+const isUiCollectionsEnabled = parseBoolean(
+  getConfig('UI_COLLECTIONS_ENABLED'),
+  true
+);
+const isExamplesEnabled = parseBoolean(getConfig('EXAMPLES_ENABLED'), true);
+
 const UserMenu = () => {
-  const isLoginEnabled = getConfig('LOGIN_ENABLED');
   const isAuthenticated = useSelector(getAuthenticated);
 
   if (isLoginEnabled && isAuthenticated) {
@@ -177,7 +184,7 @@ const ProjectMenu = () => {
           id="file-save"
           isDisabled={
             !user.authenticated ||
-            !getConfig('LOGIN_ENABLED') ||
+            !isLoginEnabled ||
             (project?.owner && !isUserOwner)
           }
           onClick={() => saveSketch(cmRef.current)}
@@ -216,17 +223,15 @@ const ProjectMenu = () => {
         <MenubarItem
           id="file-add-to-collection"
           isDisabled={
-            !getConfig('UI_COLLECTIONS_ENABLED') ||
-            !user.authenticated ||
-            isUnsaved
+            !isUiCollectionsEnabled || !user.authenticated || isUnsaved
           }
           href={`/${user.username}/sketches/${project?.id}/add-to-collection`}
         >
           {t('Nav.File.AddToCollection')}
         </MenubarItem>
         <MenubarItem
           id="file-examples"
-          isDisabled={!getConfig('EXAMPLES_ENABLED')}
+          isDisabled={!isExamplesEnabled}
           href="/p5/sketches"
         >
           {t('Nav.File.Examples')}
@@ -370,7 +375,7 @@ const AuthenticatedUserMenu = () => {
         <MenubarItem
           id="account-collections"
           href={`/${username}/collections`}
-          isDisabled={!getConfig('UI_COLLECTIONS_ENABLED')}
+          isDisabled={!isUiCollectionsEnabled}
         >
           {t('Nav.Auth.MyCollections')}
         </MenubarItem>

client/modules/IDE/components/PreviewFrame.jsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import getConfig from '../../../utils/getConfig';
+import { getConfig } from '../../../utils/getConfig';
 import { registerFrame } from '../../../utils/dispatcher';
 
 const Frame = styled.iframe`
@@ -13,7 +13,7 @@ const Frame = styled.iframe`
 
 function PreviewFrame({ fullView, isOverlayVisible }) {
   const iframe = useRef();
-  const previewUrl = getConfig('PREVIEW_URL');
+  const previewUrl = getConfig('PREVIEW_URL', { throwErrorIfNotFound: true });
   useEffect(() => {
     const unsubscribe = registerFrame(iframe.current.contentWindow, previewUrl);
     return () => {

client/modules/IDE/components/ShareModal.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import CopyableInput from './CopyableInput';
-// import getConfig from '../../../utils/getConfig';
 
 const ShareModal = () => {
   const { t } = useTranslation();
@@ -15,7 +14,6 @@ const ShareModal = () => {
   );
 
   const hostname = window.location.origin;
-  // const previewUrl = getConfig('PREVIEW_URL');
   return (
     <div className="share-modal">
       <h3 className="share-modal__project-name">{projectName}</h3>

client/modules/IDE/components/SketchListRowBase.jsx

@@ -8,13 +8,13 @@ import * as ProjectActions from '../actions/project';
 import * as IdeActions from '../actions/ide';
 import TableDropdown from '../../../components/Dropdown/TableDropdown';
 import MenuItem from '../../../components/Dropdown/MenuItem';
-import dates from '../../../utils/formatDate';
-import getConfig from '../../../utils/getConfig';
+import { formatDateToString } from '../../../utils/formatDate';
+import { getConfig } from '../../../utils/getConfig';
 
-const ROOT_URL = getConfig('API_URL');
+const ROOT_URL = getConfig('API_URL', { throwErrorIfNotFound: true });
 
 const formatDateCell = (date, mobile = false) =>
-  dates.format(date, { showTime: !mobile });
+  formatDateToString(date, { showTime: !mobile });
 
 const SketchListRowBase = ({
   sketch,

client/modules/IDE/components/Timer.jsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-import dates from '../../../utils/formatDate';
+import { distanceInWordsToNow } from '../../../utils/formatDate';
 import useInterval from '../hooks/useInterval';
 import { getIsUserOwner } from '../selectors/users';
 
@@ -17,16 +17,14 @@ const Timer = () => {
 
   // Update immediately upon saving.
   useEffect(() => {
-    setTimeAgo(
-      projectSavedTime ? dates.distanceInWordsToNow(projectSavedTime) : ''
-    );
+    setTimeAgo(projectSavedTime ? distanceInWordsToNow(projectSavedTime) : '');
   }, [projectSavedTime]);
 
   // Update every 10 seconds.
   useInterval(
     () =>
       setTimeAgo(
-        projectSavedTime ? dates.distanceInWordsToNow(projectSavedTime) : ''
+        projectSavedTime ? distanceInWordsToNow(projectSavedTime) : ''
       ),
     10000
   );

client/modules/IDE/components/UploadFileModal.jsx

@@ -3,13 +3,14 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import prettyBytes from 'pretty-bytes';
-import getConfig from '../../../utils/getConfig';
+import { getConfig } from '../../../utils/getConfig';
 import { closeUploadFileModal } from '../actions/ide';
 import FileUploader from './FileUploader';
 import { getreachedTotalSizeLimit } from '../selectors/users';
 import Modal from './Modal';
+import { parseNumber } from '../../../utils/parseStringToType';
 
-const limit = getConfig('UPLOAD_LIMIT') || 250000000;
+const limit = parseNumber(getConfig('UPLOAD_LIMIT')) || 250000000;
 const limitText = prettyBytes(limit);
 
 const UploadFileModal = () => {

client/modules/IDE/selectors/users.js

@@ -1,12 +1,13 @@
 import { createSelector } from '@reduxjs/toolkit';
-import getConfig from '../../../utils/getConfig';
+import { getConfig } from '../../../utils/getConfig';
+import { parseNumber } from '../../../utils/parseStringToType';
 
 export const getAuthenticated = (state) => state.user.authenticated;
 const getTotalSize = (state) => state.user.totalSize;
 const getAssetsTotalSize = (state) => state.assets.totalSize;
 export const getSketchOwner = (state) => state.project.owner;
 const getUserId = (state) => state.user.id;
-const limit = getConfig('UPLOAD_LIMIT') || 250000000;
+const limit = parseNumber(getConfig('UPLOAD_LIMIT')) || 250000000;
 
 export const getCanUploadMedia = createSelector(
   getAuthenticated,