feat: upgrade dependencies (#47)

* feat: upgrade dependencies

* feat(src/animate.ts): migrate to @excalidraw/excalidraw v0.15 api

* feat(src/index.tsx): switch to the React 18 API (use createRoot instead of ReactDOM.render)

package.json

@@ -6,24 +6,24 @@
   "module": "./dist/library.js",
   "types": "./dist/library.d.ts",
   "dependencies": {
-    "@excalidraw/excalidraw": "0.12.0",
-    "pako": "2.0.4"
+    "@excalidraw/excalidraw": "0.15.2",
+    "pako": "2.1.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@types/dom-mediacapture-record": "^1.0.11",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/dom-mediacapture-record": "^1.0.16",
     "@types/pako": "^2.0.0",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
-    "browser-fs-access": "^0.31.0",
+    "@types/react": "^18.2.4",
+    "@types/react-dom": "^18.2.3",
+    "browser-fs-access": "^0.33.1",
     "crypto": "^1.0.1",
-    "jest-canvas-mock": "^2.4.0",
-    "prettier": "^2.7.1",
+    "jest-canvas-mock": "^2.5.0",
+    "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
-    "typescript": "^4.7.4"
+    "typescript": "^5.0.4"
   },
   "files": [
     "src",

src/animate.ts

@@ -336,13 +336,12 @@ const animateFromToPath = (
 const patchSvgLine = (
   svg: SVGSVGElement,
   ele: SVGElement,
-  strokeSharpness: string,
+  isRounded: boolean,
   currentMs: number,
   durationMs: number,
   options: AnimateOptions
 ) => {
-  const animateLine =
-    strokeSharpness !== "sharp" ? animatePath : animatePolygon;
+  const animateLine = isRounded ? animatePath : animatePolygon;
   const childNodes = ele.childNodes as NodeListOf<SVGElement>;
   if (childNodes[0].getAttribute("fill-rule")) {
     animateLine(
@@ -374,13 +373,12 @@ const patchSvgLine = (
 const patchSvgArrow = (
   svg: SVGSVGElement,
   ele: SVGElement,
-  strokeSharpness: string,
+  isRounded: boolean,
   currentMs: number,
   durationMs: number,
   options: AnimateOptions
 ) => {
-  const animateLine =
-    strokeSharpness !== "sharp" ? animatePath : animatePolygon;
+  const animateLine = isRounded ? animatePath : animatePolygon;
   const numParts = ele.childNodes.length;
   animateLine(
     svg,
@@ -569,11 +567,11 @@ const patchSvgEle = (
   durationMs: number,
   options: AnimateOptions
 ) => {
-  const { type, strokeSharpness, width } = excalidraElement;
+  const { type, roundness, width } = excalidraElement;
   if (type === "line") {
-    patchSvgLine(svg, ele, strokeSharpness, currentMs, durationMs, options);
+    patchSvgLine(svg, ele, !!roundness, currentMs, durationMs, options);
   } else if (type === "arrow") {
-    patchSvgArrow(svg, ele, strokeSharpness, currentMs, durationMs, options);
+    patchSvgArrow(svg, ele, !!roundness, currentMs, durationMs, options);
   } else if (type === "rectangle" || type === "diamond") {
     patchSvgRectangle(svg, ele, currentMs, durationMs, options);
   } else if (type === "ellipse") {

src/index.tsx

@@ -1,11 +1,13 @@
 import React from "react";
-import ReactDOM from "react-dom";
-import "./index.css";
+import { createRoot } from "react-dom/client";
+
 import App from "./App";
+import "./index.css";
 
-ReactDOM.render(
+const container = document.getElementById("root");
+const root = createRoot(container!);
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );