pr05 Typescript #3: Migrate client/utils folder #3553

clairep94 · 2025-07-26T22:21:05Z

pr05 Typescript Migration 3: Migrate the client/utils folder

IMPORTANT: Should be reviewed after #3540 for clarity

This branch is built off of the branch for pr05 Typescript #2: automatically resolve imports of ts files & migrate instance of client/utils file #3540
Relevant commits start at 5b1fd1e

Context:

Rebuild of Pr05/migrate client utils clairep94/p5.js-web-editor#5 --> forgot to do git mv for the first few files and directly renamed, so this looks like deleting and creating a new file for git, and erases the previous history.
Migrate as much of the client/utils folder with the following steps:

git mv someUtil.js someUtil.ts. If possible, commit without the no-verify flag, otherwise with no-verify.
I forgot to add no-verify to my commit message in some of these initial ones
Add unit test to secure current behaviour
Check for all instances of useage for the utility function to determine types & edgecases of types
Add types & handle edgecases & update test
Refactor if beneficial
Add JSDocs

I skipped the intellisense autogen files & the codemirror utility files due to unfamiliarity, but migrated most of the rest of the folder

Changes:

Please see annotations on files

Notes:

I have verified that this pull request:

has no linting errors (npm run lint)
has no test errors (npm run test)
is from a uniquely-named feature branch and is up to date with the develop branch.
is descriptively named and links to an issue number, i.e. Fixes #123

…recated

khanniie

still working through the files but thought I'd sent a first wave!

khanniie · 2025-08-04T04:42:32Z

client/modules/IDE/actions/project.js

@@ -15,7 +15,7 @@ import {
 } from './ide';
 import { clearState, saveState } from '../../../persistState';

-const ROOT_URL = getConfig('API_URL');
+const ROOT_URL = getConfig('API_URL', { nullishString: true });


what do we think the "correct" or expected behavior would be if there was no API_URL? like is "/projects/${projectId}/zip" a valid ROOT_URL or would that cause a different error down the line? or in what cases is it undefined?

client/utils/getConfig.ts

khanniie · 2025-08-10T15:34:58Z

client/modules/IDE/actions/project.js

