react-konva - npm Package Compare versions

Comparing version 19.2.0 to 19.2.1

es/ReactKonvaCore.d.ts

@@ -21,4 +21,4 @@ // special file for minimal import
   onTouchEnd?(evt: Konva.KonvaEventObject<TouchEvent>): void;
-  onTap?(evt: Konva.KonvaEventObject<Event>): void;
-  onDblTap?(evt: Konva.KonvaEventObject<Event>): void;
+  onTap?(evt: Konva.KonvaEventObject<TouchEvent>): void;
+  onDblTap?(evt: Konva.KonvaEventObject<TouchEvent>): void;
   onDragStart?(evt: Konva.KonvaEventObject<DragEvent>): void;
@@ -25,0 +25,0 @@ onDragMove?(evt: Konva.KonvaEventObject<DragEvent>): void;

es/ReactKonvaCore.js

@@ -49,3 +49,3 @@ /**
     const Bridge = useContextBridge();
-    const isMounted = React.useRef(false);
+    const pendingDestroy = React.useRef(null);
     const _setRef = (stage) => {
@@ -64,31 +64,37 @@ const { forwardedRef } = props;
     const isStrictMode = useIsReactStrictMode();
+    const destroyStage = () => {
+        _setRef(null);
+        KonvaRenderer.updateContainer(null, fiberRef.current, null);
+        stage.current?.destroy();
+        stage.current = null;
+    };
     React.useLayoutEffect(() => {
-        // is we are in strict mode, we need to ignore the second full render
-        // instead do nothing and just return clean function
-        if (isMounted.current && isStrictMode) {
-            return () => {
-                isMounted.current = false;
-                _setRef(null);
-                KonvaRenderer.updateContainer(null, fiberRef.current, null);
-                stage.current.destroy();
-            };
+        // Cancel any pending destruction (happens during re-ordering in strict mode)
+        if (pendingDestroy.current) {
+            clearTimeout(pendingDestroy.current);
+            pendingDestroy.current = null;
         }
-        isMounted.current = true;
-        stage.current = new Konva.Stage({
-            width: props.width,
-            height: props.height,
-            container: container.current,
-        });
-        _setRef(stage.current);
-        // @ts-ignore
-        fiberRef.current = KonvaRenderer.createContainer(stage.current, ConcurrentRoot, null, false, null, '', console.error, console.error, console.error, null);
-        KonvaRenderer.updateContainer(React.createElement(Bridge, {}, props.children), fiberRef.current, null, () => { });
+        // If stage already exists (re-ordering scenario), reuse it
+        if (stage.current) {
+            _setRef(stage.current);
+        }
+        else {
+            stage.current = new Konva.Stage({
+                width: props.width,
+                height: props.height,
+                container: container.current,
+            });
+            _setRef(stage.current);
+            // @ts-ignore
+            fiberRef.current = KonvaRenderer.createContainer(stage.current, ConcurrentRoot, null, false, null, '', console.error, console.error, console.error, null);
+            KonvaRenderer.updateContainer(React.createElement(Bridge, {}, props.children), fiberRef.current, null, () => { });
+        }
         return () => {
-            // inside React strict mode, we need to ignore cleanup, because it will mess with refs
             if (isStrictMode) {
-                return;
+                // Delay destruction to allow cancellation on remount
+                pendingDestroy.current = setTimeout(destroyStage, 0);
             }
-            _setRef(null);
-            KonvaRenderer.updateContainer(null, fiberRef.current, null);
-            stage.current.destroy();
+            else {
+                destroyStage();
+            }
         };
@@ -134,3 +140,3 @@ }, []);
 export const Transformer = 'Transformer';
-export const version = '19.2.0';
+export const version = '19.2.1';
 // @ts-ignore
@@ -137,0 +143,0 @@ export const KonvaRenderer = ReactFiberReconciler(HostConfig);

lib/ReactKonvaCore.d.ts

@@ -21,4 +21,4 @@ // special file for minimal import
   onTouchEnd?(evt: Konva.KonvaEventObject<TouchEvent>): void;
-  onTap?(evt: Konva.KonvaEventObject<Event>): void;
-  onDblTap?(evt: Konva.KonvaEventObject<Event>): void;
+  onTap?(evt: Konva.KonvaEventObject<TouchEvent>): void;
+  onDblTap?(evt: Konva.KonvaEventObject<TouchEvent>): void;
   onDragStart?(evt: Konva.KonvaEventObject<DragEvent>): void;
@@ -25,0 +25,0 @@ onDragMove?(evt: Konva.KonvaEventObject<DragEvent>): void;

lib/ReactKonvaCore.js

@@ -88,3 +88,3 @@ /**
     const Bridge = (0, its_fine_1.useContextBridge)();
-    const isMounted = react_1.default.useRef(false);
+    const pendingDestroy = react_1.default.useRef(null);
     const _setRef = (stage) => {
@@ -103,31 +103,37 @@ const { forwardedRef } = props;
     const isStrictMode = useIsReactStrictMode();
+    const destroyStage = () => {
+        _setRef(null);
+        exports.KonvaRenderer.updateContainer(null, fiberRef.current, null);
+        stage.current?.destroy();
+        stage.current = null;
+    };
     react_1.default.useLayoutEffect(() => {
-        // is we are in strict mode, we need to ignore the second full render
-        // instead do nothing and just return clean function
-        if (isMounted.current && isStrictMode) {
-            return () => {
-                isMounted.current = false;
-                _setRef(null);
-                exports.KonvaRenderer.updateContainer(null, fiberRef.current, null);
-                stage.current.destroy();
-            };
+        // Cancel any pending destruction (happens during re-ordering in strict mode)
+        if (pendingDestroy.current) {
+            clearTimeout(pendingDestroy.current);
+            pendingDestroy.current = null;
         }
-        isMounted.current = true;
-        stage.current = new Core_js_1.default.Stage({
-            width: props.width,
-            height: props.height,
-            container: container.current,
-        });
-        _setRef(stage.current);
-        // @ts-ignore
-        fiberRef.current = exports.KonvaRenderer.createContainer(stage.current, constants_js_1.ConcurrentRoot, null, false, null, '', console.error, console.error, console.error, null);
-        exports.KonvaRenderer.updateContainer(react_1.default.createElement(Bridge, {}, props.children), fiberRef.current, null, () => { });
+        // If stage already exists (re-ordering scenario), reuse it
+        if (stage.current) {
+            _setRef(stage.current);
+        }
+        else {
+            stage.current = new Core_js_1.default.Stage({
+                width: props.width,
+                height: props.height,
+                container: container.current,
+            });
+            _setRef(stage.current);
+            // @ts-ignore
+            fiberRef.current = exports.KonvaRenderer.createContainer(stage.current, constants_js_1.ConcurrentRoot, null, false, null, '', console.error, console.error, console.error, null);
+            exports.KonvaRenderer.updateContainer(react_1.default.createElement(Bridge, {}, props.children), fiberRef.current, null, () => { });
+        }
         return () => {
-            // inside React strict mode, we need to ignore cleanup, because it will mess with refs
             if (isStrictMode) {
-                return;
+                // Delay destruction to allow cancellation on remount
+                pendingDestroy.current = setTimeout(destroyStage, 0);
             }
-            _setRef(null);
-            exports.KonvaRenderer.updateContainer(null, fiberRef.current, null);
-            stage.current.destroy();
+            else {
+                destroyStage();
+            }
         };
@@ -173,3 +179,3 @@ }, []);
 exports.Transformer = 'Transformer';
-exports.version = '19.2.0';
+exports.version = '19.2.1';
 // @ts-ignore
@@ -176,0 +182,0 @@ exports.KonvaRenderer = (0, react_reconciler_1.default)(HostConfig);

package.json

@@ -5,3 +5,3 @@ {
   "description": "React binding to canvas element via Konva framework",
-  "version": "19.2.0",
+  "version": "19.2.1",
   "keywords": [
@@ -21,3 +21,3 @@ "react",
   "dependencies": {
-    "@types/react-reconciler": "^0.32.2",
+    "@types/react-reconciler": "^0.32.3",
     "its-fine": "^2.0.0",
@@ -50,7 +50,7 @@ "react-reconciler": "0.33.0",
   "devDependencies": {
-    "@types/react": "19.2.2",
-    "@vitest/browser": "^4.0.2",
-    "@vitest/browser-playwright": "^4.0.2",
-    "konva": "^10.0.7",
-    "playwright": "^1.56.1",
+    "@types/react": "19.2.7",
+    "@vitest/browser": "^4.0.14",
+    "@vitest/browser-playwright": "^4.0.14",
+    "konva": "^10.0.12",
+    "playwright": "^1.57.0",
     "react": "^19.2.0",
@@ -60,3 +60,3 @@ "react-dom": "^19.2.0",
     "use-image": "^1.1.4",
-    "vitest": "^4.0.2"
+    "vitest": "^4.0.14"
   },
@@ -63,0 +63,0 @@ "scripts": {

ReactKonvaCore.d.ts

@@ -21,4 +21,4 @@ // special file for minimal import
   onTouchEnd?(evt: Konva.KonvaEventObject<TouchEvent>): void;
-  onTap?(evt: Konva.KonvaEventObject<Event>): void;
-  onDblTap?(evt: Konva.KonvaEventObject<Event>): void;
+  onTap?(evt: Konva.KonvaEventObject<TouchEvent>): void;
+  onDblTap?(evt: Konva.KonvaEventObject<TouchEvent>): void;
   onDragStart?(evt: Konva.KonvaEventObject<DragEvent>): void;
@@ -25,0 +25,0 @@ onDragMove?(evt: Konva.KonvaEventObject<DragEvent>): void;

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

72310

0.34%

Lines of code

1443

0.84%

Dependency changes

• Updated

  @types/react-reconciler@^0.32.3