support React 17

.storybook/preview.js

@@ -1,10 +1,4 @@
 import { addParameters } from '@storybook/react';
-import { setDefaults } from '@storybook/addon-info';
-
-// // addon-info
-setDefaults({
-  header: false, // Toggles display of header with component name and description
-});
 
 // Option defaults:
 addParameters({

package.json

@@ -55,18 +55,16 @@
     "@inlet/react-pixi": "^1.2.8",
     "@rollup/plugin-json": "^4.0.2",
     "@rollup/plugin-typescript": "^4.0.0",
-    "@storybook/addon-actions": "^6.0.22",
-    "@storybook/addon-info": "^6.0.0-alpha.2",
-    "@storybook/addon-links": "^6.0.22",
-    "@storybook/addon-notes": "^6.0.0-alpha.6",
-    "@storybook/addon-storysource": "^6.0.22",
-    "@storybook/addons": "^6.0.22",
-    "@storybook/react": "^6.0.22",
-    "@storybook/source-loader": "^6.0.22",
-    "@storybook/theming": "^6.0.22",
+    "@storybook/addon-actions": "^6.0.27",
+    "@storybook/addon-links": "^6.0.27",
+    "@storybook/addon-storysource": "^6.0.27",
+    "@storybook/addons": "^6.0.27",
+    "@storybook/react": "^6.0.27",
+    "@storybook/source-loader": "^6.0.27",
+    "@storybook/theming": "^6.0.27",
     "@types/lodash.camelcase": "^4.3.6",
     "@types/node": "^8.0.0",
-    "@types/react": "^16.7.20",
+    "@types/react": "^16.9.55",
     "@types/react-reconciler": "^0.18.0",
     "babel-loader": "^8.1.0",
     "cannon": "^0.6.2",
@@ -80,15 +78,15 @@
     "pixi-projection": "^0.3.11",
     "pixi.js": "^5.2.1",
     "prettier": "^1.15.3",
-    "react": "^16.13.1",
+    "react": "^17.0.1",
     "react-babylon-spring": "^1.0.2",
-    "react-dom": "^16.13.1",
+    "react-dom": "^17.0.1",
     "react-three-gui": "^0.3.1",
     "rimraf": "^2.6.1",
     "rollup": "^2.0.6",
     "rollup-plugin-terser": "^5.3.0",
     "rollup-plugin-typescript2": "^0.26.0",
-    "storybook": "^6.0.22",
+    "storybook": "^6.0.27",
     "ts-morph": "^8.1.0",
     "ts-node": "^7.0.1",
     "tsc-watch": "^1.0.31",
@@ -103,8 +101,8 @@
     "@babylonjs/gui": "4.x",
     "@babylonjs/inspector": "4.x",
     "@babylonjs/loaders": "4.x",
-    "react": ">=16",
-    "react-dom": ">=16"
+    "react": ">=17",
+    "react-dom": ">=17"
   },
   "dependencies": {
     "react-reconciler": "^0.26.1"

src/ReactBabylonJSHostConfig.ts

@@ -454,62 +454,59 @@ const ReactBabylonJSHostConfig: HostConfig<
     // here we dynamically assign listeners for specific types.
     // TODO: need to double-check because we are using 'camelCase'
     if ((CUSTOM_HOSTS as any)[underlyingClassName + "LifecycleListener"] !== undefined) {
-      lifecycleListener = new (CUSTOM_HOSTS as any)[underlyingClassName + "LifecycleListener"](scene, props)
+      lifecycleListener = new (CUSTOM_HOSTS as any)[underlyingClassName + "LifecycleListener"](scene, props);
     }
 
-    let createdReference = createCreatedInstance(underlyingClassName, babylonObject, fiberObject, metadata, customProps, lifecycleListener)
+    let createdReference = createCreatedInstance(underlyingClassName, babylonObject, fiberObject, metadata, customProps, lifecycleListener);
 
     if (lifecycleListener && lifecycleListener.onCreated) {
-      lifecycleListener.onCreated(createdReference, scene!)
+      lifecycleListener.onCreated(createdReference, scene!);
     }
 
     // Here we dynamically attach known props handlers.  Will be adding more in code generation for GUI - also for lifecycle mgmt.
     if (createdReference.metadata && createdReference.metadata.isTargetable === true) {
-      fiberObject.addPropsHandler(new CUSTOM_HOSTS.TargetPropsHandler(scene!))
+      fiberObject.addPropsHandler(new CUSTOM_HOSTS.TargetPropsHandler(scene!));
     }
 
     if (metadata.delayCreation !== true) {
       applyInitialPropsToInstance(createdReference, props);
     } else {
       createdReference.deferredCreationProps = props;
     }
-    return createdReference
+    return createdReference;
   },
 
   shouldDeprioritizeSubtree: (type: string, props: Props): boolean => {
-    return false
+    return false;
   },
 
-  hideInstance(instance: HostCreatedInstance<any>) {},
+  hideInstance(instance: HostCreatedInstance<any>): void {},
 
-  unhideInstance(instance: HostCreatedInstance<any>, props: Props) {},
+  unhideInstance(instance: HostCreatedInstance<any>, props: Props): void {},
 
-  createTextInstance: (text: string): any => {
-    console.warn(`you have text that will be ignored ${text} (unsupported in react-babylonjs)`)
-    return undefined
-  },
+  createTextInstance (text: string): any {},
 
   scheduleDeferredCallback(callback: (deadline: RequestIdleCallbackDeadline) => void, opts?: RequestIdleCallbackOptions | undefined): any {
     return window.requestIdleCallback(callback, opts) // ReactDOMHostConfig has: unstable_scheduleCallback as scheduleDeferredCallback
   },
 
   cancelDeferredCallback(handle: any): void {
-    return window.cancelIdleCallback(handle)
+    return window.cancelIdleCallback(handle);
   },
 
   setTimeout(handler: (...args: any[]) => void, timeout: number): TimeoutHandler {
-    return window.setTimeout(handler)
+    return window.setTimeout(handler);
   },
 
   clearTimeout(handle?: number | undefined): void {
-    window.clearTimeout(handle)
+    window.clearTimeout(handle);
   },
 
   // https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMHostConfig.js#L288
   noTimeout: -1,
 
   // Called based on return value of: finalizeInitialChildren.  in-memory render tree created, but not yet attached.
-  prepareForCommit: (containerInfo: Container): void => { /* empty */ },
+  prepareForCommit: (containerInfo: Container) => { return null; },
 
   // Called after the in-memory tree has been committed (ie: after attaching again to root element)
   resetAfterCommit: (containerInfo: Container): void => { /* empty */ },