mermaid-js · MrCoder · Apr 26, 2025 · May 3, 2025 · May 3, 2025 · May 3, 2025
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -24,7 +24,6 @@ jobs:
         run: |
           python -m pip install --upgrade pip
           sudo -H pip install setuptools
-
       - uses: pnpm/action-setup@v4
         with:
           version: 9

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-14.21
+20
diff --git a/.prettierignore b/.prettierignore
@@ -1,4 +1,4 @@
 node_modules
 dist
 generated-parser
-pnpm-lcok.yaml
+pnpm-lcok.yaml
diff --git a/cypress/e2e/__image_snapshots__/Defect 406 Fragments under Creation #0.png b/cypress/e2e/__image_snapshots__/Defect 406 Fragments under Creation #0.png
diff --git a/cypress/e2e/__image_snapshots__/Editable Label Async message #0.png b/cypress/e2e/__image_snapshots__/Editable Label Async message #0.png
diff --git a/cypress/e2e/__image_snapshots__/Editable Label Self message #0.png b/cypress/e2e/__image_snapshots__/Editable Label Self message #0.png
diff --git a/...2e/__image_snapshots__/Editable Label Special characters & extra spaces #0.png b/...2e/__image_snapshots__/Editable Label Special characters & extra spaces #0.png
diff --git a/..._image_snapshots__/If Fragment Test should render if fragment correctly #0.png b/..._image_snapshots__/If Fragment Test should render if fragment correctly #0.png
diff --git a/cypress/e2e/__image_snapshots__/Rendering Async message - 1 #0.png b/cypress/e2e/__image_snapshots__/Rendering Async message - 1 #0.png
diff --git a/cypress/e2e/__image_snapshots__/Rendering Async message - 2 #0.png b/cypress/e2e/__image_snapshots__/Rendering Async message - 2 #0.png
diff --git a/cypress/e2e/__image_snapshots__/Rendering Async message - 3 #0.png b/cypress/e2e/__image_snapshots__/Rendering Async message - 3 #0.png
diff --git a/cypress/e2e/__image_snapshots__/Return functionality return #0.png b/cypress/e2e/__image_snapshots__/Return functionality return #0.png
diff --git a/cypress/e2e/__image_snapshots__/Smoke test Self Sync Message at Root #0.png b/cypress/e2e/__image_snapshots__/Smoke test Self Sync Message at Root #0.png
diff --git a/cypress/e2e/__image_snapshots__/Smoke test fragment #0.png b/cypress/e2e/__image_snapshots__/Smoke test fragment #0.png
diff --git a/cypress/e2e/__image_snapshots__/Smoke test fragmentIssue #0.png b/cypress/e2e/__image_snapshots__/Smoke test fragmentIssue #0.png
diff --git a/cypress/e2e/__image_snapshots__/Smoke test interaction #0.png b/cypress/e2e/__image_snapshots__/Smoke test interaction #0.png
diff --git a/cypress/e2e/__image_snapshots__/Smoke test should load the home page #0.png b/cypress/e2e/__image_snapshots__/Smoke test should load the home page #0.png
diff --git a/cypress/e2e/__image_snapshots__/after-click #0.png b/cypress/e2e/__image_snapshots__/after-click #0.png
diff --git a/cypress/e2e/style-panel.spec.js b/cypress/e2e/style-panel.spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable no-undef */
+ 
 import "cypress-plugin-snapshots/commands";
 describe("Smoke test", function () {
   it("style-panel", function () {

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,35 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import eslintConfigPrettier from "eslint-config-prettier/flat";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommended,
+      eslintConfigPrettier,
+    ],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      "@typescript-eslint/no-unsafe-function-type": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+    },
+  },
+);
diff --git a/index.html b/index.html
@@ -1,6 +1,9 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       rel="preload stylesheet"
@@ -16,9 +19,6 @@
       /*    font-family: "Kalam", serif;*/
       /*}*/
     </style>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <link
       rel="stylesheet"
       href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css"
@@ -34,10 +34,14 @@
     />
     <title>ZenUML Core Demo</title>
     <style>
+      body {
+        margin: 0;
+      }
       .CodeMirror {
         /* Set height, width, borders, and global font properties here */
         font-family: monospace;
         font-size: 13px;
+        height: 100vh;
       }
 
       .zenuml .CodeMirror .CodeMirror-cursor {
@@ -62,14 +66,7 @@
       }
     </style>
   </head>
-
   <body>
-    <noscript>
-      <strong
-        >We're sorry but vue-sequence doesn't work properly without JavaScript
-        enabled. Please enable it to continue.</strong
-      >
-    </noscript>
     <div class="m-1 grid grid-cols-6" id="diagram1">
       <div class="col-span-2">
         <textarea
@@ -121,6 +118,6 @@
         editor.setValue(savedCode);
       }
     </script>
-    <script type="module" src="./src/main.ts"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -11,9 +11,9 @@
     "preview": "vite preview --port 8080 --host",
     "build:site": "vite build",
     "build:gh-pages": "vite build --mode gh-pages",
-    "build": "vite build -c vite.config.lib.js",
+    "build": "vite build -c vite.config.lib.ts",
     "test": "vitest",
-    "cy": "cypress run",
+    "cy": "cypress install & cypress run",
     "cy:update": "cypress run --env updateSnapshots=true",
     "cy:open": "cypress open",
     "cy:smoke": "cypress run --spec cypress/e2e/smoke.spec.js",
