pr05 Typescript #3: Migrate client/utils folder

.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,

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/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 });
 const S3_BUCKET_URL_BASE = getConfig('S3_BUCKET_URL_BASE');
 const S3_BUCKET = getConfig('S3_BUCKET');
 
@@ -307,6 +307,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/uploader.js

@@ -5,9 +5,11 @@ 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) {

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';
 
-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/Header/Nav.jsx

@@ -8,6 +8,7 @@ import MenubarSubmenu from '../../../../components/Menubar/MenubarSubmenu';
 import MenubarItem from '../../../../components/Menubar/MenubarItem';
 import { availableLanguages, languageKeyToLabel } from '../../../../i18n';
 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/SketchListRowBase.jsx

@@ -11,7 +11,7 @@ import MenuItem from '../../../components/Dropdown/MenuItem';
 import dates from '../../../utils/formatDate';
 import getConfig from '../../../utils/getConfig';
 
-const ROOT_URL = getConfig('API_URL');
+const ROOT_URL = getConfig('API_URL', { nullishString: true });
 
 const formatDateCell = (date, mobile = false) =>
   dates.format(date, { showTime: !mobile });

client/modules/IDE/components/UploadFileModal.jsx

@@ -8,8 +8,9 @@ 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 { 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,

client/modules/Preview/EmbedFrame.jsx

@@ -232,9 +232,9 @@ p5.prototype.registerMethod('afterSetup', p5.prototype.ensureAccessibleCanvas);`
   }
 
   const previewScripts = sketchDoc.createElement('script');
-  previewScripts.src = `${window.location.origin}${getConfig(
-    'PREVIEW_SCRIPTS_URL'
-  )}`;
+  previewScripts.src = `${window.location.origin}${
+    (getConfig('PREVIEW_SCRIPTS_URL'), { nullishString: true })
+  }`;
   previewScripts.setAttribute('crossorigin', '');
   sketchDoc.head.appendChild(previewScripts);
 
@@ -245,7 +245,9 @@ 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);

client/utils/apiClient.js → client/utils/apiClient.ts

@@ -1,13 +1,12 @@
-import axios from 'axios';
-
+import axios, { AxiosInstance } from 'axios';
 import getConfig from './getConfig';
 
-const ROOT_URL = getConfig('API_URL');
+const ROOT_URL = getConfig('API_URL', { nullishString: true });
 
 /**
  * Configures an Axios instance with the correct API URL
  */
-function createClientInstance() {
+function createClientInstance(): AxiosInstance {
   return axios.create({
     baseURL: ROOT_URL,
     withCredentials: true

client/utils/consoleUtils.test.ts

@@ -0,0 +1,85 @@
+import { getAllScriptOffsets, startTag } from './consoleUtils';
+
+describe('getAllScriptOffsets', () => {
+  // not sure how the line offset calculations have been formulated
+  it('returns an empty array when no scripts are found', () => {
+    const html = '<html><body><h1>No scripts here</h1></body></html>';
+    expect(getAllScriptOffsets(html)).toEqual([]);
+  });
+
+  it('detects a single external script with @fs- path', () => {
+    const html = `
+      <html>
+        <head>
+          <script src="${startTag}my-script.js"></script>
+        </head>
+      </html>
+    `;
+    const result = getAllScriptOffsets(html);
+    expect(result.every(([offset, _]) => typeof offset === 'number')).toBe(
+      true
+    );
+    expect(result.map(([_, name]) => name)).toEqual(['my-script']);
+  });
+
+  it('detects multiple external scripts with @fs- paths', () => {
+    const html = `
+      <script src="${startTag}one.js"></script>
+      <script src="${startTag}two.js"></script>
+    `;
+    const result = getAllScriptOffsets(html);
+    expect(result.every(([offset, _]) => typeof offset === 'number')).toBe(
+      true
+    );
+    expect(result.map(([_, name]) => name)).toEqual(['one', 'two']);
+  });
+
+  it('detects embedded scripts with crossorigin attribute', () => {
+    const html = `
+      <html>
+        <head>
+          <script crossorigin=""></script>
+        </head>
+      </html>
+    `;
+    const result = getAllScriptOffsets(html);
+    expect(result.every(([offset, _]) => typeof offset === 'number')).toBe(
+      true
+    );
+    expect(result.map(([_, name]) => name)).toEqual(['index.html']);
+  });
+
+  it('detects both @fs- scripts and embedded scripts together, ordering embedded scripts last', () => {
+    const html = `
+      <script src="${startTag}abc.js"></script>
+      <script crossorigin=""></script>
+      <script src="${startTag}xyz.js"></script>
+    `;
+    const result = getAllScriptOffsets(html);
+    expect(result.every(([offset, _]) => typeof offset === 'number')).toBe(
+      true
+    );
+    expect(result.map(([_, name]) => name)).toEqual([
+      'abc',
+      'xyz',
+      'index.html'
+    ]);
+  });
+
+  it('handles scripts with varying whitespace and newlines', () => {
+    const html = `
+      <script src="${startTag}some-script.js">
+      </script>
+      <script crossorigin="">
+      </script>
+    `;
+    const result = getAllScriptOffsets(html);
+    expect(result.every(([offset, _]) => typeof offset === 'number')).toBe(
+      true
+    );
+    expect(result.map(([_, name]) => name)).toEqual([
+      'some-script',
+      'index.html'
+    ]);
+  });
+});

client/utils/consoleUtils.js → client/utils/consoleUtils.ts

@@ -1,7 +1,14 @@
 export const startTag = '@fs-';
 
-export const getAllScriptOffsets = (htmlFile) => {
-  const offs = [];
+export type ScriptOffset = [number, string];
+
+/**
+ * Extracts line offsets and filenames for JS scripts embedded in an HTML string.
+ * @param htmlFile - Full HTML file content as a string
+ * @returns Array of [lineOffset, filename] pairs
+ */
+export const getAllScriptOffsets = (htmlFile: string): ScriptOffset[] => {
+  const offs: ScriptOffset[] = [];
   const hijackConsoleErrorsScriptLength = 2;
   const embeddedJSStart = 'script crossorigin=""';
   let foundJSScript = true;

client/utils/device.test.ts

@@ -0,0 +1,45 @@
+import { isMac } from './device';
+
+describe('isMac', () => {
+  const originalUserAgent = navigator.userAgent;
+
+  afterEach(() => {
+    // Restore the original userAgent after each test
+    Object.defineProperty(navigator, 'userAgent', {
+      value: originalUserAgent,
+      configurable: true
+    });
+  });
+
+  it('returns true when userAgent contains "Mac"', () => {
+    Object.defineProperty(navigator, 'userAgent', {
+      value: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)',
+      configurable: true
+    });
+    expect(isMac()).toBe(true);
+  });
+
+  it('returns false when userAgent does not contain "Mac"', () => {
+    Object.defineProperty(navigator, 'userAgent', {
+      value: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)',
+      configurable: true
+    });
+    expect(isMac()).toBe(false);
+  });
+
+  it('returns false when navigator agent is null', () => {
+    Object.defineProperty(navigator, 'userAgent', {
+      value: null,
+      configurable: true
+    });
+    expect(isMac()).toBe(false);
+  });
+
+  it('returns false when navigator agent is undefined', () => {
+    Object.defineProperty(navigator, 'userAgent', {
+      value: undefined,
+      configurable: true
+    });
+    expect(isMac()).toBe(false);
+  });
+});

client/utils/device.ts

@@ -0,0 +1,10 @@
+/**
+ * Checks if the user's OS is macOS based on the `navigator.userAgent` string.
+ * This is the preferred method over `navigator.platform`, which is now deprecated:
+ *   - see https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform
+ */
+export function isMac(): boolean {
+  return typeof navigator?.userAgent === 'string'
+    ? navigator.userAgent.toLowerCase().includes('mac')
+    : false;
+}