@@ -307,6 +307,8 @@ export function cloneProject(project) {
      (file, callback) => {
        if (
          file.url &&
+          S3_BUCKET &&
+          S3_BUCKET_URL_BASE &&


good call!!

client/utils/parseStringToType.ts

client/utils/device.ts

khanniie · 2025-08-11T15:51:55Z

client/utils/dispatcher.ts

+} = {};
+let frameIndex = 1;
+
+/** Codesandbox dispatcher message types */


wonder if we can just use typescript enums here instead?

enum MessageTypes = {
START,
STOP,
etc
}

khanniie · 2025-08-11T15:52:17Z

client/utils/dispatcher.ts

+ */
+export type Message = {
+  type: MessageType,
+  payload?: any


is there any way to use unknown instead of any ?

khanniie · 2025-08-11T15:53:06Z

client/utils/dispatcher.ts

+function eventListener(e: MessageEvent) {
+  const { data } = e;
+
+  // should also store origin of parent? idk


i assume this is leftover from the js file but should we remove the dead code comments?

client/utils/evaluateExpression.ts

khanniie · 2025-08-11T15:54:56Z

client/utils/evaluateExpression.ts

-function __makeEvaluateExpression(evalInClosure) {
-  return (expr) =>
+type EvalResult = {
+  result: any,


i haven't looked closely enough at where this is used, but is there any way to avoid using any here as well? can we do unknown and then cast it later after doing some type guard checks?

https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-guards-and-differentiating-types

khanniie · 2025-08-11T15:56:13Z

client/utils/evaluateExpression.ts

@@ -19,7 +26,11 @@ function evaluateExpression() {
      }
      result = (0, eval)(newExpr); // eslint-disable-line


can we change this eslint disable to be more specific to what it's disabling?

khanniie · 2025-08-11T15:58:20Z

client/utils/formatDate.ts

+  return null;
+}
+
+export default {


I'm not sure exactly how this is getting imported but i wonder if we can just export these individually instead of in a dict wrapped as one default? totally understand that it's a holdover from the js file though

khanniie

still working through the files but have a few more comments!

khanniie · 2025-08-11T16:07:03Z

client/utils/getConfig.ts

+ */
+function _getConfig(key: string): string | undefined {
+  const env: Record<string, string | undefined> =
+    (typeof global !== 'undefined' ? global : window)?.process?.env || {};


why not do global !== undefined ?

or even

const configSource = global ?? window; const env = configSource?.process?.env ?? {}

khanniie · 2025-08-11T16:10:31Z

client/utils/getConfig.ts

+  return env[key];
+}
+
+type GetConfigOptions = {


should this be an interface? maybe using optional?

https://google.github.io/styleguide/tsguide.html#prefer-optional-over-undefined

khanniie · 2025-08-11T16:11:12Z

client/utils/getConfig.ts

+  return value;
+}
+
+export default getConfig;


same here can we convert to named export? https://google.github.io/styleguide/tsguide.html#exports

khanniie · 2025-08-11T16:12:40Z

client/utils/language-utils.ts

+  supportedLanguages: string[] = [],
+  defaultLanguage: string = 'en'
+): string | undefined {
+  if (typeof navigator === 'undefined') {


same here i think we should be able to do something like if (!navigator) return defaultLanguage

I tried updating to !navigator but it seemed to cause this error above whereas the typeof check seems to circumvent this

i actually wonder if they're right that we should be using jsdom as the test environment? it makes sense that navigator is a window element in the browser only and thus would be undefined in the default jest testing env : O if that's too high lift though i don't mind switching back. i guess tldr i think the more "correct" solution is to switch the test env to jsdom but typeof seems like a fair hack around it

khanniie · 2025-08-11T16:13:49Z

client/utils/language-utils.ts

+  return defaultLanguage;
+}
+
+export default getPreferredLanguage;


can we put the default export on the function itself here too?

or even better... maybe we can make it a named export instead

https://google.github.io/styleguide/tsguide.html#exports

khanniie · 2025-08-11T16:17:16Z

client/utils/reduxFormUtils.ts

@@ -0,0 +1,156 @@
+import i18n from 'i18next';
+
+/* eslint-disable */


what are we disabling here? can we be more specific about the rule?

khanniie · 2025-08-11T16:24:31Z

client/utils/reduxFormUtils.ts

+/** Processes form & mutates errors to add any `username` & `email` errors */
+function validateUsernameEmail(
+  formProps: Partial<UsernameAndEmail>,
+  errors: Partial<FormErrors>


I'm not sure i understand what happens when we do Partial<Partial<....>> do we need the double partial?

khanniie · 2025-08-11T16:25:19Z

client/utils/reduxFormUtils.ts

+
+/** Validation for the Account Form */
+export function validateSettings(
+  formProps: Partial<AccountForm>


if AccountFormErrors is already Partial<AccountForm> then can we also just use it for formProps?

khanniie · 2025-08-11T16:25:59Z

client/utils/reduxFormUtils.ts

+export type LoginFormErrors = Partial<LoginForm>;
+
+/** Validation for the Login Form */
+export function validateLogin(formProps: Partial<LoginForm>): LoginFormErrors {


same here, why not reuse LoginFormErrors? or rename it to be more general?

…ript parser on ts files

…atDateToString. Update import instances

clairep94 added 30 commits July 26, 2025 16:06

apiClient: update extension to ts

a52d312

apiClient: add axios instance type

2480bd1

device: update extension to ts

87adc72

device: add test

9efdd25

eslint: remove prefer-default-export rule

462524c

device.ts: add edgecase test and refactor

8010af7

metaKey.js: update extention to ts

cb9ddc5

metaKey: update to use isMac() -- due to navigator.platform being dep…

f7282c2

…recated

useKeyDownHandler: refactor to use isMac()

411eb4a

language-utils.js: update ext to ts

e7eaa2c

language-utils.ts: add test

53962db

language-utils: add types, passes typecheck

3efc164

language-utils: refactor for clarity & disable eslint noplusplus rule

fa6d69f

formatDate: update ext to ts

75b35a3

formatDate.js: add test

b7fb7a0

formatDate.js: add types and refactor

2440d6f

consoleUtils: update extension to ts

0a9af47

consoleUtils: add tests and bare minimum type

5302f54

consoleUtils.ts: add jsdocs and return type

2638c32

dispatcher.js: update extention to ts --no-verify

723cac3

dispatcher: add unit test

e0cb6c7

dispatcher.ts: update with types

0aab549

dispatcher.ts: add jsdocs

60f8a6e

remove jsdocs on internal functions to retain git history?

04ca29a

evaluateExpression: update ext to ts --no-verify

e91000f

evaluateExpression: add unit test

0713173

evaluateExpression: add tests

16d84e1

reduxFormUtils: update ext to ts --no-verify

6957124

reduxFormUtils: add unit test, no-verify

97754db

reduxFormUtils: delete unused dom-onlyprops function

ed0c6f0

khanniie requested a review from raclim August 1, 2025 16:14

Merge branch 'develop' into pr05/migrate_client_utils_folder

8febdcb

clairep94 mentioned this pull request Aug 3, 2025

pr05 Typescript Migration #5: Migrate client/common folder #3565

Open

14 tasks

khanniie reviewed Aug 10, 2025

View reviewed changes

khanniie reviewed Aug 11, 2025

View reviewed changes

client/utils/device.ts Outdated Show resolved Hide resolved

khanniie reviewed Aug 11, 2025

View reviewed changes

client/utils/evaluateExpression.ts Outdated Show resolved Hide resolved

khanniie reviewed Aug 11, 2025

View reviewed changes

clairep94 added 14 commits August 13, 2025 18:36

turn on no-underscore-dangle warning

a9d954f

getConfig: underscore-dangle stylefix for internal function

50eab48

evaluateExpression: underscore-dangle stylefix for internal function

87d9c0d

parseString: fix to address nullish check

e387df2

device: simplify check for isMac()

c4af496

evaluateExpression: address comments

c67d841

.prettierrc: remove hardcoded babel as parser setting to allow typesc…

589318b

…ript parser on ts files

dispatcher: remove old comments

5f2d878

lint-fix after removing prettier hardcoded parser babel

7421ef9

formatDate: update to named export and update format function to form…

5de3876

…atDateToString. Update import instances

remove prettier/prettier eslint error ignore

2cc486a

language-utils: update to named export

c92d53e

apiClient: update to named export and update instances of importing

0418d8c

getConfig: update to named export and update instances of import

7173d5d

		@@ -19,7 +26,11 @@ function evaluateExpression() {
		}
		result = (0, eval)(newExpr); // eslint-disable-line

		@@ -0,0 +1,156 @@
		import i18n from 'i18next';

		/* eslint-disable */

Uh oh!

pr05 Typescript #3: Migrate client/utils folder #3553

Are you sure you want to change the base?

pr05 Typescript #3: Migrate client/utils folder #3553

Uh oh!

Conversation

clairep94 commented Jul 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

pr05 Typescript Migration 3: Migrate the client/utils folder

Context:

Changes:

Notes:

Uh oh!

khanniie left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

khanniie left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

khanniie Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

clairep94 commented Jul 26, 2025 •

edited

Loading

khanniie Aug 13, 2025 •

edited

Loading