clairep94 · clairep94 · May 17, 2025 · May 17, 2025 · May 17, 2025 · May 17, 2025
diff --git a/.babelrc b/.babelrc
@@ -1,7 +1,8 @@
 {
   "presets": [
     "@babel/preset-react",
-    "@babel/preset-env"
+    "@babel/preset-env",
+    "@babel/preset-typescript"
   ],
   "env": {
     "production": {

diff --git a/.eslintrc b/.eslintrc
@@ -89,6 +89,14 @@
       "rules": {
         "import/no-extraneous-dependencies": "off"
       }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      // "parser": "@typescript-eslint/parser", // fix this later, this can't be added due to eslint version peer-dependency
+      // "plugins": ["@typescript-eslint"], // fix this later, this can't be added due to eslint version peer-dependency
+      "rules": {
+        "no-undef": "off"
+      }
     }
   ]
 }
diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js
@@ -3,7 +3,7 @@ import each from 'async/each';
 import { isEqual } from 'lodash';
 import browserHistory from '../../../browserHistory';
 import apiClient from '../../../utils/apiClient';
-import getConfig from '../../../utils/getConfig';
+import getConfig from '../../../utils/getConfig.ts';
 import * as ActionTypes from '../../../constants';
 import { showToast, setToastText } from './toast';
 import {

diff --git a/client/modules/IDE/actions/uploader.js b/client/modules/IDE/actions/uploader.js
@@ -1,13 +1,13 @@
 import { TEXT_FILE_REGEX } from '../../../../server/utils/fileUtils';
 import apiClient from '../../../utils/apiClient';
-import getConfig from '../../../utils/getConfig';
+import getConfig from '../../../utils/getConfig.ts';
 import { handleCreateFile } from './files';
 
 export const s3BucketHttps =
   getConfig('S3_BUCKET_URL_BASE') ||
-  `https://s3-${getConfig('AWS_REGION')}.amazonaws.com/${getConfig(
-    'S3_BUCKET'
-  )}/`;
+  `https://s3-${getConfig('AWS_REGION', {
+    nullishString: true
+  })}.amazonaws.com/${getConfig('S3_BUCKET', { nullishString: true })}/`;
 const MAX_LOCAL_FILE_SIZE = 80000; // bytes, aka 80 KB
 
 function isS3Upload(file) {

diff --git a/client/modules/IDE/components/AssetSize.jsx b/client/modules/IDE/components/AssetSize.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import prettyBytes from 'pretty-bytes';
 
-import getConfig from '../../../utils/getConfig';
+import getConfig from '../../../utils/getConfig.ts';
 
-const limit = getConfig('UPLOAD_LIMIT') || 250000000;
+const limit = getConfig('UPLOAD_LIMIT', { parseType: 'number' }) || 250000000;
 const MAX_SIZE_B = limit;
 
 const formatPercent = (percent) => {

diff --git a/client/modules/IDE/components/Header/Nav.jsx b/client/modules/IDE/components/Header/Nav.jsx
@@ -7,7 +7,7 @@ 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.ts';
 import { showToast } from '../../actions/toast';
 import { setLanguage } from '../../actions/preferences';
 import Menubar from '../../../../components/Menubar/Menubar';
@@ -75,7 +75,7 @@ LeftLayout.defaultProps = {
 };
 
 const UserMenu = () => {
-  const isLoginEnabled = getConfig('LOGIN_ENABLED');
+  const isLoginEnabled = getConfig('LOGIN_ENABLED', { parseType: 'boolean' });
   const isAuthenticated = useSelector(getAuthenticated);
 
   if (isLoginEnabled && isAuthenticated) {
@@ -167,7 +167,8 @@ const ProjectMenu = () => {
         <MenubarItem onClick={newSketch}>{t('Nav.File.New')}</MenubarItem>
         <MenubarItem
           hideIf={
-            !getConfig('LOGIN_ENABLED') || (project?.owner && !isUserOwner)
+            !getConfig('LOGIN_ENABLED', { parseType: 'boolean' }) ||
+            (project?.owner && !isUserOwner)
           }
           onClick={() => saveSketch(cmRef.current)}
         >
@@ -194,7 +195,7 @@ const ProjectMenu = () => {
         </MenubarItem>
         <MenubarItem
           hideIf={
-            !getConfig('UI_COLLECTIONS_ENABLED') ||
+            !getConfig('UI_COLLECTIONS_ENABLED', { parseType: 'boolean' }) ||
             !user.authenticated ||
             isUnsaved
           }
@@ -203,7 +204,7 @@ const ProjectMenu = () => {
           {t('Nav.File.AddToCollection')}
         </MenubarItem>
         <MenubarItem
-          hideIf={!getConfig('EXAMPLES_ENABLED')}
+          hideIf={!getConfig('EXAMPLES_ENABLED', { parseType: 'boolean' })}
           href="/p5/sketches"
         >
           {t('Nav.File.Examples')}
@@ -251,7 +252,9 @@ const ProjectMenu = () => {
         </MenubarItem>
         <MenubarItem href="/about">{t('Nav.Help.About')}</MenubarItem>
       </MenubarSubmenu>
-      {getConfig('TRANSLATIONS_ENABLED') && <LanguageMenu />}
+      {getConfig('TRANSLATIONS_ENABLED', { parseType: 'boolean' }) && (
+        <LanguageMenu />
+      )}
     </ul>
   );
 };
@@ -334,7 +337,9 @@ const AuthenticatedUserMenu = () => {
         </MenubarItem>
         <MenubarItem
           href={`/${username}/collections`}
-          hideIf={!getConfig('UI_COLLECTIONS_ENABLED')}
+          hideIf={
+            !getConfig('UI_COLLECTIONS_ENABLED', { parseType: 'boolean' })
+          }
         >
           {t('Nav.Auth.MyCollections')}
         </MenubarItem>

diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/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.ts';
 import { registerFrame } from '../../../utils/dispatcher';
 
 const Frame = styled.iframe`

diff --git a/client/modules/IDE/components/ShareModal.jsx b/client/modules/IDE/components/ShareModal.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import CopyableInput from './CopyableInput';
-// import getConfig from '../../../utils/getConfig';
+// import getConfig from '../../../utils/getConfig.ts';
 
 const ShareModal = () => {
   const { t } = useTranslation();

diff --git a/client/modules/IDE/components/SketchListRowBase.jsx b/client/modules/IDE/components/SketchListRowBase.jsx
@@ -9,7 +9,7 @@ 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 getConfig from '../../../utils/getConfig.ts';
 
 const ROOT_URL = getConfig('API_URL');
 

diff --git a/client/modules/IDE/components/UploadFileModal.jsx b/client/modules/IDE/components/UploadFileModal.jsx
@@ -3,13 +3,13 @@ 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.ts';
 import { closeUploadFileModal } from '../actions/ide';
 import FileUploader from './FileUploader';
 import { getreachedTotalSizeLimit } from '../selectors/users';
 import Modal from './Modal';
 
-const limit = getConfig('UPLOAD_LIMIT') || 250000000;
+const limit = getConfig('UPLOAD_LIMIT', { parseType: 'number' }) || 250000000;
 const limitText = prettyBytes(limit);
 
 const UploadFileModal = () => {

diff --git a/client/modules/IDE/selectors/users.js b/client/modules/IDE/selectors/users.js
@@ -1,12 +1,12 @@
 import { createSelector } from '@reduxjs/toolkit';
-import getConfig from '../../../utils/getConfig';
+import getConfig from '../../../utils/getConfig.ts';
 
 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 = getConfig('UPLOAD_LIMIT', { parseType: 'number' }) || 250000000;
 
 export const getCanUploadMedia = createSelector(
   getAuthenticated,

diff --git a/client/modules/Preview/EmbedFrame.jsx b/client/modules/Preview/EmbedFrame.jsx
@@ -6,7 +6,7 @@ import loopProtect from 'loop-protect';
 import { JSHINT } from 'jshint';
 import decomment from 'decomment';
 import { resolvePathToFile } from '../../../server/utils/filePath';
-import getConfig from '../../utils/getConfig';
+import getConfig from '../../utils/getConfig.ts';
 import {
   MEDIA_FILE_QUOTED_REGEX,
   STRING_REGEX,
@@ -233,7 +233,11 @@ p5.prototype.registerMethod('afterSetup', p5.prototype.ensureAccessibleCanvas);`
 
   const previewScripts = sketchDoc.createElement('script');
   previewScripts.src = `${window.location.origin}${getConfig(
-    'PREVIEW_SCRIPTS_URL'
+    'PREVIEW_SCRIPTS_URL',
+    {
+      parseType: 'string',
+      nullishString: true
+    }
   )}`;
   previewScripts.setAttribute('crossorigin', '');
   sketchDoc.head.appendChild(previewScripts);
@@ -245,7 +249,7 @@ p5.prototype.registerMethod('afterSetup', p5.prototype.ensureAccessibleCanvas);`
     window.offs = ${JSON.stringify(scriptOffs)};
     window.objectUrls = ${JSON.stringify(objectUrls)};
     window.objectPaths = ${JSON.stringify(objectPaths)};
-    window.editorOrigin = '${getConfig('EDITOR_URL')}';
+    window.editorOrigin = '${getConfig('EDITOR_URL', { nullishString: true })}';
   `;
   addLoopProtect(sketchDoc);
   sketchDoc.head.prepend(consoleErrorsScript);

diff --git a/client/modules/Preview/previewIndex.jsx b/client/modules/Preview/previewIndex.jsx
@@ -9,7 +9,7 @@ import {
 } from '../../utils/dispatcher';
 import { filesReducer, setFiles } from './filesReducer';
 import EmbedFrame from './EmbedFrame';
-import getConfig from '../../utils/getConfig';
+import getConfig from '../../utils/getConfig.ts';
 import { initialState } from '../IDE/reducers/files';
 
 const GlobalStyle = createGlobalStyle`

diff --git a/client/modules/User/components/CookieConsent.jsx b/client/modules/User/components/CookieConsent.jsx
@@ -7,7 +7,7 @@ import { Transition } from 'react-transition-group';
 import { Link } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
-import getConfig from '../../../utils/getConfig';
+import getConfig from '../../../utils/getConfig.ts';
 import { setUserCookieConsent } from '../actions';
 import { remSize, prop, device } from '../../../theme';
 import Button from '../../../common/Button';

diff --git a/client/store.js b/client/store.js
@@ -3,7 +3,7 @@ import listenerMiddleware from './middleware';
 import DevTools from './modules/App/components/DevTools';
 import rootReducer from './reducers';
 import { clearState, loadState } from './persistState';
-import getConfig from './utils/getConfig';
+import getConfig from './utils/getConfig.ts';
 
 // Enable DevTools only when rendering on client and during development.
 // Display the dock monitor only if no browser extension is found.

diff --git a/client/tsconfig.json b/client/tsconfig.json
@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "module": "ESNext",
+    "lib": ["DOM", "ESNext"],
+    "jsx": "react",
+
+    "strict": true,
+    "noEmit": true,
+
+    // "noImplicitAny": false,
+    // "strictNullChecks": false,
+    // "strictFunctionTypes": false,
+    // "strictBindCallApply": false,
+    // "noImplicitThis": false,
+    // "alwaysStrict": false,
+
+
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+  },
+  "include": ["**/*"],
+  "exclude": [
+    "../node_modules", 
+    "../node_modules/@types", 
+    "../dist", 
+    "../build"
+  ]
+}
diff --git a/client/tsconfig.tsbuildinfo b/client/tsconfig.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./utils/getconfig.ts"],"version":"5.8.3"}
diff --git a/client/utils/apiClient.js b/client/utils/apiClient.js
@@ -1,13 +1,14 @@
 import axios from 'axios';
 
-import getConfig from './getConfig';
+import getConfig from './getConfig.ts';
 
 const ROOT_URL = getConfig('API_URL');
 
 /**
  * Configures an Axios instance with the correct API URL
  */
 function createClientInstance() {
+  // TODO: add fallback if no ROOT_URL is defined
   return axios.create({
     baseURL: ROOT_URL,
     withCredentials: true

diff --git a/client/utils/getConfig.js b/client/utils/getConfig.js
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"root":["./utils/getconfig.ts"],"version":"5.8.3"}