chore: dependency updates (#448)

.gitignore

@@ -2,4 +2,5 @@
 /dist
 /.cache
 /.env
+/.tmp
 *.log

jest.config.js

@@ -2,6 +2,6 @@ const path = require('path');
 
 module.exports = {
   preset: 'ts-jest',
-  testEnvironment: 'node',
-  testEnvironment: path.join(__dirname, 'tests', 'env.js'),
+  //testEnvironment: 'node',
+  testEnvironment: path.join(__dirname, 'tests', 'env-ts.js'),
 };

package.json

@@ -20,7 +20,6 @@
     "@types/html-webpack-plugin": "^3.2.6",
     "@types/jest": "^27.4.1",
     "@types/jszip": "^3.4.1",
-    "@types/openpgp": "^4.4.18",
     "@types/react": "^18.0.3",
     "@types/react-dom": "^18.0.0",
     "@types/react-router": "^5.1.18",
@@ -32,38 +31,38 @@
     "axios": "^0.26.1",
     "babel-loader": "^8.2.4",
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
-    "css-loader": "^5.2.7",
+    "css-loader": "^6.7.1",
     "dotenv": "^16.0.0",
     "express": "^4.17.3",
     "fs-extra": "^10.0.1",
-    "get-port": "^5.1.1",
-    "html-webpack-plugin": "^4.5.2",
-    "jest": "^26.6.3",
+    "get-port": "^5",
+    "html-webpack-plugin": "^5.5.0",
+    "jest": "^27.5.1",
     "offline-plugin": "^5.0.7",
     "parcel-bundler": "^1.12.5",
     "puppeteer": "^13.5.2",
     "react-hot-loader": "^4.13.0",
-    "style-loader": "^2.0.0",
-    "ts-jest": "^26.5.6",
-    "ts-node": "^9.1.1",
+    "style-loader": "^3.3.1",
+    "ts-jest": "^27.1.4",
+    "ts-node": "^10.7.0",
     "typescript": "^4.6.3",
-    "webpack": "^4.44.1",
+    "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.8.1",
     "webpack-pwa-manifest": "^4.3.0",
-    "webpack-subresource-integrity": "^1.5.2",
+    "webpack-subresource-integrity": "^5.1.0",
     "workbox-webpack-plugin": "^6.5.3"
   },
   "dependencies": {
     "jszip": "^3.9.1",
     "nanoid": "^3.3.2",
-    "openpgp": "^4.10.10",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "openpgp": "^5.2.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-dropzone": "^12.0.5",
     "react-feather": "^2.0.9",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.3.0",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
     "styled-components": "^5.3.5"
   },
   "browserslist": [

src/Router.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import {
-  Switch,
+  Routes,
   Route,
-  useHistory,
+  useNavigate,
 } from 'react-router-dom';
 import {  HomeFilled } from '@ant-design/icons';
 import { Layout, Button, Space } from 'antd';
@@ -15,38 +15,26 @@ import Welcome from './screens/Welcome';
 import Debug from './screens/Debug';
 
 const AppRouter: React.FC = () => {
-  const history = useHistory();
+  const navigate = useNavigate();
   return (
     <>
       <Space>
         <Button
-          onClick={() => history.push('/')}
+          onClick={() => navigate('/')}
           icon={<HomeFilled />}
         >
           Home
         </Button>
       </Space>
       <Layout.Content style={{ padding: '25px', maxWidth: '800px', width: '100%', margin: 'auto' }}>
-        <Switch>
-          <Route path="/debug">
-            <Debug />
-          </Route>
-          <Route path="/welcome">
-            <Welcome />
-          </Route>
-          <Route path="/key">
-            <SetupKey />
-          </Route>
-          <Route path="/receive">
-            <Decrypt />
-          </Route>
-          <Route path="/send">
-            <Encrypt />
-          </Route>
-          <Route path="/">
-            <Intro />
-          </Route>
-        </Switch>
+        <Routes>
+          <Route path="/debug" element={<Debug />} />
+          <Route path="/welcome" element={<Welcome />} />
+          <Route path="/key" element={<SetupKey />} />
+          <Route path="/receive" element={<Decrypt />} />
+          <Route path="/send" element={<Encrypt />} />
+          <Route path="/" element={<Intro />} />
+        </Routes>
       </Layout.Content>
     </>
   );

src/contexts/Decryption.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useContext, createContext, useEffect } from 'react';
-import * as openpgp from 'openpgp';
+import { readMessage, readKey, decrypt as pgpDecrypt, readPrivateKeys, readPrivateKey, generateKey } from 'openpgp';
 import GithubContext from './Github';
 import FileType from '../types/File';
 import { createFile } from '../helpers/files';
@@ -31,15 +31,17 @@ const DecryptionContext = createContext<DecryptionContextType>({
 });
 
 const decrypt = async (privateKey: string, keys: string[], content: string) => {
-  const armoredKeys = await Promise.all(keys.map(openpgp.key.readArmored));
-  const message = await openpgp.message.readArmored(content);
-  const encrypted = await openpgp.decrypt({
+  const armoredKeys = await Promise.all(
+    keys.map(key => readKey({ armoredKey: key })),
+  );
+  const message = await readMessage({ armoredMessage: content });
+  const encrypted = await pgpDecrypt({
     message,
-    privateKeys: [...(await openpgp.key.readArmored(privateKey)).keys],
-    publicKeys: armoredKeys.reduce<any>((output, key: any) => [...output, ...key.keys], []),
+    decryptionKeys: await readPrivateKeys({ armoredKeys: privateKey }),
+    verificationKeys: armoredKeys.reduce<any>((output, key: any) => [...output, ...key], []),
   });
   const { data } = encrypted;
-  const blob = new Blob([data], {
+  const blob = new Blob([data as any], {
     type: 'text/text',
   });
   return blob;
@@ -65,8 +67,8 @@ const DecryptionProvider: React.FC = ({
       const currentRawKey = localStorage.getItem('key');
       if (currentRawKey) {
         setPrivateKey(currentRawKey);
-        const key = await openpgp.key.readArmored(currentRawKey);
-        setPublicKey(key.keys[0].toPublic().armor());
+        const key = await readPrivateKey({ armoredKey: currentRawKey });
+        setPublicKey(key.toPublic().armor());
       }
     };
 
@@ -80,14 +82,14 @@ const DecryptionProvider: React.FC = ({
   };
 
   const createKey = async () => {
-    const key = await openpgp.generateKey({
-      userIds: [{ name: 'unknown unknown', email: 'unknown@unknown.foo'}],
+    const key = await generateKey({
+      userIDs: [{ name: 'unknown unknown', email: 'unknown@unknown.foo'}],
       curve: 'ed25519',
     });
 
-    setPrivateKey(key.privateKeyArmored);
-    setPublicKey(key.publicKeyArmored);
-    localStorage.setItem('key', key.privateKeyArmored);
+    setPrivateKey(key.privateKey);
+    setPublicKey(key.publicKey);
+    localStorage.setItem('key', key.privateKey);
   }
 
   const addFile = useCallback(async (file: File) => {

src/contexts/Encryption.tsx

@@ -19,15 +19,16 @@ const EncryptionContext = createContext<EncryptionContextType>({
 });
 
 const encrypt = async (keys: string[], content: string) => {
-  const armoredKeys = await Promise.all(keys.map(openpgp.key.readArmored));
-  const message = openpgp.message.fromText(content);
+  const armoredKeys = await Promise.all(
+    keys.map(key => openpgp.readKeys({ armoredKeys: key })),
+  );
+  const message = await openpgp.createMessage({ text: content });
   const encrypted = await openpgp.encrypt({
     message,
-    armor: true,
-    publicKeys: armoredKeys.reduce<any>((output, key: any) => [...output, ...key.keys], []),
+    encryptionKeys: armoredKeys.reduce<any>((output, key: any) => [...output, ...key], []),
   });
-  const { data } = encrypted;
-  const blob = new Blob([data], {
+  const data = encrypted;
+  const blob = new Blob([data as any], {
     type: 'text/text',
   });
   return blob;

src/screens/Intro.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router';
 import Welcome from './Welcome';
 import {
   Button,
@@ -18,14 +18,14 @@ const Thumb: React.FC = ({
   link,
   className,
 }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   return (
     <Button
       size="large"
       icon={<Icon />}
       type="link"
       className={className}
-      onClick={() => history.push(link)}
+      onClick={() => navigate(link)}
     >
       {title}
     </Button>

tests/encryption.test.ts

@@ -2,7 +2,7 @@ import puppeteer, { Browser, Page } from 'puppeteer';
 import path from 'path';
 import fs from 'fs-extra';
 import { nanoid } from 'nanoid';
-import openpgp, { key, message } from 'openpgp';
+import * as openpgp from 'openpgp';
 
 const sleep = (time: number) => new Promise((resolve) => setTimeout(resolve, time));
 
@@ -10,7 +10,7 @@ describe('encryption', () => {
   let browser: Browser;
   let page: Page;
   let tmpDir: string;
-  let keys: key.KeyResult;
+  let keys: openpgp.PrivateKey;
 
   const getText = async (elm: any) => {
     const text = await page.evaluate(el => el.textContent, elm);
@@ -24,7 +24,7 @@ describe('encryption', () => {
       path.join(__dirname, '..', 'test-assets', 'key'),
       'utf-8',
     );
-    keys = await key.readArmored(data);
+    keys = await openpgp.readPrivateKey({ armoredKey: data });
   });
 
   beforeEach(async () => {
@@ -68,8 +68,8 @@ describe('encryption', () => {
     const data = await fs.readFile(downloadPath, 'utf-8');
     
     const decrypted = await openpgp.decrypt({
-      message: await message.readArmored(data),
-      privateKeys: keys.keys[0],
+      message: await openpgp.readMessage({ armoredMessage: data }),
+      decryptionKeys: keys,
     });
     expect(decrypted.data).toBe('Bar');
   });

tests/env-ts.js

@@ -1,19 +1,19 @@
-import NodeEnvironment from 'jest-environment-node';
-import { Server, createServer } from 'http';
-import getPort from 'get-port';
-import webpack from 'webpack';
-import path from 'path';
-import express from 'express';
-import createConfig from '../webpack.config';
+const NodeEnvironment = require('jest-environment-node');
+const { Server, createServer } = require('http');
+const getPort = require('get-port');
+const webpack = require('webpack');
+const path = require('path');
+const express = require('express');
+const { default: createConfig } = require('../webpack.config');
 
-const build = () => new Promise<Server>(async (resolve, reject) => {
+const build = () => new Promise(async (resolve, reject) => {
   const config = await createConfig({
     test: true,
   });
   const port = await getPort();
   const bundler = webpack(config);
   bundler.run((err, stats) => {
-    if (err) {
+    if (err || !stats) {
       return reject(err);
     } else if (stats.hasErrors()) {
       return reject(new Error('Webpack errors'));
@@ -28,22 +28,23 @@ const build = () => new Promise<Server>(async (resolve, reject) => {
 });
 
 class CustomEnvironment extends NodeEnvironment {
-  private _server?: Server;
-
-  constructor(config: any) {
+  constructor(config) {
     super(config);
   }
 
   async setup() {
     await super.setup();
     this._server = await build();
-    const address: any = this._server?.address();
+    const address = this._server.address();
     this.global.testUrl = `http://${address.address}:${address.port}`
   }
 
   async teardown() {
     await super.teardown();
-    this._server?.close();
+    if (!this._server) {
+      return;
+    }
+    this._server.close();
   }
 }
 

webpack.config.ts

@@ -92,7 +92,6 @@ const createConfig = async (options: Options = {
 
   (config as any).devServer = {
     hot: true,
-    contentBase: './dist',
   };
 
   return config;