Added support for React 16.6.0

Author: Tomáš Vojtášek

package.json

@@ -42,8 +42,8 @@
     "eslint-plugin-react": "^7.8.2",
     "lodash.range": "^3.2.0",
     "prettier": "^1.12.1",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0",
     "rimraf": "^2.6.2"
   },
   "peerDependencies": {
@@ -53,10 +53,11 @@
   "dependencies": {
     "@craigmorton/linebreak": "^0.4.5",
     "css-layout": "^1.1.1",
-    "fbjs": "^0.8.16",
+    "fbjs": "^1.0.0",
     "multi-key-cache": "^1.0.2",
     "prop-types": "^15.6.1",
-    "react-reconciler": "^0.10.0",
+    "react-reconciler": "^0.16.0",
+    "scheduler": "^0.10.0",
     "scroller": "https://github.com/mjohnston/scroller"
   }
 }

src/CanvasRenderer.js

@@ -5,7 +5,11 @@ import Gradient from "./Gradient";
 import Text from "./Text";
 import Group from "./Group";
 import { RawImage } from "./Image";
-import ReactDOMFrameScheduling from "./ReactDOMFrameScheduling";
+import {
+  unstable_now as now,
+  unstable_scheduleWork as scheduleDeferredCallback,
+  unstable_cancelScheduledWork as cancelDeferredCallback
+} from 'scheduler'
 import ReactFiberReconciler from "react-reconciler";
 import CanvasComponent from "./CanvasComponent";
 import { getClosestInstanceFromNode } from "./ReactDOMComponentTree";
@@ -120,86 +124,88 @@ const CanvasHostConfig = {
     return emptyObject;
   },
 
-  scheduleDeferredCallback: ReactDOMFrameScheduling.rIC,
+  scheduleDeferredCallback,
+  cancelDeferredCallback,
 
   shouldSetTextContent(type, props) {
     return (
       typeof props.children === "string" || typeof props.children === "number"
     );
   },
 
-  now: ReactDOMFrameScheduling.now,
+  now,
 
   isPrimaryRenderer: false,
 
   useSyncScheduling: true,
 
-  mutation: {
-    appendChild(parentInstance, child) {
-      const childLayer = child.getLayer();
-      const parentLayer = parentInstance.getLayer();
-
-      if (childLayer.parentLayer === parentLayer) {
-        childLayer.moveToTop();
-      } else {
-        childLayer.inject(parentLayer);
-      }
-
-      parentLayer.invalidateLayout();
-    },
-
-    appendChildToContainer(parentInstance, child) {
-      const childLayer = child.getLayer();
-      const parentLayer = parentInstance.getLayer();
-
-      if (childLayer.parentLayer === parentLayer) {
-        childLayer.moveToTop();
-      } else {
-        childLayer.inject(parentLayer);
-      }
-
-      parentLayer.invalidateLayout();
-    },
-
-    insertBefore(parentInstance, child, beforeChild) {
-      const parentLayer = parentInstance.getLayer();
-      child.getLayer().injectBefore(parentLayer, beforeChild.getLayer());
-      parentLayer.invalidateLayout();
-    },
-
-    insertInContainerBefore(parentInstance, child, beforeChild) {
-      const parentLayer = parentInstance.getLayer();
-      child.getLayer().injectBefore(parentLayer, beforeChild.getLayer());
-      parentLayer.invalidateLayout();
-    },
-
-    removeChild(parentInstance, child) {
-      const parentLayer = parentInstance.getLayer();
-      child.getLayer().remove();
-      freeComponentAndChildren(child);
-      parentLayer.invalidateLayout();
-    },
-
-    removeChildFromContainer(parentInstance, child) {
-      const parentLayer = parentInstance.getLayer();
-      child.getLayer().remove();
-      freeComponentAndChildren(child);
-      parentLayer.invalidateLayout();
-    },
-
-    commitTextUpdate(/*textInstance, oldText, newText*/) {
-      // Noop
-    },
-
-    commitMount(/*instance, type, newProps*/) {
-      // Noop
-    },
-
-    commitUpdate(instance, updatePayload, type, oldProps, newProps) {
-      if (typeof instance.applyLayerProps !== "undefined") {
-        instance.applyLayerProps(oldProps, newProps);
-        instance.getLayer().invalidateLayout();
-      }
+  supportsMutation: true,
+
+  // mutation
+  appendChild(parentInstance, child) {
+    const childLayer = child.getLayer();
+    const parentLayer = parentInstance.getLayer();
+
+    if (childLayer.parentLayer === parentLayer) {
+      childLayer.moveToTop();
+    } else {
+      childLayer.inject(parentLayer);
+    }
+
+    parentLayer.invalidateLayout();
+  },
+
+  appendChildToContainer(parentInstance, child) {
+    const childLayer = child.getLayer();
+    const parentLayer = parentInstance.getLayer();
+
+    if (childLayer.parentLayer === parentLayer) {
+      childLayer.moveToTop();
+    } else {
+      childLayer.inject(parentLayer);
+    }
+
+    parentLayer.invalidateLayout();
+  },
+
+  insertBefore(parentInstance, child, beforeChild) {
+    const parentLayer = parentInstance.getLayer();
+    child.getLayer().injectBefore(parentLayer, beforeChild.getLayer());
+    parentLayer.invalidateLayout();
+  },
+
+  insertInContainerBefore(parentInstance, child, beforeChild) {
+    const parentLayer = parentInstance.getLayer();
+    child.getLayer().injectBefore(parentLayer, beforeChild.getLayer());
+    parentLayer.invalidateLayout();
+  },
+
+  removeChild(parentInstance, child) {
+    const parentLayer = parentInstance.getLayer();
+    child.getLayer().remove();
+    freeComponentAndChildren(child);
+    parentLayer.invalidateLayout();
+  },
+
+  removeChildFromContainer(parentInstance, child) {
+    const parentLayer = parentInstance.getLayer();
+    child.getLayer().remove();
+    freeComponentAndChildren(child);
+    parentLayer.invalidateLayout();
+  },
+
+  commitTextUpdate(/*textInstance, oldText, newText*/) {
+    // Noop
+  },
+
+  commitMount(/*instance, type, newProps*/) {
+    // Noop
+  },
+
+  commitUpdate(instance, updatePayload, type, oldProps, newProps) {
+    if (typeof instance.applyLayerProps !== "undefined") {
+      instance.applyLayerProps(oldProps, newProps);
+      instance.getLayer().invalidateLayout();
     }
   }
 };
@@ -216,8 +222,11 @@ CanvasRenderer.injectIntoDevTools({
   }
 });
 
-CanvasRenderer.registerComponentConstructor = (name, ctor) => {
+const registerComponentConstructor = (name, ctor) => {
   componentConstructors[name] = ctor;
 };
 
-export default CanvasRenderer;
+export {
+  CanvasRenderer,
+  registerComponentConstructor
+};

src/index.js

@@ -6,7 +6,7 @@ import FontFace from "./FontFace";
 import FrameUtils from "./FrameUtils";
 import measureText from "./measureText";
 import CanvasComponent from "./CanvasComponent";
-import CanvasRenderer from "./CanvasRenderer";
+import { CanvasRenderer, registerComponentConstructor } from "./CanvasRenderer";
 import { registerLayerType } from "./DrawingUtils";
 
 Surface.canvasRenderer = CanvasRenderer;
@@ -28,7 +28,7 @@ const registerCustomComponent = function(name, applyProps, drawFunction) {
     };
   };
 
-  CanvasRenderer.registerComponentConstructor(name, klass);
+  registerComponentConstructor(name, klass);
 
   return name;
 };