Update project to Node 22 and npm 11

.github/workflows/build.yml

@@ -10,12 +10,11 @@ jobs:
 
     - uses: actions/setup-node@master
       with:
-        node-version: '10.x'
+        node-version: '22'
       env:
         RUNNER_TEMP: "/tmp/"
 
-    - run: npm install
-    - run: npm install mocha ts-node tslint typescript@3.1.6
+    - run: npm install --legacy-peer-deps
 
     - run: npm run build
     - run: npm run verify

.travis.yml

@@ -8,16 +8,16 @@ language: node_js
 # https://docs.travis-ci.com/user/build-stages/#Build-Stages-and-Build-Matrix-Expansion
 # for details
 node_js:
-# NOTE: node v12 doesnt work https://stackoverflow.com/questions/55960396/how-to-fix-npm-install-sqlite-build-fail
-# - 'lts/*'
-- '10'
+- '22'
 
 cache:
   directories:
     - node_modules
 jobs:
   include:
   - stage: compile
+    install:
+    - npm install --legacy-peer-deps
     script:
     - npm run lint
     - npm run typecheck

Dockerfile

@@ -1,19 +1,19 @@
-FROM node:10-stretch AS build
+FROM node:22-bookworm AS build
 LABEL maintainer="will.price94@gmail.com"
 LABEL version="0.0.1"
 # Prevent npm from spamming
 ENV NPM_CONFIG_LOGLEVEL=warn
 RUN npm config set progress=false
 WORKDIR /app/
 COPY package.json package-lock.json ./
-RUN npm install
+RUN npm install --legacy-peer-deps
 COPY . .
 RUN REACT_APP_SERVER_CONFIG='{"socketserver": true}' npm run build
 
-FROM node:10-alpine
+FROM node:22-alpine
 WORKDIR /app
 COPY --from=build /app/package.json /app/package-lock.json ./
-RUN npm install --production
+RUN npm install --production --legacy-peer-deps
 RUN mkdir -p /app/build
 COPY --from=build /app/build/ /app/build
 VOLUME /app/db

package.json

@@ -4,13 +4,14 @@
     "private": true,
     "homepage": "./",
     "dependencies": {
+        "@types/express": "^4.16.0",
         "@types/file-saver": "^2.0.1",
         "@types/jest": "^26.0.19",
-        "@types/node": "^12.19.11",
+        "@types/node": "^25.5.0",
         "@types/react-dom": "^16.9.10",
-        "@types/express": "^4.16.0",
         "@types/sqlite3": "^2.2.33",
         "@types/ws": "0.0.41",
+        "ajv": "^8.18.0",
         "express": "^4.16.4",
         "file-saver": "^2.0.5",
         "firebase": "^8.2.1",
@@ -19,14 +20,14 @@
         "katex": "^0.12.0",
         "localforage": "^1.9.0",
         "lodash": "^4.17.20",
-        "node-sass": "^4.14.1",
         "react": "^17.0.1",
         "react-color": "^2.19.3",
         "react-dom": "^17.0.1",
-        "react-scripts": "4.0.1",
-        "sqlite3": "^4.1.1",
-        "ts-node": "^3.3.0",
-        "typescript": "^4.1.3",
+        "react-scripts": "^5.0.1",
+        "sass": "^1.98.0",
+        "sqlite3": "^6.0.1",
+        "ts-node": "^10.9.2",
+        "typescript": "^5.9.3",
         "web-vitals": "^0.2.4",
         "ws": "^6.1.2"
     },
@@ -74,4 +75,4 @@
         "mocha": "^5.2.0",
         "tslint": "^4.5.1"
     }
-}
+}

src/assets/ts/app.tsx

@@ -31,7 +31,7 @@ import { ClientStore, DocumentStore } from './datastore';
 import { SynchronousInMemory, InMemory } from '../../shared/data_backend';
 import {
   BackendType, SynchronousLocalStorageBackend,
-  LocalStorageBackend, FirebaseBackend, ClientSocketBackend, IndexedDBBackend
+  FirebaseBackend, ClientSocketBackend, IndexedDBBackend
 } from './data_backend';
 import Document from './document';
 import { PluginsManager } from './plugins';
