moved majority of the code into client/utils along with other minor changes as per Rachel's suggestions

Author: kammeows

client/index.jsx

@@ -43,15 +43,18 @@ const App = () => (
   </div>
 );
 
-render(
-  <Provider store={store}>
-    <ThemeProvider>
-      <Suspense fallback={<Loader />}>
-        <App />
-      </Suspense>
-    </ThemeProvider>
-  </Provider>,
-  document.getElementById('root')
-);
+const rootEl = document.getElementById('root');
+if (rootEl) {
+  render(
+    <Provider store={store}>
+      <ThemeProvider>
+        <Suspense fallback={<Loader />}>
+          <App />
+        </Suspense>
+      </ThemeProvider>
+    </Provider>,
+    rootEl
+  );
+}
 
 export default store;

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

@@ -73,11 +73,12 @@ import { EditorContainer, EditorHolder } from './MobileEditor';
 import { FolderIcon } from '../../../../common/icons';
 import IconButton from '../../../../common/IconButton';
 
-import contextAwareHinter from '../contextAwareHinter';
-import showRenameDialog from '../showRenameDialog';
-import { handleRename } from '../rename-variable';
-import { jumpToDefinition } from '../jump-to-definition';
-import { ensureAriaLiveRegion } from '../../utils/ScreenReaderHelper';
+import contextAwareHinter from '../../../../utils/contextAwareHinter';
+import showRenameDialog from '../../../../utils/showRenameDialog';
+import { handleRename } from '../../../../utils/rename-variable';
+import { jumpToDefinition } from '../../../../utils/jump-to-definition';
+import { ensureAriaLiveRegion } from '../../../../utils/ScreenReaderHelper';
+import isMac from '../../../../utils/device';
 
 emmet(CodeMirror);
 
@@ -162,8 +163,7 @@ class Editor extends React.Component {
     delete this._cm.options.lint.options.errors;
 
     this._cm.getWrapperElement().addEventListener('click', (e) => {
-      const isMac = /Mac/.test(navigator.platform);
-      const isCtrlClick = isMac ? e.metaKey : e.ctrlKey;
+      const isCtrlClick = isMac() ? e.metaKey : e.ctrlKey;
 
       if (isCtrlClick) {
         const pos = this._cm.coordsChar({ left: e.clientX, top: e.clientY });

client/modules/IDE/utils/ScreenReaderHelper.jsx renamed to client/utils/ScreenReaderHelper.jsx

@@ -2,7 +2,6 @@ export default function announceToScreenReader(message, assertive = false) {
   const liveRegion = document.getElementById('rename-aria-live');
   if (!liveRegion) return;
 
-  // liveRegion.setAttribute('aria-live', assertive ? 'assertive' : 'polite');
   liveRegion.setAttribute('aria-live', 'assertive');
 
   liveRegion.textContent = '';

client/modules/IDE/components/contextAwareHinter.js renamed to client/utils/contextAwareHinter.js

@@ -0,0 +1,8 @@
+/**
+ * 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 default function isMac(): boolean {
+  return navigator?.userAgent?.toLowerCase().includes('mac') ?? false;
+}

client/utils/device.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import p5CodeAstAnalyzer from './p5CodeAstAnalyzer';
 import * as parser from '@babel/parser';
-import announceToScreenReader from '../utils/ScreenReaderHelper';
+import announceToScreenReader from './ScreenReaderHelper';
 const traverse = require('@babel/traverse').default;
 
 export function getScriptLoadOrder(files) {

client/utils/device.ts

@@ -1,16 +1,16 @@
 /* eslint-disable */
 import p5CodeAstAnalyzer from './p5CodeAstAnalyzer';
 import * as parser from '@babel/parser';
-import { getContext, getAST } from '../utils/renameVariableHelper';
-import { selectFiles } from '../selectors/files';
-import { setSelectedFile } from '../actions/ide';
-import announceToScreenReader from '../utils/ScreenReaderHelper';
+import { getContext, getAST } from './renameVariableHelper';
+import { selectFiles } from '../modules/IDE/selectors/files';
+import { setSelectedFile } from '../modules/IDE/actions/ide';
+import announceToScreenReader from './ScreenReaderHelper';
 import {
   getScriptLoadOrder,
   buildProjectSymbolTable,
   announceJump
 } from './jump-to-def-helper';
-import store from '../../../../client/storeInstance';
+import store from '../index';
 
 const traverse = require('@babel/traverse').default;