Code cleanup

Author: antoninkriz

package.json

@@ -50,13 +50,14 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
-    "@storybook/addon-actions": "^7.0.0-beta.25",
-    "@storybook/addon-essentials": "^7.0.0-beta.25",
-    "@storybook/addon-interactions": "^7.0.0-beta.25",
-    "@storybook/addon-links": "^7.0.0-beta.25",
-    "@storybook/react": "^7.0.0-beta.25",
-    "@storybook/react-webpack5": "^7.0.0-beta.25",
+    "@storybook/addon-actions": "^7.0.0-beta.28",
+    "@storybook/addon-essentials": "^7.0.0-beta.28",
+    "@storybook/addon-interactions": "^7.0.0-beta.28",
+    "@storybook/addon-links": "^7.0.0-beta.28",
+    "@storybook/react": "^7.0.0-beta.28",
+    "@storybook/react-webpack5": "^7.0.0-beta.28",
     "@storybook/testing-library": "^0.0.14-next.1",
+    "@types/react-reconciler": "^0.28.2",
     "alea": "^1.0.1",
     "babel-loader": "^9.1.2",
     "d3-scale": "^4.0.2",
@@ -71,21 +72,22 @@
     "eslint-plugin-storybook": "^0.6.10",
     "lodash.range": "^3.2.0",
     "prettier": "^2.8.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "==18.2.0",
+    "react-dom": "==18.2.0",
     "rimraf": "^3.0.2",
-    "storybook": "^7.0.0-beta.25"
+    "storybook": "^7.0.0-beta.28"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "==18.2.0",
+    "react-dom": "==18.2.0"
   },
   "dependencies": {
     "css-layout": "^1.1.1",
     "css-line-break": "^2.1.0",
     "invariant": "^2.2.4",
     "multi-key-cache": "^1.0.2",
     "prop-types": "^15.8.1",
-    "react-reconciler": "^0.29.0"
+    "react-reconciler": "==0.28.0",
+    "scheduler": "==0.22.0"
   }
 }

src/Canvas.js

@@ -22,7 +22,7 @@ Object.assign(Canvas.prototype, {
   },
 
   getContext() {
-    return this._canvas?.getContext('2d')
+    return this._canvas ? this._canvas.getContext('2d') : undefined
   }
 })
 

src/CanvasRenderer.js

@@ -2,6 +2,7 @@ import React from 'react'
 import invariant from 'invariant'
 import ReactFiberReconciler from 'react-reconciler'
 import { DefaultEventPriority } from 'react-reconciler/constants'
+import { unstable_now as now } from 'scheduler'
 import { emptyObject } from './utils'
 import Gradient from './Gradient'
 import Text from './Text'
@@ -50,38 +51,12 @@ const freeComponentAndChildren = (c) => {
   freeComponentToPool(c)
 }
 
+/** @type {ReactFiberReconciler.HostConfig} */
 const CanvasHostConfig = {
-  supportsHydration: false,
-  supportsPersistence: true,
-  cancelTimeout: clearTimeout,
-  scheduleTimeout: setTimeout,
-  noTimeout: -1,
-  detachDeletedInstance() {},
-  getInstanceFromScope() {
-    return null
-  },
-  preparePortalMount() {},
-  afterActiveInstanceBlur() {},
-  beforeActiveInstanceBlur() {},
-  getCurrentEventPriority() {
-    return DefaultEventPriority
-  },
-  getInstanceFromNode() {
-    return undefined
-  },
-  prepareScopeUpdate() {},
-  clearContainer() {},
-  appendInitialChild(parentInstance, child) {
-    if (typeof child === 'string') {
-      // Noop for string children of Text (eg <Text>{'foo'}{'bar'}</Text>)
-      invariant(false, 'Text children should already be flattened.')
-      return
-    }
-
-    child.getLayer().inject(parentInstance.getLayer())
-  },
+  supportsMutation: true,
+  supportsPersistence: false,
 
-  createInstance(type, props /* , internalInstanceHandle */) {
+  createInstance(type, props) {
     let instance
 
     const pool = componentPool[type]
@@ -100,34 +75,32 @@ const CanvasHostConfig = {
     return instance
   },
 
-  createTextInstance(
-    text /* , rootContainerInstance, internalInstanceHandle */
-  ) {
+  createTextInstance(text) {
     return text
   },
 
-  finalizeInitialChildren(/* domElement, type, props */) {
-    return false
-  },
+  appendInitialChild(parentInstance, child) {
+    if (typeof child === 'string') {
+      // Noop for string children of Text (eg <Text>{'foo'}{'bar'}</Text>)
+      invariant(false, 'Text children should already be flattened.')
+      return
+    }
 
-  getPublicInstance(instance) {
-    return instance
+    child.getLayer().inject(parentInstance.getLayer())
   },
 
-  prepareForCommit() {
-    return null
+  finalizeInitialChildren() {
+    return false
   },
 
-  prepareUpdate(/* domElement, type, oldProps, newProps */) {
+  prepareUpdate() {
     return UPDATE_SIGNAL
   },
 
-  resetAfterCommit() {
-    // Noop
-  },
-
-  shouldDeprioritizeSubtree(/* type, props */) {
-    return false
+  shouldSetTextContent(type, props) {
+    return (
+      typeof props.children === 'string' || typeof props.children === 'number'
+    )
   },
 
   getRootHostContext() {
@@ -138,15 +111,31 @@ const CanvasHostConfig = {
     return emptyObject
   },
 
-  shouldSetTextContent(type, props) {
-    return (
-      typeof props.children === 'string' || typeof props.children === 'number'
-    )
+  getPublicInstance(instance) {
+    return instance
   },
 
-  isPrimaryRenderer: false,
+  prepareForCommit() {
+    return null
+  },
 
-  supportsMutation: true,
+  resetAfterCommit() {
+    // Noop
+  },
+
+  preparePortalMount() {},
+
+  now,
+
+  scheduleTimeout: setTimeout,
+
+  cancelTimeout: clearTimeout,
+
+  noTimeout: -1,
+
+  queueMicrotask,
+
+  isPrimaryRenderer: false,
 
   appendChild(parentInstance, child) {
     const childLayer = child.getLayer()
@@ -161,6 +150,26 @@ const CanvasHostConfig = {
     parentLayer.invalidateLayout()
   },
 
+  getCurrentEventPriority() {
+    return DefaultEventPriority
+  },
+
+  getInstanceFromNode() {
+    return undefined
+  },
+
+  beforeActiveInstanceBlur() {},
+
+  afterActiveInstanceBlur() {},
+
+  prepareScopeUpdate() {},
+
+  getInstanceFromScope() {
+    return null
+  },
+
+  detachDeletedInstance() {},
+
   appendChildToContainer(parentInstance, child) {
     const childLayer = child.getLayer()
     const parentLayer = parentInstance.getLayer()
@@ -205,7 +214,11 @@ const CanvasHostConfig = {
       instance.applyLayerProps(oldProps, newProps)
       instance.getLayer().invalidateLayout()
     }
-  }
+  },
+
+  clearContainer() {},
+
+  supportsHydration: false
 }
 
 const CanvasRenderer = ReactFiberReconciler(CanvasHostConfig)

src/Surface.js

@@ -75,7 +75,7 @@ class Surface extends React.Component {
   // =======
   getLayer = () => this.node
 
-  getContext = () => this.canvas?.getContext('2d')
+  getContext = () => (this.canvas ? this.canvas.getContext('2d') : undefined)
 
   scale = () => {
     const ctx = this.getContext()