@@ -190,7 +190,7 @@ $(document).ready(async () => {
   if (backend_type === 'firebase') {
     try {
       docStore = await getFirebaseStore();
-    } catch (e) {
+    } catch (e: any) {
       alert(`
         Error loading firebase datastore:
 
@@ -209,7 +209,7 @@ $(document).ready(async () => {
   } else if (backend_type === 'socketserver') {
     try {
       docStore = await getSocketServerStore();
-    } catch (e) {
+    } catch (e: any) {
       alert(`
         Error loading socket server datastore:
 

src/assets/ts/components/app.tsx

@@ -183,7 +183,8 @@ export default class AppComponent extends React.Component<Props, {}> {
               display: 'flex',
               ...getStyles(session.clientStore, ['theme-bg-primary', 'theme-trim'])
             }}>
-            <a className='center'
+            <div className='center'
+              role='button'
               onClick={async () => {
                 await session.setMode(settingsMode ? 'NORMAL' : 'SETTINGS');
               }}
@@ -199,7 +200,7 @@ export default class AppComponent extends React.Component<Props, {}> {
                 </span>
                 <span>{settingsMode ? 'Back' : 'Settings'}</span>
               </div>
-            </a>
+            </div>
             <div style={{flexBasis: 0, flexGrow: 1, overflowX: 'hidden'}}
               className={userMessage.text_class}>
               {userMessage.message}

src/assets/ts/components/line.tsx

@@ -132,7 +132,7 @@ export default class LineComponent extends React.Component<LineProps, {}> {
       lineHook = PartialUnfolder.trivial<Token, React.ReactNode>();
     }
     const LineTokenizer: PartialTokenizer = RegexTokenizerSplitter(
-      new RegExp('(\n)'),
+      /(\n)/,
       (token: Token, emit: EmitFn<React.ReactNode>) => {
         if (token.text.length !== 1) {
           throw new Error('Expected matched newline of length 1');

src/assets/ts/components/settings/backendSettings.tsx

@@ -85,7 +85,8 @@ export default class BackendSettingsComponent extends React.Component<Props, Sta
   }
 
   public render() {
-    const firebaseBaseUrl = `https://console.firebase.google.com/project/${this.state.firebaseId || '${firebaseProjectId}'}`;
+    const firebaseProjectIdStr = '${firebaseProjectId}';
+    const firebaseBaseUrl = `https://console.firebase.google.com/project/${this.state.firebaseId || firebaseProjectIdStr}`;
 
     const backendTypes: Array<{
       name: string,

src/assets/ts/data_backend/index.ts

@@ -153,7 +153,7 @@ export class FirebaseBackend extends DataBackend {
         let credential = await firebase.auth().signInWithEmailAndPassword(email, password);
         logger.info('Authenticated against Firebase.');
         return credential;
-    } catch (x) {
+    } catch (x: any) {
         logger.error('Authentication against Firebase failed: ' + x.code + ': ' + x.message);
         return;
     }

src/assets/ts/document.ts

@@ -257,13 +257,13 @@ export default class Document extends EventEmitter {
 
     const [
       line, collapsed, children, parents, pluginData
-    ] = await Promise.all<Line, boolean, Array<Row>, Array<Row>, any>([
+    ] = await Promise.all([
       this.store.getLine(row),
       this.store.getCollapsed(row),
       this.store.getChildren(row),
       this.store.getParents(row),
       this.applyHookAsync('pluginRowContents', {}, { row }),
-    ]);
+    ]) as [Line, boolean, Array<Row>, Array<Row>, any];
     const info: RowInfo = {
       line, collapsed,
       parentRows: parents,

src/assets/ts/keyDefinitions.ts

@@ -171,4 +171,5 @@ export class KeyDefinitions extends EventEmitter {
   }
 }
 
-export default new KeyDefinitions();
+const keyDefinitions = new KeyDefinitions();
+export default keyDefinitions;

src/assets/ts/keyHandler.ts

@@ -121,7 +121,7 @@ export default class KeyHandler extends EventEmitter {
     recordKeyStream.stop();
     try {
       await this._processKeys(recordKeyStream);
-    } catch (e) {
+    } catch (e: any) {
       // console.log('caught', e, e.name);
       if (e.name === 'QueueStoppedError') {
         // console.log('failed to fully play', recording);

src/plugins/daily_notes/index.tsx

@@ -380,7 +380,7 @@ class DailyNotesPlugin {
 
   private async getDailyNotesRoot() {
     this.log('getDailyNotesRoot');
-    if (this.dailyNotesRoot && this.api.session.document.isValidPath(this.dailyNotesRoot!)) {
+    if (this.dailyNotesRoot && await this.api.session.document.isValidPath(this.dailyNotesRoot!)) {
       this.log('getDailyNotesRoot from cache');
       return this.dailyNotesRoot!;
     } else {

src/plugins/deadlines/index.tsx

@@ -201,7 +201,7 @@ class DeadlinesPlugin {
 
   private async getDeadlinesRoot() {
     this.log('getDeadlinesRoot');
-    if (this.deadlinesRoot && this.api.session.document.isValidPath(this.deadlinesRoot!)) {
+    if (this.deadlinesRoot && await this.api.session.document.isValidPath(this.deadlinesRoot!)) {
       this.log('getDeadlinesRoot from cache');
       return this.deadlinesRoot!;
     } else {

src/plugins/html/index.tsx

@@ -47,7 +47,7 @@ registerPlugin(
               key={`html-${token.index}`}
               dangerouslySetInnerHTML={{__html: token.text}}
             />);
-          } catch (e) {
+          } catch (e: any) {
             api.session.showMessage(e.message, { text_class: 'error' });
             emit(...wrapped.unfold(token));
           }

src/plugins/latex/index.tsx

@@ -30,7 +30,7 @@ registerPlugin(
           try {
             const html = katex.renderToString(token.text.slice(2, -2), { displayMode: true });
             emit(<div key={`latex-${token.index}`} dangerouslySetInnerHTML={{__html: html}}/>);
-          } catch (e) {
+          } catch (e: any) {
             api.session.showMessage(e.message, { text_class: 'error' });
             emit(...wrapped.unfold(token));
           }
@@ -41,7 +41,7 @@ registerPlugin(
           try {
             const html = katex.renderToString(token.text.slice(1, -1), { displayMode: false });
             emit(<span key={`latex-${token.index}`} dangerouslySetInnerHTML={{__html: html}}/>);
-          } catch (e) {
+          } catch (e: any) {
             api.session.showMessage(e.message, { text_class: 'error' });
             emit(...wrapped.unfold(token));
           }

src/plugins/marks/index.tsx

@@ -12,7 +12,7 @@ import Session, { InMemorySession } from '../../assets/ts/session';
 import LineComponent from '../../assets/ts/components/line';
 import Mutation from '../../assets/ts/mutations';
 import Path from '../../assets/ts/path';
-import { Col, Row } from '../../assets/ts/types';
+import { Row } from '../../assets/ts/types';
 import { getStyles } from '../../assets/ts/themes';
 
 import { SINGLE_LINE_MOTIONS } from '../../assets/ts/definitions/motions';
@@ -175,7 +175,7 @@ export class MarksPlugin {
       },
       key_transforms: [
         async (key, context) => {
-          if (key === 'space') { key = ' '};
+          if (key === 'space') { key = ' '; }
           if (key.length === 1) {
             if (this.markstate === null) {
               throw new Error('Mark state null during key transform');
@@ -221,7 +221,7 @@ export class MarksPlugin {
           const line = await session.document.getText(cursor.row);
           const matches = that.getMarkMatches(line);
           let mark = '';
-          matches.map((pos) => {
+          matches.forEach((pos) => {
             if (cursor.col >= pos[0] && cursor.col <= pos[1]) {
               mark = that.parseMarkMatch(line.slice(pos[0], pos[1]));
             }
@@ -445,7 +445,7 @@ export class MarksPlugin {
       ) => {
         if (this.session.mode === 'NORMAL') {
           const matches = this.getMarkMatches(token.text);
-          matches.map(pos => {
+          matches.forEach(pos => {
             let start = pos[0];
             let end = pos[1];
             const mark = this.parseMarkMatch(token.text.slice(start, end));

src/plugins/tags/index.tsx

@@ -183,7 +183,7 @@ export class TagsPlugin {
       },
       key_transforms: [
         async (key, context) => {
-          if (key === 'space') { key = ' '};
+          if (key === 'space') { key = ' '; }
           if (key.length === 1) {
             if (this.tagstate === null) {
               throw new Error('Tag state null during key transform');

tsconfig.json

@@ -4,6 +4,7 @@
     "lib": [
       "dom",
       "es2015",
+      "es2016",
       "esnext.asynciterable"
     ],
     "jsx": "react-jsx",