@depup/react-konva 19.2.3-depup.0 → 19.2.6-depup.0

package/README.md

@@ -13,8 +13,8 @@ npm install @depup/react-konva
 
 | Field | Value |
 |-------|-------|
-| Original | [react-konva](https://www.npmjs.com/package/react-konva) @ 19.2.3 |
-| Processed | 2026-03-18 |
+| Original | [react-konva](https://www.npmjs.com/package/react-konva) @ 19.2.6 |
+| Processed | 2026-09-06 |
 | Smoke test | failed |
 | Deps updated | 0 |
 

package/changes.json

@@ -1,5 +1,5 @@
 {
   "bumped": {},
-  "timestamp": "2026-03-18T22:41:31.339Z",
+  "timestamp": "2026-09-06T00:59:49.028Z",
   "totalUpdated": 0
 }

package/es/ReactKonvaCore.js

@@ -14,7 +14,7 @@ import Konva from 'konva/lib/Core.js';
 import ReactFiberReconciler from 'react-reconciler';
 import { ConcurrentRoot } from 'react-reconciler/constants.js';
 import * as HostConfig from './ReactKonvaHostConfig.js';
-import { applyNodeProps, toggleStrictMode } from './makeUpdates.js';
+import { applyNodeProps, toggleStrictMode, _injectFlush } from './makeUpdates.js';
 import { useContextBridge, FiberProvider } from 'its-fine';
 function usePrevious(value) {
     const ref = React.useRef({});
@@ -106,38 +106,12 @@ const StageWrap = (props) => {
     React.useLayoutEffect(() => {
         _setRef(stage.current);
         applyNodeProps(stage.current, props, oldProps);
-        // =============================================================================
-        // CRITICAL FIX - DO NOT REMOVE
-        // =============================================================================
-        // This flushSyncFromReconciler wrapper is CRITICAL for React 19 compatibility.
-        //
-        // THE BUG:
-        // When using useSyncExternalStore (MobX, Zustand, etc.) with react-konva,
-        // parent component's useLayoutEffect couldn't find newly added Konva nodes.
-        // The nodes were added to the store, but not yet rendered to the canvas.
-        //
-        // ROOT CAUSE:
-        // React 19's updateContainer can defer Konva reconciler work to a later
-        // microtask. Combined with Bridge component (from its-fine) and Html components
-        // that create secondary React roots, this caused child components to render
-        // AFTER parent's useLayoutEffect completed.
-        //
-        // THE FIX:
-        // flushSyncFromReconciler forces ALL scheduled Konva reconciler work to
-        // complete synchronously within this useLayoutEffect, ensuring child
-        // components render before any parent effects run.
-        //
-        // WARNING - NOT COVERED BY TESTS:
-        // This bug CANNOT be reproduced in local test environments (Vitest/Playwright).
-        // It only manifests in production builds with specific conditions:
-        // - MobX/useSyncExternalStore for state management
-        // - Html components with secondary React roots using Bridge
-        // - Complex component hierarchies (multiple pages/stages)
-        // The fix was verified in Polotno production app.
-        // =============================================================================
-        KonvaRenderer.flushSyncFromReconciler(() => {
-            KonvaRenderer.updateContainer(React.createElement(Bridge, {}, props.children), fiberRef.current, null);
-        });
+        // updateContainer schedules sync-lane work; with async scheduleMicrotask
+        // the work is queued, so flushSyncWork() drains it inline here so that
+        // a parent useLayoutEffect can read Konva nodes added by subscribing
+        // children. (Lighter than flushSyncFromReconciler — no callback wrapper.)
+        KonvaRenderer.updateContainer(React.createElement(Bridge, {}, props.children), fiberRef.current, null);
+        KonvaRenderer.flushSyncWork();
     });
     return React.createElement('div', {
         ref: container,
@@ -172,9 +146,14 @@ export const RegularPolygon = 'RegularPolygon';
 export const Arrow = 'Arrow';
 export const Shape = 'Shape';
 export const Transformer = 'Transformer';
-export const version = '19.2.3';
+export const version = '19.2.6';
 // @ts-ignore
 export const KonvaRenderer = ReactFiberReconciler(HostConfig);
+// Konva event handlers (bound in makeUpdates) flush pending reconciler work
+// inline after the user handler returns, so Konva code that synchronously
+// reads node state right after firing an event (Transformer.update) sees the
+// committed result. See wrapEventHandler in makeUpdates.ts.
+_injectFlush(() => KonvaRenderer.flushSyncWork());
 // Update Stage component declaration
 export const Stage = React.forwardRef((props, ref) => {
     return React.createElement(FiberProvider, {}, React.createElement(StageWrap, { ...props, forwardedRef: ref }));

package/es/ReactKonvaHostConfig.js

@@ -87,10 +87,12 @@ export function getChildHostContext() {
 export const scheduleTimeout = setTimeout;
 export const cancelTimeout = clearTimeout;
 export const supportsMicrotasks = true;
-// Run microtasks synchronously for immediate updates
-export const scheduleMicrotask = (fn) => {
-    fn();
-};
+// Async — fixes the mobx-react-lite snapshot race. Stage's useLayoutEffect
+// then explicitly calls `flushSyncWork()` to keep parent useLayoutEffect able
+// to read Konva nodes added by subscribing children (see ReactKonvaCore.tsx).
+export const scheduleMicrotask = typeof queueMicrotask === 'function'
+    ? queueMicrotask
+    : (fn) => Promise.resolve(null).then(fn);
 export const noTimeout = -1;
 // export const schedulePassiveEffects = scheduleDeferredCallback;
 // export const cancelPassiveEffects = cancelDeferredCallback;
@@ -189,6 +191,10 @@ export function setCurrentUpdatePriority(newPriority) {
 export function getCurrentUpdatePriority() {
     return currentUpdatePriority;
 }
+// Load-bearing: pins secondary commits to React's sync lane so they land
+// before the scheduler yields. Required for parent useLayoutEffect to read
+// Konva nodes added by subscribing children. Changing to Default/Continuous/
+// Idle breaks ~18 tests in test/01-mounting and test/16-scheduling-invariants.
 export function resolveUpdatePriority() {
     return DiscreteEventPriority;
 }

package/es/makeUpdates.js

@@ -25,6 +25,33 @@ react-konva may get confused with ordering. Just define correct order of element
 For more info see: https://github.com/konvajs/react-konva/issues/194
 `;
 const EMPTY_PROPS = {};
+// Konva internals synchronously read node state right after firing events —
+// e.g. Transformer fires "transform", the user handler calls setState, and
+// Transformer.update() immediately repositions its anchors from the node.
+// React commits async (microtask), so without a flush the chrome is measured
+// from the stale node on every event. Draining the reconciler's pending sync
+// work right after the user handler returns keeps Konva's read-after-fire
+// contract. Injected from ReactKonvaCore to avoid an import cycle.
+let flushPendingWork = () => { };
+export function _injectFlush(fn) {
+    flushPendingWork = fn;
+}
+let isFlushing = false;
+function wrapEventHandler(handler) {
+    return function (...args) {
+        const result = handler.apply(this, args);
+        if (!isFlushing) {
+            isFlushing = true;
+            try {
+                flushPendingWork();
+            }
+            finally {
+                isFlushing = false;
+            }
+        }
+        return result;
+    };
+}
 export function applyNodeProps(instance, props, oldProps = EMPTY_PROPS) {
     // don't use zIndex in react-konva
     if (!zIndexWarningShowed && 'zIndex' in props) {
@@ -58,7 +85,9 @@ export function applyNodeProps(instance, props, oldProps = EMPTY_PROPS) {
                         eventName.substr(7, 1).toUpperCase() +
                         eventName.substr(8);
             }
-            instance.off(eventName, oldProps[key]);
+            // the bound listener is a wrapper, not the user handler, so remove by
+            // our namespace (react-konva binds at most one listener per event there)
+            instance.off(eventName + EVENTS_NAMESPACE);
         }
         var toRemove = !props.hasOwnProperty(key);
         if (toRemove) {
@@ -106,7 +135,7 @@ export function applyNodeProps(instance, props, oldProps = EMPTY_PROPS) {
         // first clear any existing listeners, it is required for strict mode
         instance.off(eventName + EVENTS_NAMESPACE);
         // then attach new one
-        instance.on(eventName + EVENTS_NAMESPACE, newEvents[eventName]);
+        instance.on(eventName + EVENTS_NAMESPACE, wrapEventHandler(newEvents[eventName]));
     }
 }
 export function updatePicture(node) {

package/lib/ReactKonvaCore.js

@@ -145,38 +145,12 @@ const StageWrap = (props) => {
     react_1.default.useLayoutEffect(() => {
         _setRef(stage.current);
         (0, makeUpdates_js_1.applyNodeProps)(stage.current, props, oldProps);
-        // =============================================================================
-        // CRITICAL FIX - DO NOT REMOVE
-        // =============================================================================
-        // This flushSyncFromReconciler wrapper is CRITICAL for React 19 compatibility.
-        //
-        // THE BUG:
-        // When using useSyncExternalStore (MobX, Zustand, etc.) with react-konva,
-        // parent component's useLayoutEffect couldn't find newly added Konva nodes.
-        // The nodes were added to the store, but not yet rendered to the canvas.
-        //
-        // ROOT CAUSE:
-        // React 19's updateContainer can defer Konva reconciler work to a later
-        // microtask. Combined with Bridge component (from its-fine) and Html components
-        // that create secondary React roots, this caused child components to render
-        // AFTER parent's useLayoutEffect completed.
-        //
-        // THE FIX:
-        // flushSyncFromReconciler forces ALL scheduled Konva reconciler work to
-        // complete synchronously within this useLayoutEffect, ensuring child
-        // components render before any parent effects run.
-        //
-        // WARNING - NOT COVERED BY TESTS:
-        // This bug CANNOT be reproduced in local test environments (Vitest/Playwright).
-        // It only manifests in production builds with specific conditions:
-        // - MobX/useSyncExternalStore for state management
-        // - Html components with secondary React roots using Bridge
-        // - Complex component hierarchies (multiple pages/stages)
-        // The fix was verified in Polotno production app.
-        // =============================================================================
-        exports.KonvaRenderer.flushSyncFromReconciler(() => {
-            exports.KonvaRenderer.updateContainer(react_1.default.createElement(Bridge, {}, props.children), fiberRef.current, null);
-        });
+        // updateContainer schedules sync-lane work; with async scheduleMicrotask
+        // the work is queued, so flushSyncWork() drains it inline here so that
+        // a parent useLayoutEffect can read Konva nodes added by subscribing
+        // children. (Lighter than flushSyncFromReconciler — no callback wrapper.)
+        exports.KonvaRenderer.updateContainer(react_1.default.createElement(Bridge, {}, props.children), fiberRef.current, null);
+        exports.KonvaRenderer.flushSyncWork();
     });
     return react_1.default.createElement('div', {
         ref: container,
@@ -211,9 +185,14 @@ exports.RegularPolygon = 'RegularPolygon';
 exports.Arrow = 'Arrow';
 exports.Shape = 'Shape';
 exports.Transformer = 'Transformer';
-exports.version = '19.2.3';
+exports.version = '19.2.6';
 // @ts-ignore
 exports.KonvaRenderer = (0, react_reconciler_1.default)(HostConfig);
+// Konva event handlers (bound in makeUpdates) flush pending reconciler work
+// inline after the user handler returns, so Konva code that synchronously
+// reads node state right after firing an event (Transformer.update) sees the
+// committed result. See wrapEventHandler in makeUpdates.ts.
+(0, makeUpdates_js_1._injectFlush)(() => exports.KonvaRenderer.flushSyncWork());
 // Update Stage component declaration
 exports.Stage = react_1.default.forwardRef((props, ref) => {
     return react_1.default.createElement(its_fine_1.FiberProvider, {}, react_1.default.createElement(StageWrap, { ...props, forwardedRef: ref }));

package/lib/ReactKonvaHostConfig.js

@@ -143,11 +143,12 @@ function getChildHostContext() {
 exports.scheduleTimeout = setTimeout;
 exports.cancelTimeout = clearTimeout;
 exports.supportsMicrotasks = true;
-// Run microtasks synchronously for immediate updates
-const scheduleMicrotask = (fn) => {
-    fn();
-};
-exports.scheduleMicrotask = scheduleMicrotask;
+// Async — fixes the mobx-react-lite snapshot race. Stage's useLayoutEffect
+// then explicitly calls `flushSyncWork()` to keep parent useLayoutEffect able
+// to read Konva nodes added by subscribing children (see ReactKonvaCore.tsx).
+exports.scheduleMicrotask = typeof queueMicrotask === 'function'
+    ? queueMicrotask
+    : (fn) => Promise.resolve(null).then(fn);
 exports.noTimeout = -1;
 // export const schedulePassiveEffects = scheduleDeferredCallback;
 // export const cancelPassiveEffects = cancelDeferredCallback;
@@ -246,6 +247,10 @@ function setCurrentUpdatePriority(newPriority) {
 function getCurrentUpdatePriority() {
     return currentUpdatePriority;
 }
+// Load-bearing: pins secondary commits to React's sync lane so they land
+// before the scheduler yields. Required for parent useLayoutEffect to read
+// Konva nodes added by subscribing children. Changing to Default/Continuous/
+// Idle breaks ~18 tests in test/01-mounting and test/16-scheduling-invariants.
 function resolveUpdatePriority() {
     return constants_js_1.DiscreteEventPriority;
 }

package/lib/makeUpdates.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EVENTS_NAMESPACE = void 0;
 exports.toggleStrictMode = toggleStrictMode;
+exports._injectFlush = _injectFlush;
 exports.applyNodeProps = applyNodeProps;
 exports.updatePicture = updatePicture;
 const Global_js_1 = require("konva/lib/Global.js");
@@ -31,6 +32,33 @@ react-konva may get confused with ordering. Just define correct order of element
 For more info see: https://github.com/konvajs/react-konva/issues/194
 `;
 const EMPTY_PROPS = {};
+// Konva internals synchronously read node state right after firing events —
+// e.g. Transformer fires "transform", the user handler calls setState, and
+// Transformer.update() immediately repositions its anchors from the node.
+// React commits async (microtask), so without a flush the chrome is measured
+// from the stale node on every event. Draining the reconciler's pending sync
+// work right after the user handler returns keeps Konva's read-after-fire
+// contract. Injected from ReactKonvaCore to avoid an import cycle.
+let flushPendingWork = () => { };
+function _injectFlush(fn) {
+    flushPendingWork = fn;
+}
+let isFlushing = false;
+function wrapEventHandler(handler) {
+    return function (...args) {
+        const result = handler.apply(this, args);
+        if (!isFlushing) {
+            isFlushing = true;
+            try {
+                flushPendingWork();
+            }
+            finally {
+                isFlushing = false;
+            }
+        }
+        return result;
+    };
+}
 function applyNodeProps(instance, props, oldProps = EMPTY_PROPS) {
     // don't use zIndex in react-konva
     if (!zIndexWarningShowed && 'zIndex' in props) {
@@ -64,7 +92,9 @@ function applyNodeProps(instance, props, oldProps = EMPTY_PROPS) {
                         eventName.substr(7, 1).toUpperCase() +
                         eventName.substr(8);
             }
-            instance.off(eventName, oldProps[key]);
+            // the bound listener is a wrapper, not the user handler, so remove by
+            // our namespace (react-konva binds at most one listener per event there)
+            instance.off(eventName + exports.EVENTS_NAMESPACE);
         }
         var toRemove = !props.hasOwnProperty(key);
         if (toRemove) {
@@ -112,7 +142,7 @@ function applyNodeProps(instance, props, oldProps = EMPTY_PROPS) {
         // first clear any existing listeners, it is required for strict mode
         instance.off(eventName + exports.EVENTS_NAMESPACE);
         // then attach new one
-        instance.on(eventName + exports.EVENTS_NAMESPACE, newEvents[eventName]);
+        instance.on(eventName + exports.EVENTS_NAMESPACE, wrapEventHandler(newEvents[eventName]));
     }
 }
 function updatePicture(node) {

package/package.json

@@ -1,8 +1,7 @@
 {
   "license": "MIT",
   "name": "@depup/react-konva",
-  "description": "React binding to canvas element via Konva framework (with updated dependencies)",
-  "version": "19.2.3-depup.0",
+  "description": "React components for the Konva 2d canvas library. Build interactive graphics, design editors, and whiteboards with JSX. (with updated dependencies)",
   "keywords": [
     "react-konva",
     "depup",
@@ -13,8 +12,15 @@
     "react",
     "canvas",
     "jsx",
-    "konva"
+    "konva",
+    "graphics",
+    "design-editor",
+    "canvas-editor",
+    "whiteboard",
+    "transformer"
   ],
+  "homepage": "https://konvajs.org/docs/react/index.html",
+  "version": "19.2.6-depup.0",
   "bugs": "https://github.com/konvajs/react-konva/issues",
   "main": "lib/ReactKonva.js",
   "module": "es/ReactKonva.js",
@@ -28,9 +34,6 @@
     "react-reconciler": "0.33.0",
     "scheduler": "0.27.0"
   },
-  "targets": {
-    "none": {}
-  },
   "funding": [
     {
       "type": "patreon",
@@ -54,7 +57,9 @@
     "@types/react": "19.2.14",
     "@vitest/browser": "^4.0.18",
     "@vitest/browser-playwright": "^4.0.18",
-    "konva": "^10.2.0",
+    "konva": "^10.3.3",
+    "mobx": "^6.13.5",
+    "mobx-react-lite": "^4.1.0",
     "playwright": "^1.58.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
@@ -63,22 +68,23 @@
     "vitest": "^4.0.18"
   },
   "scripts": {
-    "build": "tsc -outDir ./es &&  tsc -module commonjs -outDir ./lib && cp ./ReactKonvaCore.d.ts ./lib && cp ./ReactKonvaCore.d.ts ./es && node ./replace-version.js",
+    "build": "node ./build.mjs",
     "test:typings": "tsc --noEmit",
     "preversion": "npm test",
     "version": "npm run build",
     "postversion": "",
-    "test": "vitest run && npm run test:typings",
+    "test": "vitest run && npm run test:prod && npm run test:ssr && npm run test:typings",
+    "test:prod": "NODE_ENV=production vitest run",
+    "test:ssr": "npm run build && node test/11-ssr.mjs",
     "test:watch": "vitest",
     "test:ui": "vitest --ui",
     "test:debug": "HEADLESS=false vitest"
   },
-  "typings": "react-konva.d.ts",
+  "typings": "ReactKonvaCore.d.ts",
   "files": [
     "README.md",
     "lib",
     "es",
-    "react-konva.d.ts",
     "ReactKonvaCore.d.ts",
     "changes.json"
   ],
@@ -86,8 +92,8 @@
     "changes": {},
     "depsUpdated": 0,
     "originalPackage": "react-konva",
-    "originalVersion": "19.2.3",
-    "processedAt": "2026-03-18T22:41:39.066Z",
+    "originalVersion": "19.2.6",
+    "processedAt": "2026-09-06T00:59:51.663Z",
     "smokeTest": "failed"
   }
 }

package/react-konva.d.ts

@@ -1 +0,0 @@
-export * from './ReactKonvaCore';