@@ -25,7 +25,7 @@
     "antlr:clear": "rm -rf src/generated-parser/*",
     "antlr:lexer": "java -Duser.dir=$(pwd)/src/g4 -cp $(pwd)/antlr/antlr-4.11.1-complete.jar org.antlr.v4.Tool -o ./src/generated-parser -Dlanguage=JavaScript sequenceLexer.g4",
     "antlr:parser": "java -Duser.dir=$(pwd)/src/g4 -cp $(pwd)/antlr/antlr-4.11.1-complete.jar org.antlr.v4.Tool -o ./src/generated-parser -Dlanguage=JavaScript sequenceParser.g4",
-    "eslint": "eslint --fix --ext .js,.ts,.vue src",
+    "eslint": "eslint --fix --ext .js,.ts,.tsx,.jsx src",
     "prettier": "prettier --write --ignore-unknown \"src/**/*.{js,ts,vue,json,htm,html}\"",
     "git:branch:clean:gone": "git fetch -p && git branch -vv | awk '/: gone]/{print $1}' | xargs git branch -d",
     "git:branch:clean:merged": "git branch --merged|egrep -v \"(\\*|master|main|dev|skip_branch_name)\" | xargs git branch -d",
@@ -39,87 +39,80 @@
   "types": "./types/index.d.ts",
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown",
-    "*.{js,ts,vue,json,htm,html}": "eslint --fix"
+    "*.{js,ts,tsx,jsx,json,htm,html}": "eslint --fix"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "postcss": {
+    "plugins": {
+      "tailwindcss": {},
+      "autoprefixer": {}
+    }
+  },
+  "pnpm": {
+    "overrides": {
+      "react": "^19.0.0",
+      "react-dom": "^19.0.0"
+    }
   },
   "dependencies": {
-    "@headlessui-float/vue": "^0.14.0",
-    "@headlessui/tailwindcss": "^0.2.0",
-    "@headlessui/vue": "^1.7.16",
-    "@types/assert": "^1.5.6",
-    "@types/ramda": "^0.28.20",
-    "@vue/compat": "^3.2.45",
+    "@floating-ui/react": "^0.27.8",
+    "@headlessui/react": "^2.2.1",
+    "@headlessui/tailwindcss": "^0.2.2",
     "antlr4": "~4.11.0",
-    "color-string": "^1.5.5",
-    "dom-to-image-more": "^2.13.0",
-    "dompurify": "^3.1.5",
-    "file-saver": "^2.0.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "color-string": "^2.0.1",
+    "dompurify": "^3.2.5",
     "highlight.js": "^10.7.3",
-    "html-to-image": "^1.11.3",
-    "lodash": "^4.17.21",
-    "marked": "^4.0.10",
+    "html-to-image": "^1.11.13",
+    "immer": "^10.1.1",
+    "jotai": "^2.12.2",
+    "marked": "^4.3.0",
     "pino": "^8.8.0",
-    "postcss": "^8.4.31",
+    "radash": "^12.1.0",
     "ramda": "^0.28.0",
-    "tailwindcss": "^3.4.17",
-    "vue": "^3.2.45",
-    "vuex": "^4.1.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.1.0",
+    "tailwindcss": "^3.4.17"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.19.1",
-    "@babel/preset-env": "^7.20.2",
+    "@eslint/js": "^9.21.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
     "@types/antlr4": "~4.11.2",
-    "@types/color-string": "^1.5.2",
-    "@types/jest": "^29.5.14",
+    "@types/color-string": "^1.5.5",
+    "@types/highlight.js": "10",
     "@types/jsdom": "^21.1.7",
-    "@types/lodash": "^4.14.191",
-    "@types/node": "latest",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.7.4",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitest/coverage-v8": "^2.1.5",
-    "@vue/compiler-dom": "^3.3.8",
-    "@vue/compiler-sfc": "^3.2.45",
-    "@vue/test-utils": "^2.2.7",
-    "autoprefixer": "^10.4.13",
-    "concurrently": "^7.6.0",
-    "cypress": "^10.11.0",
+    "@types/marked": "^4.3.2",
+    "@types/node": "^22.14.0",
+    "@types/ramda": "^0.28.20",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.21",
+    "cypress": "^14.3.2",
     "cypress-plugin-snapshots": "^1.4.4",
-    "eslint": "^8.30.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "global-jsdom": "^8.6.0",
-    "husky": "^8.0.3",
-    "jsdom": "^20.0.3",
-    "less": "^4.1.3",
-    "less-loader": "^11.1.3",
-    "lint-staged": "^14.0.1",
-    "prettier": "^3.0.3",
-    "regenerator-runtime": "^0.13.11",
-    "sass": "^1.57.0",
-    "svg-url-loader": "^6.0.0",
-    "terser-webpack-plugin": "^3.1.0",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.6.3",
-    "vite": "^4.5.6",
-    "vite-plugin-css-injected-by-js": "^2.2.0",
-    "vite-svg-loader": "^4.0.0",
-    "vitest": "^2.1.5"
-  },
-  "postcss": {
-    "plugins": {
-      "tailwindcss": {},
-      "autoprefixer": {}
-    }
-  },
-  "browserslist": [
-    "last 2 years"
-  ],
-  "engines": {
-    "node": ">=12.0.0"
-  },
-  "volta": {
-    "node": "18.12.1"
+    "eslint": "^9.21.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "husky": "^9.1.7",
+    "jsdom": "^26.1.0",
+    "less": "^4.3.0",
+    "lint-staged": "^15.5.1",
+    "postcss": "^8.5.3",
+    "prettier": "3.5.3",
+    "sass": "^1.86.3",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-svg-loader": "^5.1.0",
+    "vitest": "^3.1.1"
   }
 }