Switched to Preact

package-lock.json

@@ -6823,6 +6823,11 @@
       "integrity": "sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg==",
       "dev": true
     },
+    "preact": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.4.1.tgz",
+      "integrity": "sha512-WKrRpCSwL2t3tpOOGhf2WfTpcmbpxaWtDbdJdKdjd0aEiTkvOmS4NBkG6kzlaAHI9AkQ3iVqbFWM3Ei7mZ4o1Q=="
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -7007,16 +7012,6 @@
         }
       }
     },
-    "react": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
-      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
-      }
-    },
     "react-contenteditable": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/react-contenteditable/-/react-contenteditable-3.3.3.tgz",
@@ -7026,17 +7021,6 @@
         "prop-types": "^15.7.1"
       }
     },
-    "react-dom": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
-      "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.1"
-      }
-    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -7460,15 +7444,6 @@
         }
       }
     },
-    "scheduler": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      }
-    },
     "schema-utils": {
       "version": "2.6.5",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.5.tgz",

package.json

@@ -41,9 +41,8 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
-    "react": "^16.13.1",
+    "preact": "^10.4.1",
     "react-contenteditable": "^3.3.3",
-    "react-dom": "^16.13.1",
     "react-transition-group": "^4.3.0",
     "tiny-emitter": "^2.1.0"
   }

src/Icons.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'preact/compat';
 
 /**
  * Icon from IcoFont https://icofont.com/, licensed under the CC BY 4.0 license.

src/TextAnnotator.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component } from 'preact/compat';
 import Editor from './editor/Editor';
 import Highlighter from './highlighter/Highlighter';
 import SelectionHandler from './selection/SelectionHandler';

src/editor/Editor.jsx

@@ -1,4 +1,5 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React from 'preact/compat';
+import { useState, useRef, useEffect } from 'preact/hooks';
 import setPosition from './setPosition';
 
 const autoApply = props => {

src/editor/useClickOutside.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect } from 'preact/hooks';
 
 export default function useClickOutside(ref, callback) {
 

src/editor/widgets/comment/Comment.jsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React from 'preact/compat';
+import { useState } from 'preact/hooks';
 import DropdownMenu from './DropdownMenu';
 import TextEntryField from './TextEntryField';
 import { ChevronDownIcon } from '../../../Icons';

src/editor/widgets/comment/CommentWidget.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'preact/compat';
 import Comment from './Comment';
 import TextEntryField from './TextEntryField';
 

src/editor/widgets/comment/DropdownMenu.jsx

@@ -1,4 +1,5 @@
-import React, { useRef } from 'react';
+import React from 'preact/compat';
+import { useRef } from 'preact/hooks';
 import useClickOutside from '../../useClickOutside';
 
 const DropdownMenu = props => {

src/editor/widgets/comment/TextEntryField.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component } from 'preact/compat';
 import ContentEditable from 'react-contenteditable';
 
 /** 

src/editor/widgets/tag/TagWidget.jsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import React from 'preact/compat';
+import { useState } from 'preact/hooks';
 import { CSSTransition } from 'react-transition-group';
 import { CloseIcon } from '../../../Icons';
 

src/relations/editor/RelationEditor.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component } from 'preact/compat';
 import ContentEditable from 'react-contenteditable';
 import { TrashIcon, CheckIcon } from '../../Icons';
 

webpack.config.js

@@ -11,7 +11,11 @@ module.exports = {
     hints: false
   },
   resolve: {
-    extensions: ['.js', '.jsx']
+    extensions: ['.js', '.jsx'],
+    alias: {
+      "react": "preact/compat",
+      "react-dom": "preact/compat"
+    }
   },
   module: {
     rules: [