Merge pull request #1825 from cybersemics/node-v20

.eslintrc.js

@@ -116,12 +116,7 @@ module.exports = {
         '@typescript-eslint/no-unused-vars': 2,
         '@typescript-eslint/explicit-function-return-type': 0,
         '@typescript-eslint/explicit-module-boundary-types': 0,
-        '@typescript-eslint/array-type': [
-          2,
-          {
-            'array-type': 'array',
-          },
-        ],
+        '@typescript-eslint/array-type': 2,
         // jsx
         'jsx-quotes': [2, 'prefer-single'],
       },

.github/workflows/docs.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎️
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
           persist-credentials: false

.github/workflows/ios.yml

@@ -9,7 +9,6 @@ on:
 
 env:
   CI: true
-  HUSKY: 0
 
 jobs:
   run:
@@ -18,15 +17,15 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           ref: ${{github.event.pull_request.head.ref}}
           repository: ${{github.event.pull_request.head.repo.full_name}}
 
       - name: Set Node.js version
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 20
 
       - name: 'BrowserStack Env Setup'
         uses: 'browserstack/github-actions/setup-env@master'

.github/workflows/lint.yaml

@@ -10,7 +10,6 @@ on:
 
 env:
   CI: true
-  HUSKY: 0
 
 jobs:
   run:
@@ -19,15 +18,15 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set Node.js version
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 20
 
       - name: Install npm dependencies
-        run: yarn && cd functions && yarn
+        run: yarn
 
       - name: Lint
         run: yarn lint

.github/workflows/puppeteer.yml

@@ -10,7 +10,6 @@ on:
 
 env:
   CI: true
-  HUSKY: 0
 
 jobs:
   run:
@@ -19,12 +18,12 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set Node.js version
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 20
 
       - name: Install npm dependencies
         run: yarn

.github/workflows/test.yml

@@ -10,7 +10,6 @@ on:
 
 env:
   CI: true
-  HUSKY: 0
 
 jobs:
   run:
@@ -19,15 +18,15 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set Node.js version
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 20
 
       - name: Install npm dependencies
-        run: yarn && cd functions && yarn
+        run: yarn
 
       - name: Test
         run: yarn test

.nvmrc

@@ -1 +1 @@
-16
+20

package.json

