ZenUml · MrCoder · Jun 7, 2025 · Jun 7, 2025
diff --git a/.babelrc b/.babelrc
diff --git a/babel.config.cjs b/babel.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    ['@babel/preset-react', { runtime: 'automatic' }]
+  ]
+};
diff --git a/package.json b/package.json
@@ -40,14 +40,16 @@
     ]
   },
   "devDependencies": {
+    "@babel/core": "^7.27.4",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@preact/preset-vite": "^2.10.1",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
     "@vitejs/plugin-legacy": "^6.1.1",
     "autoprefixer": "^10.4.21",
+    "babel-jest": "^30.0.0-beta.3",
     "babel-minify": "^0.5.2",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-preact-pure": "^2.3.0",
     "eslint": "^8.54.0",
     "eslint-config-preact": "^1.1.0",
     "git-revision-webpack-plugin": "^5.0.0",
@@ -60,7 +62,6 @@
     "gulp-useref": "^4.0.1",
     "gulp-zip": "^5.0.2",
     "jest": "^24.9.0",
-    "jest-preset-preact": "^1.0.0",
     "postcss": "^8.5.4",
     "postcss-custom-media": "^10.0.4",
     "prettier": "^3.2.5",
@@ -78,6 +79,8 @@
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@vitejs/plugin-react": "^4.5.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "@zenuml/core": "^3.32.2",
     "clsx": "^2.0.0",
     "code-blast-codemirror": "chinchang/code-blast-codemirror#web-maker",
@@ -89,10 +92,8 @@
     "firebase-tools": "^13.6.0",
     "http-server": "^0.12.3",
     "jszip": "3.8.0",
-    "preact": "10.18.1",
-    "preact-compat": "^3.19.0",
-    "preact-render-to-string": "^6.2.2",
-    "preact-router": "^4.1.2",
+    "react": "17",
+    "react-dom": "17",
     "split.js": "1.6.0",
     "svg-transform-loader": "^2.0.12",
     "vue": "^3.2.45",
@@ -102,7 +103,11 @@
     "graceful-fs": "^4.2.4"
   },
   "jest": {
-    "verbose": true
+    "verbose": true,
+    "transform": {
+      "^.+\\.[jt]sx?$": "babel-jest"
+    },
+    "transformIgnorePatterns": []
   },
   "setupFiles": [
     "<rootDir>/src/tests/__mocks__/browserMocks.js"
@@ -118,12 +123,7 @@
   "moduleNameMapper": {
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js",
     "\\.(css|less|scss)$": "identity-obj-proxy",
-    "^./style$": "identity-obj-proxy",
-    "^preact$": "<rootDir>/node_modules/preact/dist/preact.min.js",
-    "^react$": "preact-compat",
-    "^react-dom$": "preact-compat",
-    "^create-react-class$": "preact-compat/lib/create-react-class",
-    "^react-addons-css-transition-group$": "preact-css-transition-group"
+    "^./style$": "identity-obj-proxy"
   },
   "browserslist": [
     "last 3 Chrome versions",

diff --git a/src/components/Alerts.jsx b/src/components/Alerts.jsx
@@ -1,6 +1,6 @@
-import { h, Component } from 'preact';
+import React from 'react';
 
-export class Alerts extends Component {
+export class Alerts extends React.Component {
   shouldComponentUpdate(nextProps, nextState) {
     return false;
   }

diff --git a/src/components/CodeMirrorBox.jsx b/src/components/CodeMirrorBox.jsx
@@ -1,9 +1,9 @@
-import { h, Component } from 'preact';
+import React from 'react';
 import CodeMirror from '../CodeMirror';
 
 import 'codemirror/mode/javascript/javascript.js';
 
-export default class CodeMirrorBox extends Component {
+export default class CodeMirrorBox extends React.Component {
   componentDidMount() {
     this.initEditor();
   }

diff --git a/src/components/Console.jsx b/src/components/Console.jsx
@@ -1,4 +1,4 @@
-import { h } from 'preact';
+import React from 'react';
 import CodeMirrorBox from './CodeMirrorBox';
 
 export function Console({

diff --git a/src/components/ContentWrap.jsx b/src/components/ContentWrap.jsx
@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import React from 'react';
 import { saveAs } from 'file-saver';
 import UserCodeMirror from './UserCodeMirror.jsx';
 import Toolbox from './Toolbox.jsx';
@@ -24,7 +24,7 @@ const minCodeWrapSize = 33;
 /* global htmlCodeEl, jsCodeEl, cssCodeEl, logCountEl
  */
 
-export default class ContentWrap extends Component {
+export default class ContentWrap extends React.Component {
   constructor(props) {
     super(props);
     this.state = {

diff --git a/src/components/CreateNewModal.jsx b/src/components/CreateNewModal.jsx
@@ -1,4 +1,4 @@
-import { h } from 'preact';
+import React from 'react';
 import { ItemTile } from './ItemTile';
 import templates from '../templateList';
 import * as Dialog from '@radix-ui/react-dialog';

diff --git a/src/components/CssSettingsModal.jsx b/src/components/CssSettingsModal.jsx
@@ -1,8 +1,8 @@
-import { h, Component } from 'preact';
+import React from 'react';
 import Modal from './Modal';
 import CodeMirrorBox from './CodeMirrorBox';
 
-export default class CssSettingsModal extends Component {
+export default class CssSettingsModal extends React.Component {
   componentDidUpdate() {
     if (this.props.show) {
       setTimeout(() => {

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -1,6 +1,6 @@
-import { Component } from 'preact';
+import React from 'react';
 
-class JS13K extends Component {
+class JS13K extends React.Component {
   constructor(props) {
     super(props);
     const compoDate = new Date('August 13 2018 11:00 GMT');
@@ -18,35 +18,37 @@ class JS13K extends Component {
     return (
       <div
         role="button"
-        class="flex flex-v-center"
+        className="flex flex-v-center"
         tabIndex="0"
         onClick={this.props.onClick}
         onBlur={this.props.onBlur}
       >
         <img src="assets/js13kgames.png" alt="JS13K Games logo" height="24" />{' '}
-        <div class="footer__js13k-days-left">
+        <div className="footer__js13k-days-left">
           {this.state.daysLeft} days to go
         </div>
         <div
-          class="footer__js13k-code-size"
+          className="footer__js13k-code-size"
           style={{
             color: codeSizeInKb > 10 ? 'crimson' : 'limegreen',
           }}
         >
           {codeSizeInKb} KB/ 13KB
         </div>
         <span
-          class="caret"
-          style={`transition:0.3s ease; transform-origin: center 2px; ${
-            this.props.isOpen ? 'transform:rotate(180deg);' : ''
-          }`}
+          className="caret"
+          style={{
+            transition: '0.3s ease',
+            transformOrigin: 'center 2px',
+            transform: this.props.isOpen ? 'rotate(180deg)' : '',
+          }}
         />
       </div>
     );
   }
 }
 
-export default class Footer extends Component {
+export default class Footer extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -70,13 +72,13 @@ export default class Footer extends Component {
     return (
       <div
         id="footer"
-        class="flex w-full items-center justify-between z-10 bg-black py-4 px-6 text-gray-500 text-xs"
+        className="flex w-full items-center justify-between z-10 bg-black py-4 px-6 text-gray-500 text-xs"
       >
         {window.zenumlDesktop ? (
           <div></div>
         ) : (
           //no footer if it in electron
-          <div class="flex items-center gap-4">
+          <div className="flex items-center gap-4">
             <a
               href="https://www.ZenUML.com/"
               target="_blank"
@@ -96,7 +98,7 @@ export default class Footer extends Component {
                 style={{
                   width: '16px',
                   height: '16px',
-                  verticalAlign: 'text-bottom',
+                  verticalAlign: 'textBottom',
                   fill: 'currentColor',
                 }}
               >
@@ -123,7 +125,7 @@ export default class Footer extends Component {
             </a>
           </div>
         )}
-        <div class="flex gap-4">
+        <div className="flex gap-4">
           <a
             className="hover:opacity-80 duration-200"
             href={'End-User-License-Agreement/index.html'}
@@ -140,7 +142,7 @@ export default class Footer extends Component {
           </a>
         </div>
         {this.props.prefs.isJs13kModeOn ? (
-          <div class="flex flex-v-center">
+          <div className="flex flex-v-center">
             <JS13K
               isOpen={this.state.isJs13kDropdownOpen}
               codeSize={this.props.codeSize}
@@ -156,7 +158,7 @@ export default class Footer extends Component {
             {this.state.isJs13kDropdownOpen && (
               <div className="js13k__dropdown">
                 <button
-                  class="btn"
+                  className="btn"
                   style={{
                     width: '200px',
                     display: 'block',
@@ -167,7 +169,7 @@ export default class Footer extends Component {
                   Download game as zip
                 </button>
                 <a
-                  class="btn"
+                  className="btn"
                   rel="noopener"
                   style={{
                     width: '200px',
@@ -180,7 +182,7 @@ export default class Footer extends Component {
                   Upload Image
                 </a>
                 <button
-                  class="btn"
+                  className="btn"
                   style={{ width: '200px', display: 'block' }}
                   onClick={this.props.onJs13KHelpBtnClick}
                 >
@@ -191,26 +193,26 @@ export default class Footer extends Component {
           </div>
         ) : null}
 
-        <div class="footer__right hidden">
+        <div className="footer__right hidden">
           <button
-            style="display: none;"
+            style={{display: 'none'}}
             onClick={this.props.saveHtmlBtnClickHandler}
             id="saveHtmlBtn"
-            class="mode-btn hint--rounded  hint--top-left hide-on-mobile"
+            className="mode-btn hint--rounded  hint--top-left hide-on-mobile"
             aria-label="Save as HTML file"
           >
             <svg viewBox="0 0 24 24">
               <path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
             </svg>
           </button>
-          <svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
+          <svg style={{display: 'none'}} xmlns="http://www.w3.org/2000/svg">
             <symbol id="codepen-logo" viewBox="0 0 120 120">
               <path
-                class="outer-ring"
+                className="outer-ring"
                 d="M60.048 0C26.884 0 0 26.9 0 60.048s26.884 60 60 60.047c33.163 0 60.047-26.883 60.047-60.047 S93.211 0 60 0z M60.048 110.233c-27.673 0-50.186-22.514-50.186-50.186S32.375 9.9 60 9.9 c27.672 0 50.2 22.5 50.2 50.186S87.72 110.2 60 110.233z"
               />
               <path
-                class="inner-box"
+                className="inner-box"
                 d="M97.147 48.319c-0.007-0.047-0.019-0.092-0.026-0.139c-0.016-0.09-0.032-0.18-0.056-0.268 c-0.014-0.053-0.033-0.104-0.05-0.154c-0.025-0.078-0.051-0.156-0.082-0.232c-0.021-0.053-0.047-0.105-0.071-0.156 c-0.033-0.072-0.068-0.143-0.108-0.211c-0.029-0.051-0.061-0.1-0.091-0.148c-0.043-0.066-0.087-0.131-0.135-0.193 c-0.035-0.047-0.072-0.094-0.109-0.139c-0.051-0.059-0.104-0.117-0.159-0.172c-0.042-0.043-0.083-0.086-0.127-0.125 c-0.059-0.053-0.119-0.104-0.181-0.152c-0.048-0.037-0.095-0.074-0.145-0.109c-0.019-0.012-0.035-0.027-0.053-0.039L61.817 23.5 c-1.072-0.715-2.468-0.715-3.54 0L24.34 46.081c-0.018 0.012-0.034 0.027-0.053 0.039c-0.05 0.035-0.097 0.072-0.144 0.1 c-0.062 0.049-0.123 0.1-0.181 0.152c-0.045 0.039-0.086 0.082-0.128 0.125c-0.056 0.055-0.108 0.113-0.158 0.2 c-0.038 0.045-0.075 0.092-0.11 0.139c-0.047 0.062-0.092 0.127-0.134 0.193c-0.032 0.049-0.062 0.098-0.092 0.1 c-0.039 0.068-0.074 0.139-0.108 0.211c-0.024 0.051-0.05 0.104-0.071 0.156c-0.031 0.076-0.057 0.154-0.082 0.2 c-0.017 0.051-0.035 0.102-0.05 0.154c-0.023 0.088-0.039 0.178-0.056 0.268c-0.008 0.047-0.02 0.092-0.025 0.1 c-0.019 0.137-0.029 0.275-0.029 0.416V71.36c0 0.1 0 0.3 0 0.418c0.006 0 0 0.1 0 0.1 c0.017 0.1 0 0.2 0.1 0.268c0.015 0.1 0 0.1 0.1 0.154c0.025 0.1 0.1 0.2 0.1 0.2 c0.021 0.1 0 0.1 0.1 0.154c0.034 0.1 0.1 0.1 0.1 0.213c0.029 0 0.1 0.1 0.1 0.1 c0.042 0.1 0.1 0.1 0.1 0.193c0.035 0 0.1 0.1 0.1 0.139c0.05 0.1 0.1 0.1 0.2 0.2 c0.042 0 0.1 0.1 0.1 0.125c0.058 0.1 0.1 0.1 0.2 0.152c0.047 0 0.1 0.1 0.1 0.1 c0.019 0 0 0 0.1 0.039L58.277 96.64c0.536 0.4 1.2 0.5 1.8 0.537c0.616 0 1.233-0.18 1.77-0.537 l33.938-22.625c0.018-0.012 0.034-0.027 0.053-0.039c0.05-0.035 0.097-0.072 0.145-0.109c0.062-0.049 0.122-0.1 0.181-0.152 c0.044-0.039 0.085-0.082 0.127-0.125c0.056-0.055 0.108-0.113 0.159-0.172c0.037-0.045 0.074-0.09 0.109-0.139 c0.048-0.062 0.092-0.127 0.135-0.193c0.03-0.049 0.062-0.098 0.091-0.146c0.04-0.07 0.075-0.141 0.108-0.213 c0.024-0.051 0.05-0.102 0.071-0.154c0.031-0.078 0.057-0.156 0.082-0.234c0.017-0.051 0.036-0.102 0.05-0.154 c0.023-0.088 0.04-0.178 0.056-0.268c0.008-0.045 0.02-0.092 0.026-0.137c0.018-0.139 0.028-0.277 0.028-0.418V48.735 C97.176 48.6 97.2 48.5 97.1 48.319z M63.238 32.073l25.001 16.666L77.072 56.21l-13.834-9.254V32.073z M56.856 32.1 v14.883L43.023 56.21l-11.168-7.471L56.856 32.073z M29.301 54.708l7.983 5.34l-7.983 5.34V54.708z M56.856 88.022L31.855 71.4 l11.168-7.469l13.833 9.252V88.022z M60.048 67.597l-11.286-7.549l11.286-7.549l11.285 7.549L60.048 67.597z M63.238 88.022V73.14 l13.834-9.252l11.167 7.469L63.238 88.022z M90.794 65.388l-7.982-5.34l7.982-5.34V65.388z"
               />
             </symbol>
@@ -219,8 +221,8 @@ export default class Footer extends Component {
           <button
             onClick={this.props.codepenBtnClickHandler}
             id="codepenBtn"
-            class="mode-btn  hint--rounded  hint--top-left  hide-on-mobile"
-            style="display: none"
+            className="mode-btn  hint--rounded  hint--top-left  hide-on-mobile"
+            style={{display: 'none'}}
             aria-label="Edit on CodePen"
           >
             <svg fill="currentColor">
@@ -230,21 +232,21 @@ export default class Footer extends Component {
 
           <button
             id="screenshotBtn"
-            class="mode-btn  hint--rounded  hint--top-left show-when-extension"
-            style="display: none"
+            className="mode-btn  hint--rounded  hint--top-left show-when-extension"
+            style={{display: 'none'}}
             onClick={this.props.screenshotBtnClickHandler}
             aria-label="Take screenshot of preview"
           >
-            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
+            <svg style={{width:'24px', height:'24px'}} viewBox="0 0 24 24">
               <path
                 fill="currentColor"
                 d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z"
               />
             </svg>
           </button>
           <button
-            style="display:none;"
-            class="mode-btn hint--top-left hint--rounded hide-on-mobile"
+            style={{display: 'none'}}
+            className="mode-btn hint--top-left hint--rounded hide-on-mobile"
             aria-label="Detach Preview"
             onClick={this.props.detachedPreviewBtnHandler}
           >
@@ -259,10 +261,10 @@ export default class Footer extends Component {
           <button
             onClick={this.props.notificationsBtnClickHandler}
             id="notificationsBtn"
-            class={`notifications-btn  mode-btn  hint--top-left hint--rounded has-new ${
+            className={`notifications-btn  mode-btn  hint--top-left hint--rounded has-new ${
               this.props.hasUnseenChangelog ? 'has-new' : ''
             }`}
-            style="display: none"
+            style={{display: 'none'}}
             aria-label="See Changelog"
           >
             <svg viewBox="0 0 24 24">
@@ -271,7 +273,7 @@ export default class Footer extends Component {
                 d="M14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20H14M12,2A1,1 0 0,1 13,3V4.08C15.84,4.56 18,7.03 18,10V16L21,19H3L6,16V10C6,7.03 8.16,4.56 11,4.08V3A1,1 0 0,1 12,2Z"
               />
             </svg>
-            <span class="notifications-btn__dot" />
+            <span className="notifications-btn__dot" />
           </button>
           {/*<Button*/}
           {/*	onClick={this.props.settingsBtnClickHandler}*/}

diff --git a/src/components/HelpModal.jsx b/src/components/HelpModal.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Modal from './Modal';
 
 const commitHash = __COMMITHASH__; //eslint-disable-line

diff --git a/src/components/Icons.jsx b/src/components/Icons.jsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 export function Icons() {
   return (
     <svg

diff --git a/src/components/ItemTile.jsx b/src/components/ItemTile.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { getHumanDate } from '../utils';
 import * as Tooltip from '@radix-ui/react-tooltip';
 

diff --git a/src/components/Js13KModal.jsx b/src/components/Js13KModal.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Modal from './Modal';
 
 export function Js13KModal({ show, closeHandler }) {

diff --git a/src/components/KeyboardShortcutsModal.jsx b/src/components/KeyboardShortcutsModal.jsx
@@ -1,5 +1,5 @@
 import * as Dialog from '@radix-ui/react-dialog';
-import { h } from 'preact';
+import React from 'react';
 
 const KeyboardShortcutsModal = ({ open, onClose }) => {
   return (