react-konva - npm Package Compare versions

Comparing version 17.0.2-6 to 18.0.0-0

es/makeUpdates.js

 import { Konva } from 'konva/lib/Global';
-
-var propsToSkip = {
-  children: true,
-  ref: true,
-  key: true,
-  style: true,
-  forwardedRef: true,
-  unstable_applyCache: true,
-  unstable_applyDrawHitFromCache: true
+const propsToSkip = {
+    children: true,
+    ref: true,
+    key: true,
+    style: true,
+    forwardedRef: true,
+    unstable_applyCache: true,
+    unstable_applyDrawHitFromCache: true,
 };
-
-var zIndexWarningShowed = false;
-var dragWarningShowed = false;
-
-export var EVENTS_NAMESPACE = '.react-konva-event';
-
-var useStrictMode = false;
+let zIndexWarningShowed = false;
+let dragWarningShowed = false;
+export const EVENTS_NAMESPACE = '.react-konva-event';
+let useStrictMode = false;
 export function toggleStrictMode(value) {
-  useStrictMode = value;
+    useStrictMode = value;
 }
-
-var DRAGGABLE_WARNING = 'ReactKonva: You have a Konva node with draggable = true and position defined but no onDragMove or onDragEnd events are handled.\nPosition of a node will be changed during drag&drop, so you should update state of the react app as well.\nConsider to add onDragMove or onDragEnd events.\nFor more info see: https://github.com/konvajs/react-konva/issues/256\n';
-
-var Z_INDEX_WARNING = 'ReactKonva: You are using "zIndex" attribute for a Konva node.\nreact-konva may get confused with ordering. Just define correct order of elements in your render function of a component.\nFor more info see: https://github.com/konvajs/react-konva/issues/194\n';
-
-var EMPTY_PROPS = {};
-
-export function applyNodeProps(instance, props) {
-  var oldProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : EMPTY_PROPS;
-
-  if (props === oldProps) {
-    console.error('same props');
-  }
-  // don't use zIndex in react-konva
-  if (!zIndexWarningShowed && 'zIndex' in props) {
-    console.warn(Z_INDEX_WARNING);
-    zIndexWarningShowed = true;
-  }
-
-  // check correct draggable usage
-  if (!dragWarningShowed && props.draggable) {
-    var hasPosition = props.x !== undefined || props.y !== undefined;
-    var hasEvents = props.onDragEnd || props.onDragMove;
-    if (hasPosition && !hasEvents) {
-      console.warn(DRAGGABLE_WARNING);
-      dragWarningShowed = true;
+const DRAGGABLE_WARNING = `ReactKonva: You have a Konva node with draggable = true and position defined but no onDragMove or onDragEnd events are handled.
+Position of a node will be changed during drag&drop, so you should update state of the react app as well.
+Consider to add onDragMove or onDragEnd events.
+For more info see: https://github.com/konvajs/react-konva/issues/256
+`;
+const Z_INDEX_WARNING = `ReactKonva: You are using "zIndex" attribute for a Konva node.
+react-konva may get confused with ordering. Just define correct order of elements in your render function of a component.
+For more info see: https://github.com/konvajs/react-konva/issues/194
+`;
+const EMPTY_PROPS = {};
+export function applyNodeProps(instance, props, oldProps = EMPTY_PROPS) {
+    if (props === oldProps) {
+        console.error('same props');
     }
-  }
-
-  // check old props
-  // we need to unset properties that are not in new props
-  // and remove all events
-  for (var key in oldProps) {
-    if (propsToSkip[key]) {
-      continue;
+    // don't use zIndex in react-konva
+    if (!zIndexWarningShowed && 'zIndex' in props) {
+        console.warn(Z_INDEX_WARNING);
+        zIndexWarningShowed = true;
     }
-    var isEvent = key.slice(0, 2) === 'on';
-    var propChanged = oldProps[key] !== props[key];
-
-    // if that is a changed event, we need to remvoe it
-    if (isEvent && propChanged) {
-      var eventName = key.substr(2).toLowerCase();
-      if (eventName.substr(0, 7) === 'content') {
-        eventName = 'content' + eventName.substr(7, 1).toUpperCase() + eventName.substr(8);
-      }
-      instance.off(eventName, oldProps[key]);
+    // check correct draggable usage
+    if (!dragWarningShowed && props.draggable) {
+        var hasPosition = props.x !== undefined || props.y !== undefined;
+        var hasEvents = props.onDragEnd || props.onDragMove;
+        if (hasPosition && !hasEvents) {
+            console.warn(DRAGGABLE_WARNING);
+            dragWarningShowed = true;
+        }
     }
-    var toRemove = !props.hasOwnProperty(key);
-    if (toRemove) {
-      instance.setAttr(key, undefined);
+    // check old props
+    // we need to unset properties that are not in new props
+    // and remove all events
+    for (var key in oldProps) {
+        if (propsToSkip[key]) {
+            continue;
+        }
+        var isEvent = key.slice(0, 2) === 'on';
+        var propChanged = oldProps[key] !== props[key];
+        // if that is a changed event, we need to remvoe it
+        if (isEvent && propChanged) {
+            var eventName = key.substr(2).toLowerCase();
+            if (eventName.substr(0, 7) === 'content') {
+                eventName =
+                    'content' +
+                        eventName.substr(7, 1).toUpperCase() +
+                        eventName.substr(8);
+            }
+            instance.off(eventName, oldProps[key]);
+        }
+        var toRemove = !props.hasOwnProperty(key);
+        if (toRemove) {
+            instance.setAttr(key, undefined);
+        }
     }
-  }
-
-  var strictUpdate = useStrictMode || props._useStrictMode;
-  var updatedProps = {};
-  var hasUpdates = false;
-
-  var newEvents = {};
-
-  for (var key in props) {
-    if (propsToSkip[key]) {
-      continue;
+    var strictUpdate = useStrictMode || props._useStrictMode;
+    var updatedProps = {};
+    var hasUpdates = false;
+    const newEvents = {};
+    for (var key in props) {
+        if (propsToSkip[key]) {
+            continue;
+        }
+        var isEvent = key.slice(0, 2) === 'on';
+        var toAdd = oldProps[key] !== props[key];
+        if (isEvent && toAdd) {
+            var eventName = key.substr(2).toLowerCase();
+            if (eventName.substr(0, 7) === 'content') {
+                eventName =
+                    'content' +
+                        eventName.substr(7, 1).toUpperCase() +
+                        eventName.substr(8);
+            }
+            // check that event is not undefined
+            if (props[key]) {
+                newEvents[eventName] = props[key];
+            }
+        }
+        if (!isEvent &&
+            (props[key] !== oldProps[key] ||
+                (strictUpdate && props[key] !== instance.getAttr(key)))) {
+            hasUpdates = true;
+            updatedProps[key] = props[key];
+        }
     }
-    var isEvent = key.slice(0, 2) === 'on';
-    var toAdd = oldProps[key] !== props[key];
-    if (isEvent && toAdd) {
-      var eventName = key.substr(2).toLowerCase();
-      if (eventName.substr(0, 7) === 'content') {
-        eventName = 'content' + eventName.substr(7, 1).toUpperCase() + eventName.substr(8);
-      }
-      // check that event is not undefined
-      if (props[key]) {
-        newEvents[eventName] = props[key];
-      }
+    if (hasUpdates) {
+        instance.setAttrs(updatedProps);
+        updatePicture(instance);
     }
-    if (!isEvent && (props[key] !== oldProps[key] || strictUpdate && props[key] !== instance.getAttr(key))) {
-      hasUpdates = true;
-      updatedProps[key] = props[key];
+    // subscribe to events AFTER we set attrs
+    // we need it to fix https://github.com/konvajs/react-konva/issues/471
+    // settings attrs may add events. Like "draggable: true" will add "mousedown" listener
+    for (var eventName in newEvents) {
+        instance.on(eventName + EVENTS_NAMESPACE, newEvents[eventName]);
     }
-  }
-
-  if (hasUpdates) {
-    instance.setAttrs(updatedProps);
-    updatePicture(instance);
-  }
-
-  // subscribe to events AFTER we set attrs
-  // we need it to fix https://github.com/konvajs/react-konva/issues/471
-  // settings attrs may add events. Like "draggable: true" will add "mousedown" listener
-  for (var eventName in newEvents) {
-    instance.on(eventName + EVENTS_NAMESPACE, newEvents[eventName]);
-  }
 }
-
 export function updatePicture(node) {
-  if (!Konva.autoDrawEnabled) {
-    var drawingNode = node.getLayer() || node.getStage();
-    drawingNode && drawingNode.batchDraw();
-  }
-}
+    if (!Konva.autoDrawEnabled) {
+        var drawingNode = node.getLayer() || node.getStage();
+        drawingNode && drawingNode.batchDraw();
+    }
+}

es/ReactKonva.js

@@ -9,4 +9,3 @@ /**
 'use strict';
-
 import 'konva';
-export * from './ReactKonvaCore';
+export * from './ReactKonvaCore';

es/ReactKonvaCore.d.ts

@@ -37,3 +37,3 @@ // special file for minimal import
   // component type.
-> extends React.SFC<Props & KonvaNodeEvents & React.ClassAttributes<Node>> {
+> extends React.FC<Props & KonvaNodeEvents & React.ClassAttributes<Node>> {
   getPublicInstance(): Node;
@@ -40,0 +40,0 @@ getNativeNode(): Node;

es/ReactKonvaCore.js

@@ -9,116 +9,97 @@ /**
 'use strict';
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 import React from 'react';
 import Konva from 'konva/lib/Core';
 import ReactFiberReconciler from 'react-reconciler';
+import { LegacyRoot } from 'react-reconciler/constants';
 import * as HostConfig from './ReactKonvaHostConfig';
 import { applyNodeProps, toggleStrictMode } from './makeUpdates';
-
 function usePrevious(value) {
-  var ref = React.useRef();
-  React.useLayoutEffect(function () {
-    ref.current = value;
-  });
-  return ref.current;
+    const ref = React.useRef();
+    React.useLayoutEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
 }
-
-var StageWrap = function StageWrap(props) {
-  var container = React.useRef();
-  var stage = React.useRef();
-  var fiberRef = React.useRef();
-
-  var oldProps = usePrevious(props);
-
-  var _setRef = function _setRef(stage) {
-    var forwardedRef = props.forwardedRef;
-
-    if (!forwardedRef) {
-      return;
-    }
-    if (typeof forwardedRef === 'function') {
-      forwardedRef(stage);
-    } else {
-      forwardedRef.current = stage;
-    }
-  };
-
-  React.useLayoutEffect(function () {
-    stage.current = new Konva.Stage({
-      width: props.width,
-      height: props.height,
-      container: container.current
+const StageWrap = (props) => {
+    const container = React.useRef();
+    const stage = React.useRef();
+    const fiberRef = React.useRef();
+    const oldProps = usePrevious(props);
+    const _setRef = (stage) => {
+        const { forwardedRef } = props;
+        if (!forwardedRef) {
+            return;
+        }
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(stage);
+        }
+        else {
+            forwardedRef.current = stage;
+        }
+    };
+    React.useLayoutEffect(() => {
+        stage.current = new Konva.Stage({
+            width: props.width,
+            height: props.height,
+            container: container.current,
+        });
+        _setRef(stage.current);
+        fiberRef.current = KonvaRenderer.createContainer(stage.current, LegacyRoot, false, null);
+        KonvaRenderer.updateContainer(props.children, fiberRef.current);
+        return () => {
+            if (!Konva.isBrowser) {
+                return;
+            }
+            _setRef(null);
+            KonvaRenderer.updateContainer(null, fiberRef.current, null);
+            stage.current.destroy();
+        };
+    }, []);
+    React.useLayoutEffect(() => {
+        _setRef(stage.current);
+        applyNodeProps(stage.current, props, oldProps);
+        KonvaRenderer.updateContainer(props.children, fiberRef.current, null);
     });
-
-    _setRef(stage.current);
-
-    fiberRef.current = KonvaRenderer.createContainer(stage.current);
-    KonvaRenderer.updateContainer(props.children, fiberRef.current);
-
-    return function () {
-      if (!Konva.isBrowser) {
-        return;
-      }
-      _setRef(null);
-      KonvaRenderer.updateContainer(null, fiberRef.current, null);
-      stage.current.destroy();
-    };
-  }, []);
-
-  React.useLayoutEffect(function () {
-    _setRef(stage.current);
-    applyNodeProps(stage.current, props, oldProps);
-    KonvaRenderer.updateContainer(props.children, fiberRef.current, null);
-  });
-
-  return React.createElement('div', {
-    ref: container,
-    accessKey: props.accessKey,
-    className: props.className,
-    role: props.role,
-    style: props.style,
-    tabIndex: props.tabIndex,
-    title: props.title
-  });
+    return React.createElement('div', {
+        ref: container,
+        accessKey: props.accessKey,
+        className: props.className,
+        role: props.role,
+        style: props.style,
+        tabIndex: props.tabIndex,
+        title: props.title,
+    });
 };
-
-export var Layer = 'Layer';
-export var FastLayer = 'FastLayer';
-export var Group = 'Group';
-export var Label = 'Label';
-export var Rect = 'Rect';
-export var Circle = 'Circle';
-export var Ellipse = 'Ellipse';
-export var Wedge = 'Wedge';
-export var Line = 'Line';
-export var Sprite = 'Sprite';
-export var Image = 'Image';
-export var Text = 'Text';
-export var TextPath = 'TextPath';
-export var Star = 'Star';
-export var Ring = 'Ring';
-export var Arc = 'Arc';
-export var Tag = 'Tag';
-export var Path = 'Path';
-export var RegularPolygon = 'RegularPolygon';
-export var Arrow = 'Arrow';
-export var Shape = 'Shape';
-export var Transformer = 'Transformer';
-
-export var KonvaRenderer = ReactFiberReconciler(HostConfig);
-
+export const Layer = 'Layer';
+export const FastLayer = 'FastLayer';
+export const Group = 'Group';
+export const Label = 'Label';
+export const Rect = 'Rect';
+export const Circle = 'Circle';
+export const Ellipse = 'Ellipse';
+export const Wedge = 'Wedge';
+export const Line = 'Line';
+export const Sprite = 'Sprite';
+export const Image = 'Image';
+export const Text = 'Text';
+export const TextPath = 'TextPath';
+export const Star = 'Star';
+export const Ring = 'Ring';
+export const Arc = 'Arc';
+export const Tag = 'Tag';
+export const Path = 'Path';
+export const RegularPolygon = 'RegularPolygon';
+export const Arrow = 'Arrow';
+export const Shape = 'Shape';
+export const Transformer = 'Transformer';
+export const KonvaRenderer = ReactFiberReconciler(HostConfig);
 KonvaRenderer.injectIntoDevTools({
-  findHostInstanceByFiber: function findHostInstanceByFiber() {
-    return null;
-  },
-  bundleType: process.env.NODE_ENV !== 'production' ? 1 : 0,
-  version: React.version,
-  rendererPackageName: 'react-konva'
+    findHostInstanceByFiber: () => null,
+    bundleType: process.env.NODE_ENV !== 'production' ? 1 : 0,
+    version: React.version,
+    rendererPackageName: 'react-konva',
 });
-
-export var Stage = React.forwardRef(function (props, ref) {
-  return React.createElement(StageWrap, _extends({}, props, { forwardedRef: ref }));
+export const Stage = React.forwardRef((props, ref) => {
+    return React.createElement(StageWrap, { ...props, forwardedRef: ref });
 });
-
-export var useStrictMode = toggleStrictMode;
+export const useStrictMode = toggleStrictMode;

es/ReactKonvaHostConfig.js

 import Konva from 'konva/lib/Core';
 import { applyNodeProps, updatePicture, EVENTS_NAMESPACE } from './makeUpdates';
-
-export { unstable_now as now, unstable_IdlePriority as idlePriority, unstable_runWithPriority as run } from 'scheduler';
-
-var NO_CONTEXT = {};
-var UPDATE_SIGNAL = {};
-
+export { unstable_now as now, unstable_IdlePriority as idlePriority, unstable_runWithPriority as run, } from 'scheduler';
+import { DefaultEventPriority } from 'react-reconciler/constants';
+const NO_CONTEXT = {};
+const UPDATE_SIGNAL = {};
 // for react-spring capability
 Konva.Node.prototype._applyProps = applyNodeProps;
-
 export function appendInitialChild(parentInstance, child) {
-  if (typeof child === 'string') {
-    // Noop for string children of Text (eg <Text>foo</Text>)
-    console.error('Do not use plain text as child of Konva.Node. You are using text: ' + child);
-    return;
-  }
-
-  parentInstance.add(child);
-
-  updatePicture(parentInstance);
+    if (typeof child === 'string') {
+        // Noop for string children of Text (eg <Text>foo</Text>)
+        console.error(`Do not use plain text as child of Konva.Node. You are using text: ${child}`);
+        return;
+    }
+    parentInstance.add(child);
+    updatePicture(parentInstance);
 }
-
 export function createInstance(type, props, internalInstanceHandle) {
-  var NodeClass = Konva[type];
-  if (!NodeClass) {
-    console.error('Konva has no node with the type ' + type + '. Group will be used instead. If you use minimal version of react-konva, just import required nodes into Konva: "import "konva/lib/shapes/' + type + '"  If you want to render DOM elements as part of canvas tree take a look into this demo: https://konvajs.github.io/docs/react/DOM_Portal.html');
-    NodeClass = Konva.Group;
-  }
-
-  // we need to split props into events and non events
-  // we we can pass non events into constructor directly
-  // that way the performance should be better
-  // we we apply change "applyNodeProps"
-  // then it will trigger change events on first run
-  // but we don't need them!
-  var propsWithoutEvents = {};
-  var propsWithOnlyEvents = {};
-
-  for (var key in props) {
-    var isEvent = key.slice(0, 2) === 'on';
-    if (isEvent) {
-      propsWithOnlyEvents[key] = props[key];
-    } else {
-      propsWithoutEvents[key] = props[key];
+    let NodeClass = Konva[type];
+    if (!NodeClass) {
+        console.error(`Konva has no node with the type ${type}. Group will be used instead. If you use minimal version of react-konva, just import required nodes into Konva: "import "konva/lib/shapes/${type}"  If you want to render DOM elements as part of canvas tree take a look into this demo: https://konvajs.github.io/docs/react/DOM_Portal.html`);
+        NodeClass = Konva.Group;
     }
-  }
-
-  var instance = new NodeClass(propsWithoutEvents);
-
-  applyNodeProps(instance, propsWithOnlyEvents);
-
-  return instance;
+    // we need to split props into events and non events
+    // we we can pass non events into constructor directly
+    // that way the performance should be better
+    // we we apply change "applyNodeProps"
+    // then it will trigger change events on first run
+    // but we don't need them!
+    const propsWithoutEvents = {};
+    const propsWithOnlyEvents = {};
+    for (var key in props) {
+        var isEvent = key.slice(0, 2) === 'on';
+        if (isEvent) {
+            propsWithOnlyEvents[key] = props[key];
+        }
+        else {
+            propsWithoutEvents[key] = props[key];
+        }
+    }
+    const instance = new NodeClass(propsWithoutEvents);
+    applyNodeProps(instance, propsWithOnlyEvents);
+    return instance;
 }
-
 export function createTextInstance(text, rootContainerInstance, internalInstanceHandle) {
-  console.error('Text components are not supported for now in ReactKonva. Your text is: "' + text + '"');
+    console.error(`Text components are not supported for now in ReactKonva. Your text is: "${text}"`);
 }
-
 export function finalizeInitialChildren(domElement, type, props) {
-  return false;
+    return false;
 }
-
 export function getPublicInstance(instance) {
-  return instance;
+    return instance;
 }
-
 export function prepareForCommit() {
-  return null;
+    return null;
 }
-
 export function preparePortalMount() {
-  return null;
+    return null;
 }
-
 export function prepareUpdate(domElement, type, oldProps, newProps) {
-  return UPDATE_SIGNAL;
+    return UPDATE_SIGNAL;
 }
-
 export function resetAfterCommit() {
-  // Noop
+    // Noop
 }
-
 export function resetTextContent(domElement) {
-  // Noop
+    // Noop
 }
-
 export function shouldDeprioritizeSubtree(type, props) {
-  return false;
+    return false;
 }
-
 export function getRootHostContext() {
-  return NO_CONTEXT;
+    return NO_CONTEXT;
 }
-
 export function getChildHostContext() {
-  return NO_CONTEXT;
+    return NO_CONTEXT;
 }
-
-export var scheduleTimeout = setTimeout;
-export var cancelTimeout = clearTimeout;
-export var noTimeout = -1;
+export const scheduleTimeout = setTimeout;
+export const cancelTimeout = clearTimeout;
+export const noTimeout = -1;
 // export const schedulePassiveEffects = scheduleDeferredCallback;
 // export const cancelPassiveEffects = cancelDeferredCallback;
-
 export function shouldSetTextContent(type, props) {
-  return false;
+    return false;
 }
-
 // The Konva renderer is secondary to the React DOM renderer.
-export var isPrimaryRenderer = false;
-export var warnsIfNotActing = true;
-export var supportsMutation = true;
-
+export const isPrimaryRenderer = false;
+export const warnsIfNotActing = true;
+export const supportsMutation = true;
 export function appendChild(parentInstance, child) {
-  if (child.parent === parentInstance) {
-    child.moveToTop();
-  } else {
-    parentInstance.add(child);
-  }
-
-  updatePicture(parentInstance);
+    if (child.parent === parentInstance) {
+        child.moveToTop();
+    }
+    else {
+        parentInstance.add(child);
+    }
+    updatePicture(parentInstance);
 }
-
 export function appendChildToContainer(parentInstance, child) {
-  if (child.parent === parentInstance) {
-    child.moveToTop();
-  } else {
-    parentInstance.add(child);
-  }
-  updatePicture(parentInstance);
+    if (child.parent === parentInstance) {
+        child.moveToTop();
+    }
+    else {
+        parentInstance.add(child);
+    }
+    updatePicture(parentInstance);
 }
-
 export function insertBefore(parentInstance, child, beforeChild) {
-  // child._remove() will not stop dragging
-  // but child.remove() will stop it, but we don't need it
-  // removing will reset zIndexes
-  child._remove();
-  parentInstance.add(child);
-  child.setZIndex(beforeChild.getZIndex());
-  updatePicture(parentInstance);
+    // child._remove() will not stop dragging
+    // but child.remove() will stop it, but we don't need it
+    // removing will reset zIndexes
+    child._remove();
+    parentInstance.add(child);
+    child.setZIndex(beforeChild.getZIndex());
+    updatePicture(parentInstance);
 }
-
 export function insertInContainerBefore(parentInstance, child, beforeChild) {
-  insertBefore(parentInstance, child, beforeChild);
+    insertBefore(parentInstance, child, beforeChild);
 }
-
 export function removeChild(parentInstance, child) {
-  child.destroy();
-  child.off(EVENTS_NAMESPACE);
-  updatePicture(parentInstance);
+    child.destroy();
+    child.off(EVENTS_NAMESPACE);
+    updatePicture(parentInstance);
 }
-
 export function removeChildFromContainer(parentInstance, child) {
-  child.destroy();
-  child.off(EVENTS_NAMESPACE);
-  updatePicture(parentInstance);
+    child.destroy();
+    child.off(EVENTS_NAMESPACE);
+    updatePicture(parentInstance);
 }
-
 export function commitTextUpdate(textInstance, oldText, newText) {
-  console.error('Text components are not yet supported in ReactKonva. You text is: "' + newText + '"');
+    console.error(`Text components are not yet supported in ReactKonva. You text is: "${newText}"`);
 }
-
 export function commitMount(instance, type, newProps) {
-  // Noop
+    // Noop
 }
-
 export function commitUpdate(instance, updatePayload, type, oldProps, newProps) {
-  applyNodeProps(instance, newProps, oldProps);
+    applyNodeProps(instance, newProps, oldProps);
 }
-
 export function hideInstance(instance) {
-  instance.hide();
-  updatePicture(instance);
+    instance.hide();
+    updatePicture(instance);
 }
-
 export function hideTextInstance(textInstance) {
-  // Noop
+    // Noop
 }
-
 export function unhideInstance(instance, props) {
-  if (props.visible == null || props.visible) {
-    instance.show();
-  }
+    if (props.visible == null || props.visible) {
+        instance.show();
+    }
 }
-
 export function unhideTextInstance(textInstance, text) {
-  // Noop
+    // Noop
 }
-
 export function clearContainer(container) {
-  // Noop
-}
+    // Noop
+}
+export function detachDeletedInstance() { }
+export const getCurrentEventPriority = () => DefaultEventPriority;

lib/makeUpdates.js

@@ -1,129 +0,123 @@
-'use strict';
-
-exports.__esModule = true;
-exports.EVENTS_NAMESPACE = undefined;
-exports.toggleStrictMode = toggleStrictMode;
-exports.applyNodeProps = applyNodeProps;
-exports.updatePicture = updatePicture;
-
-var _Global = require('konva/lib/Global');
-
-var propsToSkip = {
-  children: true,
-  ref: true,
-  key: true,
-  style: true,
-  forwardedRef: true,
-  unstable_applyCache: true,
-  unstable_applyDrawHitFromCache: true
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updatePicture = exports.applyNodeProps = exports.toggleStrictMode = exports.EVENTS_NAMESPACE = void 0;
+const Global_1 = require("konva/lib/Global");
+const propsToSkip = {
+    children: true,
+    ref: true,
+    key: true,
+    style: true,
+    forwardedRef: true,
+    unstable_applyCache: true,
+    unstable_applyDrawHitFromCache: true,
 };
-
-var zIndexWarningShowed = false;
-var dragWarningShowed = false;
-
-var EVENTS_NAMESPACE = exports.EVENTS_NAMESPACE = '.react-konva-event';
-
-var useStrictMode = false;
+let zIndexWarningShowed = false;
+let dragWarningShowed = false;
+exports.EVENTS_NAMESPACE = '.react-konva-event';
+let useStrictMode = false;
 function toggleStrictMode(value) {
-  useStrictMode = value;
+    useStrictMode = value;
 }
-
-var DRAGGABLE_WARNING = 'ReactKonva: You have a Konva node with draggable = true and position defined but no onDragMove or onDragEnd events are handled.\nPosition of a node will be changed during drag&drop, so you should update state of the react app as well.\nConsider to add onDragMove or onDragEnd events.\nFor more info see: https://github.com/konvajs/react-konva/issues/256\n';
-
-var Z_INDEX_WARNING = 'ReactKonva: You are using "zIndex" attribute for a Konva node.\nreact-konva may get confused with ordering. Just define correct order of elements in your render function of a component.\nFor more info see: https://github.com/konvajs/react-konva/issues/194\n';
-
-var EMPTY_PROPS = {};
-
-function applyNodeProps(instance, props) {
-  var oldProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : EMPTY_PROPS;
-
-  if (props === oldProps) {
-    console.error('same props');
-  }
-  // don't use zIndex in react-konva
-  if (!zIndexWarningShowed && 'zIndex' in props) {
-    console.warn(Z_INDEX_WARNING);
-    zIndexWarningShowed = true;
-  }
-
-  // check correct draggable usage
-  if (!dragWarningShowed && props.draggable) {
-    var hasPosition = props.x !== undefined || props.y !== undefined;
-    var hasEvents = props.onDragEnd || props.onDragMove;
-    if (hasPosition && !hasEvents) {
-      console.warn(DRAGGABLE_WARNING);
-      dragWarningShowed = true;
+exports.toggleStrictMode = toggleStrictMode;
+const DRAGGABLE_WARNING = `ReactKonva: You have a Konva node with draggable = true and position defined but no onDragMove or onDragEnd events are handled.
+Position of a node will be changed during drag&drop, so you should update state of the react app as well.
+Consider to add onDragMove or onDragEnd events.
+For more info see: https://github.com/konvajs/react-konva/issues/256
+`;
+const Z_INDEX_WARNING = `ReactKonva: You are using "zIndex" attribute for a Konva node.
+react-konva may get confused with ordering. Just define correct order of elements in your render function of a component.
+For more info see: https://github.com/konvajs/react-konva/issues/194
+`;
+const EMPTY_PROPS = {};
+function applyNodeProps(instance, props, oldProps = EMPTY_PROPS) {
+    if (props === oldProps) {
+        console.error('same props');
     }
-  }
-
-  // check old props
-  // we need to unset properties that are not in new props
-  // and remove all events
-  for (var key in oldProps) {
-    if (propsToSkip[key]) {
-      continue;
+    // don't use zIndex in react-konva
+    if (!zIndexWarningShowed && 'zIndex' in props) {
+        console.warn(Z_INDEX_WARNING);
+        zIndexWarningShowed = true;
     }
-    var isEvent = key.slice(0, 2) === 'on';
-    var propChanged = oldProps[key] !== props[key];
-
-    // if that is a changed event, we need to remvoe it
-    if (isEvent && propChanged) {
-      var eventName = key.substr(2).toLowerCase();
-      if (eventName.substr(0, 7) === 'content') {
-        eventName = 'content' + eventName.substr(7, 1).toUpperCase() + eventName.substr(8);
-      }
-      instance.off(eventName, oldProps[key]);
+    // check correct draggable usage
+    if (!dragWarningShowed && props.draggable) {
+        var hasPosition = props.x !== undefined || props.y !== undefined;
+        var hasEvents = props.onDragEnd || props.onDragMove;
+        if (hasPosition && !hasEvents) {
+            console.warn(DRAGGABLE_WARNING);
+            dragWarningShowed = true;
+        }
     }
-    var toRemove = !props.hasOwnProperty(key);
-    if (toRemove) {
-      instance.setAttr(key, undefined);
+    // check old props
+    // we need to unset properties that are not in new props
+    // and remove all events
+    for (var key in oldProps) {
+        if (propsToSkip[key]) {
+            continue;
+        }
+        var isEvent = key.slice(0, 2) === 'on';
+        var propChanged = oldProps[key] !== props[key];
+        // if that is a changed event, we need to remvoe it
+        if (isEvent && propChanged) {
+            var eventName = key.substr(2).toLowerCase();
+            if (eventName.substr(0, 7) === 'content') {
+                eventName =
+                    'content' +
+                        eventName.substr(7, 1).toUpperCase() +
+                        eventName.substr(8);
+            }
+            instance.off(eventName, oldProps[key]);
+        }
+        var toRemove = !props.hasOwnProperty(key);
+        if (toRemove) {
+            instance.setAttr(key, undefined);
+        }
     }
-  }
-
-  var strictUpdate = useStrictMode || props._useStrictMode;
-  var updatedProps = {};
-  var hasUpdates = false;
-
-  var newEvents = {};
-
-  for (var key in props) {
-    if (propsToSkip[key]) {
-      continue;
+    var strictUpdate = useStrictMode || props._useStrictMode;
+    var updatedProps = {};
+    var hasUpdates = false;
+    const newEvents = {};
+    for (var key in props) {
+        if (propsToSkip[key]) {
+            continue;
+        }
+        var isEvent = key.slice(0, 2) === 'on';
+        var toAdd = oldProps[key] !== props[key];
+        if (isEvent && toAdd) {
+            var eventName = key.substr(2).toLowerCase();
+            if (eventName.substr(0, 7) === 'content') {
+                eventName =
+                    'content' +
+                        eventName.substr(7, 1).toUpperCase() +
+                        eventName.substr(8);
+            }
+            // check that event is not undefined
+            if (props[key]) {
+                newEvents[eventName] = props[key];
+            }
+        }
+        if (!isEvent &&
+            (props[key] !== oldProps[key] ||
+                (strictUpdate && props[key] !== instance.getAttr(key)))) {
+            hasUpdates = true;
+            updatedProps[key] = props[key];
+        }
     }
-    var isEvent = key.slice(0, 2) === 'on';
-    var toAdd = oldProps[key] !== props[key];
-    if (isEvent && toAdd) {
-      var eventName = key.substr(2).toLowerCase();
-      if (eventName.substr(0, 7) === 'content') {
-        eventName = 'content' + eventName.substr(7, 1).toUpperCase() + eventName.substr(8);
-      }
-      // check that event is not undefined
-      if (props[key]) {
-        newEvents[eventName] = props[key];
-      }
+    if (hasUpdates) {
+        instance.setAttrs(updatedProps);
+        updatePicture(instance);
     }
-    if (!isEvent && (props[key] !== oldProps[key] || strictUpdate && props[key] !== instance.getAttr(key))) {
-      hasUpdates = true;
-      updatedProps[key] = props[key];
+    // subscribe to events AFTER we set attrs
+    // we need it to fix https://github.com/konvajs/react-konva/issues/471
+    // settings attrs may add events. Like "draggable: true" will add "mousedown" listener
+    for (var eventName in newEvents) {
+        instance.on(eventName + exports.EVENTS_NAMESPACE, newEvents[eventName]);
     }
-  }
-
-  if (hasUpdates) {
-    instance.setAttrs(updatedProps);
-    updatePicture(instance);
-  }
-
-  // subscribe to events AFTER we set attrs
-  // we need it to fix https://github.com/konvajs/react-konva/issues/471
-  // settings attrs may add events. Like "draggable: true" will add "mousedown" listener
-  for (var eventName in newEvents) {
-    instance.on(eventName + EVENTS_NAMESPACE, newEvents[eventName]);
-  }
 }
-
+exports.applyNodeProps = applyNodeProps;
 function updatePicture(node) {
-  if (!_Global.Konva.autoDrawEnabled) {
-    var drawingNode = node.getLayer() || node.getStage();
-    drawingNode && drawingNode.batchDraw();
-  }
-}
+    if (!Global_1.Konva.autoDrawEnabled) {
+        var drawingNode = node.getLayer() || node.getStage();
+        drawingNode && drawingNode.batchDraw();
+    }
+}
+exports.updatePicture = updatePicture;

lib/ReactKonva.js

@@ -9,17 +9,18 @@ /**
 'use strict';
-
-exports.__esModule = true;
-
-var _ReactKonvaCore = require('./ReactKonvaCore');
-
-Object.keys(_ReactKonvaCore).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _ReactKonvaCore[key];
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
     }
-  });
-});
-
-require('konva');
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("konva");
+__exportStar(require("./ReactKonvaCore"), exports);

lib/ReactKonvaCore.d.ts

@@ -37,3 +37,3 @@ // special file for minimal import
   // component type.
-> extends React.SFC<Props & KonvaNodeEvents & React.ClassAttributes<Node>> {
+> extends React.FC<Props & KonvaNodeEvents & React.ClassAttributes<Node>> {
   getPublicInstance(): Node;
@@ -40,0 +40,0 @@ getNativeNode(): Node;

lib/ReactKonvaCore.js

@@ -9,135 +9,125 @@ /**
 'use strict';
-
-exports.__esModule = true;
-exports.useStrictMode = exports.Stage = exports.KonvaRenderer = exports.Transformer = exports.Shape = exports.Arrow = exports.RegularPolygon = exports.Path = exports.Tag = exports.Arc = exports.Ring = exports.Star = exports.TextPath = exports.Text = exports.Image = exports.Sprite = exports.Line = exports.Wedge = exports.Ellipse = exports.Circle = exports.Rect = exports.Label = exports.Group = exports.FastLayer = exports.Layer = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _Core = require('konva/lib/Core');
-
-var _Core2 = _interopRequireDefault(_Core);
-
-var _reactReconciler = require('react-reconciler');
-
-var _reactReconciler2 = _interopRequireDefault(_reactReconciler);
-
-var _ReactKonvaHostConfig = require('./ReactKonvaHostConfig');
-
-var HostConfig = _interopRequireWildcard(_ReactKonvaHostConfig);
-
-var _makeUpdates = require('./makeUpdates');
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStrictMode = exports.Stage = exports.KonvaRenderer = exports.Transformer = exports.Shape = exports.Arrow = exports.RegularPolygon = exports.Path = exports.Tag = exports.Arc = exports.Ring = exports.Star = exports.TextPath = exports.Text = exports.Image = exports.Sprite = exports.Line = exports.Wedge = exports.Ellipse = exports.Circle = exports.Rect = exports.Label = exports.Group = exports.FastLayer = exports.Layer = void 0;
+const react_1 = __importDefault(require("react"));
+const Core_1 = __importDefault(require("konva/lib/Core"));
+const react_reconciler_1 = __importDefault(require("react-reconciler"));
+const constants_1 = require("react-reconciler/constants");
+const HostConfig = __importStar(require("./ReactKonvaHostConfig"));
+const makeUpdates_1 = require("./makeUpdates");
 function usePrevious(value) {
-  var ref = _react2.default.useRef();
-  _react2.default.useLayoutEffect(function () {
-    ref.current = value;
-  });
-  return ref.current;
+    const ref = react_1.default.useRef();
+    react_1.default.useLayoutEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
 }
-
-var StageWrap = function StageWrap(props) {
-  var container = _react2.default.useRef();
-  var stage = _react2.default.useRef();
-  var fiberRef = _react2.default.useRef();
-
-  var oldProps = usePrevious(props);
-
-  var _setRef = function _setRef(stage) {
-    var forwardedRef = props.forwardedRef;
-
-    if (!forwardedRef) {
-      return;
-    }
-    if (typeof forwardedRef === 'function') {
-      forwardedRef(stage);
-    } else {
-      forwardedRef.current = stage;
-    }
-  };
-
-  _react2.default.useLayoutEffect(function () {
-    stage.current = new _Core2.default.Stage({
-      width: props.width,
-      height: props.height,
-      container: container.current
+const StageWrap = (props) => {
+    const container = react_1.default.useRef();
+    const stage = react_1.default.useRef();
+    const fiberRef = react_1.default.useRef();
+    const oldProps = usePrevious(props);
+    const _setRef = (stage) => {
+        const { forwardedRef } = props;
+        if (!forwardedRef) {
+            return;
+        }
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(stage);
+        }
+        else {
+            forwardedRef.current = stage;
+        }
+    };
+    react_1.default.useLayoutEffect(() => {
+        stage.current = new Core_1.default.Stage({
+            width: props.width,
+            height: props.height,
+            container: container.current,
+        });
+        _setRef(stage.current);
+        fiberRef.current = exports.KonvaRenderer.createContainer(stage.current, constants_1.LegacyRoot, false, null);
+        exports.KonvaRenderer.updateContainer(props.children, fiberRef.current);
+        return () => {
+            if (!Core_1.default.isBrowser) {
+                return;
+            }
+            _setRef(null);
+            exports.KonvaRenderer.updateContainer(null, fiberRef.current, null);
+            stage.current.destroy();
+        };
+    }, []);
+    react_1.default.useLayoutEffect(() => {
+        _setRef(stage.current);
+        (0, makeUpdates_1.applyNodeProps)(stage.current, props, oldProps);
+        exports.KonvaRenderer.updateContainer(props.children, fiberRef.current, null);
     });
-
-    _setRef(stage.current);
-
-    fiberRef.current = KonvaRenderer.createContainer(stage.current);
-    KonvaRenderer.updateContainer(props.children, fiberRef.current);
-
-    return function () {
-      if (!_Core2.default.isBrowser) {
-        return;
-      }
-      _setRef(null);
-      KonvaRenderer.updateContainer(null, fiberRef.current, null);
-      stage.current.destroy();
-    };
-  }, []);
-
-  _react2.default.useLayoutEffect(function () {
-    _setRef(stage.current);
-    (0, _makeUpdates.applyNodeProps)(stage.current, props, oldProps);
-    KonvaRenderer.updateContainer(props.children, fiberRef.current, null);
-  });
-
-  return _react2.default.createElement('div', {
-    ref: container,
-    accessKey: props.accessKey,
-    className: props.className,
-    role: props.role,
-    style: props.style,
-    tabIndex: props.tabIndex,
-    title: props.title
-  });
+    return react_1.default.createElement('div', {
+        ref: container,
+        accessKey: props.accessKey,
+        className: props.className,
+        role: props.role,
+        style: props.style,
+        tabIndex: props.tabIndex,
+        title: props.title,
+    });
 };
-
-var Layer = exports.Layer = 'Layer';
-var FastLayer = exports.FastLayer = 'FastLayer';
-var Group = exports.Group = 'Group';
-var Label = exports.Label = 'Label';
-var Rect = exports.Rect = 'Rect';
-var Circle = exports.Circle = 'Circle';
-var Ellipse = exports.Ellipse = 'Ellipse';
-var Wedge = exports.Wedge = 'Wedge';
-var Line = exports.Line = 'Line';
-var Sprite = exports.Sprite = 'Sprite';
-var Image = exports.Image = 'Image';
-var Text = exports.Text = 'Text';
-var TextPath = exports.TextPath = 'TextPath';
-var Star = exports.Star = 'Star';
-var Ring = exports.Ring = 'Ring';
-var Arc = exports.Arc = 'Arc';
-var Tag = exports.Tag = 'Tag';
-var Path = exports.Path = 'Path';
-var RegularPolygon = exports.RegularPolygon = 'RegularPolygon';
-var Arrow = exports.Arrow = 'Arrow';
-var Shape = exports.Shape = 'Shape';
-var Transformer = exports.Transformer = 'Transformer';
-
-var KonvaRenderer = exports.KonvaRenderer = (0, _reactReconciler2.default)(HostConfig);
-
-KonvaRenderer.injectIntoDevTools({
-  findHostInstanceByFiber: function findHostInstanceByFiber() {
-    return null;
-  },
-  bundleType: process.env.NODE_ENV !== 'production' ? 1 : 0,
-  version: _react2.default.version,
-  rendererPackageName: 'react-konva'
+exports.Layer = 'Layer';
+exports.FastLayer = 'FastLayer';
+exports.Group = 'Group';
+exports.Label = 'Label';
+exports.Rect = 'Rect';
+exports.Circle = 'Circle';
+exports.Ellipse = 'Ellipse';
+exports.Wedge = 'Wedge';
+exports.Line = 'Line';
+exports.Sprite = 'Sprite';
+exports.Image = 'Image';
+exports.Text = 'Text';
+exports.TextPath = 'TextPath';
+exports.Star = 'Star';
+exports.Ring = 'Ring';
+exports.Arc = 'Arc';
+exports.Tag = 'Tag';
+exports.Path = 'Path';
+exports.RegularPolygon = 'RegularPolygon';
+exports.Arrow = 'Arrow';
+exports.Shape = 'Shape';
+exports.Transformer = 'Transformer';
+exports.KonvaRenderer = (0, react_reconciler_1.default)(HostConfig);
+exports.KonvaRenderer.injectIntoDevTools({
+    findHostInstanceByFiber: () => null,
+    bundleType: process.env.NODE_ENV !== 'production' ? 1 : 0,
+    version: react_1.default.version,
+    rendererPackageName: 'react-konva',
 });
-
-var Stage = exports.Stage = _react2.default.forwardRef(function (props, ref) {
-  return _react2.default.createElement(StageWrap, _extends({}, props, { forwardedRef: ref }));
+exports.Stage = react_1.default.forwardRef((props, ref) => {
+    return react_1.default.createElement(StageWrap, { ...props, forwardedRef: ref });
 });
-
-var useStrictMode = exports.useStrictMode = _makeUpdates.toggleStrictMode;
+exports.useStrictMode = makeUpdates_1.toggleStrictMode;

lib/ReactKonvaHostConfig.js

@@ -1,250 +0,197 @@
-'use strict';
-
-exports.__esModule = true;
-exports.supportsMutation = exports.warnsIfNotActing = exports.isPrimaryRenderer = exports.noTimeout = exports.cancelTimeout = exports.scheduleTimeout = exports.run = exports.idlePriority = exports.now = undefined;
-
-var _scheduler = require('scheduler');
-
-Object.defineProperty(exports, 'now', {
-  enumerable: true,
-  get: function get() {
-    return _scheduler.unstable_now;
-  }
-});
-Object.defineProperty(exports, 'idlePriority', {
-  enumerable: true,
-  get: function get() {
-    return _scheduler.unstable_IdlePriority;
-  }
-});
-Object.defineProperty(exports, 'run', {
-  enumerable: true,
-  get: function get() {
-    return _scheduler.unstable_runWithPriority;
-  }
-});
-exports.appendInitialChild = appendInitialChild;
-exports.createInstance = createInstance;
-exports.createTextInstance = createTextInstance;
-exports.finalizeInitialChildren = finalizeInitialChildren;
-exports.getPublicInstance = getPublicInstance;
-exports.prepareForCommit = prepareForCommit;
-exports.preparePortalMount = preparePortalMount;
-exports.prepareUpdate = prepareUpdate;
-exports.resetAfterCommit = resetAfterCommit;
-exports.resetTextContent = resetTextContent;
-exports.shouldDeprioritizeSubtree = shouldDeprioritizeSubtree;
-exports.getRootHostContext = getRootHostContext;
-exports.getChildHostContext = getChildHostContext;
-exports.shouldSetTextContent = shouldSetTextContent;
-exports.appendChild = appendChild;
-exports.appendChildToContainer = appendChildToContainer;
-exports.insertBefore = insertBefore;
-exports.insertInContainerBefore = insertInContainerBefore;
-exports.removeChild = removeChild;
-exports.removeChildFromContainer = removeChildFromContainer;
-exports.commitTextUpdate = commitTextUpdate;
-exports.commitMount = commitMount;
-exports.commitUpdate = commitUpdate;
-exports.hideInstance = hideInstance;
-exports.hideTextInstance = hideTextInstance;
-exports.unhideInstance = unhideInstance;
-exports.unhideTextInstance = unhideTextInstance;
-exports.clearContainer = clearContainer;
-
-var _Core = require('konva/lib/Core');
-
-var _Core2 = _interopRequireDefault(_Core);
-
-var _makeUpdates = require('./makeUpdates');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var NO_CONTEXT = {};
-var UPDATE_SIGNAL = {};
-
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCurrentEventPriority = exports.detachDeletedInstance = exports.clearContainer = exports.unhideTextInstance = exports.unhideInstance = exports.hideTextInstance = exports.hideInstance = exports.commitUpdate = exports.commitMount = exports.commitTextUpdate = exports.removeChildFromContainer = exports.removeChild = exports.insertInContainerBefore = exports.insertBefore = exports.appendChildToContainer = exports.appendChild = exports.supportsMutation = exports.warnsIfNotActing = exports.isPrimaryRenderer = exports.shouldSetTextContent = exports.noTimeout = exports.cancelTimeout = exports.scheduleTimeout = exports.getChildHostContext = exports.getRootHostContext = exports.shouldDeprioritizeSubtree = exports.resetTextContent = exports.resetAfterCommit = exports.prepareUpdate = exports.preparePortalMount = exports.prepareForCommit = exports.getPublicInstance = exports.finalizeInitialChildren = exports.createTextInstance = exports.createInstance = exports.appendInitialChild = exports.run = exports.idlePriority = exports.now = void 0;
+const Core_1 = __importDefault(require("konva/lib/Core"));
+const makeUpdates_1 = require("./makeUpdates");
+var scheduler_1 = require("scheduler");
+Object.defineProperty(exports, "now", { enumerable: true, get: function () { return scheduler_1.unstable_now; } });
+Object.defineProperty(exports, "idlePriority", { enumerable: true, get: function () { return scheduler_1.unstable_IdlePriority; } });
+Object.defineProperty(exports, "run", { enumerable: true, get: function () { return scheduler_1.unstable_runWithPriority; } });
+const constants_1 = require("react-reconciler/constants");
+const NO_CONTEXT = {};
+const UPDATE_SIGNAL = {};
 // for react-spring capability
-_Core2.default.Node.prototype._applyProps = _makeUpdates.applyNodeProps;
-
+Core_1.default.Node.prototype._applyProps = makeUpdates_1.applyNodeProps;
 function appendInitialChild(parentInstance, child) {
-  if (typeof child === 'string') {
-    // Noop for string children of Text (eg <Text>foo</Text>)
-    console.error('Do not use plain text as child of Konva.Node. You are using text: ' + child);
-    return;
-  }
-
-  parentInstance.add(child);
-
-  (0, _makeUpdates.updatePicture)(parentInstance);
+    if (typeof child === 'string') {
+        // Noop for string children of Text (eg <Text>foo</Text>)
+        console.error(`Do not use plain text as child of Konva.Node. You are using text: ${child}`);
+        return;
+    }
+    parentInstance.add(child);
+    (0, makeUpdates_1.updatePicture)(parentInstance);
 }
-
+exports.appendInitialChild = appendInitialChild;
 function createInstance(type, props, internalInstanceHandle) {
-  var NodeClass = _Core2.default[type];
-  if (!NodeClass) {
-    console.error('Konva has no node with the type ' + type + '. Group will be used instead. If you use minimal version of react-konva, just import required nodes into Konva: "import "konva/lib/shapes/' + type + '"  If you want to render DOM elements as part of canvas tree take a look into this demo: https://konvajs.github.io/docs/react/DOM_Portal.html');
-    NodeClass = _Core2.default.Group;
-  }
-
-  // we need to split props into events and non events
-  // we we can pass non events into constructor directly
-  // that way the performance should be better
-  // we we apply change "applyNodeProps"
-  // then it will trigger change events on first run
-  // but we don't need them!
-  var propsWithoutEvents = {};
-  var propsWithOnlyEvents = {};
-
-  for (var key in props) {
-    var isEvent = key.slice(0, 2) === 'on';
-    if (isEvent) {
-      propsWithOnlyEvents[key] = props[key];
-    } else {
-      propsWithoutEvents[key] = props[key];
+    let NodeClass = Core_1.default[type];
+    if (!NodeClass) {
+        console.error(`Konva has no node with the type ${type}. Group will be used instead. If you use minimal version of react-konva, just import required nodes into Konva: "import "konva/lib/shapes/${type}"  If you want to render DOM elements as part of canvas tree take a look into this demo: https://konvajs.github.io/docs/react/DOM_Portal.html`);
+        NodeClass = Core_1.default.Group;
     }
-  }
-
-  var instance = new NodeClass(propsWithoutEvents);
-
-  (0, _makeUpdates.applyNodeProps)(instance, propsWithOnlyEvents);
-
-  return instance;
+    // we need to split props into events and non events
+    // we we can pass non events into constructor directly
+    // that way the performance should be better
+    // we we apply change "applyNodeProps"
+    // then it will trigger change events on first run
+    // but we don't need them!
+    const propsWithoutEvents = {};
+    const propsWithOnlyEvents = {};
+    for (var key in props) {
+        var isEvent = key.slice(0, 2) === 'on';
+        if (isEvent) {
+            propsWithOnlyEvents[key] = props[key];
+        }
+        else {
+            propsWithoutEvents[key] = props[key];
+        }
+    }
+    const instance = new NodeClass(propsWithoutEvents);
+    (0, makeUpdates_1.applyNodeProps)(instance, propsWithOnlyEvents);
+    return instance;
 }
-
+exports.createInstance = createInstance;
 function createTextInstance(text, rootContainerInstance, internalInstanceHandle) {
-  console.error('Text components are not supported for now in ReactKonva. Your text is: "' + text + '"');
+    console.error(`Text components are not supported for now in ReactKonva. Your text is: "${text}"`);
 }
-
+exports.createTextInstance = createTextInstance;
 function finalizeInitialChildren(domElement, type, props) {
-  return false;
+    return false;
 }
-
+exports.finalizeInitialChildren = finalizeInitialChildren;
 function getPublicInstance(instance) {
-  return instance;
+    return instance;
 }
-
+exports.getPublicInstance = getPublicInstance;
 function prepareForCommit() {
-  return null;
+    return null;
 }
-
+exports.prepareForCommit = prepareForCommit;
 function preparePortalMount() {
-  return null;
+    return null;
 }
-
+exports.preparePortalMount = preparePortalMount;
 function prepareUpdate(domElement, type, oldProps, newProps) {
-  return UPDATE_SIGNAL;
+    return UPDATE_SIGNAL;
 }
-
+exports.prepareUpdate = prepareUpdate;
 function resetAfterCommit() {
-  // Noop
+    // Noop
 }
-
+exports.resetAfterCommit = resetAfterCommit;
 function resetTextContent(domElement) {
-  // Noop
+    // Noop
 }
-
+exports.resetTextContent = resetTextContent;
 function shouldDeprioritizeSubtree(type, props) {
-  return false;
+    return false;
 }
-
+exports.shouldDeprioritizeSubtree = shouldDeprioritizeSubtree;
 function getRootHostContext() {
-  return NO_CONTEXT;
+    return NO_CONTEXT;
 }
-
+exports.getRootHostContext = getRootHostContext;
 function getChildHostContext() {
-  return NO_CONTEXT;
+    return NO_CONTEXT;
 }
-
-var scheduleTimeout = exports.scheduleTimeout = setTimeout;
-var cancelTimeout = exports.cancelTimeout = clearTimeout;
-var noTimeout = exports.noTimeout = -1;
+exports.getChildHostContext = getChildHostContext;
+exports.scheduleTimeout = setTimeout;
+exports.cancelTimeout = clearTimeout;
+exports.noTimeout = -1;
 // export const schedulePassiveEffects = scheduleDeferredCallback;
 // export const cancelPassiveEffects = cancelDeferredCallback;
-
 function shouldSetTextContent(type, props) {
-  return false;
+    return false;
 }
-
+exports.shouldSetTextContent = shouldSetTextContent;
 // The Konva renderer is secondary to the React DOM renderer.
-var isPrimaryRenderer = exports.isPrimaryRenderer = false;
-var warnsIfNotActing = exports.warnsIfNotActing = true;
-var supportsMutation = exports.supportsMutation = true;
-
+exports.isPrimaryRenderer = false;
+exports.warnsIfNotActing = true;
+exports.supportsMutation = true;
 function appendChild(parentInstance, child) {
-  if (child.parent === parentInstance) {
-    child.moveToTop();
-  } else {
-    parentInstance.add(child);
-  }
-
-  (0, _makeUpdates.updatePicture)(parentInstance);
+    if (child.parent === parentInstance) {
+        child.moveToTop();
+    }
+    else {
+        parentInstance.add(child);
+    }
+    (0, makeUpdates_1.updatePicture)(parentInstance);
 }
-
+exports.appendChild = appendChild;
 function appendChildToContainer(parentInstance, child) {
-  if (child.parent === parentInstance) {
-    child.moveToTop();
-  } else {
-    parentInstance.add(child);
-  }
-  (0, _makeUpdates.updatePicture)(parentInstance);
+    if (child.parent === parentInstance) {
+        child.moveToTop();
+    }
+    else {
+        parentInstance.add(child);
+    }
+    (0, makeUpdates_1.updatePicture)(parentInstance);
 }
-
+exports.appendChildToContainer = appendChildToContainer;
 function insertBefore(parentInstance, child, beforeChild) {
-  // child._remove() will not stop dragging
-  // but child.remove() will stop it, but we don't need it
-  // removing will reset zIndexes
-  child._remove();
-  parentInstance.add(child);
-  child.setZIndex(beforeChild.getZIndex());
-  (0, _makeUpdates.updatePicture)(parentInstance);
+    // child._remove() will not stop dragging
+    // but child.remove() will stop it, but we don't need it
+    // removing will reset zIndexes
+    child._remove();
+    parentInstance.add(child);
+    child.setZIndex(beforeChild.getZIndex());
+    (0, makeUpdates_1.updatePicture)(parentInstance);
 }
-
+exports.insertBefore = insertBefore;
 function insertInContainerBefore(parentInstance, child, beforeChild) {
-  insertBefore(parentInstance, child, beforeChild);
+    insertBefore(parentInstance, child, beforeChild);
 }
-
+exports.insertInContainerBefore = insertInContainerBefore;
 function removeChild(parentInstance, child) {
-  child.destroy();
-  child.off(_makeUpdates.EVENTS_NAMESPACE);
-  (0, _makeUpdates.updatePicture)(parentInstance);
+    child.destroy();
+    child.off(makeUpdates_1.EVENTS_NAMESPACE);
+    (0, makeUpdates_1.updatePicture)(parentInstance);
 }
-
+exports.removeChild = removeChild;
 function removeChildFromContainer(parentInstance, child) {
-  child.destroy();
-  child.off(_makeUpdates.EVENTS_NAMESPACE);
-  (0, _makeUpdates.updatePicture)(parentInstance);
+    child.destroy();
+    child.off(makeUpdates_1.EVENTS_NAMESPACE);
+    (0, makeUpdates_1.updatePicture)(parentInstance);
 }
-
+exports.removeChildFromContainer = removeChildFromContainer;
 function commitTextUpdate(textInstance, oldText, newText) {
-  console.error('Text components are not yet supported in ReactKonva. You text is: "' + newText + '"');
+    console.error(`Text components are not yet supported in ReactKonva. You text is: "${newText}"`);
 }
-
+exports.commitTextUpdate = commitTextUpdate;
 function commitMount(instance, type, newProps) {
-  // Noop
+    // Noop
 }
-
+exports.commitMount = commitMount;
 function commitUpdate(instance, updatePayload, type, oldProps, newProps) {
-  (0, _makeUpdates.applyNodeProps)(instance, newProps, oldProps);
+    (0, makeUpdates_1.applyNodeProps)(instance, newProps, oldProps);
 }
-
+exports.commitUpdate = commitUpdate;
 function hideInstance(instance) {
-  instance.hide();
-  (0, _makeUpdates.updatePicture)(instance);
+    instance.hide();
+    (0, makeUpdates_1.updatePicture)(instance);
 }
-
+exports.hideInstance = hideInstance;
 function hideTextInstance(textInstance) {
-  // Noop
+    // Noop
 }
-
+exports.hideTextInstance = hideTextInstance;
 function unhideInstance(instance, props) {
-  if (props.visible == null || props.visible) {
-    instance.show();
-  }
+    if (props.visible == null || props.visible) {
+        instance.show();
+    }
 }
-
+exports.unhideInstance = unhideInstance;
 function unhideTextInstance(textInstance, text) {
-  // Noop
+    // Noop
 }
-
+exports.unhideTextInstance = unhideTextInstance;
 function clearContainer(container) {
-  // Noop
-}
+    // Noop
+}
+exports.clearContainer = clearContainer;
+function detachDeletedInstance() { }
+exports.detachDeletedInstance = detachDeletedInstance;
+const getCurrentEventPriority = () => constants_1.DefaultEventPriority;
+exports.getCurrentEventPriority = getCurrentEventPriority;

package.json

@@ -5,3 +5,3 @@ {
   "description": "React binding to canvas element via Konva framework",
-  "version": "17.0.2-6",
+  "version": "18.0.0-0",
   "keywords": [
@@ -21,6 +21,8 @@ "react",
   "dependencies": {
-    "@types/react-reconciler": "~0.26.2",
-    "react-reconciler": "~0.26.2",
-    "scheduler": "^0.20.2"
+    "react-reconciler": "~0.27.0",
+    "scheduler": "^0.21.0"
   },
+  "targets": {
+    "none": {}
+  },
   "funding": [
@@ -42,29 +44,30 @@ {
     "konva": "^8.0.1 || ^7.2.5",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@types/react": "17.0.6",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.6.1",
-    "chai": "4.3.4",
-    "enzyme": "3.11.0",
-    "konva": "^8.0.1",
-    "nwb": "0.23.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "sinon": "^9.2.2",
-    "typescript": "^4.2.4",
-    "use-image": "^1.0.7"
+    "@types/chai": "^4.3.0",
+    "@types/mocha": "^9.1.0",
+    "@types/react": "18.0.1",
+    "chai": "4.3.6",
+    "konva": "^8.3.5",
+    "mocha-headless-chrome": "^4.0.0",
+    "parcel": "^2.4.1",
+    "process": "^0.11.10",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "sinon": "^13.0.1",
+    "typescript": "^4.6.3",
+    "use-image": "^1.0.12",
+    "util": "^0.12.4"
   },
   "scripts": {
-    "build": "nwb build-react-component && cp ./ReactKonvaCore.d.ts ./lib && cp ./ReactKonvaCore.d.ts ./es",
-    "clean": "nwb clean-module && nwb clean-demo",
-    "start": "nwb serve-react-demo",
-    "test": "nwb test-react && npm run test:typings",
+    "build": " tsc -outDir ./es &&  tsc -module commonjs -outDir ./lib && cp ./ReactKonvaCore.d.ts ./lib && cp ./ReactKonvaCore.d.ts ./es",
     "test:typings": "tsc --noEmit",
-    "test:coverage": "nwb test-react --coverage",
-    "test:watch": "nwb test-react --server",
     "preversion": "npm test",
     "version": "npm run build",
-    "postversion": ""
+    "postversion": "",
+    "test": "npm run test:build && mocha-headless-chrome -f ./test-build/unit-tests.html -a disable-web-security && npm run test:typings",
+    "test:build": "parcel build ./test/unit-tests.html --dist-dir test-build --target none --public-url ./ --no-source-maps",
+    "test:watch": "rm -rf ./parcel-cache && parcel serve ./test/unit-tests.html"
   },
@@ -71,0 +74,0 @@ "typings": "react-konva.d.ts",

ReactKonvaCore.d.ts

@@ -37,3 +37,3 @@ // special file for minimal import
   // component type.
-> extends React.SFC<Props & KonvaNodeEvents & React.ClassAttributes<Node>> {
+> extends React.FC<Props & KonvaNodeEvents & React.ClassAttributes<Node>> {
   getPublicInstance(): Node;
@@ -40,0 +40,0 @@ getNativeNode(): Node;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

57642

increased by6.24%

Dependency count

5

decreased by-16.67%

Lines of code

1128

increased by5.62%

Worsened metrics

Dev dependency count

14

increased by27.27%

Dependency changes

• + Addedreact-reconciler@0.27.0(transitive)

• + Addedscheduler@0.21.0(transitive)

• - Removed@types/react-reconciler@~0.26.2

• - Removed@types/prop-types@15.7.13(transitive)

• - Removed@types/react@18.3.10(transitive)

• - Removed@types/react-reconciler@0.26.7(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedreact@17.0.2(transitive)

• - Removedreact-reconciler@0.26.2(transitive)

• - Removedscheduler@0.20.2(transitive)

• Updatedreact-reconciler@~0.27.0

• Updatedscheduler@^0.21.0