@@ -1,13 +1,12 @@
 {
   "name": "em",
-  "version": "300.28.12",
+  "version": "300.29.0",
   "author": "Raine Revere <raine@cybersemics.org>",
   "description": "A beautiful, minimalistic note-taking app for personal sensemaking.",
   "license": "NoHarm-draft",
   "private": true,
   "engines": {
-    "npm": ">=6",
-    "node": "14 || 16"
+    "node": ">=18"
   },
   "browserslist": {
     "production": [
@@ -65,6 +64,10 @@
   "jest": {
     "resetMocks": false
   },
+  "resolutions": {
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0"
+  },
   "dependencies": {
     "@bit/mui-org.material-ui.swipeable-drawer": "^4.9.10",
     "@capacitor/android": "^4.6.1",
@@ -107,7 +110,7 @@
     "react-native-gesture-handler": "^1.10.2",
     "react-native-web": "^0.16.5",
     "react-redux": "^7.2.4",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
     "react-signature-pad-wrapper": "^3.3.1",
     "react-split-pane": "^0.1.92",
     "react-transition-group": "^4.4.2",
@@ -127,6 +130,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@capacitor/cli": "^4.6.1",
     "@sinonjs/fake-timers": "^6.0.1",
     "@testing-library/dom": "^7.31.2",
@@ -158,26 +162,27 @@
     "@types/sanitize-html": "^2.3.1",
     "@types/sinonjs__fake-timers": "^6.0.2",
     "@types/yallist": "^4.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.26.1",
-    "@typescript-eslint/parser": "^4.26.1",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
     "browserstack-local": "^1.4.8",
     "chalk": "^4.1.1",
     "dotenv": "8.2.0",
     "em-typedoc-theme": "^0.3.0",
     "enzyme": "^3.11.0",
-    "eslint": "^7.28.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-raine": "^0.5.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-config-standard": "^16.0.3",
     "eslint-plugin-export-default-identifier": "0.3.0",
-    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsdoc": "^35.1.3",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-react-native": "^3.11.0",
     "fake-indexeddb": "^3.1.2",
@@ -202,7 +207,7 @@
     "typedoc-plugin-exclude-references": "^1.0.0",
     "typedoc-plugin-external-module-name": "^4.0.6",
     "typedoc-plugin-rename-named-parameters": "^1.0.6",
-    "typescript": "^4.3.2",
+    "typescript": "^4.9.5",
     "webdriverio": "^7.7.3"
   }
 }

src/components/Alert.tsx

@@ -22,7 +22,9 @@ const Alert: FC = () => {
 
   // if dismissed, set timeout to 0 to remove alert component immediately. Otherwise it will block toolbar interactions until the timeout completes.
   return (
-    <TransitionGroup childFactory={child => (!isDismissed ? child : React.cloneElement(child, { timeout: 0 }))}>
+    <TransitionGroup
+      childFactory={(child: React.ReactElement) => (!isDismissed ? child : React.cloneElement(child, { timeout: 0 }))}
+    >
       {alert ? (
         <CSSTransition key={0} timeout={800} classNames='fade-slow-out' onEntering={() => setDismiss(false)}>
           {/* Specify a key to force the component to re-render and thus recalculate useSwipeToDismissProps when the alert changes. Otherwise the alert gets stuck off screen in the dismiss state. */}

src/components/CommandPalette.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { FC, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useDispatch, useSelector, useStore } from 'react-redux'
 import { CSSTransition, TransitionGroup } from 'react-transition-group'
 import Shortcut from '../@types/Shortcut'
@@ -591,7 +591,9 @@ const CommandPaletteWithTransition: FC = () => {
 
   // if dismissed, set timeout to 0 to remove alert component immediately. Otherwise it will block toolbar interactions until the timeout completes.
   return (
-    <TransitionGroup childFactory={child => (!isDismissed ? child : React.cloneElement(child, { timeout: 0 }))}>
+    <TransitionGroup
+      childFactory={(child: ReactElement) => (!isDismissed ? child : React.cloneElement(child, { timeout: 0 }))}
+    >
       {showCommandPalette ? (
         <CSSTransition key={0} timeout={200} classNames='fade' onEntering={() => setDismiss(false)}>
           <Popup

src/components/modals/Export.tsx

@@ -422,7 +422,7 @@ const ModalExport: FC<{ simplePath: SimplePath }> = ({ simplePath }) => {
     else {
       try {
         download(exportContent!, `em-${title}-${timestamp()}.${selected.extension}`, selected.type)
-      } catch (e) {
+      } catch (e: any) {
         dispatch(error({ value: e.message }))
         console.error('Download Error', e.message)
       }

src/components/modals/Signup.tsx

@@ -71,8 +71,8 @@ const ModalSignup = () => {
         // Set the invite code and is validating to false, only if code is valid.
         setInviteCode(inviteCode)
         setIsValidatingCode(false)
-      } catch (err) {
-        setValidationError(err.message)
+      } catch (e: any) {
+        setValidationError(e.message)
         setIsValidatingCode(false)
       }
     },

src/data-providers/yjs/replicationController.ts

@@ -445,7 +445,7 @@ const replicationController = ({
 
     // Emit a custom event on the block so that log can detect when it is safe to push.
     // Otherwise the doclog observe handlers will not be added and the first thought of a new block will not get replicated until there is a refresh.
-    block.emit('em:observed', [blockId])
+    block.emit('em:observed' as any, [blockId])
   }
 
   /** Append thought or lexeme logs to the active doclog block. */
@@ -478,7 +478,7 @@ const replicationController = ({
       const blockOld = activeBlock
       blockId = nanoid(13)
       activeBlock = new Y.Doc({ guid: encodeDocLogBlockDocumentName(tsid, blockId) })
-      const observed = when<string>(activeBlock, 'em:observed')
+      const observed = when<string>(activeBlock as any, 'em:observed')
       doc.getArray('blocks').push([activeBlock])
 
       // Wait for the new block subdoc and the observe handlers to be added before pushing.

src/data-providers/yjs/thoughtspace.ts

@@ -195,9 +195,8 @@ const updateThoughtsThrottled = throttleConcat<PushBatch, void>((batches: PushBa
 
   // dispatch on next tick, since the leading edge is synchronous and can be triggered during a reducer
   setTimeout(() => {
-    config.then(
-      ({ onUpdateThoughts: updateThoughts }) =>
-        updateThoughts?.({ ...merged, local: false, remote: false, repairCursor: true }),
+    config.then(({ onUpdateThoughts: updateThoughts }) =>
+      updateThoughts?.({ ...merged, local: false, remote: false, repairCursor: true }),
     )
   })
 }, UPDATE_THOUGHTS_THROTTLE)

src/device/download.ts

@@ -6,24 +6,17 @@ import MimeType from '../@types/MimeType'
 const download = (data: string, filename: string, type: MimeType = 'text/plain') => {
   const file = new Blob([data], { type })
 
-  // IE10+
-  if (window.navigator.msSaveOrOpenBlob) {
-    window.navigator.msSaveOrOpenBlob(file, filename)
-  }
-  // Others
-  else {
-    const a = document.createElement('a')
-    const url = URL.createObjectURL(file)
-    a.href = url
-    a.download = filename
-    document.body.appendChild(a)
-    a.click()
+  const a = document.createElement('a')
+  const url = URL.createObjectURL(file)
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
 
-    setTimeout(() => {
-      document.body.removeChild(a)
-      window.URL.revokeObjectURL(url)
-    }, 0)
-  }
+  setTimeout(() => {
+    document.body.removeChild(a)
+    window.URL.revokeObjectURL(url)
+  }, 0)
 }
 
 export default download

src/e2e/iOS/helpers/getNativeElementRect.ts

@@ -2,7 +2,7 @@ import { Browser, Element } from 'webdriverio'
 
 /** Return native element rect. */
 const getNativeElementRect = async (browser: Browser<'async'>, selector: string) => {
-  const oldContext = (await browser.getContext()) || 'NATIVE_APP'
+  const oldContext = ((await browser.getContext()) as string) || 'NATIVE_APP'
   await browser.switchContext('NATIVE_APP')
   const element = (await browser.$(selector)) as Element<'async'>
   const elementRect = await browser.getElementRect(element.elementId)

src/e2e/iOS/helpers/hideKeyboardByTappingDone.ts

@@ -2,7 +2,7 @@ import { Browser, Element } from 'webdriverio'
 
 /** Hide ios keyboard by tapping done button above the keyboard. */
 const hideKeyboardByTappingDone = async (browser: Browser<'async'>) => {
-  const oldContext = (await browser.getContext()) || 'NATIVE_APP'
+  const oldContext = ((await browser.getContext()) as string) || 'NATIVE_APP'
   await browser.switchContext('NATIVE_APP')
   const done = (await browser.$('//XCUIElementTypeButton[@name="Done"]')) as Element<'async'>
   await done.click()

src/e2e/iOS/helpers/tapReturnKey.ts

@@ -2,7 +2,7 @@ import { Browser } from 'webdriverio'
 
 /** Tap 'return' on the keyboard. */
 const tapReturnKey = async (browser: Browser<'async'>) => {
-  const oldContext = (await browser.getContext()) || 'NATIVE_APP'
+  const oldContext = ((await browser.getContext()) as string) || 'NATIVE_APP'
   await browser.switchContext('NATIVE_APP')
   const element = await browser.$('//XCUIElementTypeButton[@name="Return"]')
   await element.click()

src/e2e/puppeteer/helpers/setup.ts

@@ -12,7 +12,7 @@ export interface InitPageOptions {
 
 /** Opens em in a new incognito window in Puppeteer. */
 const setup = async ({
-  puppeteerBrowser = browser,
+  puppeteerBrowser = browser as any,
   url = 'http://localhost:3000',
   emulatedDevice,
   skipTutorial = true,
@@ -59,8 +59,7 @@ const setup = async ({
 
     // click the skip tutorial link
     // tap for mobile devices, since fastClick uses touch events
-    const isMobile = emulatedDevice?.name.startsWith?.('iPhone')
-    await page[isMobile ? 'tap' : 'click']('#skip-tutorial')
+    await page.tap('#skip-tutorial')
 
     // wait for welcome modal to disappear
     await page.waitForFunction(() => !document.getElementById('skip-tutorial'))

src/redux-middleware/updateUrlHistory.ts

@@ -72,7 +72,7 @@ const updateUrlHistory = (state: State, path: Path, { replace, contextViews }: O
   // if the welcome modal has not been completed and there are no root thoughts, then we can assume that IndexedDB was cleared and clear the obsolete path encoded in the url
   if (
     state.showModal !== 'welcome' &&
-    typeof window !== undefined &&
+    typeof window !== 'undefined' &&
     /\/~\/./.test(window.location.pathname) &&
     !hasChildren(state, HOME_TOKEN)
   ) {

src/test-helpers/createTestStore.ts

@@ -9,7 +9,8 @@ import multi from '../redux-middleware/multi'
  * Returns new store for test.
  */
 export const createTestStore = () => {
-  const store = createStore(appReducer, compose(applyMiddleware(multi, thunk), undoRedoEnhancer))
+  // TODO: Type properly
+  const store = createStore(appReducer, compose(applyMiddleware(multi, thunk), undoRedoEnhancer) as any)
 
   store.dispatch([
     // skip tutorial